How to have instant type:answer feedback?

Anki Card Design
9

If you don’t want to see the exact location of the error, this becomes a much simpler matter:

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

CSS

#typeans.typed {
  background: red;
}
#typeans.typed.correct {
  background: green;
}
7 Likes