TLDR: Browse Section renders latex correctly, Card Review not.
I am currently trying to create some MCQ cards, however the latex/mathjax expressions do not seem to render correctly when actually using the carsd (but do in the browse section).
I upload my cards through text files. Here is an example card (I tabulate to separate fields):
1 What is the naive definition of probability? \( P(A) = |A| - |S| \) \( P(A) = \frac{|A|}{|S|} \) if outcomes are equally likely \( P(A) = \frac{|S|}{|A|} \) \( P(A) = |A| + |S| \) B The naive definition applies to finite sample spaces with equally likely outcomes. It defines probability as favorable outcomes divided by total outcomes. Example: rolling a die, P(even) = 3/6 = 1/2. This forms the foundation for more advanced definitions. Probability NaiveDefinition Basics
However, as you can see from the screenshots below, while the latex does render in the ‘browse’ section, it doesn’t work in the normal Anki card review section.
Above: Browse Section
Above: Review Section
Even more bizarre is the fact that the question field renders correctly whereas the a, b, c, d, … answer choice fields do not.
Here below is the template:
Original MCQ template
<script>
// v1.1.8 - https://github.com/SimonLammer/anki-persistence/blob/584396fea9dea0921011671a47a0fdda19265e62/script.js
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"))}}
</script>
{{#number}}Question #{{number}}{{/number}}{{#question}}
<div class="question-div">
<div id="tts">{{tts en_US speed=0.8 voices=Apple_Samantha,Microsoft_Haruka:question}}</div>
<div>{{question}}</div>
</div>
{{/question}}
<br/>
<div id="answer-div"></div>
<script>
function returnTemplate(inputType, index, id, answer, displayAnswerLetters) {
var result = '<div class="answer-div">';
result += '<div><input type="' + inputType + '" onclick="selectAnswer();" name="SelectedAnswer" id="' + id + '" /></div>';
if (displayAnswerLetters)
result += '<div>' + String.fromCharCode(index + 65)+ '.</div>';
else
result += '<div> </div>';
result += '<div><label for="' + id + '">' + answer + '</label></div>';
result += '<div></div>';
result += '</div>';
return result;
}
function shuffle(array) {
let currentIndex = array.length;
while (currentIndex != 0) {
let randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex--;
[array[currentIndex], array[randomIndex]] = [
array[randomIndex], array[currentIndex]];
}
}
function selectAnswer() {
var SelectedAnswer = [];
for (var i = 0; i < answerJson.length; i++) {
if(document.getElementById(answerJson[i].id).checked) {
SelectedAnswer.push(answerJson[i].id);
}
}
if (Persistence.isAvailable()) {
Persistence.clear();
Persistence.setItem("SelectedAnswer", SelectedAnswer);
Persistence.setItem("DivArray", divArray);
}
}
var answersArray = `{{answers}}`.toLowerCase().split(",");
var answerJson = [
{{#a}}{ "id": "a", "answer": `{{a}}` },{{/a}}
{{#b}}{ "id": "b", "answer": `{{b}}` },{{/b}}
{{#c}}{ "id": "c", "answer": `{{c}}` },{{/c}}
{{#d}}{ "id": "d", "answer": `{{d}}` },{{/d}}
{{#e}}{ "id": "e", "answer": `{{e}}` },{{/e}}
{{#f}}{ "id": "f", "answer": `{{f}}` },{{/f}}
{{#g}}{ "id": "g", "answer": `{{g}}` },{{/g}}
{{#h}}{ "id": "h", "answer": `{{h}}` },{{/h}}
{{#i}}{ "id": "i", "answer": `{{i}}` },{{/i}}
{{#j}}{ "id": "j", "answer": `{{j}}` },{{/j}}
];
if (false)
shuffle(answerJson);
var answerDiv = document.getElementById("answer-div");
var divArray = [];
for (var i = 0; i < answerJson.length; i++) {
divArray.push(answerJson[i].id);
var inputType = answersArray.length > 1 ? "checkbox" : "radio";
answerDiv.innerHTML += returnTemplate(inputType, i, answerJson[i].id, answerJson[i].answer, true);
}
if (Persistence.isAvailable()) {
Persistence.clear();
Persistence.setItem("SelectedAnswer", []);
Persistence.setItem("DivArray", divArray);
}
</script>
Thank you for any help.
