[UserScript] Advanced Context Sentence

WaniKani API And Third-Party Apps
#1

Advanced Context Sentence

We all know Wanikani’s weakness, context sentences. I bet many of us just skip them entirely most of the time. This script enhances the context sentences by introducing two features:

  1. Recognizable Kanji Highlighting
    Highlighting the kanji you already learned and should be able to recognize. this will encourage you to read the context sentence just to try and remember all the kanji you learned in it.
    Forgot the kanji? just click on it and you will be taken to the kanji page and review it again if you must. Don’t worry this won’t affect the SRS system, if you don’t use your knowledge to read until you burn the item then you will keep forgetting to no end. Reading is the best way to reinforce your memory

  2. Sentence Audio
    Adds an audio button that uses Google Translator to read the sentence for you, thanks to @Kumirei for teaching me how to do it

  3. Kanji Information
    Hovering on kanji will reveal some information about the kanji like the level, reading, and meaning. Additionally, using @Kumirei’s Open Framework, Advanced Context Sentence can now show you JLPT level, Joyo level, and frequency of that kanji
    Note: you will only get information if the kanji is on Wanikani, if not then the link will take you to the kanji page in Jisho.org and you can get all the information you need from there.

Dependencies

  • Wanikani Open Framework
    You can still use Advanced Context Sentence normally without Wanikani Open Framework, but you’ll miss two features: change the colour of highlights, and the tooltip that shows you information about the kanji. Default highlights and Audio should work just fine

  • Wanikani Open Framework JLPT, Joyo, and Frequency filters
    You don’t have to install this script either, but if you do you will get three more additioanl informations when hovering over a kanji: JLPT level, Joyo level, and Frequencey. as usual, make sure Advanced Context Sentence runs after this script in order for these information to appear

Screenshots

Wanikani Open Framework not installed

12%20AM
Screen Shot 1440-06-10 at 10.00.12 AM.png2444×602 201 KB

Wanikani Open Framework installed, but with no JLPT, Joyo, and Frequency Filters

31%20AM
Screen Shot 1440-06-10 at 9.59.31 AM.png2434×608 207 KB

Wanikani open Framework installed, and JLPT, Joyo, and Frequency installed too

01%20AM
Screen Shot 1440-06-10 at 9.59.01 AM.png2488×586 210 KB

On Dark Mood: WaniKani Breeze Dark

54%20AM
Screen Shot 1440-06-10 at 9.59.54 AM.png2356×654 101 KB

Instillation

Hope you enjoy it!

Babbling

I spent a lot of time thinking of making a script but I had nothing in mind. As a full time payed Javascript developer I was ashamed that I use this website without taking the time to contribute something for the community. I read What do you want now? (Request extensions here) and then this comment by @someone972 took all my interest.
To be honest I didn’t look for any script that does this already, I just don’t want to know all I want is to make something. If there is any other script please feel free to link it for me and I will mention it, I will delete the script if there is another that does exactly what Advanced Context Sentence does.
Finally, should I mention that this is my first post ever? yeah… hi i guess

Changelog
  • Version 1.01
    Fix an audio bug on Safari, thanks to @Oshin for the bug report
  • Version 1.02
    Fix the loading screen slowness, this one “buged” me a lot
  • Version 1.10
    Feature: Thanks to @Kumirei guidance, the script now uses Google Translator voice! a much cleaner and consistent way than Speech Synthesis Utterance
    Also, the script now highlights any ungurued kanji with gray color
  • Version 1.11
    Fix: If Wanikani Open Framework is not installed, highlight all kanji is if they were all already learned. this is neccessary because in this case the highlighting means: “hey look this is a kanji” instead of “hey look this is a kanji you should know”
  • Version 1.2
    Feature: Now you can change the color of highlights from the new settings dialog, the settings can only be used if Wanikani Open Framework is installed
  • Version 1.3
    Feature: Now a tooltip will show up when you hover over a kanji showing you more information!
    Fix: thanks to @Belerith, a bug where the setting icon is duplicated with every lesson learned is now fixed
    Fix: thanks to @Oshin, a bug where playing the audio for the word reading would play all sentences’ audio is now fixed
  • Version 1.31
    Fix: Safari won’t play the audio for a second time on Reviews and Lessons
  • Version 1.32
    Fix: Prevent underlines under the kanji, that used to confuse the users since it can change the whole kanji
    Fix: Make the script compatible with WaniKani Breeze Dark, thanks to @Poikkax for pointing out this issue
    Fix: Now if you click the audio button a second time while playing, it will stop the audio as expected
    Improvement: to prevent unexpected behaviors, now this script doesn’t include Wanikani Open Framework JLPT, Joyo, and Frequency filters, you will have to download it yourself if you want these information and you have to make sure it runs before Advanced Context Sentence.
  • Version 1.34
    As requested by @AnimeCanuck, you can now change which SRS level should the script consider it ‘recognizable’. default to Guru
    Also, it’s now compatible with the new version of JLPT, Joyo, and Frequency Filters version 0.1.4
    *Version 1.40
    Enhance the tooltip, you can now disable it, change it’s position, and set a delay before showing it
84 Likes
Context sentences - why?
Frustrated
Why don't new kanji in the context Ss have kana to show their readings?
Wanikani Open Framework [developer thread]
Do you read the example sentences?
Any words of wisdom for a recently subbed guy?
What do you want now? (Request extensions here)
Sentence Audio
[Userscript] Wanikani ContextFurigana
Immersion Alongside WK
What do you want now? (Request extensions here)
Let's persuade Wanikani to add more levels
Additional audio updates
Knowing how Wanikani works is making everything way more stressful now
Bothering me for Years
Can we add a furigana toggle to the sample sentence?
Idea for example sentences
Level 3 hump help required
Suggestions for Example Sentences
If you could change anything about Wanikani, what would it be?
Why is WaniKani worth using beyond lvl 15-20?
Context Sentences - Audio
Can we get furigana for context sentences please?
#2

You should post this in the Wanikani Wednesday Competition. This is amazing! :heart_eyes:

3 Likes
#3

glad you liked it! Wanikani Wednesday Competition? sounds interesting

2 Likes
#4

I do in fact do this. Glance at sentence: if too weird skip, if too long skip, if too hard skip.

8 Likes
#5

Wow! Thank you for this!! I love it :smiling_face_with_three_hearts: I’ve tested it on Safari (the audio doesn’t work, I guess it’s the move on type just like IE then I presume?) and Chrome (both highlight and audio works well) ~ Mojave.

I put it on The New And Improved List Of API and Third Party Apps under Dashboard section, because I can see this script’s effect on lesson and review and kanji/vocab page. For others who can edit the wiki, feel free to edit it to make it better, like placing it to a better more specific section, maybe?

Yes, I think you should. The link is here.

3 Likes
#6

Thank you!
Don’t worry Safari supports Speech Synthesis Utterance, it’s my fault for not checking what language type does each browser support. I already fixed the issue and will update the script once i fully test it again. I will also restrict it to /review/session, /lesson/session and /vocabulary pages, can’t believe i forgot to do it from the beginning.
I will definitely join the competition too!

2 Likes
#7

I do that too! Actually, one drawback of this script is that once you know a sentence has a kanji you never learned you’re more likely to skip it hahaha

2 Likes
#8

I made a script that added audio to example sentences on Bunpro, using Google Translate TTS. I believe there was a trick to it.

This link can convert any Japanese sentence on demand.

https://translate.google.com/translate_tts?ie=UTF-8&client=tw-ob&q=<JAPANESE SENTENCE HERE>&tl=ja&total=1&idx=0?

Not sure if that’s the same quality as their cloud service though

5 Likes
#9

For me it would rather be a challenge to try and find it actually :blush: So this is perfect.

#10

THIS IS AWESOME! Can’t believe we get to use that for free, I kinda feel guilty about it. thanks for the guidance

I believe it’s the same, anyway it’s far more better than html 5 text to speech, the only drawback is that we can’t guarantee this trick will work all the time.

if only more people follow your steps…

1 Like
#11

this script a kind of encourages user to read sentence :stuck_out_tongue:
nice work sir.

3 Likes
#12

Fantastic! Thanks a lot!

1 Like
#13

I really don’t understand why you made a script for example sentences in Bunpro, they already have audio.
anyway can you please share your script with me? i tired fetching using the url but with no luck, looks like it only works from the browser not the js code. 教えて下さい、クミレイ先輩！

#14

Thank you for your hard work! We will actually look at those sentences now! :smiling_face_with_three_hearts:
I couldn’t get the audio to work on Opera though, I am usually using that one.

1 Like
#15

They don’t have it for all sentences yet, and when I made it they didn’t have audio for many.

Oh, looks like I forgot part of the trick. Sorry, it was a long time ago and I didn’t really understand the trick to it at the time either.

// In order to avoid getting 404 for the audio you need to remove the referrer
var remRef = document.createElement('meta');
remRef.name = 'referrer';
remRef.content = 'no-referrer';
document.querySelector('head').append(remRef);

// The way I did it was create audio and source elements containing the link
var audio = '<audio class="TTS" controls>'+
            '    <source src="https://translate.google.com/translate_tts?ie=UTF-8&client=tw-ob&tl=ja&total=1&idx=0&q='+sentence+'" type="audio/mpeg">'+
            '</audio>'

// Then I just inserted the element into the page
$(elem).after(audio);
2 Likes
#16

Finally got to try this out, I love it! Does exactly what I wanted when I suggested the extension and the audio is a nice addition. I’m going to get a lot of use out of this :grin:

I did have to make one change to the audio section; in the script the rate is set to 11, but on Firefox at least the default rate should be 1 (the audio was playing really fast). After doing that, my home computer was able to play the audio just fine. For some reason my computer at work isn’t installing the speech synthesizers from the Japanese language pack, and since Firefox uses the device’s speech synth nothing would play. So potentially an improvement might be to check the window.speechSynthesis.getVoices() for a voice with lang ‘ja-JP’ and give some form of alert if it doesn’t exist? Note that you may have to call getVoices twice, it looks like the initial call returns an empty list for some reason. Chrome looks like it has a Japanese voice synth built in so audio shouldn’t be a problem for that browser.

1 Like
#17

NIce script!

It seems to have a conflict with the “Markdown Notes” script (or maybe that was only because I had a modified version of that script, who knows) so I disabled the markdown script.

One thing I found confusing was the color coding: based on WaniKani standards I initially thought that pink = kanji in Apprentice state and purple = kanji in Guru state. I know that this is explained in your description but I would be willing to bet that I’m not the only user who didn’t read the whole thing before installing the script :wink:

But those were super minor issues, all in all it seems super helpful. Thank you!

1 Like
#18

Thanks! I’m going to implement next then, I’m planing to make it the default and fall back to the browser’s audio in case of any error ( which will definitely happen if google changed a single thing in the url )

Glad you liked it, for some reason i can’t install Opera on my Mac to test it for you. but I’m planing on using google translator’s voice any way and I hope it will somehow fix it for you

what a detailed review. strange, I use firefox as my default browser and found that rate 11 is the best and most natural. maybe it’s different from machine to machine or version to version? anyway, as I told Floregaku, I’m planing to use google translator’s voice. it’s much better and browser-independent

it would be hard to test compatibilities with other scripts, but I will have a look at this particular one for you since you brought it up.
Edit: I tested Markdown Notes but didn’t encounter any conflict, is it this script or am i wrong?

to be honest I’m not proud of the color selection at all, in fact i hate it. but what color would you give to a locked kanji? tell me what you think

1 Like
#19

Maybe I was using an outdated copy then because that is the script. I’m really sorry for wasting your time… :confused:But thanks a lot for checking!

Since they are not active yet, I would have expected them to be gray. Usually I would say bold and gray but that might not work well with kanji (never tried it and right now I’m on mobile otherwise I‘d try it now). The special highlighting for „hey, you are supposed to know this one!“ is really helpful but it loses a lot of its „specialness“ since purple and pink are so similar (both in hue and expected meaning). That‘s my opinion at least. Colors… almost everyone has an opinion :slightly_smiling_face:

#20

Don’t be, i did it during my job so you wasted my employer’s time not mine.

I will try gray and see

1 Like