Script for blurring translations of example sentences

[Benedict_Ide]

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:

[sansarret]

Seems like similar functionality to this one:

[Userscript]: Hide Context Sentence Translation

Hide Context Sentence Translation [image] In response to a request thread, here is a userscript for hiding the English translation of Context Sentences on the Lesson, Review, and Item pages. The translation is hidden under a gray box, and is revealed when you hover your cursor over the box. https://greasyfork.org/en/scripts/14844-wanikani-hide-context-sentence

[Benedict_Ide]

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.

[sansarret]

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

The New And Improved List Of API and Third Party Apps

This is a wiki post, please feel free to edit it and add to it! Requests Userscripts Here How to use userscripts

Table of contents

<a href="#heading--Userscripts">Userscripts</a> <a href="#heading--DashboardScripts">Dashboard</a> <a href="#heading--ReviewsLessonsScripts">Reviews & Lessons</a> <a href="#heading--ReviewsScripts">Reviews</a> <a href="#heading--LessonsScripts">Lessons…

[emptyset]

@Benedict_Ide

// ==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);
})();

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