Как сделать Quiz для лендинга?

Question

[R1msk1y]

Приветствую!
На лендинг нужно запилить квиз(опросник), примерно такого типа -

spoiler

ВОПРОСЫ

Как вас зовут?
ответ
кнопка Далее

Вы уже знаете свое предназначение в этой жизни?
да
нет
догадываюсь
Астрология помогает человеку понять свой потенциал, заложенный в момент рождения, и наиболее эффективно самореализоваться
кнопка Далее

Вам известно, какая профессия или сфера бизнеса будет давать вам самые легкие деньги?
да
нет
не могу сказать точно
кнопка Далее

Бывает чувство, что находитесь не на своем месте?
регулярно
иногда
не бывает
Такое часто случается, когда человек не живет в соответствии со своей природой. А идеальную модель поведения могут подсказать космос и звезды.
кнопка Далее

Ваши отношения с партнером - гармоничные?
вполне
хотелось бы лучше
у меня нет партнера
кнопка Далее

Уже пытались разобраться в астрологии?
хорошо разбираюсь
что-то знаю, но вся информация в кучу
не разбираюсь в астрологии
кнопка Далее

Что можно почитать посмотреть, что бы реализовать подобное?
Просто задача вроде кажется простой, а начинаю гуглить и нахожу видосы типа этого -
https://www.youtube.com/watch?v=oftMxBC1BCk&t=911s
Где JS скилл нефиговый такой нужен))
Что то попроще реально найти?

upd.
написал своими кривыми ручками вот такую реализацию:
https://codepen.io/wkurganow/pen/GRvebMj
Есть несколько вопросов к знающим людям.
1. Подскажите, как добавить анимацию на скрытие и/или показ блока.
2. Что нужно дописать чтобы ответы в каждом блоке сохранялись в какую либо переменную, после нажатия кнопки. "ДАЛЕЕ".

Comments

[Ankhena]

R1msk1y,

Ankhena, приветствую, написал этот квиз, со своими нубскими знаниями
если не трудно, может быть подскажите как добавить анимации, когда один блок скрываю и показываю другой?
ссылка на codepen - https://codepen.io/wkurganow/pen/GRvebMj

Сложно что-то советовать, не знаю, какую именно анимацию вы хотите сделать и что именно не получилось с ней.
За анимацию в основном отвечают transition и keyframes. Выбираете анимацию и прописываете, что нужно менять.
С анимацией высоты дело обстоит сложнее, но и это гуглится.

Answer 1

[Alex_mos]

А почему в таком случае

Где JS скилл нефиговый такой нужен))

не обратиться уже к готовым решениям, если не ошибаюсь есть бесплатные.

Comments

[R1msk1y]

а можете какую то ссылку подкинуть?
я просто я даже не знаю где искать

[Alex_mos]

R1msk1y, вот так можно посмотреть
Ну или если прям очень хочется повозиться можно на codpen что то найти типо такого сделать под себя

[R1msk1y]

Alex_mos, спасибо
но для меня столько кода в JS это сильно))
мой уровень - вешать события по клику, скрывать показывать элементы, добавлять классы)
тут прям сильно))
сложна, но что поделать такой порядок вещей видимо)
спасибо еще раз!)

[Ankhena]

R1msk1y,

мой уровень - вешать события по клику, скрывать показывать элементы, добавлять классы)

Собственно, это практически всё, что там нужно.
Ну и отправить потом, что вы там в результате собирались отправить или показать.

[R1msk1y]

Alex_mos, написал этот квиз со своими нубскими знаниями, если не трудно посмотрите
может подскажите как добавить анимации, когда один блок скрываю и показываю другой
ссылка на кодпед - https://codepen.io/wkurganow/pen/GRvebMj

[R1msk1y]

Ankhena, приветствую, написал этот квиз, со своими нубскими знаниями
если не трудно, может быть подскажите как добавить анимации, когда один блок скрываю и показываю другой?
ссылка на codepen - https://codepen.io/wkurganow/pen/GRvebMj

Answer 2

[Froggyweb]

То что скрывается под модным названием Quiz - это просто пошаговая форма. Готовых решений, по крайней мере на Jquery, тьма. https://www.google.com/search?q=js+step+form&oq=js...

Comments

[R1msk1y]

написал своими кривыми ручками вот такую реализацию:
https://codepen.io/wkurganow/pen/GRvebMj
Если не затруднит, может быть подскажите в следующих моментах:
1. Подскажите, как добавить анимацию на скрытие и/или показ блока.
2. Что нужно дописать чтобы ответы в каждом блоке сохранялись в какую либо переменную, после нажатия кнопки. "ДАЛЕЕ".

[Froggyweb]

R1msk1y, То что ты написал мягко говоря не очень. что бы сохранять ответы достаточно обернуть это не в див, а в форму. Блоки формы надо валидировать на каждом шаге.
Я предлагал тебе вариант вроде www.jquery-steps.com/Examples#advanced-form (требует jquery)

Answer 3

[ThunderCat]

https://www.google.com/search?q=quiz+embed

Comments

[R1msk1y]

написал своими кривыми ручками вот такую реализацию:
https://codepen.io/wkurganow/pen/GRvebMj
Если не затруднит, может быть подскажите в следующих моментах:
1. Подскажите, как добавить анимацию на скрытие и/или показ блока.
2. Что нужно дописать чтобы ответы в каждом блоке сохранялись в какую либо переменную, после нажатия кнопки. "ДАЛЕЕ".

[FrelFrloich]

R1msk1y, код в порядок приведите, вы скинули всё в мишанине. Оберните всё в форму, кнопка далее будет служить в качестве проверки на пустые поля в определённом блоке, при завершении вы отправляете запрос post через сабмит. Смените id, сделайте через делегирование в js, это глуповато для одинаковых кнопок и блоков писать одно и тоже.

Answer 4

[FrelFrloich]

Думаю вы это хотели https://codepen.io/FrelAderal/pen/mdMgdOV

Comments

[R1msk1y]

Пустая ссылка у вас

[FrelFrloich]

R1msk1y, заново зайдите, я обновил.

[R1msk1y]

FrelFrloich, спасибо. Попробую в мой код интегрировать.
А с анимацией не подскажите? Как когда блок скрываешь/показываешь ее добавить?

[FrelFrloich]

R1msk1y, https://codepen.io/FrelAderal/pen/mdMgdOV вот.

[R1msk1y]

FrelFrloich, огромное спасибо. Внесу к себе в код. Вы очень помогли!

[FrelFrloich]

R1msk1y, та нз, не забудьте кнопкам которые служат как далее указать type="button", это даст понять форме что это всего на всего кнопка, а не сабмит и напишите проверку заполнены ли поля формы, там думаю разберётесь.

[FrelFrloich]

R1msk1y, https://codepen.io/FrelAderal/pen/mdMgdOV что то вроде этого, но это не сосем верно, так как соседний элемент тут инпут, у вас не знаю какой будет.

[R1msk1y]

FrelFrloich, окей, троекратное спасибо!) только не удаляйте это с кодпен
пускай пока побудет, просьба!