This code I got from online long time ago works on pre-made cards with more than one {{cloze}}. It works on Mac (desktop version) and AnkiDroid. But fails to work on the Anki (Ipad/Iphone) version. Tried everything but can't seem to make it work. p.s I am not a programmer. This code was copied from an online site and I can't remember from where.
Tried running it through some JS editor and the only thing I got was Syntax Error: Unknown token ">" No clue what that means.
FRONT TEMPLATE
<div id="kard">
<div class="tags">{{Tags}}</div>
<br>
<div id="mafld" style="display:none;">{{Text}}</div>
<div id="maclz">{{cloze:Text}}</div>
<br>
<style>
.clozure {
color: MediumSeaGreen;
}
</style>
<script>
var d = document;
clz = d.getElementById("maclz")
.innerHTML.split('');
fld = d.getElementById("mafld")
.innerHTML.split('');
tmp = '';
found = true;
cmn = [''];
c = -1; //
rez = [''];
z = 0;
j = 0;
for(var i = 0; i < clz.length; i++) {
if(clz[i] != fld[j]) {
if(clz[i] == '<') {
while(clz[i] != '>') {
rez[z] += clz[i++];
}
}
rez[z] += clz[i];
if(found) {
c++;
cmn[c] = '';
found = false;
} else {}
} else {
if(clz[i] == '<') {
while(clz[i] != '>') {
cmn[c] += clz[i++];
j++;
}
}
if(c < 0) {
c = 0;
}
cmn[c] += clz[i];
if(!found) {
z++;
rez[z] = '';
found = true;
} else {}
j++;
}
}
zax = (typeof(rez[i]) != "undefined" ? rez[i] : '')
.substr(0, 1) == '<';
if(clz[0] != fld[1]) {
for(i = 0; i < cmn.length; i++) {
tmp += (zax ? "" : '<span class="clozure">') +
(typeof(rez[i]) != "undefined" ? rez[i] : '') +
(zax ? "" : '</span>') + (typeof(cmn[i]) != "undefined" ? cmn[i] : '');
}
} else {
for(i = 0; i < cmn.length; i++) {
tmp += (typeof(cmn[i]) != "undefined" ? cmn[i] : '') +
(zax ? "" : '<span class="clozure">') +
(typeof(rez[i]) != "undefined" ? rez[i] : '') + (zax ? "" : "</span>");
}
}
document.getElementById("maclz").innerHTML = tmp;
</script>
</div>
STYLING TEMPLATE
html { overflow: scroll; overflow-x: hidden; }
/* CONTAINER FOR YOUR CARDS */
#kard {
padding: 0px;
max-width: 900px; /* CHANGE CARD SIZE HERE */
margin: 0 auto; /* CENTERS THE CARD IN THE MIDDLE OF THE WINDOW */
word-wrap: break-word; /* BREAKS UP LONG WORKS */
}
/* APPLIES TO THE WHOLE CARD */
.card {
font-family: Menlo, baskerville, sans;
font-size: 16px; /* FONT SIZE */
text-align: center; /* ALIGN TEXT */
color: #D7DEE9; /* FONT COLOR */
line-height: 1.2em;
background-color: #333B45; /* BACKGROUND COLOR */
}
/* STYLE FOR CLOZE DELETIONS */
.cloze, .cloze b, .cloze u, .cloze i { text-align:left; font-weight: bold; color: MediumSeaGreen !important;}
/* STYLE FOR EXTRA PORTION ON BACK OF CARD */
#extra, #extra i { font-size: 15px; color:#D7DEE9; font-style: italic; text-align: left;}
/* STYLE TAGS TO APPEAR WHEN HOVERING OVER TOP OF CARD */
.tags {
color: #A6ABB9;
opacity: 1;
font-size: 10px;
width: 100%;
text-align: center;
text-transform: uppercase;
position: fixed;
padding: 0;
top:0;
right: 0;}
.tags:hover { opacity: 1; position: fixed;}
/* IMAGE STYLE */
img { display: block; max-width: 50%; max-height: none; margin-left: auto; margin: 10px auto 10px auto;}
img:active { width: 100%; }
tr {font-size: 12px; }
/* COLOR ACCENTS FOR BOLD-ITALICS-UNDERLINE */
b { color: #C695C6 !important; } /* BOLD STYLE */
u { text-decoration: none; color: #5EB3B3;} /* UNDERLINE STYLE */
i { color: IndianRed; } /* ITALICS STYLE */
a { color: LightGray !important; text-decoration: none; font-size: 10px; font-style: normal; } /* LINK STYLE */
/* ADJUSTMENT FOR MOBILE DEVICES */
.mobile .tags:hover { opacity: 1; position: relative;}
.mobile .card img:active { width: inherit; max-height: none;}
.card ul {
list-style-position:inside
margin-left: 0px;
padding: 0px;
}
.card ol {
list-style-position:inside
margin-left: 0px;
padding: 0px;
}
BACK TEMPLATE
<div id="kard">
<div class="tags" id='tags'>{{Tags}}</div> <br>
<div id="wrapper" style="text-align: justify-center;">
<div id="centered" style="display: inline-block;">
{{cloze:Text}}</div></div>
<br><br><div id='extra'>{{Extra}}</div>
</div></div></div>
Would love for this to work on the ipad/iphone anki version. It detects the 2nd or more cloze text on the front card and highlights it to be green.
This is how the edit car looks like. It has 2 {{cloze}} texts.
This is what the Anki(ipad version) does. ←This is what I don't want
