Викторина Javascript с несколькими типами ввода радио и текста
Я сделал небольшой тест/викторину с типами радио и флажков. Радиокнопка в моем коде обязательна для проверки, и когда она есть, я получаю общий балл за все правильные ответы, когда это не так, я получаю предупреждение о том, что мне нужно проверить все вопросы.
Теперь я хочу расширить этот тест.
1-я проблема: я сделал несколько вопросов типа радио, я не знаю, как проверить, проверены ли все вопросы типа радио.
2-я проблема: я создал вопросы тестового типа и хочу, чтобы они отображались после того, как я нажму «Готово» (наряду с общим баллом за тестовые вопросы), но когда я нажимаю «Готово», я не вижу ответы текстового типа.
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<link rel = "stylesheet" href = "./CSS/reset.css">
<link rel = "stylesheet" href = "./CSS/main.css">
<title>Exam</title>
<script src = "./JS/assessor.js"></script>
</head>
<body>
<section>
<main>
<h2>This is the exam</h2>
<form name = "exam" id = "exam">
<div class = "question">
<div class = "questionTitle">Question 1</div>
<p><input type = "radio" id = "answer1" name = "answer1" value = "wrong">wrong</p>
<p><input type = "radio" id = "answer1" name = "answer1" value = "wrong">wrong</p>
<p><input type = "radio" id = "answer1" name = "answer1" value = "wrong">wrong</p>
<p><input type = "radio" id = "answer1" name = "answer1" value = "right">right</p>
</div>
<div class = "question">
<div class = "questionTitle1">Question 1</div>
<p><input type = "radio" id = "answer3" name = "answer3" value = "wrong">wrong</p>
<p><input type = "radio" id = "answer3" name = "answer3" value = "wrong">wrong</p>
<p><input type = "radio" id = "answer3" name = "answer3" value = "wrong">wrong</p>
<p><input type = "radio" id = "answer3" name = "answer3" value = "right">right</p>
</div>
<div class = "question">
<div class = "questionTitle">Question 2</div>
<p><input type = "checkbox" id = "answer2wrong1" name = "answer2_1" value = "wrong">wrong</p>
<p><input type = "checkbox" id = "answer2right1" name = "answer2_2" value = "right">right</p>
<p><input type = "checkbox" id = "answer2right2" name = "answer2_2" value = "right">right</p>
<p><input type = "checkbox" id = "answer2wrong2" name = "answer2_4" value = "wrong">wrong</p>
</div>
<div>
<label for = "fname">First field</label><br>
<input type = "text" id = "fname" name = "fname" value = "button1"><br>
<label for = "fname">Second field</label><br>
<input type = "text" id = "fname" name = "fname" value = "button2"><br>
<label for = "fname">Third field</label><br>
<input type = "text" id = "fname" name = "fname" value = "button3"><br>
</div>
<input type = "button" id = "button" name = "" value = "Finish" onclick = "validate();assess()">
</form>
<p id = "result"></p>
</main>
</section>
</body>
</html>
function validate() {
var valid = false;
var x = document.exam.answer1;
for(var i=0; i<x.length; i++) {
if (x[i].checked) {
valid= true;
break;
}
}
if (valid) {
assess();
}
else {
alert("All questions must be checked");
return false
}
function assess() {
var score=0;
var q1=document.exam.answer1.value;
var result=document.getElementById('result');
var exam=document.getElementById('exam');
if (q1= = "right") {score++}
if (answer2right1.checked===true) {score += 0.5}
if (answer2right2.checked===true) {score += 0.5}
if (answer2wrong1.checked===true) {score -= 0.5}
if (answer2wrong2.checked===true) {score -= 0.5}
exam.style.display = "none";
result.textContent=`${score}`;
}
}
Что ты имеешь в виду? У меня здесь все работает. Можете ли вы помочь мне решить эту проблему?
Ответы 2
Мне никто не отвечает, поэтому я пытаюсь разобраться сам. И все же я сталкиваюсь с проблемами.
1-й пример: Я получаю «Успех», когда проверяю ответ на 1-й вопрос, но мне нужно проверить, проверены ли все вопросы, и мне нужно сделать это сразу. В этом коде я могу проверить только 1 статус вопроса, проверен он или нет.
var mark = document.getElementsByTagName('input');
for (var i=0; i<mark.length; i++) {
if (mark[i].type == 'radio' && mark[i].name= = "answer1" && mark[i].checked==true) {
alert("YES")
break;
}
}
2-й пример: В этом коде он вообще не распознает мой идентификатор, и ни истина, ни ложь не работают.
if (document.getElementById("answer1").checked==true) {
alert("Success");
}
else {
alert("All questions must be checked");
}
Я понял это сам. Я добавил несколько строк, где для проверенного ответа в каждом вопросе оценка «filledQuestion» увеличивается на 1. Затем, если оценка «filledQuestion» равна количеству вопросов, он проходит, если нет, он показывает сообщение об ошибке.
function validate() {
var mark = document.getElementsByTagName('input');
var filledQuestion = 0;
for (var i=0; i<mark.length; i++) {
if (mark[i].type == 'radio' && mark[i].name= = "answerR1" && mark[i].checked==true) {
filledQuestion = filledQuestion + 1
}
else if (mark[i].type == 'radio' && mark[i].name= = "answerR2" && mark[i].checked==true) {
filledQuestion = filledQuestion + 1
break;
}
}
if (filledQuestion == 2) {
assess();
showDiv();
}
else (alert("All questions must be checked"))
Моя вторая проблема была связана с тем, что я выбрал строку (exam.style.display="none";). Когда я его не использую, оценка отображается на той же странице, и поэтому я могу видеть все изменения после отправки формы.