JSFiddle - React, Tailwind, and code Playground
HTML
<form method="POST" action="feedback.php" 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>
<input type="checkbox" class="i-6" id="i6" value="1" name="checkbox[]">
<label for="i6" tabindex="12">Выполнять стандарты по времени обслуживания</label>
</div>
<div class="checkbox">
<input type="checkbox" class="i-6" id="i7" value="0" name="checkbox[]">
<label for="i7" tabindex="13">Время ожидания в очереди 120 секунд</label>
</div>
<div class="checkbox">
<input type="checkbox" class="i-6" id="checkbox_68" value="1" name="checkbox[]">
<label for="checkbox_68" tabindex="14">Время ожидания в очереди 90 секунд</label>
</div>
<div class="checkbox">
<input type="checkbox" class="i-6" id="checkbox_69" value="1" name="checkbox[]">
<label for="checkbox_69" tabindex="15">Время обслуживания 90 секунд</label>
</div>
<div class="checkbox">
<input type="checkbox" class="i-6" id="checkbox_70" value="0" name="checkbox[]">
<label for="checkbox_70" tabindex="16">Время обслуживания 120 секунд</label>
</div>
<div class="checkbox">
<input type="checkbox" class="i-6" id="checkbox_71" value="0" name="checkbox[]">
<label for="checkbox_71" tabindex="17">Время обслуживания 60 секунд</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">Отправить</button>
</div>
</form>
CSS
/*Подсвечивание правильных и неправильных ответов*/
.right {
background-color: #33CC00;
border-radius: 50px;
}
.false {
background-color: #FF3300;
border-radius: 50px;
}
JavaScript
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}`)
}
/* Скрипт правильных и неправильных ответов */
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");
...