Spelling Card template

[Sweetins]

Am trying to create a note template for learning spelling on anki. Am looking forward for the front of the card to show the word and a cover button which when pressed starts an effect that covers the word gradually from left to right in an animation sense and provide a input field for the word to be typed. When the show answer button is pressed, the input text is then compared with the word and I can then rate my answer with Again or Good.

The challenges in the templates below is as following challenges.

• The comparison between the input text and {{word}} doesn’t work (both on ankidroid and anki). When the wrong text (or no text) is entered, it still shows as correct.
• When the Input field shows after the word has been covered, a keyboard doesn’t pop up for typing in ankidroid.

Front Template:

<div id="word-container">
  <span id="word">{{Word}}</span>
  <div id="cover"></div>
</div>

<!-- Input area initially hidden -->
<div id="input-container" style="display:none;"></div>

<!-- Cover button placed at the bottom -->
<div id="bottom-btn-container">
  <button id="coverBtn">Cover</button>
</div>

<script>
(function() {
  const btn = document.getElementById('coverBtn');
  const cover = document.getElementById('cover');
  const inputContainer = document.getElementById('input-container');

  if (btn) {
    btn.addEventListener('click', () => {
      btn.disabled = true;
      cover.style.width = '100%';

      // Wait for animation to finish
      setTimeout(() => {
        // Create the input dynamically (ensures it's a user-initiated gesture)
        inputContainer.innerHTML = `
          <p>Type the word:</p>
          <input id="answerInput" type="text" autocapitalize="none" autocomplete="off" />
        `;
        inputContainer.style.display = 'block';

        // Focus input (should trigger keyboard on AnkiDroid)
        const input = document.getElementById('answerInput');
        if (input) input.focus();
      }, 2000); // matches animation speed
    });
  }
})();
</script>

Back Template:

<div id="result"></div>
<div id="correct-word"><strong>Correct:</strong> {{Word}}</div>

<script>
(function() {
  const userInput = document.getElementById('answerInput');
  const correctWord = '{{Word}}'.trim();
  const resultDiv = document.getElementById('result');
  const card = document.body;

  if (userInput && resultDiv) {
    const userAnswer = userInput.value.trim();

    if (userAnswer.toLowerCase() === correctWord.toLowerCase()) {
      resultDiv.textContent = '✅ Correct!';
      resultDiv.className = 'correct';
      card.classList.add('bg-correct');
    } else {
      resultDiv.textContent = `❌ Incorrect: You typed "${userAnswer}"`;
      resultDiv.className = 'incorrect';
      card.classList.add('bg-incorrect');
    }
  }
})();
</script>

CSS:

.card {
  font-family: Arial, sans-serif;
  text-align: center;
  font-size: 26px;
  position: relative;
  padding: 20px;
  border-radius: 12px;
  transition: background-color 0.5s ease;
}

/* Word display */
#word-container {
  display: inline-block;
  position: relative;
  margin-bottom: 20px;
  font-size: 32px;
}

#word {
  position: relative;
  z-index: 1;
  color: black;
}

/* The cover animation */
#cover {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0%;
  background-color: #000000; /* fully opaque */
  opacity: 1;
  z-index: 2;
  transition: width 2s linear;
}

/* Input field */
#input-container {
  margin-top: 20px;
}

input {
  font-size: 20px;
  padding: 6px;
  text-align: center;
  width: 80%;
  max-width: 250px;
}

/* Bottom Cover button */
#bottom-btn-container {
  position: fixed;
  bottom: 80px; /* keeps above the Show Answer button */
  left: 0;
  width: 100%;
  text-align: center;
}

#coverBtn {
  padding: 10px 20px;
  border: none;
  background-color: #007bff;
  color: white;
  font-size: 18px;
  border-radius: 6px;
}

#coverBtn:disabled {
  background-color: #aaa;
}

/* Feedback colors */
.correct {
  color: green;
}

.incorrect {
  color: red;
}

.bg-correct {
  background-color: #d4edda;
}

.bg-incorrect {
  background-color: #f8d7da;
}

[Eltaurus]

@Sweetins

• The comparison between the input text and {{word}} doesn’t work (both on ankidroid and anki). When the wrong text (or no text) is entered, it still shows as correct.

I’m not sure what was the idea behind the provided code, but the backside tries using document.getElementById('answerInput') when no such element exists in the first place. So, naturally, it doesn’t compare anything because user input remains undefined.
An actual solution for a custom input method would typically involve using sessionStorage to pass what was typed on the front side to the back of a card. However, the original task doesn’t seem to require anything that can’t be done with the stock Anki typing, so can you provide some background on why you decided to go through the trouble of coding a custom <input> instead of simply using {{type:Word}}?

---

@Sweetins

• When the Input field shows after the word has been covered, a keyboard doesn’t pop up for typing in ankidroid.

You need to enable Type answer into the card in the AnkiDroid settings ( → Advanced → Type answer into the card → toggle ON). Adding the inputmode="text" attribute to your input element should be useful as well.

---

Also, is the provided code AI-generated? Disclosing that would help gauge what kind of response you are expecting.

[Sweetins]

@Eltaurus

so can you provide some background on why you decided to go through the trouble of coding a custom <input> instead of simply using {{type:Word}}

Well… I must say I know very little about what’s going on. It’s AI generated using a custom prompt and it seemed to work when I tried it.

[Eltaurus]

@Sweetins

it seemed to work when I tried it

A working button and the animation are the easy part here, while the logic for processing an answer is missing entirely right now. Developing the input itself into a full-fledged solution would take quite a bit of work, so I would recommend reverting it to the different approach I mentioned:

1. For the front side this would involve using the following code:

   <div id="word-container">
     <span id="word">{{Word}}</span>
     <div id="cover"></div>
   </div>
   
   <div id="input-container" class="hidden">
   	<p>Type the word:</p>
   	{{type:Word}}
   </div>
   
   <div id="bottom-btn-container">
     <button id="coverBtn" onclick="revealTyping(this)">Cover</button>
   </div>
   
   <script>
   function revealTyping(btn) {
     document.getElementById('cover').style.width = '100%';
   	btn.disabled = true;
   
   	setTimeout(() => {
   		document.getElementById('input-container')?.classList.remove('hidden');
   		document.getElementById('typeans')?.focus();
   	}, 2000); // matches animation speed
   }
   </script>
   

   (This can be streamlined further quite a bit, but I tried to keep the layout and the styles intact, because I’m not sure which parts of the design are intentional)
2. For the backside, try simply

   <div id="result"></div>
   <div id="correct-word">{{type:Word}}</div>
   

   to see how it looks, and make only necessary adjustments starting from there.
3. To your previous styles, add the following rule to hide the input block at the start:

   .hidden {
     visibility: hidden;
   }
   

(on the AnkiDroid this will still require enabling Type answer into the card setting I mentioned in the previous comment)

[Sweetins]

@Eltaurus

This can be streamlined further quite a bit, but

Once the idea is appreciated, any fine-tuning is very much welcomed. Am sure a lot of people might find it useful. I was thinking to, somehow, involve a TTS that demand that the said word is spelt and make the showing and covering of the word an alternative. Either way, the adjustment you’ve made works perfectly fine. Thanks

[Eltaurus]

@Sweetins

any fine-tuning is very much welcomed

Designwise, I would get rid of the button entirely and make the word itself clickable (or even the whole card instead, to make it easier to reach on mobile, while adding an Enter shortcut for desktop). The input line itself can cover the word when it appears, instead of it being a separate element. The combined animation will also remove the need for manually syncing the durations between the two currently separate ones.

@Sweetins

involve a TTS that demand that the said word is spelt

You might also want to try cloze cards as one more alternative, which will omit and require to be entered only the difficult sections of a word, to keep the prompt clear and not spoil the answer at the same time.

[Sweetins]

@Eltaurus

to make it easier to reach

My exact thought. If the entire card could be clickable I think that will do.

@Eltaurus

while adding an Enter shortcut for desktop

I realized hitting enter after typing the word goes straight to the answer/back.

@Eltaurus

You might also want to try cloze cards as one more alternative

By using the word alternative, I meant the card appears with a voice prompt with accompanied Input Field (default). If a hint is needed, then one could click a button “show and cover” or the card (as you suggested). The default input field disappears, the word is shown and after a given number of seconds it covered and turned into an Input Field (as you proposed).

Like you clearly point out, a cloze could be yet another hint-option. If a card could creatively combine all three means, and allow the user to opt for an approach depending on the desired ease, I think it will be great.

[Eltaurus]

@Sweetins

I realized hitting enter after typing the word goes straight to the answer/back.

It shouldn’t be a problem, since typing itself will be performed only after the typing field is revealed. So Enter can serve two purposes depending on the state. However, it might require meddling with the app settings and even add-ons/scripts to make it work exactly as intended. A different key can be used instead, for, presumably, less convenient but simpler approach.

@Sweetins

If a card could creatively combine all three means, and allow the user to opt for an approach depending on the desired ease, I think it will be great.

A note can also generate two separate cards at the same time: one for tts+hint and one with the word being clozed.

[Sweetins]

@Eltaurus

A note can also generate two separate cards at the same time: one for tts+hint and one with the word being clozed

Fantastic!! Over to you, then… Kindly let me be the first to test it when it ready.

[Eltaurus]

You’ll simply need to use a cloze note type as a base and structure the code on the front template as follows:

{{#c1}}
...your code for the tts+hint card...
{{/c1}}
{{#c2}}
...your code for the cloze card...
{{/c2}}

Use {{type:cloze:Text}} for the input element. The backside template and the rest can be treated the same way as in regular cards. Mark the full contents of the text field as the first cloze (to get the tts card), then use the second cloze to indicate the parts for the second card (just like a usual cloze). If either of the two clozes is skipped, the note won’t generate the respective type of card, so that can be used to control which one of the two types (or both) you want for each note individually.

---

Alternatively, a regular (non-cloze) note type can be used with two separate predefined card types. Then the tts+hint card type can be created normally. To emulate the cloze card, the difficult parts of the word in the Word field can be marked with bold during note creation. To hide them from the view on the front side of the card, you’ll need to put the Word field into a container:

<div class="clozed">
    {{Word}}
</div>

and add a respective rule that would style the omitted parts in a desired way. For example:

.clozed b {
    color: transparent;
}

In contrast to the cloze card, in this case, the card will expect you to type the full word instead of just the selected parts during the review.