How To Make a Quiz App With JavaScript Using Visual Studio Code
In this JavaScript Tutorial we will see How to Make a Simple Quiz App Using a Paragraph, RadioButtons and a Button In JavaScript and Visual Studio Code .
Project Source Code:
<!DOCTYPE HTML>
<head>
<style>
#q-div{background-color: lightgray; border: 1px solid darkgray; width:25%;
padding: 25px; margin-bottom: 35px;}
input{margin-bottom: 14px}
button{background-color: black; color: yellow}
</style>
</head>
<body>
<div id="container">
<div id="content">
<div id="q-div">
<p id="q-content"> Question Here ?</p>
</div>
<input onclick="getSelectedRbutton(this)" type="radio" name="ops"
class="rb" id="op1" value="A">
<label class="lbl" for="op1">Option 1</label><br>
<input onclick="getSelectedRbutton(this)" type="radio" name="ops"
class="rb" id="op2" value="B">
<label class="lbl" for="op2">Option 2</label><br>
<input onclick="getSelectedRbutton(this)" type="radio" name="ops"
class="rb" id="op3" value="C">
<label class="lbl" for="op3">Option 3</label><br>
<input onclick="getSelectedRbutton(this)" type="radio" name="ops"
class="rb" id="op4" value="D">
<label class="lbl" for="op4">Option 4</label><br><br>
<button onclick="play()" id="btn">Next Question</button>
</div>
</div>
<script>
const questions = ["15 + 15 = ?","100 / 10 = ?","200 X 4 = ?",
"250 - 150 = ?","27 / 9 = ?"]
// the last item in the options list row is the correct answer
/* the four other are the options we gonna show the user and
one of them is the correct one */
const options = [["1","30","3","4","30"],["10","30","25","1000","10"],
["100","30","8000","800","800"],["100","300","500","450","100"],
["10","5","3","4","3"]]
// get the radio buttons
rbuttons = document.getElementsByName("ops");
// get the labels
lbls = document.getElementsByClassName("lbl");
// index to go through the questions
// correct to count the correct answers
index = 0, correct = 0;
q_div = document.getElementById("q-div");
question = document.getElementById("q-content");
btn = document.getElementById("btn");
// create a unction to get the selected radio button value
function getSelectedRbutton(rbtn)
{
console.log(rbtn.value);
// check if the user has selected the correct answer
if(rbtn.value == options[index][4]){
correct++;
}
index++;
rButtonsState("d");
}
// create a function to enable and disable radio buttons
function rButtonsState(st)
{
if(st == "d") // d for disable
{
rbuttons.forEach(element => {
element.disabled = true;
});
}
else
{// enable
rbuttons.forEach(element => {
element.disabled = false;
});
}
}
// create the main function to play
function play()
{
// display the question
question.innerHTML = questions[index];
// get the options
op = options[index];
if(btn.innerHTML == "Restart")
{
q_div.style.backgroundColor = "lightgray";
q_div.style.borderColor = "darkgray";
btn.innerHTML = "Next";
}
if(index == questions.length)
{
// if half or more of the answers are correct
if(correct >= questions.length/2)
{
q_div.style.backgroundColor = "lightgreen";
q_div.style.borderColor = "green";
question.innerHTML = correct + " Answers Are Correct";
}
else{
q_div.style.backgroundColor = "lightcoral";
q_div.style.borderColor = "red";
question.innerHTML = correct + " Answers Are Correct";
}
btn.innerHTML = "Restart";
index = 0;
correct = 0;
}
else
{
// enable radiobuttons
rButtonsState("e");
// display the options in labels and radiobuttons
for(var i = 0; i < lbls.length; i++)
{
rbuttons[i].value = op[i];
lbls[i].innerHTML = op[i];
rbuttons[i].checked = false;
}
// if it's the last question
if(index == questions.length - 1 )
{
btn.innerHTML = "Finish and See the Result";
}
}
}
play();
</script>
</body>
</html>
////// OUTPUT :
