Квиз

Включить\выключить квиз на лендинге

• Для того, что бы после регистрации показывался квиз сегментации нужно добавить в любую форму data-атрибут [data-quiz]

 <form class="form__fields zoho_url" data-quiz method="..." action="..."></form>

• Для выключения нужно убрать этот атрибут

 <form class="form__fields zoho_url" method="..." action="..."></form>

Структура квиза

• Этот блок нужно добавлять на страницу, на которой нужно показать квиз. Это шаблонный блок модального окна, но с расширенным функционалом под квиз

<div class="modal flex justify-center" id="modal__quiz">
    <div class="modal__overlay" data-modal-close="#modal__quiz"></div>
    <div class="flex align-center modal__container">
        <div class="practic module-item module-item-modal relative">
            <div class="module-item__list">
                <h6 class="quiz__title active_color">Спасибо за ваш ответ!</h6>
                <div id="container" class="quiz-items">
                    <div id="quiz" class="quiz-item">
                        <!-- Динимические варианты ответов -->
                    </div>
                    <div class='button quiz_button' id='prev'>Назад</div>
                    <div class='button quiz_button' id='next'>Далее</div>
                </div>
            </div>
        </div>
    </div>
</div>

Вопросы квиза

• Так как почти везде они одинаковые, подключаются в блоке Footer+Scripts в корне проекта на Т

<!--Вопросы квиза-->
<script>
const questions = [{
    question: "Title",
    choices: [{
        text: 'answer 1',
        value: 'answer&#032;1'
      },
      // ...
    ],
    key: 'rolecompany'
  },
  // {...}
  ];
</script>

Логика квиза

• Вся логика квиза вынесена в глобальный бандл JavaScript:

// @github.com/frontend_bc/src/scripts/index.js

// Смотреть на function modalQuiz(). 
// Там с комментариями показана логика работы шаблонна

// Изначально квиз не заполнен и не выбранна активная форма
let quizComplete = false;
let activeForm = null;


const formWithQuiz = document.querySelector('[data-quiz]');

// Если нету квиза ([data-quiz]) - запрос серверу сразу
if (!formWithQuiz) {
    quizComplete = true;
} else {
    modalQuiz();
}

Так как вопросы квиза отправляются вместе с формой, логика такая:

• Клиент заполняет и отправляет форму;
• Эта форма записывается в activeForm (для работы с FormData);
• Показывается квиз, ответы которого записываются в данные конкретной формы
• При завершении квиза, переменная quizComplete стает true и еще раз отправляется activeForm с данными ответов квиза

// @github.com/frontend_bc/src/scripts/index.js

// $('.zoho_url').submit(function (e) {

  // ...

  if (!quizComplete) {
    LP.CORE.showModal('#modal__quiz');
  } else {
      setTimeout(function () {
          document.location.href = server_response.link;
      }, 250);
  } 
}

CSS

Все основные стили для квиза лежат в файле src/quiz/modalquiz.css.
Подключать их на странице не нужно, они уже включены в блок Footer+Scripts.

Есть варианты стилизации под разные проекты, для этого в блок .module-item.module-item-modal добавляй класс - идентификатор проекта:

• practic
• offer
• owner
• pm

Класс - идентификатор, такой же как и у домена

• Функции рендера шаблонов
• Модальные окна