Skip to content

Commit 7b66e3e

Browse files
KendallDoesCodingKendallDoesCoding
committed
Merge branch 'main' into bonuspoints
2 parents acc6524 + c553fe0 commit 7b66e3e

5 files changed

Lines changed: 76 additions & 39 deletions

File tree

‎css/index.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
h1 {
1717
font-size: 5.4rem;
1818
color: #fff;
19-
margin-bottom: 5rem;
19+
margin-bottom: 3rem;
2020
text-align: center;
2121
}
2222

‎js/QuizClass.js‎

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,18 @@
1+
/**
2+
* @dev Base class for every game, gets all the data that will use, and once the question is answered, everything is updated while poping out the question object from the array of quiestions, when it ends the resulting score is stored in local storage to keep tract of it while we change pages
3+
*/
14
export class Quiz {
25
constructor(dataQA = []) {
36
this.dataQA = dataQA;
4-
// initial game values
57
this.QUESTION_VALUE = 100;
68
this.QUESTIONS_AMOUNT = dataQA.length;
79
this.barPercetage = 0;
810
this.score = 0;
911
this.answer = "";
1012
this.canClick = true;
13+
this.noOfCorrect = 0;
14+
this.TOTAL_CORRECT = 0;
15+
1116
this.correctStreak = 0; // Tracks consecutive correct answers
1217
this.startTime = 0; // Stores the start time of each question
1318
// runs here because we want to load the first round of questions
@@ -60,8 +65,18 @@ export class Quiz {
6065

6166
_endGame() {
6267
window.localStorage.setItem("mostRecentScore", this.score);
68+
window.localStorage.setItem("noofanswerscorrect", this.noOfCorrect);
69+
window.localStorage.setItem("noofquestions", this.QUESTIONS_AMOUNT);
70+
6371
window.location.assign("/pages/end.html");
6472
}
73+
74+
75+
76+
_updateCorrectCount() {
77+
this.TOTAL_CORRECT++;
78+
console.log("Total Correct:", this.TOTAL_CORRECT);
79+
}
6580

6681
checkAnswer(selected = 0, correct = 0) {
6782
const p = document.querySelector(`[data-number="${selected}"]`);
@@ -73,10 +88,13 @@ export class Quiz {
7388
if (selected === correct) {
7489
p.parentElement.classList.add("correct");
7590
this.score += this.QUESTION_VALUE;
91+
this.noOfCorrect++;
92+
this._updateCorrectCount();
7693
this.calculateTimeBonus();
7794
this.updateStreak();
7895
} else {
7996
p.parentElement.classList.add("incorrect");
97+
this.score -= this.QUESTION_VALUE;
8098
}
8199

82100
document.getElementById("score").textContent = this.score;

‎js/end.js‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,17 @@
11
const username = document.querySelector("#username");
22
const saveScoreBtn = document.querySelector("#saveScoreBtn");
33
const finalScore = document.querySelector("#finalScore");
4+
const noScore = document.querySelector("#noScore");
45
const mostRecentScore = localStorage.getItem("mostRecentScore");
6+
const noOfCorrect = localStorage.getItem("noofanswerscorrect");
7+
const totalQuestions = localStorage.getItem("noofquestions");
58

69
const highScores = JSON.parse(localStorage.getItem("highScores")) || [];
710

811
const MAX_HIGH_SCORES = 5;
912

1013
finalScore.innerText = mostRecentScore;
14+
noScore.innerText = `${noOfCorrect}/${totalQuestions}`;
1115

1216
username.addEventListener("keyup", () => {
1317
saveScoreBtn.disabled = !username.value;
@@ -26,8 +30,12 @@ saveHighScore = (e) => {
2630
highScores.sort((a, b) => {
2731
return b.score - a.score;
2832
});
29-
highScores.splice(5);
33+
highScores.splice(MAX_HIGH_SCORES);
3034

3135
localStorage.setItem("highScores", JSON.stringify(highScores));
3236
window.location.assign("/");
3337
};
38+
39+
function goBack(n) {
40+
history.go(n);
41+
}

‎pages/end.html‎

Lines changed: 44 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,52 @@
11
<!DOCTYPE html>
22
<html lang="en">
33

4-
<head>
5-
<meta charset="UTF-8" />
6-
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
7-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
8-
9-
<title>End Page</title>
10-
11-
<script src="../js/end.js" defer></script>
12-
<link rel="stylesheet" href="../css/index.css" />
13-
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"
14-
integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous" />
15-
</head>
16-
17-
<body>
18-
<div class="container">
19-
<div id="end" class="flex-center flex-column">
20-
<h1 id="finalScore">0</h1>
21-
<form class="end-form-container">
22-
<h2 id="end-text">Enter your name below to save your score!</h2>
23-
<input type="text" name="name" id="username" placeholder="Enter your name" />
24-
<button class="btn" id="saveScoreBtn" type="submit" onclick="saveHighScore(event)" disabled>
25-
Save
26-
</button>
27-
</form>
28-
29-
<p class="btn" onclick="goBack(-1)">Play Again</p>
30-
31-
<p onclick="goBack(-2)" class="btn" target="_blank">Go back to Quiz Home Page Menu<i class="fas fa-home"></i>
32-
</p>
33-
<a href="/rating.html" class="btn" target="_blank">Please rate our quiz!<i class="far fa-star"></i></a>
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
8+
9+
<title>End Page</title>
10+
11+
<script src="../js/end.js" defer></script>
12+
<link rel="stylesheet" href="../css/index.css" />
13+
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"
14+
integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous" />
15+
</head>
16+
17+
<body>
18+
<div class="container">
19+
<div id="end" class="flex-center flex-column">
20+
<h1 id="finalScore">0</h1>
21+
<div style="color: white; font-size: 30px; margin-bottom: 1rem;">
22+
<p>You got <span id="noScore" style="font-size: 30px;">0</span> correct. </p>
23+
3424
</div>
25+
<form class="end-form-container">
26+
<h2 id="end-text">Enter your name below to save your score!</h2>
27+
<input type="text" name="name" id="username" placeholder="Enter your name" />
28+
29+
<button class="btn" id="saveScoreBtn" type="submit" onclick="saveHighScore(event)" disabled>
30+
Save
31+
</button>
32+
</form>
33+
34+
<p class="btn" onclick="goBack(-1)">Play Again</p>
35+
36+
<p onclick="goBack(-2)" class="btn" target="_blank">Go back to Quiz Home Page Menu<i class="fas fa-home"></i>
37+
</p>
38+
<a href="/rating.html" class="btn" target="_blank">Please rate our quiz!<i class="far fa-star"></i></a>
3539
</div>
36-
</body>
40+
</div>
41+
</body>
42+
43+
<script>
44+
const totalScore = localStorage.getItem("noofquestions");
45+
document.getElementById("totalScore").textContent = totalScore;
3746

38-
<script>
39-
function goBack(n) {
40-
history.go(n);
41-
}
42-
</script>
47+
function goBack(n) {
48+
history.go(n);
49+
}
50+
</script>
4351

4452
</html>

‎pages/game.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,11 +14,14 @@
1414
import { gameQA } from "../js/data/index.js";
1515
import { Quiz } from "../js/QuizClass.js";
1616

17+
18+
1719
const QuizInstance = new Quiz(gameQA);
1820

1921
document.addEventListener("click", (e) => {
2022
if (e.target.dataset.number) {
2123
QuizInstance.checkAnswer(+e.target.dataset.number, QuizInstance.answer);
24+
2225
}
2326
});
2427
</script>

0 commit comments

Comments
 (0)