Cloze one by one uncovering

[brianndiep]

Hi Everyone,

I was wondering if there was a possible way to uncover the cloze one by one deletion boxes using a keyboard shortcut. Under the Anki:Advanced Anki Card Type video, they said “SHORTCUTS: With the Hint Hotkeys add on, “h” reveals hints one at a time, “g” reveals them all
-With the cloze one by one 2.1, the shortcut to reveal the boxes is “n””

However, this is not working for me and I made sure that I am using cloze one by one 2.1. Is there something specific I should look for under the custom keyboard add on?

[kleinerpirat]

No real need for an add-on here.
You could just add this to your Cloze back template:

<script>
function incrementalReveal() {
    let remaining = Array.prototype.slice.call(
        document.getElementsByClassName("cloze"))
    let content = []
    for (let cloze of remaining) {
        content.push(cloze.innerHTML)
        cloze.innerHTML = "[...]"
    }
    remaining[0].classList.add("active")

    document.addEventListener("keydown", (event) => {
        // https://keycode.info/
        if (event.keyCode == 72) {
            revealNext()			
        } else if (event.keyCode == 71) revealAll()
    })
    let revealAll = () => {
        while (remaining) {
            let cloze = remaining.shift()
            cloze.innerHTML = content.shift()
            cloze.classList.remove("active")
        }
    }
    let revealNext = () => {
        let cloze = remaining.shift()
        cloze.innerHTML = content.shift()
        cloze.classList.remove("active")
        remaining[0].classList.add("active")
    }
}
incrementalReveal()
</script>

And add some separate styling for the active clozes:

.cloze.active {
  color: dodgerblue;
  text-decoration: underline;
}

Result:

If you want to change the keys, just look up your keycodes here: https://keycode.info/
This works with the standard Cloze note type, but you have to skip to the backside first. Also, they all need to have the same index.

[brianndiep]

Thank you for the help! I’ll add that to my cloze note type.

However, are you able to fix how to uncover the “cloze one by one 2.1” cards. They usually have boxes around them and I wanted to hit spacebar or another key to uncover it instead of manually clicking to uncover them.

Thanks again!

[kleinerpirat]

@brianndiep

They usually have boxes around them

Have a picture or sample note? That description tells me nothing

Initial Struggle

Well, I can only guess which add-on you mean, so I did a Google search. Is it this one? https://ankiweb.net/shared/info/1202404083

That guess was wrong, click to expand if you're interested

I don’t really know what that add-on is supposed to be doing, because it doesn’t work on my Anki version and I’m not keen on downgrading just for that.

Extract from the add-on page:

For each cloze you add this add-on copies the whole text. So if you paste 1000 words into the first field of an enhanced cloze note and do 20 clozes the note will have ultimately 21000 words. If you do this often the size of your database will increase substantially.

That alone is a big no-go and tells me that it isn’t a great idea to begin with. That note type also depends on jQuery, which makes it harder to maintain. Vanilla JS is always better. I stripped out all the redundant HTML of that note type, added my script + some CSS and uploaded it to AnkiWeb: https://ankiweb.net/shared/info/807643868

I just found the note type you meant on the AnKing’s Google Drive folder. @brianndiep Next time, please provide a link/picture/video, so whoever wants to help you doesn’t have to work on wild guesses (mostly my fault for not investigating further, though).

---

Regarding that note type

That “Cloze one by one 2.1” note type is quite the mess. I don’t know what to make of it, tbh. It would be easier for me to create a note type from scratch than to refactor that AnKing note type.

Is there any advantage to having these boxes? I can only see one big disadvantage: Because the boxes differ in length, your mind will just take the easy route and memorize the shape of the box instead of the context of the cloze.

@brianndiep

I wanted to hit spacebar or another key to uncover it instead of manually clicking to uncover them.

Spacebar won’t work because that’s reserved by Anki. I already showed you how you can define your own keys to uncover the clozes one by one (in the example above, it was H and G, because that’s what you mentioned in your initial post).

This sample note type I shared on AnkiWeb uses Tab for incremental reveal and ^ for full reveal (seemed like the way to go on my keyboard layout, yours might differ).

[brianndiep]

Thank you for all the time you’ve put in. Here is a picture to show what the “cloze one by one 2.1” card type would look like. In order for me to uncover this, I have to click the box to show what the next answer would look but I wanted to use Anking’s keyboard shortcut to uncover it just in case I am using a controller to study with.

However, if it’s too complicated, I might try switching my premade deck to implement the type of cloze card you have shared!

[elaltavoz]

@kleinerpirat mentioned Enhanced Cloze (unmaintained Fork for 2.1) - AnkiWeb, but there’s a new version of this add-on here: Enhanced Cloze (for Anki 2.1) - AnkiWeb. @brianndiep, this works with the newest version of Anki (2.1.46) and you can do what you suggest, by clicking on a corner of the flashcard or by clicking the cloze itself.
However, keep in mind that if you make c2, c3 and so on, they will be hidden when you review the c1 cloze (but you’ll be able to reveal them too by clicking them, if you want).

One more thing, the size of the hidden cloze is always the same. And if you pretend to use that add-on, I recommend you to create a specific field on the note to be the title you want to see on the browser.

[mathieu993]

@kleinerpirat Hello, thank you for your work.
This new Incremental Cloze Card is great for studying maths exercices. It works well on computer but not on ipad. Do you think it could be possible to add some shortcut or touch on ipad ?
Thanks

[kleinerpirat]

@mathieu993

It works well on computer but not on ipad.

I have only tested this template once on an old iPad, but last time it seemed to work - I never tested the shortcuts though. What issue are you experiencing exactly? Does the basic functionality work?
Edit: Nevermind, I thought this was about the massive cloze note type
I never tested this one with the iPad, but I can try to provide iOS support. It should be as simple as adding some tap-control to it.

[mathieu993]

@kleinerpirat Thank you for your answer,
It would make life so much easier for me ! I struggled with my goal for days now. Your solution is simpler than what I’ve found until now. (Anking note Cloze one by one, and Enhanced Cloze 2.1 v2)

[Ankili]

Hey,
great Skript upgrade!
Used it for a couple of days now
Is it possible to change it a bit so that hints don’t get exchanged with […] no matter if the original Cloze looked like {{c1::content}} or {{c1::content::Hint}}?
I hope it’s understandable
And is it possible to add a command line to reveal the first Cloze if the card only has one (would safe you pushing an additional button on those cards)?
Unfortunately it doesn’t work on AnkiDroid since there is no keyboard to press ‘g’ or ‘h’^^

[kleinerpirat]

Both really nice ideas. I’ll implement them and notify you guys once it’s ready.

Touch screen support is very important of course. When I create these quick drafts for the forum, I don’t use them myself (because I got my own note type that can do it all), hence sometimes obvious things like this are not implemented.

[mathieu993]

@kleinerpirat
There is a problem with Mathjax. I can’t have mathjax equation, and no correct latex equation too (the size is not normal).
Mathjax is correctly displayed in clozes other than the cloze that is running. (first 1) to 5) in the image) But is not displayed for the clozes that are running (last 1) to 5) in the image) .

Your solution seems to be the most effective for learning vs the Anking card because the clozes are always of the same shape. There is no little box that I will know the answer or too big equations that are not completely covered. And as you said in some post, there is no duplication of code for each cloze.
But without a way to write mathematics symbol, I can’t use it.
Do you think it is possible to add mathjax to your card ?

[mathieu993]

If I can help, I found this part of code on the back of 'Enhanced Cloze" (for Anki 2.1) card type.

// rerun mathjax on the document so that the cloze text gets formatted
// … for MathJax 2
try {
MathJax.Hub.Queue([“Typeset”, MathJax.Hub]);
} catch {}
// … for MathJax 3
try {
MathJax.typesetPromise()
} catch {}
The template can be found here https://ankiweb.net/shared/info/1990296174

Does the problem of multiplying lines that you identified is still there ?

Extract from the add-on page:

For each cloze you add this add-on copies the whole text. So if you paste 1000 words into the first field of an enhanced cloze note and do 20 clozes the note will have ultimately 21000 words. If you do this often the size of your database will increase substantially.

That alone is a big no-go

[shallash]

@kleinerpirat I’ve been using a closet note type that you helped set up some time ago, and I’d like your help again please.

---

I want to add a keyboard shortcut that would incrementally reveal the [[cl::]] and [[cx::]] type clozes. I looked into the “Reveal Clozes with Key Presses” script on the closet website, but it allows the clozes to reveal only with the keyboard shortcut, and not on clicking, which makes reviewing impossible on the mobile apps. Plus it’s not been updated since the major closet update which separated the styling and scripting, so I can’t make it work with the current closet template anway; or make enough sense of it to integrate into the click to reveal script, with my almost nil JS knowledge.

I also tried modifying the Anking one-by-one script, by making it target the closet cloze classes instead of the default cloze class, but it fails to work, maybe because it’s script executes before/after closet, not sure though.

Here's the code I'd added to the "Closet Setup" script for the cl and cx tags to work:

/** Click to reveal cloze */

const removeObscure = function(event) {
  if (event.currentTarget.classList.contains('cl--obscure-clickable')) {
    event.currentTarget.classList.remove('cl--obscure')
    event.currentTarget.classList.remove('cl--obscure-hint')
    event.currentTarget.classList.remove('cl--obscure-fix')
  }
}

const wrappedClozeShow = closet.wrappers.aftermath(closet.flashcard.recipes.cloze.show, () => {
  document.querySelectorAll('.cl--obscure')
  .forEach(tag => {
    tag.addEventListener('click', removeObscure, {
      once: true,
    })
  })
})

const obscureAndClick = (t) => {
  return [`<span class="cl--obscure cl--obscure-hint cl--obscure-clickable">${t.values[0]}</span>`]
}

const obscureAndClickFix = (t) => {
  return [`<span class="cl--obscure cl--obscure-fix cl--obscure-clickable"><span>${t.values[0]}</span></span>`]
}

const frontStylizer = closet.Stylizer.make({
  processor: v => `<span style="color: var(--cloze-color)">${v}</span>`,
})

filterManager.install(
  wrappedClozeShow({
    tagname: 'cl',
    frontEllipser: obscureAndClick,
    frontStylizer: frontStylizer,
  }),

  wrappedClozeShow({
    tagname: 'cx',
    frontEllipser: obscureAndClickFix,
    frontStylizer: frontStylizer,
  }),
)

---

You spoke of your note template that can do it all? If it does support both key and click revealing incremental clozes, I’d like to see it.

(I think this in on topic for the thread, let me know if it is not though.)

[kleinerpirat]

I created a brief guide about user input, as I think a lot of questions in this forum could be prevented if more people knew how easy this stuff is in reality (programming is not black magic) - and I’m confident you’re more than able to learn these JS basics @shallash

@shallash

You spoke of your note template that can do it all? If it does support both key and click revealing incremental clozes, I’d like to see it.

That’s my private note type (or “study solution”, as it also uses a companion add-on), which I’ve been working on for 1½ years now. It bends the concept of the Anki note a bit and writing a guide for how to use it is not in my capacity I’m afraid.

I’m planning to release it to the public eventually, but currently, it is still way too complex and specific for general use. That’s why I like to create these “baby note types” for the forum, which contain isolated features, so others may benefit from the cool things I’m adding to my private note type.

[shallash]

@kleinerpirat

I’m planning to release it to the public eventually, but currently, it is still way too complex and specific for general use.

Consider me very intrigued.

I was able to solve the issue after reading the guide, and a few hours of stumbling around, and here’s what i came up with, for anyone interested in using clozes that reveal incrementally on keypress, and also reveal on clicking/tapping them, with Closet clozes.

The Script

In the end I went with a quite different approach from the script I found on closetengine.com . Mostly because I could not make head or tails of it.

if (typeof doc_keyUp !== "function") {
  var doc_keyUp = function(e) {
    if (e.key === "z" || e.code === "Numpad0") {
      flipVisibility();
    } else if (e.code === "NumpadDecimal") {
      removeObscureOnKd();
    }
  };
  document.addEventListener("keyup", doc_keyUp, false);
}

function flipVisibility() {
  if (document.getElementById('hintzu').style.display == 'none') {
    document.getElementById('hintzu').style.display = 'block';
  } else {
    document.getElementById('hintzu').style.display = 'none';
  }
}

function removeObscureOnKd() {
  var firstCloze = document.getElementsByClassName('cl--obscure')[0];
  firstCloze.classList.remove('cl--obscure')
  firstCloze.classList.remove('cl--obscure-hint')
  firstCloze.classList.remove('cl--obscure-fix')
}

This script should work fine if you’re using the closet setup script found in my previous post on this thread.

The relevant function here is removeObscureOnKd, so you can change the keyboard shortcut to whatever you want to using https://keyjs.dev .

The flipVisibility function is for a button to toggle the visibility of some content, it functions basically like the <details> tag, except with a keyboard shortcut too. If someone wants i’ll post how to make it work for your notetype. I used one eventlistener for both functions because it seems efficent to do so.

[kleinerpirat]

I updated the note type: https://ankiweb.net/shared/info/1231171279.

---

@mathieu993

It works well on computer but not on ipad. Do you think it could be possible to add some shortcut or touch on ipad ?

Touch controls have been implemented:

• Two buttons on the bottom right (for thumb control on mobile)
• Touch input on the cloze text advances the reveal process too
• The keyboard shortcuts are easily customizable (look for var shortcuts in the template)

@Ankili

Is it possible to change it a bit so that hints don’t get exchanged with […] no matter if the original Cloze looked like {{c1::content}} or {{c1::content::Hint}}?

Done.

@Ankili

And is it possible to add a command line to reveal the first Cloze if the card only has one (would safe you pushing an additional button on those cards)?

Assuming you mean handling a card like native Anki cards if it only has a single cloze, that is implemented too.

@Ankili

Unfortunately it doesn’t work on AnkiDroid since there is no keyboard to press ‘g’ or ‘h’^^

The new touch controls make this usable on AnkiDroid and AnkiMobile. However, MathJax is only supported on AnkiMobile, because AnkiDroid doesn’t expose MathJax (or I haven’t found the right way).

Edit: I just tested again and MathJax actually works on AnkiDroid A bit too tired I guess

@mathieu993

Do you think it is possible to add mathjax to your card ?

The note type now supports fully wrapped MathJax equations. You can also use MathJax for hints. The incremental reveal of individual variables within an equation is an entirely different beast though and I don’t know if it’s possible tbh.

[mathieu993]

Whoa ! You rock !
Math seems to be correctly displayed.
It’s easy to reveal one by one, touching anywhere .
The buttons behave correctly. But when I study a long chapter, I need to scroll to the end to find it. Anyway, as I can touch the screen anywhere it works.
One thing is disturbing me. The text appear centered. But I want to read like in a book. I tried to modify the “align” property, but that didn’t do anything. I suspect it is hiding inside boxes, but I don’t know how to reach them.
Could you make this property visible, so one could have the choice to display left or centered ?
Oh, and maybe is it possible to make the card appear at once ? without the side “Incremental reveal. Flip to backside” ?

That’s really super cool of you ! I was afraid of card taking too much memory on ankiweb, and the anking card is great but not so elegant as yours.

[kleinerpirat]

@mathieu993

But when I study a long chapter, I need to scroll to the end to find it.

I was thinking about merging the functionality of this note type with that one: Anki as a knowledge base (with a "massive cloze note") - #39 by kleinerpirat

Then you’d have auto-scroll and lots of other nice possibilities.

@mathieu993

The text appear centered.

I think that’s because of the giant button I wrapped the cloze text with (for iOS tap-support, because AnkiMobile blocks click events from all elements other than <button>). By default, text inside buttons is centered, but that can be overwritten with !important. I personally don’t like centered text either, so I’ll update that tomorrow.

@mathieu993

Oh, and maybe is it possible to make the card appear at once ? without the side “Incremental reveal. Flip to backside” ?

This is not possible without an Add-on, I’m afraid. Native clozes are converted before I can access them from the template - and on the front side, they’re lacking the information needed for a reveal. So we’re stuck with the back side. (Ideally, the reveal should happen on the front and then automatically switch to the backside once everything has been revealed.)

With the use of Python commands, one could probably achieve that, but that’s not a cross-platform solution.

AnkiDroid offers a JavaScript API that allows for such things, but the rest of the Anki ecosystem doesn’t…

[Ankili]

Amazing! Like it a lot, thank you for implementing those things in a day!
I played around abit. At first the reveal button were at the bottom of my cards. And since I don’t use the reveal-all function I deleted that one as well. At first there was something odd: The Text of the whole card was pasted onto a button next to the Reveal-Next/Reveal-All Button, but nothing happened when I clicked it. I also got an error message saying that {{#Back Extra}} wasn’t working or something. But after trying out what to delete and what not, I managed it^^
Big thank you

P.S. it was more tricky than I thought since I wanted to implement it into another template. This is probably why things got a bit complicated^^