For a school project, I am tasked with developing a Math Quiz which showcases questions one at a time. The questions vary in type, including Multiple Choice, Narrative Response, Image Selection, Fill in the blank, and more.
I require assistance in creating a setup where each question is displayed individually, along with features like a scoreboard, real-time feedback on correct or incorrect responses, notification of pass or fail based on a score of 80% or higher, and an option for users to retake the quiz at the end.
This snippet represents my HTML file:
<!DOCTYPE html>
<html>
<head>
<title>Math Quiz!</title>
<link href ="quizCSS.css" rel ="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<script src = "MathQuiz.js" defer></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
...
(coding example continues)
Here's a glimpse into my JavaScript code:
function check(){
var question1 = document.quiz.question1.value;
var question2 = document.quiz.question2.value;
var question3 = document.quiz.question3.value;
var question4 = document.quiz.question4.value;
var question5 = document.quiz.question5.value;
var correct = 0;
if (question1 == "4") {
correct++;
}
...
(javascript function goes on)