commit 4de472e812872586c4955ca9ece1cdb049114d3d
parent 5b7e779179bb81e6f88fe8289dbd198358cf51a4
Author: AsherMorgan <59518073+AsherMorgan@users.noreply.github.com>
Date: Thu, 22 Oct 2020 11:52:19 -0700
Move congratulation page out of quizzer component.
Also updated tests, which used congratsActive to detect if Reset called.
Diffstat:
6 files changed, 164 insertions(+), 88 deletions(-)
diff --git a/css/home.css b/css/home.css
@@ -19,3 +19,12 @@
#home a {
margin-top: 10px;
}
+
+/* Congrats message */
+#congrats p {
+ margin: 20px;
+}
+#congrats button {
+ width: 100px;
+ height: 35px;
+}
diff --git a/css/quizzer.css b/css/quizzer.css
@@ -46,14 +46,11 @@
height: 25px;
}
-/* Feedback and Congrats*/
+/* Feedback */
#quizzerFeedback {
margin-top: 15px;
}
#quizzerFeedbackTerm {
text-decoration-line: underline;
cursor: pointer;
-}
-#quizzerCongrats {
- margin-top: 15px;
}
\ No newline at end of file
diff --git a/index.html b/index.html
@@ -21,7 +21,7 @@
<body onload="Load();">
<div id="app">
- <header @click="Back();">Spanish-Quizzer</header>
+ <header @click="Back">Spanish-Quizzer</header>
<main>
<noscript>
@@ -31,31 +31,33 @@
<p>You can still view the <a href="vocab/">vocab sets</a>, but you can't use the Quizzer or the Reference Tables.</p>
</div>
</noscript>
-
+
<div id="home" v-show="state === 'home'" hidden>
<h1>What do you want to study?</h1>
-
<div>
<button @click="category = 'verbs'; state = 'settings';">Conjugations</button>
<button @click="category = 'vocab'; state = 'settings';">Vocab</button>
</div>
-
<div>
<a href="reference.html">Or look something up in the Reference Tables</a>
</div>
</div>
-
-
+
<settings id="settings" v-show="state === 'settings'" hidden
:category="category" @start-session="StartSession">
</settings>
-
+
<quizzer id="quizzer" v-show="state === 'quizzer'" :active="state === 'quizzer'" hidden
- :starting-index="promptIndex" :starting-prompts="prompts" :settings="settings" @new-prompt="updateProgress">
+ :starting-index="promptIndex" :starting-prompts="prompts" :settings="settings"
+ @new-prompt="updateProgress" @finished-prompts="state = 'congrats';">
</quizzer>
+
+ <div id="congrats" v-show="state === 'congrats'" hidden>
+ <p>Congratulations, You finished all of the prompts!</p>
+ <button @click="Back">Continue</button>
+ </div>
</main>
-
-
+
<footer hidden>
<div id="share" hidden>
<a href="mailto:?Subject=Spanish-Quizzer&Body=https://ashermorgan.github.io/Spanish-Quizzer">Email</a>
diff --git a/js/home.js b/js/home.js
@@ -33,6 +33,7 @@ function loadVue() {
Back: function() {
switch (app.state) {
case "quizzer":
+ case "congrats":
app.state = "settings";
break;
case "settings":
@@ -113,6 +114,7 @@ function Load() {
document.getElementById("home").hidden = false;
document.getElementById("settings").hidden = false;
document.getElementById("quizzer").hidden = false;
+ document.getElementById("congrats").hidden = false;
document.querySelector("footer").hidden = false;
// Add event Listeners
diff --git a/js/quizzer.js b/js/quizzer.js
@@ -34,7 +34,6 @@ let quizzer = Vue.component("quizzer", {
index: this.startingIndex,
responce: "",
responceActive: true,
- congratsActive: false,
};
},
@@ -67,15 +66,13 @@ let quizzer = Vue.component("quizzer", {
// Show and hide elements
this.responceActive = true;
- this.congratsActive = false;
// Get new prompt
this.index++;
if (this.index === this.prompts.length) {
// The user just finished
- this.prompts = Shuffle(this.prompts);
- this.index = 0;
- this.congratsActive = true;
+ this.$emit("finished-prompts");
+ return;
}
// Emit new-prompt event
@@ -162,7 +159,6 @@ let quizzer = Vue.component("quizzer", {
// Give user feedback
if (!correct && (this.settings.onMissedPrompt === "Correct me" || this.settings.onMissedPrompt === "Tell me")) {
// Show and hide elements
- this.congratsActive = false;
this.responceActive = false;
try {
// Will fail if not mounted
@@ -283,7 +279,6 @@ let quizzer = Vue.component("quizzer", {
Incorrect.
</span>
</div>
- <div id="quizzerCongrats" class="good" v-show="congratsActive">Congratulations! You made it back to the beginning!</div>
</div>
`,
});
diff --git a/tests/test.quizzer.js b/tests/test.quizzer.js
@@ -40,83 +40,89 @@ describe("Quizzer", function() {
it("ResponceActive should be true", function() {
expect(Quizzer.responceActive).to.equal(true);
});
-
- it("CongratsActive should be true", function() {
- expect(Quizzer.congratsActive).to.equal(false);
- });
});
describe("Reset method", function() {
it("Shouldn't do anything if active is false", function() {
+ // Initialize quizzer
+ Quizzer.prompts = [0, 1];
+ Quizzer.index = 0;
+
// Run Reset
Quizzer.Reset();
// Assert nothing changed
- expect(Quizzer.prompts.length).to.equal(0);
+ expect(Quizzer.prompts).to.have.members([0, 1]);
expect(Quizzer.index).to.equal(0);
expect(Quizzer.responce).to.equal("");
expect(Quizzer.responceActive).to.equal(true);
- expect(Quizzer.congratsActive).to.equal(false);
});
- it("Should set responceActive to true", function() {
+ it("Should reset responce", function() {
// Initialize variables
Quizzer.active = true;
- Quizzer.responceActive = false;
+ Quizzer.responce = "test";
+ expect(Quizzer.responce).to.equal("test");
// Run reset
Quizzer.Reset();
- // Assert responceActive is true
- expect(Quizzer.responceActive).to.equal(true);
+ // Assert reset called
+ expect(Quizzer.responce).to.equal("");
});
-
- it("Should set congratsActive to false", function() {
+
+ it("Should set responceActive to true", function() {
// Initialize variables
Quizzer.active = true;
- Quizzer.congratsActive = true;
+ Quizzer.responceActive = false;
// Run reset
Quizzer.Reset();
- // Assert congratsActive is true
- expect(Quizzer.congratsActive).to.equal(false);
+ // Assert responceActive is true
+ expect(Quizzer.responceActive).to.equal(true);
});
- it("Should set congratsActive to true if on last term", function() {
+ it("Should emit 'new-prompts' event", function() {
// Initialize variables
Quizzer.active = true;
- Quizzer.prompts = [["A1", "A2", "A3", "A4"], ["B1", "B2", "B3", "B4"]];
- Quizzer.index = 1;
+ Quizzer.prompts = ["prompt 1", "prompt 2"];
+ Quizzer.index = 0;
+
+ // Override $emit method
+ let event = "";
+ Quizzer.$emit = function(name) {
+ event = name;
+ };
// Run reset
Quizzer.Reset();
- // Assert congratsActive is true
- expect(Quizzer.congratsActive).to.equal(true);
+ // Assert event emited
+ expect(event).to.equal("new-prompt");
});
- it("Should reset responce", function() {
+ it("Should emit 'finished-prompts' event if on last term", function() {
// Initialize variables
Quizzer.active = true;
- Quizzer.responce = "test"; // Set to empty string when reset is called
- expect(Quizzer.responce).to.equal("test");
+ Quizzer.prompts = ["prompt 1", "prompt 2"];
+ Quizzer.index = 1;
+
+ // Override $emit method
+ let event = "";
+ Quizzer.$emit = function(name) {
+ event = name;
+ };
// Run reset
Quizzer.Reset();
- // Assert reset called
- expect(Quizzer.responce).to.equal("");
+ // Assert event emited
+ expect(event).to.equal("finished-prompts");
});
});
describe("Submit method", function() {
- beforeEach(function() {
- // Initialize Vue to avoid document.getElementById errors
- loadVue();
- app.state = "verbQuizzer";
- });
-
it("Shouldn't do anything if active is false", function() {
// Initialize variables
Quizzer.responceActive = "test"; // Will be changed whether or not resopnce is correct
@@ -134,27 +140,37 @@ describe("Quizzer", function() {
Quizzer.prompts = [["A1", "A2", "A3", "A4"]]
Quizzer.responce = "A4";
+ // Override Reset method
+ let resetCalled = false;
+ Quizzer.Reset = function() {
+ resetCalled = true;
+ };
+
// Call Submit
Quizzer.Submit();
// Assert Reset called
- expect(Quizzer.congratsActive).to.equal(true); // Reset will show congrats
+ expect(resetCalled).to.equal(true);
});
it("Should call Continue if onMissedPrompt is set to 'Ignore it'", function() {
// Initialize variables
Quizzer.active = true;
- Quizzer.settings.repeatPrompts = "At the end";
- Quizzer.onMissedPrompt = "Ignore it";
- Quizzer.prompts = [["A1", "A2", "A3", "A4"], ["B1", "B2", "B3", "B4"]]
+ Quizzer.settings.onMissedPrompt = "Ignore it";
+ Quizzer.prompts = [["A1", "A2", "A3", "A4"], ["B1", "B2", "B3", "B4"]];
Quizzer.responce = "A5";
+ // Override Continue method
+ let continueCalled = false;
+ Quizzer.Continue = function() {
+ continueCalled = true;
+ };
+
// Call Submit
Quizzer.Submit();
// Assert Continue called
- console.log(Quizzer.prompts);
- expect(Quizzer.prompts).to.have.deep.members([["B1", "B2", "B3", "B4"], ["A1", "A2", "A3", "A4"]]); // Continue will modify prompts
+ expect(continueCalled).to.equal(true);
});
it("Should not call Reset if onMissedPrompt is set to 'Tell me'", function() {
@@ -164,11 +180,17 @@ describe("Quizzer", function() {
Quizzer.prompts = [["A1", "A2", "A3", "A4"]]
Quizzer.responce = "A5";
+ // Override Reset method
+ let resetCalled = false;
+ Quizzer.Reset = function() {
+ resetCalled = true;
+ };
+
// Call Submit
Quizzer.Submit();
- // Assert responceActive set to false
- expect(Quizzer.responceActive).to.equal(false);
+ // Assert Reset not called
+ expect(resetCalled).to.equal(false);
});
it("Should set responceActive to false if responce is incorrect", function() {
@@ -190,11 +212,17 @@ describe("Quizzer", function() {
Quizzer.prompts = [["A1", "A2", "A3", "A4"]]
Quizzer.responce = "A1, A2, A3, A4";
+ // Override Reset method
+ let resetCalled = false;
+ Quizzer.Reset = function() {
+ resetCalled = true;
+ };
+
// Call Submit
Quizzer.Submit();
// Assert responce accepted
- expect(Quizzer.congratsActive).to.equal(true); // Reset will show congrats
+ expect(resetCalled).to.equal(true);
});
it("Should accept multiple answers", function() {
@@ -203,11 +231,17 @@ describe("Quizzer", function() {
Quizzer.prompts = [["A1", "A2", "A3", "A1, A2, A3, A4"]]
Quizzer.responce = "A1, A2, A3, A4";
+ // Override Reset method
+ let resetCalled = false;
+ Quizzer.Reset = function() {
+ resetCalled = true;
+ };
+
// Call Submit
Quizzer.Submit();
- // Assert answer accepted
- expect(Quizzer.congratsActive).to.equal(true); // Reset will show congrats
+ // Assert responce accepted
+ expect(resetCalled).to.equal(true);
});
it("Should require all answers", function() {
@@ -229,11 +263,17 @@ describe("Quizzer", function() {
Quizzer.prompts = [["A1", "A2", "A3", "A4"]]
Quizzer.responce = "a4";
+ // Override Reset method
+ let resetCalled = false;
+ Quizzer.Reset = function() {
+ resetCalled = true;
+ };
+
// Call Submit
Quizzer.Submit();
// Assert responce accepted
- expect(Quizzer.congratsActive).to.equal(true); // Reset will show congrats
+ expect(resetCalled).to.equal(true);
});
it("Should accept responces with extra spaces", function() {
@@ -242,11 +282,17 @@ describe("Quizzer", function() {
Quizzer.prompts = [["A1", "A2", "A3", "A4"]]
Quizzer.responce = " a4 ";
+ // Override Reset method
+ let resetCalled = false;
+ Quizzer.Reset = function() {
+ resetCalled = true;
+ };
+
// Call Submit
Quizzer.Submit();
// Assert responce accepted
- expect(Quizzer.congratsActive).to.equal(true); // Reset will show congrats
+ expect(resetCalled).to.equal(true);
});
it("Should convert accented characters", function() {
@@ -255,11 +301,17 @@ describe("Quizzer", function() {
Quizzer.prompts = [["A1", "A2", "A3", "Á4"]]
Quizzer.responce = "a`4";
+ // Override Reset method
+ let resetCalled = false;
+ Quizzer.Reset = function() {
+ resetCalled = true;
+ };
+
// Call Submit
Quizzer.Submit();
// Assert responce accepted
- expect(Quizzer.congratsActive).to.equal(true); // Reset will show congrats
+ expect(resetCalled).to.equal(true);
});
});
@@ -268,17 +320,23 @@ describe("Quizzer", function() {
// Initialize variables
Quizzer.prompts = [["A1", "A2", "A3", "A4"], ["B1", "B2", "B3", "B4"]];
Quizzer.index = 0;
- Quizzer.settings.repeatPrompts = "At the end";
- Quizzer.responceActive = false; // Will be changed if Reset is called
+
+ // Override Reset method
+ let resetCalled = false;
+ Quizzer.Reset = function() {
+ resetCalled = true;
+ };
// Run Continue
Quizzer.Continue();
- // Assert nothing changed
+ // Assert prompts not changed
expect(Quizzer.prompts[0]).to.have.members(["A1", "A2", "A3", "A4"]);
expect(Quizzer.prompts[1]).to.have.members(["B1", "B2", "B3", "B4"]);
expect(Quizzer.index).to.equal(0);
- expect(Quizzer.responceActive).to.equal(false);
+
+ // Assert Reset not called
+ expect(resetCalled).to.equal(false);
});
it("Shouldn't change prompts if repeatPrompts is Never", function() {
@@ -407,36 +465,47 @@ describe("Quizzer", function() {
it("Should call Submit if responceActive is true", function() {
// Initialize variables
Quizzer.active = true;
- Quizzer.prompts = [["A1", "A2", "A3", "A4"], ["B1", "B2", "B3", "B4"]]; // Will change if Continue is called
- Quizzer.index = 0; // Will be changed if Reset is called
- Quizzer.responce = "A4";
- Quizzer.settings.repeatPrompts = "At the end";
Quizzer.responceActive = true;
+
+ // Override Submit and Continue methods
+ let submitCalled = false;
+ Quizzer.Submit = function() {
+ submitCalled = true;
+ };
+ let continueCalled = false;
+ Quizzer.Continue = function() {
+ continueCalled = true;
+ };
// Run Enter
Quizzer.Enter();
// Assert Submit called
- expect(Quizzer.prompts[0]).to.have.members(["A1", "A2", "A3", "A4"]);
- expect(Quizzer.prompts[1]).to.have.members(["B1", "B2", "B3", "B4"]);
- expect(Quizzer.index).to.equal(1);
+ expect(submitCalled).to.equal(true);
+ expect(continueCalled).to.equal(false);
});
it("Should call Continue if responceActive is false", function() {
// Initialize variables
Quizzer.active = true;
- Quizzer.prompts = [["A1", "A2", "A3", "A4"], ["B1", "B2", "B3", "B4"]]; // Will change if Continue is called
- Quizzer.index = 0; // Will be changed if Reset is called
- Quizzer.settings.repeatPrompts = "At the end";
Quizzer.responceActive = false;
+
+ // Override Submit and Continue methods
+ let submitCalled = false;
+ Quizzer.Submit = function() {
+ submitCalled = true;
+ };
+ let continueCalled = false;
+ Quizzer.Continue = function() {
+ continueCalled = true;
+ };
// Run Enter
Quizzer.Enter();
- // Assert Continue called
- expect(Quizzer.prompts[0]).to.have.members(["B1", "B2", "B3", "B4"]);
- expect(Quizzer.prompts[1]).to.have.members(["A1", "A2", "A3", "A4"]);
- expect(Quizzer.index).to.equal(0);
+ // Assert Submit called
+ expect(submitCalled).to.equal(false);
+ expect(continueCalled).to.equal(true);
});
});
@@ -460,16 +529,18 @@ describe("Quizzer", function() {
});
it("Should call Reset when set to true", async function() {
- // Initialize variables
- Quizzer.responce = "test"; // Set to empty string when reset is called
- expect(Quizzer.responce).to.equal("test");
+ // Override Reset method
+ let resetCalled = false;
+ Quizzer.Reset = function() {
+ resetCalled = true;
+ };
// Set active to true
Quizzer.active = true;
await Quizzer.$nextTick();
// Assert reset called
- expect(Quizzer.responce).to.equal("");
+ expect(resetCalled).to.equal(true);
});
});
