[Userscript] Anime Context Sentences 2

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

So, my changes to the script were getting to be rather significant, and the thread for original author’s version was getting hard to follow because the author hasn’t updated it in quite some time. I had been updating a modified version in that thread, but it was getting lost in the mix. Therefore, I’ve decided to make a different thread and upload my changed version to greasyfork. I might end up changing the name of this in the future to match the fact that it can show more than just anime sentences now.

tl;dr for the what this does (if you haven’t checked out the original version):
Adds a section for vocabulary items that includes a list of context sentences from other sources (primarily anime) along with an audio snippet of the dialogue.


Available via Greasy Fork at Wanikani Anime Sentences 2


The changes I made compared to the original script include:

  • Reimplementing a settings icon (:gear:)
  • Reimplementing a speaker icon (:speaker:) [I think the forum renders these differently…]
    • Moved the icon to after the title of the source so as to not take up as much space
    • Made the icon change to :loud_sound: for the active playing selection and reduced the other options’ opacity
  • Stopping of the currently playing audio when clicking again on the selection
    • When selecting a different entry, will also stop the previous audio beforehand
  • Clicking on elements that are set to toggle their hidden state “On Click” no longer triggers the audio to play
  • Coloring of the text of the vocabulary word in the example sentence
  • Adding at least 10 additional anime entries, and fixing a few of the existing entries’ names to match the results
  • New search categories, including “dramas”, “games”, “literature”, and “news”
    • All entries in each of the new categories disabled by default
    • Hint: After clicking inside one of the boxes, use Ctrl+A to select all, or Shift+[↑/↓/Home/End/PgUp/PgDn] to select consecutive entries
  • Settings:
    • Redesigned the settings with separate pages for the different sections
    • General:
      • Real-time settings previews for all of the settings on this page
      • Option to resize the height of the container box
      • Option to set a limit for how many examples are displayed
      • Option to adjust audio playback volume (Default: 100%)
      • Options to configure retrying to fetch the API when no results are found
    • Sorting:
      • Optional secondary sorting
      • Additional sorting methods:
        • Title of source (i.e., ignores the categories and sorts all the titles alphabetically)
        • Position of keyword in sentence (when using this as a secondary sorting method, it’s more noticeable when not using a primary sorting method based on sentence length)
    • Filter:
      • “Exact Search” option
      • New anime entries and additional categories as mentioned above
  • Updating the referenced version of WaniKani Item Info Injector
  • Moved the content to the bottom of the Context section instead of being a separate section

Version Changelog (diffs available via Greasy Fork history if desired)
  • 1.1.4: Initial version with changes to fix audio, add speaker icon, and add gear icon.
  • 1.2.0: Modified version with an updated anime list, more settings for filtering, and coloring of the keyword within the example text.
  • 1.2.1: Made a bit of a better system for coloring the keywords (previously it would fail when using furigana in various scenarios).
  • 1.2.2: Greatly improved the system for coloring the keywords (will now successfully color the keywords in sentences that have random spaces in the middle of a keyword, and it will now properly match longer vocab with mixed okurigana).
  • 1.2.3: Fixed small oversight in the segment parser for the colorizer in 1.1.3.4.
  • 1.2.4: No longer needlessly queries the API when saving of the settings results in no changes necessary to re-query the API (also similarly won’t recreate the list if no changes have been made). Made a bunch of other code simplifications/optimizations.
  • 1.2.5: Added new search categories [dramas, games, literature, news] (all disabled by default) and added many entries for them (news and literature are shown with Japanese titles in the settings; hint: ctrl+a works to select all once a single entry has been selected). Added Mob Psycho 100 to the anime list (despite it being in the “Drama” category on the site for some reason). Changed the order of the selection boxes and resized a few of them. Fixed onclick for the speaker icon. Now allows changing the Example Limit to 0, which makes it return as many results as possible. Improved some array lookups by using hashmaps instead. Fixed and improved the checks for whether the filter lists have been updated or not and fixed some issues that were present when recreating the list; changing the filters now updates the list extremely fast. Most things involving the settings are being handled in a more graceful manner now.
  • 1.2.6: Added a setting to configure the max height of the container box. Moved “Only Yesterday” to Ghibli films as was mentioned earlier in the thread. Changed the scriptId referenced by WaniKani Open Framework to be unique to this version of the script (will consequently “reset” settings to default).
  • 1.2.7: Added regex.lastIndex=0 before each regex.test(string) usage to prevent inconsistent behavior when using the global regex flag in Javascript; this fixes an issue that would occasionally prevent a keyword from getting identified to be colored.
  • 1.2.8: Updated to latest version of WaniKani Info Injector. Updated the matching logic for the colorizer to work in most or all circumstances (in particular, should now also work when Exact Search is unchecked and a match is found with the kana/kanji equivalent of the word). Added more description to the hover text for Exact Search. Now does no sorting on the original query, so results will be cached unsorted and therefore adjusting the settings will give the properly sorted value every time. No longer needlessly recreates the list when switching the settings for Example Limit/Show Japanese/Show Furigana/Show English, instead relying on CSS modifications to handle it. Added a ton of more code optimizations.
  • 1.2.9: Fixed the CSS selector for when Example Limit is set to 0. Reverted to the previous method of audio element configuration, which was better able to handle clicking on different elements while one is already playing. Removed some unused functions.
  • 1.2.10: CSS selector now works as described when changing the Example Limit to 0. Fixed some async/await usage incongruencies.
  • 1.2.11: Added a range slider setting to adjust the audio playback volume and converted the playback speed number box into a slider as well. Also made it so that changing these values does not need to re-render the html. (Minimum acceptable playback speed is now expanded to be down to 10%).
  • 1.2.12: Updated the number for playback speed to match the description.
  • 1.2.13: Can now change the following settings and preview their effect in real-time (clicking cancel or otherwise closing the window without saving will revert the changes): Box Height, Example Limit, Playback Speed, Playback Volume, Show Japanese, Show Furigana, Show English; if the input is a text box, you must click outside of the input box in order to see the changes. Fixed a few other issues related to modifying those settings.
  • 1.3.0: Moved the sorting order to its own separate section in the settings. Made it clearer that all of the settings in General can be previewed in real-time. Inlined some simple multi-line code blocks, removed some useless code statements and commented-out code. Organized the functions a little bit.
  • 1.3.1: Readded the descriptive text that shows when no results were found or when they were all filtered out by the user’s settings.
  • 2.0.0: Redesigned the settings into separate pages. Added a secondary sorting method. Introduced a delayed retry for fetching the results when none were found (since the API can be a bit finicky sometimes). Organized a large amount of the code.
  • 2.0.1: Moved Mob Psycho 100 back to the drama list (just found out that it’s referring to the live action). Sorry for how this will affect the settings for any anime you’ve disabled that comes alphabetically after that. If I redesign the settings, I’ll make it so additions and removals can be less destructive in nature. Also, fixed some of the userscript documentation.
  • 2.0.2: Added configurable settings for the retry count and retry delay. Updated the functions used in onSettingsClosed to be more consistent. Grouped sections of the settings to be easier to understand their functions and added some more descriptions to them.
  • 2.0.3: Fixed a CSS styling oversight that could sometimes result in the span element being wider than the parent div and therefore causing a horizontal scrollbar to appear and take up space.
  • 2.0.4: Fixed the function call for creating the onclick listener for the English text element when first creating the elements.
  • 2.0.5: Moved the prior CSS fix to the proper selector.
  • 2.0.6: Added flex:auto to the img selector so that even when no image is found, it will pad the area to create a consistent-looking table.
  • 2.0.7: Better fix for the padding when some images are nonexistent. Also sorted some of the CSS rules and added additional class selectors when applicable.
  • 2.1.0: Fixed some possible issues with exampleLimit not being immediately recognized as a number. Generalized the CSS selectors using a variable name defined at the start. Added some fixes for edge-case scenarios that could still cause the horizontal slider to appear. Made a few other small optimizations.
  • 2.1.1: Made a number of small optimizations (mostly with the CSS selectors as well as string parsing).
  • 2.2.0: Moved all of the content to be a subsection at the bottom of the Context section instead of being its own separate section. Added an option to sort by position in sentence (but it doesn’t function properly as of this update).
  • 2.2.1: Implemented the position-of-keyword sort method that was accidentally prematurely introduced in the previous update.
  • 2.3.1: Completely Rewrote the Furigana class to be more catered to the needs of the script, resulting in better ability to highlight the matching keyword(s) within the sentences. Greatly improved the clarity of the way the CSS classlists are being updated. Added an element that includes the text without furigana, which condenses unnecessary padding and spaces within and around the text when showFurigana is set to ‘never’. Fixed some small oversights from the original script. Modified some usages to be more consistent with the esversion style.
9 Likes

Thanks for your work on this! Do you have any recommendations for one or two of the drama/news sources? I don’t think I’ve heard of any of them before…

1 Like

Honestly, I am not familiar with them either, but I noticed them when looking into the results from Immersion Kit’s website, so I figured it would be remiss of me to not include them. There are comparatively vastly fewer entries in the database that are non-anime, so you’ll probably be fine enabling as many as you want. If you end up with too many you don’t want, it’s pretty simple to disable them as you go.
I will say, at least though, that the few examples I’ve seen from Legal High have been pretty intense, which could easily be a good thing or a bad thing, depending on your goal.

1 Like

Thank you VERY much for this! I find the context sentences to be super useful :grin:

1 Like

Awesome script, has been very helpful for recognition outside of WK. Is there any chance of adding a reveal functionality for reviews? It would be great to see a random sentence either during the reviews or after answering. Similar to these scripts: