На этой неделе я работал над двумя различными викторинами с несколькими вариантами ответов, и сегодня я хотел бы поделиться с вами тем, как легко реализовать эту функцию в любом из ваших JS-проектов, независимо от темы.
Вот пример развернутого проекта под названием «Happy Tipper», посмотрите:
https://sulfuric-quick-trumpet.glitch.me
Теперь давайте начнем.
Прежде всего, вам нужно создать форму с вопросами и входными данными в качестве ответов (тип = «радио»). Каждый отдельный ответ должен иметь уникальный класс или идентификатор (вы выбираете сами) — это очень важно, и это находится в нашем HTML-файле.
В моем случае у каждого утверждения есть 5 вариантов на выбор (= оценка утверждений). В зависимости от отмеченной опции пользователь получает определенное количество баллов — это будет в JS, так что давайте туда.
Что нужно сделать сейчас, так это добавить баллы к результату расчета, который изначально равен нулю. Давайте использовать операторы if для всех переключателей. Количество добавляемых баллов зависит от того, какую опцию выбрал пользователь (посмотрите, как я это реализовал: сначала я выбрал класс отмеченного переключателя, а затем добавил баллы).
После того, как пользователь оценил все утверждения, он обычно видит результат в баллах. Однако в своем приложении я решил дать пользователю совет, основанный на количестве набранных им баллов — я реализовал это с помощью операторов «если-иначе».
Позвольте мне быстро подытожить все, что я сделал:
- Операторы кода и ответы в HTML
2. Установите начальные точки на ноль
3. Используя «условия if», добавьте очки к нулю в зависимости от переключателя, который проверяет пользователь.
4. Рассчитать результат и представить его пользователю (когда он нажмет кнопку)
Вуаля!
