[Userscript] Item Exact SRS Stage Indicator (2 Variants)

:warning: 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.

Requirements

General Script Installation instructions

Installing WaniKani Open Framework (Optional)

Download Script

Features

Summary

  • Displays the exact SRS stage on item-level up
  • Shows current SRS stage for an item - 2 variants:
    • Variant 1 - Under the item (Default)
    • Variant 2 - Top right stats bar
  • Optionally integrates with WaniKani Open Framework (WKOF) Settings
    • Allows you to switch between the 2 variants, or turn off the current indicator fully.

Displays Exact SRS Stage On Item Level-Up

Example:

WKOF Settings (Optional)

If you have WKOF installed, you can use the Settings to switch between the variants, or turn off the current indicator completely.

Note: You don’t need to install WKOF for the script to work. If you don’t have WKOF, you can change Line 16 to be either "none”, “underItem”, or “topStatsBar” to switch variants.

Current SRS Indicator - Variant 1 (Under Item, Default)

The idea was to place the indicator in a familiar place with familiar UI, and therefore make the transition from current to updated smoother. The text was given a softer look to not draw a significant amount of focus away from the characters (it stood out a lot more when the text was white).

The icons used are the same ones WaniKani uses to indicate stages on the dashboard (and other places).

ezgif-32cbf11c320cca66

The text passes all accessibility contrast standards apart from AAA normal. If this is an issue, let me know and we can work to find a more suitable colour combination.

Current SRS Indicator - Variant 2 (Stats Bar)

A more subtle variant, which displays the indicator in top-right stats/menu bar, alongside other stats.

Miscellaneous

Motivation

I wanted to see the exact stage an item is currently on because it can help indicate how much time I want to spend trying to recall an item. If I’m really struggling but the item is only an Apprentice II, I know I’ll see it again soon so I won’t spend as much time trying to recall it. However, if an item is on Enlightened, I’ll be activating every neuron in my brain for the next hour to try summon the knowledge back into existence.

I also found that knowing the exact stage after completing an item helps with motivation, especially with newer items. If I can see that I just levelled up a kanji to Apprentice IV, I can look forward to having the next review because I know I’m really close to ticking that kanji off for that level.

Other scripts like this exist, why are you creating another one?

I know, I know. I’m mainly creating my own one because I wanted to dip my toe into the world of scripting, and this seemed like a simple one to start off with, whilst also being something I actually really wanted as an add-on. I have a decent amount of programming experience, but not much web stuff, so it was a lot of fun to play around and discover things I didn’t know about previously. I’m not here to convince you to use my script over other similar ones!

Reasons Not To Get

An issue I can foresee with having the indicator at all times, is it can be used as a big hint for an item you may otherwise be confused about.

For example, if you just learned a new kanji that looks very similar to one from several months ago, if you see an “Enlightened” version of the kanji come up, you know that it’s the one from several months ago, not the one you just learned.

I don’t know how big of a problem this actually is in practice though, would love to hear others’ thoughts.

Feedback

Maybe goes without saying, but I would love any feedback on this, both general, UX, and code related. If there are any bugs, please report them in the thread or on GitHub. Can’t promise I will address everything though!

Upcoming Work
  • Add icons to the current stage indicator which correspond to the icons WK uses for the stages (the eggs hatching) :white_check_mark:
  • Add a second variant of the current stage indicator that will sit in the top menu bar next to the percentage. This is a more subtle variant which perhaps would suit some people more than the current one. :white_check_mark:
  • Integrating with the WK Open Framework Settings, to give users ability to turn off current stage indicator, or to switch to the top menu bar variant. :white_check_mark:
  • Add exact indicator to item details page.
GitHub

You can find the GitHub repository here, in case you’d like to contribute.

GitHub - romans-boi/wk-item-srs-stage-indicator: Userscript for WaniKani to display the exact item SRS stage (Apprentice 3, Guru 1, etc.), both before and after completing the review for the item.

Change Log

v1.5.2 - Fixed minor text colour bug, where the indicator for kana vocab would be blue instead of purple.

v1.5.1 - No user facing changes. Fixed ‘code smell’.

v1.5.0 - Optionally integrate with the WKOF Settings to allow users to switch between current indicator variants.

v1.4.0 - Second variant of current indicator in the top menu/settings bar, under flag (see comments for more details).

v1.3.0 - WaniKani egg-hatching icons have been added to the current SRS indicator.

v1.2.3 - First release on GitHub and Greasyfork. Any versions you see in the code history before this weren’t released.

7 Likes

v1.3.0 has been published, which means… WaniKani egg-hatching icons have been added to the current SRS indicator!

It’s such a tiny change, but I found that the indicator is now much more pleasant to look at (which is a nod to the designers at WK!)

Here are a few examples:

1 Like

v1.4.0 has been published, which means… Variant 2 of the current SRS indicator has been added, in the top right settings/menu bar!

More subtle, less distracting (but maybe also less fun than the other one…)

Would be nice if WK had filled variants of icons for the different stages, nudge nudge :eyes:

Currently, if you level-up an item, the indicator doesn’t hide and doesn’t do anything funky. I thought this would be fine because dynamically removing it or changing it to the new stage would add additional movement on the screen for little good reason. I’d say it’s clear that, during level-up, it displays the level the item was just before. But, as always, open to suggestions!

Note: Currently this is behind a flag. You can change Line 22 of the script from having false to true to unlock this variant. Future work will put this in the WaniKani Open Framework Settings to make it easy to switch back and forth.

v1.5.0 has been published, which means… I have integrated the script with the WaniKani Open Framework (WKOF) Settings.

So, now you can switch between the 2 variants easily from the dashboard settings menu, or from the quiz settings menu. You can also turn off the current indicator, so you’ll only see the exact SRS stage when an item levels-up.

Note: You don’t need to install WKOF for the script to work. If you don’t have WKOF, you can change Line 16 to be either "none”, “underItem”, or “topStatsBar” to switch variants.

1 Like

v1.5.1 has been released - nothing user facing, just fixed a small ‘code smell’.

(Thanks JavaScript, very cool).

2 Likes

v1.5.2 has been published, which means… I have fixed a minor text colour bug for Variant 1 (Under Item), where any kana-based vocabulary would show the incorrect colour (should be purple, not blue):

:cross_mark:

Turns out, there’s a difference between subject type and category.

category is the one that should have been used in my case, because that’s either Radical, Kanji, or Vocabulary.

type also has one sneaky special type for Kana Vocabulary(and who knows what other special ones exist…).

This has been fixed now, so kana-vocab should be using the right purple colour!

1 Like

Hello, and thanks for the script, as it is really useful. However on some days (after correctly answering review meanings) I’ve been getting this error in the console:

resulting in that the text input box changes to green, but the SRS status indicator remains black, as you can see here, and a lost connection error is thrown:

I’ve noted also that this error only happens when both this script and the “Back to back” one are enabled. Maybe that helps.

1 Like

Hello there!

Thank you for using the script, and I really appreciate the feedback!

All the info you’ve provided is super useful and should be more than enough to debug, so thanks for that. I had a feeling there may be some combination of scripts that would cause issues, but it’s difficult to test by myself, so it’s great to have other people reporting back!

I’ll get on fixing it after the holidays are over, and will keep you posted.

And hope you have a Happy New Year! :tada:

To keep you in the loop, I’ve started debugging this, but haven’t been able to replicate the issue. I ended up asking some questions in this thread: [For Userscript Authors] WK Queue Manipulator - #61 by Kurafutekkusu , and will keep digging.

My current theory is it’s related to the queue manipulator code that the Back To Back script uses, and, at the moment, I’m not exactly sure what my script is doing that could be contributing to the error.

Some follow up questions are:

  1. What other scripts do you use?
  2. Have you tried using only the Back To Back script, without the Item SRS Indicator? If so, have you seen the same error?
  3. Have you noticed any pattern relating to the number of review items? E.g. you only get it if it’s more than X items, or you only get it at the start, or at the end of the review? (Don’t worry if you don’t have the answer, I appreciate this is a very vibe-based question, but I’m just trying to find a way to reliably replicate).

If you get this error again, before leaving the page, could you please go into the element inspector, and copy and paste the script that has a ‘subjectIdsWithSRS’ item on it.

So, for the above example, I’d paste this (don’t worry about formatting):

Script code
<script type="application/json" data-quiz-queue-target="subjectIdsWithSRS">{"subject_ids_with_srs_info":[[2586,6,2]],"srs_ids_stage_names":[[2,["Unlocked","Apprentice I","Apprentice II","Apprentice III","Apprentice IV","Guru I","Guru II","Master","Enlightened","Burned"]]]}</script>