I would like to have feedback on my type answer cards. (basic note type)
So as I type the answer on the front card, I know if I have correctly typed the answer before flipping the card.
Is this possible?
maybe there is a way to use a script to achieve this? Maybe a script could activate once the correct word is typed in the type answer box which matches a certain field?
for example: lets say I have a field called ‘word’. When I type the contents of the field ‘word’ into the {{type:word}} answer box I would get a sign on the front of the card to signify that I have typed the correct answer before flipping the card.
You can pretty much mimic the behavior of basic type using cloze type. So, unless you have to stick with basic type for technical reasons, the add-on should do the work.
Please do not unnecessarily ping people. I know @kleinerpirat knows how to code in JS, but there are plenty of other people who could answer your question too.
I did something like that last year, I was looking for it in my backed up collections but apparently I didn’t bother saving it and simply dumped it. However, retrospectively, I don’t think what it was very useful. Using the add-on linked by @01101 would have been much better, as it would have been less painful to maintain while still providing the same (if not more) feature.
Is there any particular reason why this add-on doesn’t fit you? Because if someone were to do what you need, it would basically end up being what that add-on provides.
Thanks @BlackBeans for caring about my digital wellbeing, but I don’t really mind the pinging It’s an honor some people reach out to me for help - altough I don’t always find the time for it.
@huyvanphan, try this script for your front template of “Basic (type in the answer)”:
<script>
(() => {
/**
* Type-in-the-answer live feedback for Anki
* @author Matthias Metelka | @kleinerpirat
*/
/* Helper functions to keep caret position while typing */
const getCaretPosition = (contenteditable) => {
contenteditable.focus();
let _range = document.getSelection().getRangeAt(0);
let range = _range.cloneRange();
range.selectNodeContents(contenteditable);
range.setEnd(_range.endContainer, _range.endOffset);
return range.toString().length;
};
const setCaretPosition = (contenteditable, pos) => {
contenteditable.focus();
document.getSelection().collapse(contenteditable, pos);
};
/* Replace input with contenteditable div */
const input = document.getElementById("typeans");
const editable = document.createElement("div");
editable.contentEditable = true;
editable.id = "typeans";
editable.innerHTML = input.value;
input.replaceWith(editable);
editable.addEventListener("input", () => {
const pos = getCaretPosition(editable);
/* Anki uses value attribute to compare answer */
editable.value = editable.innerText;
editable.innerHTML = (() => {
const letters = editable.innerText.split("");
const word = "{{Answer}}";
let html = "";
letters.forEach((letter, i) => {
html += `<span class="${
letter == word[i] ? "typeGood" : "typeBad"
}">${letter}</span>`;
});
return html;
})();
setCaretPosition(editable, pos);
});
})();
</script>
Anki uses an input element for its answer box, which cannot contain HTML, only plain text - so it can’t be styled. My script replaces that input element with a contenteditable (the same kind of element that’s used for the fields in Anki’s note editor).
I wrap each letter in its own <span>, using Anki’s classes “typeGood” and “typeBad” for color-coding.
There’s some overhead because updating the inner HTML of such an element moves the caret position to the start.
Thank you so much. The second option is just what I was looking for and works perfectly when studying.
(first option wasn’t suitable for me as it didn’t work with the Vietnamese telex keyboard input system on Microsoft windows).
One small issue is that with the second script, in preview mode, the front of the card just says
“Invalid HTML on card: TypeError: Cannot read property ‘addEventListener’ of null”
Is there a way to fix this to be able to preview my cards?
Your type-in-answer live feedback for anki (vague variant) is working great! I’m really enjoying using it and it has helped my retention rate go up by around 10% so thank you again!
I was wondering if there is a simple way that you could modify your vague variant script so instead of the type-in box turning green for all correct inputs, instead the type-in box will turn yellow if you write correct inputs up until the last letter which forms the whole correct answer and at that point the type-in box would turn green to signify that you have the exact correct answer and that you’re not missing any further inputs/letters.
For example, if the {{Answer}} is Elephant. The type-in box would continue to turn red for any incorrect input but turn yellow as you type the following letters ‘E-l-e-p-h-a-n’ then turn green when you have written the whole correct answer with the the final letter ‘t’.
Hey, some of use want a shot at coding stuff for free as well.
Just kidding, but to answer your request, and since Matthias has already done the heavy lifting, this is an easy fix. You don’t even need to compare substrings anymore.
Hi! I have been practicing with this script and have an interesting problem. When my answer field has a quotation mark in it, the javascript is bypassed. When I am typing in the answer, there is no color change. So, it behaves as if the script is not working. As soon as I take the quote marks out of the answer field and try again - it works perfectly. Is there anything that I can add to the script so that it will run even if there are quotation marks in the answer? Thanks!