PART 2 OF 2
Mid-term
project.
How did the homework go?
Were you able to get the total number of questions in each category?
Let's finish this: Quiz time
What did we do in the last class?
- We added input options for
difficulty, category and total
number of questions.
- We fetched the category list
from the API.
- We setup basic markup for
quiz questions.
Exercise 005
Show the question text.
005: Cheat sheet
Step 1
quiz.html
In the file quiz.html ...
- Create a variable named <script>
questions before the ...
showQues function var questions;
- Create a count variable var count = 0;
to keep track of questions function showQues(data){
and set it to 0 console.log(data);
Inside the showQues() questions = data.results;
- Set questions variable show(questions[count]);
to data.results
}
- Call a function show with ...
first question object
questions[count] as
a parameter.
005: Cheat sheet
quiz.html
...
<script>
Step 2 ...
function showQues(data){
In the file quiz.html console.log(data);
Create a new function show questions = data.results;
with one parameter qObj show(questions[count]);
Inside the show() }
- Set html of #ques to function show(qObj) {
qObj.question
$("#ques").html(qObj.question);
}
...
005: Solution
quiz.html
...
<script>
...
var questions;
var count = 0;
function showQues(data){
console.log(data);
questions = data.results;
show(questions[count]);
}
function show(qObj) {
$("#ques").html(qObj.question);
}
...
Can you answer this question?
Well, let's make it a little easier by adding a few possible options.
Exercise 006
Show the choices for the quiz
question.
006: Cheat sheet
Step 1
In the file quiz.html quiz.html
- Add variable
correctAnswer outside var questions, correctAnswer;
the show function for ...
saving the correct answer. function show(qObj) {
Inside the show function $("#ques").html(qObj.question);
- Get incorrect choices in a var choices = qObj.incorrect_answers;
new variable named correctAnswer = qObj.correct_answer;
choices
}
- Set correctAnswer
variable to
qObj.correct_answer
? We got an array of incorrect answers and a correct answer.
How can we show the correct answer at a random position
among incorrect answers? Any Ideas?
006: Cheat sheet
quiz.html
Step 2
var questions, correctAnswer;
Inside the show function ...
- Get a random number function show(qObj) {
between 0 and the length $("#ques").html(qObj.question);
of array choices var choices = qObj.incorrect_answers;
correctAnswer = qObj.correct_answer;
- Convert the above
var num = Math.random() * choices.length;
number to an integer
using Math.floor var random = Math.floor(num);
function }
006: Cheat sheet
Step 3
quiz.html
Inside the show function ...
- Get a value from function show(qObj) {
choices array at a $("#ques").html(qObj.question);
random index and var choices = qObj.incorrect_answers;
save it in variable correctAnswer = qObj.correct_answer;
randomChoice. var num = Math.random() * choices.length;
- Update the value at var random = Math.floor(num);
that random index to
correctAnswer var randomChoice = choices[random];
- Add the random choices[random] = correctAnswer;
choice to the end of choices.push(randomChoice);
the array using }
push().
006: Cheat sheet
quiz.html
...
function show(qObj) {
$("#ques").html(qObj.question);
var choices = qObj.incorrect_answers;
Step 4 correctAnswer = qObj.correct_answer;
Inside the show function var num = Math.random() * choices.length;
- Add a for loop to get var random = Math.floor(num);
all the choices in a
var randomChoice = choices[random];
variable c.
choices[random] = correctAnswer;
- Append to #choices choices.push(randomChoice);
with a p tag with class for (c of choices) {
answer-options
$('#choices').append("<p class='some-class'>"
+ c + "</p>");
}
}
006: Cheat sheet
Step 5 style.css
In file style.css ...
Style the .answer-options .answer-options {
as following
- Set background-color background-color: color-value;
to #f03e3a. color: color-name;
- Set color to white padding: numberpx;
- Give padding of 5px font-size: numberpx;
- Set font-size to 16px border-radius: numberpx;
- Set border-radius to }
10px
006: Solution
quiz.html
...
function show(qObj) {
$("#ques").html(qObj.question);
style.css
var choices = qObj.incorrect_answers;
correctAnswer = qObj.correct_answer;
...
var num = Math.random() * choices.length; .answer-options {
var random = Math.floor(num); background-color: #f03e3a;
color: white;
var randomChoice = choices[random];
padding: 5px;
choices[random] = correctAnswer;
font-size: 16px;
choices.push(randomChoice);
border-radius: 10px;
for (c of choices) {
}
$('#choices').append("<p class='answer-options'>"
+ c + "</p>");
}
}
Now it's a little easier to answer. Let's move ahead.
What should happen on clicking the correct answer?
Exercise 007
Show next question on clicking
the correct answer.
007: Cheat sheet
quiz.html
Step 1
...
function show(qObj) {
In the file quiz.html ...
Inside the show() function for (c of choices) {
- After the for loop, $('#choices').append("<p class='answer-options'>"
add a click event on + c + "</p>");
.answer-options }
- Call a function named $('.answer-options').click(check);
check on clicking. }
...
007: Cheat sheet
quiz.html
Step 2
...
In the file quiz.html function show(qObj) {
- Create a new function ...
check() with one $('.answer-options').click(check);
parameter event. }
Inside check()
- Get the clicked answer function check(event) {
using the text() var clickedAnswer = $(event.currentTarget).text();
function on the }
event.currentTarget ...
007: Cheat sheet
Step 3 ...
quiz.html
In the file quiz.html function show(qObj) {
Inside check() ...
- Add an if condition $('.answer-options').click(check);
to check if }
clickedAnswer is function check(event) {
equal to var clickedAnswer = $(event.currentTarget).text();
correctAnswer if (clickedAnswer == correctAnswer) {
Inside if statement count++;
- Increase the value of
}
the count variable
by 1 }
...
007: Cheat sheet
quiz.html
...
function show(qObj) {
Step 4 ...
In the file quiz.html $('.answer-options').click(check);
Inside if statement }
- Add another if function check(event) {
statement to check if var clickedAnswer = $(event.currentTarget).text();
the count is less than if (clickedAnswer == correctAnswer) {
questions.length count++;
- Inside if, call the show if (count < questions.length) {
function with show(questions[count]);
questions[count]
}
as a parameter.
}
}
...
Uh Oh! We are getting double choices in the next question. Any
ideas, why's that?
007: Cheat sheet
quiz.html
...
function show(qObj) {
$('#choices').html("");
...
Step 5 $('.answer-options').click(check);
}
In the file quiz.html
function check(event) {
Inside show() function
var clickedAnswer = $(event.currentTarget).text();
- Set the HTML of
if (clickedAnswer == correctAnswer) {
#choices to an empty
count++;
string "".
if (count < questions.length) {
show(questions[count]);
}
}
}
...
007: Solution
quiz.html
...
function show(qObj) {
$('#choices').html("");
...
$('.answer-options').click(check);
}
function check(event) {
var clickedAnswer = $(event.currentTarget).text();
if (clickedAnswer == correctAnswer) {
count++;
if (count < questions.length) {
show(questions[count]);
}
}
}
...
Exercise 008
Show the current score after
clicking the incorrect option.
008: Cheat sheet
Step 1 quiz.html
...
In file quiz.html function check(event) {
Inside the check() function var clickedAnswer = $(event.currentTarget).text();
- Add an else part to the if if (clickedAnswer == correctAnswer) {
condition count++;
if (count < questions.length) {
Inside else show(questions[count]);
- Add a new variable output }
- Add a heading and the text } else {
to show scores.
var output = "<h1>Game Over!!</h1>";
- Use the count variable to
output += "<p>You scored " + count +
show the number of
correctly answered " out of " + questions.length +
questions. " </p>";
- Use questions.length }
for the total number of }
questions.
008: Cheat sheet
quiz.html
...
function check(event) {
var clickedAnswer = $(event.currentTarget).text();
if (clickedAnswer == correctAnswer) {
Step 2 count++;
if (count < questions.length) {
In file quiz.html show(questions[count]);
Inside the check() }
Inside else } else {
- Set the HTML of var output = "<h1>Game Over!!</h1>";
div #quiz to the output += "<p>You scored " + count +
output variable. " out of " + questions.length +
" </p>";
$('#quiz').html(output);
}
}
Uh Oh! Nothing happens when we click on the correct answer
of the last question; let's fix that.
008: Cheat sheet quiz.html
...
function check(event) {
var clickedAnswer = $(event.currentTarget).text();
Step 3 if (clickedAnswer == correctAnswer) {
count++;
In file quiz.html if (count < questions.length) {
Inside the check() show(questions[count]);
Add else statement to the
else {
inner if condition
}
- Similarly, create an var output = "<h1>Perfect Score!!</h1>";
output variable for output += "<p>You answered all questions</p>";
heading and p tag. $('#quiz').html(output);
- Add any heading and }
text you want. } else {
var output = "<h1>Game Over!!</h1>";
- Set the HTML of #quiz output += "<p>You scored " + count +
to the above output " out of " + questions.length +
variable. " </p>";
$('#quiz').html(output);
}
}
008: Solution
quiz.html
...
if (clickedAnswer == correctAnswer) {
count++;
if (count < questions.length) {
show(questions[count]);
} else {
var output = "<h1>Perfect Score!!</h1>";
output += "<p>You answered all questions</p>";
$('#quiz').html(output);
}
} else {
var output = "<h1>Game Over!!</h1>";
output += "<p>You scored " + count +
" out of " + questions.length +
" </p>";
$('#quiz').html(output);
}
That's all folks
It's time to challenge your friends!!
Bonus Round
Change the background color of
answer choices on hover.
style.css
...
.answer-options {
background-color: #f03e3a;
Step 1 color: white;
In the file style.css padding: 5px;
- Add a CSS selector to font-size: 16px;
style .answer-options border-radius: 10px;
on mouse hover. }
- Change background color
.answer-options:hover {
to #27ae60
background-color: #27ae60;
}
style.css
...
.answer-options {
background-color: #f03e3a;
Step 2
color: white;
padding: 5px;
In the file style.css font-size: 16px;
Inside the .answer-options border-radius: 10px;
- For a smoother change, transition: 0.2s all ease;
add a transition of
}
0.2s all ease
.answer-options:hover {
background-color: #27ae60;
}
style.css
...
.answer-options {
background-color: #f03e3a;
Step 3
color: white;
padding: 5px;
In the file style.css font-size: 16px;
Inside the .answer-options border-radius: 10px;
- Since it's clickable, we cursor: pointer;
can change the mouse
transition: 0.2s all ease;
cursor, by setting the
}
cursor to pointer.
.answer-options:hover {
background-color: #27ae60;
}
style.css
...
.answer-options {
background-color: #f03e3a;
color: white;
padding: 5px;
font-size: 16px;
border-radius: 10px;
cursor: pointer;
transition: 0.2s all ease;
}
.answer-options:hover {
background-color: #27ae60;
}
Homework - 1
Show the score as we play the quiz.
Inside div with id quiz add a p
tag with id score-text.
Inside check()
- Inside the if condition,
change the text of p tag
- Set the text of
#score-text to count
variable to show correctly
answered questions.
- Also, you can use
questions.length to get
the total number of
questions.
Homework - 2
Make it exciting by playing
sound effects or showing gifs
when answering a question.
Adding sound effects
// Adding an audio file
<audio id="uniqueID" src="file.mp3" preload>
- Add an audio tag with a
unique id and preload </audio>
attribute.
Inside the check function
- Inside if condition, play the // playing audio in javascript
audio for correct answer. $('#uniqueID')[0].play();
- Inside else part, play the
audio for incorrect answer.
Adding images
Inside the check function
- Add an img tag inside the
output variable.
- Change the width of image
to fit it inside the current
layout.
Make this project your own by
styling it in your own way.
