Anki Card Type for multiple-choice

Back Template

<div class="check-container"><span id="check"></span></div>

{{#Question}}
<p>{{Question}}</p>
{{/Question}}

{{#Image}}
<p class="image">{{Image}}</p>
{{/Image}}

<ul>
{{Answers}}
</ul>

{{#Explanation}}
<p class="explanation">{{Explanation}}</p>
{{/Explanation}}

<script>
(function () {

    var data = JSON.parse(window.title),
        els = document.getElementsByTagName('input'),
        count = els.length,
        li_nodes = [],
        ul,
        idx,
        correct = true;
    for (idx = 0; idx < count; idx++) {
        if (!!data.answered[idx] == !!els[idx].checked) {
            els[idx].parentNode.className = 'success';
        } else {
            els[idx].parentNode.className = 'error';
            correct = false;
        }
    }

    if (correct) {
        document.getElementById('check').innerHTML = 'Correct';
        document.getElementById('check').className = 'success';
    } else {
        document.getElementById('check').innerHTML = 'Wrong';
        document.getElementById('check').className = 'error';
    }

    // Re-order to same order as previous page
    els = document.getElementsByTagName('li');
    ul = els[0].parentNode;
    for (idx = count - 1; idx >= 0; idx--) {
        li_nodes.unshift(els[idx]);
        ul.removeChild(els[idx]);
    }
    for (idx = 0; idx < count; idx++) {
        ul.appendChild(li_nodes[data.position[idx]]);
    }


}());

</script>

Example Note

Question:
Which answer is the right one?


Choices:
<li><label><input type="checkbox" /> Answer 1</label></li>
<li><label><input type="checkbox" /> Answer 2</label></li>
<li><label><input type="checkbox" /> Answer 3</label></li>


Answers:
<li><input disabled type="checkbox" checked /> Answer 1</li>
<li><input disabled type="checkbox" /> Answer 2</li>
<li><input disabled type="checkbox" /> Answer 3</li>

Front Template

{{#Question}}
<p>{{Question}}</p>
{{/Question}}

{{#Image}}
<p class="image">{{Image}}</p>
{{/Image}}

<ul>
{{Choices}}
</ul>

<script>
// window.title is persisted between question and answer, so we use it for our little hack
(function () {
    var data = {answered: {}, position: []};
    function onClick (ev) {
        ev.stopPropagation();
        data.answered[ev.currentTarget.getAttribute('idx')] = ev.currentTarget.checked;
        window.title = JSON.stringify(data);
    }

    var els = document.getElementsByTagName('input'),
        li_nodes = [],
        count = els.length,
        ul,
        pos,
        idx,
        new_order = [];
    for (idx = 0; idx < count; idx++) {
        els[idx].setAttribute('idx', idx);
        els[idx].addEventListener('click', onClick);
        pos = Math.floor(Math.random() * count);
        data.position.splice(pos, 0, idx);
    }

    // Re-order randomly
    els = document.getElementsByTagName('li');
    ul = els[0].parentNode;
    for (idx = count - 1; idx >= 0; idx--) {
        li_nodes.unshift(els[idx]);
        ul.removeChild(els[idx]);
    }
    for (idx = 0; idx < count; idx++) {
        ul.appendChild(li_nodes[data.position[idx]]);
    }

    window.title = JSON.stringify(data);
}());
</script>

Styling

* {
  box-sizing: border-box;
}
html {
  height: 100%;
}
.card {
  margin: 0;
  padding: 0;
  padding: 20px;
  height: 100%;
  
  font-family: arial;
  font-size: 20px;
  text-align: center;
  color: black;
}

.hint {
  margin-top: 20px;
  font-size: 70%;
  color: #aaa;
}

.image {
    height: 50%;
}
li {
    text-align: left;
    list-style: none;
    margin: 10px;
}
li input {
    margin-left: -20px;
}

ul br { display: none; }

.error {
    background-color: #f2dede;
}
.success {
    background-color: #dff0d8;
}

.explanation {
    font-size: 14px;
    text-align: left;
    border-top: 1px solid #ccc;
    padding-top: 10px;
    margin-bottom: 10px;
}

.check-container {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
}
#check {
    padding: 2px 10px;
}