Nested hints don't work with AnkiMobile

AnkiMobile (iPhone/iPad) Help
1

I use nested hints, e.g., hints that when clicked on reveal other clickable options (see the code below). They work fine on the desktop and ankiweb but not in the app. It’s a real loss for me that they don’t work in the app.

BTW, I recognize that this is not the recommended way to use Anki, but it works for me, since I one important way that I learn is by recognizing while answering one question that I don’t have the answer to another. E.g., when answering the question English Translation? I may realize that I don’t know the answer to Pronunciation. Being able to answer that second question immediately is hugely helpful.

Here’s the code I use to implement my nested hints: I recognize that it’s crude, and advice on refining it will be gratefully accepted.

<a onclick="this.style.display='none'; document.getElementById('allhints').style.display='inline'; return false;" style="display: inline; cursor: pointer;"> 
  <span position=bottom style='font-size:17px;'>all hints</span> 
</a> 

<div id="allhints" style="display: none;"> 
      
  <a onclick="this.style.display='none';document.getElementById('mainhints').style.display='inline';return false;" style="display: inline; font-size: 14px; cursor: pointer;">
    <span position=bottom>main hints</span>
  </a>

  <span id="mainhints" style="display: none;">
    <a onclick="this.style.display='none';document.getElementById('hint1').style='inline; font-style:italic; font-size:14px;';return false;" style="display: inline; font-style:italic; font-size:14px; cursor: pointer;">
      <span position=bottom>hint 1</span>
    </a>
    <span id="hint1" style="display: none;">
      {{hint 1}}
    </span>

    <br>
  
    <a onclick="this.style.display='none';document.getElementById('hint2').style.display='inline';return false;" style="display: inline; cursor: pointer;">
      <span position=bottom>hint 2</span>
    </a>        
    <span id="hint2" style="display: none;">
      {{}}
    </span>

  </span>
  
</div>
2

Why don’t you use the details element for this instead of anchor elements? With this approach you don’t have to use “onclick” events, as details elements have a click open/hide functionality out of the box.

You can also put detail elements inside of detail elements to create nested hints. Like that:

<details>
<summary>All hints</summary>

<details>
<summary>Main hints</summary>

<details>
<summary>hint 1</summary>
{{hint 1}}
</details>

<details>
<summary>hint 2</summary>
{{hint 2}}
</details>

</details>

</details>

This way makes all the JavaScript redundant. You can make it way easier for yourself with this (in my opinion).
If you still want to rely onto your JavaScript because you don’t like the way details elements work, let me know! :slight_smile:

3 Likes
3

Oh, wow. Long story short, because while I’ve been working on html at W3, I’ve been doing it in spurts, since my day job is keeping me pretty fully occupied. And even when I’ve had the time to learn code to be able to maximize the value of Anki to me, I’ve focused on CSS. So, I never got to

. And how I now wish that I had. Your help will save me hours of work, I think. And I’ll endeavor to cordon off in my memory the realization of just how much time I’ve wasted trying to debug the evil, complex code that I’ve written in the past. Thank you!

2 Likes
4

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