Different cloze type to hide "revealing informations"

Anki Card Design
1

I often create multiple cards from one note as follows:

{{c3::{{c2::{{c1::§ AA-BB1::§ ...-...}} | Topic A::}}::}}
{{c3::{{c1::{{c2::§ BB2-CC1}} | Topic B::}}::}}
{{c2::{{c1::{{c3::§ CC2-DD1}} | Topic C::}}::}}

context: i add ::}} at the end, so it omits the “revealing information” with [ ]. And [ ] signals, that it is actually not part of the requested solution.

reason: the different cards are siblings (I want to learn them one by one) and it saves time to create them like this.

problem: when I use the “::}} / [ ]”-trick, the text in the the ::}} part is shown in the answer color as well. So I have a lot of “red” and it can confuse me on the answer side, what the actual question was.
is it somehow possible to omit “revealing informations” with a special cloze-deletion egs. with {{c1x::revealing information}} so that it doesnt show on the question side and/or that it shows on the answer side in normal color?

2 Likes
2

example
Cloze-Deletion “code”
grafik

Front/Question Side for {{c1::…}}
grafik

Back/Answer Side for {{c1::…}}
grafik

Goal
I want “ve bu zaten = und dies bereits” to be black, and not blue.

1 Like
3

so I tried to create a javascript (with chat-gpt) to get the functionality. but it doesn’t work

I added in the css-styles of the Backside/answer side at beginning of the style sheet the following code

<script>
document.addEventListener('DOMContentLoaded', function() {
    var clozes = document.querySelectorAll('.cloze');

    clozes.forEach(function(cloze) {        
        if (cloze.textContent.endsWith('::}}')) {
            cloze.classList.add('cloze-endmarker');
        }
    });
});
</script>

At the end of the general css-style page I added

.cloze-endmarker {
    color: black; 
   }

but the {{c1::…::}} section is still blue instead of black.

1 Like
4

You have a “if” condition with the “.endsWith(‘::}}’)”.
The problem about this is, that there will be no such thing registered by your JavaScript. When the cloze loads in, the opening tag “{{c1::” and closing tag “::sometext}}” get erased and transformed into an HTML-Element.

If you want to exactly see what I mean, just look at one of your flashcards in the preview or reviewer, press right click and open the inspect menu.
There you can see, how the clozes are build in the HTML-Page.

2 Likes
5

If you have no coding experience, I quickly did something for you.

Just paste the following code at the end of your front- and backside in the notetemplate editor:

<script>

var clozes = document.querySelectorAll('.cloze');

function ChangeColor()
{
	clozes.forEach(function(element)
	{
		element.style.color = 'black';
	});
}

ChangeColor();
</script>
1 Like
6

I think maybe what you are asking for can be accomplished by simply adding the following to the Styling section.

.cloze-inactive {
    color: black;
}

To remove the bold formatting as well, try the following:

.cloze-inactive {
    color: black;
    font-weight: normal;
}

inactive-cloze-styling
inactive-cloze-styling774×936 53.5 KB

2 Likes
7 
.cloze-inactive {
}

edit: isn’t sadly the solution. it just works on some cards and on some it makes the “main cloze” black as well.

Final questions:

  • is .cloze-inactive an anki-predefined css-class for {{c1::egs**::**}}-fields? Or how does this work?

  • And how to get into the inspector mode? I know it from the browsers, but I can’t find it in Anki itself.

edit:
Still already a big thank you, @hkr and @Duude.

8

The “cloze-inactive” is indeed a predefined class. But it is only used in the reviewer / preview page. When you change the color of “.cloze-inactive”. You only change the color of the clozes, which are not being reviewed at the moment.

Example:
If you are reviewing cloze 1 and set the color of “cloze-inactive” to red, cloze 1 will stay blue, but cloze 2 will be painted as red.

You get into the inspector mode by just pressing right click on the reviewer / preview page and pressing the “inspect” option.

9

with one cloze-card type it works:

#Template A#
Front A
{{cloze:Text}}
Back A

{{cloze:Text}}
<hr id=answer>
<div style='font-family: Liberation Sans; font-size: 18px'>
	<details open>
		<summary> <strong> Mnemnonic </strong></summary>
		{{Mnemnonic}}
	</details>
</div>
<br>
<div style='font-family: Liberation Sans; font-size: 15px;'>
	<details open> 
		<summary> <strong>Notizen</strong> 
		</summary> 
		<i>
      {{Notiz}}
		</i>
	</details>
</div>
<br>
<div style='font-family: Liberation Sans; font-size: 15px;'>
	<details open> 
		<summary> <strong>Bild</strong> 
		</summary> 
		<i>
      {{Bild}}
		</i>
	</details>
</div>

Style A

.card {
 font-family: arial;
 font-size: 20px;
 text-align: left;
 color: black;
 background-color: white;
}

.cloze {
 font-weight: bold;
 color: blue;
}
.nightMode .cloze {
 color: lightblue;
}

.cloze-inactive {
    color: black;
    font-weight: normal;
}

//////////////

/////////////

#Template B#
Front B

{{#Mnemonic}}
<!-- Wenn Mnemonic nicht leer ist, wird dieser Teil zuerst abgefragt -->
<div style="font-family: Liberation Sans; font-size: 12px; background-color: lightpink">
    <details close>
        <summary>
            <strong>Mnemonic</strong>
        </summary>
        {{Mnemonic}}
    </details>
</div>

<br />
{{/Mnemonic}}

<div style="font-family: Liberation Sans; font-size: 20x; background-color: lightblue">
{{cloze:Text}}
</div>

<div style="float:right; background-color: lightgray"> 
    <small>
        [{{Subdeck}}]
    </small> 
</div>

Back B

{{#Mnemonic}}
<!-- Wenn Mnemonic nicht leer ist, wird dieser Teil zuerst abgefragt -->
<div style="font-family: Liberation Sans; font-size: 12px; background-color: lightpink">
    <details open>
        <summary>
            <strong>Mnemonic</strong>
        </summary>
        {{Mnemonic}}
    </details>
</div>
<br />
{{/Mnemonic}}

<div style="font-family: Liberation Sans; font-size: 20x; background-color: lightblue">
{{cloze:Text}}
<br />
</div>

<!-- ---------------------- -->
<hr> <!-- Trennungslinie -->
<!-- ---------------------- -->

{{#Notiz}}
<div style="font-family: Liberation Sans; font-size: 18px; background-color: lightgray">
    <details open>
        <summary> <strong>Notizen</strong> </summary>
        {{Notiz}}
    </details>
</div>
{{/Notiz}}

{{#Kontext}}
<br />
<div style="font-family: Liberation Sans; font-size: 14px; background-color: lightyellow">
		<details open>
				<summary> <strong>Kontext</strong> </summary>
							{{Kontext}}
			</details>
</div>
{{/Kontext}}

{{#Gesetzesartikel}}
<div style="font-family: Liberation Sans; font-size: 14px; background-color: lightyellow">
    <details open>
        <summary> <strong>Gesetzesartikel</strong> </summary>
        <i>
            {{Gesetzesartikel}}
        </i>
    </details>
</div>
<br />
{{/Gesetzesartikel}}

{{#Entscheid}}
<div style="font-family: Liberation Sans; font-size: 15px; background-color: lightgray">
    <details open>
        <summary>
            <strong>Entscheide</strong>
        </summary>
        {{Entscheid}}
    </details>
</div>
<br />
{{/Entscheid}}

{{#Mnemonic}}
<div style="font-family: Liberation Sans; font-size: 15px; background-color: lightpink">
    <details open>
        <summary>
            <strong>Mnemonic</strong>
        </summary>
        {{Mnemonic}}
    </details>
</div>
<br />
{{/Mnemonic}}

<div style="font-family: Liberation Sans; font-size: 15px; background-color: lightgray">
    <details open>
        <summary>
            <strong>Tags</strong>
        </summary>
        {{Tags}}
    </details>
</div>
<br />

{{#Bild}}
<div style="font-family: Liberation Sans; font-size: 15px;">
    <details open>
        <summary>
            <strong>Bild</strong>
        </summary>
        {{Bild}}
    </details>
</div>
{{/Bild}}

Style B

.card {
 font-family: arial;
 font-size: 20px;
 text-align: left;
 color: black;
 background-color: white;
}

.cloze {
 color: #FF4500;
}
.nightMode .cloze {
 color: lightblue;
}

.cloze-inactive {
    color: black;
    font-weight: normal;
}

//////////////

/////////////

My Back B doesn’t show colors here in the code preview… So I might have a code issue there. …

10

right click just shows “copy” (in the card-edit preview as well)
grafik

11

In the screenshot above, I am using an add-on named AnkiWebView Inspector, which I have published on the AnkiWeb. If you install this add-on and right-click and choose the command Inspect, the inspector panel will appear.

However, you can also debug Anki’s webviews from Chormium-based browsers such as Google Chrome or Microsoft Edge without my add-on by setting an environment variable. See Debugging - Writing Anki Add-ons .

1 Like
12

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