20 answers problem with MCQ

Anki Card Design
1

Using the “MCQ Ultimate V2.1” cards, I changed the code so that I could enter up to 20 answers (I have a multiple-choice exam and I need to make it very difficult).

The problem I have is that all the answers that are saved beyond position “I” do not appear as correct when I correct them. If I mark an answer as correct, a green check mark appears next to the correct answer, as if I had marked it correctly (but I haven’t). I would like to share my code in case anyone can help me see what the problem is.

Thanks for all.

<div id="myCard">

<div class="front">

<div style='font-family:"Arial";font-size:25px;font-weight:bold'>{{Question}}</div>

<br>

<form id="shuffle">

{{#option_1 (A)}}<div class="container" id="A"><input type="checkbox" name="radAnswer" class="checkbox" id="A"><div class="option">{{option_1 (A)}}</div></div>{{/option_1 (A)}}

{{#option_2 (B)}}<div class="container" id="B"><input type="checkbox" name="radAnswer" class="checkbox" id="B"><div class="option">{{option_2 (B)}}</div></div>{{/option_2 (B)}}

{{#option_3 (C)}}<div class="container" id="C"><input type="checkbox" name="radAnswer" class="checkbox" id="C"><div class="option">{{option_3 (C)}}</div></div>{{/option_3 (C)}}

{{#option_4 (D)}}<div class="container" id="D"><input type="checkbox" name="radAnswer" class="checkbox" id="D"><div class="option">{{option_4 (D)}}</div></div>{{/option_4 (D)}}

{{#option_5 (E)}}<div class="container" id="E"><input type="checkbox" name="radAnswer" class="checkbox" id="E"><div class="option">{{option_5 (E)}}</div></div>{{/option_5 (E)}}

{{#option_6 (F)}}<div class="container" id="F"><input type="checkbox" name="radAnswer" class="checkbox" id="F"><div class="option">{{option_6 (F)}}</div></div>{{/option_6 (F)}}

{{#option_7 (G)}}<div class="container" id="G"><input type="checkbox" name="radAnswer" class="checkbox" id="G"><div class="option">{{option_7 (G)}}</div></div>{{/option_7 (G)}}

{{#option_8 (H)}}<div class="container" id="H"><input type="checkbox" name="radAnswer" class="checkbox" id="H"><div class="option">{{option_8 (H)}}</div></div>{{/option_8 (H)}}

{{#option_9 (I)}}<div class="container" id="I"><input type="checkbox" name="radAnswer" class="checkbox" id="I"><div class="option">{{option_9 (I)}}</div></div>{{/option_9 (I)}}

{{#option_10 (J)}}<div class="container" id="J"><input type="checkbox" name="radAnswer" class="checkbox" id="J"><div class="option">{{option_10 (J)}}</div></div>{{/option_10 (J)}}

{{#option_11 (K)}}<div class="container" id="K"><input type="checkbox" name="radAnswer" class="checkbox" id="K"><div class="option">{{option_11 (K)}}</div></div>{{/option_11 (K)}}

{{#option_12 (L)}}<div class="container" id="L"><input type="checkbox" name="radAnswer" class="checkbox" id="L"><div class="option">{{option_12 (L)}}</div></div>{{/option_12 (L)}}

{{#option_13 (M)}}<div class="container" id="M"><input type="checkbox" name="radAnswer" class="checkbox" id="M"><div class="option">{{option_13 (M)}}</div></div>{{/option_13 (M)}}

{{#option_14 (N)}}<div class="container" id="N"><input type="checkbox" name="radAnswer" class="checkbox" id="N"><div class="option">{{option_14 (N)}}</div></div>{{/option_14 (N)}}

{{#option_15 (O)}}<div class="container" id="O"><input type="checkbox" name="radAnswer" class="checkbox" id="O"><div class="option">{{option_15 (O)}}</div></div>{{/option_15 (O)}}

{{#option_16 (P)}}<div class="container" id="P"><input type="checkbox" name="radAnswer" class="checkbox" id="P"><div class="option">{{option_16 (P)}}</div></div>{{/option_16 (P)}}

{{#option_17 (Q)}}<div class="container" id="Q"><input type="checkbox" name="radAnswer" class="checkbox" id="Q"><div class="option">{{option_17 (Q)}}</div></div>{{/option_17 (Q)}}

{{#option_18 (R)}}<div class="container" id="R"><input type="checkbox" name="radAnswer" class="checkbox" id="R"><div class="option">{{option_18 (R)}}</div></div>{{/option_18 (R)}}

{{#option_19 (S)}}<div class="container" id="S"><input type="checkbox" name="radAnswer" class="checkbox" id="S"><div class="option">{{option_19 (S)}}</div></div>{{/option_19 (S)}}

{{#option_20 (T)}}<div class="container" id="T"><input type="checkbox" name="radAnswer" class="checkbox" id="T"><div class="option">{{option_20 (T)}}</div></div>{{/option_20 (T)}}

</form>

</div>

<div id="settings">

<div id="gear">

<svg width="50px" height="50px" viewBox="0 0 48 48" version="1" xmlns="
" enable-background="new 0 0 48 48"><path fill="#607D8B" d="M39.6,27.2c0.1-0.7,0.2-1.4,0.2-2.2s-0.1-1.5-0.2-2.2l4.5-3.2c0.4-0.3,0.6-0.9,0.3-1.4L40,10.8 c-0.3-0.5-0.8-0.7-1.3-0.4l-5,2.3c-1.2-0.9-2.4-1.6-3.8-2.2l-0.5-5.5c-0.1-0.5-0.5-0.9-1-0.9h-8.6c-0.5,0-1,0.4-1,0.9l-0.5,5.5 c-1.4,0.6-2.7,1.3-3.8,2.2l-5-2.3c-0.5-0.2-1.1,0-1.3,0.4l-4.3,7.4c-0.3,0.5-0.1,1.1,0.3,1.4l4.5,3.2c-0.1,0.7-0.2,1.4-0.2,2.2 s0.1,1.5,0.2,2.2L4,30.4c-0.4,0.3-0.6,0.9-0.3,1.4L8,39.2c0.3,0.5,0.8,0.7,1.3,0.4l5-2.3c1.2,0.9,2.4,1.6,3.8,2.2l0.5,5.5 c0.1,0.5,0.5,0.9,1,0.9h8.6c0.5,0,1-0.4,1-0.9l0.5-5.5c1.4-0.6,2.7-1.3,3.8-2.2l5,2.3c0.5,0.2,1.1,0,1.3-0.4l4.3-7.4 c0.3-0.5,0.1-1.1-0.3-1.4L39.6,27.2z M24,35c-5.5,0-10-4.5-10-10c0-5.5,4.5-10,10-10c5.5,0,10,4.5,10,10C34,30.5,29.5,35,24,35z"/><path fill="#455A64" d="M24,13c-6.6,0-12,5.4-12,12c0,6.6,5.4,12,12,12s12-5.4,12-12C36,18.4,30.6,13,24,13z M24,30 c-2.8,0-5-2.2-5-5c0-2.8,2.2-5,5-5s5,2.2,5,5C29,27.8,26.8,30,24,30z"/></svg>

</div>

<div id="settings-content" style="display:none">

<div id="zoom">

<div id="positive">

<svg width="50px" height="50px" viewBox="0 0 48 48" xmlns="
"><title>70 Basic icons by Xicons.co</title><path d="M24,3A21,21,0,1,0,45,24,21,21,0,0,0,24,3Z" fill="#afe0f5"/><path d="M32,26H16a2,2,0,0,1,0-4H32A2,2,0,0,1,32,26Z" fill="#38b1e7"/><path d="M24,34a2,2,0,0,1-2-2V16a2,2,0,0,1,4,0V32A2,2,0,0,1,24,34Z" fill="#38b1e7"/></svg>

</div>

<div id="default">

<svg width="50px" height="50px" version="1.1" viewBox="0 0 496.17 496.17" xml:space="preserve" xmlns="
"><path d="m5e-3 248.09c0-137.02 111.07-248.09 248.07-248.09 137.01 0 248.08 111.06 248.08 248.09 0 137-111.07 248.08-248.08 248.08-137.01 0-248.07-111.08-248.07-248.08z" fill="#32BEA6"/><path d="m400.81 169.58c-2.502-4.865-14.695-16.012-35.262-5.891-20.564 10.122-10.625 32.351-10.625 32.351 7.666 15.722 11.98 33.371 11.98 52.046 0 65.622-53.201 118.82-118.83 118.82-65.619 0-118.82-53.202-118.82-118.82 0-61.422 46.6-111.95 106.36-118.17v30.793s-0.084 1.836 1.828 2.999c1.906 1.163 3.818 0 3.818 0l98.576-58.083s2.211-1.162 2.211-3.436c0-1.873-2.211-3.205-2.211-3.205l-98.248-57.754s-2.24-1.605-4.23-0.826c-1.988 0.773-1.744 3.481-1.744 3.481v32.993c-88.998 6.392-159.23 80.563-159.23 171.21 0 94.824 76.873 171.7 171.69 171.7 94.828 0 171.71-76.872 171.71-171.7 1e-3 -28.298-6.852-54.98-18.972-78.505z" fill="#F7F7F7"/></svg>

</div>

<div id="negative">

<svg width="50px" height="50px" viewBox="0 0 48 48" xmlns="
"><title>70 Basic icons by Xicons.co</title><path d="M24,3A21,21,0,1,0,45,24,21,21,0,0,0,24,3Z" fill="#f8bcc4"/><path d="M32,26H16a2,2,0,0,1,0-4H32A2,2,0,0,1,32,26Z" fill="#ee586c"/></svg>

</div>

</div>

<div id="switch">

<div class="check-box">

<label for="Auto_submit"><div>Auto submit</div><div style="font-size: .7em; text-align:center;">(in only answer)</div></label>



<input id="Auto_submit" type="checkbox" checked>

</div>

<div class="check-box">

<label for="Shuffling">Shuffling</label>

<input id="Shuffling" type="checkbox">

</div>

</div>

</div>

</div>

</div>

<script>

//--------------------------persistance

if(void 0===window.Persistence){var e="github.com/SimonLammer/anki-persistence/",t="_default";if(window.Persistence_sessionStorage=function(){var i=!1;try{"object"==typeof window.sessionStorage&&(i=!0,this.clear=function(){for(var t=0;t<sessionStorage.length;t++){var i=sessionStorage.key(t);0==i.indexOf(e)&&(sessionStorage.removeItem(i),t--)}},this.setItem=function(i,n){void 0==n&&(n=i,i=t),sessionStorage.setItem(e+i,JSON.stringify(n))},this.getItem=function(i){return void 0==i&&(i=t),JSON.parse(sessionStorage.getItem(e+i))},this.removeItem=function(i){void 0==i&&(i=t),sessionStorage.removeItem(e+i)},this.getAllKeys=function(){for(var t=[],i=Object.keys(sessionStorage),n=0;n<i.length;n++){var s=i[n];0==s.indexOf(e)&&t.push(s.substring(e.length,s.length))}return t.sort()})}catch(n){}this.isAvailable=function(){return i}},window.Persistence_windowKey=function(i){var n=window[i],s=!1;"object"==typeof n&&(s=!0,this.clear=function(){n[e]={}},this.setItem=function(i,s){void 0==s&&(s=i,i=t),n[e][i]=s},this.getItem=function(i){return void 0==i&&(i=t),void 0==n[e][i]?null:n[e][i]},this.removeItem=function(i){void 0==i&&(i=t),delete n[e][i]},this.getAllKeys=function(){return Object.keys(n[e])},void 0==n[e]&&this.clear()),this.isAvailable=function(){return s}},window.Persistence=new Persistence_sessionStorage,Persistence.isAvailable()||(window.Persistence=new Persistence_windowKey("py")),!Persistence.isAvailable()){var i=window.location.toString().indexOf("title"),n=window.location.toString().indexOf("main",i);i>0&&n>0&&n-i<10&&(window.Persistence=new Persistence_windowKey("qt"))}}

//---------------------------variables

var X = "{{Ans}}";

if (X == X.toLowerCase()) {

var X = X.toUpperCase()

}

var Y = Number(X);

var k = "value";

var answer =""

var checkbox = document.getElementsByTagName("input");

var option = document.getElementsByClassName("option");

var container = document.getElementsByClassName("container");

var DefElems = document.querySelectorAll('#shuffle > div');

Persistence.setItem("scroll", 0)

Persistence.setItem("answer", "")



//---------------------------------remove empty elements

var divs = document.querySelectorAll('.option');

divs.forEach(div => {

if (div.innerHTML === '') {

div.parentNode.remove();

}

});

//------------------------------------zoom

if(Persistence.getItem("Zoom")==null){

Persistence.setItem("Zoom", 1)

}

var zoom = Persistence.getItem("Zoom");

$('.front').css('zoom', zoom);



$('#positive').on('click', function(){

zoom += 0.1;

Persistence.setItem("Zoom", zoom)

$('.front').css('zoom', zoom);

});

$('#default').on('click', function(){

zoom = 1;

Persistence.setItem("Zoom", zoom)

$('.front').css('zoom', zoom);

});

$('#negative').on('click', function(){

zoom -= 0.1;

Persistence.setItem("Zoom", zoom)

$('.front').css('zoom', zoom);

});

$('#gear').on('click', function(){

$('#settings-content').toggle(50);

setTimeout(

function()

{

$('#myCard').scrollTop($('#myCard')[0].scrollHeight);

}, 100)





})



//-------------------------------------functions

document.getElementById("myCard").onscroll = function(){

var scrollPosition=document.getElementById("myCard").scrollTop

Persistence.setItem("scroll", scrollPosition)

};



function ToggleCheck() {

var mycheckBox = $("input[type='checkbox']#"+this.id);

var cont = $(".container#"+this.id);

mycheckBox.attr("checked", !mycheckBox.attr("checked"));

console.log(cont)

cont.toggleClass("check")

}



// function storeAnswer() {

// var a = this.id;

// Persistence.setItem("answer",a);

// console.log(a)

// }

function storeAnswerBox() {

answer=""

for (var i=0, iLen=option.length; i<iLen; i++) {

if (checkbox[i].checked) {



answer=answer+checkbox[i].id;

}

}

Persistence.setItem("answer",answer);

console.log(answer)



}



function flipToBack() {



setTimeout(function() {



if (typeof pycmd !== "undefined") {

pycmd("ans")

} else {

if (typeof study !== "undefined") {

study.drawAnswer()

} else {

if (typeof AnkiDroidJS !== "undefined") {

showAnswer()

} else {

if (window.anki && window.sendMessage2) {

window.sendMessage2("ankitap", "midCenter")

}

}

}

}





}, 50)}



function shuffle(elems) {

allElems = (function() {

var ret = [],

l = elems.length;

while (l--) {

ret[ret.length] = elems[l];

}

return ret;

})();

var shuffled = (function() {

var l = allElems.length,

ret = [];

while (l--) {

var random = Math.floor(Math.random() * allElems.length),

randEl = allElems[random].cloneNode(true);

allElems.splice(random, 1);

ret[ret.length] = randEl;

Persistence.setItem("order"+l,random);

console.log(random);

}

return ret;

})(),

l = elems.length;

while (l--) {

elems[l].parentNode.insertBefore(shuffled[l], elems[l].nextSibling);

elems[l].parentNode.removeChild(elems[l]);

}



}



function reverseShuffle(elems) {

allElems = (function() {



var ret = [],

l = DefElems.length;

while (l--) {

ret[ret.length] = DefElems[l];

}

return ret;



})();

console.log(allElems)



var shuffled = (function() {

var l = allElems.length,

ret = [];

while (l--) {

var random = l,

randEl = allElems[random].cloneNode(true);

allElems.splice(random, 1);

ret[ret.length] = randEl;

Persistence.setItem("order"+l,random);

console.log(random);

}

return ret;

})(),

l = elems.length;

while (l--) {

elems[l].parentNode.insertBefore(shuffled[l], elems[l].nextSibling);

elems[l].parentNode.removeChild(elems[l]);

}

}



function HandleShufflingBox(){

Persistence.setItem("ShufflingBox", $("#Shuffling").is(":checked"));

if($("#Shuffling").is(":checked")){

shuffle(document.querySelectorAll('#shuffle > div'));

$(".Letters").remove();

HandelEvents();

}else{

reverseShuffle(document.querySelectorAll('#shuffle > div'));

HandelEvents();

}



}



function HandleSubmitBox(){

Persistence.setItem("SubmitBox", $("#Auto_submit").is(":checked"));

if($("#Auto_submit").is(":checked") && X.length==1){

for (i = 0; i < container.length; i++) {

container[i].addEventListener("click", flipToBack);

}

}else{

for (i = 0; i < container.length; i++) {

container[i].removeEventListener("click", flipToBack);

}

}



}

//------------------------------------------------



if( Persistence.getItem("SubmitBox")==null || Persistence.getItem("ShufflingBox") ==null){

Persistence.setItem("SubmitBox", true);

Persistence.setItem("ShufflingBox", false);

};



for (i = 1; i < container.length+1; i++) {

$(".container:nth-of-type("+i+") .option").prepend("<span class='Letters'>("+String.fromCharCode(64+i)+")&nbsp;</span>");



}



document.querySelector("#Shuffling").addEventListener("click",HandleShufflingBox)

$("#Shuffling").prop("checked", Persistence.getItem("ShufflingBox"));



document.querySelector("#Auto_submit").addEventListener("click",HandleSubmitBox)

$("#Auto_submit").prop("checked", Persistence.getItem("SubmitBox"));



if($("#Shuffling").is(":checked")){

shuffle(document.querySelectorAll('#shuffle > div'));

$(".Letters").remove();

}else{

}



function HandelEvents(){



if(X.length==1 && $("#Auto_submit").is(":checked")){

for (i = 0; i < container.length; i++) {

container[i].addEventListener("click", ToggleCheck);

container[i].addEventListener("click", storeAnswerBox);

container[i].addEventListener("click", flipToBack);

}



}else{

for (i = 0; i < container.length; i++) {

container[i].addEventListener("click", ToggleCheck);

container[i].addEventListener("click", storeAnswerBox);

}



}



}

HandelEvents();



/* for (i = 0; i < container.length; i++) {

container[i].addEventListener("click", storeAnswer);

container[i].addEventListener("click", flipToBack);

};*/

function deselect(){

$(this).replaceWith(this.innerHTML)

$(".highlighted").click(deselect)

}



$(document).on("mouseup", function (e) {

var selected = window.getSelection();

var range = selected.getRangeAt(0);

if(selected.toString().length > 0){

var newNode = document.createElement("span");

newNode.setAttribute("class", "highlighted");

newNode.addEventListener("click", deselect)

range.surroundContents(newNode);



}





});

</script>
2

I’ll try to have a look at the provided code a bit later, but in case you are considering alternatives, this template supports an arbitrary number of multiple-choice answers and does not require any setup besides adding mchOptionsN = 20; to the user scripts section for your case.

1 Like
3

Thank you very much for that template. The problem is that I already have a lot of questions created, and I don’t think it will be easy to change the template, as there are so many questions. In principle, I would like to solve this.

To give you an example of my problem, if I select one of the answers saved beyond I as a possible option, all the answers beyond I disappear and it marks the correct answer as if I had selected it (but I didn’t).

Captura
Captura1911×1039 150 KB

Captura2
Captura21913×1034 170 KB

4

The template can be changed for all notes at once using Note → Change Note Type. It will require a bit of scripting to reorder the answers, but it still looks like an easier task than sorting through the current haystack of code.

If you are committed to making it work, though, you still need to provide more info:

  1. How does this template work in real reviews? The screenshots you’ve provided are from the preview mode, which works differently from the reviewer, and not all templates take the differences into account.
  2. The code you’ve pasted looks like only a part of the template. I don’t see any indicators of what is used for the front side, and what for the back. There are also no styles, without which the green check mark you are describing is not reproduced. It would be better to provide an example as a packed note, instead of raw code. Otherwise, anyone trying to help will have to repeat a lot of work to even get to the issue.
  3. It would be helpful to see an example of the intended behavior. From the screenshots, it looks like the card you selected has the F option set as the correct answer, so, without anything to compare it against, it’s not clear whether this style is supposed to mark something you’ve picked or is just highlighting the expected answer.
2 Likes