Random front of card

Anki Card Design
2

Sure, anything is possible when you believe :rocket:

Front

<div id="tasks">
  <div>{{Front}}</div>
  <div>{{Audio}}</div>
  <div>{{Front}} {{type:Back}}</div>
</div>

<script>
// INSERT ANKI PERSISTENCE SCRIPT HERE
</script>

<script>
if (Persistence.isAvailable()) {
  const max = document.querySelectorAll("#tasks > div").length;
  const i = Math.ceil(Math.random() * max);
  Persistence.setItem("index", i);
  for (let other of document.querySelectorAll(
    `#tasks > div:not(:nth-child(${i})`
  )) {
    other.remove();
  }
}
</script>

Back

<div id="tasks">
  <div>
    {{Front}}
    <hr>
    {{Back}}
  </div>
  <div>
    {{Audio}}
    <hr>
    {{Back}}
  </div>
  <div>
    {{Front}}
    <hr>
    {{type:Back}}
  </div>
</div>

<script>
// INSERT ANKI PERSISTENCE SCRIPT HERE
</script>

<script>
if (Persistence.isAvailable()) {
  for (let other of document.querySelectorAll(
    `#tasks > div:not(:nth-child(${Persistence.getItem("index")})`
  )) {
    other.remove();
  }
}
</script>

Anki Persistence script: https://raw.githubusercontent.com/SimonLammer/anki-persistence/master/script.js

5 Likes