Adding Clickable Hint to Back of Card

I’m trying to add a clickable hint to the back of my cards. I have a clickable hint working on the front of my card with the following code:

{{Front}}

{{#Hint}}


[ click to show hint ]


{{Hint}}




{{/Hint}}

I’ve put this code on the back:

{{FrontSide}}


{{Back}}

{{#Hint2}}


[ click to show hint ]


{{Hint2}}




{{/Hint2}}

I can’t click the hint and have it shown. I’m guessing the back of the card needs a little different code from the front but I’m not sure how to fix it.

Could anyone help me to get the back card clickable hint to work?

Thank you for reading.

-Matt

Hi Matt!

Because the forum allows the use of HTML, you need to explicitly tell it not to interpret the markup.

To do this, wrap the template code in triple backticks.

Here is the code again:

{{Front}}

{{#Hint}}
	<div id="hint" class="hidden">
		<p class="trigger">[ click to show hint ]</p>
		<p class="payload">{{Hint}}</p>
	</div>
	<script>
		var hint = document.getElementById('hint');
		hint.addEventListener('click', function() { this.setAttribute('class', 'shown'); });
	</script>
{{/Hint}}
{{FrontSide}}

<hr id=answer>

{{Back}}

{{#Hint2}}
	<div id="hint2" class="hidden">
		<p class="trigger">[ click to show hint ]</p>
		<p class="payload">{{Hint2}}</p>
	</div>
	<script>
		var hint2 = document.getElementById('hint2');
		hint.addEventListener('click', function() { this.setAttribute('class', 'shown'); });
	</script>
{{/Hint2}}
.card { font: 1.5em/1.5 sans-serif; text-align: center; }

#hint { background: #f2fbe7; border: 1px solid #dff5c4; border-radius: 6px; color: #7a876b; }

#hint.hidden:hover { background: #dff5c4; color: #000; cursor: pointer; }
#hint.hidden .payload { display: none; }

#hint.shown { background: #fff; color: #000; }
#hint.shown .trigger { display: none; }
#hint.shown .payload { display: block; }

#hint2 { background: #f2fbe7; border: 1px solid #dff5c4; border-radius: 6px; color: #7a876b; }

#hint2.hidden:hover { background: #dff5c4; color: #000; cursor: pointer; }
#hint2.hidden .payload { display: none; }

#hint2.shown { background: #fff; color: #000; }
#hint2.shown .trigger { display: none; }
#hint2.shown .payload { display: block; }

*Bump
Any tips? Thanks for reading!

Is there any particular reason you’re not using the default hint functionality?

https://docs.ankiweb.net/templates/fields.html#hint-fields

I think there is a mistake in the JavaScript of the back template. Try changing hint.addEventListener to hint2.addEventListener.

This fixed it! You are amazing!! Thank you so much!! :slight_smile:

1 Like