[Userscript] WaniKani Lesson Hover Details

I work up a backlog every now and then and like knowing what’s in it when I do

Gotcha. Well, if at the top of the script you change lessons-and-reviews__lessons-button to lessons-and-reviews__reviews-button it’ll probably work.

For future reference, this is what I saw when I right clicked the new review button and did inspect. Each class is separated by a space and I picked the one that seemed unique.


Ahh thank you Sean.
I see where I had gone wrong now;
by blanket replacing lesson to review I had changed
lessons-and-reviews__lessons-button to reviews-and-reviews__reviews-button
which wasn’t going to work was it.
Appreciate your help.

1 Like

Thank you. This seems to work perfectly. As for the appeal of this feature for reviews, it is nice to get a glimpse of the breakdown before starting – even if the intention is to go through the whole batch. :slight_smile:


I’m glad the script is working well for you. :slight_smile:

For a review version, perhaps someone can make a script (if one doesn’t already exist) that shows this information. I’m no longer making new scripts, but it probably wouldn’t be too hard to make. If you post a request (perhaps here or in a new thread), maybe someone will help you out.

EDIT: Thinking about it more, I feel like @Kumirei made something like this.


Oh I had actually meant that the tweak you suggested to AlliCrabi in a previous post was working to get the same sort of breakdown for reviews as it already does for lessons.

change lessons-and-reviews__lessons-button to lessons-and-reviews__reviews-button

Although I now see the script @Kumirei made for this, which also looks great. The extra details aren’t really necessary for me at the moment, since I’m only level 4 lol…but hopefully I’ll get to the point where the full chart will be more meaningful. :sweat_smile:

Oh, I didn’t even realize you were replying to the previous post. :sweat_smile:


Can you include preview.wanikani.com in the included sites? I mean, I could do that myself, but it’s weird because the other scripts did that automatically…

I personally don’t think it makes sense to be included by default, as the script could completely break the user experience unexpectedly. I’d recommend turning it on there manually if you are testing it on the preview site.


Hi @seanblue. Thanks for this useful little script!

I wanted to add “ascending” item information to the popup (per this thread), so I created the following patch.

Would you prefer that I maintain it as a separate script, or would you be willing to include it as a new version of the original? I tried to follow your coding style and I think it’s a useful addition. It now displays the following on my dashboard:

Here's the patch
diff --git a/bundle.user.js b/bundle.user.js
index 832acc6..6ce2dc5 100644
--- a/bundle.user.js
+++ b/bundle.user.js
@@ -3,7 +3,7 @@
 // @namespace     https://www.wanikani.com
 // @description   Show lesson breakdown by type on hover
 // @author        seanblue
-// @version       1.1.0
+// @version       1.1.1-rw
 // @include       https://www.wanikani.com/*
 // @grant         none
 // ==/UserScript==
@@ -51,15 +51,18 @@

+  let userLevel = 0;
   function fetchData() {
     let promises = [];
+    promises.push(wkof.Apiv2.get_endpoint("user"));

   function processData(results) {
+    userLevel = results[2].level;
     let lessonCounts = getLessonCount(results);
@@ -73,6 +76,11 @@
       radical: 0,
       kanji: 0,
       vocabulary: 0,
+      ascending: {
+        radical: 0,
+        kanji: 0,
+        vocabulary: 0,
+      },

     // Pull the list of subject_ids from the lesson list in 'summary'.
@@ -80,6 +88,9 @@
     lessonSubjectIds.forEach(function (subjectId) {
       let item = subjects[subjectId];
+      if (item.data.level === userLevel - 1) {
+        lessonCounts.ascending[item.object]++;
+      }

     return lessonCounts;
@@ -109,6 +120,16 @@

   function getPopoverHtml(lessonCounts) {
     return `<div class="lhd-table">
+  <div class="lhd-row">
+    <div class="lhd-cell lhd-cell-title">Ascending</div>
+    <div class="lhd-cell lhd-cell-value">${
+      lessonCounts.ascending.radical +
+      lessonCounts.ascending.kanji +
+      lessonCounts.ascending.vocabulary
+    } (${lessonCounts.ascending.radical}r • ${
+      lessonCounts.ascending.kanji
+    }k • ${lessonCounts.ascending.vocabulary}v)</div>
+  </div>
 	<div class="lhd-row">
 		<div class="lhd-cell lhd-cell-title">Radicals</div>
 		<div class="lhd-cell lhd-cell-value">${lessonCounts.radical}</div>

What does “ascending” mean exactly? I would have expected to still just show lines for radicals, kanji, and vocab, but maybe have the per level breakdown in parentheses or something.

I don’t like the term either, but it’s what WK uses in the user preferences for lesson ordering (“ascending level, then subject”).

Also, since the ascending items are a subset of all items, I also thought about adding them in parentheses to the existing info. But the ascending number I’m most interested in is the total number, not the breakdown by type, so I added a separate line.

Since in my case at least they will likely always be vocabulary items, I’m okay if you prefer it the other way.

But the value has nothing to do with the lesson order, right? Aren’t you just showing previous level lessons in that first row?

I’m not sure I understand the question. I’m showing the items in the lesson queue (assignments in SRS stage 0) that are from the prior level, yes.

These are the items that will come up in your lessons first if you use the default user preference settings.

I don’t think they’re calling the previous levels ascending, they’re just saying it’s ordered by level

1 Like

It’s always possible I’m misunderstanding something, but doesn’t this default User preference setting:

Mean that no matter how many lessons are currently available, you’ll see the items from the “ascending level” (the one immediately prior to the one you’re currently on) first?

I simply want to know how many lessons I need to do before seeing radicals/kanji for the current level (which is 12 for me currently).

1 Like

It means that it will be sorted by level in ascending order, and within each level it will be sorted by subject order. If you have lessons from multiple levels ago they will be processed before the lessons from the previous level. “Ascending level” doesn’t refer to a single level


Ah, that makes sense.

Regardless, the patch displays the value I’m after. I suppose logically < userLevel does make more sense than === userLevel - 1, but it hadn’t occurred to me that anyone might have lessons in their queue from more than one level ago.

I thought they were using “ascending level” in the “emergent” sense. There is CS lingo for things transitioning between two states that escapes me at the moment.

I’m wide open to a better term than “ascending” to indicate the number of items from prior levels.

Perhaps something like:

Prior-lvl 12/59 (0r • 0k • 12v)
Radical    3/59
Kanji     32/59
Vocab     25/59


1 Like

I think something like “Previous Levels” would work fine. It’s a bit longer, but pretty clear shrug

1 Like