Displaying Cloze Hint in a seperate Window

Anki Card Design
1

So I got this code from an AI wanting to display the cloze hint for my cloze cards in a separate space on my reviewer. There is indeed a new window in my reviewer created…and that was as far as the AI got.

In theory, the code should work but I don’t know what is the problem and what even the problem is or whether it is even possible in the first place.

Could some perhaps have a look at it. @Shigeyuki

<script>

// Get the cloze deletion text

let clozeText = "{{cloze:Text}}";

// Extract the hint from the cloze deletion text

let hint = clozeText.split("::")[2];

// If there is a hint, display it in the hint window

if (hint) {

document.getElementById("hint-window").innerText = hint;

}

</script>

<div id="hint-window"></diV>
1 Like
2

Yup, I too always think that way in my development.

This code does not seem to show another window on my device.
Perhaps you may want to look for similar code for reference before using AI.
(e.g., a template for displaying windows, a template for displaying hints, etc.)

1 Like
3

I did fetch a new code from Discord.

Here you can try for yourself.

<div id="hint-div" style="position: absolute; top: 0; right: 5px;"></div>

{{edit:cloze:Text}}

<script>

if (document.querySelector(".cloze").textContent != "[...]")
{
  document.getElementById("hint-div").innerHTML = `<div style="border: 1px solid white; color: white; background-color: black; padding: 2px 5px;">${formatHint(document.querySelector(".cloze").textContent)}</div>`;
}

function formatHint(str)
{
        return str.slice(1, -1);
}

</script>

I have put this into Gemini to try and modify it and it came up with this but it did not work. I am now trying to get it to work with the Edit during Cloze addon .


<script>
if (document.querySelector(".cloze").textContent != "[...]") {
  const clozeText = document.querySelector(".cloze").textContent;
  const hintText = formatHint(clozeText);

  document.getElementById("hint-div").innerHTML = `
    <input 
      type="text" 
      value="${hintText}" 
      style="border: 1px solid white; color: white; background-color: black; padding: 2px 5px;"
      oninput="updateClozeHint(this.value)"
      onchange="saveClozeHint(this.value)" 
    >
  `;
}

function formatHint(str) {
  return str.slice(1, -1); // Extract hint text
}

function updateClozeHint(newHint) {
  // Update the visual hint immediately in the input box
  document.getElementById("hint-div").querySelector("input").value = newHint;

  // Logic to communicate with Edit Cloze During Review add-on
  // (See next section)
}

function saveClozeHint(newHint) {
  // Save the hint permanently within the Anki card
  // (See next section)
}
</script>

do you have any idea how this code could work with the Edit Cloze during Review addon :question:

1 Like
4

@Shigeyuki

Here is a new modified version according to the AI

<div id="hint-div" style="position: fixed; top: 0; left: 50%; transform: translateX(-50%);"></div>
{{edit:cloze:Text}} 

<script defer>
document.addEventListener('DOMContentLoaded', function() {
    const clozeElement = document.querySelector('.cloze');
    if (clozeElement) {
        const clozeContent = clozeElement.querySelector('textarea');
        const hintText = formatHint(clozeContent.value);

        const hintInput = document.createElement("input");
        hintInput.type = "text";
        hintInput.value = hintText;
        hintInput.style.cssText = "border: 1px solid white; color: white; background-color: black; padding: 2px 5px;";
        hintInput.oninput = function () { updateClozeHint(this.value, clozeElement, clozeContent); }; // Update both input and cloze content

        document.getElementById("hint-div").appendChild(hintInput);
    }

    function formatHint(str) {
        const match = str.match(/{{c\d+::(.+?)}}/);
        return match ? match[1] : ""; 
    }

    function updateClozeHint(newHint, clozeElement, clozeContent) {
        // Update the textarea value directly
        clozeContent.value = clozeContent.value.replace(/{{c\d+::.+?}}/, `{{c1::${newHint}}}`);
    }
});
</script>

Problem with this is Anki keeps recognising c\d+::.+? as a field so it shows the error Found c\d+::.+?, but there is no c\d+::.+?

This is another version of the code, which actually allows for some editing, but if you try it out, the edit resets once you close the card


<div id="hint-div" style="position: fixed; top: 0; left: 50%; transform: translateX(-50%);"></div>

<script>
if (document.querySelector(".cloze").textContent != "[...]") {
  const clozeText = document.querySelector(".cloze").textContent;
  const hintText = formatHint(clozeText);

  document.getElementById("hint-div").innerHTML = `
    <input 
      type="text" 
      value="${hintText}" 
      style="border: 1px solid white; color: white; background-color: black; padding: 2px 5px;"
      oninput="updateClozeHint(this.value)"
      onchange="saveClozeHint(this.value)" 
    >
  `;
}

function formatHint(str) {
  return str.slice(1, -1); // Extract hint text
}

function updateClozeHint(newHint) {
  // Update the visual hint immediately in the input box
  document.getElementById("hint-div").querySelector("input").value = newHint;

  // Logic to communicate with Edit Cloze During Review add-on
  // (See next section)
}

function saveClozeHint(newHint) {
  // Save the hint permanently within the Anki card
  // (See next section)
}
</script>
1 Like
5

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.