Enumerations shown one after the other on a card

Hello all,

I am looking for a solution that allows me to uncover a list one by one, and this on one card.
For example like this:

Muscle origin:
(…)
Muscle origin:
(…)

“Click”

Muscle origin:
Tuber ischiadicum
Muscle origin:
(…)

“click”

Muscle origin:
Tuber ischiadicum
Muscle insertion:
Capit fibulare

Everything should be able to take place on one card.
For me, this would be helpful because I can learn both combined.

Thanks a lot for your ideas! :slight_smile:

Any ideas? :slight_smile:

Maybe this thread is interesting for you.

The following template would allow you to incrementally reveal an enumeration in form of an <ol> (ordered list) inside the answer field.

Front
{{Front}}
<hr />
<div id="ans">{{Back}}</div>
<div id="dummy-btn"></div>

<script>
   (function incrementalReveal() {
      const list = document.getElementById("ans").querySelector("ol");
      const clickingArea = document.getElementById("dummy-btn");
      if (list) {
         clickingArea.addEventListener("click", revealNext);
         for (let li of list.children) {
            li.classList.add("obscured");
         }
         if (!globalThis.IRShortcut) {
            document.addEventListener("keydown", event => {
               if (event.key === "Tab") {
                  revealNext(event);
               }
            });
            globalThis.IRShortcut = true;
         }
      }
      function revealNext(event) {
         event.preventDefault();
         let obscuredItems = list.querySelectorAll(".obscured");
         if (obscuredItems.length <= 1) {
            pycmd("ans");
            clickingArea.remove();
          }
         obscuredItems[0].classList.remove("obscured");
      }
   })();
</script>
Back
{{Front}}
<hr id="answer">
{{Back}}
CSS (with some extra stuff)
.card {
  margin: 0 auto;
  text-align: center;
  font-family: arial;
  font-size: 20px;
  color: black;
  background-color: white;
}
@media (min-width: 992px) {
  .card {
    max-width: 80%;
  }
}
@media (min-width: 1366px) {
  .card {
    max-width: 66%;
  }
}
#qa {
  display: inline-block;
  text-align: left;
}

ol {
  list-style: none;
  counter-reset: list;
}

li {
  position: relative;
  counter-increment: list;
}
li::before {
  color: var(--text-fg);
  content: counter(list);
  visibility: visible;
  position: absolute;
  left: -1.5em;
}

li.obscured {
  visibility: hidden;
  color: red;
}
li.obscured::after {
  content: "[...]";
  font-weight: bold;
  color: dodgerblue;
  position: absolute;
  left: 0;
  visibility: visible;
}

#dummy-btn {
  width: 100vw;
  height: 100vh;
  left: 0;
  top: 0;
  position: absolute;
  cursor: pointer !important;
  padding: 0 !important;
  margin: 0 !important;
  background: none !important;
  border: none !important;
  font: inherit !important;
  outline: none !important;
}

For clozes, you should take a look at the thread Henrik linked to. Especially this post, where a sample template is linked:

2 Likes

Oh awesome, thanks for the tip!
Sorry, I’m pretty new to the programming area in Anki…how do I proceed to integrate this code?

I tried it now by cloning the card type “simple” card and then copied the corresponding code from you to the front and back side.
How do I now have to select the corresponding cloze fields, which it should then show me one after the other?

I made a sample notetype for you. You can download it here..

By default, it acts like any other question and answer notetype, but if you put a list (ordered or unordered, doesn’t matter) into the answer field and underline the words you want to cloze, it will look like this:

image image

Use Tab or click the screen to reveal the clozes. On desktop, it will automatically flip the card on the last reveal.

Thank you very much!
Unfortunately I can’t find the file…it shows me: " This file is not public". Could you check the upload again?

Oh sorry, now it should be public :sweat_smile:

Fantastic! It is exactly as I imagined! Thank you so much for the help! :slight_smile:

Would there still be a way to use these flashcards with the iPad? Here the “tab” doesn’t work… the cards are all revealed at the same time.
If that’s too complicated, no problem…I use the desktop version on the PC 95% of the time anyway.

Does tapping the screen not work? I’ll look into it.

Yes, but by tapping on the screen, all fields are expanded at the same time and not one after the other

Ah, I forgot to make the dummy-button - which only exists for AnkiMobile support - an actual <button> element. AnkiMobile suppresses all clicking input except that of <button>s.

I also made some other adjustments. It should now flip to the backside for the last reveal on both platforms. I used globalThis.ankiPlatform to discern between the two (For AnkiMobile, this variable is undefined. If this changes in the future, a slight adjustment will have to be made).

I uploaded the fixed template to the same Gofile folder.

Fantastic, it works now! Many, many thanks for the help! :slight_smile:

1 Like

Re buttons, in case you weren’t aware: More Features - AnkiMobile Manual

1 Like

Thanks Damien! Didn’t know that :grinning_face_with_smiling_eyes:

Hello,
once again I have a question about the flashcard type you created for me @kleinerpirat:
At the moment, the front of the card guesses how many answers there should be (or you can see that there is more than one answer) based on the line spacing. Is there a way to change that so that it is displayed, for example, even with 4 key points only one line in the question?

I hope it is understandable what I mean :smiley:


Hey! I took a brief look at it and it seems like a few CSS changes will do the trick. I got a pretty tough week ahead at university, but I’ll see if I can find the time over the next few days :slight_smile:

Great, thanks for the answer! No problem, do it when it suits you! :slight_smile:

Hey, @kleinerpirat have you already found a solution idea for the problems?

I tried to change something in the CSS myself, but unfortunately I can’t do it :frowning: