GRE Trainer 2.2

gre-trainer.js

/* GRE Trainer 2.2
 * Bookmarklet to help with GRE Vocab 
 * 
 * Grab the bookmarklet from https://bookmarkify.it/15582
 * 
 * Instructions:
 * 1. Go to https://www.memrise.com/course/1150347/magoosh-gre-vocabulary-in-20-levelsfull-sound/1/
 * 2. Click bookmarklet
 * 3. Select the decks you want to practice and click "Load Selected Decks"
 * 4. Use `tab/shift+tab` to navigate through the words
 * 5. While on a word, use `m` to mark it (say, to indicate that you're having trouble with this word)
 * 6. Click "Save marked" and enter a username you think might be sufficiently unique
 * 7. Click "Load marked" and enter the same username to retrieve the set of marked words saved against that username
 * 8. Mark some words and select "Add marked" to add the marked words to the existing marked words saved against that username
 * 9. Click "Show marked" to show only the marked words
 */
 
javascript: (function() {

function shuffleArray(a) {
    for (var e = a.length - 1; e > 0; e--) {
        var o = Math.floor(Math.random() * (e + 1)),
            t = a[e];
        a[e] = a[o];
        a[o] = t;
    }
    return a
}

function loadjson(a, e) {
    $.getJSON(app.api_url + a, e);
}

function updatejson(a, e, o) {
    $.ajax({
        url: app.api_url + a,
        type: "PUT",
        data: JSON.stringify(e),
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: "undefined" != typeof o ? o : function() {
            console.log("update json " + a + " successfull");
        }
    });
}

function makeword(a, e, o) {
    var t = $(app.template).clone();
    t.find(".col_a div.text").text((o ? o + ". " : "") + a);
    t.find(".col_b div.text").text(e).attr("tabindex", "0");
    return t;
}

function update(focusing) {
    if (typeof(focusing) == "undefined")
        focusing = true;  // default value
    if (app.update_timeout > 0) {
        console.log("refreshed timeout");
        window.clearTimeout(app.update_timeout);
    }
    app.update_timeout = window.setTimeout(function() {
        $('#counts #words').text($('.gre-word:visible').length);
        $('#counts #marked').text($('.marked:visible').length);
        if (focusing) $(".col_b div:visible").eq(0).focus();
    }, 100);
}

function addwords(a) {
    var e;
    $(".thing.text-text").addClass("toremove");
    for (var o = 0; o < a.length; o++) {
        e = makeword(a[o].word, a[o].meaning, o + 1);
        $(".things .thing.text-text").eq(0).before(e);
    }
    $(".toremove").remove();
    update();
}

function markword(a, e) {
    console.log("marking", $(a)[0], e);
    $(a).closest(".thing.text-text").toggleClass("marked");
    update(false);
}

function markwords(a) {
    for (var e = 0; e < a.length; e++) {
        markword(".thing.text-text:has(.col_a.text:contains(' " + a[e] + "'))", a[e]);
    }
    update();
}

function getmarked() {
    return $.makeArray($(".thing.text-text.marked .col_a")).map(a=>$(a).text().split(" ")[1]);
}

function cachemarked(a) {
    app.marked_words = a;
    console.log("marked words loaded")
}

function loadmarked() {
    app.user = prompt("Username:");
    $(".marked").removeClass("marked");
    if (app.user in app.marked_words) {
        markwords(app.marked_words[app.user]);
        console.log(app.marked_words[app.user]); 
    } else {
        alert("Username not found");
        app.user = undefined;
    }
    update();
}

function savemarked() {
    app.user = prompt("Username (First time? Choose anything): ");
    $("#savemarked").addClass("loading");
    if (app.user) {
        app.marked_words[app.user] = getmarked();
        updatejson(app.api_id_marked, app.marked_words, function(a) {
            $("#savemarked").removeClass("loading"); 
            console.log("marked words json updated");
        });
    }
}


function remove_dupes(a) {
    return a.filter( (v,i,s)=>s.indexOf(v)==i );
}

function addmarked() {
    var a = app.user = prompt("Username (First time? Choose anything): ");
    $("#addmarked").addClass("loading");
    if (a) {
        app.marked_words[a] = app.marked_words[a].concat(getmarked()).filter((v,i,s)=>s.indexOf(v)==i);
        updatejson(app.api_id_marked, app.marked_words, function(a) {
            $("#addmarked").removeClass("loading");
            console.log("marked words json updated");
        });
    }
}

function requestwords() {
    if (app.words) {
        fetchwords()
    } else {
        $("#requestwords").addClass("loading");
        loadjson(app.api_id_words, fetchwords);
    }
}

function fetchwords(a) {
    if ("undefined" != typeof a) {
        app.words = a;
        console.log("all words loaded")
    } else {
        console.log("using cached words");
    }
    var e = $.makeArray($(".sub-option:checked")).map(a=>a.id),
        o = [];
    for (var t in app.words) {
        if (e.indexOf(app.words[t].name) > -1) 
            o = o.concat(app.words[t].words);
    }
    o = shuffleArray(o);
    addwords(o);
    $("#requestwords").removeClass("loading");
    if (app.user && app.user in app.marked_words) 
        markwords(app.marked_words[app.user]);
}

function showhelp() {
    alert("tab: next word, shift-tab: previous word, m: mark word");
}

function check_children() {
    var a = this;
    $.makeArray($(".sub-option." + a.id)).map(function(e) {
        e.checked = a.checked
    });
}

function check_parent() {
    var e = $(this).closest("ul").prev("label").find("input")[0],
        o = $.makeArray($(this).closest("li").siblings("li").find("input")).concat(this);
    total_checked = o.map(a=>a.checked).reduce((a, e)=>a + e);
    if (total_checked == o.length) {
        e.checked = true;
        e.indeterminate = false; 
    } else {
        if (0 == total_checked) {
            e.checked = false;
            e.indeterminate = false } 
        else { 
            e.checked = false;
            e.indeterminate = true;
        }
    }
}

function init() {
    console.log("init fired");
    app.template = $(".thing.text-text").eq(0).clone();
    app.template.addClass("gre-word");
    $("head").append(app.style);
    $(".progress-box").before(app.html);
    $(".progress-box").next("h4")[0].id = "counts";
    $("#counts")[0].childNodes[0].replaceWith(" words");
    $('#counts').find('span').text(" marked").prepend('<span id="marked"></span>');
    $('#counts').prepend('<span id="words"><span>');
    $("body").on("change", ".option", check_children);
    $("body").on("change", ".sub-option", check_parent);
    $('#counts span:not(.pull-right)').text(0);  // reset counts
    $("body").on("keydown", ".col_b div", function(a) {
        if (77 == a.which || 109 == a.which) 
            markword(document.activeElement);
    });
    $(document).keydown(function(a) {
        if (191 == a.which)
            showhelp();
    });
    $("#requestwords").click(requestwords);
    $("#savemarked").click(savemarked);
    $("#loadmarked").click(loadmarked);
    $("#addmarked").click(addmarked);
    $("#showmarked").click(function() {
        $(".thing:not(.marked)").toggle();
        $("#showmarked").toggleClass("loading")
    });
    loadjson(app.api_id_marked, cachemarked);
    console.log("init done");
}
app = {};
app.update_timeout = -1;
app.api_url = "https://api.myjson.com/bins/";
app.api_id_words = "nh821";
app.api_id_marked = "gqm9d";
app.style = "<style>.col_b div.text {color: white;}.col_b div.text:hover {color: black;}.col_b div.text:focus {color: black;}.thing.marked {background-color: lightpink}.thing.marked .col_b div.text {color: lightpink;}.thing.marked .col_b div.text:hover {color: black;}.thing.marked .col_b div.text:focus {color: black;}ul {list-style: none;}ul ul li {display: inline-block; margin: 3px;}input[class$=option] {margin-top: 0;margin-right:2px;}.loadbutton {min-width: 130px; margin: 5px;}#requestwords {min-width: 200px;}.loadbutton.loading .no-load {display: none;}.loadbutton:not(.loading) .load {display: none;}</style>";
app.html = '<div class="selection progress-box"><form><h3>Select Decks</h3><button class="pull-right loadbutton" id="requestwords" type="button">Load<span class="no-load"> selected decks</span><span class="load">ing...</span></button><ul><li><label><input type="checkbox" class="option" id="common">Common words</label><ul><li><label><input type="checkbox" id="c0" class="common sub-option"> I</label></li><li><label><input type="checkbox" id="c1" class="common sub-option"> II</label></li><li><label><input type="checkbox" id="c2" class="common sub-option"> III</label></li><li><label><input type="checkbox" id="c3" class="common sub-option"> IV</label></li><li><label><input type="checkbox" id="c4" class="common sub-option"> V</label></li><li><label><input type="checkbox" id="c5" class="common sub-option"> VI</label></li></ul></li><li><label><input type="checkbox" class="option" id="basic">Basic words</label><ul><li><label><input type="checkbox" id="b0" class="basic sub-option"> I</label></li><li><label><input type="checkbox" id="b1" class="basic sub-option"> II</label></li><li><label><input type="checkbox" id="b2" class="basic sub-option"> III</label></li><li><label><input type="checkbox" id="b3" class="basic sub-option"> IV</label></li><li><label><input type="checkbox" id="b4" class="basic sub-option"> V</label></li><li><label><input type="checkbox" id="b5" class="basic sub-option"> VI</label></li><li><label><input type="checkbox" id="b6" class="basic sub-option"> VII</label></li></ul></li><li><label><input type="checkbox" class="option" id="advanced">Advanced words</label><ul><li><label><input type="checkbox" id="a0" class="advanced sub-option"> I</label></li><li><label><input type="checkbox" id="a1" class="advanced sub-option"> II</label></li><li><label><input type="checkbox" id="a2" class="advanced sub-option"> III</label></li><li><label><input type="checkbox" id="a3" class="advanced sub-option"> IV</label></li><li><label><input type="checkbox" id="a4" class="advanced sub-option"> V</label></li><li><label><input type="checkbox" id="a5" class="advanced sub-option"> VI</label></li><li><label><input type="checkbox" id="a6" class="advanced sub-option"> VII</label></li></ul></li></ul><hr><button class="loadbutton" id="savemarked" type="button">Sav<span class="no-load">e marked</span><span class="load">ing...</span></button><button class="loadbutton" id="addmarked" type="button">Add<span class="no-load"> marked</span><span class="load">ing...</span></button><button class="loadbutton" id="loadmarked" type="button">Load<span class="no-load"> marked</span><span class="load">ing...</span></button><button class="loadbutton" id="showmarked" type="button">Show <span class="no-load">marked</span><span class="load">all</span></button></form></div>';
$(document).ready(init);

})();