For my “Basic (type in the answer)” cards, I want to make it so that there is no comparison. Here is the full layout I would like:
Front: Question then the box to type in your answer which I can type in.
Back: Question again, then my answer (and only my answer, no comparison, dashes, arrows coloured letters, anything. Also, I would Ideally like this to be in the regular font and have a different colour - maybe light blue - so it stands out), then the full back of the card as I made it, including any media and being playable.
Before you start saying why would you want this, comparison is fine as it is only short answers this should be used for, or why would you want media, you can’t input that - I’m using it for all my cards - it helps me to just actually put down what I am thinking to make an answer, and I don’t want an annoying Anki comparison or my media - which sometimes is the whole answer - such as a labelled diagram - - not showing.
Also, I have tried solving this using things such as AI, but it just doesn’t work, but I think an actual human might be able to solve this. I am honestly pretty dumb so if you could pretty much give me a button-by-button guide or give me something to just copy and paste into the card template that would be great! Thank you if you can help, but if there is simply not a solution then I understand!
Replace the back template of the Basic (type in the answer) note type with this:
{{Front}}
<br><br>
<div id="ans" style="color: lightblue;">{{type:Back}}</div>
<div id="html_remover" hidden></div>
<hr>
{{Back}}
<script>
var ans_e = document.getElementById("ans");
var html_remover = document.getElementById("html_remover");
var ans = document.getElementById("typeans").innerHTML.split('<br><span id="typearrow">↓</span><br>');
var my_ans = ans[0];
html_remover.innerHTML = my_ans.replace(/<span class=\"typeMissed\">.*?<\/span>/g, "");
var my_ans_text = html_remover.innerText;
ans_e.innerHTML = my_ans_text;
</script>
Edit: made a custom and better solution.
Edit 2: made the color lightblue and removed an unused line.
Edit 3: added a <br>.
Edit 4: reverted edit 3.
Edit 5: fixed a weird bug with <hr id=answer>.
1 Like
This is absolutely brilliant! I just have a few small tweaks I was wondering if you could make. On the back of the card please could you tell me how to make my answer have a gap between it and the question above (it is already on the next line but it would help to have a “gap line” in between them), and please could you tell me how to make my answer on the back of the card light blue so it stands out. If this is not possible, still thank you, you have fixed the main problem completely and solved something I have been trying to figure out for ages. These are just minor tweaks which would make it slightly better. Thank you.
1 Like
Oops, my bad, I didn’t see you edited it with the colour. Thank you for that.
You can add a <br> for more vertical spacing, is that what you mean?
1 Like
I think so - where do I add it though? I just want an extra line gap in between the question and my answer so they are separated - purely for aesthetic purposes; you have already made it completely functional.
I updated the code, see if that’s what you want.
1 Like
Not quite - my image shows what it currently looks like. What I want is between the question (the first white bit) and my answer (the blue bit) there to be an extra line gap, as if I pressed enter again - to separate them for aesthetic purposes.
Weird, that’s not how it’s supposed to look. Are you sure you replaced the entire back template with my code? Also, what is in the styling section?
1 Like
I’m sure I replaced the back. Also, your whole Anki app looks different to mine - I’m on Anki for windows. Here is my styling section:
.card {
font-family: arial;
font-size: 20px;
text-align: center;
color: black;
background-color: white;
}
/* Optional: Custom colours for typing feedback */
.typeGood { background-color: #2ecc71; } /* Green for correct */
.typeBad { background-color: #e74c3c; } /* Red for incorrect */
.typeMissed { background-color: #f1c40f; } /* Yellow for missed */
This is probably wrong and has weird comments - this is because I changed it and couldn’t find the default so I had to go to AI and ask it for the default.
That’s not the default styling, as expected from AI…
It’s not the problem though. Let me try on my laptop first.
1 Like
I fixed it. Apparently, <hr id=answer> doesn’t work on Anki Desktop with the rest of the code for some reason.
Also, here’s the default styling if you want it:
.card {
font-family: arial;
font-size: 20px;
line-height: 1.5;
text-align: center;
color: black;
background-color: white;
}
1 Like
THIS IS ABSOLUTELY AMAZING! You have fixed everything I wanted; thank you so much!
1 Like
You’re welcome! Note that this solution utilizes Anki’s type answer feature so it doesn’t allow for typing line breaks.
There are ways to do that if you want.
1 Like
I don’t think I really need that, but if its not too complicated I guess it might stop problems in the future.
Actually never mind - I like being able to press enter quickly to show the answer. Thank you for everything
1 Like
