Cloze one by one uncovering

I just took a brief look at the Ankiphil deck and saw that there are some notes with clozed enumerations, like this one:

Just to make sure I understood correctly: You want to be able to incrementally reveal the clozes of an individual card by clicking on them or via shortcut (in this case, the three red clozes)?

Currently, I’m a bit busy with uni, but I might be able to take a look at it this weekend (if not, then next weekend :D).

Hi, your template is wonderful!
And I found a way to get current cloze id and their answer in front card. (a regex trick)
In addition, my js code add every cloze span a onclick event to show/hide content.
Finally, I found a way from an unsigned template to automatically turn to the back after all clozes show the answer(AnkiMobile, PC, AnkiDroid).
I think we can merge our template into a perfect template.
My code is simple in front.html : front.html

1 Like

I did it! :grinning: AnkiWeb share code: 457099967
Source code is in my github

mathjax_in_anki

All in the front side.

3 Likes

Gave it a quick try and it looks awesome! This is surely going to be of interest to many users. Thanks for sharing @ruin1990! :clap:

I forgot to remove the line

(only wrapped equations, no AnkiDroid support)

in the original template. You can remove it from your shared note, since it isn’t true anymore.

:grin: Okay, I changed it.

I personally think the best thing about my template is the smooth transition from the original Cloze.
Just replace the front template simply.

I want to share with you a very interesting model.
All credit goes to GitHub - thiswillbeyourgithub/Clozolkor: enhancing "cloze one by one" script by iTraveller.
I made my modifications and added a few things.

Animação

first, @kleinerpirat and @kleinerpirat congratulations on the card, it was excellent!

When we add a Hint in cloze, that Hint remains after the reveal (in the Kleinerpirati version this didn’t happen):

Animação

I want to give a suggestion that exists in the model I posted above:

  • Have a hotkey to show letter by letter
    Animação2

Yes, my template is only implemented based on the most basic cloze syntax, and I haven’t considered the case of :: in the content of {{cn::}}. I haven’t tested your situation.
Also, Hint is not support on my template. Because I haven’t used this feature much myself, I don’t quite understand this requirement. Maybe you can help me describe?
You mean that if there is :: in the cloze, then the following content should be used as a mask, right?
My original intention was to allow people who use the basic cloze template to switch to my template smoothly, so I did not consider this situation when I did it, and just displayed the content of the cloze as the original text.

If you only need to ignore the Hint content after ::, you can modify the src_html line and do a src_html=split("::")[0]

$('.cloze').each(function(){
		$(this).attr("tabindex", idx+10000);//for auto scroll
		$(this).attr("answer", "off");
		let src_html = $(this).html(); // line 416 from front.html
		src_html=split("::")[0]; // add this line
		// also you can compare split("::")[1] with arr[idx] to judge use the mask
		$(this).html(
			'<div class="ruin_quiz" style="display:inline;">'+src_html
			+'</div><div  class="ruin_answer" style="display:none;">'
			+arr[idx]+'</div>'
		); 

Of course, it is not very rigorous to use :: direct split, we should normally first indexof / find, and then substr / substring to split the string

If you mean how it works, my programming knowledge is quite limited,
but this is a very useful function in “clozes” cards, sometimes we need a hint to be able to respond, as below:
Animação4

I tried to add this, but it doesn’t seem to work, it even ruins the functioning of your model.
Maybe @kleinerpirat can help us. :slight_smile:

This should do the trick:

$(".cloze").each(function () {
  $(this).attr("tabindex", idx + 10000); //for auto scroll
  $(this).attr("answer", "off");
  let src_html = $(this).html(); // line 416 from front.html
  let [answer, hint] = arr[idx].split("::", 1);
  $(this).html(
    `<div class="ruin_quiz" style="display:inline;">${
      hint ? `[${hint}]` : src_html
    }</div><div  class="ruin_answer" style="display:none;">${answer}</div>`
  );
  idx++;
});

Regarding hints within MathJax clozes, @ruin1990 will probably have an easier time since he wrote that code :slight_smile:

1 Like

It works perfectly!

1 Like

@kleinerpirat , sorry to bother you again. I wanted to know how I can add more than one shortcut for the same function, something like:

var shortcuts = {
	"next": {
		"name": "Tab",
		"keycode": 9,
		"keycode": 96,
	},
	"previous": {
		"name": "Backquote",
		"keycode": 192,
		"keycode": 110,
	}
};

You must not use the same key for two different values inside an object. I’d recommend switching from event.keyCode (deprecated) to event.code and storing the codes in arrays. For example:

var shortcuts = {
	"next": {
		"name": "Tab",
		"keycodes": ["Tab", "KeyW"],
	},
	"previous": {
		"name": "Backquote",
		"keycodes": ["Backquote", "KeyQ"],
	}
};

And then further down use Array.prototype.includes():

document.addEventListener("keydown", (event) => {
  if (shortcuts.next.keycodes.includes(event.code)) {
    event.preventDefault();
    revealNext();
  } else if (shortcuts.previous.keycodes.includes(event.code)) coverPrevious();
});

1 Like

It worked!
Thanks :smiley:

Sorry I’m a little busy these days.

I’m glad you’ve solved this problem, I’ll update it later :grinning:

I’m using the amazing tooltip script created by @kleinerpirat , but I came across an inconvenience, when I use ankidroid and I need to reveal a “cloze” and inside this “cloze” there is a tooltip when clicking on it it closes again, the ideal would be to keep the “cloze” open:
ezgif-3-9a38af38a5

@ruin1990 a solution I thought would be to disable, only on ankidroid, the option to reveal and hide with manual click, leaving only the shortcut (Cover Previous) doing this function.

This is better done within the tooltip script (You can change the trigger that closes tooltips. By default it’s set to close on clicks outside).

I don’t think @ruin1990 should be bothered with this. We can discuss this further in the Tippy Tooltips support thread if you want :slight_smile:

Now that your requests are getting more specific and fairly regular, perhaps it’s best if you dive a bit into JS yourself - you seem motivated and it’s the key to true freedom :v:t2:

1 Like

You only need to modify the function cloze_toggle to disable the previous function. I currently click and the button call this function, so I have to disable it together. I added the click function because sometimes the content I recite is very long.

function cloze_toggle(item){
	let block = item.children("div.ruin_quiz");
	let ans = item.children("div.ruin_answer");
	let ans_not_shown = ("" + ans.attr("style")).indexOf("inline") == -1;
	//console.log(x)
	if(ans_not_shown)
	{
		block.hide();
		ans.css("display","inline");
		item.attr("answer", "on");
		cloze_num--;
		//console.log(cloze_num);
		if(cloze_num<=0 && have_mathjax_content==false)
		{
			flipToBack();
		}
	}
	else
	{
		/* disable this can solve you problem
                ans.hide();
		block.css("display","inline");
		item.attr("answer", "off");
		cloze_num++;
                */
		//console.log(cloze_num);
	}
	item.focus();
	//$.scrollTo(item, 120);//TODO:
	//console.log(ans.attr("style"));
	//console.log("a:" + ans.html());
}

At this time, if there is a cloze can’t remember clearly. I can turn it back. After reviewing it all, I can look back to see if I still remember the uncertain answer. I found this effect to be very good, so I added it.
Based on this, I may consider adding a menu for temporary configuration, but I haven’t considered implementing this for the time being. I’ve been too busy recently, sorry

I really like the previous function, it’s very useful. But, I was just referring to for the case where cloze hides something with the <a></a> tag and in ankidroid, specifically when using tippy tooltips, as it creates this <a> element.

The ideal solution would be to disable the previous function when inside the cloze contains something with clickable tags, leaving only the shortcut Cover Previous to take care of this function.
So, we would keep the previous function which I think is very important.

Don’t worry about it, I’m studying JS, it’s going to be an exercise for me to be able to do this.
@ruin1990 thanks!

Hi everyone, found this thread thanks to @huandney, I’m the author of clozolkor

The code is quite ugly because I struggled to find ways to catch keys and buttons on all the available platforms so I had to duplicate a lot of stuff.

The main distinct feature of my version is that it allows to show letter by letter or word by word. This is indispensable for me to use as hints.

If you end up implementing this I would gladly use your template instead btw, great work!