(This only happens for the online version of Anki – I have the app on my computer as well and everything is fine there.)
Some of my cards are showing up blank when I am using AnkiWeb. When I click “edit,” all the information is there, but nothing shows up on the card. I saw a post talking about a similar issue, but that was with Anki Mobile. Any suggestions on how to address this?
Thank you!
Thank you for your response! I read the post but am a bit confused. Is it saying that I need to add in a line of code to each card I make from now on?
You only need to do this once in your card template.
Some more info: Getting Started - Anki Manual
I put the stuff below (from the link) into my card template but it still doesn’t seem to be working. Could I be doing something wrong?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
Edit: not sure why it’s not showing up here (sorry I’m new to this forum). Also, not sure if this matters but a lot of my cards are Enhanced Cloze 2.1 v2
Unfortunately my suggestion won’t work in cases like this, where it’s accessing jQuery immediately. Please reach out to the author of the card template and ask them to update it: Styling & HTML - Anki Manual
I tried converting it with GPT and it seemed to work.
<!-- VERSION 1.9 -->
<script>
var scrollToClozeOnToggle = true
var animateScroll = true
var showHintsForPseudoClozes = true
var underlineRevealedPseudoClozes = false
var underlineRevealedGenuineClozes = true
var revealPseudoClozesByDefault = false
// Shortcut options
var revealNextGenuineClozeShortcut = "J"
var revealAllGenuineClozesShortcut = "Shift+J"
var revealNextPseudoClozeShortcut = "N"
var revealAllPseudoClozesShortcut = "Shift+N"
</script>
<!-- CONFIG END -->
<div id="card-body">
<div id="main-section" class="content">
<!-- this element will contain the actual content - the enhanced clozes -->
<span id="enhanced-clozes"></span>
</div>
<br>
<br>
<hr>
<br>
<p class="" style="margin: 5.5px;"></p>
<div>
{{#Note}}
<div id="note-section">
<div id="note-header" class="header header-red" onclick="showNextElement(this)">
Note
</div>
<div id="note" class="content" style="display:none">
{{edit:Note}}
</div>
</div>
<br>
<p class="" style="margin: 5.5px;"></p>
{{/Note}}
{{#Mnemonics}}
<div id="mnemonics-section">
<div id="mnemonics-header" class="header header-green" onclick="showNextElement(this)">
Mnemonics
</div>
<div id="mnemonics" class="content" style="display:none">
{{edit:Mnemonics}}
</div>
</div>
<br>
<p class="" style="margin: 5.5px;"></p>
{{/Mnemonics}}
{{#Extra}}
<div id="extra-section">
<div id="extra-header" class="header header-yellow" onclick="showNextElement(this)">
Extra
</div>
<div id="extra" class="content" style="display:none">
{{edit:Extra}}
</div>
</div>
<br>
<p class="" style="margin: 5.5px;"></p>
{{/Extra}}
<div id="info-section">
<div id="info-header" class="header header-blue" onclick="showNextElement(this)">
Information
</div>
<div id="info" class="content" style="display:none">
<div>
<b>Deck</b>: <br><i>{{Deck}}</i>
</div>
<br>
{{#Tags}}
<div id="tags">
<b>Tags</b>: <br><i>{{Tags}}</i>
</div>
{{/Tags}}
</div>
</div>
<br>
<div id="functional-elements">
<div id="show-one-cloze-left"></div>
<div id="show-one-cloze-right"></div>
<div id="no-more-cloze"></div>
</div>
</div>
</div>
<!-- ENHANCED_CLOZE -->
<span id="enhanced-cloze-content" style="display:none">{{Content}}</span>
<span style="display:none;" id="edit-clozes">{{edit:cloze:Content}}</span>
<!-- this needs to exist so that Anki does not complain -->
<span style="display:none">{{cloze:Content}}</span>
<script>
var enhancedClozesData = {
"clozeId": [],
"answers": [],
"hints": [],
}
setTimeout(() => {
defineEnhancedClozeAddEventListener()
prepareEnhancedClozes()
initializeEnhancedClozes()
setupEditFieldDuringReview()
insertStyling()
function prepareEnhancedClozes(genuineClozeOrd) {
var ord =
`{{#c1}}1{{/c1}}{{#c2}}2{{/c2}}{{#c3}}3{{/c3}}{{#c4}}4{{/c4}}{{#c5}}5{{/c5}}{{#c6}}6{{/c6}}{{#c7}}7{{/c7}}{{#c8}}8{{/c8}}{{#c9}}9{{/c9}}{{#c10}}10{{/c10}}{{#c11}}11{{/c11}}{{#c12}}12{{/c12}}{{#c13}}13{{/c13}}{{#c14}}14{{/c14}}{{#c15}}15{{/c15}}{{#c16}}16{{/c16}}{{#c17}}17{{/c17}}{{#c18}}18{{/c18}}{{#c19}}19{{/c19}}{{#c20}}20{{/c20}}{{#c21}}21{{/c21}}{{#c22}}22{{/c22}}{{#c23}}23{{/c23}}{{#c24}}24{{/c24}}{{#c25}}25{{/c25}}{{#c26}}26{{/c26}}{{#c27}}27{{/c27}}{{#c28}}28{{/c28}}{{#c29}}29{{/c29}}{{#c30}}30{{/c30}}{{#c31}}31{{/c31}}{{#c32}}32{{/c32}}{{#c33}}33{{/c33}}{{#c34}}34{{/c34}}{{#c35}}35{{/c35}}{{#c36}}36{{/c36}}{{#c37}}37{{/c37}}{{#c38}}38{{/c38}}{{#c39}}39{{/c39}}{{#c40}}40{{/c40}}{{#c41}}41{{/c41}}{{#c42}}42{{/c42}}{{#c43}}43{{/c43}}{{#c44}}44{{/c44}}{{#c45}}45{{/c45}}{{#c46}}46{{/c46}}{{#c47}}47{{/c47}}{{#c48}}48{{/c48}}{{#c49}}49{{/c49}}{{#c50}}50{{/c50}}{{#c51}}51{{/c51}}{{#c52}}52{{/c52}}{{#c53}}53{{/c53}}{{#c54}}54{{/c54}}{{#c55}}55{{/c55}}{{#c56}}56{{/c56}}{{#c57}}57{{/c57}}{{#c58}}58{{/c58}}{{#c59}}59{{/c59}}{{#c60}}60{{/c60}}{{#c61}}61{{/c61}}{{#c62}}62{{/c62}}{{#c63}}63{{/c63}}{{#c64}}64{{/c64}}{{#c65}}65{{/c65}}{{#c66}}66{{/c66}}{{#c67}}67{{/c67}}{{#c68}}68{{/c68}}{{#c69}}69{{/c69}}{{#c70}}70{{/c70}}{{#c71}}71{{/c71}}{{#c72}}72{{/c72}}{{#c73}}73{{/c73}}{{#c74}}74{{/c74}}{{#c75}}75{{/c75}}{{#c76}}76{{/c76}}{{#c77}}77{{/c77}}{{#c78}}78{{/c78}}{{#c79}}79{{/c79}}{{#c80}}80{{/c80}}{{#c81}}81{{/c81}}{{#c82}}82{{/c82}}{{#c83}}83{{/c83}}{{#c84}}84{{/c84}}{{#c85}}85{{/c85}}{{#c86}}86{{/c86}}{{#c87}}87{{/c87}}{{#c88}}88{{/c88}}{{#c89}}89{{/c89}}{{#c90}}90{{/c90}}{{#c91}}91{{/c91}}{{#c92}}92{{/c92}}{{#c93}}93{{/c93}}{{#c94}}94{{/c94}}{{#c95}}95{{/c95}}{{#c96}}96{{/c96}}{{#c97}}97{{/c97}}{{#c98}}98{{/c98}}{{#c99}}99{{/c99}}{{#c100}}100{{/c100}}{{#c101}}101{{/c101}}{{#c102}}102{{/c102}}{{#c103}}103{{/c103}}{{#c104}}104{{/c104}}{{#c105}}105{{/c105}}{{#c106}}106{{/c106}}{{#c107}}107{{/c107}}{{#c108}}108{{/c108}}{{#c109}}109{{/c109}}{{#c110}}110{{/c110}}{{#c111}}111{{/c111}}{{#c112}}112{{/c112}}{{#c113}}113{{/c113}}{{#c114}}114{{/c114}}{{#c115}}115{{/c115}}{{#c116}}116{{/c116}}{{#c117}}117{{/c117}}{{#c118}}118{{/c118}}{{#c119}}119{{/c119}}{{#c120}}120{{/c120}}{{#c121}}121{{/c121}}{{#c122}}122{{/c122}}{{#c123}}123{{/c123}}{{#c124}}124{{/c124}}{{#c125}}125{{/c125}}{{#c126}}126{{/c126}}{{#c127}}127{{/c127}}{{#c128}}128{{/c128}}{{#c129}}129{{/c129}}{{#c130}}130{{/c130}}{{#c131}}131{{/c131}}{{#c132}}132{{/c132}}{{#c133}}133{{/c133}}{{#c134}}134{{/c134}}{{#c135}}135{{/c135}}{{#c136}}136{{/c136}}{{#c137}}137{{/c137}}{{#c138}}138{{/c138}}{{#c139}}139{{/c139}}{{#c140}}140{{/c140}}{{#c141}}141{{/c141}}{{#c142}}142{{/c142}}{{#c143}}143{{/c143}}{{#c144}}144{{/c144}}{{#c145}}145{{/c145}}{{#c146}}146{{/c146}}{{#c147}}147{{/c147}}{{#c148}}148{{/c148}}{{#c149}}149{{/c149}}{{#c150}}150{{/c150}}{{#c151}}151{{/c151}}{{#c152}}152{{/c152}}{{#c153}}153{{/c153}}{{#c154}}154{{/c154}}{{#c155}}155{{/c155}}{{#c156}}156{{/c156}}{{#c157}}157{{/c157}}{{#c158}}158{{/c158}}{{#c159}}159{{/c159}}{{#c160}}160{{/c160}}{{#c161}}161{{/c161}}{{#c162}}162{{/c162}}{{#c163}}163{{/c163}}{{#c164}}164{{/c164}}{{#c165}}165{{/c165}}{{#c166}}166{{/c166}}{{#c167}}167{{/c167}}{{#c168}}168{{/c168}}{{#c169}}169{{/c169}}{{#c170}}170{{/c170}}{{#c171}}171{{/c171}}{{#c172}}172{{/c172}}{{#c173}}173{{/c173}}{{#c174}}174{{/c174}}{{#c175}}175{{/c175}}{{#c176}}176{{/c176}}{{#c177}}177{{/c177}}{{#c178}}178{{/c178}}{{#c179}}179{{/c179}}{{#c180}}180{{/c180}}{{#c181}}181{{/c181}}{{#c182}}182{{/c182}}{{#c183}}183{{/c183}}{{#c184}}184{{/c184}}{{#c185}}185{{/c185}}{{#c186}}186{{/c186}}{{#c187}}187{{/c187}}{{#c188}}188{{/c188}}{{#c189}}189{{/c189}}{{#c190}}190{{/c190}}{{#c191}}191{{/c191}}{{#c192}}192{{/c192}}{{#c193}}193{{/c193}}{{#c194}}194{{/c194}}{{#c195}}195{{/c195}}{{#c196}}196{{/c196}}{{#c197}}197{{/c197}}{{#c198}}198{{/c198}}{{#c199}}199{{/c199}}{{#c200}}200{{/c200}}{{#c201}}201{{/c201}}{{#c202}}202{{/c202}}{{#c203}}203{{/c203}}{{#c204}}204{{/c204}}{{#c205}}205{{/c205}}{{#c206}}206{{/c206}}{{#c207}}207{{/c207}}{{#c208}}208{{/c208}}{{#c209}}209{{/c209}}{{#c210}}210{{/c210}}{{#c211}}211{{/c211}}{{#c212}}212{{/c212}}{{#c213}}213{{/c213}}{{#c214}}214{{/c214}}{{#c215}}215{{/c215}}{{#c216}}216{{/c216}}{{#c217}}217{{/c217}}{{#c218}}218{{/c218}}{{#c219}}219{{/c219}}{{#c220}}220{{/c220}}{{#c221}}221{{/c221}}{{#c222}}222{{/c222}}{{#c223}}223{{/c223}}{{#c224}}224{{/c224}}{{#c225}}225{{/c225}}{{#c226}}226{{/c226}}{{#c227}}227{{/c227}}{{#c228}}228{{/c228}}{{#c229}}229{{/c229}}{{#c230}}230{{/c230}}{{#c231}}231{{/c231}}{{#c232}}232{{/c232}}{{#c233}}233{{/c233}}{{#c234}}234{{/c234}}{{#c235}}235{{/c235}}{{#c236}}236{{/c236}}{{#c237}}237{{/c237}}{{#c238}}238{{/c238}}{{#c239}}239{{/c239}}{{#c240}}240{{/c240}}{{#c241}}241{{/c241}}{{#c242}}242{{/c242}}{{#c243}}243{{/c243}}{{#c244}}244{{/c244}}{{#c245}}245{{/c245}}{{#c246}}246{{/c246}}{{#c247}}247{{/c247}}{{#c248}}248{{/c248}}{{#c249}}249{{/c249}}{{#c250}}250{{/c250}}
{{#c251}}251{{/c251}}{{#c252}}252{{/c252}}{{#c253}}253{{/c253}}{{#c254}}254{{/c254}}{{#c255}}255{{/c255}}{{#c256}}256{{/c256}}{{#c257}}257{{/c257}}{{#c258}}258{{/c258}}{{#c259}}259{{/c259}}{{#c260}}260{{/c260}}{{#c261}}261{{/c261}}{{#c262}}262{{/c262}}{{#c263}}263{{/c263}}{{#c264}}264{{/c264}}{{#c265}}265{{/c265}}{{#c266}}266{{/c266}}{{#c267}}267{{/c267}}{{#c268}}268{{/c268}}{{#c269}}269{{/c269}}{{#c270}}270{{/c270}}{{#c271}}271{{/c271}}{{#c272}}272{{/c272}}{{#c273}}273{{/c273}}{{#c274}}274{{/c274}}{{#c275}}275{{/c275}}{{#c276}}276{{/c276}}{{#c277}}277{{/c277}}{{#c278}}278{{/c278}}{{#c279}}279{{/c279}}{{#c280}}280{{/c280}}{{#c281}}281{{/c281}}{{#c282}}282{{/c282}}{{#c283}}283{{/c283}}{{#c284}}284{{/c284}}{{#c285}}285{{/c285}}{{#c286}}286{{/c286}}{{#c287}}287{{/c287}}{{#c288}}288{{/c288}}{{#c289}}289{{/c289}}{{#c290}}290{{/c290}}{{#c291}}291{{/c291}}{{#c292}}292{{/c292}}{{#c293}}293{{/c293}}{{#c294}}294{{/c294}}{{#c295}}295{{/c295}}{{#c296}}296{{/c296}}{{#c297}}297{{/c297}}{{#c298}}298{{/c298}}{{#c299}}299{{/c299}}{{#c300}}300{{/c300}}{{#c301}}301{{/c301}}{{#c302}}302{{/c302}}{{#c303}}303{{/c303}}{{#c304}}304{{/c304}}{{#c305}}305{{/c305}}{{#c306}}306{{/c306}}{{#c307}}307{{/c307}}{{#c308}}308{{/c308}}{{#c309}}309{{/c309}}{{#c310}}310{{/c310}}{{#c311}}311{{/c311}}{{#c312}}312{{/c312}}{{#c313}}313{{/c313}}{{#c314}}314{{/c314}}{{#c315}}315{{/c315}}{{#c316}}316{{/c316}}{{#c317}}317{{/c317}}{{#c318}}318{{/c318}}{{#c319}}319{{/c319}}{{#c320}}320{{/c320}}{{#c321}}321{{/c321}}{{#c322}}322{{/c322}}{{#c323}}323{{/c323}}{{#c324}}324{{/c324}}{{#c325}}325{{/c325}}{{#c326}}326{{/c326}}{{#c327}}327{{/c327}}{{#c328}}328{{/c328}}{{#c329}}329{{/c329}}{{#c330}}330{{/c330}}{{#c331}}331{{/c331}}{{#c332}}332{{/c332}}{{#c333}}333{{/c333}}{{#c334}}334{{/c334}}{{#c335}}335{{/c335}}{{#c336}}336{{/c336}}{{#c337}}337{{/c337}}{{#c338}}338{{/c338}}{{#c339}}339{{/c339}}{{#c340}}340{{/c340}}{{#c341}}341{{/c341}}{{#c342}}342{{/c342}}{{#c343}}343{{/c343}}{{#c344}}344{{/c344}}{{#c345}}345{{/c345}}{{#c346}}346{{/c346}}{{#c347}}347{{/c347}}{{#c348}}348{{/c348}}{{#c349}}349{{/c349}}{{#c350}}350{{/c350}}{{#c351}}351{{/c351}}{{#c352}}352{{/c352}}{{#c353}}353{{/c353}}{{#c354}}354{{/c354}}{{#c355}}355{{/c355}}{{#c356}}356{{/c356}}{{#c357}}357{{/c357}}{{#c358}}358{{/c358}}{{#c359}}359{{/c359}}{{#c360}}360{{/c360}}{{#c361}}361{{/c361}}{{#c362}}362{{/c362}}{{#c363}}363{{/c363}}{{#c364}}364{{/c364}}{{#c365}}365{{/c365}}{{#c366}}366{{/c366}}{{#c367}}367{{/c367}}{{#c368}}368{{/c368}}{{#c369}}369{{/c369}}{{#c370}}370{{/c370}}{{#c371}}371{{/c371}}{{#c372}}372{{/c372}}{{#c373}}373{{/c373}}{{#c374}}374{{/c374}}{{#c375}}375{{/c375}}{{#c376}}376{{/c376}}{{#c377}}377{{/c377}}{{#c378}}378{{/c378}}{{#c379}}379{{/c379}}{{#c380}}380{{/c380}}{{#c381}}381{{/c381}}{{#c382}}382{{/c382}}{{#c383}}383{{/c383}}{{#c384}}384{{/c384}}{{#c385}}385{{/c385}}{{#c386}}386{{/c386}}{{#c387}}387{{/c387}}{{#c388}}388{{/c388}}{{#c389}}389{{/c389}}{{#c390}}390{{/c390}}{{#c391}}391{{/c391}}{{#c392}}392{{/c392}}{{#c393}}393{{/c393}}{{#c394}}394{{/c394}}{{#c395}}395{{/c395}}{{#c396}}396{{/c396}}{{#c397}}397{{/c397}}{{#c398}}398{{/c398}}{{#c399}}399{{/c399}}{{#c400}}400{{/c400}}{{#c401}}401{{/c401}}{{#c402}}402{{/c402}}{{#c403}}403{{/c403}}{{#c404}}404{{/c404}}{{#c405}}405{{/c405}}{{#c406}}406{{/c406}}{{#c407}}407{{/c407}}{{#c408}}408{{/c408}}{{#c409}}409{{/c409}}{{#c410}}410{{/c410}}{{#c411}}411{{/c411}}{{#c412}}412{{/c412}}{{#c413}}413{{/c413}}{{#c414}}414{{/c414}}{{#c415}}415{{/c415}}{{#c416}}416{{/c416}}{{#c417}}417{{/c417}}{{#c418}}418{{/c418}}{{#c419}}419{{/c419}}{{#c420}}420{{/c420}}{{#c421}}421{{/c421}}{{#c422}}422{{/c422}}{{#c423}}423{{/c423}}{{#c424}}424{{/c424}}{{#c425}}425{{/c425}}{{#c426}}426{{/c426}}{{#c427}}427{{/c427}}{{#c428}}428{{/c428}}{{#c429}}429{{/c429}}{{#c430}}430{{/c430}}{{#c431}}431{{/c431}}{{#c432}}432{{/c432}}{{#c433}}433{{/c433}}{{#c434}}434{{/c434}}{{#c435}}435{{/c435}}{{#c436}}436{{/c436}}{{#c437}}437{{/c437}}{{#c438}}438{{/c438}}{{#c439}}439{{/c439}}{{#c440}}440{{/c440}}{{#c441}}441{{/c441}}{{#c442}}442{{/c442}}{{#c443}}443{{/c443}}{{#c444}}444{{/c444}}{{#c445}}445{{/c445}}{{#c446}}446{{/c446}}{{#c447}}447{{/c447}}{{#c448}}448{{/c448}}{{#c449}}449{{/c449}}{{#c450}}450{{/c450}}{{#c451}}451{{/c451}}{{#c452}}452{{/c452}}{{#c453}}453{{/c453}}{{#c454}}454{{/c454}}{{#c455}}455{{/c455}}{{#c456}}456{{/c456}}{{#c457}}457{{/c457}}{{#c458}}458{{/c458}}{{#c459}}459{{/c459}}{{#c460}}460{{/c460}}{{#c461}}461{{/c461}}{{#c462}}462{{/c462}}{{#c463}}463{{/c463}}{{#c464}}464{{/c464}}{{#c465}}465{{/c465}}{{#c466}}466{{/c466}}{{#c467}}467{{/c467}}{{#c468}}468{{/c468}}{{#c469}}469{{/c469}}{{#c470}}470{{/c470}}{{#c471}}471{{/c471}}{{#c472}}472{{/c472}}{{#c473}}473{{/c473}}{{#c474}}474{{/c474}}{{#c475}}475{{/c475}}{{#c476}}476{{/c476}}{{#c477}}477{{/c477}}{{#c478}}478{{/c478}}{{#c479}}479{{/c479}}{{#c480}}480{{/c480}}{{#c481}}481{{/c481}}{{#c482}}482{{/c482}}{{#c483}}483{{/c483}}{{#c484}}484{{/c484}}{{#c485}}485{{/c485}}{{#c486}}486{{/c486}}{{#c487}}487{{/c487}}{{#c488}}488{{/c488}}{{#c489}}489{{/c489}}{{#c490}}490{{/c490}}{{#c491}}491{{/c491}}{{#c492}}492{{/c492}}{{#c493}}493{{/c493}}{{#c494}}494{{/c494}}{{#c495}}495{{/c495}}{{#c496}}496{{/c496}}{{#c497}}497{{/c497}}{{#c498}}498{{/c498}}{{#c499}}499{{/c499}}{{#c500}}500{{/c500}}`
ord = ord.trim()
var content = document.getElementById("enhanced-cloze-content").innerHTML
var clozeRe = /{(?:){c(\d+)::([\W\w]*?)(?:::([\W\w]*?))?}}/g
// fill enhancedClozesData
var match = clozeRe.exec(content);
while (match != null) {
enhancedClozesData["clozeId"].push(match[1])
enhancedClozesData["answers"].push(match[2])
enhancedClozesData["hints"].push(match[3] !== undefined ? match[3] : "")
match = clozeRe.exec(content);
}
var html = ""
var ctr = 0
var prevLastIndex = 0
match = clozeRe.exec(content);
while (match !== null) {
var startIdx = clozeRe.lastIndex - match[0].length
html += content.slice(prevLastIndex, startIdx)
var clozeType = ord == enhancedClozesData["clozeId"][ctr] ? "genuine-cloze" : "pseudo-cloze"
html += `<span class="${clozeType}" show-state="hint" cid="${enhancedClozesData["clozeId"][ctr]}" index="${ctr}">${enhancedClozesData["hints"][ctr]}</span>`
prevLastIndex = clozeRe.lastIndex
match = clozeRe.exec(content);
ctr += 1
}
html += content.slice(prevLastIndex)
var enhDiv = document.getElementById("enhanced-clozes")
enhDiv.innerHTML = html
}
function initializeEnhancedClozes() {
Array.from(document.querySelectorAll('.genuine-cloze, .pseudo-cloze')).forEach(elem => toggleCloze(elem, 'hint'));
const genuineClozes = document.getElementsByClassName('genuine-cloze');
if (genuineClozes.length != 0) maybeScrollToCloze(genuineClozes[0]);
Array.from(document.querySelectorAll('.pseudo-cloze, .genuine-cloze, #show-one-cloze-left, #show-one-cloze-right'))
.forEach(function (elem) {
elem.style.cursor = 'pointer';
elem.classList.add('disable-select');
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator
.userAgent)) {
elem.addEventListener('touchstart', function (event) {
if (elem.classList.contains('pseudo-cloze') || elem.classList.contains('genuine-cloze')) toggleCloze(event.target, 'toggle');
else if (elem.id == 'show-one-cloze-left') revealOneClozeOfAType("genuine");
else if (elem.id == 'show-one-cloze-right') revealOneClozeOfAType("pseudo");
});
} else {
elem.addEventListener('click', function (event) {
if (elem.classList.contains('pseudo-cloze')) toggleCloze(event.target, 'toggle');
else if (elem.id == 'show-one-cloze-left') revealOneClozeOfAType("genuine");
else if (elem.id == 'show-one-cloze-right') revealOneClozeOfAType("pseudo");
});
elem.addEventListener('touchstart', function (event) {
if (elem.classList.contains('pseudo-cloze')) toggleCloze(event.target, 'toggle');
});
}
});
if (typeof firstTimeLoadingEnhancedCloze === 'undefined') {
firstTimeLoadingEnhancedCloze = false;
window.enhancedClozeAddEventListener("keydown", (evt) => {
if (shortcutMatcher(revealNextGenuineClozeShortcut)(event)) {
revealOneClozeOfAType("genuine");
}
if (shortcutMatcher(revealAllGenuineClozesShortcut)(event)) {
toggleAllClozesOfAType("genuine")
}
if (shortcutMatcher(revealNextPseudoClozeShortcut)(event)) {
revealOneClozeOfAType("pseudo");
}
if (shortcutMatcher(revealAllPseudoClozesShortcut)(event)) {
toggleAllClozesOfAType("pseudo");
}
});
}
}
function setupEditFieldDuringReview() {
moveEditClozesElm()
document.getElementById("enhanced-clozes").addEventListener('click', function(event) {
if (document.getElementsByClassName("EFDRC-outline").length == 0) return;
if (!ctrlDown) return;
activateEditFieldDuringReview();
});
function moveEditClozesElm() {
var editClozesElm = document.getElementById("edit-clozes")
document.getElementById("main-section").appendChild(editClozesElm)
}
function activateEditFieldDuringReview() {
var enhancedClozesElm = document.getElementById("enhanced-clozes")
var editClozesElm = document.getElementById("edit-clozes")
if (["inline", ""].includes(enhancedClozesElm.style.display)) {
enhancedClozesElm.style.display = "none";
editClozesElm.style.display = "inline";
} else {
enhancedClozesElm.style.display = "inline";
editClozesElm.style.display = "none";
}
setTimeout(() => {
var editable = editClozesElm.getElementsByClassName(
"EFDRC-outline")[0]
editable.onfocus()
editable.focus()
})
}
}
function insertStyling() {
if (document.getElementById("enhanced-clozes-style")) return;
var mainSection = document.getElementById("main-section")
var style = document.createElement("style")
style.id = "enhanced-clozes-style"
style.innerHTML = `
.disable-select {
-webkit-touch-callout: none;
user-select: none;
}
`
if (underlineRevealedPseudoClozes) {
style.innerHTML += `
.pseudo-cloze {
border-bottom: 1px solid #4285f4;
padding-bottom: 1px;
}`
}
if (underlineRevealedGenuineClozes) {
style.innerHTML += `
.genuine-cloze {
border-bottom: 1px solid #ff5c82;
padding-bottom: 1px;
}`
}
mainSection.insertBefore(style, mainSection.children[0])
}
function revealOneClozeOfAType(clozeType) {
if (!["genuine", "pseudo"].includes(clozeType)) {
console.log(`clozeType has unexpected value: ${clozeType}`)
}
var hiddenClozes = document.querySelectorAll(`.${clozeType}-cloze[show-state="hint"`);
if (hiddenClozes.length != 0) {
revealCloze(hiddenClozes[0]);
}
}
function toggleAllClozesOfAType(clozeType) {
if (!["genuine", "pseudo"].includes(clozeType)) {
console.log(`clozeType has unexpected value: ${clozeType}`)
}
var allRevealed = !document.querySelectorAll(`.${clozeType}-cloze[show-state="hint"`).length;
Array.from(document.querySelectorAll(`.${clozeType}-cloze`)).forEach(elem => toggleCloze(elem, allRevealed ? "hint" : "answer"));
}
function revealCloze(elem) {
if (!isVisible(elem)) maybeScrollToCloze(elem);
else {
toggleCloze(elem, 'answer');
if (!isVisible(elem)) {
maybeScrollToCloze(elem);
}
elem.style.display = "none";
setTimeout(() => { elem.style.display = ""; }, 500);
}
}
function isVisible(elm) {
var rect = elm.getBoundingClientRect();
var viewHeight = Math.max(document.documentElement.clientHeight, window.innerHeight);
return !(rect.bottom < 0 || rect.top - viewHeight >= 0);
}
function maybeScrollToCloze(elem) {
if (!scrollToClozeOnToggle) return;
document.querySelector('html, body').scrollIntoView({
top: elem.offsetTop - 60,
behavior: animateScroll ? "smooth" : "auto"
});
}
function defineEnhancedClozeAddEventListener() {
if (typeof window.enhancedClozeEventListener != "undefined") {
for (const listener of window.enhancedClozeEventListener) {
const type = listener[0]
const handler = listener[1]
document.removeEventListener(type, handler)
}
}
window.enhancedClozeEventListener = []
window.enhancedClozeAddEventListener = function (type, handler) {
document.addEventListener(type, handler)
window.enhancedClozeEventListener.push([type, handler])
}
}
var specialCharCodes = {
"-": "minus",
"=": "equal",
"[": "bracketleft",
"]": "bracketright",
";": "semicolon",
"'": "quote",
"`": "backquote",
"\\": "backslash",
",": "comma",
".": "period",
"/": "slash",
};
function shortcutMatcher(shortcut) {
var shortcutKeys = shortcut.toLowerCase().split(/[+]/).map(key => key.trim())
var mainKey = shortcutKeys[shortcutKeys.length - 1]
if (mainKey.length === 1) {
if (/\d/.test(mainKey)) {
mainKey = "digit" + mainKey
} else if (/[a-zA-Z]/.test(mainKey)) {
mainKey = "key" + mainKey
} else {
var code = specialCharCodes[mainKey];
if (code) {
mainKey = code
}
}
}
var ctrl = shortcutKeys.includes("ctrl")
var shift = shortcutKeys.includes("shift")
var alt = shortcutKeys.includes("alt")
var matchShortcut = function (ctrl, shift, alt, mainKey, event) {
if (event.originalEvent !== undefined) {
event = event.originalEvent
}
if (mainKey !== event.code.toLowerCase()) return false
if (ctrl !== (event.ctrlKey || event.metaKey)) return false
if (shift !== event.shiftKey) return false
if (alt !== event.altKey) return false
return true
}.bind(window, ctrl, shift, alt, mainKey)
return matchShortcut
}
var ctrlDown = false;
window.enhancedClozeAddEventListener("keydown", function (ev) {
if (isCtrlKey(ev.code)) ctrlDown = true;
})
window.enhancedClozeAddEventListener("keyup", function (ev) {
if (isCtrlKey(ev.code)) ctrlDown = false;
})
const isCtrlKey = function (keycode) {
return ['ControlLeft', 'MetaLeft'].includes(keycode)
}
}, 1);
function showNextElement(elem) {
elem.nextElementSibling.style.display = "";
};
function toggleCloze(elem, displayOption) {
if (elem == null) return
var cloze = null
if (elem.classList.contains("genuine-cloze") || elem.classList.contains("pseudo-cloze"))
cloze = elem
else {
cloze = elem.closest(".genuine-cloze")
if (cloze == null)
cloze = elem.closest(".pseudo-cloze")
}
var index = cloze.getAttribute('index');
var answer = enhancedClozesData["answers"][index]
var hint = enhancedClozesData["hints"][index]
if (!showHintsForPseudoClozes && cloze.classList.contains('pseudo-cloze')) {
hint = ""
}
if (revealPseudoClozesByDefault || answer.startsWith('#')) {
if (answer.startsWith('#')) {
answer = answer.slice(1)
}
if (cloze.classList.contains('pseudo-cloze')) {
cloze.setAttribute('show-state', 'answer');
cloze.innerHTML = answer;
return
}
}
if (displayOption == 'answer' || (displayOption == 'toggle' && cloze.getAttribute('show-state') == 'hint')) {
cloze.setAttribute('show-state', 'answer');
cloze.innerHTML = answer;
} else if (displayOption == 'hint' || (displayOption == 'toggle' && cloze.getAttribute('show-state') == 'answer')) {
cloze.setAttribute('show-state', 'hint');
hint = ' [ ' + hint + ' ] ';
cloze.innerHTML = hint;
}
// rerun mathjax on the document so that the cloze text gets formatted
// ... for MathJax 2
try {
MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
} catch { }
// ... for MathJax 3
try {
MathJax.typesetPromise()
} catch { }
}
</script>
Back side:
{{FrontSide}}
<span style="display:none">{{cloze:Content}}</span>
<script>
setTimeout(function () {
var note = document.getElementById('note');
if (note) {
note.style.display = 'block';
}
var info = document.getElementById('info');
if (info) {
info.style.display = 'block';
}
var mnemonics = document.getElementById('mnemonics');
if (mnemonics) {
mnemonics.style.display = 'block';
}
var extra = document.getElementById('extra');
if (extra) {
extra.style.display = 'block';
}
var genuineClozes = document.querySelectorAll('.genuine-cloze');
genuineClozes.forEach(function(elem) {
console.log("toggle");
toggleCloze(elem, 'answer');
});
}, 2);
</script>
I tried it and it allows me to see the text, but it removes all the words that are Cloze deletions. I will try contacting the author of the card template. Thank you so much for your help!
Hey, @asheep do you get any workaround for this.
Unfortunately not yet. I tried contacting the creator of the card template but have not received any response. I’m not really sure what else to do at this point except hope they respond. I’ve linked the pages I posted on about the issue if you want to take a look/try to post something else to get the author’s attention:
https://ankiweb.net/shared/info/1990296174
Also on the GitHub page: Enhanced Cloze cards show up blank on AnkiWeb · Issue #81 · RisingOrange/anki-enhanced-cloze · GitHub
If you do figure out a solution, please let me know!
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.