JavaScript. Проверка правильных ответов в тесте

269

31 декабря 2021, 05:40

В общем идея такая, имеются имеются radiobutton'ы нужно нажать выбрать ответы во всех вопросах, по нажатию на кнопку должно проверяться правильные ответы или нет. Вот с этим проблема с JS я знаком не сильно, и уже битый час не могу понять как проверить корректность ответа, уже и так и этак пробовал. Вот последний вариант:

function summary(){ 
    let count = document.getElementsByClassName('question').length; //Количество вопросов 
    let answers = document.querySelectorAll('.question'); //Все элементы div с вопросами (???) 
    let score = 0; //Количество верных ответов 
    let rightAnswers = ['<input type="radio" name="quest0" id="a_1">','<input type="radio" name="quest1" id="a_3">','<input type="radio" name="quest2" id="a_1">'] //Список верных ответов 
     
    for (let i = 0; i < count; i++){ 
        let chosenAnswer = answers[i].querySelector("input[type='radio']:checked"); //Из массива вопросов выбираем элемент радио, который выбрал пользователь 
        if (chosenAnswer == rightAnswers[i]) //Думал что будет работать если будет свреять по html разметке, но зря 
        { 
            score++; 
        } 
        console.log("Выбранный ответ: " + chosenAnswer); 
        console.log("Правильный ответ: " + rightAnswers[i]); 
        console.log("Очки: " + score); 
    } 
}

<div class="question"> 
                <hr> 
                <p class="text-center"><b>ВОПРОС №1: &laquo;В каком году родился Бродский?&raquo;</b></p> 
                <ol> 
                    <li><input type="radio" name="quest0" id="a_1"> <label class="form-check-label" for="a_1">В 1926 году</label></li> 
                    <li><input type="radio" name="quest0" id="a_2"> <label class="form-check-label" for="a_2">В 1936 году</label></li> 
                    <li><input type="radio" name="quest0" id="a_3"> <label class="form-check-label" for="a_3">В 1956 году</label></li> 
                    <li><input type="radio" name="quest0" id="a_4"> <label class="form-check-label" for="a_4">В 1986 году</label></li> 
                </ol> 
            </div> 
 
            <div class="question"> 
            <hr> 
                <p class="text-center"><b>ВОПРОС №2: &laquo;В каком году родился Бродский?&raquo;</b></p> 
                <ol> 
                    <li><input type="radio" name="quest1" id="a_1"> <label class="form-check-label" for="a_1">В 1926 году</label></li> 
                    <li><input type="radio" name="quest1" id="a_2"> <label class="form-check-label" for="a_2">В 1936 году</label></li> 
                    <li><input type="radio" name="quest1" id="a_3"> <label class="form-check-label" for="a_3">В 1956 году</label></li> 
                    <li><input type="radio" name="quest1" id="a_4"> <label class="form-check-label" for="a_4">В 1986 году</label></li> 
                </ol> 
            </div> 
 
            <div class="question"> 
                <hr> 
                <p class="text-center"><b>ВОПРОС №3: &laquo;В каком году родился Бродский?&raquo;</b></p> 
                <ol> 
                    <li><input type="radio" name="quest2" id="a_1"> <label class="form-check-label" for="z_1">В 1926 году</label></li> 
                    <li><input type="radio" name="quest2" id="a_2"> <label class="form-check-label" for="a_2">В 1936 году</label></li> 
                    <li><input type="radio" name="quest2" id="a_3"> <label class="form-check-label" for="a_3">В 1956 году</label></li> 
                    <li><input type="radio" name="quest2" id="a_4"> <label class="form-check-label" for="a_4">В 1986 году</label></li> 
                </ol> 
            </div> 
            <hr> 
             
            <button class="btn-success btn-lg btn-block" id ="apply" onclick="summary();">Получить результат</button>

Так вот, вопрос, как проверить что выбран был правильный radiobutton в каждом вопросе.

Answer 1

Не дублируйте id элементов. С повторяющимися id щелчки по label с for работают неправильно.

function summary() { 
  let count = document.getElementsByClassName('question').length; //Количество вопросов 
  let answers = document.querySelectorAll('.question'); //Все элементы div с вопросами (???) 
  let score = 0; //Количество верных ответов 
  let rightAnswers = ["a_1", "a_3", "a_1"] //Список верных ответов 
 
  for (let i = 0; i < count; i++) { 
    let chosenAnswer = answers[i].querySelector("input[type='radio']:checked"); //Из массива вопросов выбираем элемент радио, который выбрал пользователь 
    if (chosenAnswer && chosenAnswer.id == rightAnswers[i]) //Думал что будет работать если будет свреять по html разметке, но зря 
    { 
      score++; 
    } 
    console.log("Выбранный ответ: " + chosenAnswer && chosenAnswer.parentNode.textContent); 
    console.log("Правильный ответ: " + rightAnswers[i]); 
    console.log("Очки: " + score); 
  } 
}

<div class="question"> 
  <hr> 
  <p class="text-center"><b>ВОПРОС №1: &laquo;В каком году родился Бродский?&raquo;</b></p> 
  <ol> 
    <li><input type="radio" name="quest0" id="a_1"> <label class="form-check-label" for="a_1">В 1926 году</label></li> 
    <li><input type="radio" name="quest0" id="a_2"> <label class="form-check-label" for="a_2">В 1936 году</label></li> 
    <li><input type="radio" name="quest0" id="a_3"> <label class="form-check-label" for="a_3">В 1956 году</label></li> 
    <li><input type="radio" name="quest0" id="a_4"> <label class="form-check-label" for="a_4">В 1986 году</label></li> 
  </ol> 
</div> 
 
<div class="question"> 
  <hr> 
  <p class="text-center"><b>ВОПРОС №2: &laquo;В каком году родился Бродский?&raquo;</b></p> 
  <ol> 
    <li><input type="radio" name="quest1" id="a_1"> <label class="form-check-label" for="a_1">В 1926 году</label></li> 
    <li><input type="radio" name="quest1" id="a_2"> <label class="form-check-label" for="a_2">В 1936 году</label></li> 
    <li><input type="radio" name="quest1" id="a_3"> <label class="form-check-label" for="a_3">В 1956 году</label></li> 
    <li><input type="radio" name="quest1" id="a_4"> <label class="form-check-label" for="a_4">В 1986 году</label></li> 
  </ol> 
</div> 
 
<div class="question"> 
  <hr> 
  <p class="text-center"><b>ВОПРОС №3: &laquo;В каком году родился Бродский?&raquo;</b></p> 
  <ol> 
    <li><input type="radio" name="quest2" id="a_1"> <label class="form-check-label" for="z_1">В 1926 году</label></li> 
    <li><input type="radio" name="quest2" id="a_2"> <label class="form-check-label" for="a_2">В 1936 году</label></li> 
    <li><input type="radio" name="quest2" id="a_3"> <label class="form-check-label" for="a_3">В 1956 году</label></li> 
    <li><input type="radio" name="quest2" id="a_4"> <label class="form-check-label" for="a_4">В 1986 году</label></li> 
  </ol> 
</div> 
<hr> 
 
<button class="btn-success btn-lg btn-block" id="apply" onclick="summary();">Получить результат</button>

Создание сайта для дропшиппинга в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Что значит "question.choice_set.all"? Помогите понять код

Не могу понять этот кусок:

203

Java

Каким образом можно добавить объекты классов из пакета javafx.geometry?

Как их визуализировать и возможно ли это вообще? Например Point2D, он ведь не расширяет Node, следовательно его нельзя поместить ни в один из контейнеров

148

Java

Множественный рендеринг моделей Libgdx

кто может подсказать, хочу отрисовать одну модель, в разных местах на карте, прочитал, что можно сделать один меш, и через вершинный шейдер...

103

Java

Надо обрезать до определенной точки

есть текст hhsds

103