Как проверить сразу несколько правильных ответов в вопросе?
Есть код, который проверяет правильность ответа на обычный вопрос, но хотелось бы как-нибудь реализовать проверку сразу нескольких ответов на один и тот же вопрос(например, отметить все правильные ответы из данных).Вот код:
var Answer = "Selected response: ";
var TrueAnswer = "Correct answer:";
var Score = "Score: ";
function summary() {
let count = document.getElementsByClassName('questions').length; //Количество вопросов
let answers = document.querySelectorAll('.questions'); //Все элементы div с вопросами (???)
let score = 0; //Количество верных ответов
let rightAnswers = ["id2"] //Список верных ответов
for (let i = 0; i < count; i++) {
let chosenAnswer = answers[i].querySelector("input[type='radio']:checked"); //Из массива вопросов выбираем элемент радио, который выбрал пользователь
if (chosenAnswer && chosenAnswer.id == rightAnswers[i]) //Проверка на правильный ответ
{
score++;
}
document.writeln(Answer + chosenAnswer.parentNode.textContent, "<br />"); //Вывод
document.writeln(TrueAnswer + rightAnswers[i], "<br />");
document.writeln(Score + score, "<br />");
}
}
/*задний фон*/
body {
background-image: url(aaa.jpg);
}
/*передний блок*/
#bases {
background-color: burlywood;
width: 60%;
margin: 0 0 20% 20%;
border-radius: 10px 10px 10px 10px;
}
/*Блок с вопросом */
.questions {
padding: 0 0 15px 15px;
}
h1 {
color: saddlebrown;
border: solid 1px green;
background-color: antiquewhite;
}
/*Элементы выбора*/
li {
color: slategrey;
}
li:hover {
transition-timing-function: linear;
transition-duration: 0.3s;
color: white;
}
/*Кнопка*/
#butt {
border-radius: 1000px;
width: 80px;
height: 20px;
margin: 0 10px 30px 30px;
}
/*Ссылки*/
a {
color: crimson;
}
a:visited {
color: crimson;
}
<div id="bases">
<h1>Проверка</h1>
<div class="questions">
<!-- Вопрос про display -->
<p>За что отвечает свойство "<a href="https://webref.ru/css/display" title="Нажми, если не знаешь!)">display</a>"?</p>
<ul>
<li><input type="radio" name="name" value="no" id="id1" /><label for="id1"> Ни за что </label></li>
<li><input type="radio" name="name" value="no" id="id2" /><label for="id2"> Определяет, как элемент должен быть показан в документе </label></li>
<li><input type="radio" name="name" value="no" id="id3" /><label for="id3"> Определяет, что будет показано на экране </label></li>
<li><input type="radio" name="name" value="no" id="id4" /><label for="id4"> Определяет возможность перемещени элемента </label></li>
</ul>
</div>
<div class="questions">
<p>Какие значения принимать может предыдущее свойство?</p>
<ul>
<li><input type="radio" name="name1" value="no" id="id_1" /><label for="id_1"> block </label></li>
<li><input type="radio" name="name1" value="no" id="id_2" /><label for="id_2"> inline </label></li>
<li><input type="radio" name="name1" value="no" id="id_3" /><label for="id_3"> center </label></li>
<li><input type="radio" name="name1" value="no" id="id_4" /><label for="id_4"> light </label></li>
<li><input type="radio" name="name1" value="no" id="id_5" /><label for="id_5"> inline-block </label></li>
<li><input type="radio" name="name1" value="no" id="id_6" /><label for="id_6"> bolt </label></li>
<li><input type="radio" name="name1" value="no" id="id_7" /><label for="id_7"> inline-table </label></li>
<li><input type="radio" name="name1" value="no" id="id_8" /><label for="id_8"> custom </label></li>
<li><input type="radio" name="name1" value="no" id="id_9" /><label for="id_9"> Число</label></li>
<li><input type="radio" name="name1" value="no" id="id_11" /><label for="id_11"> flex </label></li>
<li><input type="radio" name="name1" value="no" id="id_12" /><label for="id_12"> head </label></li>
<li><input type="radio" name="name1" value="no" id="id_13" /><label for="id_13"> footer </label></li>
</ul>
</div>
<button type="button" id="butt" onclick="summary()"><span>Проверка</span></button>
</div>