How do I remove the top multiple choice answers?

Anki Card Design
1

image
image1578×1718 130 KB

That is the front.

image
image1578×1718 159 KB

And this is the back.

I want to have the back look just like the front but with the right answers green like it is now with the lower answers.

I’m using this add-on: multiple choice with 12 options - AnkiWeb

And the code for the front is:

<script>
    // Loading Persistence
    // https://github.com/SimonLammer/anki-persistence
    // v0.5.2 - https://github.com/SimonLammer/anki-persistence/blob/62463a7f63e79ce12f7a622a8ca0beb4c1c5d556/script.js
    if (void 0 === window.Persistence) { var _persistenceKey = "github.com/SimonLammer/anki-persistence/", _defaultKey = "_default"; if (window.Persistence_sessionStorage = function () { var e = !1; try { "object" == typeof window.sessionStorage && (e = !0, this.clear = function () { for (var e = 0; e < sessionStorage.length; e++) { var t = sessionStorage.key(e); 0 == t.indexOf(_persistenceKey) && (sessionStorage.removeItem(t), e--) } }, this.setItem = function (e, t) { void 0 == t && (t = e, e = _defaultKey), sessionStorage.setItem(_persistenceKey + e, JSON.stringify(t)) }, this.getItem = function (e) { return void 0 == e && (e = _defaultKey), JSON.parse(sessionStorage.getItem(_persistenceKey + e)) }, this.removeItem = function (e) { void 0 == e && (e = _defaultKey), sessionStorage.removeItem(_persistenceKey + e) }) } catch (e) { } this.isAvailable = function () { return e } }, window.Persistence_windowKey = function (e) { var t = window[e], i = !1; "object" == typeof t && (i = !0, this.clear = function () { t[_persistenceKey] = {} }, this.setItem = function (e, i) { void 0 == i && (i = e, e = _defaultKey), t[_persistenceKey][e] = i }, this.getItem = function (e) { return void 0 == e && (e = _defaultKey), t[_persistenceKey][e] || null }, this.removeItem = function (e) { void 0 == e && (e = _defaultKey), delete t[_persistenceKey][e] }, void 0 == t[_persistenceKey] && this.clear()), this.isAvailable = function () { return i } }, window.Persistence = new Persistence_sessionStorage, Persistence.isAvailable() || (window.Persistence = new Persistence_windowKey("py")), !Persistence.isAvailable()) { var titleStartIndex = window.location.toString().indexOf("title"), titleContentIndex = window.location.toString().indexOf("main", titleStartIndex); titleStartIndex > 0 && titleContentIndex > 0 && titleContentIndex - titleStartIndex < 10 && (window.Persistence = new Persistence_windowKey("qt")) } }
</script>

{{#Title}}<h3 id="myH1">{{Title}}</h3>{{/Title}}
{{#Question}}<p>{{Question}}</p>{{/Question}}

<table style="border: 1px white" id="qtable"></table>

<div class="hidden" id="Q_solutions">{{Answers}}</div>
<div class="hidden" id="user_answers">- - - -</div>
<div class="hidden" id="Card_Type">{{QType (0=kprim,1=mc,2=sc)}}</div>

<div class="hidden" id="Q_1">{{Q_1}}</div>
<div class="hidden" id="Q_2">{{Q_2}}</div>
<div class="hidden" id="Q_3">{{Q_3}}</div>
<div class="hidden" id="Q_4">{{Q_4}}</div>
<div class="hidden" id="Q_5">{{Q_5}}</div>
<div class="hidden" id="Q_6">{{Q_6}}</div>
<div class="hidden" id="Q_7">{{Q_7}}</div>
<div class="hidden" id="Q_8">{{Q_8}}</div>
<div class="hidden" id="Q_9">{{Q_9}}</div>
<div class="hidden" id="Q_10">{{Q_10}}</div>
<div class="hidden" id="Q_11">{{Q_11}}</div>
<div class="hidden" id="Q_12">{{Q_12}}</div>

<script>
    // Generate the table depending on the type.
    function generateTable() {
        var type = document.getElementById("Card_Type").innerHTML;
        var table = document.createElement("table");
        var tbody = document.createElement("tbody");
        for (var i = 0; true; i++) {
            if (type == 0 && i == 0) {
                tbody.innerHTML = tbody.innerHTML + '<tr><th>yes</th><th>no</th><th></th></tr>';
            }
            if (document.getElementById('Q_' + (i + 1)) != undefined) {
                if (document.getElementById('Q_' + (i + 1)).innerHTML != '') {
                    var html = [];

                    let answerText = document.getElementById('Q_' + (i + 1)).innerHTML;
                    let labelTag = (type == 0) ? '' :
                        '<label for="inputQuestion' + (i + 1) + '">' + answerText + '</label>';
                    let textAlign = (type == 0) ? 'center' : 'left';

                    html.push('<tr>');
                    var maxColumns = ((type == 0) ? 2 : 1);
                    for (var j = 0; j < maxColumns; j++) {
                        let inputTag = '<input id="inputQuestion' + (i + 1) +
                            '" name="ans_' + ((type != 2) ? (i + 1) : 'A') +
                            '" type="' + ((type == 1) ? 'checkbox' : 'radio') +
                            // TODO: I don't see how these values are used, please add a comment
                            '" value="' + ((j == 0) ? 1 : 0) + '">';
                        html.push(
                            '<td onInput="onCheck()" style="text-align: ' + textAlign + '">' + inputTag +
                            labelTag +
                            '</td>');
                    }
                    if (type == 0) {
                        html.push('<td>' + answerText + '</td>');
                    }
                    html.push('</tr>');
                    tbody.innerHTML = tbody.innerHTML + html.join("");
                }
            } else {
                break;
            }
        }

        table.appendChild(tbody);
        document.getElementById('qtable').innerHTML = table.innerHTML;
        onShuffle();
    }

    function shuffle(array) {
        var currentIndex = array.length, temporaryValue, randomIndex;

        // While there remain elements to shuffle...
        while (0 !== currentIndex) {

            // Pick a remaining element...
            randomIndex = Math.floor(Math.random() * currentIndex);
            currentIndex -= 1;

            // And swap it with the current element.
            temporaryValue = array[currentIndex];
            array[currentIndex] = array[randomIndex];
            array[randomIndex] = temporaryValue;
        }

        return array;
    }

    function onShuffle() {
        var solutions = document.getElementById("Q_solutions").innerHTML;
        solutions = solutions.replace(/(<([^>]+)>)/gi, "").split(" ");
        for (var i = 0; i < solutions.length; i++) {
            solutions[i] = Number(solutions[i]);
        }

        var output = document.getElementById("output");

        var qrows = document.getElementById("qtable").getElementsByTagName("tr");

        var qanda = new Array();

        var type = document.getElementById("Card_Type").innerHTML;

        for (i = 0; i < ((type == 0) ? qrows.length - 1 : qrows.length); i++) {
            qanda[i] = new Object();
            qanda[i].question = qrows[(type == 0) ? i + 1 : i].getElementsByTagName("td")[(type == 0) ? 2 : 0].innerHTML;
            qanda[i].answer = solutions[i];
        }

        qanda = shuffle(qanda);

        var mc_solutions = new String();

        for (i = 0; i < ((type == 0) ? qrows.length - 1 : qrows.length); i++) {
            qrows[(type == 0) ? i + 1 : i].getElementsByTagName("td")[(type == 0) ? 2 : 0].innerHTML = qanda[i].question;
            solutions[i] = qanda[i].answer;
            mc_solutions += qanda[i].answer + " ";
        }
        mc_solutions = mc_solutions.substring(0, mc_solutions.lastIndexOf(" "));
        document.getElementById("Q_solutions").innerHTML = mc_solutions;

        document.getElementById("qtable").HTML = qrows;
        onCheck();
    }

    function onCheck() {
        // Generate user_answers
        var type = document.getElementById("Card_Type").innerHTML;
        var qrows = document.getElementById("qtable").getElementsByTagName('tbody')[0].getElementsByTagName("tr");
        document.getElementById("user_answers").innerHTML = "";
        for (var i = 0; i < ((type == 0) ? qrows.length - 1 : qrows.length); i++) {
            var j;  // to skip the first row containing no checkboxes when type is 'kprim'
            if (type == 0) {
                j = i + 1;
            } else j = i;
            if (qrows[j].getElementsByTagName("td")[0].getElementsByTagName("input")[0].checked) {

                document.getElementById("user_answers").innerHTML += "1 ";
            } else if (type != 0 && !qrows[j].getElementsByTagName("td")[(type == 0) ? 1 : 0].getElementsByTagName("input")[0].checked) {
                document.getElementById("user_answers").innerHTML += "0 ";
            } else if (type == 0 && qrows[j].getElementsByTagName("td")[(type == 0) ? 1 : 0].getElementsByTagName("input")[0].checked) {
                document.getElementById("user_answers").innerHTML += "0 ";
            } else {
                document.getElementById("user_answers").innerHTML += "- ";
            }
        }

        document.getElementById("user_answers").innerHTML = document.getElementById("user_answers").innerHTML.trim();

        // Send Stuff to Persistence
        if (Persistence.isAvailable()) {
            Persistence.clear();
            Persistence.setItem('user_answers', document.getElementById("user_answers").innerHTML);
            Persistence.setItem('Q_solutions', document.getElementById("Q_solutions").innerHTML);
            Persistence.setItem('qtable', document.getElementById("qtable").innerHTML);
        }
    }

    function sleep(ms) {
        return new Promise(resolve => setTimeout(resolve, ms));
    }

    function tickCheckboxOnNumberKeyDown(event) {
        const keyName = event.key;

        let tableBody = document.getElementById("qtable").getElementsByTagName('tbody')[0];
        var tableRows = tableBody.getElementsByTagName("tr");

        if (0 < +keyName && +keyName < 10) {
            let tableData = tableRows[+keyName - 1].getElementsByTagName("td")[0];
            let tableRow = tableData.getElementsByTagName("input")[0];
            tableRow.checked = !tableRow.checked;
            onCheck();
        }
    }

    // addCheckboxTickingShortcuts is an easy approach on using only the keyboard to toggle checkboxes in mc/sc.
    //
    // Naturally the number keys are an intuitive choice here. Unfortunately anki does capture those.
    // So the workaround is to hold the (left) 'Alt' key and then type the corresponding number to toggle the row.
    function addCheckboxTickingShortcuts() {
        document.addEventListener('keydown', tickCheckboxOnNumberKeyDown, false);
    }

    function isMobile() {
        if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
            return true;
        } else {
            return false;
        }
    }

    function run() {
        let DEFAULT_CARD_TYPE = 1; // for previewing the cards in "Manage Note Type..."

        if (isNaN(document.getElementById("Card_Type").innerHTML)) {
            document.getElementById("Card_Type").innerHTML = DEFAULT_CARD_TYPE;
        }

        if (document.getElementById("Card_Type").innerHTML != 0 && !isMobile()) {
            addCheckboxTickingShortcuts();
        }

        setTimeout(generateTable(), 1);
    }

    async function waitForReadyStateAndRun() {
        for (let i = 0; i < 100; i++) {
            if (document.readyState === "complete") {
                run();
                break;
            }
            console.log("Document not yet fully loaded (readyState: " + document.readyState + "). Retry in 0.1s.");
            await sleep(100);
        }
    }

    /*
    The following block is inspired by Glutanimate's Cloze Overlapper card template.
    The Cloze Overlapper card template is licensed under the CC BY-SA 4.0
    license (https://creativecommons.org/licenses/by-sa/4.0/).
    */
    if (document.readyState === "complete") {
        run();
    } else {
        waitForReadyStateAndRun();
    }
</script>

The Back:

<script>
    // Loading Persistence
    // https://github.com/SimonLammer/anki-persistence
    // v0.5.2 - https://github.com/SimonLammer/anki-persistence/blob/62463a7f63e79ce12f7a622a8ca0beb4c1c5d556/script.js
    if (void 0 === window.Persistence) { var _persistenceKey = "github.com/SimonLammer/anki-persistence/", _defaultKey = "_default"; if (window.Persistence_sessionStorage = function () { var e = !1; try { "object" == typeof window.sessionStorage && (e = !0, this.clear = function () { for (var e = 0; e < sessionStorage.length; e++) { var t = sessionStorage.key(e); 0 == t.indexOf(_persistenceKey) && (sessionStorage.removeItem(t), e--) } }, this.setItem = function (e, t) { void 0 == t && (t = e, e = _defaultKey), sessionStorage.setItem(_persistenceKey + e, JSON.stringify(t)) }, this.getItem = function (e) { return void 0 == e && (e = _defaultKey), JSON.parse(sessionStorage.getItem(_persistenceKey + e)) }, this.removeItem = function (e) { void 0 == e && (e = _defaultKey), sessionStorage.removeItem(_persistenceKey + e) }) } catch (e) { } this.isAvailable = function () { return e } }, window.Persistence_windowKey = function (e) { var t = window[e], i = !1; "object" == typeof t && (i = !0, this.clear = function () { t[_persistenceKey] = {} }, this.setItem = function (e, i) { void 0 == i && (i = e, e = _defaultKey), t[_persistenceKey][e] = i }, this.getItem = function (e) { return void 0 == e && (e = _defaultKey), t[_persistenceKey][e] || null }, this.removeItem = function (e) { void 0 == e && (e = _defaultKey), delete t[_persistenceKey][e] }, void 0 == t[_persistenceKey] && this.clear()), this.isAvailable = function () { return i } }, window.Persistence = new Persistence_sessionStorage, Persistence.isAvailable() || (window.Persistence = new Persistence_windowKey("py")), !Persistence.isAvailable()) { var titleStartIndex = window.location.toString().indexOf("title"), titleContentIndex = window.location.toString().indexOf("main", titleStartIndex); titleStartIndex > 0 && titleContentIndex > 0 && titleContentIndex - titleStartIndex < 10 && (window.Persistence = new Persistence_windowKey("qt")) } }
</script>

{{#Title}}<h3 id="myH1">{{Title}}</h3>{{/Title}}
{{#Question}}<p>{{Question}}</p>{{/Question}}
<table id="qtable"></table>
<p id="output"></p>
<div class="hidden" id="MC_solutions">solutions_here</div>
<div class="hidden" id="user_answers">user_answers_here</div>
<div class="hidden" id="CardType">{{QType (0=kprim,1=mc,2=sc)}}</div>
<p id="canswerresult"><b>Correct answers: x %</b></p>
{{#Sources}}<p class="small" id="sources"><b>Sources:</b><br />{{Sources}}</p>{{/Sources}}
{{#Extra 1}}<p class="small" id="extra1"><b>Extra 1:</b><br />{{Extra 1}}</p>{{/Extra 1}}

<script>
    "use strict";

    function onLoad() {
        var colorizeqtable = false;
        var colorizeatable = true;
        var colorizefalsefalse = true;
        // Check if Persistence is recognized to prevent errors when viewing note in "Manage Note Types..."
        if (Persistence.isAvailable && Persistence.getItem('Q_solutions') !== null) {
            // Parsing solutions
            console.log(Persistence.getItem('Q_solutions'));
            var solutions = Persistence.getItem('Q_solutions').split(" ");
            for (let i = 0; i < solutions.length; i++) {
                solutions[i] = Number(solutions[i]);
            }
            var answers = Persistence.getItem('user_answers').split(" ");
            var type = document.getElementById('CardType').innerHTML;
            var qtable = document.getElementById('qtable');
            qtable.innerHTML = Persistence.getItem('qtable');
            var output = document.getElementById("output");
            var atable = qtable.cloneNode(true);
            atable.setAttribute("id", "atable");
            output.innerHTML = "<hr id='answer' />" + atable.outerHTML;
            document.getElementById('qtable').innerHTML = qtable.innerHTML;
            var qrows = qtable.getElementsByTagName('tbody')[0].getElementsByTagName("tr");

            for (let i = 0; i < answers.length; i++) {
                //Set the radio buttons in the qtable.
                if (type == 0) {
                    if (answers[i] === "1") {
                        qrows[i + 1].getElementsByTagName("td")[0].getElementsByTagName("input")[0].checked = true;
                    } else if (answers[i] === "0") {
                        qrows[i + 1].getElementsByTagName("td")[1].getElementsByTagName("input")[0].checked = true;
                    }
                } else {
                    qrows[i].getElementsByTagName("td")[0].getElementsByTagName("input")[0].checked = (answers[i] == 1) ? true : false;
                }
                //Colorize the qtable.
                if (colorizeqtable) {
                    if (solutions[i] && answers[i] === "1") {
                        qrows[(type != 0) ? i : i + 1].setAttribute("class", "correct");
                    } else if (!solutions[i] && answers[i] === "0") {
                        if (colorizefalsefalse) { qrows[(type != 0) ? i : i + 1].setAttribute("class", "correct"); }
                    } else {
                        qrows[(type != 0) ? i : i + 1].setAttribute("class", "wrong");
                    }
                }
            }

            var arows = document.getElementById("atable").getElementsByTagName("tbody")[0].getElementsByTagName("tr");
            var canswers = 0;
            for (let i = 0; i < solutions.length; i++) {
                //Rename the radio buttons of the atable to avoid interference with those in the qtable.
                if (type == 0) arows[i + 1].getElementsByTagName("td")[1].getElementsByTagName("input")[0].setAttribute("name", "ans_" + ((type != 2) ? String(i + 1) : 'A') + "_solution");
                arows[(type != 0) ? i : i + 1].getElementsByTagName("td")[0].getElementsByTagName("input")[0].setAttribute("name", "ans_" + ((type != 2) ? String(i + 1) : 'A') + "_solution");
                //Set the radio buttons in the atable.
                if (type == 0) arows[i + 1].getElementsByTagName("td")[solutions[i] ? 0 : 1].getElementsByTagName("input")[0].checked = true;
                else arows[i].getElementsByTagName("td")[0].getElementsByTagName("input")[0].checked = solutions[i] ? true : false;
                //Colorize the atable and count correct answers.
                if (colorizeatable) {
                    if (solutions[i] && answers[i] === "1") {
                        arows[(type != 0) ? i : i + 1].setAttribute("class", "correct");
                        canswers = canswers + 1;
                    } else if (!solutions[i] && answers[i] === "0") {
                        if (colorizefalsefalse) { arows[(type != 0) ? i : i + 1].setAttribute("class", "correct"); }
                        canswers = canswers + 1;
                    } else {
                        arows[(type != 0) ? i : i + 1].setAttribute("class", "wrong");
                    }
                }
            }
            var canswerresult = document.getElementById('canswerresult');
            canswerresult.innerHTML = "<b>Correct answers: " + Math.round(canswers / solutions.length * 100) + " %</b>";
            Persistence.clear();
        }
    }

    function isMobile() {
        if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
            return true;
        } else {
            return false;
        }
    }

    function sleep(ms) {
        return new Promise(resolve => setTimeout(resolve, ms));
    }

    function run() {
        if (!isMobile() && typeof tickCheckboxOnNumberKeyDown !== "undefined") {
            // To make sure there isn't a previously registered event handler lingering into the next review
            document.removeEventListener('keydown', tickCheckboxOnNumberKeyDown, false);
        }
        setTimeout(onLoad(), 1);
    }

    async function waitForReadyStateAndRun() {
        for (let i = 0; i < 100; i++) {
            if (document.readyState === "complete") {
                run();
                break;
            }
            console.log("Document not yet fully loaded (readyState: " + document.readyState + "). Retry in 0.1s.");
            await sleep(100);
        }
    }

    /*
    The following block is inspired by Glutanimate's Cloze Overlapper card template.
    The Cloze Overlapper card template is licensed under the CC BY-SA 4.0
    license (https://creativecommons.org/licenses/by-sa/4.0/).
    */
    if (document.readyState === "complete") {
        run();
    } else if (isMobile()) {
        document.addEventListener("DOMContentLoaded", function () {
            setTimeout(onLoad, 1);
        }, false);
    } else {
        waitForReadyStateAndRun();
    }
</script>

And the styling:

.card {
  font-family: Helvetica Neue;
  font-size: 20px;
  text-align: center;
  color: black;
  background-color: white;
}

.small {
  font-size: 15px;
}

table, td, th {
  border-collapse: collapse;
  padding: 5px;
}

table {
  display: inline-block;
  text-align: left;
}

label {
  margin-left: 0.4em;
}

.correct {
  background-color: #8CC665;
}

.nightMode .correct {
  background-color: #43A13F;
}

.wrong {
  background-color: #FF5E5B;
}

.nightMode .wrong {
  background-color: #BB0A21;
}


.hidden {
  /*
  This block is from Glutanimate's Cloze Overlapper card template.
  The Cloze Overlapper card template is licensed under the CC BY-SA 4.0
  license (https://creativecommons.org/licenses/by-sa/4.0/).
  */
  /* guarantees a consistent width across front and back */
  font-weight: bold;
  display: block;
  line-height: 0;
  height: 0;
  overflow: hidden;
  visibility: hidden;
}
2 Likes
3

Is a fork from https://ankiweb.net/shared/info/1566095810

you can also use https://ankiweb.net/shared/info/1497603664 which is easier to make cards (the template doesn’t show all the questions when the card has less zoom on ankidroid)

2 Likes
4

Thanks for the reply. I know that it is a fork. I need that many options. My questions is regarding the styling. I just want all the correct options green and the incorrect ones red, not all the options duplicated and then colored.

5

You can change the color in the config
See GitHub - zjosua/anki-mc: Multiple choice questions for Anki.

tools → add-ons → multiple choice → config

1 Like
6

I know. I already did that. If you look at the second picture in my post i want the top half (all the options that are not colored) gone and just want the same options on the bottom but colored like they are now. The front and back of the card should look the same apart from the fact that on the back the right answers are colored green and the wrong answers are red.

7

Sorry, can’t help with that, maybe you could try multiple choice support mentioned above

8 
<span class="backtemplate">
<script>
    // Loading Persistence
    // https://github.com/SimonLammer/anki-persistence
    // v0.5.2 - https://github.com/SimonLammer/anki-persistence/blob/62463a7f63e79ce12f7a622a8ca0beb4c1c5d556/script.js
    if (void 0 === window.Persistence) { var _persistenceKey = "github.com/SimonLammer/anki-persistence/", _defaultKey = "_default"; if (window.Persistence_sessionStorage = function () { var e = !1; try { "object" == typeof window.sessionStorage && (e = !0, this.clear = function () { for (var e = 0; e < sessionStorage.length; e++) { var t = sessionStorage.key(e); 0 == t.indexOf(_persistenceKey) && (sessionStorage.removeItem(t), e--) } }, this.setItem = function (e, t) { void 0 == t && (t = e, e = _defaultKey), sessionStorage.setItem(_persistenceKey + e, JSON.stringify(t)) }, this.getItem = function (e) { return void 0 == e && (e = _defaultKey), JSON.parse(sessionStorage.getItem(_persistenceKey + e)) }, this.removeItem = function (e) { void 0 == e && (e = _defaultKey), sessionStorage.removeItem(_persistenceKey + e) }) } catch (e) { } this.isAvailable = function () { return e } }, window.Persistence_windowKey = function (e) { var t = window[e], i = !1; "object" == typeof t && (i = !0, this.clear = function () { t[_persistenceKey] = {} }, this.setItem = function (e, i) { void 0 == i && (i = e, e = _defaultKey), t[_persistenceKey][e] = i }, this.getItem = function (e) { return void 0 == e && (e = _defaultKey), t[_persistenceKey][e] || null }, this.removeItem = function (e) { void 0 == e && (e = _defaultKey), delete t[_persistenceKey][e] }, void 0 == t[_persistenceKey] && this.clear()), this.isAvailable = function () { return i } }, window.Persistence = new Persistence_sessionStorage, Persistence.isAvailable() || (window.Persistence = new Persistence_windowKey("py")), !Persistence.isAvailable()) { var titleStartIndex = window.location.toString().indexOf("title"), titleContentIndex = window.location.toString().indexOf("main", titleStartIndex); titleStartIndex > 0 && titleContentIndex > 0 && titleContentIndex - titleStartIndex < 10 && (window.Persistence = new Persistence_windowKey("qt")) } }
</script>

{{#Title}}<h3 id="myH1">{{edit:Title}}</h3>{{/Title}}
{{#Question}}<p><span class="question">{{Question}}</span></p>{{/Question}}
<table id="qtable"></table>
<p id="output"></p>
<div class="hidden" id="MC_solutions">solutions_here</div>
<div class="hidden" id="user_answers">user_answers_here</div>
<div class="hidden" id="CardType">{{QType (0=kprim,1=mc,2=sc)}}</div>
<p id="canswerresult"><b>Correct answers: x %</b></p>
{{#Extra 1}}<p class="small" id="extra1"><b>Extra 1:</b>{{edit:Extra 1}}</p>{{/Extra 1}}
{{#Sources}}<p class="small" id="sources"><b>Sources:</b>&nbsp;{{Sources}}</p>{{/Sources}}

<script>
    "use strict";

    function onLoad() {
        const options = {
            qtable: {
                visible: false,
                colorize: false,
                colors: { // Defines which class should be set
                    wrongwrong: 'correct', // Should be wrong and got marked as wrong
                    correctcorrect: 'correct', // Should be correct and got marked as correct
                    wrongcorrect: 'wrong', // Should be wrong but got marked as correct
                    correctwrong: 'wrong', // Should be correct but got marked as wrong
                    eithernone: "wrong" // Kprim was marked neither correct nor wrong
                }
            },
            atable: {
                visible: true,
                colorize: true,
                colors: { // Defines which class should be set
                    wrongwrong: 'correct', // Should be wrong and got marked as wrong
                    correctcorrect: 'correct', // Should be correct and got marked as correct
                    wrongcorrect: 'wrong', // Should be wrong but got marked as correct
                    correctwrong: 'wrong', // Should be correct but got marked as wrong
                    eithernone: "wrong" // Kprim was marked neither correct nor wrong
                }
            }
        }
        // Check if Persistence is recognized to prevent errors when viewing note in "Manage Note Types..."
        if (Persistence.isAvailable && Persistence.getItem('Q_solutions') !== null) {
            // Parsing solutions
            console.log(Persistence.getItem('Q_solutions'));
            var solutions = Persistence.getItem('Q_solutions').split(" ");
            for (let i = 0; i < solutions.length; i++) {
                solutions[i] = Number(solutions[i]);
            }
            var answers = Persistence.getItem('user_answers').split(" ");
            var type = document.getElementById('CardType').innerHTML;
            var qtable = document.getElementById('qtable');
            qtable.innerHTML = Persistence.getItem('qtable');
            var output = document.getElementById("output");
            var atable = qtable.cloneNode(true);
            atable.setAttribute("id", "atable");
            output.innerHTML = "<hr id='answer' />" + atable.outerHTML;
            if (options.qtable.visible) {
                var qrows = qtable.getElementsByTagName('tbody')[0].getElementsByTagName("tr");
                for (let i = 0; i < answers.length; i++) {
                    //Set the radio buttons in the qtable.
                    if (type == 0) {
                        if (answers[i] === "1") {
                            qrows[i + 1].getElementsByTagName("td")[0].getElementsByTagName("input")[0].checked = true;
                        } else if (answers[i] === "0") {
                            qrows[i + 1].getElementsByTagName("td")[1].getElementsByTagName("input")[0].checked = true;
                        }
                    } else {
                        qrows[i].getElementsByTagName("td")[0].getElementsByTagName("input")[0].checked = (answers[i] == 1) ? true : false;
                    }
                    //Colorize the qtable.
                    if (options.qtable.colorize) {
                        if (solutions[i] && answers[i] === "1") {
                            qrows[(type != 0) ? i : i + 1].setAttribute("class", options.qtable.colors.correctcorrect);
                        } else if (!solutions[i] && answers[i] === "0") {
                            qrows[(type != 0) ? i : i + 1].setAttribute("class", options.qtable.colors.wrongwrong); 
                        } else if (!solutions[i] && answers[i] === "1") {
                            qrows[(type != 0) ? i : i + 1].setAttribute("class", options.qtable.colors.wrongcorrect);
                        } else if (solutions[i] && answers[i] === "0"){
                            qrows[(type != 0) ? i : i + 1].setAttribute("class", options.qtable.colors.correctwrong);
                        } else if (type == 0 && answers[i] === "-") {
                            qrows[(type != 0) ? i : i + 1].setAttribute("class", options.qtable.colors.eithernone);
                        }
                    }
                }
            } else qtable.innerHTML = ""

            var arows = document.getElementById("atable").getElementsByTagName("tbody")[0].getElementsByTagName("tr");
            var canswers = 0;
            for (let i = 0; i < solutions.length; i++) {
                //Rename the radio buttons of the atable to avoid interference with those in the qtable.
                if (type == 0) arows[i + 1].getElementsByTagName("td")[1].getElementsByTagName("input")[0].setAttribute("name", "ans_" + ((type != 2) ? String(i + 1) : 'A') + "_solution");
                arows[(type != 0) ? i : i + 1].getElementsByTagName("td")[0].getElementsByTagName("input")[0].setAttribute("name", "ans_" + ((type != 2) ? String(i + 1) : 'A') + "_solution");
                //Set the radio buttons in the atable.
                if (type == 0) arows[i + 1].getElementsByTagName("td")[solutions[i] ? 0 : 1].getElementsByTagName("input")[0].checked = true;
                else arows[i].getElementsByTagName("td")[0].getElementsByTagName("input")[0].checked = solutions[i] ? true : false;
                //Colorize the atable.
                if (options.atable.colorize) {
                    if (solutions[i] && answers[i] === "1") {
                        arows[(type != 0) ? i : i + 1].setAttribute("class", options.atable.colors.correctcorrect);
                    } else if (!solutions[i] && answers[i] === "0") {
                        arows[(type != 0) ? i : i + 1].setAttribute("class", options.atable.colors.wrongwrong);
                    } else if (!solutions[i] && answers[i] === "1") {
                        arows[(type != 0) ? i : i + 1].setAttribute("class", options.atable.colors.wrongcorrect);
                    } else if (solutions[i] && answers[i] === "0") {
                        arows[(type != 0) ? i : i + 1].setAttribute("class", options.atable.colors.correctwrong);
                    } else if (type == 0 && answers[i] === "-") {
                        arows[(type != 0) ? i : i + 1].setAttribute("class", options.atable.colors.eithernone);
                    }
                }
                //Count correct answers.
                if (solutions[i] && answers[i] === "1") {
                    canswers = canswers + 1;
                } else if (!solutions[i] && answers[i] === "0") {
                    canswers = canswers + 1;
                }
            }
            var canswerresult = document.getElementById("canswerresult");
            if (type == 2) {
                canswerresult.innerHTML = "<b>" + ((canswers / solutions.length == 1) ? "Correct.</b>" : "Nope.</b>");
            } else {
                canswerresult.innerHTML = "<b>Correct answers: " + Math.round(canswers / solutions.length * 100) + " %</b>";
            }
            if (!options.atable.visible) {
                atable.innerHTML = "";
            }
            Persistence.clear();
        }
    }

    function isMobile() {
        if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
            return true;
        } else {
            return false;
        }
    }

    function sleep(ms) {
        return new Promise(resolve => setTimeout(resolve, ms));
    }

    function run() {
        if (!isMobile() && typeof tickCheckboxOnNumberKeyDown !== "undefined") {
            // To make sure there isn't a previously registered event handler lingering into the next review
            document.removeEventListener('keydown', tickCheckboxOnNumberKeyDown, false);
        }
        setTimeout(onLoad(), 1);
    }

    async function waitForReadyStateAndRun() {
        for (let i = 0; i < 100; i++) {
            if (document.readyState === "complete") {
                run();
                break;
            }
            console.log("Document not yet fully loaded (readyState: " + document.readyState + "). Retry in 0.1s.");
            await sleep(100);
        }
    }

    /*
    The following block is inspired by Glutanimate's Cloze Overlapper card template.
    The Cloze Overlapper card template is licensed under the CC BY-SA 4.0
    license (https://creativecommons.org/licenses/by-sa/4.0/).
    */
    if (document.readyState === "complete") {
        run();
    } else if (isMobile()) {
        document.addEventListener("DOMContentLoaded", function () {
            setTimeout(onLoad, 1);
        }, false);
    } else {
        waitForReadyStateAndRun();
    }
</script>
</span>

This is the back template of the already mentioned Multiple Choice for Anki - AnkiWeb.
I too would suggest using it, as it offers quite a few settings, which are conveniently accessible through the add-on’s configuration menu.
If the only reason you are using the fork over the “main” note-type is because it has more options, that is easily fixable. You can add the fields manually (Card edit menu → Fields → add) and then add this code to the Front template (the main note type contains a similar code, but it only extends up to Q_5):

<div class="hidden" id="Q_1">{{Q_1}}</div>
<div class="hidden" id="Q_2">{{Q_2}}</div>
<div class="hidden" id="Q_3">{{Q_3}}</div>
<div class="hidden" id="Q_4">{{Q_4}}</div>
<div class="hidden" id="Q_5">{{Q_5}}</div>
<div class="hidden" id="Q_6">{{Q_6}}</div>
<div class="hidden" id="Q_7">{{Q_7}}</div>
<div class="hidden" id="Q_8">{{Q_8}}</div>
<div class="hidden" id="Q_9">{{Q_9}}</div>
<div class="hidden" id="Q_10">{{Q_10}}</div>
<div class="hidden" id="Q_11">{{Q_11}}</div>
<div class="hidden" id="Q_12">{{Q_12}}</div>

That being said, if you wish to keep using the 12 field version of the add-on, the back template I sent you seems compatible with your note-type. I have not checked thoroughly, so in case maybe do some testing before saving the edits.

I configured it so that qtable (the table above the hr with the not colored options) is not shown on the back. To revert it, you can look for

qtable: {
        visible: false,

and set visible to true.

1 Like
9

Thank you very much, will play around with this when I have the time.

1 Like
10

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.