Hi,
I have an issue where I’ve assigned a shortcut to activate a button while I’m reviewing Anki cards. The button works perfectly and there are no issues with respect to activating it. The button is a ‘show all cloze’ button that reveals all clozes in a note.
However… it only works every 2nd card. I have NO IDEA how this is even occurring, so I was wondering if someone could help me?
I’ll paste both the front and the back template code. My front template has code for cloze overlapping, which is why it is very long. This may be contributing to the issue. The thing is, I’m kind of forced to use coding for cloze overlapping since the add on for it is now behind a paywall and other addons aren’t too great. So while I’ve now got cloze overlapping as part of my notes, I’m encountering an issue with the button I’ve implemented and don’t know how to resolve it.
Front template (containing cloze overlapping code):
<div id="cloze-original" hidden="">{{Text}}</div>
<div id="cloze-anki-rendered" hidden="">{{cloze:Text}}</div>
<div id="cloze-overlapping-config" hidden="">{{Overlapping}}</div>
<div id="cloze-js-rendered" style="display:block"></div>
<script>
// This ceremony makes sure the render function is run exactly once:
(function() {
function escapeRegExp(string) {
return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
}
var alreadyRendered = false;
function render() {
if (alreadyRendered) return;
alreadyRendered = true;
var config = document.getElementById("cloze-overlapping-config").innerText.split(/[,\s|.]+/);
var leadingClozes = config[0] === "0" ? 0 : (+config[0] || 99);
var followingClozes = config[1] === "0" ? 0 : (+config[1] || 99);
var showAllClozes = (config[2] || "true").toLowerCase() === "true"; // Set to false to omit, e.g. for long lyrics/poems
var revealAllClozes = (config[3] || "false").toLowerCase() === "true"; // On the back, reveal other clozes we didnʼt ask for?
var revealAllCustomPlaceholders = (config[4] || "false").toLowerCase() === "true";
var divOriginal = document.getElementById("cloze-original");
var divJsRendered = document.getElementById("cloze-js-rendered");
var currentCloze = +(
(document.body.className.match(/(^|\s)card(\d+)(\s|$)/) || [])[2] ||
((document.getElementById("qa_box") && document.getElementById("qa_box").className && document.getElementById("qa_box").className.match(/(^|\s)card(\d+)(\s|$)/)) || [])[2] ||
0
);
var allClozes = (function(){
var allMatches = divOriginal.innerHTML.match(/\{\{c\d+::[\s\S]*?\}\}/g);
var res = {};
for (var i = 0; i < allMatches.length; i++) {
var match = allMatches[i].match(/\{\{c(\d+)::([\s\S]*?)(::([\s\S]*?))?\}\}/);
res[+match[1]] = res[+match[1]] || {askAll: false, clozes: {}};
if (match[2] === "ask-all")
res[+match[1]].askAll = true;
res[+match[1]].clozes[allMatches[i]] = {content: match[2], placeholder: match[4] ? match[4] : "..."};
}
return res;
})();
var isBackSide = document.getElementById("cloze-is-back") ? true : false;
var question = divOriginal.innerHTML;
for (var i in allClozes) {
for (var orig in allClozes[i].clozes) {
var replacement = "";
var markBlue = false;
var needle = new RegExp(escapeRegExp(orig), "g");
if (allClozes[i].askAll)
replacement = "";
else if (i == currentCloze || allClozes[currentCloze].askAll) {
markBlue = true;
replacement = isBackSide ? allClozes[i].clozes[orig].content : "[" + allClozes[i].clozes[orig].placeholder + "]";
} else if (currentCloze - leadingClozes <= i && i <= currentCloze + followingClozes)
replacement = allClozes[i].clozes[orig].content;
else if (showAllClozes && !allClozes[i].askAll)
replacement = (isBackSide && revealAllClozes) ? allClozes[i].clozes[orig].content : "[" + (revealAllCustomPlaceholders ? allClozes[i].clozes[orig].placeholder : "...") + "]";
else {
replacement = "";
// Also get rid of following new lines, commas, dots, etc.
needle = new RegExp(escapeRegExp(orig) + "(<br>|[\\s,.])*", "g");
}
question = question.replace(needle, function () {
return (markBlue ? "<span class=\"cloze\">" : "") + replacement + (markBlue ? "</span>" : "");
});
}
}
divJsRendered.innerHTML = question;
}
function delayedRender() {
if (window.requestAnimationFrame) window.requestAnimationFrame(render); // less flickering
else window.setTimeout(render, 0);
};
window.onload = delayedRender();
if (document.readyState === "complete") delayedRender();
else document.addEventListener("DOMContentLoaded", delayedRender);
})();
</script>
Back template (containing button code and shortcut for the button):
<div id="cloze-is-back" hidden="">{{cloze:Text}}</div>
{{FrontSide}}
<hr>
<div class="Notes">{{Personal Notes}}<div><p>
<div class="Extra">{{Extra}}<div><p>
<div class="Questions">{{Missed Questions}}<div>
<div id="cloze-is-back" hidden="">{{cloze:Text}}</div>
{{FrontSide}}
<br>
<button onclick="myFunction()">Show All Clozes</button><br>
<script>
// Custom shortcut for button
document.addEventListener('keyup', function (event) {
if (event.key == "`"){
document.querySelector("button").click()
}
})
document.addEventListener('keydown', myKeyboardEventHandler);
function myFunction() {
var el2= document.getElementById("cloze-original");
const regex = /\{\{c\d+::[\s\S]*?/g;
var line = el2.innerHTML.replace(regex,"<strong style='color:lightblue'>");
var final = line.replace(/\}\}/g,"</strong>");
el2.innerHTML = final;
var el = document.getElementById("cloze-js-rendered");
if(el.style.display ==="block") {
el2.style.display = "block";
el.style.display = "none";
} else {
el2.style.display = "none";
el.style.display = "block";
}
}
</script>
{{Reveal all}}
Thanks in advance.