Instant Type Answer Feedback - problem and fix

The template works on ankidroid. I use all the suggested fixes and improvements suggested by users.

Summary
	{{type:Word}}
	<div id="answer-field" hidden>{{Word}}</div>

<script>
  (() => {
   /**
   * Type-in-the-answer live feedback for Anki (vague variant)
   * @author Matthias Metelka | @kleinerpirat
   */
    const input = document.getElementById("typeans");
    const answer = document.getElementById("answer-field").innerHTML;
    if (input) {
      input.addEventListener("input", () => {
        input.classList.add("typed");
        input.classList.toggle(
          "goodsofar",
          input.value == answer.substring(0, input.value.length)
        );
        input.classList.toggle(
          "correct",
          input.value == answer
        );
      });
    }
  })();
</script>
Summary

{{type:Word}}

Summary
#typeans.typed {

background: red;

}

#typeans.typed.goodsofar {

background: yellow;

}

#typeans.typed.correct {

background: green;

}
1 Like