1

В общем идея такая, имеются имеются 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 в каждом вопросе.

1 ответ 1

2

Не дублируйте 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>

1
  • chosenAnswer.id Вот чего мне не хватало. Большое спасибо!
    – Warden
    Commented 19 дек. 2019 в 15:30

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.