Programs Wizard Modal

File: snippets/programs-wizard-modal.liquid

Used in sections: page-journeys

Screenshot not yet added.
Save as docs/src/assets/screenshots/snippet-programs-wizard-modal.png

Description

Tailwind Multi-Step Quiz Modal

This code implements a multi-step quiz form displayed in a modal using Tailwind CSS and JavaScript. The modal allows users to answer questions about their preferences, which are then used to construct a filtered URL to redirect the user to relevant collections on the website.

Components:

1. Modal Structure: A fixed-position overlay containing the quiz form with a close button.
2. Multi-Step Form: Consists of three quiz steps (questions about area of interest, format, and availability).
3. Navigation and Submission: JavaScript handles step transitions and filters the selection into URL parameters.

JavaScript Functions:

• constructUrl(): Constructs the final URL with query parameters based on selected answers.
• handleStep1Selection(), handleStep2Selection(), handleStep3Selection(): Capture selections from each step to filter the collection URL.
• showStep(step): Shows the current quiz step and hides others.

Event Listeners:

• Modal Toggle: Opens modal on quiz button click and closes on close button or outside click.
• Step Navigation: Transitions between steps and manages step-specific filters.
• Form Submission: Finalizes selections, constructs the URL, and redirects after a delay.

Usage

- Users can open the quiz modal by clicking a button with `data-toggle-quiz`.
- After answering questions, users are redirected to a URL filtered by their selections.