[Userscript] Show Number of Learned Kanji, Vocab

[Saimin]

This is a third-party script/app and is not created by the WaniKani team. By using this, you understand that it can stop working at any time or be discontinued indefinitely.

Show Number of Learned Items (Kanji, Vocabulary, Radicals)

This script shows you how many Kanji, vocabulary, and/or radical items you’ve ‘learned’,
in the dashboard below the SRS stage overview.
See Settings, you can e.g. turn off showing vocab/radicals learned.

Installation

[ Install Number of Learned Items here (Greasyfork) ]

As usual, you need Wanikani Open Framework for this,
and a Script manager like Tampermonkey.
[ General Script Installation instructions ]
[ Open Framework Installation ]

Background

This script is inspired by @Kumirei’s Progress Percentages, which is more powerful in that it shows you the number of Kanji per grade when you hover over it etc., but it doesn’t show vocab learned.
And I personally find it motivating to see how many Kanji i learned at one glance.

Another inspiration is the iOS app Tsurukame, which also just displays Kanji learned, at the top of the dashboard.
(also counts Guru+)

I only remembered after people’s comments that wkstats.com does the same:

Screenshots

Vanilla WK

Dark Mode (With Wanikani Breeze Dark Theme from Stylish)

With @seanblue’s SRS & Leech Breakdown

With @Kumirei’s Progress Percentages

Settings

In the code, you can already set:

• which SRS stage counts as learned (currently Guru/5)
  • you can also e.g. set it to Apprentice (also set stageLearned = 1 for this)
  • change the “(Guru+)” text to (“Apprentice+”)
• whether to show Kanji learned, vocab learned and radicals learned, in any combination
• where to place this section
  • you can select whether to place this before or after a standard WK section
  • by default, this section is placed after the srs stage overview.
  • for example, to place this section after Level Progression, change “sectionsToPlaceAround.srsProgress” to “sectionsToPlaceAround.levelProgression”.
  • to place this section before another section, change “placements.after” to “placements.before”.
• you can also change the “Learned” text

I might add a settings menu in the future, though i’m not sure it’s worth it.

To set these settings, install the script, go to your script manager (e.g. Tampermonkey) dashboard, and click the edit button. Search for “SETTINGS” in the code. In that section, you can change stuff. (not in the section above!)

Acknowledgements

Thanks to @Kumirei and @seanblue for code from their scripts, and rfindley for the Open Framework of course.
And sorry if i mutilated your code, Kumirei

Disclaimer: I’m a Software Developer, but not an expert in Web design and CSS.
This is my first WK script ^^

Feedback

Feel free to leave feedback, suggestions, etc.!

[Kumirei]

Neat! Not really useful for a level 60 but I’m sure others will enjoy it!

[Saimin]

Yeah, not too useful for a level 60 user, except to add a “I learned 2048 kanji” badge to your dashboard
Also, the level 60 vocabulary skippers can track their path to 6000 vocab items

[Sillierjarl]

I installed it and doesn’t seems to be counting all kanji and vocab, maybe its not counting burned items?

Unless that there are 5261 radicals

[Saimin]

i think i fixed burned items not being counted.
could you test it again with the new version (0.7.2)?
Thanks again

I don’t have burned items yet, so i couldn’t test this ^^

[Sillierjarl]

Yeah, seems fixed. Thnak you

[Saimin]

@Sillierjarl

ah, is that another script? Do you know the name of it?
I didn’t know there was a script that did this already, searched for a bit.
Showing the radicals learned is also a good idea.

[Kumirei]

looks like it’s from wkstats.com

[Saimin]

It is indeed from wkstats. Somewhat relieved my practice wasn’t completely wasted ^^
Now, i may add the display of radicals learned.

[Sillierjarl]

yes wkstats haha, sorry for the worry

[Saimin]

You can now also see radicals learned (or turn that option off):

Looks better in Dark Mode:

Also, when you hover over the numbers, it will now show a hover text with total item numbers.

Btw, i haven’t figured out how to place this section right after Level Progression, but before heatmaps.
I can’t say $('.heatmaps').before, will throw an error even if heatmaps is executed before this.
And if i use $('.progression').after, heatmaps always comes first.

[Kumirei]

@Saimin

And if i use $('.progression').after , heatmaps always comes first.

It probably only comes first because of execution order, though.

There’s probably a much better way, but you could just check if the heatmap has been inserted already

const heatmaps = $('.heatmaps');
if (heatmaps.length) heatmaps.before(elem);
else $('.progression').after(elem);

[frankey]

Does it not work anymore? It’s the only script that I have which is not working

[EroKy]

Stopped working for me as well

[Saimin]

Fixed. (@frankey @EroKy )
Please update to the new version.

There were some changes on WK’s part in the HTML that required changes to the script.

[EroKy]

Thank you for your fast update. It’s working again!