[Userscript] Wanikani Review SRS/Level Indicator

That was a script I wrote forever ago, when WK had it’s own forum instead of discord: [Userscript] WaniKani - Pokemon edition

4 Likes

That’s cool, I never saw that before

1 Like

Oh wow, this script is old with so little love. I just found this recently, and I absolutely love it!
I’m glad it is still functioning, cause I find knowing where it is to be a good indicator to know. I guess it tells me how deep to dig, short term or long term memory :rofl:

1 Like

Is there a way to “reverse” the level number and level progress indicators? Currently on hover it shows the level number, but I would like it to show the level number by default and on hover have the circles display. :slightly_smiling_face:

I know this thread is over a year since its last post. I love this little script, and hadn’t realized how much I’ve come to rely on it until I realized it’s no longer showing up in my reviews.

Is there anyone else in this thread, or reading this now, who has also noticed the indicators have disappeared from their review screens?

1 Like

Same issue here. Hopefully an alternative or fix is up in the works.

Really miss those little, colored dots.

1 Like

Works fine for me. What browser and script manager are you using?

Firefox (105.0.3, latest) and Tampermonkey (4.18.0).
Wanikani Open Framework also up-to-date at 1.0.59.

I tested this script with a similar setup and also did not notice any issue. Can you look through the suggested steps listed in this guide and see if any of those lead to more information for finding the problem?

2 Likes

Thanks for the link! Since the script is supposed to fire when I’m doing reviews, I’ll report back after I have some.

1 Like

So I’m not optimistic about this getting a fix, but just in case it helps someone else, here’s my bug report and steps I’ve taken.

bug report

Problem noticed around October 2, 2022.
  1. Browser: Firefox v105.0.3
  2. Userscript manager: Tampermonkey v4.18.0
  3. MacOS Monterey v12.6
4. screenshot of wrong behavior

5. screenshot of console errors

  1. expected to work on wanikani review sessions
  2. tried both compatibility mode on and off (when it was working, comp. mode was ON)
  3. Description of the problem: level indicators are not appearing in additional-options area
  4. What I’ve already tried: run through the items listed in Sinyaven’s debugging checklist. Problem still persists after all steps tried.
Debugging steps

a) Make sure that you are looking at the right place

  • review sessions → not appearing

b) Check if your userscript manager is executing the script

  • confirmed script is firing

c) Are there any dependencies missing?

  • no dependencies mentioned in installation instructions

d) Make sure you are using the latest version of the userscript

  • checked for updates: no updates found
  • uninstalled and re-installed script

e) Does the script compatibility mode affect the script?

  • Setting when noticed the problem: ON
  • changed compatibility mode to OFF. still experiencing problem

f) Does the problem persist if all other scripts are disabled?

  • all other scripts disabled. problem still persists

g) Does the problem persist if all other browser extensions are disabled?

  • all other browser extensions disabled. problem still persists

h) Check for any errors or warnings in the browser console

  • see screenshot in bug report item 5

i) Maybe your browser’s security settings are too strict for the userscript to work

  • lowered browser security settings. problem still persists
3 Likes

I just tested the script again and now the same thing is happening to me. For some reason, the button of this script gets immediately removed when starting the reviews (only in Firefox). Here is a fixed version that just re-adds the button:

// ==UserScript==
// @name        Wanikani Review SRS/Level Indicator
// @namespace   mempo
// @author      Mempo
// @description Show current SRS level and how many are left before levelling up
// @run-at      document-end
// @include     https://www.wanikani.com/review/session*
// @include     http://www.wanikani.com/review/session*
// @version     1.5
// @run-at      document-end
// @grant       none
// ==/UserScript==

console.log('/// start of WK Review SRS Indicator');


var css = 
    '#additional-content ul li {' +
    '    width: 16.5% !important' +
    '}                          ' +
    '.progress-circle {' +
    '    display: inline-block;     ' +
    '    width: 10px;  ' +
    '    height: 10px; ' +
    '    background-color: transparent;' +
    '    border: 5px solid transparent;' +
    '    border-radius: 50%; ' +
    '    margin: 0 2px; ' +
    '}                      ' +
    '.progress-apprentice { ' +
    '    border-color: #DD0093;' +
    '} ' +
    '.progress-guru { ' +
    '    border-color: #882D9E;' +
    '} ' +
    '.progress-master { ' +
    '    border-color: #294DDB;' +
    '} ' +
    '.progress-enlightened { ' +
    '    border-color: #0093DD;' +
    '} ' +
    '.progress-burned { ' +
    '    border-color: #434343;' +
    '} ' +
    //COMPLETED CIRCLES
    '.progress-apprentice-complete { ' +
    '    background-color: #DD0093;' +
    '} ' +
    '.progress-guru-complete { ' +
    '    background-color: #882D9E;' +
    '} ' +
    '.progress-master-complete { ' +
    '    background-color: #294DDB;' +
    '} ' +
    '.progress-enlightened-complete { ' +
    '    background-color: #0093DD;' +
    '} ' +
    '.progress-burned-complete { ' +
    '    background-color: #434343;' +
    '} ';

var cssDynamicWidth = 
    '#additional-content ul li {' +
    '    width: 12.4% !important' +
    '} ';

var progress_circle_apprentice = '<div id="progress-circle" class="progress-circle progress-apprentice"></div>';
var progress_circle_guru = '<div id="progress-circle" class="progress-circle progress-guru"></div>';
var progress_circle_master = '<div id="progress-circle" class="progress-circle progress-master"></div>';
var progress_circle_enlightened = '<div id="progress-circle" class="progress-circle progress-enlightened"></div>';
var progress_circle_burned = '<div id="progress-circle" class="progress-circle progress-burned"></div>';

var progress_circle_apprentice_completed = '<div id="progress-circle" class="progress-circle  progress-apprentice progress-apprentice-complete"></div>';
var progress_circle_guru_completed = '<div id="progress-circle" class="progress-circle progress-guru progress-guru-complete"></div>';
var progress_circle_master_completed= '<div id="progress-circle" class="progress-circle progress-master progress-master-complete"></div>';
var progress_circle_enlightened_completed = '<div id="progress-circle" class="progress-circle progress-enlightened progress-enlightened-complete"></div>';
var progress_circle_burned_completed = '<div id="progress-circle" class="progress-circle progress-burned progress-burned-complete"></div>';

addStyle(css);
appendButton();

function appendButton() {
   $('#additional-content ul').append('<li><span id="level_indicator" title="SRS level"><div id="srs-progress-wrapper"></div></span></li>');
}

//Shout-out to rfindley for the fix!
$.jStorage.listenKeyChange('currentItem', function(){
   var level = $.jStorage.get('currentItem').srs;
   var $wrapper = $('#srs-progress-wrapper');
   var newContent = "";
	 if(level<5){ //Apprentice [1,4]
       for(var i=0;i<level;i++){
           newContent += progress_circle_apprentice_completed;
       }
       for(var i=0;i<(4-level);i++){
           newContent += progress_circle_apprentice;
       }
       if(level === 4){//YAY, about to level up!
           newContent += progress_circle_guru;
       }
   }else if(level < 7){ //Guru [5,6]
      if(level === 5){
          newContent += progress_circle_guru_completed;
          newContent += progress_circle_guru;
      }else{
          newContent += progress_circle_guru_completed;
          newContent += progress_circle_guru_completed;
          newContent += progress_circle_master;
      } 
   }else if (level === 7){ //Master
     newContent += progress_circle_master_completed;
       newContent += progress_circle_enlightened;
   } else if (level === 8){ //Enlightened
     newContent += progress_circle_enlightened_completed;
       newContent += progress_circle_burned;
   }
   //console.log('##### srs level is ' + level);
   $wrapper.html(newContent);
   
    // Item level
   $("span#level_indicator").attr("title","Level " + $.jStorage.get('currentItem').level );
});

///////// Button observer
// select the target node
var target = document.querySelector('#additional-content ul');
 
// create an observer instance
var observer = new MutationObserver(function(mutations) {
   if (!document.getElementById('level_indicator')) {
      appendButton();
      return;
   }
   calculateDynamicWidth();
   fixAnswerExceptionPosition();
});
 
// configuration of the observer:
var config = { attributes: true, childList: true, characterData: true };
 
// pass in the target node, as well as the observer options
observer.observe(target, config);


function calculateDynamicWidth(){
   var liCount = $('#additional-content ul').children().size();
    
   $('#additional-content ul li').toArray().forEach(
       function(item,index,list){ 
           if(item.classList.contains("ignore_in_width_calc")){
               liCount--;
           }
       }
   );
   var percentage = 100/liCount;
    percentage-=0.1;
    //console.log('width percentage is: ' + percentage);
   cssDynamicWidth = 
    '#additional-content ul li {' +
    '    width: ' + percentage + '% !important' +
    '} ';
    

    addStyle(cssDynamicWidth);
}

calculateDynamicWidth();
fixAnswerExceptionPosition();
//console.log(' ##########  script ended');

function addStyle(aCss) {
  var head, style;
  head = document.getElementsByTagName('head')[0];
  if (head) {
    style = document.createElement('style');
    style.setAttribute('type', 'text/css');
    style.textContent = aCss;
    head.appendChild(style);
    return style;
  }
  return null;
}

function fixAnswerExceptionPosition(){
    
    var buttonWidthPercentage = parseFloat(window.getComputedStyle(document.querySelector('#additional-content ul li:nth-last-child(1)')).width);
    var bodyWidth = parseFloat(window.getComputedStyle(document.querySelector('body')).width) - 20; //10px margin on both sides
    var buttonWidth = bodyWidth*buttonWidthPercentage/100;
    //console.log(buttonWidthPercentage+'/'+bodyWidth+'/'+buttonWidth+'/');
    var answerExceptionWidth = 400;
    var newPosition = -200 +(buttonWidth/2); //padding

    
    var i = 0;
    var positionInList = -1;
    var ignore_width_calc_button_amount = 0;
    //console.log('####inside fixanswer');
    for(i=0;i<$('#additional-content ul').children().size()-1;i++){
        if($('#additional-content ul').children()[i].id === "option-item-info"){
            positionInList =  i-ignore_width_calc_button_amount;//WKWBE script
            console.log('positioninlist is: ' + positionInList);
        }
        if($('#additional-content ul').children()[i].classList.contains("ignore_in_width_calc")){
            ignore_width_calc_button_amount++;
        }
    }
    
    if(positionInList !== -1){        
        newPosition+=(positionInList*buttonWidth);
        //console.log('##### new position is: ' + newPosition);
    }else{
        //console.log('##### Whoops, where did #option-item-info go?');
        return;
    }
    
    
    var cssAnswerException = 
    '#additional-content #answer-exception {' +
    '    width: 400px !important;' +
    '    left: ' + newPosition + 'px !important;' + 
    '}    ' +
    '#answer-exception span::before {' +
    '    left: 50% !important;' + 
    '}    ' +
    '#additional-content #answer-exception span {' +
    '    width: inherit !important;' +
    '}    ';
    
    //console.log('@@@@@@@@@@@@@@@');
    addStyle(cssAnswerException);
    
}

// Hook into App Store
try { $('.app-store-menu-item').remove(); $('<li class="app-store-menu-item"><a href="https://community.wanikani.com/t/there-are-so-many-user-scripts-now-that-discovering-them-is-hard/20709">App Store</a></li>').insertBefore($('.navbar .dropdown-menu .nav-header:contains("Account")')); window.appStoreRegistry = window.appStoreRegistry || {}; window.appStoreRegistry[GM_info.script.uuid] = GM_info; localStorage.appStoreRegistry = JSON.stringify(appStoreRegistry); } catch (e) {}
5 Likes

My hero! 直してくれてありがとうございました!

5 Likes

I was having the same problem, and had to change some of the code to this

// ==UserScript==
// @name        Wanikani Review SRS/Level Indicator
// @namespace   mempo
// @author      Mempo
// @description Show current SRS level and how many are left before levelling up
// @run-at      document-end
// @include     https://www.wanikani.com/review/session*
// @include     http://www.wanikani.com/review/session*
// @version     1.5
// @run-at      document-end
// @grant       none
// ==/UserScript==

console.log('/// start of WK Review SRS Indicator');

var css =
    '#additional-content ul li {' +
    '    width: 16.5% !important' +
    '}                          ' +
    '.progress-circle {' +
    '    display: inline-block;     ' +
    '    width: 10px;  ' +
    '    height: 10px; ' +
    '    background-color: transparent;' +
    '    border: 5px solid transparent;' +
    '    border-radius: 50%; ' +
    '    margin: 0 2px; ' +
    '}                      ' +
    '.progress-apprentice { ' +
    '    border-color: #DD0093;' +
    '} ' +
    '.progress-guru { ' +
    '    border-color: #882D9E;' +
    '} ' +
    '.progress-master { ' +
    '    border-color: #294DDB;' +
    '} ' +
    '.progress-enlightened { ' +
    '    border-color: #0093DD;' +
    '} ' +
    '.progress-burned { ' +
    '    border-color: #434343;' +
    '} ' +
    //COMPLETED CIRCLES
    '.progress-apprentice-complete { ' +
    '    background-color: #DD0093;' +
    '} ' +
    '.progress-guru-complete { ' +
    '    background-color: #882D9E;' +
    '} ' +
    '.progress-master-complete { ' +
    '    background-color: #294DDB;' +
    '} ' +
    '.progress-enlightened-complete { ' +
    '    background-color: #0093DD;' +
    '} ' +
    '.progress-burned-complete { ' +
    '    background-color: #434343;' +
    '} ';

var cssDynamicWidth =
    '#additional-content ul li {' +
    '    width: 12.4% !important' +
    '} ';

var progress_circle_apprentice = '<div id="progress-circle" class="progress-circle progress-apprentice"></div>';
var progress_circle_guru = '<div id="progress-circle" class="progress-circle progress-guru"></div>';
var progress_circle_master = '<div id="progress-circle" class="progress-circle progress-master"></div>';
var progress_circle_enlightened = '<div id="progress-circle" class="progress-circle progress-enlightened"></div>';
var progress_circle_burned = '<div id="progress-circle" class="progress-circle progress-burned"></div>';

var progress_circle_apprentice_completed = '<div id="progress-circle" class="progress-circle  progress-apprentice progress-apprentice-complete"></div>';
var progress_circle_guru_completed = '<div id="progress-circle" class="progress-circle progress-guru progress-guru-complete"></div>';
var progress_circle_master_completed= '<div id="progress-circle" class="progress-circle progress-master progress-master-complete"></div>';
var progress_circle_enlightened_completed = '<div id="progress-circle" class="progress-circle progress-enlightened progress-enlightened-complete"></div>';
var progress_circle_burned_completed = '<div id="progress-circle" class="progress-circle progress-burned progress-burned-complete"></div>';

addStyle(css);
appendButton();

function appendButton() {
   $('#additional-content ul').append('<li><span id="level_indicator" title="SRS level"><div id="srs-progress-wrapper"></div></span></li>');
}

//Shout-out to rfindley for the fix!
$.jStorage.listenKeyChange('currentItem', function(){
   var level = $.jStorage.get('currentItem').srs;
   var $wrapper = $('#srs-progress-wrapper');
   var srsLevel = ''
   var srsLevelNumber = null
   var newContent = "";
	 if(level<5){ //Apprentice [1,4]
         srsLevel = 'Apprentice'
         srsLevelNumber = level
       for(var i=0;i<level;i++){
           newContent += progress_circle_apprentice_completed;
       }
       for(var i=0;i<(4-level);i++){
           newContent += progress_circle_apprentice;
       }
       if(level === 4){//YAY, about to level up!
           newContent += progress_circle_guru;
       }
   }else if(level < 7){ //Guru [5,6]
         srsLevel = 'Guru'
         srsLevelNumber = level === 5 ? 1 : 2
      if(level === 5){
          newContent += progress_circle_guru_completed;
          newContent += progress_circle_guru;
      }else{
          newContent += progress_circle_guru_completed;
          newContent += progress_circle_guru_completed;
          newContent += progress_circle_master;
      }
   }else if (level === 7){ //Master
       srsLevel = 'Master'
     newContent += progress_circle_master_completed;
       newContent += progress_circle_enlightened;
   } else if (level === 8){ //Enlightened
       srsLevel = 'Enlightened'
     newContent += progress_circle_enlightened_completed;
       newContent += progress_circle_burned;
   }
   $wrapper.html(newContent);

    // Item level
   $("span#level_indicator").attr("title",srsLevel + ' ' + (srsLevelNumber || '' ));
});

///////// Button observer
// select the target node
var target = document.querySelector('#additional-content ul');

// create an observer instance
var observer = new MutationObserver(function(mutations) {
   if (!document.getElementById('level_indicator')) {
      appendButton();
      return;
   }
   calculateDynamicWidth();
   fixAnswerExceptionPosition();
});

// configuration of the observer:
var config = { attributes: true, childList: true, characterData: true };

// pass in the target node, as well as the observer options
observer.observe(target, config);


function calculateDynamicWidth(){
   var liCount = $('#additional-content ul').children().size();

   $('#additional-content ul li').toArray().forEach(
       function(item,index,list){
           if(item.classList.contains("ignore_in_width_calc")){
               liCount--;
           }
       }
   );
   var percentage = 100/liCount;
    percentage-=0.1;
    //console.log('width percentage is: ' + percentage);
   cssDynamicWidth =
    '#additional-content ul li {' +
    '    width: ' + percentage + '% !important' +
    '} ';


    addStyle(cssDynamicWidth);
}

calculateDynamicWidth();
fixAnswerExceptionPosition();
//console.log(' ##########  script ended');

function addStyle(aCss) {
  var head, style;
  head = document.getElementsByTagName('head')[0];
  if (head) {
    style = document.createElement('style');
    style.setAttribute('type', 'text/css');
    style.textContent = aCss;
    head.appendChild(style);
    return style;
  }
  return null;
}

function fixAnswerExceptionPosition(){

    var buttonWidthPercentage = parseFloat(window.getComputedStyle(document.querySelector('#additional-content ul li:nth-last-child(1)')).width);
    var bodyWidth = parseFloat(window.getComputedStyle(document.querySelector('body')).width) - 20; //10px margin on both sides
    var buttonWidth = bodyWidth*buttonWidthPercentage/100;
    //console.log(buttonWidthPercentage+'/'+bodyWidth+'/'+buttonWidth+'/');
    var answerExceptionWidth = 400;
    var newPosition = -200 +(buttonWidth/2); //padding


    var i = 0;
    var positionInList = -1;
    var ignore_width_calc_button_amount = 0;
    //console.log('####inside fixanswer');
    for(i=0;i<$('#additional-content ul').children().size()-1;i++){
        if($('#additional-content ul').children()[i].id === "option-item-info"){
            positionInList =  i-ignore_width_calc_button_amount;//WKWBE script
            console.log('positioninlist is: ' + positionInList);
        }
        if($('#additional-content ul').children()[i].classList.contains("ignore_in_width_calc")){
            ignore_width_calc_button_amount++;
        }
    }

    if(positionInList !== -1){
        newPosition+=(positionInList*buttonWidth);
        //console.log('##### new position is: ' + newPosition);
    }else{
        //console.log('##### Whoops, where did #option-item-info go?');
        return;
    }


    var cssAnswerException =
    '#additional-content #answer-exception {' +
    '    width: 400px !important;' +
    '    left: ' + newPosition + 'px !important;' +
    '}    ' +
    '#answer-exception span::before {' +
    '    left: 50% !important;' +
    '}    ' +
    '#additional-content #answer-exception span {' +
    '    width: inherit !important;' +
    '}    ';

    //console.log('@@@@@@@@@@@@@@@');
    addStyle(cssAnswerException);

}

// Hook into App Store
try { $('.app-store-menu-item').remove(); $('<li class="app-store-menu-item"><a href="https://community.wanikani.com/t/there-are-so-many-user-scripts-now-that-discovering-them-is-hard/20709">App Store</a></li>').insertBefore($('.navbar .dropdown-menu .nav-header:contains("Account")')); window.appStoreRegistry = window.appStoreRegistry || {}; window.appStoreRegistry[GM_info.script.uuid] = GM_info; localStorage.appStoreRegistry = JSON.stringify(appStoreRegistry); } catch (e) {}

Now it shows fine like:

Any chance, this wonderful script will get an update?

4 Likes

Is someone able to migrate this to the new version?

1 Like

I too would appreicate if this could work with the new version. I really love this script.

1 Like

Hi all,

I love this script and got sick of not having it. I’ve never written a script before and there’s not much to go off of with the new update, so hopefully I did well. :x

I have absolutely no intention to migrate OP’s script or maintain this hacky one I just wrote, nor have I even used it much to see if it’s buggy or checked it across browsers, but this does something similar. It’s a bit inefficient because the willShowNextQuestion event fires more often than the circles need to be updated, but I think it works?

Add this to your script managers:

// ==UserScript==
// @name         Show SRS Level In Reviews
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Self explanatory
// @author       Whoever can be bothered
// @match        https://www.wanikani.com/*
// @match        https://preview.wanikani.com/*
// @grant        none
// @license      MIT
// ==/UserScript==

(function() {
    'use strict';

    const url_array = window.location.pathname.split("/");
    const url_last = url_array[url_array.length - 1];

    if (url_last != "review") {
        return; // do not run script unless we're on the review page
    }

    const append_css = (css) => {
        const head_element = document.getElementsByTagName("head")[0];
        const style_element = document.createElement("style");
        style_element.setAttribute("type", "text/css");
        style_element.setAttribute("id", "showsrs_css");
        style_element.appendChild(document.createTextNode(css));
        head_element.appendChild(style_element);
    }

    const CONTAINER_CLASSNAME = "showsrs__container";
    const CIRCLE_CLASSNAME = "showsrs__circle";

    const srs_stages = {
        A1: 1,
        A2: 2,
        A3: 3,
        A4: 4,
        G1: 5,
        G2: 6,
        M: 7,
        E: 8,
    };

    const colours = {
        APPRENTICE: "221, 0, 147",
        GURU: "135, 45, 158",
        MASTER: "41, 77, 219",
        ENLIGHTENED: "0, 147, 221",
        DEFAULT: "255, 255, 255",
    }

    const TRANSPARENCY = 1.0;

    // Create object mapping item id to srs stage
    const id_srs_element = document.querySelector("script[data-quiz-queue-target=\"subjectIdsWithSRS\"]");
    const id_srs_array = JSON.parse(id_srs_element.innerHTML);
    const id_to_srs = Object.fromEntries(id_srs_array);

    // Create container for circle indicators
    const meaning_element = document.getElementsByClassName("quiz-input__input-wrapper");
    const container = document.createElement("div");
    container.className = CONTAINER_CLASSNAME;
    meaning_element[0].insertBefore(container, meaning_element[0].firstChild);

    append_css(`
    .${CONTAINER_CLASSNAME} {
        display: flex;
        justify-content: center;
        gap: 5px;
        padding-top: 10px;
    }

    .${CIRCLE_CLASSNAME} {
        width: 10px;
        height: 10px;
        border: 2px solid;
        border-radius: 50%;
    }`);

    // Append and create 8 circles to container

    for (const [key, value] of Object.entries(srs_stages)) {
        const circle = document.createElement("div");
        circle.className = CIRCLE_CLASSNAME;

        if (value <= srs_stages.A4) {
            circle.style.borderColor = `rgba(${colours.APPRENTICE}, ${TRANSPARENCY})`;
        } else if (value <= srs_stages.G2) {
            circle.style.borderColor = `rgba(${colours.GURU}, ${TRANSPARENCY})`;
        } else if (value == srs_stages.M) {
            circle.style.borderColor = `rgba(${colours.MASTER}, ${TRANSPARENCY})`;
        } else if (value == srs_stages.E) {
            circle.style.borderColor = `rgba(${colours.ENLIGHTENED}, ${TRANSPARENCY})`;
        }

        container.appendChild(circle);
    }

    const update_circle = (circle, stage) => {
        if (stage <= srs_stages.A4) {
            circle.style.backgroundColor = `rgba(${colours.APPRENTICE}, ${TRANSPARENCY})`;
        } else if (stage <= srs_stages.G2) {
            circle.style.backgroundColor = `rgba(${colours.GURU}, ${TRANSPARENCY})`;
        } else if (stage == srs_stages.M) {
            circle.style.backgroundColor = `rgba(${colours.MASTER}, ${TRANSPARENCY})`;
        } else if (stage == srs_stages.E) {
            circle.style.backgroundColor = `rgba(${colours.ENLIGHTENED}, ${TRANSPARENCY})`;
        }
    }

    const circles = document.getElementsByClassName(CIRCLE_CLASSNAME);

    window.addEventListener("willShowNextQuestion", (e) => {
        const item_id = e.detail.subject.id;
        const srs_stage = id_to_srs[item_id];
        for (let i = 0; i < circles.length; i++) {
            const corrected_index = i + 1;
            if (corrected_index <= srs_stage) {
                update_circle(circles[i], corrected_index);
            } else {
                circles[i].style.backgroundColor = "";
            }
        }
    });

})();

E: Added check to only run script on the review page.

6 Likes

Thank you so much for taking a stab at an update / alternative! :bowing_woman:

I too have been missing the little dots. Maybe they hint too much at which particular word is being asked for, but it’s reassuring to see them :sweat_smile:

You said you’re not going to maintain the script. I respect that. Here’s my experience for any future people’s reference if someone decides to pick up the torch.

///
Using version of script before the addition of the “run only on review page” check

Outcome: It works!

Slight error on the first item in the review queue. None of the circles were filled in. However from the second item onward, the circles were accurate. And by the time the second half of the reading-meaning pair of the first item appeared in queue, the circles were accurate.

My review this time was all Burns, so I don’t yet know how well the script works handling a mix of SRS statuses.

Edit: next morning’s reviews had a mix of srs stages. Same first item error of blank circles, but all the rest were accurate at different stages.

Browser: Firefox 111.0.1 (64-bit)
OS: MacOS Monterey ver. 12.6.3
Wanikani Open Framework 1.1.0

1 Like

works for me