Skip to content

Commit b01d52d

Browse files
aomaitsaomaits
committed
corrected broken HTML link, fixed scoring element, added CSS styling
1 parent b8a722c commit b01d52d

File tree

6 files changed

+119
-68
lines changed

6 files changed

+119
-68
lines changed

‎highsScores-script.js renamed to ‎assets/highsScores-script.js

File renamed without changes.

‎script.js renamed to ‎assets/script.js

Lines changed: 103 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,62 @@
11

22
var beginButton = document.querySelector("#beginButton");
33
var startPage = document.querySelector("#startPage");
4+
var scoresLink = document.querySelector("#scoresLink");
5+
6+
var question3 = document.createElement("h2")
7+
8+
var totalCorrect = 0;
9+
var timeLeft = 31;
410

511
Quiz();
612

713
function Quiz() {
14+
scoresLink.setAttribute("style", "display:none");
15+
816
beginButton.addEventListener("click", function(){
917
startPage.style.display = "none";
1018
runQuiz();
11-
1219
})
1320

21+
function loadScoreScreen () {
22+
// stops the clock and hides it
23+
timeRemains = false;
24+
countdown.setAttribute("style", "display:none");
25+
// hides the second question screen
26+
question3.setAttribute("style", "display:none");
27+
28+
var finalScorePageHeader = document.createElement("h2");
29+
var finalScoreGreeting = document.createElement("p");
30+
var finalScoreEntry = document.createElement("input");
31+
var finalScoreButton = document.createElement("button");
32+
33+
calculateFinalScore ();
34+
35+
function calculateFinalScore () {
36+
finalScore = totalCorrect + (Math.floor((timeLeft/5)));
37+
console.log(timeLeft);
38+
39+
localStorage.setItem("High Score", JSON.stringify(finalScore));
40+
41+
finalScorePageHeader.textContent = "Your final score is " + finalScore;
42+
finalScoreGreeting.textContent = "Enter your initials below and click submit:";
43+
finalScoreButton.textContent = "SUBMIT";
44+
45+
finalScoreButton.setAttribute("type", "button");
46+
47+
body.appendChild(finalScorePageHeader);
48+
finalScorePageHeader.appendChild(finalScoreGreeting);
49+
finalScorePageHeader.appendChild(finalScoreEntry);
50+
finalScorePageHeader.appendChild(finalScoreButton);
51+
52+
function storeUserDetails() {
53+
localStorage.setItem("User Initials", JSON.stringify(finalScoreEntry.value));
54+
scoresLink.setAttribute("style", "display:block");
55+
}
56+
finalScoreButton.addEventListener("click", storeUserDetails);
57+
}
58+
}
59+
1460
// change this value to false to stop the clock
1561
var timeRemains=true;
1662

@@ -26,19 +72,17 @@ function Quiz() {
2672
clearInterval(timeInterval);
2773
countdown.textContent = " ";
2874
countdown.setAttribute("style", "color:red");
75+
loadScoreScreen();
2976
}
3077
}
3178

3279
}, 1000);
3380
}
34-
// var question1 = null;
35-
// var body = null;
36-
37-
var timeLeft = 31;
3881

3982
questions();
4083
function questions () {
4184
countdownTimer();
85+
4286
question1 = document.createElement("h2")
4387
var answerList1 = document.createElement ("button")
4488
var answerList2 = document.createElement ("button")
@@ -79,9 +123,8 @@ function Quiz() {
79123
answerList2.addEventListener("click", incorrectResponse);
80124
answerList4.addEventListener("click", incorrectResponse);
81125

82-
83126
function secondQuestion () {
84-
// hides the question and its answers
127+
// hides the previous question and its answers
85128
question1.setAttribute("style", "display:none");
86129

87130
var question2 = document.createElement("h2")
@@ -93,7 +136,7 @@ function Quiz() {
93136
question2.textContent = "JavaScript uses two equals signs ( == ) to signify value equality. Three equals signs ( === ) in JavaScript signifies what?";
94137
secondAnswerList1.textContent = "the HTML and CSS are the same";
95138
secondAnswerList2.textContent = "a value of true at the child element";
96-
secondAnswerList3.textContent = "value equality at the parent element";
139+
secondAnswerList3.textContent = "we can finally live at peace with one another";
97140
secondAnswerList4.textContent = "value equality and data type equality";
98141

99142
body.appendChild(question2);
@@ -105,65 +148,63 @@ function Quiz() {
105148
question2.setAttribute("style", "display:flex; justify-content:center; flex-direction:column");
106149
secondAnswerList1.setAttribute("style", "disply:block");
107150

108-
function secondCorrectResponse() {
109-
totalCorrect = totalCorrect + 1;
110-
loadScoreScreen();
111-
}
112-
113-
function secondIncorrectResponse() {
114-
totalCorrect = totalCorrect - 1;
115-
timeLeft = timeLeft - 10;
116-
loadScoreScreen();
117-
}
118-
119151
secondAnswerList4.addEventListener("click", secondCorrectResponse);
120152
secondAnswerList2.addEventListener("click", secondIncorrectResponse);
121153
secondAnswerList3.addEventListener("click", secondIncorrectResponse);
122154
secondAnswerList1.addEventListener("click", secondIncorrectResponse);
123-
124-
function loadScoreScreen () {
125-
// stops the clock and hides it
126-
timeRemains = false;
127-
countdown.setAttribute("style", "display:none");
128-
// hides the second question screen
129-
question2.setAttribute("style", "display:none");
130-
131-
var finalScorePageHeader = document.createElement("h2");
132-
var finalScoreGreeting = document.createElement("p");
133-
var finalScoreEntry = document.createElement("input");
134-
var finalScoreButton = document.createElement("button");
135-
136-
calculateFinalScore ();
137-
138-
function calculateFinalScore () {
139-
finalScore = totalCorrect + (Math.floor((timeLeft/5)));
140-
141-
localStorage.setItem("High Score", JSON.stringify(finalScore));
142-
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");
155+
156+
function secondCorrectResponse (){
157+
totalCorrect = totalCorrect + 1;
158+
thirdQuestion();
159+
}
160+
161+
function secondIncorrectResponse (){
162+
totalCorrect = totalCorrect - 1;
163+
timeLeft = timeLeft - 10;
164+
thirdQuestion();
165+
}
166+
167+
function thirdQuestion() {
168+
question2.setAttribute("style", "display:none");
169+
170+
171+
var thirdAnswerList1 = document.createElement ("button")
172+
var thirdAnswerList2 = document.createElement ("button")
173+
var thirdAnswerList3 = document.createElement ("button")
174+
var thirdAnswerList4 = document.createElement ("button")
175+
176+
question3.textContent = "The pipe symbol ( || ) can be used to evaluate two expressions in Javascript. It is used to check if...";
177+
thirdAnswerList1.textContent = "either of the two expressions is true";
178+
thirdAnswerList2.textContent = "both of the expressions are false";
179+
thirdAnswerList3.textContent = "one of the expressions has a data type of string";
180+
thirdAnswerList4.textContent = "punk rock is actually dead";
181+
182+
body.appendChild(question3);
183+
question3.appendChild(thirdAnswerList1);
184+
question3.appendChild(thirdAnswerList2);
185+
question3.appendChild(thirdAnswerList3);
186+
question3.appendChild(thirdAnswerList4);
187+
188+
question3.setAttribute("style", "display:flex; justify-content:center; flex-direction:column");
189+
thirdAnswerList1.setAttribute("style", "disply:block");
190+
191+
thirdAnswerList1.addEventListener("click", thirdCorrectResponse);
192+
thirdAnswerList4.addEventListener("click", thirdIncorrectResponse);
193+
thirdAnswerList2.addEventListener("click", thirdIncorrectResponse);
194+
thirdAnswerList3.addEventListener("click", thirdIncorrectResponse);
148195

149-
body.appendChild(finalScorePageHeader);
150-
finalScorePageHeader.appendChild(finalScoreGreeting);
151-
finalScorePageHeader.appendChild(finalScoreEntry);
152-
finalScorePageHeader.appendChild(finalScoreButton);
153-
154-
function storeUserDetails(event) {
155-
event.preventDefault();
156-
localStorage.setItem("User Initials", JSON.stringify(finalScoreEntry.value));
157-
}
158-
finalScoreButton.addEventListener("click", storeUserDetails);
159-
}
160-
}
196+
function thirdCorrectResponse (){
197+
totalCorrect = totalCorrect + 1;
198+
loadScoreScreen();
199+
}
200+
201+
function thirdIncorrectResponse (){
202+
totalCorrect = totalCorrect - 1;
203+
timeLeft = timeLeft - 10;
204+
loadScoreScreen();
161205
}
162206
}
207+
}
208+
}
163209
}
164-
}
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)
210+
}

‎assets/style.css

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
* {
2+
background-color: rgb(102, 102, 102);
3+
color: aquamarine;
4+
text-align: center;
5+
}

‎highScores.html

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,16 @@
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>Quiz High Scores</title>
7-
<link rel="stylesheet" type="text/css" href="./style.css">
7+
<link rel="stylesheet" type="text/css" href="./assets/style.css">
88
</head>
99
<body>
1010
<h1> High Scores! </h1>
1111
<p id="initials"></p>
1212
<p id="scores"></p>
13-
<script src="highsScores-script.js"></script>
13+
14+
<article>
15+
<a href="./index.html">TAKE THE QUIZ AGAIN</a>
16+
</article>
17+
<script src="./assets/highsScores-script.js"></script>
1418
</body>
1519
</html>

‎index.html

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title> Coding Quiz Challenge</title>
7-
<link rel="stylesheet" type="text/css" href="./style.css">
7+
<link rel="stylesheet" type="text/css" href="./assets/style.css">
88
</head>
99
<body>
1010
<header>
@@ -15,10 +15,11 @@ <h1>Coding Quiz Challenge</h1>
1515
<p>Try the coding quiz! Select all the correct answers and get the highest score!</p>
1616
<button id="beginButton" type="button">BEGIN</button>
1717
</div>
18-
<section></section>
1918

19+
<article id="scoresLink">
20+
<a href="./highScores.html">HIGH SCORES!</a>
21+
</article>
2022

21-
22-
<script src="./script.js"></script>
23+
<script src="./assets/script.js"></script>
2324
</body>
2425
</html>

‎style.css

Whitespace-only changes.

0 commit comments

Comments
 (0)