Script for blurring translations of example sentences

WaniKani Tips & Tricks
#1

When I’m doing new vocabulary lessons, I like to try to read the context sentences aloud to test my comprehension and practice any words that show up in them. Problem was, though, the English translations right below the sentences were hard to keep my eyes off, and I had a hard time reading the Japanese without, like, spoiling myself on the answer as I was reading.

So I put together this userscript to blur the English translations, and reveal them only when you hover over them. That way I can still check my work, but the answer isn’t just staring me in the face as I’m trying to read. I figured I should share this on the community page, in case anyone else has wanted the same thing.

// ==UserScript==
// @name         Wanikani Reibun Answer Spoiler
// @namespace    mailto:benedictide@gmail.com
// @version      0.1
// @description  Blurs the English translations of context sentences white so they can't be seen unless hovered over or highlighted.
// @author       Benedict Ide
// @match        https://www.wanikani.com/lesson/session
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    let css = '.context-sentence-group>p:nth-child(2){color: transparent;text-shadow: 0 0 9px rgba(0,0,0,0.5);border: 1px solid #666666;border-radius: 5px;padding: 2px !important;padding-left:10px !important}.context-sentence-group>p:nth-child(2):hover{color: black;text-shadow: none;}';
    let style = document.createElement('style');

    if (style.styleSheet) {
        style.styleSheet.cssText = css;
    } else {
        style.appendChild(document.createTextNode(css));
    }
    document.getElementsByTagName('head')[0].appendChild(style);
})();

I run it on Chrome through Tampermonkey, but if you have a userscript plugin for some other browser it should work more or less the same way- just have it run on https://www.wanikani.com/lesson/session, and it should put a box around the translations, like so:

spoiler_example

7 Likes
#2

Seems like similar functionality to this one:

5 Likes
#3

Oh, cool! I’m looking through Wanikani stuff on Greasy Fork now- I didn’t realize there were so many things like this already done. Thanks for bringing my attention to this- some of these look like they’ll be a big help.

1 Like
#4

Here is a master list (maybe not every script is there):

2 Likes
#5

Apologies for the necro, but this script appears to still work, and I found it useful. I use this extension to make most webpages dark, and rfindley’s script doesn’t play nicely with it (the “hidden” text is made visible by Dark Reader). This script properly hides/reveals the text for 3 of Dark Reader’s 4 theme generation modes, including the one I use most (Dynamic).