Instant Type Answer Feedback - problem and fix

[lesca]

Hello everyone,

I’ve recently encountered an issue with Anki’s “type answer” feature. The current default behavior is that after submitting an answer, you only find out whether your input was correct or not. However, if the answer is wrong, there’s no option to correct and re-enter it. This can be frustrating, as getting positive feedback on the correct answer is crucial for long-term memory retention.

After looking into some forum discussions, including this How to have instant type:answer feedback? (link is not allowed for me), I found that Cloze cards can provide real-time feedback, but unfortunately, this isn’t the case for regular “type” cards. In the same thread, @kleinerpirat shared a solution that could help, but it’s a little bit complex and it doesn’t work with AnkiDroid, which I use every often.

To address this, I’ve created a simplified version of the solution that works both on Anki desktop and AnkiDroid. I’d like to share it here, as it might be useful to others facing the same issue.

Update: check if all correct

<script>
  (() => {
    const input = document.getElementById("typeans");
    const word = "{{单词}}";

    input.addEventListener("input", () => {
      const letters = input.value.split("");
      
      let allCorrect = true;
      letters.forEach((letter, i) => {
        if (allCorrect && letter === word[i]) {
          input.style.color = "green";
        } else {
          input.style.color = "red";
          allCorrect = false;
        }
      });

    });
  })();
</script>

When everything is good:

When you mistype a letter:

Lastly, I hope that the Anki team can consider adding this feature officially or, at the very least, allowing users to re-enter their answer until it’s correct before they grade themselves (hard / good).

Regards,
Lesca

[Keks]

How to have instant type:answer feedback?

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.add…

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;

}

[lesca]

Ah… I tried the wrong version. But thanks for point out the working version. Now there are two working versions.

[addons_zz]

@lesca

However, if the answer is wrong, there’s no option to correct and re-enter it.

For cards I want to practice typing, I add this table to the back of the card, so I can retype them in case I guessed wrong:

<table style="width: 100%;">
  <tr>
     <td>
        <input type="text" id="try" class="typeans" style="">
     </td>
     <td>
        <input type="text" id="get" class="typeans" style="" value="{{Hiragana}}">
     </td>
  </tr>
</table>

<script>
function tryinput(event)  {
    if( $('#try').val() )
    {
        if( $('#try').val() != $('#get').val() ) {
            $('#try').css({'background-color': 'red'});
        }
        else {
            $('#try').css({'background-color': '#0f0'});
        }
    }
    else {
        $('#try').css({'background-color': 'white'});
    }
}
$('#try').on('compositionstart', tryinput);
$('#try').on('compositionend', tryinput);
$('#try').on('compositionupdate', tryinput);
$('#try').on('change', tryinput);
$('#try').on('keyup', tryinput);
$('#try').on('keydown', tryinput);
</script>

[lesca]

@addons_zz Thanks, what a great idea!!

I updated the back of card with input object instead of using the {{type:单词}}. To simplify the hint of correct answers, I use the placehoder attribute, as below:

<input type="text" id="retype" placeholder="{{单词}}">

As a hint of the correct answer, it is gray:

In combination with the instant feedback script, we can now type it again at the back side. It is green when everything is right.

It becomes red if it’s wrong.

this is the script for retype at the back side of the card:

• if answer is right, it shows the correct answer
• if answer is wrong, it shows the retype input box
• and when you type letters, it checkes the answer as it does in the front side
• when you finish input, hit “Enter” to grade the card as Hard (ease2).

<script type="text/javascript">
  (() => {
    let typeans = document.getElementById("typeans");
    let retypeInput = document.getElementById("retype");
    let word = "{{单词}}";

    // script to check if the word is correct
    if (typeans && typeans.textContent.includes("↓")) {
      // answer is not correct
      typeans.style.display = "none";
      retypeInput.focus();
    } else {
      // answer is correct
      retypeInput.style.display = "none";
    }

    // script to handle input event in retypeInput
    retypeInput.addEventListener("input", () => {
      let letters = retypeInput.value.split("");
      let allCorrect = true;

      letters.forEach((letter, i) => {
        if (allCorrect && letter === word[i]) {
          retypeInput.style.color = "green";
        } else {
          retypeInput.style.color = "red";
          allCorrect = false;
        }
      });
    });

    // ease2 (hard) when enter key is pressed in retypeInput
    retypeInput.addEventListener("keydown", (event) => {
      if (event.key === "Enter") {
        pycmd('ease2');
      }
    });
  })();
</script>