From 681d903695a4bfd8029ff6fac827d1507bb8ccbc Mon Sep 17 00:00:00 2001 From: nayakrujul Date: Sat, 17 Aug 2024 15:23:54 +0100 Subject: [PATCH] New game mode --- folders/latin/entry-level/index.html | 2 +- help/index.html | 11 +- scripts/folders-classic.js | 224 ++++++++++++++++++++++++++- scripts/folders-misc.js | 1 + scripts/folders-start.js | 2 + sitemap.txt | 112 +------------- styles/folders.css | 4 + 7 files changed, 236 insertions(+), 120 deletions(-) diff --git a/folders/latin/entry-level/index.html b/folders/latin/entry-level/index.html index 70e50e5..e0a8814 100644 --- a/folders/latin/entry-level/index.html +++ b/folders/latin/entry-level/index.html @@ -149,7 +149,7 @@ tandem at last/finally timeo, timere, timui fear/be afraid tu, tui you (singular) -ubi where?/where/when +ubi where(?)/when urbs, urbis, f. city/town venio, venire, veni come via, viae, f. street/road/way diff --git a/help/index.html b/help/index.html index bfbf358..91285fc 100644 --- a/help/index.html +++ b/help/index.html @@ -58,9 +58,8 @@

Classic Mode

sets will come up, and you have to type the definition and press ENTER.

- You can keep playing for as long as you want, as the terms will keep reshuffling. - When you are finished, press the finish button, and the site will show you a - list of mistakes that you made. + You can keep playing until the selected terms run out, or you can finish the game + early using the finish button. At the end, you can retry your mistakes.

VTP6 is supported by a superior typo detection algorithm which can prompt you to @@ -68,6 +67,12 @@

Classic Mode

punctuation to make it easier for mobile users (where the first letter is usually auto-capitalised).

+

Classic Infinite Mode

+

+ Classic Infinite Mode is an extension of Classic Mode where the terms keep reshuffling + forever. To exit, you can press the finish button and you can see your + mistakes in a table, just like with Classic Mode. +

Match Mode

The aim of Match Mode is to pair up the six terms on the left with the six diff --git a/scripts/folders-classic.js b/scripts/folders-classic.js index 16b5bca..a1d47aa 100644 --- a/scripts/folders-classic.js +++ b/scripts/folders-classic.js @@ -1,6 +1,12 @@ -// NOTE: because Quick Fire and Classic share a lot of features, -// the code behind Quick Fire mode was added to this file instead -// of a separate folders-quickfire.js +// NOTE: this file contains the code behind the Classic, Classic Infinite, and +// Quick Fire modes on VTP6. They were bundled together because they share a lot of +// features with each other, and so some code can be reused. + +// NOTE: this is going to be very confusing, but whenever the code mentions +// `classic` mode, this means "Classic Infinite" mode. "Classic" mode is referred to +// as `legacy` mode in the code. This is because what is now "Classic Infinite" mode +// was originally called "Classic" mode, and what is now "Classic" mode was added +// in later at the request of a VTP6 user. let full_terms_list = []; let randomised_terms = []; @@ -27,7 +33,9 @@ function set_progress_bar_background(val) { .style.width = `${100 - val}%`; } -function new_question() { +function new_question(reload=true) { + if (randomised_terms.length === 0 && !reload) return false; + [question, answer] = randomised_terms.shift(); document.getElementById("classic-question-text").innerHTML = sanitise(question); @@ -38,9 +46,10 @@ function new_question() { if (OPTIONS["all"]) document.getElementById("classic-question-text").innerHTML += ` (0/${split_answer.length})`; - if (randomised_terms.length === 0) randomised_terms = random_shuffle(full_terms_list); + if (randomised_terms.length === 0 && reload) randomised_terms = random_shuffle([...full_terms_list]); textbox.focus(); + return true; } function update_bar_text() { @@ -158,6 +167,71 @@ function check_input_classic() { update_bar_text(); } +function check_input_legacy() { + let result = check_input(userans = textbox.value); + let cont = true; + + if (result === undefined) return; + + textbox.classList.remove("correct"); + textbox.classList.remove("wrong"); + textbox.offsetWidth; + + if (OPTIONS["all"]) { + if (result) { + textbox.classList.add("correct"); + split_answer = split_answer.filter(l => + !l.map(remove_punctuation) + .includes(remove_punctuation(userans)) + ); + if (split_answer.length === 0) { + correct++; + document.getElementById("typo-text").innerHTML = ` + Correct! + `; + cont = new_question(false); + } else { + let n = document.getElementById("classic-all-num"); + n.innerHTML = +n.innerHTML + 1; + document.getElementById("typo-text").innerHTML = ` + Keep going! + `; + } + } else { + wrong++; + textbox.classList.add("wrong"); + document.getElementById("typo-text").innerHTML = ` + Wrong: + ${answer} + `; + wrongtbl.push([question, answer, userans]); + cont = new_question(false); + } + } else { + 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} + `; + wrongtbl.push([question, answer, userans]); + } + cont = new_question(false); + } + update_bar_text(); + + if (!cont) { + finish_legacy_game(); + } +} + function check_input_quickfire() { let result = check_input(userans = textbox.value); @@ -289,6 +363,99 @@ function finish_classic_game() { } } +function finish_legacy_game() { + if (randomised_terms.length === 0 || window.confirm("Are you sure you want to finish the game?")) { + document.getElementById("classic-div").remove(); + let finish_div = document.createElement("div"); + finish_div.innerHTML = ` +

+

${correct}/${correct + wrong} (${(correct / ((correct + wrong) || 1) * 100).toPrecision(3)}%)

+
+
+ + +
+ + + + + + +
TermDefinitionYour Answer
+ `; + finish_div.id = "finish-div"; + document.getElementById("content") + .insertBefore(finish_div, document.getElementById("margin")); + + [...wrongtbl].forEach(row => { + let [a, b, c] = row; + let tr = document.createElement("tr"); + tr.innerHTML = ` + ${a} ${b} + ${c} + `; + document.getElementById("wrong-table").appendChild(tr); + }); + + document.getElementById("classic-restart-button") + .addEventListener("click", () => { + document.getElementById("finish-div").remove(); + document.getElementById("settings-bar").hidden = false; + document.getElementById("units-flex").style.display = "flex"; + + full_terms_list = []; + randomised_terms = []; + + [question, answer] = ["", ""]; + + split_answer = []; + + textbox = undefined; + + correct = 0; + wrong = 0; + + wrongtbl = []; + + quickfire_timer = 150; + quickfire_timer_id = 0; + quickfire_increment = 30; + }); + + document.getElementById("classic-retry-button") + .addEventListener("click", () => { + let mistakes = [...wrongtbl].map(([x, y, _]) => [x, y]); + + document.getElementById("finish-div").remove(); + document.getElementById("settings-bar").hidden = false; + document.getElementById("units-flex").style.display = "flex"; + + full_terms_list = []; + randomised_terms = []; + + [question, answer] = ["", ""]; + + split_answer = []; + + textbox = undefined; + + correct = 0; + wrong = 0; + + wrongtbl = []; + + quickfire_timer = 150; + quickfire_timer_id = 0; + quickfire_increment = 30; + + folders_start_legacy([...mistakes]); + document.getElementById("settings-bar").hidden = true; + document.getElementById("units-flex").style.display = "none"; + }) + } +} + function set_quickfire_high_score(score) { let currenths = get_cookies()["vtp6HighScore_quick_fire"]; if (currenths === undefined || score > +currenths) { @@ -411,6 +578,53 @@ function folders_start_classic(terms) { new_question(); } +function folders_start_legacy(terms) { + full_terms_list = [...terms]; + randomised_terms = random_shuffle(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"); + + document.getElementById("skip-button").addEventListener("click", () => + (textbox.value = "") || check_input_legacy() + ); + + document.getElementById("finish-button").addEventListener("click", finish_legacy_game); + document.getElementById("square-finish-button").addEventListener("click", finish_legacy_game); + + textbox.addEventListener("keyup", ({ key }) => { + if (key === "Enter") { + check_input_legacy(); + } + }); + + window.scrollTo(0, 0); + new_question(false); +} + function folders_start_quickfire(terms) { full_terms_list = [...terms]; randomised_terms = random_shuffle(terms); diff --git a/scripts/folders-misc.js b/scripts/folders-misc.js index 26a9e2a..0738bfe 100644 --- a/scripts/folders-misc.js +++ b/scripts/folders-misc.js @@ -61,6 +61,7 @@ document.addEventListener("keydown", (event) => { const GAME_MODE_DESCRIPTIONS = { classic: "Simply give the definition of each term that comes up. No clock, no high scores, no stress.", + classic_infinite: "Same as Classic mode, except you can keep answering questions for as long as you want.", match: "Match the terms on the left to the definitions on the right as quickly as possible.", quick_fire: "Race against the clock to answer as many questions as possible in a set amount of time." } diff --git a/scripts/folders-start.js b/scripts/folders-start.js index e5f4bba..12ca33c 100644 --- a/scripts/folders-start.js +++ b/scripts/folders-start.js @@ -15,6 +15,8 @@ function folders_start_game() { ).map(arr => arr[1]).flat(); if (game_mode === "classic") { + folders_start_legacy(selected_terms) + } else if (game_mode === "classic_infinite") { folders_start_classic(selected_terms); } else if (game_mode === "match") { folders_start_match(selected_terms); diff --git a/sitemap.txt b/sitemap.txt index 6e05967..11e94c2 100644 --- a/sitemap.txt +++ b/sitemap.txt @@ -1,111 +1 @@ -https://vtp6.github.io/ -https://vtp6.github.io/sets/LatinGCSEPage1/ -https://vtp6.github.io/sets/LatinGCSEPage2/ -https://vtp6.github.io/sets/LatinGCSEPage3/ -https://vtp6.github.io/sets/LatinGCSEPage4/ -https://vtp6.github.io/sets/LatinGCSEPage5/ -https://vtp6.github.io/sets/LatinGCSEPage6/ -https://vtp6.github.io/sets/LatinGCSEEngToLatPage1/ -https://vtp6.github.io/sets/LatinGCSEEngToLatPage2/ -https://vtp6.github.io/sets/SpanishGCSEUnit1/ -https://vtp6.github.io/sets/SpanishGCSEUnit2/ -https://vtp6.github.io/sets/SpanishGCSEUnit3/ -https://vtp6.github.io/sets/SpanishGCSEUnit4/ -https://vtp6.github.io/sets/SpanishGCSEUnit5/ -https://vtp6.github.io/sets/SpanishGCSEUnit6/ -https://vtp6.github.io/sets/SpanishGCSEUnit7/ -https://vtp6.github.io/sets/SpanishGCSEUnit8/ -https://vtp6.github.io/sets/SpanishGCSEUnit9/ -https://vtp6.github.io/sets/SpanishGCSEUnit10/ -https://vtp6.github.io/sets/SpanishGCSEUnit11/ -https://vtp6.github.io/sets/SpanishGCSEUnit12/ -https://vtp6.github.io/sets/GermanGCSEUnit1/ -https://vtp6.github.io/sets/GermanGCSEUnit2/ -https://vtp6.github.io/sets/GermanGCSEUnit3/ -https://vtp6.github.io/sets/GermanGCSEUnit4/ -https://vtp6.github.io/sets/GermanGCSEUnit5/ -https://vtp6.github.io/sets/GermanGCSEUnit6/ -https://vtp6.github.io/sets/GermanGCSEUnit7/ -https://vtp6.github.io/sets/GermanGCSEUnit8/ -https://vtp6.github.io/sets/GermanGCSEUnit9/ -https://vtp6.github.io/sets/GermanGCSEUnit10/ -https://vtp6.github.io/sets/GermanGCSEUnit11/ -https://vtp6.github.io/sets/GermanGCSEUnit12/ -https://vtp6.github.io/sets/FrenchGCSEUnit1/ -https://vtp6.github.io/sets/FrenchGCSEUnit2/ -https://vtp6.github.io/sets/FrenchGCSEUnit3/ -https://vtp6.github.io/sets/FrenchGCSEUnit4/ -https://vtp6.github.io/sets/FrenchGCSEUnit5/ -https://vtp6.github.io/sets/FrenchGCSEUnit6/ -https://vtp6.github.io/sets/FrenchGCSEUnit7/ -https://vtp6.github.io/sets/FrenchGCSEUnit8/ -https://vtp6.github.io/sets/FrenchGCSEUnit9/ -https://vtp6.github.io/sets/FrenchGCSEUnit10/ -https://vtp6.github.io/sets/FrenchGCSEUnit11/ -https://vtp6.github.io/sets/FrenchGCSEUnit12/ -https://vtp6.github.io/sets/LatinKS3Chapter1/ -https://vtp6.github.io/sets/LatinKS3Chapter2/ -https://vtp6.github.io/sets/LatinKS3Chapter3/ -https://vtp6.github.io/sets/LatinKS3Chapter4/ -https://vtp6.github.io/sets/LatinKS3Chapter5/ -https://vtp6.github.io/sets/LatinKS3Chapter6/ -https://vtp6.github.io/sets/LatinASLevelPage1/ -https://vtp6.github.io/sets/LatinASLevelPage2/ -https://vtp6.github.io/sets/LatinASLevelPage3/ -https://vtp6.github.io/sets/LatinASLevelPage4/ -https://vtp6.github.io/sets/LatinASLevelPage5/ -https://vtp6.github.io/sets/LatinASLevelPage6/ -https://vtp6.github.io/sets/LatinASLevelPage7/ -https://vtp6.github.io/sets/LatinASLevelPage8/ -https://vtp6.github.io/sets/LatinASLevelPage9/ -https://vtp6.github.io/sets/LatinASLevelPage10/ -https://vtp6.github.io/sets/LatinASLevelPage11/ -https://vtp6.github.io/sets/LatinASLevelPage12/ -https://vtp6.github.io/sets/LatinASLevelPage13/ -https://vtp6.github.io/sets/LatinASLevelPage14/ -https://vtp6.github.io/sets/LatinASLevelPage15/ -https://vtp6.github.io/sets/LatinALevelVerseChecklist1/ -https://vtp6.github.io/sets/LatinALevelVerseChecklist2/ -https://vtp6.github.io/sets/LatinALevelVerseChecklist3/ -https://vtp6.github.io/sets/LatinALevelVerseChecklist4/ -https://vtp6.github.io/sets/LatinALevelVerseChecklist5/ -https://vtp6.github.io/sets/LatinALevelVerseChecklist6/ -https://vtp6.github.io/sets/LatinALevelVerseChecklist7/ -https://vtp6.github.io/sets/LatinALevelVerseChecklist8/ -https://vtp6.github.io/sets/LatinALevelVerseChecklist9/ -https://vtp6.github.io/sets/LatinALevelVerseChecklist10/ -https://vtp6.github.io/sets/LatinALevelVerseIntroductoryChecklist/ -https://vtp6.github.io/sets/LatinALevelProseChecklist1/ -https://vtp6.github.io/sets/LatinALevelProseChecklist2/ -https://vtp6.github.io/sets/LatinALevelProseChecklist3/ -https://vtp6.github.io/sets/LatinALevelProseChecklist4/ -https://vtp6.github.io/sets/LatinALevelProseChecklist5/ -https://vtp6.github.io/sets/LatinALevelProseChecklist6/ -https://vtp6.github.io/sets/LatinALevelProseChecklist7/ -https://vtp6.github.io/sets/LatinALevelProseChecklist8/ -https://vtp6.github.io/sets/LatinALevelProseChecklist9/ -https://vtp6.github.io/sets/LatinALevelProseChecklist10/ -https://vtp6.github.io/sets/LatinALevelProseIntroductoryChecklist/ -https://vtp6.github.io/sets/LatinEntryLevelPage1/ -https://vtp6.github.io/sets/LatinEntryLevelPage2/ -https://vtp6.github.io/sets/LatinEntryLevelPage3/ -https://vtp6.github.io/sets/LatinEntryLevelPage4/ -https://vtp6.github.io/sets/LatinEntryLevelPage5/ -https://vtp6.github.io/sets/LatinEntryLevelAdditionalVocab/ -https://vtp6.github.io/sets/custom/ -https://vtp6.github.io/about/ -https://vtp6.github.io/credits/ -https://vtp6.github.io/Literature/ -https://vtp6.github.io/Literature/ApuleiusCicero/ -https://vtp6.github.io/Literature/VirgilAeneid6/ -https://vtp6.github.io/grammar/ -https://vtp6.github.io/grammar/LatinGCSENouns/ -https://vtp6.github.io/grammar/LatinGCSEVerbsActive/ -https://vtp6.github.io/grammar/LatinGCSEVerbsPassive/ -https://vtp6.github.io/grammar/LatinGCSEParticiples/ -https://vtp6.github.io/grammar/LatinGCSESubjunctive/ -https://vtp6.github.io/grammar/LatinGCSESubjunctiveUses/ -https://vtp6.github.io/grammar/SpanishGCSEVerbs/ -https://vtp6.github.io/grammar/SpanishGCSESubjunctiveUses/ -https://vtp6.github.io/grammar/GermanGCSEVerbs/ -https://vtp6.github.io/grammar/FrenchGCSEVerbs/ \ No newline at end of file +https://vtp6.rujulnayak.com/ \ No newline at end of file diff --git a/styles/folders.css b/styles/folders.css index 1994a0d..4b1335c 100644 --- a/styles/folders.css +++ b/styles/folders.css @@ -411,6 +411,10 @@ div#finish-div { button#classic-restart-button { float: right; } + + button#classic-retry-button { + float: left; + } } table#wrong-table {