Для реализации отнимания единицы при клике на неверный вариант в квизе вам потребуется использовать JavaScript. Ниже представлен пример кода, который демонстрирует такую реализацию:
HTML:
<p>Вопрос 1: Что такое JavaScript?</p> <ul> <li onclick="checkAnswer(this)">Язык программирования</li> <li onclick="checkAnswer(this)">Протокол для обмена данными</li> <li onclick="deductPoint(this)">Название браузера</li> <li onclick="checkAnswer(this)">Фреймворк для фронтенд-разработки</li> </ul> <p id="score">Счет: 0</p>
JavaScript:
let score = 0; // переменная для хранения счета function checkAnswer(element) { // Если выбран верный вариант, увеличиваем счет на 1 score++; // Обновляем счет на странице document.getElementById('score').textContent = 'Счет: ' + score; // Делаем выбранный элемент недоступным для повторного выбора element.setAttribute('onclick', ''); element.style.textDecoration = 'line-through'; element.style.cursor = 'default'; } function deductPoint(element) { // Если выбран неверный вариант, уменьшаем счет на 1 score--; // Обновляем счет на странице document.getElementById('score').textContent = 'Счет: ' + score; // Делаем выбранный элемент недоступным для повторного выбора element.setAttribute('onclick', ''); element.style.textDecoration = 'line-through'; element.style.cursor = 'default'; }
В этом примере мы создаем переменную score
для хранения счета и используем функции checkAnswer
и deductPoint
для проверки выбранного ответа и изменения счета соответственно. При клике на верный вариант ответа checkAnswer
увеличивает счет на 1, а при клике на неверный вариант deductPoint
уменьшает счет на 1. Кроме того, оба метода делают выбранный элемент недоступным для повторного выбора, устанавливая его атрибут onclick
пустым и добавляя стили для перечеркивания текста и изменения вида курсора.
Таким образом, после каждого клика на неверный вариант, счет будет уменьшаться на 1, а после каждого клика на верный вариант, счет будет увеличиваться на 1, и эти изменения будут отображаться на странице.