commit 0c8c77af61612c0e7702a3953b22d9beee605e80
parent 166299c5d943cbb8253584c21bcba7fa6558c574
Author: AsherMorgan <59518073+AsherMorgan@users.noreply.github.com>
Date: Tue, 17 Mar 2020 12:28:45 -0700
Improve interface.
Diffstat:
3 files changed, 62 insertions(+), 54 deletions(-)
diff --git a/Spanish Quizzer.js b/Spanish Quizzer.js
@@ -1,14 +1,14 @@
// Declare global variables
-var Sets; // List of parsed sets
-var Terms; // List of filtered terms
-var Term = 0; // Index of current term
+var Sets; // List of parsed sets
+var Terms; // List of filtered terms
+var Term; // Index of current term
// Load the document
function Load() {
// Add event Listener
- var input = document.getElementById("input");
+ var input = document.getElementById("quizzerInput");
input.addEventListener("keydown", function (e) {
if (e.keyCode === 13) {
// Key was enter
@@ -22,7 +22,7 @@ function Load() {
});
// Show and hide elements
- document.getElementById("welcome").hidden = false;
+ document.getElementById("settings").hidden = false;
document.getElementById("quizzer").hidden = true;
document.getElementById("settingsError").textContent = "";
@@ -115,19 +115,18 @@ function ShuffleTerms() {
// Start the quizzer
-function Start()
-{
+function Start() {
// Filter and load Sets into Terms
Terms = [];
- Terms.push(...Filter.GetFilter(document.getElementById("mode0").value).Apply(Sets[0]));
- Terms.push(...Filter.GetFilter(document.getElementById("mode1").value).Apply(Sets[1]));
- Terms.push(...Filter.GetFilter(document.getElementById("mode2").value).Apply(Sets[2]));
- Terms.push(...Filter.GetFilter(document.getElementById("mode3").value).Apply(Sets[3]));
- Terms.push(...Filter.GetFilter(document.getElementById("mode4").value).Apply(Sets[4]));
- Terms.push(...Filter.GetFilter(document.getElementById("mode5").value).Apply(Sets[5]));
- Terms.push(...Filter.GetFilter(document.getElementById("mode6").value).Apply(Sets[6]));
- Terms.push(...Filter.GetFilter(document.getElementById("mode7").value).Apply(Sets[7]));
- Terms.push(...Filter.GetFilter(document.getElementById("mode8").value).Apply(Sets[8]));
+ Terms.push(...Filter.GetFilter(document.getElementById("settingsMode0").value).Apply(Sets[0]));
+ Terms.push(...Filter.GetFilter(document.getElementById("settingsMode1").value).Apply(Sets[1]));
+ Terms.push(...Filter.GetFilter(document.getElementById("settingsMode2").value).Apply(Sets[2]));
+ Terms.push(...Filter.GetFilter(document.getElementById("settingsMode3").value).Apply(Sets[3]));
+ Terms.push(...Filter.GetFilter(document.getElementById("settingsMode4").value).Apply(Sets[4]));
+ Terms.push(...Filter.GetFilter(document.getElementById("settingsMode5").value).Apply(Sets[5]));
+ Terms.push(...Filter.GetFilter(document.getElementById("settingsMode6").value).Apply(Sets[6]));
+ Terms.push(...Filter.GetFilter(document.getElementById("settingsMode7").value).Apply(Sets[7]));
+ Terms.push(...Filter.GetFilter(document.getElementById("settingsMode8").value).Apply(Sets[8]));
// Shuffle terms
ShuffleTerms();
@@ -139,10 +138,11 @@ function Start()
}
// Show and hide elements
- document.getElementById("welcome").hidden = true;
+ document.getElementById("settings").hidden = true;
document.getElementById("quizzer").hidden = false;
// Give the user a prompt
+ Term = -1;
Reset();
}
@@ -151,10 +151,10 @@ function Start()
// Give the user a new prompt
function Reset() {
// Show and hide elements
- document.getElementById("input").readOnly = false;
- document.getElementById("submitButton").disabled = false;
- document.getElementById("errorText").hidden = true;
- document.getElementById("continueButton").hidden = true;
+ document.getElementById("quizzerInput").readOnly = false;
+ document.getElementById("quizzerSubmit").disabled = false;
+ document.getElementById("quizzerFeedback").hidden = true;
+ document.getElementById("quizzerContinue").hidden = true;
// Get prompt
Term++;
@@ -162,14 +162,15 @@ function Reset() {
ShuffleTerms();
Term = 0;
}
+ document.getElementById("quizzerProgress").textContent = `${Term + 1} / ${Terms.length}`;
// Set prompt
- document.getElementById("promptType").textContent = Terms[Term][0] + ": ";
- document.getElementById("prompt").textContent = Terms[Term][1];
- document.getElementById("inputType").textContent = Terms[Term][2] + ": ";
+ document.getElementById("quizzerPromptType").textContent = `${Terms[Term][0]}: `;
+ document.getElementById("quizzerPrompt").textContent = Terms[Term][1];
+ document.getElementById("quizzerInputType").textContent = `${Terms[Term][2]}: `;
// Reset responce
- document.getElementById("input").value = "";
+ document.getElementById("quizzerInput").value = "";
}
@@ -177,7 +178,7 @@ function Reset() {
// Check the user's responce
function Check() {
// Prepare responce
- var responce = document.getElementById("input").value.toLowerCase(); // Make responce lowercase
+ var responce = document.getElementById("quizzerInput").value.toLowerCase(); // Make responce lowercase
responce = responce.replace("a`", "á"); // Apply accented a shortcut
responce = responce.replace("e`", "é"); // Apply accented e shortcut
responce = responce.replace("i`", "í"); // Apply accented i shortcut
@@ -194,14 +195,14 @@ function Check() {
// Check responce
if (!responces.includes(Terms[Term][3].toLowerCase())) {
// Responce was incorrect
- document.getElementById("errorText").textContent = "The correct answer is " + Terms[Term][3] + ".";
+ document.getElementById("quizzerFeedback").textContent = `The correct answer is ${Terms[Term][3].toLowerCase()}.`;
// Show and hide elements
- document.getElementById("input").readOnly = true;
- document.getElementById("submitButton").disabled = true;
- document.getElementById("errorText").hidden = false;
- document.getElementById("continueButton").hidden = false;
- document.getElementById("input").focus();
+ document.getElementById("quizzerInput").readOnly = true;
+ document.getElementById("quizzerSubmit").disabled = true;
+ document.getElementById("quizzerFeedback").hidden = false;
+ document.getElementById("quizzerContinue").hidden = false;
+ document.getElementById("quizzerInput").focus();
}
else {
// Responce was correct
diff --git a/Styles.css b/Styles.css
@@ -2,6 +2,7 @@
font-family: Arial;
font-size: 25px;
font-weight: bold;
+ cursor: pointer;
}
.label {
diff --git a/index.html b/index.html
@@ -3,26 +3,30 @@
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, user-scalable=no"/>
- <title>Spanish-Quizzer v2.1.0</title>
+ <title>Spanish-Quizzer</title>
<link rel="stylesheet" href="Styles.css">
- <script src="Spanish Quizzer.js"></script>
- <script src="Filter.js"></script>
<script src="https://unpkg.com/papaparse@5.1.1/papaparse.min.js"></script>
+ <script src="Filter.js"></script>
+ <script src="Spanish Quizzer.js"></script>
</head>
<body onload="Load()">
<div style="text-align: center;">
<label class="title" onclick="Load()">Spanish-Quizzer v2.1.0</label>
+ <noscript>
+ <br/>
+ <label class="error">You must have JavaScript enabled to run Spanish-Quizzer.</label>
+ </noscript>
</div>
-
- <div id="welcome" style="text-align: center;">
+
+ <div id="settings" style="text-align: center;">
<br/>
<label class="label">Choose the terms that you want to study.</label>
<br/>
<br/>
<div>
<label class="text">Verbs: </label>
- <select id="mode0">
+ <select id="settingsMode0">
<option value="None">None</option>
<option value="VerbsConjugations">All Conjugations</option>
<option value="2FieldsAll">Definitions</option>
@@ -35,14 +39,14 @@
</div>
<div>
<label class="text">Prepositions: </label>
- <select id="mode1">
+ <select id="settingsMode1">
<option value="None">None</option>
<option value="2FieldsAll">All</option>
</select>
</div>
<div>
<label class="text">Weather: </label>
- <select id="mode2">
+ <select id="settingsMode2">
<option value="None">None</option>
<option value="2FieldsAll">All</option>
<option value="2FieldsNouns">Nouns</option>
@@ -52,7 +56,7 @@
</div>
<div>
<label class="text">Family: </label>
- <select id="mode3">
+ <select id="settingsMode3">
<option value="None">None</option>
<option value="2FieldsAll">All</option>
<option value="2FieldsNouns">Nouns</option>
@@ -61,7 +65,7 @@
</div>
<div>
<label class="text">Cloths: </label>
- <select id="mode4">
+ <select id="settingsMode4">
<option value="None">None</option>
<option value="2FieldsAll">All</option>
<option value="2FieldsNouns">Nouns</option>
@@ -70,7 +74,7 @@
</div>
<div>
<label class="text">Nature: </label>
- <select id="mode5">
+ <select id="settingsMode5">
<option value="None">None</option>
<option value="2FieldsAll">All</option>
<option value="2FieldsNouns">Nouns</option>
@@ -80,7 +84,7 @@
</div>
<div>
<label class="text">House: </label>
- <select id="mode6">
+ <select id="settingsMode6">
<option value="None">None</option>
<option value="2FieldsAll">All</option>
<option value="2FieldsNouns">Nouns</option>
@@ -90,7 +94,7 @@
</div>
<div>
<label class="text">Vacation: </label>
- <select id="mode7">
+ <select id="settingsMode7">
<option value="None">None</option>
<option value="2FieldsAll">All</option>
<option value="2FieldsNouns">Nouns</option>
@@ -100,7 +104,7 @@
</div>
<div>
<label class="text">Childhood: </label>
- <select id="mode8">
+ <select id="settingsMode8">
<option value="None">None</option>
<option value="2FieldsAll">All</option>
<option value="2FieldsNouns">Nouns</option>
@@ -114,18 +118,20 @@
<label id="settingsError" class="error"></label>
</div>
- <div id="quizzer" style="text-align: center">
+ <div id="quizzer" style="text-align: center" hidden="false">
+ <br/>
+ <label id="quizzerProgress" class="label"></label>
<br/>
- <label id="promptType" class="label"></label>
- <label id="prompt"></label>
+ <label id="quizzerPromptType" class="label"></label>
+ <label id="quizzerPrompt" class="text"></label>
<br/>
- <label id="inputType" class="label"></label>
- <input id="input" type="text" autocomplete="off" spellcheck="false" autocorrect="off">
- <button id="submitButton" onclick="Check()">Submit</button>
+ <label id="quizzerInputType" class="label"></label>
+ <input id="quizzerInput" type="text" autocomplete="off" spellcheck="false" autocorrect="off">
+ <button id="quizzerSubmit" onclick="Check()">Submit</button>
<br/>
<br/>
- <label id="errorText" class="error" ></label>
- <button id="continueButton" onclick="Reset()">Continue</button>
+ <label id="quizzerFeedback" class="error"></label>
+ <button id="quizzerContinue" onclick="Reset()">Continue</button>
</div>
</body>
</html>
\ No newline at end of file
