Tricky Cloze Deletion Fields

Anki Card Design
1

Hello,

I’m trying to create an Anki cloze deletion cards to practice Spanish noun genders.
In Spanish, these types of contractions aren’t optional.
For example, the correct sentence is “Voy al parque” (since “a” + “el” must contract to “al”).
My goal is to test the noun article (“el” vs. “la”) without breaking the contraction rule.

I first tried something like this:

Voy a {{c1::el::el/la}} parque.

But that would display “a el” on the card, which is ungrammatical in Spanish.

Then I tried:

Voy a{{c1::l:: el/la}} parque.

However, because of how Anki shows cloze deletions, this approach gives away too much information:
Voy a[ el/la] parque.

I’d prefer the card to hide the contraction so that the front shows the full gap without hinting at the answer.
Voy a [el/la] parque.
And the other side would still be:
Voy al parque.

Is there any trick or workaround in Anki to separate cloze deletions?
Can I style them somehow?

2

on second thought…
If someone is confused by Spanish, I could have just asked;
“How do I turn ‘I will {{c1::not::deny}} go’ into ‘I won't go’?”
However, this contraction is optional.

3

You can somewhat do that using javascript:

<div id="answer_text">{{cloze:Text}}<div><br>
{{Back Extra}}

<script>
	// store multiline answer text and remove all html tags
	var text = strip(`{{cloze:Text}}`);
	var text_modified = "";
	
	// check if the text includes " a el " and replace it by " al " if true
	if (text.includes(" a el ")) {
		text_modified = text.replace("a el ", " al ");
		document.getElementById("answer_text").innerHTML = text_modified;
	}
	
	
	
	// strip() source: https://stackoverflow.com/a/47140708
	function strip(html){
		let doc = new DOMParser().parseFromString(html, 'text/html');
		return doc.body.textContent || "";
	}
</script>

You’re seeing the back template here. For more info, see Card Templates - Anki Manual.

4

Put the whole thing in the cloze –
I {{c1::won't::deny}} go.
[which reveals itself to be a terrible sentence for cloze deletion, but you get the picture]

Or in your Spanish example –
Voy {{c1::al::to the}} parque.

5

Thanks so much for your response! I really appreciate the JavaScript approach.
It opens up some new possibilities for me. I’m sure I’ll love it once I fully understand how it works, and maybe I’ll even try creating my own scripts down the line.

I noticed this script is tailored for the backside of the card. My issue is with the front, where the contraction “a[ el/la]” causes trouble. The backside is fine since it displays “al” correctly with the colored “l.”
Could you please adjust it for the frontside?


Thank you for the other suggestion to put the whole contraction in one cloze deletion.
I really prefer the JavaScript approach. I wouldn’t want to combine "to the" because it would hint too strongly that a contraction is needed, and besides, “a la” cannot be contracted. Also, for sentences like “I [...] go”, there might be more than one acceptable answer (like “I didn’t go”), and I design my cards with only one correct answer for easier rating.
I understand your perspective. I could improve my hint fields, but it feels like just paraphrasing what should be placed in the blank.
I {{c1::won't::future simple negation}} go.
I would feel that I’m not focusing on the context but merely translating the hint.
With the JavaScript method, I can create tricky exercises that try to trip me up, hinting that “a el” could be a possible answer.

1 Like
6

I think I could but I’m actually a bit confused now. Here’s what I thought was the current condition:

  1. The front field of your cloze contains Voy a {{c1::el::el/la}} parque. and shows the desired:
    anki
  2. If you turn the card to the backside, it shows the undesired:
    anki
  3. Which is why you want to change the backside to show the desired:
    anki
    (well, semi-desired considering the blue color is gone)

I fixed #3 with the following code:

<script>
	// store multiline answer text and remove all html tags
	var text = strip(`{{cloze:Text}}`);
	var text_modified = "";
	
	// check if the text includes " a el " and replace it by " al " if true
	if (text.includes(" a el ")) {
		text_modified = text.replace("a el ", "<span class=\"cloze\">" + " al " + "</span>");
		document.getElementById("answer_text").innerHTML = text_modified;
	}
	
	
	
	// strip() source: https://stackoverflow.com/a/47140708
	function strip(html){
		let doc = new DOMParser().parseFromString(html, 'text/html');
		return doc.body.textContent || "";
	}
</script>

So that the backside looks like this:
anki

Could you please clarify?

2 Likes
7

Ahá!
As I can’t code, I misunderstood the concept. I thought the JavaScript would only alter the spacing on the front side, not replace “a el” with “al.”
After a quick test, it works just as you described.
I’ll adjust my cards accordingly.
Thank you for clarifying and for your help!

1 Like