Skip to content

Commit c8e2558

Browse files
aomaitsaomaits
committed
added high scores page and question
1 parent 7624531 commit c8e2558

File tree

3 files changed

+113
-82
lines changed

3 files changed

+113
-82
lines changed

‎highScores.html

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Quiz High Scores</title>
7+
<link rel="stylesheet" type="text/css" href="./style.css">
8+
</head>
9+
<body>
10+
<h1> High Scores! </h1>
11+
<p id="initials"></p>
12+
<p id="scores"></p>
13+
<script src="highsScores-script.js"></script>
14+
</body>
15+
</html>

‎highsScores-script.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
function addHighScores() {
2+
var scores = JSON.parse(localStorage.getItem("High Score"));
3+
document.getElementById("scores").innerHTML = "High Score: " + scores;
4+
5+
var initials = JSON.parse(localStorage.getItem("User Initials"));
6+
document.getElementById("initials").innerHTML = "User Initals: " + initials;
7+
}
8+
addHighScores();

‎script.js

Lines changed: 90 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,9 @@ function Quiz() {
1010
runQuiz();
1111

1212
})
13-
}
13+
1414
// change this value to false to stop the clock
15-
var timeRemains=true;
16-
var finalScore;
15+
var timeRemains=true;
1716

1817
function runQuiz () {
1918

@@ -32,21 +31,21 @@ function Quiz() {
3231

3332
}, 1000);
3433
}
35-
var question1 = null;
36-
var body = null;
34+
// var question1 = null;
35+
// var body = null;
3736

38-
var timeLeft = 21;
37+
var timeLeft = 31;
3938

40-
firstQuestion();
41-
function firstQuestion () {
39+
questions();
40+
function questions () {
4241
countdownTimer();
4342
question1 = document.createElement("h2")
4443
var answerList1 = document.createElement ("button")
4544
var answerList2 = document.createElement ("button")
4645
var answerList3 = document.createElement ("button")
4746
var answerList4 = document.createElement ("button")
4847
var totalCorrect = 0;
49-
var totalIncorrect = 0;
48+
5049
body = document.body;
5150

5251
question1.textContent = "JavaScript is a widely used scripting language that adds _______ to a webpage.";
@@ -64,98 +63,107 @@ function Quiz() {
6463
question1.setAttribute("style", "display:flex; justify-content:center; flex-direction:column");
6564
answerList1.setAttribute("style", "disply:block");
6665

66+
function correctResponse (){
67+
totalCorrect = totalCorrect + 1;
68+
secondQuestion();
69+
}
70+
71+
function incorrectResponse (){
72+
totalCorrect = totalCorrect - 1;
73+
timeLeft = timeLeft - 10;
74+
secondQuestion();
75+
}
76+
6777
answerList3.addEventListener("click", correctResponse);
6878
answerList1.addEventListener("click", incorrectResponse);
6979
answerList2.addEventListener("click", incorrectResponse);
7080
answerList4.addEventListener("click", incorrectResponse);
81+
7182

72-
function incorrectResponse () {
73-
totalIncorrect = totalIncorrect + 1;
74-
totalCorrect = totalCorrect - totalIncorrect
75-
76-
loadScoreScreen();
77-
function loadScoreScreen () {
78-
calculateFinalScore ();
79-
// stops the clock and hides it
80-
timeRemains = false;
81-
countdown.setAttribute("style", "display:none");
82-
83+
function secondQuestion () {
8384
// hides the question and its answers
84-
question1.setAttribute("style", "display:none");
85-
var finalScorePageHeader = document.createElement("h2");
86-
var finalScoreGreeting = document.createElement("p");
87-
var finalScoreEntry = document.createElement("input");
88-
89-
function calculateFinalScore () {
90-
if (totalCorrect <0) {
91-
totalCorrect = 0;
92-
}
93-
finalScore = totalCorrect + (Math.floor((timeLeft/5)));
94-
console.log("final score is: " + finalScore);
95-
console.log(timeLeft);
96-
console.log(totalCorrect);
97-
}
98-
99-
finalScorePageHeader.textContent = "Great Work!";
100-
finalScoreGreeting.textContent = "Your final score is " + finalScore;
85+
question1.setAttribute("style", "display:none");
86+
87+
var question2 = document.createElement("h2")
88+
var secondAnswerList1 = document.createElement ("button")
89+
var secondAnswerList2 = document.createElement ("button")
90+
var secondAnswerList3 = document.createElement ("button")
91+
var secondAnswerList4 = document.createElement ("button")
92+
93+
question2.textContent = "JavaScript uses two equals signs ( == ) to signify value equality. Three equals signs ( === ) in JavaScript signifies what?";
94+
secondAnswerList1.textContent = "the HTML and CSS are the same";
95+
secondAnswerList2.textContent = "a value of true at the child element";
96+
secondAnswerList3.textContent = "value equality at the parent element";
97+
secondAnswerList4.textContent = "value equality and data type equality";
98+
99+
body.appendChild(question2);
100+
question2.appendChild(secondAnswerList1);
101+
question2.appendChild(secondAnswerList2);
102+
question2.appendChild(secondAnswerList3);
103+
question2.appendChild(secondAnswerList4);
104+
105+
question2.setAttribute("style", "display:flex; justify-content:center; flex-direction:column");
106+
secondAnswerList1.setAttribute("style", "disply:block");
107+
108+
function secondCorrectResponse() {
109+
totalCorrect = totalCorrect + 1;
110+
loadScoreScreen();
111+
}
101112

102-
finalScoreEntry.setAttribute("type", "text");
103-
104-
body.appendChild(finalScorePageHeader);
105-
finalScorePageHeader.appendChild(finalScoreGreeting);
106-
finalScorePageHeader.appendChild(finalScoreEntry);
113+
function secondIncorrectResponse() {
114+
totalCorrect = totalCorrect - 1;
115+
timeLeft = timeLeft - 10;
116+
loadScoreScreen();
107117
}
108-
}
109118

110-
function correctResponse () {
111-
totalCorrect = totalCorrect + 1;
112-
totalCorrect = totalCorrect - totalIncorrect
113-
114-
loadScoreScreen();
119+
secondAnswerList4.addEventListener("click", secondCorrectResponse);
120+
secondAnswerList2.addEventListener("click", secondIncorrectResponse);
121+
secondAnswerList3.addEventListener("click", secondIncorrectResponse);
122+
secondAnswerList1.addEventListener("click", secondIncorrectResponse);
123+
115124
function loadScoreScreen () {
116-
calculateFinalScore ();
117-
// stops the clock and hides it
125+
// stops the clock and hides it
118126
timeRemains = false;
119127
countdown.setAttribute("style", "display:none");
120-
121-
// hides the question and its answers
122-
question1.setAttribute("style", "display:none");
128+
// hides the second question screen
129+
question2.setAttribute("style", "display:none");
130+
123131
var finalScorePageHeader = document.createElement("h2");
124132
var finalScoreGreeting = document.createElement("p");
125133
var finalScoreEntry = document.createElement("input");
126-
134+
var finalScoreButton = document.createElement("button");
135+
136+
calculateFinalScore ();
137+
127138
function calculateFinalScore () {
128-
if (totalCorrect <0) {
129-
totalCorrect = 0;
130-
}
131139
finalScore = totalCorrect + (Math.floor((timeLeft/5)));
132-
console.log("final score is: " + finalScore);
133-
console.log(timeLeft);
134-
console.log(totalCorrect);
135-
}
136140

137-
finalScorePageHeader.textContent = "Great Work!";
138-
finalScoreGreeting.textContent = "Your final score is " + finalScore;
139-
140-
finalScoreEntry.setAttribute("type", "text");
141+
localStorage.setItem("High Score", JSON.stringify(finalScore));
141142

142-
body.appendChild(finalScorePageHeader);
143-
finalScorePageHeader.appendChild(finalScoreGreeting);
144-
finalScorePageHeader.appendChild(finalScoreEntry);
145-
}
146-
}
143+
finalScorePageHeader.textContent = "Your final score is " + finalScore;
144+
finalScoreGreeting.textContent = "Enter your initials below:";
145+
finalScoreButton.textContent = "SUBMIT";
146+
147+
finalScoreButton.setAttribute("type", "button");
147148

148-
// TO DO LIST:
149-
// Capture the final score, stash that in local storage
150-
// Get an input from the form (user's initials), stash that in local storage
151-
// create the scores page (separate HTML file, hence separate JS file?), button to link back to the main page from there too, "get" values from the local storage, scores stacked up based on highest to low in the array?
152-
// Add link to the scores page from the initiation
153-
// CSS styling for the quiz itself
154-
155-
}
149+
body.appendChild(finalScorePageHeader);
150+
finalScorePageHeader.appendChild(finalScoreGreeting);
151+
finalScorePageHeader.appendChild(finalScoreEntry);
152+
finalScorePageHeader.appendChild(finalScoreButton);
156153

157-
158-
159-
160-
// here we'll code what actually happens once the user clicks on the begin button
154+
function storeUserDetails(event) {
155+
event.preventDefault();
156+
localStorage.setItem("User Initials", JSON.stringify(finalScoreEntry.value));
157+
}
158+
finalScoreButton.addEventListener("click", storeUserDetails);
159+
}
160+
}
161+
}
162+
}
163+
}
161164
}
165+
166+
// TO DO LIST:
167+
// IT'S NOT KEEPING SCORE CORRECTLY!
168+
// have to add another couple questions
169+
// have to link to the scores page (at least from the final page)

0 commit comments

Comments
 (0)