Я должен создать математический тест для школьного проекта. Я уже создал вопросы и ответы. Я просто не знаю, как заставить их показывать один вопрос за раз. Я должен показывать каждый вопрос один за другим, когда вы отвечаете на них.
Мне также нужно использовать различные типы вопросов, такие как множественный выбор, вопрос с описательным ответом, вопрос с выбором изображения, заполнение пробела и т. Д. .
Так что мне нужна помощь с отображением вопросов по одному, отображением табло, отображением пользователя, правильно ли он задал вопрос до появления следующего вопроса, отображением сообщения о том, что он прошел или нет, если он получилпо крайней мере, 80% или нет, и дать пользователю возможность повторить тест в конце.
Это мой HTML
<!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>
<body>
<h1>Take the Quiz!</h1>
<form id = "quiz" name = "quiz">
<div id="q1">
<p class = "questions">1) What is 2 + 2?</p>
<input id = "textbox" type = "text" name = "question1">
<input type="button" onclick="myAnswer1()" value="Submit Answer">
<script>
var question1 = document.quiz.question1.value;
function myAnswer1() {
if(question1 == 4){
document.write("You are correct!");
}
else{
document.write("Wrong Answer!");
}
}
</script>
</div>
<input type="button" onclick="myFunction1()" value="Start Question 1">
<script>
function myFunction1() {
document.getElementById("q1").style.display = "block";
}
</script>
<div id="q2">
<p class = "questions">2) What is 3 to the power of 2?</p>
<input type = "radio" id = "mc" name = "question2" value = "9"> 9<br>
<input type = "radio" id = "mc" name = "question2" value = "6"> 6<br>
<input type = "radio" id = "mc" name = "question2" value = "3"> 3<br>
</div>
<input type="button" onclick="myFunction2()" value="Start Question 2">
<script>
function myFunction2() {
document.getElementById("q2").style.display = "block";
document.getElementById("q1").style.display = "none";
}
</script>
<div id="q3">
<p class = "questions">3) What is the square root of 25?</p>
<input type = "radio" id = "mc" name = "question3" value = "5"> 5<br>
<input type = "radio" id = "mc" name = "question3" value = "525"> 525<br>
</div>
<input type="button" onclick="myFunction3()" value="Start Question 3">
<script>
function myFunction3() {
document.getElementById("q3").style.display = "block";
document.getElementById("q2").style.display = "none";
}
</script>
<div id="q4">
<p class = "questions">4) What is the square root of 81?</p>
<input type = "radio" id = "mc" name = "question4" value = "9"> 9<br>
<input type = "radio" id = "mc" name = "question4" value = "7"> 7<br>
</div>
<input type="button" onclick="myFunction4()" value="Start Question 4">
<script>
function myFunction4() {
document.getElementById("q4").style.display = "block";
document.getElementById("q3").style.display = "none";
}
</script>
<div id="q5">
<p class = "questions">5) Which shape has a right angle?</p>
<input type = "image" id = "pic" name = "question5" value = img src="https://upload.wikimedia.org/wikipedia/commons/8/82/Blue_Square.svg" width="100" height="100"><br>
<input type = "image" id = "pic" name = "question5" value = img src="https://upload.wikimedia.org/wikipedia/commons/7/7f/Green_equilateral_triangle_point_up.svg" width="100" height="100"><br>
<input type = "image" id = "pic" name = "question5" value = img src="https://www.publicdomainpictures.net/pictures/310000/velka/red-circle.png" width="100" height="100"><br>
</div>
<input type="button" onclick="myFunction5()" value="Start Question 5">
<script>
function myFunction5() {
document.getElementById("q5").style.display = "block";
document.getElementById("q4").style.display = "none";
}
</script>
<input id = "button" type = "button" value = "I'm finished!" onclick = "check();">
</form>
<div id = "after_submit">
<p id = "number_correct"></p>
<p id = "message"></p>
<img id = "picture">
</div>
<script src = "MathQuiz.js" defer></script>
</body>
</html>
Это мой Javascript
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++;
}
if (question2 == "9") {
correct++;
}
if (question3 == "5") {
correct++;
}
if (question4 == "9") {
correct++;
}
if (question5 == "https://upload.wikimedia.org/wikipedia/commons/8/82/Blue_Square.svg") {
correct++;
}
var pictures = ["img/win.gif", "img/meh.jpeg", "img/lose.gif"];
var messages = ["You pass the quiz", "You fail the quiz"];
var score;
if (correct == 0) {
score = 4;
}
if (correct > 0 && correct < 3) {
score = 3;
}
if (correct == 3) {
score = 2;
}
if (correct == 4) {
score = 1;
}
if (correct == 5) {
score = 0;
}
document.getElementById("after_submit").style.visibility = "visible";
document.getElementById("message").innerHTML = messages[score];
document.getElementById("number_correct").innerHTML = "You got " + correct + " correct.";
document.getElementById("picture").src = pictures[score];
}