I am creating a multiple choice question exam project using radio button but there is problem in clicking the submit button and going to next question, getting correct or incorrect as result
here is code of HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MCQ Quiz</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="quiz_container">
<form id="quiz_form" onsubmit="return submitquiz(event)">
<div class="question">
<h1> Sample question for quiz </h1>
<p id="que-text"> 1. What is the capital of the india ?</p>
<div class="choices">
<label >
<input type="radio" value="0" name="choice" > Mumbai<br>
</label>
<label >
<input type="radio" value="1" name="choice"> Kolkata <br>
</label>
<label >
<input type="radio" value="2" name="choice"> Delhi <br>
</label>
<label >
<input type="radio" value="3" name="choice"> Chennai <br>
</label>
</div>
<div> <p id="result"> </p> </div>
<button type="submit"> Submit </button>
</form>
here is css
body
{
background-color: #ffffff;
font-family: Arial, Helvetica, sans-serif;
display: flex;
}
.quiz_container
{
width: 600px;
margin: auto;
padding: 2em;
background-color: #a9dcf0;
border-radius: 10px;
box-sizing: border-box;
box-shadow: 0 0 5px black;
}
.question
{
margin-bottom: 15px;
}
.choice
{
display: flex;
flex-direction: column;
}
label
{
font-size: 1em;
}
button
{
background-color: #28a745;
color: antiquewhite;
border: none;
border-radius: 5px;
cursor: pointer ;
display:inline-block;
padding: 10px 20px;
}
button:hover
{
background-color: #218835;
}
#result
{
margin-top: 15px;
font-size: 1.2em;
}
here is js
const ques=[
// questions
{question: "2. How many months are there in year ?",
choices:[" 11", "13", "12", "10"],
correct: "2" },
{question:"3. The largest contry of world (Area wise) ?",
choices:["Russia", "Canada", "India ", "Brazil"],
correct:" 0" },
// {question:" 4. ",
//choices:[ " ", " ", " ", " ",],
//correct: " " },
];
let currentQue= 0;
let currentAns= 0;
function showQue ()
{
const queText= document.getElementById("que-text");
queText.textContent= question[currentQue].question;
const choices= document.querySelectorAll(".choice");
choices.forEach((choice,index)=> {choice.textContent= question[currentQue].choices[index];});
const result = document.getElementById("result");
result.textContent="";
}
function checkAnswer(selected) {
const result = document.getElementById("result");
if (selected === ques[currentQue].correct)
{
result.textContent = "It is Correct!";
correctAnswers++;
}
else
{
result.textContent = " It is Incorrect!";
}
setTimeout(() => {
currentQue++;
if (currentQue< ques.length)
{
showQuestion();
}
else
{
const quizContainer = document.querySelector(".quiz_container");
quizContainer.innerHTML = `<p>You got ${correctAnswers} out of ${ques.length} questions.</p>`;
}
}, 2000);
}
showQuestion();
i am expecting that after submitting correct answer it will show as it is Correct! and if wrong than it is Incorrect!. than next question and so on . after completing all the questions it will show score. but i am stuck at Submit button and process after it.