I want to swap the text/words positions on the front of my card automatically

Anki Card Design
1

Basically when I click show answer or see the card again I’d want the words to swap position. 満喫 生命線 to 生命線 満喫 or if theres any similar method that’d be much appreciated. I can only manage to change it the very first time until it reverts the 2nd time and then that’s it.

This is my front template.

<div id="swap-container">{{front}}</div>

<script>
  const container = document.getElementById("swap-container");

  // Log the raw HTML to see if there are any unexpected characters
  console.log("Raw HTML:", container.innerHTML);

  // Log the raw text content to see what the script is reading
  console.log("Raw Text:", container.textContent);

  const words = container.textContent.trim().split(/\s+/);

  // Log the split words
  console.log("Split Words:", words);

  if (words.length > 1 && Math.random() > 0.5) {
    [words[0], words[1]] = [words[1], words[0]];
    container.textContent = words.join(" ");
  }
</script>
2

It’s not clear which times you’re referring to.

1 Like
3

Sorry, I just mean it swaps around the first time I use the card (after I added that front template). Then once I click show answer it goes back to normal and stays that way no matter how many times I encounter the card or click show answer. The 2nd time I was refering to was when clicking show answer.

4

You can employ this add-on to insert card state into the card via {{info-New?:}} (or similar additional field) and use it as the condition for swapping the words.

1 Like
5

So you want the randomness from the front side to persist in the back right?

In that case, you can store it in a variable and use it in the back template (without reassigning the variable). This should work on AnkiDroid’s new study screen and Anki Desktop.

Summary

Front

<div id="swap-container">{{front}}</div>

<script>
  ...
  r = Math.random();

  if (words.length > 1 && r > 0.5) {
    [words[0], words[1]] = [words[1], words[0]];
    container.textContent = words.join(" ");
  }
</script>

Back

<div id="swap-container">{{front}}</div>

<script>
  ...
  
  if (words.length > 1 && r > 0.5) {
    [words[0], words[1]] = [words[1], words[0]];
    container.textContent = words.join(" ");
  }
</script>
2 Likes
6

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