Template to Hide All Clozes while Testing on One

Anki Card Design
1

Note: Most versions released in 2023 and later should work with this. Try updating if your Anki version is older.

I just got my hands on some really simple code to hide all your inactive clozes. This allows you to hide every part of text that has a cloze on it and test you on only one.

I have been searching for something like this, but almost every solution requires old, complex code and desktop-only add-ons. The solution I’ll provide here requires only a few lines of code and it works on your regular cloze note type. As the built-in feature isn’t here at, this should work the best in the meantime.

I’ll also provide a working note type that you can download at the end.

Massive thanks to Anubis Nekhet for teaching me how to do this!

Styling

Paste this in your styling section:

.cloze.cloze-inactive {
  color: #BDBDBD !important;
}

This sets a grey colour for all the inactive clozes. You can replace #BDBDBD with any colour of your choice. Just make sure the colour for active cloze is different.

Front

This is the code for front template. Add it to the end of everything.

{{#Hide All}}
<script>
inactiveClozes = document.getElementsByClassName("cloze-inactive"); 
    for (i = 0; i<inactiveClozes.length; i++){ 
         inactiveClozes[i].classList.add("cloze");
      inactiveClozes[i].innerHTML = "[...]";
    }
</script>
{{/Hide All}}

This code sets the colour and then it hides the inactive clozes with [...]. This can be changed to other formats if you wish. So, for example if you want ... instead you can do so by changing [...] → ... part:

inactiveClozes[i].innerHTML = "[...]";

Back

Here is the code for your back template:

{{#Hide All}}
<script>
inactiveClozes = document.getElementsByClassName("cloze-inactive"); 
    for (i = 0; i<inactiveClozes.length; i++){ 
         inactiveClozes[i].classList.add("cloze");
    }
</script>
{{/Hide All}}

Now, this one is only useful if you want the text of inactive clozes to be coloured on the back side. The templates work just fine if you decide to omit it.

Extra Fields

After you have pasted in the code, add a new field to your cloze template named “Hide All”. This basically allows you to have the Hide All feature in a regular cloze note type. If this field is empty in a note, Anki only hides the cloze you’re being tested on. If you fill in “Hide All” field, then the code is activated and Anki hides all your clozed text in every card.

If you don’t want this, just remove {{#Hide All}} and {{\Hide All}} from the start and end of the code.

Download a Demo

Here’s my own note type that implements this. It also comes with catapuccin+prettify anki.

Anyone looking at this when the thread is closed and you have questions, feel free to start a new post in Anki > Card Design and ping me there.

2 Likes
2

Thanks @sorata!
My workaround is a bit different as I need to be able to see all the hints for each question. With the help of microsoft copilot, I made it so that the hints show the other “answers” on hovering.

I can’t share it directly as there is a bunch of extra junk in my cards/notes.
this is the cloze template. It has everything I want/need, but I feel like it’s sloppy. I used the Custom Styles (font color, background colour, classes) addon to wrap the spoiler html around the text.

Front Template:

{{type:cloze:Text}}<br>
{{#Hint}}{{Hint}}<br><br>{{/Hint}}
{{cloze:Text}}


<!-- Spoiler concealment (Front Side)   -->
<script>
    document.querySelectorAll('.spoiler').forEach(item => {
        item.style.setProperty('--spoiler-bg', 'black'); /* Black background */
        item.style.setProperty('--hide-hint', 'white'); /* Show hint */
    });
</script>

Back Template:

{{type:cloze:Text}}<br>
{{cloze:Text}}<br>


<br>
{{Extra}}


<!-- Spoiler reveal -->
<script>
    document.querySelectorAll('.spoiler').forEach(item => {
        item.style.setProperty('--spoiler-bg', 'transparent'); /* Make it transparent */
        item.style.setProperty('--hide-hint', 'none'); /* Hide hint */
        item.style.color = 'white'; /* Make answer text white */
    });
</script>

<!-- Spoiler-answer concealment (Back Side)  spoiler-answer -->
<script>
    document.querySelectorAll('.spoiler-answer').forEach(item => {
        item.style.setProperty('--spoiler-bg', '#252525'); /* gray background */
        item.style.setProperty('--hide-hint', 'white'); /* Show hint */
    });
</script>

Styling (probably has too much stuff here too. Forgive me. I’m a middle aged physician learning all this for fun)

/* SPOILER */
.spoiler {
    font-style: normal;
    color: transparent; /* Keeps the answer invisible by default */
    text-shadow: none;
    background-color: var(--spoiler-bg, black); /* Dynamic background */
    padding: 2px 5px;
    position: relative;
    display: inline-block;
    white-space: nowrap;
}

/* Hint remains visible on the front */
.spoiler::before {
    content: attr(data-hint);
    color: white;
    background-color: black;
    padding: 2px 5px;
    display: var(--hide-hint, block); /* Hint should be visible */
}

/* Reveal answer when hovered */
.spoiler:hover {
    color: black; /* Make answer visible */
    background-color: white;
    text-shadow: 1px 1px 2px #DDDDDD;
}

.spoiler:hover::before {
    display: none; /* Hide hint on hover */
}




/* SPOILER on backside */
.spoiler-answer {
    font-style: normal;
    color: transparent; /* Keeps the answer invisible by default */
    text-shadow: none;
    background-color: var(--spoiler-bg, #252525); /* Dynamic background */
    padding: 2px 5px;
    position: relative;
    display: inline-block;
    white-space: nowrap;
}

/* Hint remains visible on the front */
.spoiler-answer::before {
    content: attr(data-hint);
    color: white;
    background-color: #252525;
    padding: 2px 5px;
    display: var(--hide-hint, block); /* Hint should be visible */
}

/* Reveal answer when hovered */
.spoiler-answer:hover {
    color: black; /* Make answer visible */
    background-color: white;
    text-shadow: 1px 1px 2px #DDDDDD;
}

.spoiler-answer:hover::before {
    display: none; /* Hide hint on hover */
}

Text (on card)
Pretérito Perfeito Simples!<br><br>1. Olá! <span class="spoiler" data-hint="saber" data-answer="soubeste">{{c1::soubeste}}</span>&nbsp; que o Pedro <span class="spoiler" data-hint="fazer" data-answer="fez">{{c2::fez}}</span> anos anteontem?<br>2.&nbsp;Ah, sim!&nbsp;<span class="spoiler" data-hint="saber">{{c3::soube}}</span><br>

Frontside before hovering:

image
image1265×448 17.9 KB

Frontside hovering over ‘fazer’

image
image1209×430 18.6 KB

Backside:

image
image1231×393 30.3 KB

1 Like
3

@sorata I was wondering how to change this so it’s a type cloze. I couldn’t figure out how to get the question set up to type in the answer.
Your solution is much more elegant than what I have if no cloze embedded clue is needed.

4

I looked up how it’s usually done and it’s working fine with the code here. I just pasted in {{type:cloze:Text}} on both front and back.

Is the confusion because of the extra JS code in my template? I hide {{cloze:Text}} and then use JS to insert the text in seperate div.

Let me know if you run across any issue.

5

I apologize. I didn’t think to add it to the deck to study. It didn’t look like the other type cards in the note type editor (clicking cards) or in the preview. So I thought it wasn’t working.

but it is working fine when I study them.

Thanks again for sharing. This is definitely ore elegant than what I had (hiding text with spoilers).

Do you think it would be easy to show all the hints but hide all the answers? I couldn’t figure that out either, but I don’t know much about programing.

6

No, there doesn’t seem to be an easy way. Maybe if Anki exposed the hints inside <span class="hidden"></span> then we could do it somewhat easily.

7

Thanks again.
I’ll keep doing it the way I was doing it as above.

8

you can ask dae to change how things work btw🤞

1 Like