I have had this code generated and I am wondering why it is not working at all (putting the curly braces or square brackets around the cloze card. I have tried putting pseudoelements in the CSS but the problem is that it does not have any effect on the DOM so that the brackets are copyable.
.cloze::before
content: “[[”;
.cloze::after
content: “]]”; /* Hidden marker after the cloze */
I am using this since I would be plugging text from my cloze note and plug it into an AI to make a direct question on it. I would need the braces to mark the position of the cloze answer for it to work though.
So could someone please try to get the code below working
<script>
// Wait for Anki's jQuery to load
(function() {
let tryCount = 0;
const tryInterval = setInterval(() => {
if (typeof $ !== 'undefined') {
clearInterval(tryInterval);
setupClozeModification();
} else if (++tryCount === 100) {
clearInterval(tryInterval);
console.error("Anki's jQuery not found. Cloze modification not applied.");
}
}, 100);
})();
function setupClozeModification() {
$(document).on('review:showAnswer', (evt) => {
const cloze = evt.card.container[0];
if (cloze.classList.contains('back')) {
const clozeSpans = cloze.querySelectorAll('span.cloze');
clozeSpans.forEach(span => {
const revealSpan = span.querySelector('.cloze-reveal');
if (revealSpan) { // Ensure cloze is revealed
revealSpan.textContent = `[${revealSpan.textContent}]`;
}
});
}
});
}
</script>
I guess JQuery won’t really work, unless you load it externally. dae also shows in the linked post, what you could do if you really have to rely onto jquery.
Maybe try vanilla JavaScript if this won’t work either?
Hmm well i dont really know much about coding. I put your idea into the AI though and it concurred that jQueries are broken. Here is one without the jquery dependency. It did cause the card to buffer before loading which means something ought to have changed yet I see no wrapping.
// Wait until the document is fully loaded
document.addEventListener('DOMContentLoaded', () => {
setupClozeModification();
});
function setupClozeModification() {
// Add event listener for Anki's answer reveal
document.addEventListener('review:showAnswer', (evt) => {
const cloze = evt.detail.card.container;
if (cloze.classList.contains('back')) {
const clozeSpans = cloze.querySelectorAll('span.cloze-reveal');
clozeSpans.forEach(span => {
const text = span.textContent;
if (!text.startsWith('[') && !text.endsWith(']')) {
// Create new text nodes with brackets
const openBracket = document.createTextNode('[');
const closeBracket = document.createTextNode(']');
span.insertBefore(openBracket, span.firstChild);
span.appendChild(closeBracket);
}
});
}
});
}
AI is good for really simple stuff and learning, but if it gets more complex it won’t help you as much as you think because of the errors it does.
The ‘DOMContentLoaded’ addEventListener will not work in Anki, because the DOM is only partially refreshed when reviewing a card.
REMEMBER: AI is still not that far, to code you a error free template. Eventually someday.
EDIT:
I now understood you question better:
You can do that, what you’re trying to do, on your own. But it still would afford a little JS.
Maybe try it with regex?
I now understood you question better:
You can do that, what you’re trying to do, on your own. But it still would afford a little JS.
Maybe try it with regex?
The problem is I don’t know how to code javascript on my own. I was wondering if I could get help.
JavaScript is sadly only something which you would have to learn, so that people could help you more precisely. Because when you have no understanding, you’re just asking people to code stuff completely for you.
In the end, even if I would code it for you, we wouldn’t even know if this would really be the vision you like. This could take hours.
The code the AI gave you, I can just barely understand it and a lot of it won’t work in Anki. It also thinks of clozes as a HTML-Element, which I don’t even know if it is the case in Anki.
If you still want to learn JavaScript, here is my idea on how you could achieve your vision:
Maybe try catching stuff with regex, append a HTML element to it including a class and then put it back into the innerHTML of the HTMLElement.
Try your luck with positive lookaheads and lookbehinds in regex. This will be your best bet for such a job. (I can’t give you a promise here, that this will work).
This is a lot more complicated than I thought it would be since I thought there could be an easy way to replicate how the CSS code does it to be real text characters. But thanks anyway for letting me know that I should not be wasting more time with AI because I have been trying nonstop with it.
Yep. Tried again, and the AI gave me once more a code that failed to do something. And then went ahead again to use DOMContentLoaded so it is going in circles at this point. Is what I am asking even possible to begin with
And if not, is there any CSS substitute that I can use to format .cloze which makes it copyable
I know basic CSS but nothing about Javascript. Is there a formatting which is copyable that I could apply to .cloze. Like content after and content before (problem is that they are not copyable)
In my opinion you’re trying to go here the easy way copying something.
I won’t respond to this post anymore. You are clearly not trying to learn but rather trying to have a quick solution.
If you really want someone to code this for you then you would have to pay him.
I am not capable of putting time into learning JavaScript from the ground up since I am a medical student and my exams are in a month from now. So it is not that I am lazy or anything. Sorry, I didn’t make it clear at the start.
Thank you for your time. I will try to look out for more stuff.
