Почему не работает скрипт?

Возможно я создал глупую тему, но всё же создал. Есть тест или опросник (называйте как вашей душе угодно). Выложил опросник на fornex, скрипт работал, но в один прекрасный момент перестал работать. А не на сервере всё прекрасно работает. Что не так, можете помочь? Это наверно глупый вопрос. Только не ругайте!

<form method="POST" action="#" id="form">
    <section class="table_1">
        <table class="iksweb" name="checkbox">
            <tbody>
                <tr>
                    <td rowspan="3"><b>История компании «Mc donald's»</b>
                        <h3 class="the">Кто основал компанию «Mc donald's»?</h3>   
                        <section class="conteiner">
                            <div class="checkbox">
                                <input type="checkbox" class="i-6" id="i6" value="0" name="formDoor[]">
                                <label for="i6" tabindex="12">Роналд Макдоналд</label>     
                            </div>
                            <div class="checkbox">
                                <input type="checkbox" class="i-6" id="i7" value="0" name="formDoor[]">
                                <label for="i7" tabindex="13">Рэй Крок</label>     
                            </div>
                            <div class="checkbox">
                                <input type="checkbox" class="i-6" id="checkbox_68" value="1" name="formDoor[]">
                                <label for="checkbox_68" tabindex="14">Братья Дик и Мак Макдоналд</label>     
                            </div>
                            <div class="checkbox">
                                <input type="checkbox" class="i-6" id="checkbox_170" value="0" name="formDoor[]">
                                <label for="checkbox_170" tabindex="14">Клинт Иствуд</label>     
                            </div>
                            <div class="out-block out-6"></div>
                        </section>
                    </td>     
                </tr>
            </tbody>
        </table>
    </section>
    
    <div class="dsw">
        <button class="b-6" tabindex="11" id="btn-1" type="submit" name="formSubmit">Результат</button>
    <div>
</form>


/* Главный скрипт формы (опросника) */
 
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
 
  // Уведомляем пользователя
  alert(`Вы выбрали ${rightAnswers} вариантов из ${rightAnswersCount} правильных`);
  /*alert(`Вы ответили не правильно на ${wrongAnswer} из ${wrongAnswerCount}`)*/
 
  //Вывод ответа с процентами
  alert(`Процент правильных ответов: ${(rightAnswers / rightAnswersCount) * 100}`);
  /*alert(`Процент неправильных ответов: ${(wrongAnswer / wrongAnswerCount) * 100}`)*/
 
}
 
/* Скрипт правильных и неправильных ответов */
let button = document.getElementById('btn-1');
button.addEventListener('click', function(e) {
  document.querySelectorAll('.i-6').forEach(item => {
    let chekcbox = item.closest('div');
    if (item.checked && Number(item.value)) {
      chekcbox.classList.add("right");
      chekcbox.classList.remove("false");
    } else if (item.checked) {
      chekcbox.classList.add("false");
      chekcbox.classList.remove("right");
    } else {
      chekcbox.classList.remove("right");
      chekcbox.classList.remove("false");
    }
  })
});
  • Вопрос задан
  • 103 просмотра
Пригласить эксперта
Ответы на вопрос 1
Torin_Asakura
@Torin_Asakura
Lead Architect
Сейчас процент вычисляется как (Выбранные правильные ответы)/(Все правильные ответы), типа если у нас из 4 возможных вариантов 1 правильный - то у нас возможны только 2 ситуации: (0/1) - это когда правильный ответ не выбран и (1/1) - когда выбран, при этом не берутся в учёт остальные выбранные варианты, т.е - мы можем чекнуть все 4 из 4 вариантов и в формуле будет (1/1*100), т.е. 100%

я добавил переменную
const selectedAnswersCounts = listCheckbox.filter(checkbox => checkbox.checked).length

она считает количество всех выбранных вариантов, это подставляется в формулу вместо знаменателя, т.е. если опять брать пример выше где мы чекаем все 4 чекбокса и среди них есть правильный то он не будет говорить что мы сверхразум и 100% все правильно, а он сравнит это как раз с новой переменной, и результатом будет 25%

Так как у нас до этого идет алёрт где показывается сколько из скольки правильных ответов мы выбрали это смотрится еще более логично

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

function onSubmit (event) {
  event.preventDefault()

  let listCheckbox = document.querySelectorAll('.i-6')
  listCheckbox = [...listCheckbox]
  
  const selectedAnswersCounts = listCheckbox.filter(checkbox => checkbox.checked).length


  // Проверяем выбран ли хотябы один ответ
  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

  // Уведомляем пользователя
  alert(`Вы выбрали ${rightAnswers} вариантов из ${rightAnswersCount} правильных`);
  /*alert(`Вы ответили не правильно на ${wrongAnswer} из ${wrongAnswerCount}`)*/

  //Вывод ответа с процентами
  alert(`Процент правильных ответов: ${(rightAnswers / selectedAnswersCounts) * 100}`);
  /*alert(`Процент неправильных ответов: ${(wrongAnswer / wrongAnswerCount) * 100}`)*/

}

/* Скрипт правильных и неправильных ответов */
let button = document.getElementById('btn-1');
button.addEventListener('click', function(e) {
  document.querySelectorAll('.i-6').forEach(item => {
    let checkbox = item.closest('div');
    if (item.checked && Number(item.value)) {
      checkbox.classList.add("right");
      checkbox.classList.remove("false");
    } else if (item.checked) {
      checkbox.classList.add("false");
      checkbox.classList.remove("right");
    } else {
      chekcbox.classList.remove("right");
      chekcbox.classList.remove("false");
    }
  })
});
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы