[Unsupported] [Userscript] Stroke Order Diagram

I’m getting the following error when I try to install it. Any ideas?

Edit: Nevermind, figured it out! I didn’t have Tampermonkey installed. Thanks for this script, now whenever I get something wrong I can punish myself twice as hard by writing it out a few times.

Edit2: So I was able to try this in a review, and the stroke orders don’t seem to be there. They are there in the regular Kanji pages, but not when I’m in a review on a Kanji. Am I missing something?

I guess that something is wrong… When I first load a specific kanji page, the stroke order doesn’t load. I have to refresh it to see it. Doesn’t work anymore here…

Very useful! Thank you :slight_smile:

I would be extremely happy if this showed the stroke order for radical pages/reviews/lessons as-well. The stroke order is retrieved in the same way as with normal kanji from Jisho but I can’t figure out how to get the variable from the WaniKani page itself.

I could look into that! Although, as you may know, some WaniKani radicals are kind of made up and are displayed using an image, so I can’t just retrieve a stroke order diagram from a website.

1 Like

Thank you for this script,it’s very useful !

This looks absolutely wonderful. I can’t wait to use it. Thanks for putting together this script!

this is so nice. thanks!

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 @anon72902257.