# Help with Incremental Cloze Reveal

**URL:** https://forums.ankiweb.net/t/help-with-incremental-cloze-reveal/54788
**Category:** Card Design
**Created:** [January 23, 2025, 7:38pm UTC](https://forums.ankiweb.net/t/help-with-incremental-cloze-reveal/54788 "2025-01-23T19:38:50Z")
**Posts on this page:** 9
**Page:** 1

<div class="post-metadata">

### Author: ![DerIshmaelite](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/derishmaelite/32/17983_2.png) [@DerIshmaelite](https://forums.ankiweb.net/u/DerIshmaelite)
#### Post date: [January 23, 2025, 7:38pm UTC](https://forums.ankiweb.net/t/help-with-incremental-cloze-reveal/54788/1 "2025-01-23T19:38:50Z")

</div>

I found the card template for incremental cloze reveal (which reveals the cloze upon clicking on the cloze bracket). Is there a way to rehide the cloze upon clicking on the cloze bracket again? Could someone modify this code for me?

Here is the code.

## Card Front Side

```auto
<script>
var logDiv = null;
function log(s) {
  if (logDiv == null) {
    logDiv = document.createElement("div");
    logDiv.id = 'log_debug';
    logDiv.style = 'position:absolute;left:0;top:0;z-index:-2;color:grey;font-size:small';
    document.body.append(logDiv);
  }
  logDiv.insertAdjacentHTML('beforeend', s + '<br/>');
}
/*
function logSizes() {
  let ovl = document.getElementById('tap_overlay');
  let rect = ovl.getBoundingClientRect();
  let vp = window.visualViewport;
  log(`ovl: ${rect.width.toFixed(2)},${rect.height.toFixed(2)} vp: ${vp.width.toFixed(2)},${vp.height.toFixed(2)}`);
}
*/

function getCardNumber() {
  clz = document.body.className;
  const regex = /card(\d+)/gm;
  let m;

  if ((m = regex.exec(clz)) !== null) {
    return m[1];
  } else {
    console.error("Cannot find cardN class of body element!");
    return "0";
  }
}

function getClozes(str, cardNumber) {
  const regex = new RegExp(`\{\{c${cardNumber}::(.*?)(\}\}|::.*?\}\})`, 'gm')
  //console.log(regex);
	let m;
  const clozes = [];
	while ((m = regex.exec(str)) !== null) {
		// This is necessary to avoid infinite loops with zero-width matches
		if (m.index === regex.lastIndex) {
			regex.lastIndex++;
		}
		m.forEach((match, groupIndex) => {
			//console.log(`Found match, group ${groupIndex}: ${match}`);
     if (groupIndex == 1) {
				clozes.push(match);
			}
		});
	}
  return clozes;
}

function clickHandler(e){
   //console.log(`${e.target.tagName}(${e.target.id})`);
   const tt = e.target
   if ( tt instanceof HTMLElement &&
       ( tt.id === 'qa' || 
         tt.tagName === 'HTML' ||
         tt.tagName === 'LI' ||
         tt.tagName === 'I' )) {
     //log('reveal');
     revealNextCloze();
   }
}

var elements;
var clozes;
var revealed = [];

function revealCloze(i) {
  if (!revealed[i]) {
    elements[i].innerHTML = clozes[i];
    revealed[i] = true;
  }
}

function revealNextCloze() {
  firstUnrevealed = revealed.findIndex ( el => !el );
  //log(firstUnrevealed);
  if (firstUnrevealed != -1) {
    revealCloze(firstUnrevealed);
  } 
}

onUpdateHook.push(function() {
  //console.log(`inside update hook`);

	var text = document.getElementById("rawText").innerHTML ;
	//console.log(text);
	clozes = getClozes(text, getCardNumber());
  //console.log(clozes);
	
	elements = document.querySelectorAll(".cloze");

  if (clozes.length != elements.length) {
    console.error("Inconsistent cound of clozes found in original note text and in the card!");
    return;
  }
  elements.forEach((el, i) => {
    el.addEventListener('click', e => {
      revealCloze(i);
      //log(i);
    })
  });
  revealed.length = elements.length;
  revealed.fill(false);
  
  window.addEventListener('click', clickHandler);

});

</script>
<script id="rawText" type="text/plain">
{{Text}}
</script>
{{cloze:Text}}

```

## Card Back Side

```auto
<script>
  window.removeEventListener('click', clickHandler);
</script>
{{cloze:Text}}<br>
{{Extra}}

```

* * *

Credit to this person for the code:

[foenixx](https://github.com/foenixx)

[Native cloze card with incremental reveal - AnkiWeb](https://ankiweb.net/shared/info/1874787050)

---

<div class="post-metadata">

### Author: ![Anon\_0000](https://avatars.discourse-cdn.com/v4/letter/a/c67d28/32.png) [@Anon\_0000](https://forums.ankiweb.net/u/Anon_0000)
#### Post date: [January 23, 2025, 8:50pm UTC](https://forums.ankiweb.net/t/help-with-incremental-cloze-reveal/54788/2 "2025-01-23T20:50:31Z")

</div>

You have a function that gets called onclick named `revealCloze(i);`. This same function could also hide the cloze again. For that you would:

- add an if statement checking if the .cloze had been revealed,
- change the cloze’s text back to what it was before revealing and
- then declare that the cloze is not revealed anymore:

```auto
function revealCloze(i) {
  if (!revealed[i]) {
    elements[i].innerHTML = clozes[i];
    revealed[i] = true;
  } else if (revealed[i]) {
    elements[i].innerHTML = "[...]";
    revealed[i] = false;
  }
}

```

---

<div class="post-metadata">

### Author: ![DerIshmaelite](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/derishmaelite/32/17983_2.png) [@DerIshmaelite](https://forums.ankiweb.net/u/DerIshmaelite)
#### Post date: [January 23, 2025, 9:42pm UTC](https://forums.ankiweb.net/t/help-with-incremental-cloze-reveal/54788/3 "2025-01-23T21:42:31Z")

</div>

> [@Anon\_0000](#):
>
> ```auto
> function revealCloze(i) {
> if (!revealed[i]) {
> elements[i].innerHTML = clozes[i];
> revealed[i] = true;
> } else if (revealed[i]) {
> elements[i].innerHTML = "[...]";
> revealed[i] = false;
> }
> }
> 
> ```

Yes!!! Thank you so much for the help!!!

---

<div class="post-metadata">

### Author: ![DerIshmaelite](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/derishmaelite/32/17983_2.png) [@DerIshmaelite](https://forums.ankiweb.net/u/DerIshmaelite)
#### Post date: [January 25, 2025, 12:48pm UTC](https://forums.ankiweb.net/t/help-with-incremental-cloze-reveal/54788/4 "2025-01-25T12:48:48Z")

</div>

So following up on this, I am wondering if this is possible:

Suppose you have a list of cloze items

- {{c1::A}}
- {{c1::B}}
- {{c1::C}}
- {{c1::D}}
- {{c1::E}}

Is there a way to reveal a single cloze bracket **and keep it revealed** till the next time the c1 cloze is shown again, meaning that **it doesn’t reset every time I review a different card** ❓ And of course a way to manually reset the brackets again…

- A
- […]
- […]
- […]
- […]

That would be extremely helpful!

---

<div class="post-metadata">

### Author: ![Anon\_0000](https://avatars.discourse-cdn.com/v4/letter/a/c67d28/32.png) [@Anon\_0000](https://forums.ankiweb.net/u/Anon_0000)
#### Post date: [January 25, 2025, 1:58pm UTC](https://forums.ankiweb.net/t/help-with-incremental-cloze-reveal/54788/5 "2025-01-25T13:58:42Z")

</div>

> [@DerIshmaelite](#):
>
> Suppose you have a list of cloze items
> 
> - {{c1::A}}
> - {{c1::B}}
> - {{c1::C}}
> - {{c1::D}}
> - {{c1::E}}

So you have this list of clozes in the same card?

> [@DerIshmaelite](#):
>
> Is there a way to reveal a single cloze bracket **and keep it revealed** till the next time the c1 cloze is shown again, meaning that **it doesn’t reset every time I review a different card**

So if I understand this correctly, you’d like to review cloze Card 1, reveal a c1 cloze in that card, then grade yourself and review another Card 2. When you then return to Card 1, you’d like the already revealed cloze to still be revealed.

If I understood that correctly then there’s not much I can help with, since I do not have enough knowledge to achive the desired result. Probably best if you open a new topic for that so that someone more knowledgeable can have a look.

---

<div class="post-metadata">

### Author: ![DerIshmaelite](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/derishmaelite/32/17983_2.png) [@DerIshmaelite](https://forums.ankiweb.net/u/DerIshmaelite)
#### Post date: [January 25, 2025, 3:49pm UTC](https://forums.ankiweb.net/t/help-with-incremental-cloze-reveal/54788/6 "2025-01-25T15:49:04Z")

</div>

Yes exactly. Thanks for your consideration. I will open a new topic. 👍

Edit: Now solved with just a tiny bit of problem.

> [@Suggestion: Persistent Incremental Cloze Reveal](https://forums.ankiweb.net/t/suggestion-persistent-incremental-cloze-reveal/54862/3):
>
> o3 mini high just came out today, used it and it solved the issue for me. This is one big hunk of code. Great advertisement haha sweat_smile laughing Here is the code for everyone interested Frontside \<script\> // Debug logger (optional) var logDiv = null; function log(s) { if (logDiv === null) { logDiv = document.createElement("div"); logDiv.id = 'log\_debug'; logDiv.style = 'position:absolute;left:0;top:0;z-index:-2;color:grey;font-size:small'; document.body.append(logDiv…

---

<div class="post-metadata">

### Author: ![Danika\_Dakika](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/danika_dakika/32/17815_2.png) [@Danika\_Dakika](https://forums.ankiweb.net/u/Danika_Dakika)
#### Post date: [February 1, 2025, 4:55pm UTC](https://forums.ankiweb.net/t/help-with-incremental-cloze-reveal/54788/7 "2025-02-01T16:55:27Z")

</div>

> [@Anon\_0000](#):
>
> Probably best if you open a new topic for that so that someone more knowledgeable can have a look.

It’s generally not necessary to open another topic to continue talking about the same thing. 👍🏽

---

<div class="post-metadata">

### Author: ![Anon\_0000](https://avatars.discourse-cdn.com/v4/letter/a/c67d28/32.png) [@Anon\_0000](https://forums.ankiweb.net/u/Anon_0000)
#### Post date: [February 1, 2025, 8:59pm UTC](https://forums.ankiweb.net/t/help-with-incremental-cloze-reveal/54788/8 "2025-02-01T20:59:26Z")

</div>

Normally I’d agree but in this case I don’t think it’s the same thing.

The topic here basically was “How to re-hide clozes with incremental cloze reveal”.  
The follow-up question was “How to show clozes and make it persist during reviews.”

I get that they are somewhat related but at the same time they are quite different. Maybe the minimum information principle is too ingrained in my brain though.

---

<div class="post-metadata">

### Author: ![system](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/1X/8f1279ababc5879d54e4838989f606cfe55af8c7.jpeg) [@system](https://forums.ankiweb.net/u/system)
#### Post date: [March 3, 2025, 8:59pm UTC](https://forums.ankiweb.net/t/help-with-incremental-cloze-reveal/54788/9 "2025-03-03T20:59:34Z")

</div>

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