Hanzi animation not showing on review

[ThalerG]

Hello! Long time Anki user, first time HTML/JS programmer here!

So, I’ve used the Domino Chinese deck when starting to learn Chinese, and it served me quite well for some time. Recently, since I’ve started learning new words and phrases, I wanted to make it easier to add new cards. The main drawback I felt with the deck was that the stroke order for new Hanzi had to be added by hand in the “Media” field, and so I did a little tinkering with the card by including the Hanzi Writer API, so that if the “Media” field is empty, it will draw it based on the “Hanzi” field. Here’s the code for the field:

<script>
var testhanzi = `{{Hanzi}}`;
var media = `{{Media}}`;
if (media.length==0){
for (var ind = 0; ind<testhanzi.length; ind++){
	if (testhanzi[ind].match(/[\u3400-\u9FBF]/)){
		var writer = HanziWriter.create('character-target-div', testhanzi[ind], {
       width: 100,
       height: 100,
       padding: 5,
       delayBetweenLoops: 3000,
       strokeAnimationSpeed: 0.5,
       delayBetweenStrokes: 100});
		writer.loopCharacterAnimation();}
}}
else {
document.getElementById("character-target-div").innerHTML = media;
}
</script>

...

<div class=others>
<div id="character-target-div"></div>
</div>

The card works perfectly fine on my desktop (Windows 11, ⁨Anki ⁨23.12.1), but I use mostly AnkiDroid with my Samsung tablet. There, it works fine in the card preview both with gifs in the “Media” field and with the auto drawing:

Preview with “Media” field:

Preview without “Media” field:

However, when reviewing the card, it doesn’t work with neither of them, showing only a blank space where the drawings were supposed to be:

I’ve done some programming for embedded software, but this is my first time tinkering with HTML and JS code. Any ideas on what’s going wrong with my card?

Thanks in advance!

Debug info:

AnkiDroid Version = 2.18.4 (f867da96b8304edaebd0361326316bc7514f8cde)

Backend Version = 0.1.38-anki24.04.1 (24.04.1 ccd9ca1a8309b80bcb50ddc5d99c7ce63440bce9)

Android Version = 14 (SDK 34)

ProductFlavor = play

Manufacturer = samsung

Model = SM-X610

Hardware = s5e8835

Webview User Agent = Mozilla/5.0 (Linux; Android 14; SM-X610 Build/UP1A.231005.007; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/127.0.6533.103 Safari/537.36

ACRA UUID = 54141355-3457-4985-bbea-4f7bf3b9af1e

FSRS Enabled = false

Crash Reports Enabled = true

[sorata]

I’m also facing issues with reviewer that are not present in previewer. I’m not sure why, maybe the previewer comes from backend.

---

If you go to Settings > About and click the AnkiDroid icon multiple times, then you should see Developer options in your settings screen. Can you try the new reviewer option from there?

This option solves a lot of issues with the current reviewer. It’s still a work in progress so you might see some things that don’t work. For example, control options don’t work so if you use gestures/keybinds like me, you’ll have to stick to current reviewer.

---

On a different note, I used stroke order fonts for Japanese Kanji. Even that becomes mostly useless after getting used to how the characters work (except when you have something totally unintuitive like 飛). GIF or any kind of animation is visually appealing so that’s a plus, but other than that, not so important IMO.

[hkr]

Unlike Anki desktop, AnkiDroid’s current implementation of the reviewer does not seem to guarantee that the non-script elements in the card are present on the DOM when the script is called. So polling until the target element is available or adding a slight delay using setTimeout() and then executing the function will probably work.

Try replacing the contents of your script with the following:

var targetId = "character-target-div";
var testhanzi = `{{Hanzi}}`;
var media = `{{Media}}`;

async function waitForElementExists(id) {
    while (!document.getElementById(id)) {
        await new Promise(requestAnimationFrame);
    }
}

async function main() {
    await waitForElementExists(targetId);

    if (!media.length) {
        for (var ind = 0; ind < testhanzi.length; ind++) {
            if (testhanzi[ind].match(/[\u3400-\u9FBF]/)) {
                var writer = HanziWriter.create(
                    targetId,
                    testhanzi[ind],
                    {
                        width: 100,
                        height: 100,
                        padding: 5,
                        delayBetweenLoops: 3000,
                        strokeAnimationSpeed: 0.5,
                        delayBetweenStrokes: 100,
                    },
                );
                writer.loopCharacterAnimation();
            }
        }
    } else {
        document.getElementById(targetId).innerHTML = media;
    }
}

main();

[ThalerG]

Thanks for the answer! Do you mean the “New congrats screen option”? If so, I tried it, and the result is still the same. These are the options I get in the Developer options screen:

About the stroke order, that’s good to know! Right now I’m still getting the hang of it, but I hope to be able to guess it right upfront in the future too!

[ThalerG]

Thanks! This solved everything!!

I wasn’t aware of this difference in AnkiDroid, but now both the gif and “auto” drawings are working!!

[sorata]

I’m in latest alpha version, that has the new reviewer option.