Formatting is out of line when using "hint:" in questions

[electricanki]

I’m using the “hint:” to hide a word on the question. When it doesn’t appear it looks like this…

When it appears the word appears on its own line like this…

When I don’t use the “hint:” everything looks fine like this…

I’m using the following html…

Can I change this so that when the hint appears everything is still on one line?

[jcznk]

Try adding display: inline-block to the style of the span that wraps the hint.

E.g.

<span style='display: inline-block; font-family: "Arial"; font-size: 35px; color: green;'>{{hint:PTb}}</span>

[electricanki]

Thanks, jcznk, that worked! Is there a way to…

1. Put multiple fields under one hint button?
2. Give certain fields the same hint name?

[jcznk]

As far as I know, there is no built-in way. However, you should be able to achieve both by using some JavaScript.

For example:

Add this to the Styling section:

[id^="hint_placeholder"] {color: var(--fg-link);}
[id^="hint_placeholder"]:hover {cursor: pointer; text-decoration: underline;}

And this to the Front template:

<span id="hint" hidden>{{Field1}}, {{Field2}}, {{Field3}}</span>
<span id="hint_placeholder" onclick="RevealHint()">Hint Name</span>

<script>
function RevealHint() {
 document.getElementById("hint").style.display = "inline-block"; 
 document.getElementById("hint_placeholder").style.display = "none";
}
</script>

• Hint Name corresponds to the value that will be shown before you click on the hint. You can change it according to your preference.
• [id^="hint_placeholder"] is a selector that matches all the elements that have an id that begins with hint_placeholder.

---

If you want to use code more than once to add more than one hint, you will need to change the id and function names (making sure everything matches between the HTML and the javascript).

E.g.:

<span id="hint_2" hidden>{{Field4}}</span>
<span id="hint_placeholder_2" onclick="RevealHint_2()">Hint Name</span>, <span id="hint_3" hidden>{{Field5}}</span>
<span id="hint_placeholder_3" onclick="RevealHint_3()">Hint Name</span>

<script>
function RevealHint_2() {
 document.getElementById("hint_2").style.display = "inline-block"; 
 document.getElementById("hint_placeholder_2").style.display = "none";
}

function RevealHint_3() {
 document.getElementById("hint_3").style.display = "inline-block"; 
 document.getElementById("hint_placeholder_3").style.display = "none";
}
</script>

Notice that I used Hint Name both times. That is to show that, if you want, you can give the same name to multiple hint placeholders.

---

To make an example based on your code:

<span id="hint" hidden>
<span style='font-family:"Arial"; font-size:35px;'>{{PTa}}</span>, <span style='font-family:"Arial"; font-size:35px;'>{{PTb}}</span>
</span>
<span id="hint_placeholder" onclick="RevealHint()">Hint Name</span>

<span style='font-family:"Arial"; font-size:35px;'>{{PTc}}</span>

<script>
function RevealHint() {
 document.getElementById("hint").style.display = "inline-block"; 
 document.getElementById("hint_placeholder").style.display = "none";
}
</script>

[electricanki]

That’s fantastic jcznk! Got the first one working. Going to try the second one.

One thing I do notice is that the hint text is always the same size. Can that be changed in the code below the id="hint_placeholder … part?

[jcznk]

You can change the font of the hint placeholder by adding style='font-size: 35px;' to the span.

E.g.

<span id='hint_placeholder' onclick='RevealHint()' style='font-size: 35px'>English</span>

---

By the way, on second thought, I realized there probably are more concise alternatives to the code I sent you yesterday.

The following is inspired from Anki’s default code for hints:

<span id="hint_1" hidden>{{Field}}, {{Field2}}, {{Field3}}</span> 
<a class="hint" onclick="this.style.display='none'; document.getElementById('hint_1').style.display='inline-block'; 
return false;" style="font-size:35px">Example</a>

The logic is mostly the same: when you click on the hint, the hint placeholder stops being displayed and the hint (which corresponds to the hidden span preceding the hint “button”) is shown instead.

Regarding the differences:

• this time, the hint placeholder uses a link (<a></a>) instead of a span; this way, you should not need to add any CSS to the styling section of your notes.
• since most of the code is stored inside the onclick attribute, there is no need to use a separate script.

This should make it easier to create multiple hints by simply copy-pasting the code. All you need to do is to make sure to change the id each time (both on the span element and inside the respective onclick attribute).

For example, this will create 3 separate hints:

<span id="hint_1" hidden>{{Field1}}</span> 
<a class="hint" onclick="this.style.display='none'; document.getElementById('hint_1').style.display='inline-block'; 
return false;" style="font-size:35px">Example 1</a>

<br>

<span id="hint_2" hidden>{{Field2}}</span> 
<a class="hint" onclick="this.style.display='none'; document.getElementById('hint_2').style.display='inline-block'; 
return false;" style="font-size:35px">Example 2</a>

<br>

<span id="hint_3" hidden>{{Field3}}</span> 
<a class="hint" onclick="this.style.display='none'; document.getElementById('hint_3').style.display='inline-block'; 
return false;" style="font-size:35px">Example 3</a>