[Userscript] Stroke Order Diagram

I installed this script and there is a spot for the Kanji  Strokes to appear but it’s just a blank area.  I’ve tried refreshing and it just doesn’t appear. 

you a boss

Love this script! Maybe I’m just blind, but I’m only able to see the stroke order on the kanji pages themselves, not in lessons or reviews. Where do you find them?

The stroke order only appears on the kanji pages. They do not appear on radical pages (because radicals are considered to be kanji parts, even if a single radical can be a whole kanji). They do not appear on vocabulary pages presumably because a vocabulary item can have multiple kanji.

They don’t appear in lessons or reviews, as far as I recall.

I figured they wouldn’t appear on the radical or vocabulary items (for the reasons you mentioned), but would it be alright if I edited the OP in the “New and Improved List” thread to reflect that it only makes stroke count appear in the kanji pages?

@raephe, yes it should be changed. The description (below) is incorrect. Thanks.

If you wonder why it doesn’t work during reviews/lessons:

window.addEventListener("load", function (e) {

This event won’t trigger since the script is being injected/run after the document is already fully loaded. Maybe because sometimes wanikani native javascript delays it? No idea.

How to fix it:
Replace this part

window.addEventListener("load", function (e) {

    // Determine page type
    if (/\/kanji\/./.test(document.URL)) {
        curPage = PageEnum.kanji;
    } else if (/\/review/.test(document.URL)) {
        curPage = PageEnum.reviews;
    } else if (/\/lesson/.test(document.URL)) {
        curPage = PageEnum.lessons;
    }

    // Create and store the element that will hold the image
    unsafeWindow.diagram = createDiagramSection();

    // Register callback for when to load stroke order
    switch (curPage) {
        case PageEnum.kanji:
            loadDiagram();
            break;
        case PageEnum.reviews:
            var o = new MutationObserver(function(mutations) {
               // The last one always has 2 mutations, so let's use that
               if (mutations.length != 2)
                   return; 

               // Reviews dynamically generate the DOM. We always need to re-insert the element
               if (getKanji() !== null) {
               setTimeout(function() {
                       var diagram = createDiagramSection();
                       if (diagram !== null && diagram.length > 0) {
                           unsafeWindow.diagram = diagram;
                           loadDiagram();
                       }
                   }, 150);
               } 
            });
            o.observe(document.getElementById('item-info'), {'attributes' : true});
            break;
        case PageEnum.lessons:
            var o = new MutationObserver(loadDiagram);
            o.observe(document.getElementById('supplement-kan'), {'attributes' : true});
            loadDiagram();
            break;
    }
});

With

function init() {
    // Determine page type
    if (/\/kanji\/./.test(document.URL)) {
        curPage = PageEnum.kanji;
    } else if (/\/review/.test(document.URL)) {
        curPage = PageEnum.reviews;
    } else if (/\/lesson/.test(document.URL)) {
        curPage = PageEnum.lessons;
    }

    // Create and store the element that will hold the image
    unsafeWindow.diagram = createDiagramSection();

    // Register callback for when to load stroke order
    switch (curPage) {
        case PageEnum.kanji:
            loadDiagram();
            break;
        case PageEnum.reviews:
            var o = new MutationObserver(function(mutations) {
               // The last one always has 2 mutations, so let's use that
               if (mutations.length != 2)
                   return; 

               // Reviews dynamically generate the DOM. We always need to re-insert the element
               if (getKanji() !== null) {
               setTimeout(function() {
                       var diagram = createDiagramSection();
                       if (diagram !== null && diagram.length > 0) {
                           unsafeWindow.diagram = diagram;
                           loadDiagram();
                       }
                   }, 150);
               } 
            });
            o.observe(document.getElementById('item-info'), {'attributes' : true});
            break;
        case PageEnum.lessons:
            var o = new MutationObserver(loadDiagram);
            o.observe(document.getElementById('supplement-kan'), {'attributes' : true});
            loadDiagram();
            break;
    }
}

if (document.readyState === 'complete') {
    init();
} else {
    window.addEventListener('load', init);
}
5 Likes

This seems nice! I’ll go give this a try, and also modifying the script a bit as per latest reply’s suggestion.
ありがとうございます!

I don’t know why some userscripts just don’t work for me. Neither does this one. :frowning: I have Chrome, Tampermonkey installed, I go to install the script and on the dashboard it says it’s enabled but then they just don’t show up when I’m on Wanikani. What do?

Belatedly realized the thread began in '14, but decided a ‘thank you’ was never out of place. THANK YOU!!

Did the script ask you for permissions when you first ran it? It loads the pictures from a different server, maybe it’s blocked somehow.

And did you try to look at the developer console and see what happens?
Mac: Command+Option+I, Win+Linux: F12 or Control+Shift+I for Chrome

If you wonder why it doesn’t work during reviews/lessons:

window.addEventListener(“load”, function (e) {

This event won’t trigger since the script is being injected/run after the document is already fully loaded. Maybe because sometimes wanikani native javascript delays it? No idea.

How to fix it:
Replace this part

(Insert code from above here.)

This dun fixes it gud. Props to @looki and @Halo.

Noob here. Is there a tutorial on how to edit a source code?

If you’re using Tampermonkey, click on the icon in the top right in Chrome/Firefox, click on Dashboard button, then click on edit (the notepad looking icon) at the very right of the listed script you want to edit. Replace what Halo said to, then click Save in the top left.

If you completely fuck it up, you can probably delete the stroke order script and reinstall it. Haha.

1 Like

EUREKA! Thank you so much! :sob:

Thanks, I updated the script on greasyfork!

1 Like

It doesn’t seem to work for me, it shows the stroke order tab but never loads. Refreshing the page doesn’t help.

Screenshot_1

EDIT: Solved by replacing Greasemonkey with Tampermonkey.

1 Like

Great script. I’ve been needing to work on stroke order, and this makes it easier. It’s a big plus that you used Jisho’s stroke orders because of the included cross hair in the back of the symbols. Sorry about the kanji progress loss.
Thanks

Using the “updated” version in the Feedback section, with Tampermonkey. Works great! Thank you!

ありがとうございます!
This is great! I will practice writing on paper, this helps so much!

1 Like