Insert Randomized Lists (multiple choice)

[VisoPallido]

Which add-on is affected?

[ Please mention the add-on in the issue title as follows: "[Add-on name] My issue" ]

Prerequisite checklist

[ Please enter an [ x ] character to confirm the points below: ]

• In case of a bug: Have you tried restarting Anki?
• [ x] Are you running the latest version of the add-on? Have you redownloaded the add-on from AnkiWeb to make sure?
• [x ] Did you check the add-on description on AnkiWeb for known issues?
• [ x] Did you perform a cursory search through existing issue reports?

What is the problem/feature you would like to see fixed/implemented?

[ Please be as specific as possible. Provide screenshots if you think they can help. ]

How can we reproduce the problem?

[ What were you doing when the problem occurred? ]

1. [ First step ]
2. [ Second step ]
3. [ and so on... ]

Expected behavior: [ What you expected to happen ]

Actual behavior: [ What actually happened ]

Reproducible?: [ Can you reliably reproduce the issue by following the steps above? ]

Version information

Anki
[Versione ⁨2.1.49 (dc80804a)⁩
Python 3.8.6 Qt 5.14.2 PyQt 5.14.2

System

• Operating system: Windows
• Version: 10

I followed the instructions given here step by step
https://github.com/glutanimate/anki-addons-misc/tree/master/src/editor_random_list
I have installed the add-on Cookie monster but it has few instructions and maybe I don't understand how to use it
I also fixed the problem of the RL key not working well.
https://github.com/glutanimate/anki-addons-misc/tree/master/src/editor_random_list

the problem is that the order of the list in the question is different from that of the answer.
I am not an expert but only self-taught. Please don't take anything for granted when you answer me.

I write the code in my card.
front

<div id="front">{{edit:Domanda}}

{{type:Risposta}}</div>


<!====START====Insert Randomized Lists (multiple choice)==========================>

<script>

var createCookie = function(name, value, days) {
    var expires;
    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        expires = "; expires=" + date.toGMTString();
    }
    else {
        expires = "";
    }
    document.cookie = name + "=" + value + expires + "; path=/";
}

function getCookie(c_name) {
    if (document.cookie.length > 0) {
        c_start = document.cookie.indexOf(c_name + "=");
        if (c_start != -1) {
            c_start = c_start + c_name.length + 1;
            c_end = document.cookie.indexOf(";", c_start);
            if (c_end == -1) {
                c_end = document.cookie.length;
            }
            return unescape(document.cookie.substring(c_start, c_end));
        }
    }
    return "";
}

function getRandomElms(){
    var ul = document.querySelectorAll('ul.shuffle');
    return ul
}

function getRandArr(elm, array){
    for (var i = elm.children.length; i >= 0; i--) {
        rand = Math.random() * i | 0;
        array.push(rand)
    }
}

function shuffleWithArr(elm, array){
    elm.style.backgroundColor = "inherit"
    for (var i = elm.children.length; i >= 0; i--) {
        elm.appendChild(elm.children[array[i]]);
    }
}

function run() {
    var elms = getRandomElms()
    var isFront = document.getElementById("front");

    for (var i = 0; i < elms.length; i++) {
        var idxArr = [];
        elm = elms[i]
        if (isFront) {
            getRandArr(elm, idxArr);
            // convert idxArr array to a JSON string to be stored
            var json_str = JSON.stringify(idxArr);

            // persist the idxArr order and correct answers
            createCookie('idxArr' + i, json_str);

            var stored_data = idxArr
        } else {
            // get the idxArr order
            var json_data = getCookie('idxArr' + i);
            // get the array back from storage
            var stored_data = JSON.parse(json_data);
        }
        shuffleWithArr(elm, stored_data)
    }
}

run();

</script>

<!====END====Insert Randomized Lists (multiple choice)==========================>

Now the Back

{{FrontSide}}
<p class="titolo">Contenuto extra:</p>
{{Extra}}

<!====START====Insert Randomized Lists (multiple choice)==========================>

<script>

var createCookie = function(name, value, days) {
    var expires;
    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        expires = "; expires=" + date.toGMTString();
    }
    else {
        expires = "";
    }
    document.cookie = name + "=" + value + expires + "; path=/";
}

function getCookie(c_name) {
    if (document.cookie.length > 0) {
        c_start = document.cookie.indexOf(c_name + "=");
        if (c_start != -1) {
            c_start = c_start + c_name.length + 1;
            c_end = document.cookie.indexOf(";", c_start);
            if (c_end == -1) {
                c_end = document.cookie.length;
            }
            return unescape(document.cookie.substring(c_start, c_end));
        }
    }
    return "";
}

function getRandomElms(){
    var ul = document.querySelectorAll('ul.shuffle');
    return ul
}

function getRandArr(elm, array){
    for (var i = elm.children.length; i >= 0; i--) {
        rand = Math.random() * i | 0;
        array.push(rand)
    }
}

function shuffleWithArr(elm, array){
    elm.style.backgroundColor = "inherit"
    for (var i = elm.children.length; i >= 0; i--) {
        elm.appendChild(elm.children[array[i]]);
    }
}

function run() {
    var elms = getRandomElms()
    var isFront = document.getElementById("front");

    for (var i = 0; i < elms.length; i++) {
        var idxArr = [];
        elm = elms[i]
        if (isFront) {
            getRandArr(elm, idxArr);
            // convert idxArr array to a JSON string to be stored
            var json_str = JSON.stringify(idxArr);

            // persist the idxArr order and correct answers
            createCookie('idxArr' + i, json_str);

            var stored_data = idxArr
        } else {
            // get the idxArr order
            var json_data = getCookie('idxArr' + i);
            // get the array back from storage
            var stored_data = JSON.parse(json_data);
        }
        shuffleWithArr(elm, stored_data)
    }
}

run();

</script>

<!====END====Insert Randomized Lists (multiple choice)==========================>

and, perhaps it is useless, but I also write the content of the style sheet

@import url("_editor_button_styles.css");

.card {
  font-family: myfont;
  font-size: 1.2em;
  text-align: left;
  color: black;
  background-color: white;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}

.titolo {
  font-weight: bold;
}

@font-face {
  font-family: myfont;
  src: url("_EasyReadingPRO.ttf");
}

What is missing from my job to keep the same order of the list on front and back card?