Enumerations shown one after the other on a card

Anki Add-ons
4

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