JavaScript Quiz App Source Code - Hallo sahabat Dev-Create, Pada Artikel yang anda baca kali ini dengan judul JavaScript Quiz App Source Code, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel javascript, Artikel JavaScript Quiz App Source Code, Artikel js, Artikel quiz, Artikel Quiz App Source Code, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : JavaScript Quiz App Source Code
link : JavaScript Quiz App Source Code

Baca juga


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








Demikianlah Artikel JavaScript Quiz App Source Code

Sekianlah artikel JavaScript Quiz App Source Code kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel JavaScript Quiz App Source Code dengan alamat link https://dev-create.blogspot.com/2021/09/javascript-quiz-app-source-code.html