QUIZ калькулятор – База знаний uCalc

База знаний uCalc

QUIZ калькулятор

Для реализации данного функционала вам необходимо создать две кнопки на странице: «Далее» и «Назад»

Теперь нужно узнать атрибут id для этих кнопок, для этого щелкните по ним правой кнопкой мыши - «Исследовать элемент»

Аналогичным способом необходимо получить атрибут id всех остальных элементов квиз формы.

После получения id необходимо скрыть все элементы при нажатии на кнопку далее. Для этого добавьте виджет “HTML код” в конец формы и вставьте в него следующий код:

<script>
 $('#grid-N, #grid-M, …, #grid-Z').css('display','none','!important') // скрываем блоки
 XD.postHeight();
</script>

#grid-N, #grid-M, …, #grid-Z - id атрибутов которые необходимо скрыть.


Подключаем функционал кнопок «Далее» и «Назад»


Добавьте еще один виджет «HTML код» разместив его перед результатом в квиз форме и добавьте в него следующий код.

<script>
 $('.button-N').click(function () { // где N - ID кнопки, который мы узнали на 2 шаге
 $('#grid-N, #grid-M').css('display','none','!important') // скрываем блок текущего шага, вписываем ID блоков этого шага
 $('#grid-Y, #grid-Z').show() // открываем блок следующего шага, вписываем ID блоков следующего шага
 XD.postHeight();
})
</script>
.button-N - id кнопки Далее.
#grid-N - id элементов которые необходимо скрыть или показать.

Аналогичным способом реализуется кнопка назад.


Пример QUIZ калькулятора

Вы нашли здесь ответ на свой вопрос?

Вы уже оценивали эту статью.

Спасибо за оценку!

Дарим приятный бонус в виде промо-кода HELP-10 на 10% скидку при оплате тарифа.

Инструкция оказалась полезной для 2 пользователей.