Greasy Fork is available in English.
Userscript that enhances the study page of Ankiweb with features and stuff
// ==UserScript==
// @name Enhanced Ankiweb
// @namespace Violentmonkey Scripts
// @match https://ankiuser.net/study/
// @version 1.0
// @author ankiwanker
// @grant GM_setValue
// @grant GM_getValue
// @grant GM_addStyle
// @license MIT
// @description Userscript that enhances the study page of Ankiweb with features and stuff
// ==/UserScript==
(() => {
let zenMode = false
class PsuedoAudioPlayer {
constructor() {
this.playing = false
this.index = 0
this.audioElements = []
this.currentAudioElement = null
}
reset() {
this.index = 0
this.audioElements = []
this.currentAudioElement = null
}
play() {
this.playing = true
this.setupListener()
this.currentAudioElement.play()
}
playNext() {
if (this.audioElements.length > this.index) {
this.currentAudioElement = this.audioElements[this.index]
this.index++
this.play()
}
}
setupListener() {
this.currentAudioElement.addEventListener("ended", () => {
this.playing = false
this.playNext()
}, { once: true })
}
}
function log(...args) {
console.log("[Enhanced Ankiweb]", ...args)
}
function showSettingsDialog() {
// Create the dialog container
const dialogContainer = document.createElement("div");
dialogContainer.style.position = "fixed";
dialogContainer.style.top = "50%";
dialogContainer.style.left = "50%";
dialogContainer.style.transform = "translate(-50%, -50%)";
dialogContainer.style.backgroundColor = "white";
dialogContainer.style.padding = "20px";
dialogContainer.style.border = "1px solid black";
dialogContainer.style.zIndex = "9999";
// Create the "Show only 'Again' and 'Good' buttons" option
const showButtonsOption = document.createElement("div");
const showButtonsCheckbox = document.createElement("input");
showButtonsCheckbox.type = "checkbox";
showButtonsCheckbox.id = "showButtonsCheckbox";
showButtonsCheckbox.style = "margin-right: 5px;"
showButtonsCheckbox.checked = GM_getValue("onlyAgainGoodButtons", true)
const showButtonsLabel = document.createElement("label");
showButtonsLabel.innerText = "Show only 'Again' and 'Good' buttons ('Good' will be shown as 'Pass')";
showButtonsLabel.htmlFor = "showButtonsCheckbox";
showButtonsOption.appendChild(showButtonsCheckbox);
showButtonsOption.appendChild(showButtonsLabel);
// Create the "Bind keyboard keys to answer buttons" option
const bindKeysOption = document.createElement("div");
const bindKeysCheckbox = document.createElement("input");
bindKeysCheckbox.type = "checkbox";
bindKeysCheckbox.id = "bindKeysCheckbox";
bindKeysCheckbox.style = "margin-right: 5px;"
bindKeysCheckbox.checked = GM_getValue("bindKeyboardKeys", true)
const bindKeysLabel = document.createElement("label");
bindKeysLabel.innerText = "Bind keyboard keys to answer buttons";
bindKeysLabel.htmlFor = "bindKeysCheckbox";
bindKeysOption.appendChild(bindKeysCheckbox);
bindKeysOption.appendChild(bindKeysLabel);
// Create the "Make <audio> elements better" option
const audioOption = document.createElement("div");
const audioCheckbox = document.createElement("input");
audioCheckbox.type = "checkbox";
audioCheckbox.id = "audioCheckbox";
audioCheckbox.style = "margin-right: 5px;";
audioCheckbox.checked = GM_getValue("betterAudioElements", true);
const audioLabel = document.createElement("label");
audioLabel.innerText = "Make <audio> elements better";
audioLabel.htmlFor = "audioCheckbox";
audioOption.appendChild(audioCheckbox);
audioOption.appendChild(audioLabel);
// Create the save button
const saveButton = document.createElement("button");
saveButton.innerText = "Save";
saveButton.style = "margin-right: 5px;"
saveButton.addEventListener("click", () => {
const showButtons = showButtonsCheckbox.checked;
const bindKeys = bindKeysCheckbox.checked;
const makeBetterAudio = audioCheckbox.checked;
// Save the settings or perform any necessary actions based on the selected options
GM_setValue("onlyAgainGoodButtons", showButtons)
GM_setValue("bindKeyboardKeys", bindKeys)
GM_setValue("betterAudioElements", makeBetterAudio);
// Close the settings dialog
document.body.removeChild(dialogContainer);
});
// Create the close button
const closeButton = document.createElement("button");
closeButton.innerText = "Close";
closeButton.addEventListener("click", () => {
document.body.removeChild(dialogContainer);
});
// Append elements to the dialog container
//dialogContainer.appendChild(dialogTitle);
dialogContainer.appendChild(showButtonsOption);
dialogContainer.appendChild(bindKeysOption);
dialogContainer.appendChild(audioOption)
dialogContainer.appendChild(saveButton);
dialogContainer.appendChild(closeButton);
// Append the dialog container to the document body
document.body.appendChild(dialogContainer);
}
function injectMinimalStyle() {
GM_addStyle(`
#logo {
display: none;
}
#rightStudyMenu {
display: none;
}
body > nav {
height: 30px;
background-color: #b5b5b5 !important;
}
.nav-link {
color: whitesmoke !important;
}
.enhanced-settings-nav-item {
color: #1b00ff !important;
cursor: pointer;
}
.align-middle {
vertical-align: unset !important;
}
/* Make the "AnkiWeb" span the same size as the other nav items */
body > nav > div > a > span {
/* anki's blue */
line-height: 2;
color: #007bff !important;
font-size: 16px;
}
.btn {
padding: 10px !important;
line-height: 1 !important;
}
`)
}
function getStudyStatsHtml() {
if (ankiStudy.currentCard) {
const countIndex = ankiStudy.currentCard.countIndex
const stats1 = ankiStudy.stats[1]
const stats2 = ankiStudy.stats[2]
const stats3 = ankiStudy.stats[0]
return `
<div style="text-align: center;">
<div>
${countIndex === 0 ? `<u><font color=#0000ff>${stats3}</font></u>` : `<font color=#0000ff>${stats3}</font>`}
+
${countIndex === 1 ? `<u><font color=#990000>${stats1}</font></u>` : `<font color=#990000>${stats1}</font>`}
+
${countIndex > 1 || countIndex < 0 ? `<u><font color=#009900>${stats2}</font></u>` : `<font color=#009900>${stats2}</font>`}
</div>
</div>
`
}
return ""
}
function injectStatsAboveButtons() {
GM_addStyle(`
.pt-3 {
padding-top: 5px !important;
}
`)
const ansArea = document.getElementById("ansarea")
const statusDiv = document.createElement("div")
statusDiv.id = "statsDiv"
statusDiv.innerHTML = getStudyStatsHtml()
ansArea.insertBefore(statusDiv, ansArea.firstChild)
}
async function toggleZenMode() {
// basically injects css to hide everything except the quiz container
// this should be toggable, so if the user presses X again, it should go back to normal
const zenStyle = document.getElementById("zenStyle")
if (zenStyle) {
zenMode = false
document.head.removeChild(zenStyle)
} else {
const zenStyle = document.createElement("style")
zenStyle.id = "zenStyle"
zenStyle.innerText = `
body > nav {
display: none !important;
}
#leftStudyMenu {
display: none !important;
}
`
document.head.appendChild(zenStyle)
zenMode = true
}
}
// if the user exits fullscreen, remove the zen style
document.addEventListener("fullscreenchange", () => {
log("fullscreenchange event fired")
if (!document.fullscreenElement) {
const zenStyle = document.getElementById("zenStyle")
if (zenStyle) document.head.removeChild(zenStyle)
} else {
// if the user enters fullscreen, add the zen style
toggleZenMode()
}
})
const ankiStudy = study
if (ankiStudy) {
log(`"study" object exists.`)
document.body.style = "overflow: hidden;"
const containerElement = document.querySelector("body > main")
const qaElement = document.getElementById("qa")
const qaBoxElement = document.getElementById("qa_box")
const quizElement = document.getElementById("quiz")
qaBoxElement.style = "overflow: hidden;"
qaBoxElement.style.userSelect = "none"
// the quiz element should of the same height as the parent element
// replace the "_resizeFonts", because the way they're doing it is laughable
ankiStudy.__proto__._resizeFonts = function () {
qaElement.style = `transform-origin: center top; transform: scale(${this.zoom});`
adjustQuizHeight()
}
function adjustQuizHeight() {
// get the height from the container
const containerHeight = containerElement.getBoundingClientRect().height
quizElement.style.height = `${containerHeight}px`
qaBoxElement.style.height = `${containerHeight}px`
qaElement.style.height = `${containerHeight}px`
}
window.addEventListener("resize", () => {
adjustQuizHeight()
})
qaElement.removeAttribute("style")
injectMinimalStyle()
injectStatsAboveButtons()
// hide mouse cursor after 3 seconds
let mouseTimer = null
document.addEventListener("mousemove", () => {
if (mouseTimer) {
clearTimeout(mouseTimer)
mouseTimer = null
}
document.body.style.cursor = "default"
mouseTimer = setTimeout(() => {
document.body.style.cursor = "none"
}, 3000)
})
// recover the zoom level
const zoomLevel = GM_getValue("zoomLevel", 1)
ankiStudy.zoom = zoomLevel
ankiStudy._resizeFonts()
const psuedoAudioPlayer = new PsuedoAudioPlayer()
// Create a new MutationObserver
const audioMutationObserver = new MutationObserver((mutationsList, observer) => {
// Iterate through each mutation
for (const mutation of mutationsList) {
// Check if nodes were added
if (mutation.type === "childList" && mutation.addedNodes.length > 0) {
// Iterate through the added nodes
for (const node of mutation.addedNodes) {
// Check if the node is an <audio> element
if (node.nodeName === "AUDIO") {
// Do something with the <audio> element
log("New <audio> element added:", node);
// Add your custom logic here for handling the <audio> elements within #quiz
if (GM_getValue("betterAudioElements", true)) {
// make the audio element nicer
node.style = "width: 150px; height: 30px;"
psuedoAudioPlayer.audioElements.push(node)
if (!psuedoAudioPlayer.playing) psuedoAudioPlayer.playNext()
}
}
}
}
}
});
// Observe changes in the #quiz element
audioMutationObserver.observe(quizElement, {
childList: true,
subtree: true,
});
// append our fancy settings navitem
const leftSideNav = document.querySelector("#navbarSupportedContent > ul.navbar-nav.mr-auto")
const liItem = document.createElement("li")
const anchorItem = document.createElement("a")
anchorItem.innerText = "Settings"
anchorItem.classList.add("enhanced-settings-nav-item")
anchorItem.classList.add("nav-link")
anchorItem.addEventListener("click", showSettingsDialog)
liItem.classList.add("nav-item")
liItem.appendChild(anchorItem)
leftSideNav.appendChild(liItem)
// replace the _getButtons method with our method
const getButtonsOrig = ankiStudy.__proto__._getButtons
ankiStudy.__proto__._getButtons = function () {
if (GM_getValue("onlyAgainGoodButtons", true)) {
const labels = ankiStudy.currentCard.buttonLabels
const goodLabel = labels.length === 4 ? 2 : 1
const goodNum = labels.length === 4 ? 3 : 2
return [
[1, "Again", labels[0]],
[goodNum, "Pass", labels[goodLabel]]
]
} else {
// original function
return getButtonsOrig.call(this, arguments)
}
}
const checkNextCardOrig = ankiStudy.__proto__._checkNextCard
ankiStudy.__proto__._checkNextCard = function () {
psuedoAudioPlayer.reset()
return checkNextCardOrig.call(this, arguments)
}
// hook on "bigger" and "smaller" methods
const biggerOrig = ankiStudy.__proto__.bigger
ankiStudy.__proto__.bigger = function () {
// save the zoom level
biggerOrig.call(this, arguments)
GM_setValue("zoomLevel", ankiStudy.zoom)
}
const smallerOrig = ankiStudy.__proto__.smaller
ankiStudy.__proto__.smaller = function () {
smallerOrig.call(this, arguments)
GM_setValue("zoomLevel", ankiStudy.zoom)
}
// hook on "updateStatus" method
const updateStatusOrig = ankiStudy.__proto__.updateStatus
ankiStudy.__proto__.updateStatus = function () {
updateStatusOrig.call(this, arguments)
const statsDiv = document.getElementById("statsDiv")
if (statsDiv) {
statsDiv.innerHTML = getStudyStatsHtml()
}
}
// this hacky af
HTMLElement.prototype.focus = function () { }
HTMLElement.prototype.scrollIntoView = function () { }
window.addEventListener("keyup", async (event) => {
event.stopPropagation()
event.preventDefault()
// Zen-mode
if (event.code === "KeyX") {
log(`toggling zen mode`)
await toggleZenMode()
return
}
// manage zoom with + and -
if (event.key === "+") {
log(`zooming in`)
ankiStudy.bigger()
return
}
if (event.key === "-") {
log(`zooming out`)
ankiStudy.smaller()
return
}
if (!GM_getValue("bindKeyboardKeys", true)) return
if (ankiStudy.state === "questionShown") {
log(`current state is questionShown, drawing answer`)
if (event.key === "Enter" || event.code === "Space") {
ankiStudy.drawAnswer()
return
}
}
if (ankiStudy.state === "answerShown") {
log(`current state is answerShown, answering card`)
const buttonLabels = ankiStudy.currentCard.buttonLabels
const goodNum = buttonLabels.length === 4 ? 3 : 2
switch (event.key) {
case "1": // Again
ankiStudy.answerCard(1)
break
case "2": // Hard
if (!GM_getValue("onlyAgainGoodButtons", true)) {
ankiStudy.answerCard(2)
}
break
case "3": // Good
if (!GM_getValue("onlyAgainGoodButtons", true)) {
ankiStudy.answerCard(3)
}
break
case "4": // Easy
if (!GM_getValue("onlyAgainGoodButtons", true)) {
ankiStudy.answerCard(4)
}
break
case "Enter": // Recommended (Good)
ankiStudy.answerCard(goodNum)
break
}
}
})
}
})()