# Random field order?

**URL:** <https://forums.ankiweb.net/t/random-field-order/8005>\
**Category:** Card Design\
**Created:** [March 4, 2021, 12:26pm UTC](https://forums.ankiweb.net/t/random-field-order/8005 "2021-03-04T12:26:39Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![yaoberh](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/yaoberh/32/7505_2.png) [@yaoberh](https://forums.ankiweb.net/u/yaoberh)\
**Post date:** [March 4, 2021, 12:26pm UTC](https://forums.ankiweb.net/t/random-field-order/8005/1 "2021-03-04T12:26:39Z")

</div>

I have two fields which, if possible, would like to know how to randomize their order.  
{{Simplified}} and {{Traditional}} respectively contain information which I want to randomly alternate between:  
{{Simplified}}  
{{Traditional}}  
and  
{{Traditional}}  
{{Simplified}}  
So they switch places between them and one appears first. Not changing from front to the back of the card or anything like that, I’m looking for a script which alternates their positions in the back of the card or the front of the card so I don’t remember their positions and they keep switching. Is this possible to do?  
Thanks for the help!

---

<div class="post-metadata">

**Author:** ![hkr](https://avatars.discourse-cdn.com/v4/letter/h/c6cbf5/32.png) [@hkr](https://forums.ankiweb.net/u/hkr)\
**Post date:** [March 4, 2021, 1:01pm UTC](https://forums.ankiweb.net/t/random-field-order/8005/2 "2021-03-04T13:01:09Z")

</div>

Try the following:

```auto
<div class="shuffle">{{Field 1}}</div>
<div class="shuffle">{{Field 2}}</div>
<div class="shuffle">{{Field 3}}</div>
<div id="container"></div>

<script>
    // https://stackoverflow.com/a/12646864
    function shuffleArray(array) {
        for (let i = array.length - 1; i > 0; i--) {
            const j = Math.floor(Math.random() * (i + 1));
            [array[i], array[j]] = [array[j], array[i]];
        }
    }

    setTimeout(() => {
        const fields = [...document.querySelectorAll(".shuffle")];
        shuffleArray(fields);
        fields.forEach((fld) => document.getElementById("container").appendChild(fld));
    }, 0);
</script>

```

---

<div class="post-metadata">

**Author:** ![yaoberh](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/yaoberh/32/7505_2.png) [@yaoberh](https://forums.ankiweb.net/u/yaoberh)\
**Post date:** [March 4, 2021, 5:45pm UTC](https://forums.ankiweb.net/t/random-field-order/8005/3 "2021-03-04T17:45:05Z")

</div>

Works wonderfully! Is it possible to add a \< hr \> or \< br \> tag between the fields? I’ve tried but it didn’t work.

---

<div class="post-metadata">

**Author:** ![hkr](https://avatars.discourse-cdn.com/v4/letter/h/c6cbf5/32.png) [@hkr](https://forums.ankiweb.net/u/hkr)\
**Post date:** [March 4, 2021, 6:08pm UTC](https://forums.ankiweb.net/t/random-field-order/8005/4 "2021-03-04T18:08:14Z")

</div>

It can be done by replacing this part of the above code:

```auto
setTimeout(() => {
    const fields = [...document.querySelectorAll(".shuffle")];
    shuffleArray(fields);
    fields.forEach((fld) => document.getElementById("container").appendChild(fld));
}, 0);

```

with:

```auto
setTimeout(() => {
    const fields = [...document.querySelectorAll(".shuffle")];
    shuffleArray(fields);
    const container = document.getElementById("container");
    fields.forEach((fld, index) => {
        if (index !== 0) {
            container.appendChild(document.createElement("hr"));
        }
        container.appendChild(fld);
    });
}, 0);

```

---

<div class="post-metadata">

**Author:** ![bkztei](https://avatars.discourse-cdn.com/v4/letter/b/3be4f8/32.png) [@bkztei](https://forums.ankiweb.net/u/bkztei)\
**Post date:** [April 2, 2022, 3:04am UTC](https://forums.ankiweb.net/t/random-field-order/8005/5 "2022-04-02T03:04:56Z")

</div>

Could you, please, explain why do we need to use setTimeout()?

---

<div class="post-metadata">

**Author:** ![hkr](https://avatars.discourse-cdn.com/v4/letter/h/c6cbf5/32.png) [@hkr](https://forums.ankiweb.net/u/hkr)\
**Post date:** [April 3, 2022, 3:59pm UTC](https://forums.ankiweb.net/t/random-field-order/8005/6 "2022-04-03T15:59:10Z")

</div>

This was posted a year ago, so I can’t remember exactly why I used `setTimeout()`, but perhaps it was to ensure that the script would work on AnkiDroid. In my experience, on AnkiDroid, scripts that do not work as expected when run synchronously may work when inserted into the task queue with `setTimeout()`.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/1X/8f1279ababc5879d54e4838989f606cfe55af8c7.jpeg) [@system](https://forums.ankiweb.net/u/system)\
**Post date:** [May 1, 2023, 7:36am UTC](https://forums.ankiweb.net/t/random-field-order/8005/7 "2023-05-01T07:36:15Z")

</div>

Closed on May 1, 2023, 7:36am UTC