How to create a multiple choice card with randomized order of answers?

Card Design
1

I currently have the following layout for cards as described in an the answers in a post titled “Random field order” from 2021:

Front side:

<div class="question">{{Question}}</div>


<div class="answer">

<div class="shuffle false">{{False-1}}</div>

<div class="shuffle false">{{False-2}}</div>

<div class="shuffle false">{{False-3}}</div>

<div class="shuffle true">{{True}}</div>

<div id="container"></div>
</div>

<script>

    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>

With the back side simply being:

{{FrontSide}}

<style>
.true{
	background:green;

}

.false{
	background: #BB0000;

}

</style>

To higlight the true answer in green while also higlighting the false answers in red.

This code however results in the script part of the front being run again when showing the back side, thus shuffling the answers another time which i find quite confusing. How can i prevent this from happening?
I would prefer to solve this problem without using any extentions to ensure cross-platform compatibility as i use Anki on pretty much all platforms simultaneously.

Thank you for your time!

2

You can store the shuffled array with Anki Persistence (a tried and tested script that you’ll need to include in your template) or SessionStorage (may not work everywhere) and retrieve it on the backside:

3

Here’s a template I use. See if it helps.

multiple-choice