Hello! I am using this template for my multiple choice questions and the expected behavior is that it would simultaneously check the answer and flip the card upon clicking/tapping on a choice. This works perfectly on both PC and AnkiDroid but the AnkiMobile app only selects the choice and fails to complete the said behavior.
After skimming through the More Features section of the AnkiMobile manual, I began suspecting that problem lies with the differences in the click/tap detection of AnkiMobile vs PC/AnkiDroid as stated here:
If you have other elements that must receive tap events, give them the class ‘tappable’ to tell AnkiMobile 2.0.39 or later that it should pass taps through to the element.
I followed the instruction above and have made some changes in the code below and yet I still cannot get AnkiMobile to register and check my selected choice. I’d be very thankful if someone could help me with this problem and point out what’s wrong with the current code. Hoping for your kind response!
Here is the code:
FRONT
<div class="box">
<div class="question">{{Question}}</div>
<div class="optionList"> <div data-audio=>
<div class="option" onclick="optionSelected(this)">{{Answer}}</div>
<div class="option" onclick="optionSelected(this)">{{A}}</div>
<div class="option" onclick="optionSelected(this)">{{B}}</div>
<div class="option" onclick="optionSelected(this)">{{C}}</div>
<div class="option" onclick="optionSelected(this)">{{D}}</div>
<div class="option" onclick="optionSelected(this)">{{E}}</div>
</div>
<div class="explanation" style="opacity:0;"> {{edit:Explanation}} </div>
</div>
<script>
// Formatting by CharlieAnki
// Persistence by Simon Lammer
// This allows us to remember the card order and the selected answers after flipping the card
// Don't modify this
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),void 0==t[_persistenceKey][e]?null:t[_persistenceKey][e]},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>
<script>
// This is the code to make MCQs
// Store the default user answer as "000000000" so that results are shown even if the user didn't select anything
Persistence.setItem('userAnswer', "000000000");
// Put all the options into the options array
var optionsArray = []; // This array contains all of the options
optionsArray[0] = ""; // Leave the first blank
optionsArray[1] = "{{A}}";
optionsArray[2] = "{{B}}";
{{#C}} optionsArray[3] = "{{C}}"; {{/C}}
{{#D}} optionsArray[4] = "{{D}}"; {{/D}}
{{#E}} optionsArray[5] = "{{E}}"; {{/E}}
{{#F}} optionsArray[6] = "{{F}}"; {{/F}}
// Now create the order array, which will first look like this: [ 0, 1, 2, 3, 4 ] depending on the numbers of options (the 0 won't be used)
var order = [];
for(i=0; i < optionsArray.length; i++) { order[i] = i.toString(); }
// Change one of the chosen answers into the answer
var answerPosition = Math.floor(Math.random()*6 + 1);
optionsArray[parseInt(order[answerPosition])] = "{{Answer}}";
var answerString = "";
for (i=0; i < optionsArray.length; i++) { if (i.toString() == answerPosition) { answerString += "1"; } else { answerString += "0"; } }
var answer = answerString.split('');
// Save the correct answer and the order of the questions
// Join transforms the arrays into strings and substring(1) removes the 0 that we had added previously to the beginning of the answer
Persistence.setItem('answer', answer.join('').substring(1));
Persistence.setItem('answerPosition', answerPosition.toString());
Persistence.setItem('order', order.join(''));
// Insert the options as buttons into the optionList div and then put them in an array called options, according to the order in the order array
var optionsText = "";
for(i=1; i < 6; i++) { optionsText += '<div class="option" onclick="optionSelected(this)"><span>'+ optionsArray[parseInt(order[i])] +'</span></div>'; }
var optionList = document.querySelector(".optionList");
optionList.innerHTML = optionsText;
var options = optionList.querySelectorAll(".option");
// If the user clicks on an option
function optionSelected(choice) {
// Select or unselect the option
choice.classList.add('tappable');
if (choice.classList.contains("selected")) { choice.classList.remove("selected"); } else { choice.classList.add("selected"); }
// Find out all the answers of the user
var userAnswer = "";
for(i=0; i < options.length; i++) { if (options[i].classList.contains("selected") ) { userAnswer += "1"; } else { userAnswer += "0"; } }
// Store the user answer
Persistence.setItem('userAnswer', userAnswer);
// Flip the card
pycmd("ans");
showAnswer();
}
</script>
<script>
//Tappable
for (var options of optionList) {
choice.addEventListener("click", optionSelected(choice));
choice.classList.add('tappable');}
</script>
BACK
<div class="box">
<div class="question">{{Question}}</div>
<div class="optionList">
<div class="option" onclick="optionSelected(this)">{{Answer}}</div>
<div class="option" onclick="optionSelected(this)">{{A}}</div>
<div class="option" onclick="optionSelected(this)">{{B}}</div>
<div class="option" onclick="optionSelected(this)">{{C}}</div>
<div class="option" onclick="optionSelected(this)">{{D}}</div>
<div class="option" onclick="optionSelected(this)">{{E}}</div>
</div>
<div class="explanation"> {{edit:Explanation}} </div>
</div>
<script>
// Formatting by CharlieAnki
// Persistence by Simon Lammer
// This allows us to remember the card order and the selected answers after flipping the card
// Don't modify this
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),void 0==t[_persistenceKey][e]?null:t[_persistenceKey][e]},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>
<script>
// This is the code to make MCQs
// Get the values from persistence
var userAnswer = Persistence.getItem('userAnswer');
var answer = Persistence.getItem('answer');
var order = Persistence.getItem('order').split('');
var answerPosition = parseInt(Persistence.getItem('answerPosition'));
Persistence.clear()
// Put all the options into the options array
var optionsArray = [];
optionsArray[0] = ""; // Leave the first blank
optionsArray[1] = "A. {{A}}";
optionsArray[2] = "B. {{B}}";
{{#C}} optionsArray[3] = "C. {{C}}"; {{/C}}
{{#D}} optionsArray[4] = "D. {{D}}"; {{/D}}
{{#E}} optionsArray[5] = "E. {{E}}"; {{/E}}
{{#F}} optionsArray[6] = "F. {{F}}"; {{/F}}
// Change one of the chosen answers into the answer
optionsArray[parseInt(order[answerPosition])] = "✅ {{Answer}}";
// Insert the options into the optionList div and then put them in an array called options
var optionsText = "";
for(i=1; i < 6; i++) { optionsText += '<div class="option"><span>'+ optionsArray[parseInt(order[i])] +'</span></div>'; }
var optionList = document.querySelector(".optionList");
optionList.innerHTML = optionsText;
var options = optionList.querySelectorAll(".option");
// Add colors to the buttons
for(i=0; i < options.length; i++) {
if (userAnswer.charAt(i) == '1' && answer.charAt(i) == '1') { options[i].classList.add("correct"); }
else if (userAnswer.charAt(i) == '1' && answer.charAt(i) == '0') { options[i].classList.add("incorrect"); }
else if (userAnswer.charAt(i) == '0' && answer.charAt(i) == '1') { options[i].classList.add("missed"); }
}
</script>