Cloze overlapper + Cloze one by one reveal?

[Modmz]

Hello everyone. I was wondering if it would be possible to combine the cloze overlapper functionality, with revealing the clozes one at a time.

For example, here’s the front of a card I would like to do this with:

Here’s the back:

Ideally, I would like it to function in this way:

Here’s a link to the specific example note I gave:

https://ankiweb.net/shared/info/1864797905

Any help would be appreciated.

[kleinerpirat]

With Closet, this would definitely be possible. With native Anki clozes, only if we write our own cloze parser (which I didn’t get around to yet).

The Problem

Anki converts native clozes into HTML before template scripts can access them. Clozes that don’t belong to the current card are just converted to plain text. On the front side of card 1 there’s no way of telling what’s clozed out on card 2. We need to know this for overlapping clozes though.

Why is Closet different?

Closet converts its syntax in-template via JavaScript → here, all clozes are wrapped in <span> elements, which I can query.

My own note type (using Closet) achieves overlapping cloze functionality with lists and a special command field telling it how many clozes should be shown before and after the current cloze. This allows me to tweak this behaviour individually per note.

Examples for this syntax:

(Field content in brackets)

[1   ] → one before, one after
[2   ] → two before, two after
[*   ] → all before, all after
[    ] → none before, none after

[1, 0] → one before, none after
[*, 0] → all before, none after
[0, 1] → none before, one after
[0, *] → none before, all after
[1, 2] → one before, two after

etc.

I’ll try to find time for this in the coming weeks. Sadly, I’m pretty busy with uni currently (got more time for such stuff in the summer).

[Modmz]

Thank you. This is super helpful. Admittedly, I’ve tried closet before, but it was a bit over my head and I didn’t really understand how to use it. I’ll have to give it another try. Thanks again.

[shallash]

Here’s a partial workaround:

Add this script to the back template of the clozeoverlapping notetype

<script>
var clozes = document.getElementsByClassName("cloze");
var clr = window.getComputedStyle(clozes[0]).color;
var bg = window.getComputedStyle(clozes[0]).background;
for (i=1; i<clozes.length; ++i) {
  clozes[i].style.background = clr;
  clozes[i].onclick = function() {this.style.background=bg ;}
}
</script>

<script>
    var clozes = [...document.querySelectorAll(".cloze")];
    if (clozes.length) {
        const cloze_color = window.getComputedStyle(clozes[0]).color;
        const cloze_bg_color = window.getComputedStyle(clozes[0]).backgroundColor;
        clozes.slice(1).forEach((item) => {
            item.style.backgroundColor = cloze_color;
            item.addEventListener("click", () => {
                item.style.backgroundColor = cloze_bg_color;
            });
        });
//USER CUSTOMIZATION event.key 
       document.addEventListener("keyup",  function(e) {
            if (e.code == "Numpad0"|| e.code == "Slash") {
                clozes.slice(1).some((item) => {
                    if (item.style.backgroundColor != cloze_bg_color) {
                        item.style.backgroundColor = cloze_bg_color;
                        return true;
                    }
                })
            }
        });
    }
</script>

It doesn’t work the same as kleinerpirat’s script, instead it obscures all the active clozes (except the first active cloze), on the back of the card. Then you can reveal them one by one using the shortcut, or by clicking on them.