// ==UserScript== // @name HANKO! Bunpro with Hangman Style Single Text Reveals // @namespace michael.cheung // @version 1.0 // @description Configure the Bunpro UI with 'Hangman' style single character at a time answer reveals - use anki buttons or manual input for submitting answers // @author Michael Cheung // @match https://bunpro.jp/reviews* // @grant none // @license GPL version 3 or any later version; http://www.gnu.org/copyleft/gpl.html // @downloadURL none // ==/UserScript== (function () { 'use strict'; (function init() { /* ------------------------------------------------------- Wait until all the necesary elements have rendered... * ------------------------------------------------------ */ const manualInput = document.querySelector('#manual-input'); const section = document.querySelector('section'); const footer = document.querySelector('footer'); const answerDisplay = document.querySelector(".bp-quiz-question"); const quizMetaDataDiv = document.querySelector('#quiz-metadata-element'); if (manualInput && section && footer && answerDisplay && quizMetaDataDiv) { /* ------------------------------------------------------- Go * ------------------------------------------------------ */ setUpAnkoUI(); manualInput.disabled = true; //setupKeyboardTriggers(); //experimental! /* ----------------------------------------------------------- When the answer box gets the relevant class, click submit * ---------------------------------------------------------- */ const submitButton = document.querySelector('.' + elSubmitButton); let lastClassName = manualInput.className; window.setInterval(function () { const className = manualInput.className; if (className.includes("text-correct")) { submitButton.click(); lastClassName = className; } }, 10); } else { /* ------------------------------------------------------- Polling for element renderings... * ------------------------------------------------------ */ setTimeout(init, 0); } } )(); })(); let _ankoEnabled = true; let _hankoEnabled = true; let _numCharactersRevealed = 0; let _answerRevealed = false; let _showAllWasClicked = false; let _show1WasClicked = false; /* ------------------------------------------------------- Configure keyboard buttons to trigger the UI * ------------------------------------------------------ */ function setupKeyboardTriggers(){ const manualInput = document.querySelector('#' + elManualInput); const submitButton = document.querySelector('.' + elSubmitButton); const ankiShowAnswer = document.querySelector("#" + elShowAnswer); const ankiDontKnow = document.querySelector("#" + elUnknown); const ankiKnow = document.querySelector("#" + elKnown); const ankiNext = document.querySelector("#" + elNext); /* ------------------------------------------------------- Pressing [1] triggers "Don't know" * ------------------------------------------------------ */ document.addEventListener("keydown", function (event) { if (event.key == '1') { if(ankiDontKnow.style.display != 'none'){ //Initiate the first submit click (needs 2 clicks to continue) submitButton.click(); ankiDontKnow.click(); event.preventDefault(); event.stopPropagation(); manualInput.value = ''; } }else{ ankiShowAnswer.click(); } }); /* ------------------------------------------------------- Pressing [2] triggers "Know" * ------------------------------------------------------ */ document.addEventListener("keydown", function (event) { if (event.key == '2') { if(ankiKnow.style.display != 'none'){ ankiKnow.click(); event.preventDefault(); event.stopPropagation(); manualInput.focus(); manualInput.value = ''; manualInput.innerHTML = ''; } }else{ ankiShowAnswer.click(); } }); /* ------------------------------------------------------- Pressing [3] triggers "Show answer" * ------------------------------------------------------ */ document.addEventListener("keydown", function (event) { if (event.key == '3') { if(ankiShowAnswer.style.display != 'none'){ displayAnswer(); event.preventDefault(); event.stopPropagation(); } } }); /* ------------------------------------------------------- Pressing [4] triggers "Next" * ------------------------------------------------------ */ document.addEventListener("keydown", function (event) { if (event.key == '4') { if(ankiNext.style.display != 'none'){ ankiNext.click(); event.preventDefault(); event.stopPropagation(); } } }); } /* ------------------------------------------------------- Display the 'Show answer' button * ------------------------------------------------------ */ function resetAnkiQuiz(){ const quizConsole = document.querySelector('.' + elQuizConsole); const showBtn = document.querySelector('#' + elShowAnswer); const knowBtn = document.querySelector('#' + elKnown); const unknownBtn = document.querySelector('#' + elUnknown); const ankiButtonsSection = document.querySelector('#' + elAnkiButtons); const nextBtn = document.querySelector('#' + elNext); quizConsole.style.display = "flex"; if(_ankoEnabled){ showBtn.style.display = 'inline-block'; knowBtn.style.display = 'none'; unknownBtn.style.display = 'none'; ankiButtonsSection.style.opacity = '1'; nextBtn.style.display = 'none'; } enableButtons(); _showAllWasClicked = false; _show1WasClicked = false; } /* ------------------------------------------------------- Show the 'Easy/Hard' buttons and hide 'Show answer' * ------------------------------------------------------ */ function setAnkiQuiz(){ const quizConsole = document.querySelector('.' + elQuizConsole); const showBtn = document.querySelector('#' + elShowAnswer); const knowBtn = document.querySelector('#' + elKnown); const unknownBtn = document.querySelector('#' + elUnknown); const ankiButtonsSection = document.querySelector('#' + elAnkiButtons); const show1Answer = document.querySelector("#" + elShow1Answer); if(_ankoEnabled){ showBtn.style.display = 'none'; knowBtn.style.display = 'inline-block'; knowBtn.style.width = '49% !important'; unknownBtn.querySelector('span.text-right').text = "Hard"; unknownBtn.style.display = 'inline-block'; unknownBtn.style.width = '49% !important'; ankiButtonsSection.style.opacity = '1'; show1Answer.style.display = 'none'; _numCharactersRevealed = 0; _answerRevealed = false; quizConsole.style.display = "flex"; enableButtons(); } } function setHankoButton(){ if(_hankoEnabled){ const show1Answer = document.querySelector('#' + elShow1Answer); show1Answer.style.display = 'inline-block'; show1Answer.style.visbility = 'visible'; show1Answer.style.opacity = 1.0; show1Answer.enabled = true; _show1WasClicked = false; } } /* ------------------------------------------------------- Show the 'Next' buttons and hide 'Easy/Hard' * ------------------------------------------------------ */ function showNextButton(){ const quizConsole = document.querySelector('.' + elQuizConsole); const showBtn = document.querySelector('#' + elShowAnswer); const show1Btn = document.querySelector('#' + elShow1Answer); const knowBtn = document.querySelector('#' + elKnown); const unknownBtn = document.querySelector('#' + elUnknown); const nextBtn = document.querySelector('#' + elNext); showBtn.style.display = 'none'; show1Btn.style.display = 'none'; knowBtn.style.display = 'none'; unknownBtn.style.display = 'none'; nextBtn.style.display = 'inline-block'; nextBtn.style.width = '100% !important'; quizConsole.style.display = "flex"; } /* ------------------------------------------------------- Make the 'Easy/Hard' buttons unclickable * ------------------------------------------------------ */ function disableButtons(){ const knowBtn = document.querySelector('#' + elKnown); const unknownBtn = document.querySelector('#' + elUnknown); const ankiButtonsSection = document.querySelector('#' + elAnkiButtons); knowBtn.disabled = true; unknownBtn.disabled = true; ankiButtonsSection.style.opacity = '0.2'; } /* ------------------------------------------------------- Make the 'Easy/Hard' buttons clickable * ------------------------------------------------------ */ function enableButtons(){ const knowBtn = document.querySelector('#' + elKnown); const unknownBtn = document.querySelector('#' + elUnknown); const ankiButtonsSection = document.querySelector('#' + elAnkiButtons); knowBtn.disabled = false; unknownBtn.disabled = false; ankiButtonsSection.style.opacity = '1'; } /* -------------------------------------------------------- Create the Anki buttons and configure them * -------------------------------------------------------*/ function setUpAnkoUI() { /* -------------------------------------------------------- Insert the know/don't know buttons * -------------------------------------------------------*/ const answerBox = document.querySelector('#' + elManualInput); answerBox.style.display = 'none'; answerBox.insertAdjacentHTML('beforebegin', ankiButtonsHtml); /* -------------------------------------------------------- Insert the anko settings buttons * -------------------------------------------------------*/ const sideButtons = document.querySelector('ul.justify-end'); sideButtons.insertAdjacentHTML('afterbegin', ankiSettingsButtonHtml); /* -------------------------------------------------------- Insert the anko settings modal window * -------------------------------------------------------*/ const footer = document.querySelector('footer'); footer.insertAdjacentHTML('beforebegin', ankiSettingsModalHtml); /* -------------------------------------------------------- Insert the next question countdown box * -------------------------------------------------------*/ const ankiSettingsModal = document.querySelector('#' + elSettingsModal); ankiSettingsModal.insertAdjacentHTML('afterend', ankiCountdownHtml); ankiSettingsModal.style.display = 'none'; const nextCountdown = document.querySelector('#' + elNextCountdown); nextCountdown.style.display = 'none'; /* -------------------------------------------------------- Set up anko settings window control * -------------------------------------------------------*/ let ankiSettingsShown = false; const ankiSettingsButton = document.querySelector('#' + elSettingsBtn); ankiSettingsButton.addEventListener('click', function () { if (!ankiSettingsShown) { ankiSettingsModal.style.display = 'block'; ankiSettingsShown = true; } else { ankiSettingsModal.style.display = 'none'; ankiSettingsShown = false; } }); const ankiSettingsModalClose = document.querySelector('.anki-settings-close'); ankiSettingsModalClose.addEventListener('click', function () { ankiSettingsModal.style.display = 'none'; ankiSettingsShown = false; }); /* -------------------------------------------------------- Set up the anko toggle on/off buttons * -------------------------------------------------------*/ const ankoToggleOff = document.querySelector('#' + elBtnToggleOff); const ankoToggleOn = document.querySelector('#' + elBtnToggleOn); ankoToggleOff.addEventListener('click', function () { if(_ankoEnabled){ ankoToggleOff.classList = 'border-r border-primary-accent px-12 py-6 group-last:border-none text-secondary-bg bg-primary-accent'; ankoToggleOn.classList = 'border-r border-primary-accent px-12 py-6 group-last:border-none text-primary-accent'; toggleAnko(false); }else{ ankoToggleOn.classList = 'border-r border-primary-accent px-12 py-6 group-last:border-none text-secondary-bg bg-primary-accent'; ankoToggleOff.classList = 'border-r border-primary-accent px-12 py-6 group-last:border-none text-primary-accent'; toggleAnko(true); } }); ankoToggleOn.addEventListener('click', function () { if(!_ankoEnabled){ ankoToggleOn.classList = 'border-r border-primary-accent px-12 py-6 group-last:border-none text-secondary-bg bg-primary-accent'; ankoToggleOff.classList = 'border-r border-primary-accent px-12 py-6 group-last:border-none text-primary-accent'; toggleAnko(true); }else{ ankoToggleOff.classList = 'border-r border-primary-accent px-12 py-6 group-last:border-none text-secondary-bg bg-primary-accent'; ankoToggleOn.classList = 'border-r border-primary-accent px-12 py-6 group-last:border-none text-primary-accent'; toggleAnko(true); } }); const hankoToggleOff = document.querySelector('#' + elBtnHankoToggleOff); const hankoToggleOn = document.querySelector('#' + elBtnHankoToggleOn); hankoToggleOff.addEventListener('click', function () { if(_hankoEnabled){ hankoToggleOff.classList = 'border-r border-primary-accent px-12 py-6 group-last:border-none text-secondary-bg bg-primary-accent'; hankoToggleOn.classList = 'border-r border-primary-accent px-12 py-6 group-last:border-none text-primary-accent'; toggleHanko(false); }else{ hankoToggleOn.classList = 'border-r border-primary-accent px-12 py-6 group-last:border-none text-secondary-bg bg-primary-accent'; hankoToggleOff.classList = 'border-r border-primary-accent px-12 py-6 group-last:border-none text-primary-accent'; toggleHanko(true); } }); hankoToggleOn.addEventListener('click', function () { if(!_hankoEnabled){ hankoToggleOn.classList = 'border-r border-primary-accent px-12 py-6 group-last:border-none text-secondary-bg bg-primary-accent'; hankoToggleOff.classList = 'border-r border-primary-accent px-12 py-6 group-last:border-none text-primary-accent'; toggleHanko(true); }else{ hankoToggleOff.classList = 'border-r border-primary-accent px-12 py-6 group-last:border-none text-secondary-bg bg-primary-accent'; hankoToggleOn.classList = 'border-r border-primary-accent px-12 py-6 group-last:border-none text-primary-accent'; toggleHanko(false); } }); /* -------------------------------------------------------- Disable the answer input when submit is clicked * -------------------------------------------------------*/ const submitButton = document.querySelector('.' + elSubmitButton); submitButton.addEventListener('click', function () { if(_ankoEnabled || _hankoEnabled){ answerBox.disabled = true; /* -------------------------------------------------------- Hide the toast element for notifications * -------------------------------------------------------*/ setTimeout(function () { const toastElement = document.querySelector(".z-tooltip"); if (toastElement) { toastElement.style.visibility = "hidden"; } }, 10); } }); submitButton.style.visibility = "hidden"; /* -------------------------------------------------------- Set up ank'Hanko!' heading * -------------------------------------------------------*/ const header = document.querySelector('header'); const headerCentre = header.querySelector('ul'); headerCentre.insertAdjacentHTML('afterend', ankoHeading); const ankoHeadingBanner = document.querySelector('#' + elAnkoheading); ankoHeadingBanner.addEventListener('click', function () { if (!ankiSettingsShown) { ankiSettingsModal.style.display = 'block'; ankiSettingsShown = true; } else { ankiSettingsModal.style.display = 'none'; ankiSettingsShown = false; } }); /* -------------------------------------------------------- The Anki 'Easy' button * -------------------------------------------------------*/ const ankiKnow = document.querySelector("#" + elKnown); ankiKnow.addEventListener('click', function () { submitKnown(); }, false); /* -------------------------------------------------------- The Anki 'Hard' button * -------------------------------------------------------*/ const ankiDontKnow = document.querySelector("#" + elUnknown); ankiDontKnow.addEventListener('click', function () { submitUnknown(); }, false); /* -------------------------------------------------------- The Anki 'Show answer' button * -------------------------------------------------------*/ const showAnswer = document.querySelector("#" + elShowAnswer); showAnswer.addEventListener('click', function () { _showAllWasClicked = true; if(_ankoEnabled) { if(_show1WasClicked){ /* ---------------------------------------------------------- Set the answer as blank in the react generated input * -------------------------------------------------------- */ const manualInput = document.querySelector("#" + elManualInput); const nativeInputValueSetter = Object.getOwnPropertyDescriptor( window.HTMLInputElement.prototype, "value" ).set; nativeInputValueSetter.call(manualInput, ""); const inputEvent = new Event("input", { bubbles: true }); manualInput.dispatchEvent(inputEvent); } displayAnswer(); } }, false); /* -------------------------------------------------------- The 'Show 1 answer' button * -------------------------------------------------------*/ const show1Answer = document.querySelector("#" + elShow1Answer); const manualInput = document.querySelector("#" + elManualInput); show1Answer.addEventListener('click', function () { _show1WasClicked = true; if(_hankoEnabled) { display1Answer(_numCharactersRevealed); manualInput.focus(); } }, false); /* -------------------------------------------------------- When a new question appears, reset the anki buttons * -------------------------------------------------------*/ const attempts = document.querySelector('[title="Correct question attempts over total attempts"]'); const remaining = attempts.querySelector('p'); const observer = new MutationObserver(() => { if(_ankoEnabled || _hankoEnabled) { resetAnkiQuiz(); setHankoButton() } }); observer.observe(remaining, { subtree: true, childList: true, characterData: true }); resetAnkiQuiz(); setHankoButton(); } function toggleAnko(enabled){ const answerBox = document.querySelector('#' + elManualInput); const ankiKnow = document.querySelector("#" + elKnown); const ankiDontKnow = document.querySelector("#" + elUnknown); const showAnswer = document.querySelector("#" + elShowAnswer); const submitButton = document.querySelector('.' + elSubmitButton); const ankiButtons = document.querySelector("#" + elAnkiButtons); if(enabled){ _ankoEnabled = true; answerBox.disabled = true; answerBox.style.display = 'none'; //ankiKnow.style.display = 'inline-block'; //ankiDontKnow.style.display = 'inline-block'; showAnswer.style.display = 'inline-block'; ankiButtons.display = 'grid'; submitButton.style.visibility = "hidden"; }else{ _ankoEnabled = false; answerBox.disabled = false; answerBox.style.display = 'inline-block'; answerBox.focus(); submitButton.style.visibility = "visible"; ankiKnow.style.display = 'none'; ankiDontKnow.style.display = 'none'; showAnswer.style.display = 'none'; ankiButtons.display = 'none'; } } function toggleHanko(enabled){ const show1Answer = document.querySelector("#" + elShow1Answer); if(enabled){ _hankoEnabled = true; show1Answer.style.display = 'inline-block'; }else{ _hankoEnabled = false; show1Answer.style.display = 'none'; } } function hideQuizConsole(milliseconds) { /* -------------------------------------------------------- Hide the answer box area then re-appear * -------------------------------------------------------*/ const quizConsole = document.querySelector('.' + elQuizConsole); quizConsole.style.display = "none"; if(milliseconds > 0){ setTimeout(function () { quizConsole.style.display = "flex"; }, milliseconds); } } function displayAnswer() { /* -------------------------------------------------------- Get the quiz answers and sanitise them * -------------------------------------------------------*/ const answerDisplay = document.querySelector("." + elAnswerDisplay); const answerDisplayBtn = answerDisplay.querySelector('button'); let answer = getAnswer(); /* -------------------------------------------------------- Display the quiz answer * -------------------------------------------------------*/ answerDisplayBtn.innerHTML = '' + answer + ''; /* -------------------------------------------------------- Hide the toast element for notifications * -------------------------------------------------------*/ setTimeout(function () { const toastElement = document.querySelector(".z-tooltip"); if (toastElement) { toastElement.style.visibility = "hidden"; } }, 10); /* -------------------------------------------------------- Hide the answer box area then re-appear * -------------------------------------------------------*/ const quizConsole = document.querySelector('.' + elQuizConsole); quizConsole.style.display = "none"; setTimeout(function () { quizConsole.style.display = "flex"; setAnkiQuiz(); disableButtons(); }, 1000); setTimeout(function () { quizConsole.style.display = "flex"; enableButtons(); }, 2000); } function display1Answer() { //Disable the button for a second const show1Answer = document.querySelector("#" + elShow1Answer); show1Answer.disabled = true; show1Answer.style.opacity = 0.2; setTimeout(function () { show1Answer.disabled = false; show1Answer.style.opacity = 1.0; }, 500); /* -------------------------------------------------------- Get the answer * -------------------------------------------------------*/ const answer = getAnswer(); /* -------------------------------------------------------- Display 1 character of the answer * -------------------------------------------------------*/ const answerDisplay = document.querySelector("." + elAnswerDisplay); const answerDisplayBtn = answerDisplay.querySelector('button'); let partialAnswer = ""; let partialAnswerPlusTrailing = ""; for(var i in answer){ if(i <= _numCharactersRevealed){ partialAnswer += answer[i]; partialAnswerPlusTrailing += answer[i]; } else{ partialAnswerPlusTrailing += "_"; } } _numCharactersRevealed++; if(_numCharactersRevealed >= answer.length){ setAnswerHasBeenRevealed(); } answerDisplayBtn.innerHTML = '' + partialAnswerPlusTrailing + ''; /* -------------------------------------------------------- Hide the toast element for notifications * -------------------------------------------------------*/ setTimeout(function () { const toastElement = document.querySelector(".z-tooltip"); if (toastElement) { toastElement.style.visibility = "hidden"; } }, 10); const manualInput = document.querySelector("#" + elManualInput); manualInput.value = partialAnswer; manualInput.focus(); /* ---------------------------------------------------------- Set the answer in the react generated input * -------------------------------------------------------- */ const nativeInputValueSetter = Object.getOwnPropertyDescriptor( window.HTMLInputElement.prototype, "value" ).set; nativeInputValueSetter.call(manualInput, partialAnswer); const inputEvent = new Event("input", { bubbles: true }); manualInput.dispatchEvent(inputEvent); } function setAnswerHasBeenRevealed(){ _answerRevealed = true; _numCharactersRevealed = 0; const show1Answer = document.querySelector("#" + elShow1Answer); show1Answer.disabled = true; show1Answer.style.opacity = 0.2; show1Answer.style.display = 'none'; /* -------------------------------------------------------- Hide the answer box area then re-appear * -------------------------------------------------------*/ const quizConsole = document.querySelector('.' + elQuizConsole); quizConsole.style.display = "none"; if(_ankoEnabled){ setTimeout(function () { quizConsole.style.display = "flex"; setAnkiQuiz(); disableButtons(); }, 300); setTimeout(function () { quizConsole.style.display = "flex"; enableButtons(); }, 2000); } if(_hankoEnabled){ quizConsole.style.display = "flex"; setHankoButton(); disableButtons(); } } function setupShow1Answer(){ _answerRevealed = false; const show1Answer = document.querySelector("#" + elShow1Answer); show1Answer.disabled = false; show1Answer.style.opacity = 1.0; show1Answer.style.display = 'inline-block'; } function getAnswer(){ /* -------------------------------------------------------- Get the quiz answers and sanitise them * -------------------------------------------------------*/ const quizElement = document.querySelector("#" + elQuizElement); const answers = quizElement.getAttribute('data-meta-answers-array'); let answer = answers.split(',')[0]; answer = answer.replace('"', ''); answer = answer.replace('[', ''); answer = answer.replace(']', ''); answer = answer.replace('"', ''); return answer; } function submitKnown(){ /* -------------------------------------------------------- Hide the answer box area then re-appear * -------------------------------------------------------*/ hideQuizConsole(2000); const answerBox = document.querySelector('#' + elManualInput); answerBox.focus(); answerBox.value = ''; answerBox.innerHTML = ''; const ankiKnow = document.querySelector("#" + elKnown); ankiKnow.style.fontSize = '1.2rem'; /* -------------------------------------------------------- Get the quiz answer * -------------------------------------------------------*/ let answer = getAnswer(); setTimeout(function () { /* ---------------------------------------------------------- Set the answer in the react generated input * -------------------------------------------------------- */ const nativeInputValueSetter = Object.getOwnPropertyDescriptor( window.HTMLInputElement.prototype, "value" ).set; nativeInputValueSetter.call(answerBox, answer); const inputEvent = new Event("input", { bubbles: true }); answerBox.dispatchEvent(inputEvent); /* -------------------------------------------------------- Hide the toast element for notifications (appears when keys are pressed) * -------------------------------------------------------*/ const toastElement = document.querySelector(".z-tooltip"); if (toastElement) { toastElement.style.visibility = "hidden"; } }, 10); /* ---------------------------------------------------------- Submit the answer after a couple of seconds * -------------------------------------------------------- */ const submitButton = document.querySelector('.' + elSubmitButton); setTimeout(function () { if(_showAllWasClicked){ submitButton.click(); } ankiKnow.style.fontSize = '1.0rem'; }, 1000); } function submitUnknown(){ /* -------------------------------------------------------- Hide the answer box area then re-appear * -------------------------------------------------------*/ const submitButton = document.querySelector('.' + elSubmitButton); setTimeout(function () { showNextButton(); }, 10); if(_showAllWasClicked){ submitButton.click(); }else{ /* ---------------------------------------------------------- Set the blank answer in the react generated input * -------------------------------------------------------- */ const manualInput = document.querySelector("#" + elManualInput); const nativeInputValueSetter = Object.getOwnPropertyDescriptor( window.HTMLInputElement.prototype, "value" ).set; nativeInputValueSetter.call(manualInput, "る"); const inputEvent = new Event("input", { bubbles: true }); manualInput.dispatchEvent(inputEvent); } /* -------------------------------------------------------- Hide the toast element for notifications * -------------------------------------------------------*/ setTimeout(function () { const toastElement = document.querySelector(".z-tooltip"); if (toastElement) { toastElement.style.visibility = "hidden"; } }, 10); /* -------------------------------------------------------- Hide the toast element for notifications * -------------------------------------------------------*/ setTimeout(function () { const toastElement = document.querySelector(".z-tooltip"); if (toastElement) { toastElement.style.visibility = "hidden"; } }, 4010); } /* -------------------------------------------------------- The HTML elements * -------------------------------------------------------*/ const ankiCustomCss = ` .btn-anki { width: 49% !important; } div#next-countdown { position: absolute; top: 50%; left: 50%; margin-top: -50px; margin-left: -50px; width: 100px; height: 100px; font-size: 200%; border: 2px solid lightgrey; padding: 30px; } .anko{ font-family: fantasy; background-color: #c54b4d; padding: 10px; border: 1px solid black; } .anko-svg{ display: inline-block; width: 100%; } .anko-heading{ font-size: 200%; color: #fff; cursor: pointer; } .anko-kanji{ display: inline-block; font-size: 200%; } .svg-small { margin-right: 35px; } .svg-medium { margin-right: 44px; } .svg-large{ margin-right: 70px; } #anki-settings-button{ width: 57px; } #anki-settings-toggle { visibility: hidden } `; const elAnkoheading = 'anko-heading'; const elToggleOn = 'anki-settings-toggle'; const elBtnToggleOff = 'anki-settings-toggle-off'; const elBtnToggleOn= 'anki-settings-toggle-on'; const elBtnHankoToggleOff = 'anki-settings-hanko-toggle-off'; const elBtnHankoToggleOn= 'anki-settings-hanko-toggle-on'; const elKnownAutoNext = 'anki-settings-known-auto-next'; const elUnknownCountdown = 'anki-settings-unknown-countdown'; const elUnknownAutoNext = 'anki-settings-unknown-auto-next'; const elKnownCountdown = 'anki-settings-known-countdown'; const elUnknown = 'anki-dontknow'; const elKnown = 'anki-know'; const elShowAnswer = 'anki-show-1'; const elShow1Answer = 'anki-show'; const elCountdown = 'countdown'; const elSettingsBtn = 'anki-settings-button'; const elSettingsModal = 'anki-settings-modal'; const elNextCountdown= 'next-countdown'; const elAnkiButtons = 'anki-buttons'; const elNext = 'anki-next'; const elManualInput = 'manual-input'; const elQuizConsole = 'bp-quiz-console'; const elAnswerDisplay = 'bp-quiz-question'; const elQuizElement = 'quiz-metadata-element'; const elSubmitButton = 'InputManual__button'; const ankiButtonsHtml = `` + `
`; const ankiCountdownHtml = `
`; const doraemonSvg = ` `; const hankoSvg = ` `; const ankoHeading = ``; const ankiSettingsButtonHtml = `
    • `; const ankiSettingsModalHtml = `

    Peek

    Anki

    `;