Skip to content

Commit f400c47

Browse files
NorthStarPalisadesNorthStarPalisades
committed
Submitting final files
1 parent ae5d388 commit f400c47

File tree

3 files changed

+120
-39
lines changed

3 files changed

+120
-39
lines changed

‎assets/css/style.css

+28-4
Original file line numberDiff line numberDiff line change
@@ -64,25 +64,49 @@ body {
6464

6565
/** QUESTIONAIRE SECTION **/
6666
.container-questions {
67+
display: flex;
68+
flex-wrap: wrap;
69+
flex-direction: column;
70+
justify-content: center;
71+
justify-items: center;
72+
vertical-align: middle;
73+
width: 100%;
74+
vertical-align: middle;
75+
align-items: center;
76+
}
77+
.container-questions .questionTitle{
6778
display: flex;
6879
flex-wrap: wrap;
6980
justify-content: center;
7081
text-align: center;
7182
width: 100%;
83+
line-height: auto;
84+
align-items: center;
85+
}
86+
.container-questions .timerCountdown {
87+
display: flex;
88+
flex-wrap: wrap;
89+
justify-content: center;
90+
text-align: center;
91+
width: 100%;
92+
line-height: auto;
93+
top: 0;
94+
right: 300px;
7295
}
7396

7497
/** RESULTS SECTION **/
7598
.results {
7699
display: flex;
77100
flex-wrap: wrap;
78101
flex-direction: column;
79-
justify-content: center;
102+
justify-content: space-around;
80103
justify-items: center;
81104
vertical-align: middle;
82105
width: 100%;
83106
vertical-align: middle;
107+
align-items: center;
84108
}
85-
.results h2{
109+
.results h2 {
86110
display: flex;
87111
flex-wrap: wrap;
88112
flex-direction: column;
@@ -121,7 +145,7 @@ body {
121145
margin-bottom: 15px;
122146
width: 20%;
123147
}
124-
.results .submitBtn{
148+
.results .submitBtn {
125149
width: auto;
126150
padding: 10px 20px 10px 20px;
127151
color: #ffffff;
@@ -130,7 +154,7 @@ body {
130154
font-size: 18px;
131155
margin: auto;
132156
}
133-
.results .submitBtn:hover{
157+
.results .submitBtn:hover {
134158
width: auto;
135159
padding: 10px 20px 10px 20px;
136160
color: #ffffff;

‎assets/js/script.js

+86-31
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,15 @@
11
//JS Global Vars
22
var questionsIndex = 0;
3-
var startTime = 75;
3+
var timer;
4+
var timerCount;
5+
var right = true;
6+
var wrong = false;
47

58
// TOPS SECTION VARS
69
var tops = document.getElementById("tops");
710
var topHeader = document.getElementById("leaderboard");
811
var highScores = document.getElementById("highScores");
9-
var timeAtZero = document.getElementById("timer");
12+
var timeAtZero = document.getElementById("timeAtZero");
1013

1114
// INTRO SECTION VARS
1215
var containerIntro = document.getElementById("container-intro");
@@ -17,6 +20,7 @@ var containerQuestions = document.getElementById("container-questions");
1720
var questionTitle = document.getElementById("questionTitle");
1821
var questionChoice = document.getElementById("choices");
1922
var answer = document.getElementById("answer");
23+
var rightOrWrong = document.getElementById("rightOrWrong")
2024
var timerCountdown = document.getElementById("timerCountdown");
2125

2226
//RESULTS SECTION
@@ -63,37 +67,71 @@ var questions = [
6367

6468
// Helper Timer Function
6569
function countdown() {
66-
startTime--; //Decreases the timer by 1 second from 75
67-
timerCountdown.textContent = startTime; //This line displays the text + remaining time in timer
68-
if(startTime <= 0) { //If timer reaches 0 then the end game fuction is called and the game stops
69-
endGame();
70-
}
70+
timer = setInterval(function() {
71+
timerCount--;
72+
timerCountdown.textContent = timerCount;
73+
if(timerCount == 0) { //This line displays the text + remaining time in timer
74+
timerCount = finalScore.textContent;
75+
document.getElementById('finalScore').textContent;
76+
// clearInterval(timer);
77+
endGame();
78+
}
79+
},1000);
7180
}
7281

73-
startButton.addEventListener("click", startQuiz);
82+
startButton.addEventListener("click", startQuiz); //when press srat button we call the startQuiz function
7483

7584
// 1. INTRO SECTION STARTS
7685
function startQuiz() {
77-
containerIntro.setAttribute("class","hide");
78-
timeAtZero.setAttribute("class","hide");
79-
containerQuestions.setAttribute("class","show"); //Questions section are visible
80-
var timerInterval = setInterval(countdown, 1000); // Sets interval in timer var
81-
timerCountdown.textContent = startTime; //Timer is activated
82-
getQuestions(); //get questions function is called
86+
timerCount = 76;
87+
timeAtZero.style.display = "none"; //Corner timer at zero hides
88+
containerIntro.style.display = "none"; //Container intro hides
89+
startButton.disabled = true; //start button is diasbled
90+
containerQuestions.setAttribute("class","show"); //Questions section becomes visible
91+
countdown();
92+
getQuestions(); //get questions function is called
8393
}
94+
// event listener for questions
95+
containerQuestions.addEventListener("click", function(event){
96+
console.log(event) //check what is happening on event
97+
console.dir(event.target) //Display prooerties of the event target
98+
if (event.target.matches('button')) {
99+
console.log('on question index ', questionsIndex, ' of ', (questions.length - 1) ) // Another checkpoint: get user answer which is not event.target but event.target.textContent
100+
var userAnswer = event.target.textContent.slice(2); // Get rid off number in the beginning of string to effectively compare
101+
var correctAnswer = questions[questionsIndex].answer; // get the correct answer
102+
if(userAnswer === correctAnswer){ //if user choice matches answer
103+
document.getElementById('rightOrWrong').innerHTML = "Correct!"; //Print Correct
104+
} else {
105+
document.getElementById('rightOrWrong').innerHTML = "Wrong!" //else Print Wrong
106+
}
107+
questionsIndex = questionsIndex + 1; // increment question index
108+
getQuestions(); // got to next questions
109+
}
110+
});
84111

85112
// 2. QUESTIONS + ANSWERS SECTION
86113
function getQuestions() {
87-
var currentQ = questions[questionsIndex]; //local variable to hold index of each question in the questions array
88-
questionTitle.textContent = currentQ.title; //Returning Title variable content
89-
questionChoice.innerHTML = ""; //clearing the variable
90-
currentQ.choices.forEach(function(choice, index) { //iterating through the choices
91-
var choiceBtn = document.createElement("button"); //created button element on demand for each of the choices
92-
choiceBtn.setAttribute("value",choice); //collecting all choices in array choice
93-
choiceBtn.textContent = index + 1 + ". " + choice; //Displaying the choices with # values in a list
94-
choiceBtn.onclick = rightOrWrongAnswer; //Calling the right or wrong function to check if answer is correct
95-
questionChoice.appendChild(choiceBtn); //Inserts selection into the var choiceBtn
96-
})
114+
if (questionsIndex < questions.length) {
115+
var currentQ = questions[questionsIndex]; //local variable to hold index of each question in the questions array
116+
questionTitle.textContent = currentQ.title; //Returning Title variable content
117+
questionChoice.innerHTML = ""; //clearing the variable
118+
currentQ.choices.forEach(function(choice, index) { //iterating through the choices
119+
var choiceBtn = document.createElement("button"); //created button element on demand for each of the choices
120+
choiceBtn.setAttribute("value",choice); //collecting all choices in array choice
121+
choiceBtn.textContent = index + 1 + "." + choice; //Displaying the choices with # values in a list
122+
choiceBtn.onclick = rightOrWrongAnswer; //Calling the right or wrong function to check if answer is correct
123+
questionChoice.appendChild(choiceBtn); //Inserts selection into the var choiceBtn
124+
})
125+
} else {
126+
startButton.disabled = true; //start button is diasbled
127+
containerQuestions.setAttribute("class","hide");
128+
results.setAttribute("class","show");
129+
results.style.display = "block";
130+
timerCount = document.getElementById("finalScore").innerHTML;
131+
document.getElementById('finalScore').textContent = finalScore;
132+
finalScore.textContent;
133+
console.log(finalScore);
134+
}
97135
}
98136

99137
// Helper function
@@ -104,8 +142,8 @@ function rightOrWrongAnswer(event) {
104142
return; //stay on question page
105143
}
106144
//Keeps count of correct answers
107-
if(btn.value !== questions[questionsIndex].answer) { //if the choice does not match the right answer
108-
startTime = startTime - 1; //time is decreased by 1
145+
if(btn.value != questions[questionsIndex].answer) { //if the choice does not match the right answer
146+
startTime = startTime - 5; //time is decreased by 1
109147
if(startTime <= 0) { //if timer is at zero
110148
startTime = 0; //then start time is set to zero
111149
}
@@ -118,7 +156,21 @@ function rightOrWrongAnswer(event) {
118156
}
119157
questionsIndex++; //move to the next question
120158
if((startTime <= 0) || (questionsIndex === questions.length)) { //if start time is zero or there are no more questions to go through
121-
gameEnd(); // end the game
159+
startButton.disabled = true; //start button is diasbled
160+
containerQuestions.setAttribute("class","hide");
161+
results.style.display = "block"; //Questions section becomes visible
162+
console.log(finalScore);
163+
// endGame(); // end the game
164+
} else if ((startTime > 0) && (questionsIndex === questions.length)) {
165+
// endGame();
166+
startButton.disabled = true; //start button is diasbled
167+
containerQuestions.setAttribute("class","hide");
168+
results.style.display = "block";
169+
timerCount = finalScore;
170+
// document.getElementById('finalScore').innerHTML = finalScore;
171+
// console.log(finalScore);
172+
// clearInterval(timer);
173+
// endGame();
122174
}
123175
else {
124176
getQuestions(); // else continue
@@ -127,15 +179,18 @@ function rightOrWrongAnswer(event) {
127179

128180
// Updates and prints finalScore on results div id=results
129181
function finalScore() {
130-
finalScore.textContent;
182+
timerCount = finalScore.textContent;
183+
// document.getElementById('finalScore').textContent;
131184
}
132185

133186
//Used at the results id section page
134187
function endGame() {
135-
clearInterval(timerInterval); //The interval is stopped
136-
results.removeAttribute('class'); //The results section shows up
188+
clearInterval(timerInterval).style.display = "hide"; //The interval is stopped
189+
results.style.display = "contents";
190+
//results.removeAttribute('class'); //The results section shows up
137191
containerQuestions.setAttribute('class', 'hide'); // Questions dissappear
138-
finalScore.textContent = startTime; //shows time as the score
192+
// finalScore.textContent = startTime; //shows time as the score
193+
console.log(finalScore);
139194
initials.textContent = initials; //shows initials
140195
}
141196

‎index.html

+6-4
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
12
<!DOCTYPE html>
23
<html lang="en-US">
34
<head>
@@ -15,24 +16,25 @@
1516
<!-- TOP SECTION -->
1617
<div id="tops" class="tops">
1718
<div id="leaderboard" class="leaderboard">
18-
<a id="highScores" class="highScores" href="scores.html">View High Scores</a>
19+
<a id="highScores" class="highScores" href="#highScoresSection">View High Scores</a>
1920
</div>
20-
<div id="timeAtZero" class="timeAtZero show">Time: 0</div>
21+
<div id="timeAtZero" class="timeAtZero">Time: 0</div>
2122
</div>
2223

2324
<!-- INTRO SECTION -->
2425
<div id="container-intro" class="container-intro">
2526
<h1>Coding Quiz Challenge</h1>
26-
<p>Try to answer the following code-related questions witin the time limit.</p>
27+
<p>Try to answer the following code-related questions within the time limit.</p>
2728
<p>Keep in mind that incorrect answers will penalize your score/time by ten seconds!.</p>
2829
<button id="startButton" class="startButton">Start Quiz</button>
2930
</div>
3031

3132
<!-- QUESTIONAIRE SECTION -->
32-
<div id="container-questions" class="container-questions hide">
33+
<div id="container-questions" class="container-questions show">
3334
<div id="questionTitle"></div>
3435
<div id="choices"></div>
3536
<div id="answer" class="answer"></div>
37+
<p id="rightOrWrong" class="rightOrWrong"><span></span></p>
3638
<div id="timerCountdown" class="timerCountdown"></div>
3739
</div>
3840

0 commit comments

Comments
 (0)