Как в опроснике сделать подсвечивание правильный и неправильных ответов?

Question

[Иван Никифоров]

У меня есть практически рабочий опросник, но есть проблема.
Нужно сделать выделение правильных и неправильных ответов (чтобы зелёные показывали правильный ответ, красный неправильный).
В js я разбираюсь не очень.
Буду очень рад, если вы мне поможете!

const form = document.querySelector('#form')
form.addEventListener('submit', onSubmit)

function onSubmit (event) {
  event.preventDefault()

  let listCheckbox = document.querySelectorAll('.i-6')
  listCheckbox = [...listCheckbox]

  // Проверяем выбран ли хотябы один ответ
  if (!listCheckbox.some(checkbox => checkbox.checked)) {
    alert('Вы не выбрали ни одного ответа')
  }
  
  else{
    form.addEventListener('submit', onSubmit)
    alert('Вы подтверждаете действие?');
  }
  // Узнаем сколько всего правильных ответов
  const rightAnswersCount = listCheckbox.filter(checkbox => Number(checkbox.value) === 1).length

  // Узнаем сколько всего не правильных ответов
  const wrongAnswerCount = listCheckbox.length - rightAnswersCount

  // Узнаем количество правильных ответов
  const rightAnswers = listCheckbox.filter(checkbox => Number(checkbox.value) === 1 && checkbox.checked).length

  // Узнаем количество не правильных ответов
  const wrongAnswer = listCheckbox.filter(checkbox => Number(checkbox.value) === 0 && checkbox.checked).length

  // Уведомляем пользователя
  console.log(`Вы ответили правильно на ${rightAnswers} из ${rightAnswersCount}`)
  console.log(`Вы ответили не правильно на ${wrongAnswer} из ${wrongAnswerCount}`)
 
  //Вывод ответа с процентами
  console.log(`Процент правильных ответов: ${(rightAnswers / rightAnswersCount) * 100}`)
  console.log(`Процент неправильных ответов: ${(wrongAnswer / wrongAnswerCount) * 100}`)
}

<form method="POST" action="#" id="form">
    <section class="table_1">
        <table class="iksweb">
            <tbody>
                <tr>
                    <td rowspan="3"><b>Культура<br>обслуживания</b>
                        <h3 class="the">Скорость:</h3>   
                        <section class="conteiner">
                            <div class="checkbox">
                                <input type="checkbox" class="i-6" id="i6" value="1">
                                <label for="i6" tabindex="12">Выполнять стандарты по времени обслуживания</label>     
                            </div>
                            <div class="checkbox">
                                <input type="checkbox" class="i-6" id="i7" value="0">
                                <label for="i7" tabindex="13">Время ожидания в очереди 120 секунд</label>     
                            </div>
                            <div class="checkbox">
                                <input type="checkbox" class="i-6" id="checkbox_68" value="1">
                                <label for="checkbox_68" tabindex="14">Время ожидания в очереди 90 секунд</label>     
                            </div>
                            <div class="checkbox">
                                <input type="checkbox" class="i-6" id="checkbox_69" value="1">
                                <label for="checkbox_69" tabindex="15">Время обслуживания 90 секунд</label>
                            </div>
                            <div class="checkbox">
                                <input type= "checkbox" class="i-6" id="checkbox_70" value="0">
                                <label for="checkbox_70" tabindex="16">Время обслуживания 120 секунд</label>
                            </div>
                            <div class="checkbox">
                                <input type="checkbox" class="i-6" id="checkbox_71" value="0">
                                <label for="checkbox_71" tabindex="17">Время обслуживания 60 секунд</label>
                            </div>
                            <div class="out-block out-6"></div>
                        </section>
                    </tr>
                 </tbody>
              </table>
          </section>
       </form>

Answer 1

[GAS-ART]

Не совсем понятно зачем Вам форма? Я так понял судя из задачи нужно определять ошибку динамически. Если так то просто проверяйте на соответсвия value и check и назначайте нужный класс который подкрасит ответы.
Что то типа такого:

let listCheckbox = document.querySelectorAll('.i-6')
for(i=0; i<listCheckbox.length; i++){
      if((listCheckbox[i].checked == true && listCheckbox[i].value == 1) || (listCheckbox[i].checked == false && listCheckbox[i].value == 0)) {
         listCheckbox[i].classList.add("right")
      }
      else(
         listCheckbox[i].classList.add('false')
      )
}

Comments

[Иван Никифоров]

Артем Хорошо, а вот чтобы назначить смену цветов для класса i-6, нужно воспользоваться псевдо-элементом hover в css?
Я проверил ВАШ код, а результат нигде не выводится. Может нужно в мой что-то добавить?

P.S. Извините, если задаю глупые вопросы.

[GAS-ART]

Он ничего и не выдаст если вы не добавите CSS свойства для добавленных классов.
Проверьте добавляются ли классы в HTML если добавляются то нужно прописать для них необходимые Вам свойства в CSS.

Да и наверное лучше заменить listCheckbox[i].classList.add("right") на:

let chekcbox = listCheckbox[i].closest('.checkbox');
chekcbox.classList.add("right");

Для listCheckbox[i].classList.add('false') поменять тоже соответственно. (это для того что бы выделить цветом весь блок "checkbox" а не только конкретный input)

Тогда в пишите CSS такое:

.checkbox.right{
background-color: green;
}
.checkbox.false{
background-color: red;
}

[GAS-ART]

псевдо-элемент hover - используется для изменение CSS свойств объекта при наведении на него мыши. Он Вам вообще не нужен...

[Иван Никифоров]

Артем, Извините, что ещё раз Вас беспокою.

выскакивает ошибка, что не удаётся прочитать classList (я заменил listCheckbox[i].classList.add("right") на

let chekcbox = listCheckbox[i].closest('.checkbox');
chekcbox.classList.add("right");

)

let listCheckbox = document.querySelectorAll('.i-6')
for(i=0; i<listCheckbox.length; i++){
      if((listCheckbox[i].checked == true && listCheckbox[i].value == 1) || (listCheckbox[i].checked == false && listCheckbox[i].value == 0)) {
        let chekcbox = listCheckbox[i].closest('.checkbox');
        chekcbox.classList.add("right");
      }
      else(
         listCheckbox[i].classList.add('false')
      )
}

[GAS-ART]

https://jsfiddle.net/1d5abeo3/23/

[Иван Никифоров]

Артем, Спасибо Вам, всё работает!