Гайд по квизу в Taptop

1. Общая концепция

Мы делаем квиз на карточках. У вас будет:

Несколько вопросов.

Много возможных результатов.

Переходы с помощью кнопок.

Возврат к началу.

Главная идея: Верстается каждая карточка (вопрос, результат, промежуточный шаг), а переходы связываются через атрибуты data-quiz="step…" и data-quiz="to-step…".

2. Что нужно сделать в редакторе

2.1. Сверстать карточки

Каждый вопрос и каждый результат — это отдельная карточка.
Например:

Карточка 1 — первый вопрос.

Карточки 2-1, 2-2, 2-3 — варианты развития после первого ответа.

Карточки 3-1, 3-2, 3-3… — итоговый результат.

Совет: активно используйте классы при создании карточек, чтобы не приходилось потом вручную вносить изменения на каждую из них

2.2. Проставить кастомные атрибуты на карточки

Атрибут формата:
data-quiz и значение — step…

Пример:

Первый вопрос: data-quiz="step1"

Вопрос второго уровня: data-quiz="step2-1"
(и аналогично step2-2 step2-3 step3-1 и т.д.)

2.3. Настроить кнопки внутри карточек

На каждую кнопку перехода вешается атрибут:
data-quiz и значение — "to-step…"шаг, на который нужно перейти.

Пример:

Переход на первую ветку второго уровня: data-quiz="to-step2-1"

Переход на вторую ветку второго уровня: data-quiz="to-step2-2"

Переход на первую ветку третьего уровня: data-quiz="to-step3-1"

Кнопка возврата в начало

Атрибут: data-quiz="back-to-step1" — возвращает на самую первую карточку.

3. Как работает скрипт (логика квиза)

При загрузке скрипт скрывает все карточки.

Показывает только ту, у которой data-quiz="step1".

При клике на элемент с data-quiz="to-step…" скрипт:

Скрывает текущую карточку.

Находит и показывает карточку с соответствующим data-quiz="step…".

4. Итог: что нужно сделать по шагам

Сверстать каждую карточку вопроса и результата.

Расставить data-quiz="step…" на карточки.

На кнопки внутри карточек повесить data-quiz="to-step…" (куда перейти)

Подключить скрипт, который управляет показами/скрытием карточек

<script>
  (function(){
    const show = s => {
        document.querySelectorAll('[data-quiz^="step"]').forEach(el => el.style.display = 'none');
        document.querySelector(`[data-quiz="${s}"]`).style.display = 'flex';
    };
    document.addEventListener('click', e => {
        const btn = e.target.closest('[data-quiz]');
        if(!btn) return;
        const action = btn.getAttribute('data-quiz');
        show(action === 'back-to-step1' ? 'step1' : action.replace('to-', ''));
    }, true);
    show('step1');
})();
</script>