Version 1.5:
Now supporting the accordion UI in the lesson quiz
A while ago, WK updated the lesson quiz again – this time they changed the item info display into an accordion. It took me a while to decide where the sections should be injected: should append() insert the section into an existing collapsible section, or should it create a new collapsible section? In the end, I decided to follow the initially intended semantics of my interface so that append() creates a new, more or less independent section (therefore a new collapsible section), while appendSubsection() or appendSideInfo() extends one of the existing sections (therefore injected into an existing collapsible section).
In case the number of collapsed sections gets too high and it becomes annoying clicking each one to open them, it is possible to use my Spacebar Expand All script to “restore” the old spacebar functionality of showing the entire info section.
The main sections are injected once the user opens the item info. The subsections and side info within vanilla WK sections are injected once the user opens the corresponding WK section.
An interesting detail I noticed while working on this: Until now, WK has put the side info Word Type/Parts of Speech into the Meaning section, but in the new lesson quiz layout, this side info is in the Context section.
IMPORTANT: change of behavior
I had to slightly change the interface provided by WK Item Info Injector to make it work with the accordion UI: In addition to the notify() action, there is now a notifyWhenVisible() action. While notify() calls the callback function as soon as the user shows the item info (so that the callback function can add more collapsible sections if needed), notifyWhenVisible() calls the callback function when the targeted section is expanded (so that the callback function can modify native WK information; e.g. Advanced Context Sentence 2 that modifies the WK context sentences).
Also, calling injector.appendSubsection() within the callback when the targeted section is collapsed warns in the console that the subsection could not be injected. But the subsection will be cached and injected once the targeted section gets expanded, so it should still work despite the warning. Maybe I will remove the warning in a future version. However, injector.appendSubsection(h, b, {injectImmediately: true}) will also not inject immediately, so use notifyWhenVisible() if you need injectImmediately.
Greasemonkey compatibility
Greasemonkey does not automatically provide access to variables stored in the page’s window object – you would have to explicitly use unsafeWindow.WaniKani.wanikani_compatibility_mode to check if the page is in script compatibility mode, or unsafeWindow.$.jStorage to access the jStorage loaded by WaniKani. Instead of using unsafeWindow or loading a new instance of jStorage into the script context, I decided to instead try out the window.eval() method described in the Greasemonkey wiki.
// @require https://greasyfork.org/scripts/430565-wanikani-item-info-injector/code/WaniKani%20Item%20Info%20Injector.user.js?version=1057854