Maybe try this. It is a simplified version of the template I’m currently using:
Front Template:
{{cloze:Text}}
<!----------------------------------------------------->
<script>
var currentCloze = document.querySelectorAll(".cloze");
// Hide the original cloze elements and create input boxes
for (i = 0; i < currentCloze.length; i++) {
currentCloze[i].style.display = "none";
const input = document.createElement("input");
input.type = "text";
input.classList.add("custom_typebox");
currentCloze[i].insertAdjacentElement("afterend", input);
}
var ctb = document.querySelectorAll('.custom_typebox');
// Iterate through custom_typebox elements to set placeholders and adjust widths
for (j = 0; j < ctb.length; j++) {
var text = document.getElementsByClassName('cloze')[j].innerText;
var result = text.replace("[...]", "");
var final_result = result.slice(1,-1);
ctb[j].placeholder = final_result;
// Create a hidden element to calculate the actual width of the placeholder
var hiddenElement = document.createElement('span');
hiddenElement.innerText = final_result;
hiddenElement.style.visibility = 'hidden';
hiddenElement.style.whiteSpace = 'pre'; // Preserve white spaces
// Insert the hidden element into the page and use it to calculate the actual width of the placeholder
document.body.appendChild(hiddenElement);
var placeholderWidth = hiddenElement.getBoundingClientRect().width;
// Remove the hidden element from the page
hiddenElement.parentNode.removeChild(hiddenElement);
// Set the width of the input field
ctb[j].style.width = placeholderWidth + 9 + "px";
}
</script>
<!----------------------------------------------------->
<script>
/**
* Type-in-the-answer live feedback for Anki (vague variant)
* @author Matthias Metelka | @kleinerpirat
* Modified by @jcznk (for cloze compatibility, replacements, etc.)
* Any errors or oversights are to be attributed to me
* Only works with Anki ~ 2.1.56 and more recent versions.
*/
for (i = 0; i < 999; i++) {
(() => {
const input = document.getElementsByClassName('custom_typebox')[i];
const cloze_content = document.getElementsByClassName('cloze')[i].getAttribute("data-cloze").replace(/<.*?>/g, "").replace(/</g, '<').replace(/>/g, '>').replace(/&/g, '&');
const answer = cloze_content;
if (input) {
input.addEventListener("input", () => {
input.classList.add("typed");
input.classList.toggle(
"goodsofar",
input.value.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "") == answer.substring(0, input.value.length).toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "")
);
input.classList.toggle(
"correct",
input.value.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "") == answer.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "")
);
});
}
})();
}
</script>
@jcznk, could you please help me? On the front card, I want to play audio only for c1, c2, and so on, but for some reason, the script returns blank for this TTS code:
Unfortunately, I never used tts in conjunction with cloze deletions, so I have no familiarity with the code.
My first impression, though, is that both your requests are pretty difficult/impossible to accomplish, except maybe by using add-ons or complex workarounds.
On a side note, you might want to add this script to the Front template. I forgot it to include it last time. It allows the use of the Enter key to flip the card, even when the focus is inside a custom typebox.
<script>
for (let i = 0; i < ctb.length; i++) {
ctb[i].addEventListener("keydown", function(event) {
if (event.key === 'Enter') {
if (typeof (pycmd) !== 'undefined') {
ctb[i].blur();
pycmd('ans');
}
}
});
}
</script>
The “Type-in-the-answer live feedback” script I posted does not work on 2.1.54. Some of the code it interacts with (mainly, the data-cloze attribute) was only introduced around version ~ 2.1.56.
Yeh I’ve figured out so I’ve deleted my message, but you’ve been pretty fast on answer my stupid question. Thank you so much!
It’s work seamlessly, the only thing I could figure it out is the @a_ps last code, with the answer box, I mean the script work pretty well just like this so it’s not a real problem.