Hello and welcome, in this Tutorial, I'm going to show you how to build a Quiz game using Vanilla Javascript
Setup
first, let me show you the folder structure of the project
|index.html
|style
|-- index.js
|scripts
|-- main.css
now let's start coding
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Quiz App</title>
<!-- Including the style file -->
<link rel="stylesheet" href="style/main.css">
</head>
<body>
<div class="wrapper">
<div class="quiz_app">
<div class="info_box">
<p id="question_id">Question 1/10</p>
<p id="timer">20:30</p>
</div>
<div class="loader_box">
<div id="loader" class="loader"></div>
</div>
<div class="question_box">
<p id="question_content">what's the name of this artery</p>
</div>
<div class="answers_container">
<label><input type="checkbox"> Brachial Aretry</label>
<label><input type="checkbox"> Brachial Aretry</label>
<label><input type="checkbox"> Brachial Aretry</label>
<label><input type="checkbox"> Brachial Aretry</label>
<label><input type="checkbox"> Brachial Aretry</label>
</div>
<div class="navigation_box">
<input id="nxt_btn" type="button" value="Check">
</div>
</div>
</div>
<!-- including the script file -->
<script src="scripts/index.js"></script>
</body>
</html>
main.css
body{
background-color: #202643;
font-family: Arial, Helvetica, sans-serif;
}
.wrapper{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
justify-items: center;
}
.quiz_app{
display: flex;
flex-direction: column;
width: 60%;
border: 1px solid rgba(26,26,26,0.4);
padding: 18px 26px;
border-radius: 8px;
background-color: #EAEDFB;
}
.quiz_app > .info_box{
display: flex;
flex-direction: row;
justify-content: space-between;
font-weight: bold;
}
.quiz_app > .loader_box{
width: 100%;
display: block;
height: 16px;
border-radius: 16px;
background-color: #c4c4c4;
}
.quiz_app > .loader_box > .loader{
width: 10%;
background-color: #6EA8FF;
height: 16px;
display: block;
border-radius: 16px;
}
.quiz_app > .answers_container{
display: flex;
flex-direction: column;
}
.quiz_app > .answers_container > label{
list-style: none;
padding: 12px 16px;
margin: 8px 0;
border: 1px solid rgba(26,26,26,0.4);
border-radius: 4px;
}
.quiz_app > .navigation_box {
display: flex;
flex-direction: row-reverse;
padding: 12px 0;
}
.quiz_app > .navigation_box > input{
padding: 8px 28px;
border: none;
background-color: #2079FF;
color: #fafafa;
}
.correct{
list-style: none;
padding: 12px 16px;
margin: 8px 0;
border: 1px solid rgba(26,26,26,0.4);
border-radius: 4px;
background-color: lightgreen;
}
.wrong{
list-style: none;
padding: 12px 16px;
margin: 8px 0;
border: 1px solid rgba(26,26,26,0.4);
border-radius: 4px;
background-color: lightcoral;
}
index.js
// declaring the variables
var question = document.querySelector("#question_content");
var answers = document.getElementsByTagName("label");
var button = document.querySelector("#nxt_btn");
var timer = document.querySelector("#timer")
var question_number = document.querySelector("#question_id");
var loader = document.querySelector("#loader");
var quesionId = 0;
// setting the questions list
var quiz_question = [
{
"question":"What's the Name of Actor who Played Batman in ' The Batman '",
"answers":[
{
"answer":"Tom Holland",
"value":false,
},
{
"answer":"Richard Pattirson",
"value":true,
},
{
"answer":"Robbert Downey Junior",
"value":false,
},
{
"answer":"Chris Patt",
"value":false,
},
{
"answer":"Charlie Cox",
"value":false,
},
]
},
{
"question":"In the DareDevil Serie, Matt Murdon was played by ...",
"answers":[
{
"answer":"Christopher Nolan",
"value":false,
},
{
"answer":"Andrew Garfield",
"value":false,
},
{
"answer":"Charlie Cox",
"value":true,
},
{
"answer":"Tom Holland",
"value":false,
},
{
"answer":"Chris Evans",
"value":false,
},
]
},
{
"question":"what's the name of this nerve",
"answers":[
{
"answer":"mesenteric nerve",
"value":false,
},
{
"answer":"iliac nerve",
"value":false,
},
{
"answer":"brachial nerve",
"value":false,
},
{
"answer":"coeliac nerve",
"value":true,
},
{
"answer":"aortic nerve",
"value":true,
},
]
},
];
var loadUnit = 100/quiz_question.length;
var load = 100/quiz_question.length;
function loadQuestion(id){
question_number.innerHTML = "Question° "+(id+1) + "/" + quiz_question.length;
question.innerHTML = quiz_question[id]['question'];
for(let i = 0;i<answers.length;i++){
answers[i].style.backgroundColor = "white"
answers[i].innerHTML = `<input type='checkbox' value='${quiz_question[id].answers[i].value}' >${quiz_question[id]["answers"][i].answer}` ;
}
}
/* Loading the Game */
var time = 0
function startGame(id){
setInterval(() => {
time++;
let sec = time % 60;
let min = Math.floor(time / 60);
timer.innerHTML = min + ":" + sec;
}, 1000);
loader.style.width = load + "%";
question.innerHTML = quiz_question[id]['question'];
loadQuestion(id)
}
startGame(quesionId)
/* Setting the navigation button */
button.addEventListener("click",()=> {
if(button.value == "Check"){
for(let i = 0;i<answers.length;i++){
var answered = answers[i].getElementsByTagName("input").item(0);
if(answered.checked){
if(answered.value == "false"){
answers[i].style.backgroundColor = "lightcoral"
}else{
answers[i].style.backgroundColor = "lightgreen"
}
}
}
button.value = "Next"
}else {
button.value = "Check";
if(quesionId < quiz_question.length - 1){
quesionId++;
load+=loadUnit;
loader.style.width = load + "%";
loadQuestion(quesionId);
}else{
button.value = "Result"
}
}
});
Thank you for reading, I hope that you've enjoyed the tutorial, don't forget to comment if you need help and if you need any other suggestion, you can also comment bellow
Build a Quiz App using HTML, CSS and JavaScript
Reviewed by Medics
on
March 22, 2022
Rating:
Reviewed by Medics
on
March 22, 2022
Rating:
Nicely Explained! To support healthcare app development demands I would also like to share, According to Statista reports, At the onset of the pandemic in 2020, the global market for these apps was valued at $40.05 billion; it’s now expected to more than double in size to $100 billion by 2023. Constantly, Top Healthcare Mobile App Development Company are growing rapidly with the increasing demands of android & iOS mobile app development to provide top online dating app solutions.
ReplyDelete