WaniKani SFW - Userscript Extension


#1

Hi all,

Lately i didn’t have time to follow the forums, because i am working a lot, and exactly because of that i decided that i should do my reviews at work too (sorry boss).

This user script will hide most of important style in Reviews page (will do for Lessons soon) , so you can almost hide your screen, that probably people far away will never notice it.

It works for Chrome and Firefox (for Firefox you can go further, see below).

You can do your reviews in a 350px x 200px screen like these:



Notice that if you answer correctly it will display a light green field around your answer (second image)
and a light red field for wrong ones (third image)

If you also use my old WaniKani Review Order Userscript, it will also resize it to not overlap the question.


[Firefox ONLY]
With some firefox extensions its possible to hide everything else and be like this:



Extensions used:
https://addons.mozilla.org/pt-BR/firefox/addon/hide-caption-titlebar-plus-sma/

https://addons.mozilla.org/pt-br/firefox/addon/hide-navbar/

https://addons.mozilla.org/en-US/firefox/addon/hide-tab-bar-with-one-tab/

[/Firefox ONLY]



Feedbacks are appreciated. :slight_smile:

Link: https://greasyfork.org/scripts/9698-wanikani-sfw

-------------

Updates:

Version 0.02 (11/05/2015):

- Lessons screen

Version 0.01 (05/05/2015):

- Works for Reviews only, soon will make one for Lessons
- You need to resize your browser screen to about 350px x 200px to be effective

NSFW mode?
Getting caught at work while doing reviews
Feature Request - "SFW" mode
Quiet Mode: Don't want to draw attention to yourself?
The New And Improved List Of API and Third Party Apps
#2

That’s nice, but I would call it WaniKani SFW instead!
EDIT: Okay, changed! :smiley:


#3
Doublevil said... That's nice, but I would call it WaniKani SFW instead!
 lol, agreed.

changed :)

#4

I like the extension since I take occasional breaks at work to bang through a few cards.  The coloring of WK is a bit too eye-catching to passers by, so I like that I can be a bit more discreet.  


I found the Kanji to be quite small when this was running, so I made a small tweak to up-size only the “character”:

    ('#progress-bar, #question-type, #answer-form, #reviews, #additional-content ul li span').css(obj);</div><div>&nbsp; &nbsp;&nbsp;</div><div>&nbsp; &nbsp; <br>&nbsp; &nbsp; &nbsp;var obj3 = {'text-shadow':'none','background-color':bg,'background-image':'none','background-repeat':'','font-size':'3em','line-height':'1.5em','color':fontColor}; &nbsp; &nbsp;</div><div>&nbsp; &nbsp; <br>&nbsp; &nbsp;&nbsp;(’#character’).css(obj3);


I never touched scripting before today, so perhaps there is a better or nicer way to do this.  I’m more of an embedded firmware kind of guy…

#5

Great idea, definitely going to be of use for me :slight_smile:


#6
lsh3rd said... I like the extension since I take occasional breaks at work to bang through a few cards.  The coloring of WK is a bit too eye-catching to passers by, so I like that I can be a bit more discreet.  


I found the Kanji to be quite small when this was running, so I made a small tweak to up-size only the "character":

    $('#progress-bar, #question-type, #answer-form, #reviews, #additional-content ul li span').css(obj);         
     var obj3 = {'text-shadow':'none','background-color':bg,'background-image':'none','background-repeat':'','font-size':'3em','line-height':'1.5em','color':fontColor};        
    $('#character').css(obj3);

I never touched scripting before today, so perhaps there is a better or nicer way to do this.  I'm more of an embedded firmware kind of guy...
 It's correct!

however you can keep applying 'obj' in #character
and create a obj3 only with your specific changes:

var obj3 = {'font-size':'3em'}
$('#character').css(obj3);

Please feel free to adapt the script and colors to your workspace.
As most of my backgrounds are gray, it suits well.

You can check the colors code here:
http://html-color-codes.info/

#7

Haha, nice one!


#8

This is a lifesaver.

Thanks!


#9
alucardeck said...
lsh3rd said... I like the extension since I take occasional breaks at work to bang through a few cards.  The coloring of WK is a bit too eye-catching to passers by, so I like that I can be a bit more discreet.  


I found the Kanji to be quite small when this was running, so I made a small tweak to up-size only the "character":

    $('#progress-bar, #question-type, #answer-form, #reviews, #additional-content ul li span').css(obj);         
     var obj3 = {'text-shadow':'none','background-color':bg,'background-image':'none','background-repeat':'','font-size':'3em','line-height':'1.5em','color':fontColor};        
    $('#character').css(obj3);

I never touched scripting before today, so perhaps there is a better or nicer way to do this.  I'm more of an embedded firmware kind of guy...
 It's correct!

however you can keep applying 'obj' in #character
and create a obj3 only with your specific changes:

var obj3 = {'font-size':'3em'}
$('#character').css(obj3);

Please feel free to adapt the script and colors to your workspace.
As most of my backgrounds are gray, it suits well.

You can check the colors code here:
http://html-color-codes.info/
 
I know this thread is old, but I think this is a super useful add-on, but am having trouble with the above additional code.

I want to to exactly that, increase the size of the Kanji being displayed, but have tried putting the code in the script in multiple locations with no luck. Can anyone help me?

Thanks in advance!

#10

too bad that my working pc is blocked to tampermonkey, so i cant use and install any script

:’(

is there another way to use the scripts?
it would be a lifesaver


#11

https://chrome.google.com/webstore/detail/open-as-popup/ncppfjladdkdaemaghochfikpmghbcpc?utm_source=…

A similar Chrome extension to the Firefox one mentioned.


#12

Is there an extension to make WK more flashy and eye-catching? I like when the other teachers at school notice I’m studying kanji =)


#13

That sucks! You can’t even instll Chrome extensions? Strict rules! :frowning:

I can install it fine, but can’t work out where to put the text to make the size more readable for the Kanji.


#14
travisler said...
alucardeck said...
lsh3rd said... I like the extension since I take occasional breaks at work to bang through a few cards.  The coloring of WK is a bit too eye-catching to passers by, so I like that I can be a bit more discreet.  


I found the Kanji to be quite small when this was running, so I made a small tweak to up-size only the "character":

    $('#progress-bar, #question-type, #answer-form, #reviews, #additional-content ul li span').css(obj);         
     var obj3 = {'text-shadow':'none','background-color':bg,'background-image':'none','background-repeat':'','font-size':'3em','line-height':'1.5em','color':fontColor};        
    $('#character').css(obj3);

I never touched scripting before today, so perhaps there is a better or nicer way to do this.  I'm more of an embedded firmware kind of guy...
 It's correct!

however you can keep applying 'obj' in #character
and create a obj3 only with your specific changes:

var obj3 = {'font-size':'3em'}
$('#character').css(obj3);

Please feel free to adapt the script and colors to your workspace.
As most of my backgrounds are gray, it suits well.

You can check the colors code here:
http://html-color-codes.info/
 
I know this thread is old, but I think this is a super useful add-on, but am having trouble with the above additional code.

I want to to exactly that, increase the size of the Kanji being displayed, but have tried putting the code in the script in multiple locations with no luck. Can anyone help me?

Thanks in advance!
 I just noticed that you posted this... I'll post the complete revised script - I think the source changed a bit from when I modified it at first, I had to play with this again to make it work.  If you just add this script, you'll be good to go:  (Edit: Oh, this really got mangled.  If you can't read it, go to my profile to grab my e-mail address and I'll just e-mail it)
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
// ==UserScript==
// @name          WaniKani SFW
// @namespace     https://www.wanikani.com
// @description   WaniKani SFW by Alucardeck
// @version 0.02
// @include       https://www.wanikani.com/review/session
// @include       http://www.wanikani.com/review/session
// @include       https://www.wanikani.com/lesson/session
// @include       http://www.wanikani.com/lesson/session
// @grant       none
// ==/UserScript==

console.log('SFW Initiated');

function init(){
    var bg = '#EEE';
    var bgcorrect = '#E0EAE0';
    var bgincorrect = '#EAE0E0';
    var fontColor = '#A0A0A0';
    
    $('#stats').css({'font-size':'9px','line-height':'1em','color':fontColor,'text-shadow':'none'});
    $('#loading, #loading-screen').css({'background-image':'none'});

    var fullChange = {'text-shadow':'none','background-color':bg,'background-image':'none','background-repeat':'','font-size':'1em','line-height':'1.5em','color':fontColor};
    var bgChange = {'background-color':bg,'background-image':'linear-gradient(to bottom, '+bg+', '+bg+')','background-repeat':''};
    var fontChange = {'font-size': '1em', 'line-height': '1em'};
    
    
    //review
    $('#progress-bar, #question-type, #answer-form, #reviews, #additional-content ul li span').css(fullChange);
    var obj3 = {'text-shadow':'none','background-color':bg,'background-image':'none','background-repeat':'','font-size':'3em','line-height':'1.5em','color':fontColor};
    $('#character').css(obj3);
    
    $('#answer-form form fieldset input[type=text], #answer-form form fieldset button, input#user-response').css(bgChange);
    
    
    var style = $('<style>.correct {background-color: '+bgcorrect+'} .incorrect {background-color: '+bgincorrect+'} </style>');
    $('html > head').append(style);
    
    
    //lesson
    $('#main-info, #meaning, #lesson #supplement-nav, #supplement-info').css(fullChange);
    $('#main-info #character, #meaning, #lesson #supplement-info .col1, #lesson #supplement-info .col2').css(fontChange);
    
    var style2 = $('<style>.kanji, .vocabulary, .radical {background-color: '+bg+'} </style>');
    $('html > head').append(style2);
}

init();
console.log('SFW End');

#15

I’m desperate for the enlarged font too … not having any luck with the changes above. Are you able to update on Greasy Fork?


#16

Ignore me … my bad … had to restart the browser first. All good.
Thanks for this extension.


#17

Hmm, this seems to break the answer override script.  Is there any “ignore” button script that works with the SFW script?


#18

Wow, thank you for bumping this. This looks super super useful! 


#19

Nope! I was simply using the wrong override script for greasemonkey/firefox. Got the right one and it works fine with the SFW script!