diff --git a/folders/spanish/gcse8698/index.html b/folders/spanish/gcse8698/index.html index 176d160..7e746d9 100644 --- a/folders/spanish/gcse8698/index.html +++ b/folders/spanish/gcse8698/index.html @@ -269,7 +269,7 @@ la aceituna olive el arroz rice atento/a attentive -la basura rubbish, junk +la basura rubbish, litter, junk el bocadillo sandwich el/la camarero/a waiter / waitress chino/a Chinese @@ -465,7 +465,7 @@ aparte de apart from asistir (a) (to) attend el barrio area, neighbourhood -la basura rubbish, litter +la basura rubbish, litter, junk el/la bombero/a firefighter bonito/a pretty la cantidad quantity @@ -701,7 +701,7 @@ la venta sale # Unit 7 -la basura rubbish +la basura rubbish, litter, junk la bombilla (de bajo consumo) (low-energy) light bulb el combustible fuel combatir (to) fight, (to) combat diff --git a/scripts/folders-classic.js b/scripts/folders-classic.js index 549f34b..8bad04e 100644 --- a/scripts/folders-classic.js +++ b/scripts/folders-classic.js @@ -10,11 +10,11 @@ let textbox = undefined; let correct = 0; let wrong = 0; -const THRESHOLD = 0.8 +const THRESHOLD = 0.2; // 80% typo detection threshold -function set_progress_bar_background(val, col) { - document.getElementById("progress-bar-container").style.background = - `linear-gradient(to right, ${col} ${val * 100}%, let(--other-colour) ${(1 - val) * 100}%)`; +function set_progress_bar_background(val) { + document.getElementById("progress-bar") + .style.width = `${100 - val}%`; } function new_question() { @@ -23,15 +23,28 @@ function new_question() { split_answer = answer.split(",") .map(str => str.split("/")).flat() - .map(remove_punctuation) .map(expand_parens); + + textbox.focus(); } -function check_input_classic() { - let value = textbox.value; +function update_bar_text() { + let total = correct + wrong; + let percentage = correct / total * 100; + document.getElementById("progress-bar-text").innerHTML = + `${correct}/${total} (${percentage.toFixed(2)}%)`; + set_progress_bar_background(percentage); +} + +function check_input(value) { let unpunctuated = remove_punctuation(value); textbox.value = ""; + let typo_p = document.getElementById("typo-text"); + + let typo = typo_p.innerHTML === `Typo? Try again.`; + typo_p.innerHTML = " "; + let rickroll = [ // Hey there! "thonnu", // "thunno", // You're looking at the code @@ -50,19 +63,56 @@ function check_input_classic() { "https://youtu.be/xvFZjo5PgG0", // This is the link. "_blank").focus(); - if (split_answer.some(lst => lst.includes(unpunctuated))) - return true; + if (split_answer.some(lst => + lst.map(remove_punctuation).includes(unpunctuated)) + ) return true; - if (split_answer.flat().some(s => - levDist(s, unpunctuated) / s.length >= THRESHOLD - )) { - // tell the user there's a typo + if (typo) return false; + + if (split_answer.flat().some(s => { + let ans = levDist(remove_punctuation(s), unpunctuated) / + remove_punctuation(s).length; + console.log(ans); + return ans <= THRESHOLD; + })) { + textbox.value = value; + typo_p.innerHTML = `Typo? Try again.`; return undefined; } return false; } +function check_input_classic() { + let result = check_input(textbox.value); + + if (result === undefined) return; + + if (OPTIONS["all"]) { + // coming soon... + } else { + textbox.classList.remove("correct"); + textbox.classList.remove("wrong"); + textbox.offsetWidth; + if (result) { + correct++; + textbox.classList.add("correct"); + document.getElementById("typo-text").innerHTML = ` + Correct! + `; + } else { + wrong++; + textbox.classList.add("wrong"); + document.getElementById("typo-text").innerHTML = ` + Wrong: + ${answer} + `; + } + new_question(); + } + update_bar_text(); +} + function folders_start_classic(terms) { full_terms_list = [...terms]; randomised_terms = random_shuffle(terms); @@ -70,28 +120,41 @@ function folders_start_classic(terms) { let classic_div = document.createElement("div"); classic_div.innerHTML = `
-
+
0/0 (0.00%)

+

+
+ + +
+

 

`; classic_div.id = "classic-div"; document.getElementById("content") .insertBefore(classic_div, document.getElementById("margin")); textbox = document.getElementById("classic-input"); - textbox.focus(); + + document.getElementById("skip-button").addEventListener("click", () => + (textbox.value = "") || check_input_classic() + ); + + document.getElementById("skip-button2").addEventListener("click", () => + (textbox.value = "") || check_input_classic() + ); textbox.addEventListener("keyup", ({ key }) => { if (key === "Enter") { - console.log(check_input_classic()); + check_input_classic(); } }); diff --git a/styles/folders.css b/styles/folders.css index 608a0f6..7f253d3 100644 --- a/styles/folders.css +++ b/styles/folders.css @@ -261,7 +261,7 @@ div#match-div { div.match-text-div.done { display: flex; - animation: correct 500ms forwards; + animation: correctMatch 500ms forwards; padding: 0px; max-height: calc((100vh - 200px) / 6); @@ -272,7 +272,7 @@ div#match-div { } div.match-text-div.wrong { - animation: wrong 500ms; + animation: wrongMatch 500ms; } } } @@ -293,9 +293,15 @@ div#classic-div { div#progress-bar-container { box-sizing: border-box; width: calc(100% - 200px); - border: 2px solid; + /* border: 2px solid; */ border-radius: 12.5px; - background: white; + background: linear-gradient(to right, red 0%, yellow 50%, green 100%); + + div#progress-bar { + float: right; + background-color: var(--other-colour); + width: 100%; + } } span#progress-bar-text { @@ -314,6 +320,14 @@ div#classic-div { padding: 5px; } + input#classic-input.correct { + animation: correctClassic 500ms; + } + + input#classic-input.wrong { + animation: wrongClassic 500ms; + } + h1#classic-question { text-align: center; height: 48px; @@ -328,13 +342,48 @@ div#classic-div { } button#finish-button { - float: right; + position: relative; + top: 50%; + transform: translateY(-50%); + margin: 0px; + } + + button#skip-button { position: relative; top: 50%; transform: translateY(-50%); margin: 0px; } } + + button#finish-button, button#finish-button2 { + float: right; + } + + button#skip-button, button#skip-button2 { + float: left; + } + + div#small-screen-button-row { + display: none; + } + + p#typo-text { + text-align: center; + font-style: italic; + + span.orange { + color: orange; + } + + span.green { + color: #50c878; + } + + span.red { + color: #ed4337; + } + } } @media (max-width: 999px) { @@ -369,6 +418,19 @@ div#classic-div { div.match-line-div { min-height: 50px; } + + div#classic-div h1#classic-question { + margin: 20px 0px; + } + + div#small-screen-button-row { + display: block; + margin-bottom: 20px; + } + + button#finish-button, button#skip-button { + display: none; + } } @media (hover: none) { @@ -378,6 +440,8 @@ div#classic-div { } body.light-theme { + --green: #50c878 + div.folders-flexbox { border-color: #0093cb; } @@ -437,6 +501,8 @@ body.light-theme { } body.dark-theme { + --green: green; + div.folders-flexbox { border-color: #2a8c8c; } @@ -532,7 +598,6 @@ body.dark-theme { div#classic-div { div#progress-bar-div div#progress-bar-container { - background: #111111; --other-colour: #111111; } @@ -544,20 +609,38 @@ body.dark-theme { } } -@keyframes correct { +@keyframes correctMatch { 50% { - background-color: #50c878; + background-color: var(--green); } 100% { background-color: darkgray; } } -@keyframes wrong { +@keyframes wrongMatch { 50% { background-color: #ed4337; } 100% { background-color: initial; } +} + +@keyframes correctClassic { + 0% { + background-color: var(--green); + } + 100% { + background-color: initial; + } +} + +@keyframes wrongClassic { + 0% { + background-color: #ed4337; + } + 100% { + background-color: initial; + } } \ No newline at end of file