Cloze one by one uncovering

Anki Card Design
2

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:

Kooha-2021-08-24-01_21_14

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.

6 Likes