Feature request: intra-card topic order

Hello,

I don’t think this already exists, but if it does, my apologies!

It would be very nice to have a feature that changes the order in which a given item within the card is presented each time.

For example, if I have a single card similar to the below example:

{{c1::eagle}} is {{c2::bird}}
{{c1::lizard}} is {c2::reptile}}
line item 3 …

If we can tag the topics in such a way that they are presented in a different, random order every time, there would be less reliance on pattern recognition and more reliance on understanding.

line item 3 …
{{c1::eagle}} is {{c2::bird}}
{{c1::lizard}} is {c2::reptile}}

You can make the argument that you should have a separate card for each line item above. However, I have thousands of cards where like information grouped together is helpful for broader understanding.

Thank you!

I do this in javascript. (My code is… messy, but this works for me on desktop, ios, and last time I checked ankiweb. I’m sure there are better ways to do this.)

This is in most of my card templates (front only if FrontSide is used, front and back if not):

<script>
//Shuffle all tagged elements.
var shuffle_elements =document.getElementsByClassName("shuffle_these");
var shuffle_back_elements = document.getElementsByClassName("shuffle_these_back");

var shuffle_elements_html = [];
for (var i = 0; i < shuffle_elements.length; i++) {
  shuffle_elements_html[i] = shuffle_elements[i].innerHTML;
}
var shuffle_back_elements_html = [];
for (var i = 0; i < shuffle_back_elements.length; i++) {
  shuffle_back_elements_html[i] = shuffle_back_elements[i].innerHTML;
}

if(!window.shuffle_order || window.shuffle_order.length != shuffle_elements.length) {
  window.shuffle_order = []
  for (var i = 0; i < shuffle_elements.length; i++) {
    window.shuffle_order[i] = i;
  }
  var t;
  for (var m = shuffle_elements.length; m > 0; m--) {
    // Pick a remaining element…
    i = Math.floor(Math.random() * m);

    // And swap it with the current element.
    t = window.shuffle_order[m-1];
    window.shuffle_order[m-1] = window.shuffle_order[i];
    window.shuffle_order[i] = t;
  }
}

var back_shuffle_order = [];
if(shuffle_back_elements.length == shuffle_elements.length) {
  back_shuffle_order = window.shuffle_order;
} else {
    for (var i = 0; i < shuffle_back_elements.length; i++) {
    back_shuffle_order[i] = i;
  }
  var t;
  for (var m = shuffle_back_elements.length; m > 0; m--) {
    // Pick a remaining element…
    i = Math.floor(Math.random() * m);

    // And swap it with the current element.
    t = back_shuffle_order[m-1];
    back_shuffle_order[m-1] = back_shuffle_order[i];
    back_shuffle_order[i] = t;
  }
}

for (var i = 0; i < shuffle_elements.length; i++) {
  shuffle_elements[i].innerHTML = shuffle_elements_html[window.shuffle_order[i]];
}
for (var i = 0; i < shuffle_back_elements.length; i++) {
  shuffle_back_elements[i].innerHTML = shuffle_back_elements_html[back_shuffle_order[i]];
}
</script>

Then, anything on the front that gets shuffled goes in a div or span with the appropriate class, for example:

<div class="shuffle_these">{{c1::eagle}} is {{c2::bird}}</div>
<div class="shuffle_these">{{c1::lizard}} is {c2::reptile}}</div>
<div class="shuffle_these">line item 3 …</div>

And if I need additional notes that need to be in the same shuffled order on the back, the class is shuffle_these_back

Hope that helps. I’m curious how other people handle this.