How to insert a random element on a Anki card?

Question

On Anki, the front of a card have "X+Y?" and the back shows "Z". For example, front "4+7?" and back "11" But I want next time that I see this card the numbers be different, randomizing the X, Y and Z elements. This could be possible picking the values from a pool previously defined by me, I guess.

Searching it on here, I found this code:

import random

foo = ['a', 'b', 'c', 'd', 'e']

print(random.choice(foo))

How can I put it to work on Anki? Because I just tried to copy it and paste in card model editor, but nothing happened. Sorry, I'm not a programmer, so I'd be grateful to know anything that can help me functionalize this random display. Thanks for your time.

Answer 1

Even though it is possible (but convoluted to make it happen), it is usually (very heavily) discouraged to make use of random content on Anki. The reason is the following: if some content has a change of being displayed at the front of a card, then it means you want to memorize it. But then, it means that you are bloating several things that you want to learn into a single card. For several reasons (among which: Anki is optimized to work with the assumption that each card corresponds to a single, atomic thing you want to learn. Breaking that assumption can only make it work worse, which in the end makes you spend more time trying to learn that stuff), it's better to just have a card for each possible thing you want to learn.

---

Edit having read my words of warning, I'll leave you judge of whether it's really a good decision to do what you want.

The first thing to understand is that even though Anki is mainly written in Rust and Python (which are two programming languages), and even though it supports add-ons written in Python, it's not Python (nor Rust) that should be used for this purpose. I say this because the snippet of code you provided is written in Python.

The reason behind this is that Anki uses webviews to render cards, which means that when you see a card, it's just like if you were seeing a website. Therefore, if you only want execute code when you are reviewing the cards (and not, say, automatically generate cards), the language you have to use is JavaScript. Unfortunately, I am not a JavaScript programmer, so my answer may suck. Fortunately, JavaScript is a rather simple programming language, very well documented, and your request is simple enough for me not to have much room to screw the code (meaning this answer should not suck too much). This being said, let's make it work:

1. Add a field to your notes that will hold the possible values that will be shown. To make it simple, let's assume none of these values will contain commas, so that we can simply write the values comma-separated. Let's say you called this field Values (rename it as you like). By default, it's going to pick the first of these values if it cannot pick at random. More on this at the end.
2. Now open the template edit window for this note. If you are in the browser, it should be the Cards... button.
3. Select Front Template (it should be selected by default). At the top of the template, add the following, which is code that will allow the randomly chosen value to be kept also when you reveal the answer (because by default it would just re-evaluate the whole script, picking at random again).

<script>
// v1.0.0 - https://github.com/SimonLammer/anki-persistence/blob/cd2ca88e019dc3b8f32dad623932c1eabdba7e21/script.js
if(void 0===window.Persistence){var _persistenceKey="github.com/SimonLammer/anki-persistence/",_defaultKey="_default";if(window.Persistence_sessionStorage=function(){var e=!1;try{"object"==typeof window.sessionStorage&&(e=!0,this.clear=function(){for(var e=0;e<sessionStorage.length;e++){var t=sessionStorage.key(e);0==t.indexOf(_persistenceKey)&&(sessionStorage.removeItem(t),e--)}},this.setItem=function(e,t){null==t&&(t=e,e=_defaultKey),sessionStorage.setItem(_persistenceKey+e,JSON.stringify(t))},this.getItem=function(e){return null==e&&(e=_defaultKey),JSON.parse(sessionStorage.getItem(_persistenceKey+e))},this.removeItem=function(e){null==e&&(e=_defaultKey),sessionStorage.removeItem(_persistenceKey+e)})}catch(e){}this.isAvailable=function(){return e}},window.Persistence_windowKey=function(e){var t=window[e],n=!1;"object"==typeof t&&(n=!0,this.clear=function(){t[_persistenceKey]={}},this.setItem=function(e,n){null==n&&(n=e,e=_defaultKey),t[_persistenceKey][e]=n},this.getItem=function(e){return null==e&&(e=_defaultKey),null==t[_persistenceKey][e]?null:t[_persistenceKey][e]},this.removeItem=function(e){null==e&&(e=_defaultKey),delete t[_persistenceKey][e]},null==t[_persistenceKey]&&this.clear()),this.isAvailable=function(){return n}},window.Persistence=new Persistence_sessionStorage,Persistence.isAvailable()||(window.Persistence=new Persistence_windowKey("py")),!Persistence.isAvailable()){var titleStartIndex=window.location.toString().indexOf("title"),titleContentIndex=window.location.toString().indexOf("main",titleStartIndex);titleStartIndex>0&&titleContentIndex>0&&titleContentIndex-titleStartIndex<10&&(window.Persistence=new Persistence_windowKey("qt"))}}
</script>

This code comes from anki persistance. Also, when editing templates, please do not write values above the snippet, always under (it won't change how it renders, but it will ensure all this code is loaded before you do anything else).

4. Select the Back Template, and add the following snippet at the top of the template (it's the same thing as before):

<script>
// v1.0.0 - https://github.com/SimonLammer/anki-persistence/blob/cd2ca88e019dc3b8f32dad623932c1eabdba7e21/script.js
if(void 0===window.Persistence){var _persistenceKey="github.com/SimonLammer/anki-persistence/",_defaultKey="_default";if(window.Persistence_sessionStorage=function(){var e=!1;try{"object"==typeof window.sessionStorage&&(e=!0,this.clear=function(){for(var e=0;e<sessionStorage.length;e++){var t=sessionStorage.key(e);0==t.indexOf(_persistenceKey)&&(sessionStorage.removeItem(t),e--)}},this.setItem=function(e,t){null==t&&(t=e,e=_defaultKey),sessionStorage.setItem(_persistenceKey+e,JSON.stringify(t))},this.getItem=function(e){return null==e&&(e=_defaultKey),JSON.parse(sessionStorage.getItem(_persistenceKey+e))},this.removeItem=function(e){null==e&&(e=_defaultKey),sessionStorage.removeItem(_persistenceKey+e)})}catch(e){}this.isAvailable=function(){return e}},window.Persistence_windowKey=function(e){var t=window[e],n=!1;"object"==typeof t&&(n=!0,this.clear=function(){t[_persistenceKey]={}},this.setItem=function(e,n){null==n&&(n=e,e=_defaultKey),t[_persistenceKey][e]=n},this.getItem=function(e){return null==e&&(e=_defaultKey),null==t[_persistenceKey][e]?null:t[_persistenceKey][e]},this.removeItem=function(e){null==e&&(e=_defaultKey),delete t[_persistenceKey][e]},null==t[_persistenceKey]&&this.clear()),this.isAvailable=function(){return n}},window.Persistence=new Persistence_sessionStorage,Persistence.isAvailable()||(window.Persistence=new Persistence_windowKey("py")),!Persistence.isAvailable()){var titleStartIndex=window.location.toString().indexOf("title"),titleContentIndex=window.location.toString().indexOf("main",titleStartIndex);titleStartIndex>0&&titleContentIndex>0&&titleContentIndex-titleStartIndex<10&&(window.Persistence=new Persistence_windowKey("qt"))}}
</script>

5. Go back to Front Template, and add the following where you want the value to be shown. If you don't know, just put it anywhere, check at the end where it renders well, and change it then, so you have visual feedback. Also avoid having other tags with id=values.

<div id="values">{{Values}}</div>

If you renamed the field Values, change the one between double braces too. 6. Add at the bottom of the template the following. This will be responsible for picking a value at random.

<script>
var valuesNode = document.getElementById("values");
var values = valuesNode.innerText.split(',');
var defaultValue = values[0];
var value = defaultValue;
if (Persistence.isAvailable()) {
  value = Persistence.getItem();
  if (value == null) {
    value = values[Math.floor(Math.random() * values.length)];
    Persistence.setItem(value);
  }
}
valuesNode.innerText = value;
</script>

6. Go to the Back Template, and add the following where you want the value to be shown (just like in the front template):

<div id="values">{{Values}}</div>

7. At the bottom of the template, add the following. This will be responsible for showing the randomly picked value when showing the answer.

<script>
var valuesNode = document.getElementById("values");
var values = valuesNode.innerText.split(',');
var defaultValue = values[0];
var value = defaultValue;
if (Persistence.isAvailable()) {
  value = Persistence.getItem();
  Persistence.clear();
}
valuesNode.innerText = value;
</script>

---

Here I'm going to explain why there is a default value. This is due to the fact that several Anki clients handle JavaScript differently. anki persistance should work when you are reviewing, but it may not work when you are previewing a card. In these cases, it could still pick a random value, but when you would reveal the answer it could not "remember" which value it picked, so it would pick an other one at random. To prevent that, if it knows it will not remember, it will just pick the default one, so it's consistent when you reveal the answer.