Shows quiz on ankiweb.
// ==UserScript==
// @name AnkiWeb Quiz
// @namespace https://greasyfork.org/users/102866
// @description Shows quiz on ankiweb.
// @match https://ankiuser.net/*
// @match https://ankiweb.net/*
// @author TiLied
// @version 2.0.04
// @grant GM_listValues
// @grant GM_getValue
// @grant GM_setValue
// @grant GM_deleteValue
// @require https://greasemonkey.github.io/gm4-polyfill/gm4-polyfill.js
// @grant GM.listValues
// @grant GM.getValue
// @grant GM.setValue
// @grant GM.deleteValue
// ==/UserScript==
class AnkiWebQuiz
{
_Options = new Object();
_Decks = new Object();
_GlobalId = 0;
_DeckId;
constructor()
{
//GM.deleteValue("awqDecks");
//GM.deleteValue("awqGlobalId");
console.log("AnkiWeb Quiz v" + GM.info.script.version + " initialization");
this._LoadOptionsAndDecks();
this._SetCSS();
globalThis.window.setTimeout(() =>
{
this._OptionsUI();
}, 750);
}
_SetCSS()
{
globalThis.window.document.head.append("<!--Start of AnkiWeb Quiz v" + GM.info.script.version + " CSS-->");
globalThis.window.document.head.insertAdjacentHTML("beforeend", "<style type='text/css'>div.awq_quizGrid" +
"{" +
"display: grid;" +
"grid-template-columns: repeat(4,auto);" +
"grid-template-rows: auto;" +
"grid-gap: 5px;" +
"}</style>");
globalThis.window.document.head.insertAdjacentHTML("beforeend", "<style type='text/css'>div.awq_quizButton" +
"{" +
"color: #fff !important;" +
"background-color: #0275d8;" +
"border-color: #0275d8;" +
"font-size: 1rem;" +
"border-radius: .3rem;" +
"border: 1px solid transparent;" +
"max-width:350px;" +
"cursor: pointer;" +
"max-height: 300px;" +
"overflow: auto;" +
"padding: 5px;" +
"}</ style >");
globalThis.window.document.head.insertAdjacentHTML("beforeend", "<style type='text/css'>div.awq_quizButton:hover" +
"{" +
"background-color: #025aa5;" +
"}</ style >");
globalThis.window.document.head.insertAdjacentHTML("beforeend", "<style type='text/css'>div.awq_true" +
"{" +
"background-color: #75d802;" +
"}</style>");
globalThis.window.document.head.insertAdjacentHTML("beforeend", "<style type='text/css'>div.awq_true:hover" +
"{" +
"background-color: #5aa502;" +
"}</style>");
globalThis.window.document.head.insertAdjacentHTML("beforeend", "<style type='text/css'>.awq_trueBorder" +
"{" +
"border-color: #75d802;" +
"border-width: 3px;" +
"}</style>");
globalThis.window.document.head.insertAdjacentHTML("beforeend", "<style type='text/css'>div.awq_false" +
"{" +
"background-color: #d80275;" +
"}</style>");
globalThis.window.document.head.insertAdjacentHTML("beforeend", "<style type='text/css'>div.awq_false:hover" +
"{" +
"background-color: #a5025a;" +
"}</style>");
globalThis.window.document.head.insertAdjacentHTML("beforeend", "<style type='text/css'>.awq_falseBorder" +
"{" +
"border-color: #d80275;" +
"border-width: 3px;" +
"}</style>");
globalThis.window.document.head.append("<!--End of AnkiWeb Quiz v" + GM.info.script.version + " CSS-->");
}
async _LoadOptionsAndDecks()
{
this._Options = await GM.getValue("awqOptions");
this._Decks = await GM.getValue("awqDecks");
this._GlobalId = await GM.getValue("awqGlobalId");
if (this._Options == null)
{
this._Options = new Object();
this._Options["Buttons"] = 8;
}
if (this._Decks == null)
this._Decks = new Object();
if (this._GlobalId == null)
this._GlobalId = 0;
//Console log prefs with value
console.log("*prefs:");
console.log("*-----*");
let vals = await GM.listValues();
for (let i = 0; i < vals.length; i++)
{
console.log("*" + vals[i] + ":" + await GM.getValue(vals[i]));
}
console.log("*-----*");
}
_OptionsUI()
{
let nav = globalThis.window.document.body.querySelector(".navbar-nav");
let num = `<label for=\"awqButtons\">Number of Buttons (4-12):</label>\r\n\r\n<input type=\"number\" id=\"awqButtons\" name=\"tentacles\" min=\"4\" max=\"12\" value=\"${this._Options["Buttons"]}\" />`;
nav.insertAdjacentHTML("beforeend", num);
let inputt = globalThis.window.document.querySelector("#awqButtons");
inputt.addEventListener("change", (e) =>
{
let value = e.target["value"];
console.log(value);
this._Options["Buttons"] = value;
GM.setValue("awqOptions", this._Options);
}, false);
}
async Main()
{
if (globalThis.window.document.location.pathname.startsWith("/decks"))
{
let strs = globalThis.window.document.querySelectorAll("button.btn-link");
for (let i = 0; i < strs.length; i++)
{
let _node = strs[i];
let _text = _node.textContent.trim().replaceAll(" ", "");
if(this._Decks[_text] == null)
this._Decks[_text] = new Object();
_node.addEventListener("click", () =>
{
GM.setValue("awqDeckId", _text);
}, true);
}
GM.setValue("awqDecks", this._Decks);
}
if (globalThis.window.document.location.pathname.startsWith("/study"))
{
this._DeckId = await GM.getValue("awqDeckId");
if (this._DeckId == null)
{
console.log("Deck id is null");
return;
}
let _awq = globalThis.window.document.body.querySelector("#qa");
console.log(_awq);
if (_awq == null)
{
globalThis.window.setTimeout(() =>
{
this.Main();
}, 1000);
return;
}
let _inner = _awq.innerHTML;
let _id = "";
let keys = Object.keys(this._Decks[this._DeckId]);
for (let i = 0; i < keys.length; i++)
{
if (_inner == this._Decks[this._DeckId][keys[i]]["question"])
{
_id = this._Decks[this._DeckId][keys[i]]["cardId"];
break;
}
}
if (_id == "")
{
_id += this.GetId();
this._Decks[this._DeckId][_id] = new Object();
this._Decks[this._DeckId][_id]["cardId"] = _id;
this._Decks[this._DeckId][_id]["question"] = _inner;
this._Decks[this._DeckId][_id]["answer"] = "Use this deck more!";
}
this.Qiuz(_id);
GM.setValue("awqDecks", this._Decks);
}
}
Qiuz(id)
{
this.PlayAudio();
let cardsId = new Array();
cardsId.push(id);
let keys = Object.keys(this._Decks[this._DeckId]);
let len = this._Options["Buttons"] - 1;
if(len >= keys.length)
{
len = keys.length- 1;
}
for(let i = 0; i < len; i++)
{
let _randomInt = this.GetRandomInt(keys.length);
let _id = keys[_randomInt];
let _continue = false;
for (let j = 0; j < cardsId.length; j++)
{
if (_id == cardsId[j])
{
i--;
_continue = true;
break;
}
}
if (_continue)
continue;
else
cardsId.push(_id);
}
//Console.WriteLine(cardsId);
cardsId = this.Shuffle(cardsId);
let before = globalThis.window.document.querySelector("#qa_box");
let divGrid = globalThis.window.document.createElement("div");
divGrid.classList.add("awq_quizGrid");
before.parentNode.insertBefore(divGrid, before);
let answer = globalThis.window.document.querySelector("button.btn-primary");
if (!answer.classList.contains("awqEvent"))
{
answer.classList.add("awqEvent");
answer.addEventListener("click", () =>
{
let eases = globalThis.window.document.querySelectorAll("button.m-1");
//Console.WriteLine(eases);
for (let i = 0; i < eases.length; i++)
{
if (eases[i].classList.contains("awqEvent"))
continue;
eases[i].classList.add("awqEvent");
eases[i].addEventListener("click", () =>
{
this.AddEventsForEases();
}, false);
}
}, false);
}
for (let i = 0; i < cardsId.length; i++)
{
let div = globalThis.window.document.createElement("div");
div.classList.add("awq_quizButton");
div.id = cardsId[i];
div.addEventListener("click", (e) =>
{
let _id = e.currentTarget.id;
console.log(_id);
let _button = globalThis.window.document.querySelector("button.btn-primary");
_button.click();
let _awq = globalThis.window.document.body.querySelector("#qa");
this._Decks[this._DeckId][id]["answer"] = _awq.innerHTML;
this.PlayAudio();
globalThis.window.setTimeout(() =>
{
let _eases = globalThis.window.document.querySelectorAll("button.m-1");
//Console.WriteLine(_eases);
for (let i = 0; i < _eases.length; i++)
{
if (_eases[i].classList.contains("awqEvent"))
continue;
_eases[i].classList.add("awqEvent");
_eases[i].addEventListener("click", () =>
{
this.AddEventsForEases();
}, false);
}
if (_id == id)
{
div.classList.add("awq_true");
div.classList.add("awq_trueBorder");
_eases[1].classList.add("awq_trueBorder");
}
else
{
div.classList.add("awq_false");
div.classList.add("awq_falseBorder");
_eases[0].classList.add("awq_falseBorder");
}
}, 500);
},false);
let q = this._Decks[this._DeckId][cardsId[i]]["question"].replace("</awq>", "");
let regex2 = new RegExp("style=", "g");
let html = "<awq>" + this._Decks[this._DeckId][cardsId[i]]["answer"].replace(q, "").replace("\n\n<hr id=\"answer\">\n\n", "").replace("<img", "<img width=\"100%\"").replace(regex2, "data-style=");
div.insertAdjacentHTML("beforeend", html);
divGrid.append(div);
}
}
AddEventsForEases()
{
let grid = globalThis.window.document.querySelector(".awq_quizGrid");
grid.remove();
this.Main();
}
GetId()
{
let id = this._GlobalId++;
GM.setValue("awqGlobalId", id);
return id;
}
PlayAudio()
{
let box = globalThis.window.document.body.querySelector("#qa_box");
if (box != null)
{
let audio = box.querySelector("audio");
if(audio != null)
audio.play();
}
}
GetRandomInt(max)
{
return Math.floor(Math.random() * max);
}
Shuffle(array)
{
for (let i = array.length- 1; i > 0; i--)
{
let _i = i + 1;
let j = Math.floor(Math.random() * _i);
let temp = array[i];
array[i] = array[j];
array[j] = temp;
}
return array;
}
}
let awq;
window.onload = function ()
{
awq = new AnkiWebQuiz();
setTimeout(() =>
{
awq.Main();
console.log(awq);
}, 1000);
};