Interactive Quiz for Selecting Sex Toys on Shop Express

Technical Specification: Interactive Quiz for Selecting Sex Toys on Shop Express

1. General Description

It is necessary to develop an interactive quiz for the Shop Express platform website. The quiz should help users select intimate toys based on their answers to several questions. The quiz results should include a recommendation of one main product and several similar ones, selected from an XML feed or via API connection.

2. Functional Requirements

2.1. Quiz Stages (Questions and Answers)

• Number of steps: 10-15 questions.
• Question types:
  • Single choice (user selects only one option).
  • Multiple choice (user can select one or several options).
• Transition animations: Smooth animations for showing/hiding questions and options when moving between steps.

2.2. Loading and Processing Products

• Data source: XML feed of products from the website or API
• XML parsing: On the frontend (JavaScript), load and parse the XML feed, converting it into JavaScript objects for further use.
•  Considering possible limitations when loading XML, explore solutions.

2.3. Product Selection Logic

• Relevance scoring: For each product from the XML feed, calculate a "relevance score" based on user responses. The higher the score, the better the product matches the criteria.
• Scoring criteria (examples, for clarification):
  • Gender (gender): Consider keywords in the product name or category ("women", "men", "for two").
  • Stimulation type (stimulation_type): Consider keywords in description or name ("vibration", "pulsation", "anal").
  • Material (material): Look for exact matches of the material value in the product description.
  • Budget (budget): Products within the selected price range receive higher scores. Out-of-range products get negative or reduced scores.
  • Other parameters: Other user responses also influence scoring (e.g., experience level, shape/design, purpose of use).
• Scoring result: Return a sorted list of products from most to least relevant.

2.4. Displaying Results

• Main recommended product: Display the product with the highest score.
  • Image, name, short description, price.
  • "Buy" or "Go to product" button linking to the product page.
• Similar products: Display 5-10 products following in relevance.
  • Image, name, price, link to product page.
  • Present in a responsive grid.
• No results: If no products match criteria or feed fails to load, show an appropriate message and link to the general store catalog.

3. Technical Requirements

• HTML, CSS, JavaScript: All functionality must be implemented using these three technologies.
• Pure JavaScript: Do not use third-party frameworks (React, Vue, Angular, etc.) as this is Shop Express.
• Responsive design: The quiz must display correctly and function on all devices (desktop, tablets, smartphones).
• Performance optimization: Code should be optimized for fast loading and smooth operation.
• Styling: Inline CSS styles within <style> and JavaScript within <script> blocks for easy insertion into Shop Express.
• Semantic HTML: Use appropriate HTML5 tags.

4. Code Structure (recommended)

• HTML: Main quiz structure, including containers for questions, options, progress bar, and results. Use <template> for dynamically created elements (questions, options, product cards).
• CSS:
  • Use CSS variables for colors, spacing, shadows, border-radius to facilitate customization.
  • Media queries for responsiveness.
  • Styles for transition animations.
• JavaScript:
  • Object QUIZ_QUESTIONS: Array of objects describing questions (id, text, explanation, type, options).
  • userAnswers: Object for storing user responses.
  • allProducts: Array for storing parsed products.
  • Functions for:
    • updateProgressBar(): Updating progress bar.
    • renderQuestion(): Displaying current question and options.
    • handleOptionClick(): Handling option selection (single/multiple).
    • nextStep(): Moving to next step or showing results.
    • loadProducts(): Asynchronously loading and parsing XML feed.
    • calculateProductScores(): Logic for scoring products based on answers.
    • showResult(): Displaying recommended and similar products.
  • Initialize quiz on DOM load.
    If references needed, there is a similar project, will provide personally.
    

  •