HTML — создать табло в Javascript для математической викторины

Создать табло в Javascript для математической викторины

Я создал Math Quiz, используя Javascript. У меня проблемы с созданием «табло». Мне нужно показать пользователю, на сколько вопросов они ответили до сих пор и общий балл. Кроме того, для моего Вопроса № 5 я пытаюсь сделать его «Повествовательным вопросом с текстовым ответом». Мне нужно иметь как минимум 3 типа вопросов. Пока у меня есть переключатели для множественного выбора и текстовое поле для заполнения пустого вопроса.

Вот мой файл JS

 {amp}lt;!DOCTYPE html{amp}gt; {amp}lt;html{amp}gt; {amp}lt;head{amp}gt; {amp}lt;title{amp}gt;Math Quiz!{amp}lt;/title{amp}gt; {amp}lt;link href ="quizCSS.css" rel ="stylesheet"{amp}gt; {amp}lt;link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet"{amp}gt; {amp}lt;script src = "MathQuiz.js" defer{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;script{amp}gt; function myAnswer1(){ let question1= document.querySelector("#textbox").value; if(question1 == 4){ alert("You are correct!"); } else{ alert("Wrong answer!"); } } {amp}lt;/script{amp}gt; {amp}lt;script{amp}gt; function myAnswer2(){ let question2 = document.querySelector('input[name="question2"]:checked').value; if(question2 == 9){ alert("You are correct!"); } else{ alert("Wrong answer!"); } } {amp}lt;/script{amp}gt; {amp}lt;script{amp}gt; function myAnswer3(){ let question3 = document.querySelector('input[name="question3"]:checked').value; if(question3 == 5){ alert("You are correct!"); } else{ alert("Wrong answer!"); } } {amp}lt;/script{amp}gt; {amp}lt;script{amp}gt; function myAnswer4(){ let question3 = document.querySelector('input[name="question4"]:checked').value; if(question3 == 9){ alert("You are correct!"); } else{ alert("Wrong answer!"); } } {amp}lt;script{amp}gt; function myAnswer5(){ let question5 = document.querySelector('input[name="question5"]:checked').value; if(question5 == https://upload.wikimedia.org/wikipedia/commons/8/82/Blue_Square.svg" width="100" height="100){ alert("You are correct!"); } else{ alert("Wrong answer!"); } } {amp}lt;/script{amp}gt; {amp}lt;/head{amp}gt; {amp}lt;body{amp}gt; {amp}lt;h1{amp}gt;Take the Quiz!{amp}lt;/h1{amp}gt; {amp}lt;form id = "quiz" name = "quiz"{amp}gt; {amp}lt;div id="q1"{amp}gt; {amp}lt;p class = "questions"{amp}gt;1) What is 2   2?{amp}lt;/p{amp}gt; {amp}lt;input id = "textbox" type = "text" name = "question1"{amp}gt; {amp}lt;input type="button" onclick="myAnswer1()" value="Submit Answer"{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;input type="button" onclick="myFunction1()" value="Start Question 1"{amp}gt; {amp}lt;script{amp}gt; function myFunction1() { document.getElementById("q1").style.display = "block"; } {amp}lt;/script{amp}gt; {amp}lt;div id="q2"{amp}gt; {amp}lt;p class = "questions"{amp}gt;2) What is 3 to the power of 2?{amp}lt;/p{amp}gt; {amp}lt;input type = "radio" id = "mc1" name = "question2" value = "9"{amp}gt;9{amp}lt;br{amp}gt; {amp}lt;input type = "radio" id = "mc2" name = "question2" value = "6"{amp}gt;6{amp}lt;br{amp}gt; {amp}lt;input type = "radio" id = "mc3" name = "question2" value = "3"{amp}gt;3{amp}lt;br{amp}gt; {amp}lt;input type="button" onclick="myAnswer2()" value="Submit Answer"{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;input type="button" onclick="myFunction2()" value="Start Question 2"{amp}gt; {amp}lt;script{amp}gt; function myFunction2() { document.getElementById("q2").style.display = "block"; document.getElementById("q1").style.display = "none"; } {amp}lt;/script{amp}gt; {amp}lt;div id="q3"{amp}gt; {amp}lt;p class = "questions"{amp}gt;3) What is the square root of 25?{amp}lt;/p{amp}gt; {amp}lt;input type = "radio" id = "mc" name = "question3" value = "5"{amp}gt; 5{amp}lt;br{amp}gt; {amp}lt;input type = "radio" id = "mc" name = "question3" value = "525"{amp}gt; 525{amp}lt;br{amp}gt; {amp}lt;input type="button" onclick="myAnswer3()" value="Submit Answer"{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;input type="button" onclick="myFunction3()" value="Start Question 3"{amp}gt; {amp}lt;script{amp}gt; function myFunction3() { document.getElementById("q3").style.display = "block"; document.getElementById("q2").style.display = "none"; } {amp}lt;/script{amp}gt; {amp}lt;div id="q4"{amp}gt; {amp}lt;p class = "questions"{amp}gt;4) What is the square root of 81?{amp}lt;/p{amp}gt; {amp}lt;input type = "radio" id = "mc" name = "question4" value = "9"{amp}gt; 9{amp}lt;br{amp}gt; {amp}lt;input type = "radio" id = "mc" name = "question4" value = "7"{amp}gt; 7{amp}lt;br{amp}gt; {amp}lt;input type="button" onclick="myAnswer4()" value="Submit Answer"{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;input type="button" onclick="myFunction4()" value="Start Question 4"{amp}gt; {amp}lt;script{amp}gt; function myFunction4() { document.getElementById("q4").style.display = "block"; document.getElementById("q3").style.display = "none"; } {amp}lt;/script{amp}gt; {amp}lt;div id="q5"{amp}gt; {amp}lt;p class = "questions"{amp}gt;5) The Joker has a dirty bomb somewhere in Gotham city. Batman has 1 hour before it detonates and leaves the city polluted with Joker toxin for months to come. Batman beat the location of the bomb out of Harley Quinn. It is 10 miles away. The bomb would take 30 minutes to diffuse. If Batman drives the Batmobile at 100mph, how long would it take to reach and diffuse the Joker toxin bomb?{amp}lt;/p{amp}gt; {amp}lt;input type = "image" id = "pic1" name = "question5" value = img src="https://upload.wikimedia.org/wikipedia/commons/8/82/Blue_Square.svg" width="100" height="100"{amp}gt;{amp}lt;br{amp}gt; {amp}lt;input type = "image" id = "pic2" name = "question5" value = img src="https://upload.wikimedia.org/wikipedia/commons/7/7f/Green_equilateral_triangle_point_up.svg" width="100" height="100"{amp}gt;{amp}lt;br{amp}gt; {amp}lt;input type = "image" id = "pic3" name = "question5" value = img src="https://www.publicdomainpictures.net/pictures/310000/velka/red-circle.png" width="100" height="100"{amp}gt;{amp}lt;br{amp}gt; {amp}lt;input type="button" onclick="myAnswer5()" value="Submit Answer"{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;input type="button" onclick="myFunction5()" value="Start Question 5"{amp}gt; {amp}lt;script{amp}gt; function myFunction5() { document.getElementById("q5").style.display = "block"; document.getElementById("q4").style.display = "none"; } {amp}lt;/script{amp}gt; {amp}lt;input id = "button" type = "button" value = "I'm finished!" onclick = "check();"{amp}gt; {amp}lt;/form{amp}gt; {amp}lt;div id = "after_submit"{amp}gt; {amp}lt;p id = "number_correct"{amp}gt;{amp}lt;/p{amp}gt; {amp}lt;p id = "message"{amp}gt;{amp}lt;/p{amp}gt; {amp}lt;img id = "picture"{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;script src = "MathQuiz.js" defer{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;/body{amp}gt; {amp}lt;/html{amp}gt; 

Вот мой HTML

 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 result = ["Correct!", "Wrong Answer!"]; var correct = "Correct!"; var wrong = "Wrong Answer!"; var score; if (correct == 0) { score = 4; } if (correct {amp}gt; 0 {amp}amp;{amp}amp; correct {amp}lt; 3) { score = 3; } if (correct == 3) { score = 2; } if (correct == 4) { score = 1; } if (correct == 5) { score = 0; } document.getElementbyId("correct").innerHTML = correct; document.getElementbyId("wrong").innerHTML = wrong; 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]; } 
Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector