Updates to Lessons, Reviews, and Extra Study

WaniKani API And Third-Party Apps
1

Hi Everyone,

Over the past few months, we have been working on new features for WaniKani that required consolidating our Lesson, Review, and Extra Study code. These changes will be rolled out to production during the week of March 27, 2023.

To give you a chance to preview the changes and see how they may affect any of your user-scripts, we invite you to try out preview.wanikani.com. Please note that the preview environment uses the same data as the production environment, so doing your lessons and reviews on preview.wanikani.com will be the same as doing them on www.wanikani.com.

There have been significant changes made, and instead of gradually introducing them (as was done in the past with the migration to React), we decided to implement all the changes at once. We will provide more detailed information about the changes when we release to production and write another community post for the general audience. In the meantime, here is a list of the key changes:

  • Lesson slides for each subject are now server-side rendered, using stimulus to add client-side behaviour. Each subject lesson has its own unique URL, which will enable us to do more interesting things in the future.
  • The skip lesson button has been removed, and there is no longer a requirement to view all lessons before the lesson quiz becomes active. You can now click the quiz button on a lesson to go straight to the quiz if you wish.
  • All quiz pages (lesson quiz, review quiz, and extra study quizzes) now share a common codebase. The quiz queue is preloaded on the page along with the first question when it is sent from the server. There is no longer a loading screen. The data structures that were used for the quiz pages have also been updated.
  • The use of jStorage has been discontinued, so if you were using it in your scripts, they will need to be updated.
  • The Lesson, Review, and Extra Study summary pages have been removed. You can now navigate from the dashboard directly to your reviews or lessons. We do have plans to replace the post-review information that would appear on the summary page, but for now, the dashboard’s extra study and level progress can be used to keep track of how you are doing.
  • I have started migrating the CSS to use CSS variables instead of SASS variables. This work is not yet complete, but theming should be much more straightforward and less brittle to changes to the DOM structure when this is done.

There have also been many quality-of-life changes, particularly for mobile devices, such as the keyboard not disappearing between quiz questions and general legibility improvements, so be sure to check these out on mobile.

As always, your support and assistance are greatly appreciated. If you have any questions or experience any issues, please feel free to let me know, and I will get back to you as soon as possible.

56 Likes
2

Is jquery gone yet?

1 Like
3

Thanks for the update, Scott! I’ll check out my various scripts to see what needs updating. @Kumirei, I’m sure you’ll want to look at Reorder Omega.

19 Likes
4

Seems like this is a big step towards killing userscripts

3 Likes
5

Not yet, but one day. We have a few pages that are still using it.

4 Likes
6

Thanks Scott, you really make my day with news like this

3 Likes
7

Not really, unless you also want the site itself to stagnate. A lot of these changes are actually nicer to deal with for a userscript than the current behaviour.

8 Likes
8

This is 100% not the case or motivation. However we have to be able to update the code as needed so we can continue to add features and improve the learning experience.

The goal of this post is to provide script authors the leadtime to make the amendments needed and I will help wherever I can.

31 Likes
9

Thank you, this is much appreciated! :+1:

9 Likes
10

Thank you for your continuously hardworking. I like most of the changes so far. I just found the empty space around the Kanji and the meaning in the review/lesson card a bit to excessive to my taste, as well the ‘almost’ lack of space in the bottom of the review/lesson/extra study card (where the list of kanjis/words/radical with the quiz word resides) not at my liking. But those are of course personal preferences. :smiley:

As for the Scripts creators, looking forward to your guys wonderful work one more time, as those scripts are helping immensely on my journey (specially the self-study one!!!)

5 Likes
11

Maybe I am misunderstanding, but migrating things to SSR isn’t exactly empowering userscripts?

12

I am not sure I follow. SSR pages should be just as easy if not easier in some cases to manipulate (as the underly JS isn’t fighting the userscript). I think this is just conjecture. Do you have a specific concern that I could help you with?

9 Likes
13

Serverside rendering should mean, that there will be less cases, where you recieve an unfinished web page and need to manually set up waits for the content you need. React is notoriously terrible to write userscripts for.

9 Likes
14

This sounds interesting. :thinking:

TIL there was a “skip lesson” button.

Interesting. I never paid any attention whatsoever to those pages, but I know of others that used the Review Summary as an opportunity to study and better understand the items they missed during the session (I do that as I go along rather than on the summary page).

w00t!

5 Likes
15

This change made me realize that the only cue I use to determine if WK wants the reading or the meaning is the placeholder text in the input box. In the preview, it’s “Your Response” for meaning and reading questions, and it really throws me off.

@tofugu-scott Could you change the placeholder to “答え” for reading questions, or was this change an intentional decision?

EDIT: Also, I like that you finally added the possibility to add user synonyms during lessons. That’s one less userscript I have to update!

16 Likes
16

This was an oversight on my behalf. Thanks for the heads up. I have fixed this and has been updated in the preview app.

This became easy once the code was consolidated… and you are welcome :smile:

23 Likes
17

Another thing I noticed is that I cannot continue through the lessons with the Enter key anymore. Not really a problem since I can just use → instead, but I wanted to let you know in case this was also just an oversight.

3 Likes
18

This was intentional. I removed the entry from the shortcuts menu too (you can use ? to open the shortcut menu now).

My rationale is that it interferes with what you would expect if you used the tab key to switch focused elements and then the enter key to activate the focused element. I felt it was more accessible to not override the expected browser behaviour.

7 Likes
19

I was already expecting that this might have been the reason for this change.

Oh, there is a shortcut now for opening all collapsed sections – that’s another userscript off the list! :crabigator: (or maybe not, depending on if the shortcut will also target collapsed sections that were added by userscripts)

3 Likes
20

So far, I’m liking what I see.

I suspect that you’re already well aware, but it’s still impossible for those wanting “dark mode” (or other themes) not to create very brittle CSS that’s tightly coupled to the current implementation, though.

You have CSS rules like this all over the place:

.quiz-input__question-type-container[data-question-type=meaning] {
    background-image: linear-gradient(#EEE, #E1E1E1);
    border-top: 1px solid #d5d5d5;
    border-bottom: 1px solid #c8c8c8;
    color: #555;
    text-shadow: 0 1px 0 #fff;
}

You would make at least a few of us incredibly happy if you someday replace all those explicit colors everywhere with custom properties (“CSS variables”). It’s a big ask, but it will also make your own code easier to maintain.

7 Likes