How to have instant type:answer feedback?

Card Design
14

Hey, some of use want a shot at coding stuff for free as well.

Just kidding, but to answer your request, and since Matthias has already done the heavy lifting, this is an easy fix. You don’t even need to compare substrings anymore.

JS:

<script>
  (() => {
   /**
   * Type-in-the-answer live feedback for Anki (vague variant)
   * @author Matthias Metelka | @kleinerpirat
   */
    const input = document.getElementById("typeans");
    const answer = "{{Answer}}";
    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>

CSS

#typeans.typed {
  background: red;
}
#typeans.typed.goodsofar {
  background: yellow;
}
#typeans.typed.correct {
  background: green;
}

I haven’t done a lot of testing, but this should do the trick.

6 Likes