View New/Learning/Review While Rating Card

Anki Help
2

This probably isn’t the type of solution you’re looking for, but I use custom scheduling to display a little tag to differentiate new cards:

Example
Example2780×1672 186 KB

On the Front and/or Back Template:

<div class="notifier">[I usually put my main field here, but you can position this wherever]</div>

In Custom Scheduling at the bottom of the deck options:

if (document.getElementById("notification") == null) {
const notification = document.createElement("style");
notification.setAttribute("id", "notification");
document.body.appendChild(notification);
}

if (states.current.normal?.new) {
document.getElementById("notification").innerHTML = ".notifier::before {content: 'NEW!  '; color: blue; font-size: 60%; white-space: pre;}";
}
if (states.current.normal?.review) {
document.getElementById("notification").innerHTML = "";
}
if (states.current.normal?.learning) {
document.getElementById("notification").innerHTML = "";
}
if (states.current.normal?.relearning) {
document.getElementById("notification").innerHTML = "";
}

I only use it for new cards, but below is a version (untested, but I think it should work) for all card states. If you use a little CSS you should be able to design/position/rename everything how you’d like. I’m not a programmer, so the code can probably be optimized, but it works for me. There are probably other solutions, though.

if (document.getElementById("notification") == null) {
const notification = document.createElement("style");
notification.setAttribute("id", "notification");
document.body.appendChild(notification);
}

if (states.current.normal?.new) {
document.getElementById("notification").innerHTML = ".notifier::before {content: 'NEW!  '; color: blue; font-size: 60%; white-space: pre;}";
}
if (states.current.normal?.review) {
document.getElementById("notification").innerHTML = ".notifier::before {content: 'REVIEW!  '; color: green; font-size: 60%; white-space: pre;}";
}
if (states.current.normal?.learning) {
document.getElementById("notification").innerHTML = ".notifier::before {content: 'LEARNING!  '; color: red; font-size: 60%; white-space: pre;}";
}
if (states.current.normal?.relearning) {
document.getElementById("notification").innerHTML = ".notifier::before {content: 'RELEARNING!  '; color: orange; font-size: 60%; white-space: pre;}";
}
1 Like