Looking for some ideas for advanced cards (maybe javascript to display random fields?)

Anki Card Design
1

I am a user of the awesome asset manager addon, and I have made some nice cards for language study. My target language word definitions are very context dependant, and most often need either examples or hints to avoid ambiguity. I now typically have in addition to a Question and Answer field a series of source1, target1, source2, target2, fields with sample context phrases. I can have anywhere from 1 to 10 examples (20 fields), but it does seem neither desireable nor possible to display all these at once.

Has anyone seen or made any cards where a hint is pulled randomly from a set of fields? Or maybe 2 or 3 random examples are listied under a question? I am assuming this might involve some javascript. Any sample to point to that might help me? Or mabye even some other ideas?

2

You could try using RNG (see: JavaScript Random)
E.g. the following code will display one of 10 random fields:

Styling section:
.hidden {display: none}

Front and/or Back template:

<div id="Field1" class="hidden">{{Field1}}</div>
<div id="Field2" class="hidden">{{Field2}}</div>
<div id="Field3" class="hidden">{{Field3}}</div>
<div id="Field4" class="hidden">{{Field4}}</div>
<div id="Field5" class="hidden">{{Field5}}</div>
<div id="Field6" class="hidden">{{Field6}}</div>
<div id="Field7" class="hidden">{{Field7}}</div>
<div id="Field8" class="hidden">{{Field8}}</div>
<div id="Field9" class="hidden">{{Field9}}</div>
<div id="Field10" class="hidden">{{Field10}}</div>

<script>

{{^Field2}}
var x = Math.floor(Math.random()) + 1; // Returns 1
{{/Field2}}

{{^Field3}}{{#Field2}}
var x = Math.floor(Math.random()*2) + 1; // Returns a random integer from 1 to 2
{{/Field2}}{{/Field3}}

{{^Field4}}{{#Field3}}
var x = Math.floor(Math.random()*3) + 1; // Returns a random integer from 1 to 3
{{/Field3}}{{/Field4}}

{{^Field5}}{{#Field4}}
var x = Math.floor(Math.random()*4) + 1; // Returns a random integer from 1 to 4
{{/Field4}}{{/Field5}}

{{^Field6}}{{#Field5}}
var x = Math.floor(Math.random()*5) + 1; // Returns a random integer from 1 to 5
{{/Field5}}{{/Field6}}

{{^Field7}}{{#Field6}}
var x = Math.floor(Math.random()*6) + 1; // Returns a random integer from 1 to 6
{{/Field6}}{{/Field7}}

{{^Field8}}{{#Field7}}
var x = Math.floor(Math.random()*7) + 1; // Returns a random integer from 1 to 7
{{/Field7}}{{/Field8}}

{{^Field9}}{{#Field8}}
var x = Math.floor(Math.random()*8) + 1; // Returns a random integer from 1 to 8
{{/Field8}}{{/Field9}}

{{^Field10}}{{#Field9}}
var x = Math.floor(Math.random()*9) + 1; // Returns a random integer from 1 to 9
{{/Field9}}{{/Field10}}

{{#Field10}}
var x = Math.floor(Math.random()*10) + 1; // Returns a random integer from 1 to 10
{{/Field10}}

if (x === 1 ) {document.getElementById("Field1").className = "shown";}
if (x === 2 ) {document.getElementById("Field2").className = "shown";}
if (x === 3 ) {document.getElementById("Field3").className = "shown";}
if (x === 4 ) {document.getElementById("Field4").className = "shown";}
if (x === 5 ) {document.getElementById("Field5").className = "shown";}
if (x === 6 ) {document.getElementById("Field6").className = "shown";}
if (x === 7 ) {document.getElementById("Field7").className = "shown";}
if (x === 8 ) {document.getElementById("Field8").className = "shown";}
if (x === 9 ) {document.getElementById("Field9").className = "shown";}
if (x === 10 ) {document.getElementById("Field10").className = "shown";}

</script>
2 Likes
3

Wow! I wasn’t expecting a solution in such detail! This certainly gives me something to work with. Thank you VERY much!

1 Like