JavaScript Quiz App Source Code

How To Make a Quiz App With JavaScript Using Visual Studio Code

JavaScript Quiz App Source 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 : 











download the source code






Share this

Related Posts

Previous
Next Post »

1 comments:

comments