Інтерактивний Квіз для Підбору Секс-Іграшок на Shop Express

Технічне Завдання: Інтерактивний Квіз для Підбору Секс-Іграшок на Shop Express

1. Загальний опис

Необхідно розробити інтерактивний квіз для сайту на платформі Shop Express. Квіз має допомогти користувачам підібрати інтимні іграшки на основі їхніх відповідей на кілька запитань. Результатом квізу має бути рекомендація одного основного товару та кількох схожих, які вибираються з XML-фіду або підключеня через API.

2. Вимоги до функціоналу

2.1. Етапи квізу (Питання та відповіді)

• Кількість кроків: 10-15 питань.
• Типи питань:
  • Одиничний вибір (користувач обирає лише одну опцію).
  • Множинний вибір (користувач може обрати одну або кілька опцій).
• Анімація переходів: Плавні анімації появи/зникнення питань та опцій при переході між кроками.

2.2. Завантаження та обробка товарів

• Джерело даних: XML-фід товарів з сайту або API
• Парсинг XML: На фронтенді (JavaScript) необхідно завантажити та розпарсити XML-фід, перетворивши його на об'єкти JavaScript для подальшої роботи.
•  Враховуючи можливі обмеження при завантаженні XML, розглянути варіанти вирішення 

2.3. Логіка підбору товарів 

• Визначення релевантності: Для кожного товару з XML-фіду необхідно розрахувати "бал релевантності" на основі відповідей користувача. Чим вищий бал, тим краще товар відповідає критеріям.
• Критерії скорингу (приклади, для уточнення):
  • Стать (gender): Врахувати ключові слова в назві або категорії товару ("жіночі", "чоловічі", "для двох").
  • Тип стимуляції (stimulation_type): Врахувати ключові слова в описі або назві товару ("вібрація", "пульсація", "анальний").
  • Матеріал (material): Шукати точне входження значення матеріалу в опис товару.
  • Бюджет (budget): Товари, що знаходяться в обраному ціновому діапазоні, отримують вищий бал. Товари поза діапазоном отримують від'ємний бал або зниження балу.
  • Інші параметри: Інші відповіді користувача також мають впливати на скоринг (наприклад, рівень досвіду, форма/дизайн, мета використання).
• Результат скорингу: Повернути відсортований список товарів від найбільш до найменш релевантного.

2.4. Відображення результатів

• Основний рекомендований товар: Відобразити товар з найвищим балом.
  • Зображення, назва, короткий опис, ціна.
  • Кнопка "Купити" або "Перейти до товару" з посиланням на сторінку товару.
• Схожі товари: Відобразити 5-10 наступних за релевантністю товарів.
  • Зображення, назва, ціна, посилання на сторінку товару.
  • Представити у вигляді адаптивної сітки.
• Відсутність результатів: Якщо жоден товар не відповідає критеріям або фід не завантажився, показати відповідне повідомлення та посилання на загальний каталог магазину.

3. Технічні вимоги

• HTML, CSS, JavaScript: Весь функціонал має бути реалізований за допомогою цих трьох технологій.
• Чистий JavaScript: Не використовувати сторонні фреймворки (React, Vue, Angular тощо), оскільки це Shop Express.
• Адаптивний дизайн: Квіз має коректно відображатися та функціонувати на всіх пристроях (десктоп, планшети, мобільні телефони).
• Оптимізація продуктивності: Код має бути оптимізований для швидкого завантаження та плавної роботи.
• Оформлення: Вбудовані стилі CSS у <style> та JavaScript у <script> у межах одного блоку (для зручності вставки в Shop Express).
• Семантичний HTML: Використовувати відповідні HTML5 теги.

4. Структура коду (рекомендовано)

• HTML: Основна структура квізу, включаючи контейнери для питань, опцій, прогрес-бару та результатів. Використовувати <template> для динамічно створюваних елементів (питання, опції, картки товарів).
• CSS:
  • Використовувати CSS-змінні для кольорів, відступів, тіней, заокруглень, щоб полегшити кастомізацію.
  • Медіа-запити для адаптивності.
  • Стилі для анімацій переходів.
• JavaScript:
  • Об'єкт QUIZ_QUESTIONS: Масив об'єктів, кожен з яких описує питання (id, текст, пояснення, тип, опції).
  • userAnswers: Об'єкт для зберігання відповідей користувача.
  • allProducts: Масив для зберігання розпарсених товарів.
  • Функції для:
    • updateProgressBar(): Оновлення прогрес-бару.
    • renderQuestion(): Відображення поточного питання та його опцій.
    • handleOptionClick(): Обробка вибору опції (одиничний/множинний).
    • nextStep(): Перехід до наступного кроку або відображення результатів.
    • loadProducts(): Асинхронне завантаження та парсинг XML-фіду.
    • calculateProductScores(): Логіка скорингу товарів на основі відповідей.
    • showResult(): Відображення рекомендованого та схожих товарів.
  • Ініціалізація квізу при завантаженні DOM.
    Якщо потрібно референс то є схожий проект, надам особисто. 
    

  •