Shopify Quiz Modal: Earn Discount Code to Your Visitors

Do you need a manageable edit in your Shopify store where your visitors solve a few question quizzes and then get a discount code if they answer all the questions correctly? We have developed it for you. You can see the code at the bottom of the page.

What is Quiz Modal and How Does It Work?

Quiz Modal is a fully manageable interactive quiz system that lets you interact with your customers in your Shopify store and offer them exclusive discount codes. Thanks to this system, your visitors can have a fun quiz experience, while you can increase customer engagement and increase your sales.

Key Features

Manageable Quiz System

• Easy Management from Admin Panel: You can easily add and edit questions, answers, and correct answers from the Shopify admin panel.
• Add Unlimited Questions: You can add as many questions as you want, create 4 different answer options for each question.
• Customizable Content: You can customize the title, subtitle, success messages and discount code from admin panel.

Discount Code System

• Achievement Award: Visitors earn your special discount code when they answer all questions correctly.
• One-Click Copy: The earned discount code can be copied with one click, the user experience is maximum.
• 7-Day Access: The discount code screen can be accessed for 7 days after the successful quiz is completed.

User Experience Features

• Automatic Opening: Quiz modal opens automatically after 5 seconds when the page loads (optional).
• Sticky Tabs: On the left side of the page there is a fixed “QUIZ” tab, visitors can access the quiz at any time.
• Progress Indicator: With the progress indicator on each question, the user can see what stage he is in.
• Shuffle Feature: At the beginning of each quiz, the answers are automatically shuffled, so each experience is different.
• Bug Management: If the wrong answer is given, the user is informed and the opportunity to start the test again.

Responsive Design

• Mobile Compatible: Excellent appearance and use experience on all devices.
• Modern Interface: Clean, modern and user-friendly design.
• Smooth Animations: Professional look with transitions and animations.

How to Install

1. Adding Sections: Navigate to “Online Store > Themes > Customize” in the Shopify admin panel.
2. Modal Section Quiz: Click on the “Add section” button and add the “Quiz Modal” section.
3. Configure Settings:
   • Enter title and subtitle
   • Determine your discount code
   • Customize success messages
   • Adjust auto open setting
4. Add QuestionsAdd your questions with the “Add block” button:
   • Choose emoji for each question
   • Write the text of the question
   • Enter the answers by separating them with the sign “|”
   • Choose the correct answer (1-4)
5. Save: Save all settings and your quiz is ready!

Usage Scenarios

E-commerce Stores

• Customer training with product knowledge testing
• Increasing brand awareness
• Create an email list
• Sales promotion campaigns

Personal Care and Cosmetics

• Skin care knowledge test
• Product usage guide
• Customer segmentation
• Special discount campaigns

Training and Consulting

• Quiz
• Measuring customer interest
• Lead generation
• Increase brand engagement

Technical Specifications

• Web-Componenten: Use of custom elements in accordance with modern web standards
• LocalStorage: Storing user status in browser
• Liquid Template: Integration with Shopify Liquid template system
• Vanilla JavaScript: Lightweight and fast operation without framework dependency
• CSS Animations: Smooth transitions and animations

Advantages

✅ Increases Conversion Rate: Interactive content attracts customer interest and increases sales. ✅ Customer Training: With the quiz format, you can inform your customers about your products. ✅ Email Collection: You can segment customers based on quiz results. ✅ Brand Interaction: You increase brand loyalty by offering a fun experience. ✅ SEO Friendly: Interactive content increases page time and contributes to your SEO score. ✅ Easy Management: Easily managed from the admin panel, requires no technical knowledge.

consequence

The Shopify Quiz Modal system is one of the most fun and effective ways to interact with your customers in your store and offer them valuable discount codes. With its manageable structure, modern design and user-friendly interface, it is a solution that both you and your customers will be satisfied.

Engage your customers, increase your brand awareness and boost your sales with Quiz Modal!

‍

{%- assign quiz_key = 'quiz_closed_' | append: section.id -%}
{%- assign quiz_closed_date = '' | append: cart.attributes[quiz_key] -%}
{%- assign should_show_quiz = true -%}

{%- if quiz_closed_date != blank -%}
  {%- assign closed_timestamp = quiz_closed_date | plus: 0 -%}
  {%- assign current_timestamp = 'now' | date: '%s' | plus: 0 -%}
  {%- assign days_passed = current_timestamp | minus: closed_timestamp | divided_by: 86400 -%}
  {%- if days_passed < 7 -%}
    {%- assign should_show_quiz = false -%}
  {%- endif -%}
{%- endif -%}

<quiz-modal
  id="quiz-modal-{{ section.id }}"
  data-section-id="{{ section.id }}"
  data-discount-code="{{ section.settings.discount_code }}"
  data-auto-show="{% if should_show_quiz and section.settings.auto_show %}true{% else %}false{% endif %}"
  data-total-questions="{{ section.blocks.size }}"
>
  <div class="quiz-modal__overlay" data-quiz-close></div>

  <div class="quiz-modal__container">
    <button class="quiz-modal__close" data-quiz-close aria-label="Close quiz">
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <line x1="18" y1="6" x2="6" y2="18"></line>
        <line x1="6" y1="6" x2="18" y2="18"></line>
      </svg>
    </button>

    <div class="quiz-modal__content">
      {%- if section.blocks.size > 0 -%}
        <div class="quiz-modal__header">
          <h2 class="quiz-modal__title">
            {{ section.settings.title | default: '3 soruyu doğru cevapla %15 indirim kazan ✨' }}
          </h2>
          <p class="quiz-modal__subtitle">
            {{ section.settings.subtitle | default: 'Cilt bakımı bilginizi test edin ve özel indirim kazanın!' }}
          </p>
        </div>

        <div class="quiz-modal__steps">
          {%- for block in section.blocks -%}
            <div
              class="quiz-step"
              data-step="{{ forloop.index }}"
              data-question-id="{{ block.id }}"
              {% unless forloop.first %}
                style="display: none;"
              {% endunless %}
            >
              <div class="quiz-step__header">
                <span class="quiz-step__number">Soru {{ forloop.index }}</span>
                <div class="quiz-step__progress">
                  {%- for i in (1..section.blocks.size) -%}
                    <span
                      class="quiz-step__dot {% if forloop.index <= forloop.parentloop.index %}active{% endif %}"
                    ></span>
                  {%- endfor -%}
                </div>
              </div>

              <div class="quiz-step__question">
                <p class="quiz-step__emoji">{{ block.settings.emoji | default: '✨' }}</p>
                <h3 class="quiz-step__question-text">{{ block.settings.question }}</h3>
              </div>

              <div class="quiz-step__answers">
                {%- assign answers = block.settings.answers | split: '|' -%}
                {%- for answer in answers -%}
                  {%- assign answer_index = forloop.index -%}
                  {%- assign is_correct = false -%}
                  {%- if answer_index == block.settings.correct_answer -%}
                    {%- assign is_correct = true -%}
                  {%- endif -%}

                  <button
                    class="quiz-step__answer"
                    data-answer="{{ answer_index }}"
                    data-correct="{% if is_correct %}true{% else %}false{% endif %}"
                    type="button"
                  >
                    <span class="quiz-step__answer-number">{{ answer_index }}</span>
                    <span class="quiz-step__answer-text">{{ answer | strip }}</span>
                  </button>
                {%- endfor -%}
              </div>
            </div>
          {%- endfor -%}

          <div class="quiz-step quiz-step--error" data-step="error" style="display: none;">
            <div class="quiz-step__error-content">
              <div class="quiz-step__error-icon">❌</div>
              <h3 class="quiz-step__error-title">Yanlış Cevap!</h3>
              <p class="quiz-step__error-message">Teste tekrar başlamak için butona tıklayın.</p>
              <button class="quiz-step__restart-btn" data-quiz-restart>Teste Tekrar Başla</button>
            </div>
          </div>

          <div class="quiz-step quiz-step--success" data-step="success" style="display: none;">
            <div class="quiz-step__success-content">
              <div class="quiz-step__success-icon">🎉</div>
              <h3 class="quiz-step__success-title">
                {{ section.settings.success_title | default: 'Tebrikler! Tüm soruları doğru cevapladınız!' }}
              </h3>
              <p class="quiz-step__success-message">
                {{ section.settings.success_message | default: 'Özel indirim kodunuz:' }}
              </p>
              <div class="quiz-step__discount-code">
                <input
                  type="text"
                  class="quiz-step__code-input"
                  value="{{ section.settings.discount_code }}"
                  readonly
                  id="discount-code-{{ section.id }}"
                >
                <button
                  class="quiz-step__copy-btn"
                  data-copy-code
                  aria-label="Copy discount code"
                >
                  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
                    <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
                  </svg>
                  Kopyala
                </button>
              </div>
              <button class="quiz-step__close-btn" data-quiz-close>Kapat</button>
            </div>
          </div>
        </div>
      {%- else -%}
        <div class="quiz-modal__empty">
          <p>Lütfen admin panelden sorular ekleyin.</p>
        </div>
      {%- endif -%}
    </div>
  </div>
</quiz-modal>

<quiz-sticky-tab
  id="quiz-sticky-{{ section.id }}"
  data-section-id="{{ section.id }}"
  class="quiz-sticky-tab"
>
  <button class="quiz-sticky-tab__button" data-quiz-open aria-label="Open quiz">
    <span class="quiz-sticky-tab__text">QUIZ</span>
  </button>
</quiz-sticky-tab>

<style>
  quiz-modal {
    display: none;
  }

  quiz-modal[open] {
    display: block;
  }

  .quiz-modal__overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9998;
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .quiz-modal__overlay.active {
    opacity: 1;
  }

  .quiz-modal__container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    background: white;
    border-radius: 16px;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  quiz-modal[open] .quiz-modal__container {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  quiz-modal[open] .quiz-modal__overlay {
    opacity: 1;
  }

  .quiz-modal__close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    border: none;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    transition: background 0.2s ease;
  }

  .quiz-modal__close:hover {
    background: rgba(0, 0, 0, 0.1);
  }

  .quiz-modal__content {
    padding: 40px 32px 32px;
    overflow-y: auto;
    flex: 1;
  }

  .quiz-modal__header {
    text-align: center;
    margin-bottom: 32px;
  }

  .quiz-modal__title {
    font-size: 24px;
    font-weight: 600;
    margin: 0 0 8px;
    color: #1a1a1a;
  }

  .quiz-modal__subtitle {
    font-size: 14px;
    color: #666;
    margin: 0;
  }

  .quiz-step__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
  }

  .quiz-step__number {
    font-size: 14px;
    font-weight: 600;
    color: #666;
  }

  .quiz-step__progress {
    display: flex;
    gap: 8px;
  }

  .quiz-step__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #e0e0e0;
    transition: background 0.3s ease;
  }

  .quiz-step__dot.active {
    background: #1a1a1a;
  }

  .quiz-step__question {
    text-align: center;
    margin-bottom: 32px;
  }

  .quiz-step__emoji {
    font-size: 48px;
    margin: 0 0 16px;
    line-height: 1;
  }

  .quiz-step__question-text {
    font-size: 20px;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0;
    line-height: 1.4;
  }

  .quiz-step__answers {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .quiz-step__answer {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    background: white;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
    width: 100%;
    font-size: 16px;
  }

  .quiz-step__answer:hover:not(:disabled) {
    border-color: #1a1a1a;
    background: #f9f9f9;
  }

  .quiz-step__answer:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }

  .quiz-step__answer.selected {
    border-color: #1a1a1a;
    background: #f5f5f5;
  }

  .quiz-step__answer.correct {
    border-color: #10b981;
    background: #d1fae5;
  }

  .quiz-step__answer.incorrect {
    border-color: #ef4444;
    background: #fee2e2;
  }

  .quiz-step__answer-number {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    flex-shrink: 0;
    transition: background 0.2s ease;
  }

  .quiz-step__answer.selected .quiz-step__answer-number,
  .quiz-step__answer.correct .quiz-step__answer-number {
    background: #1a1a1a;
    color: white;
  }

  .quiz-step__answer.incorrect .quiz-step__answer-number {
    background: #ef4444;
    color: white;
  }

  .quiz-step__answer-text {
    flex: 1;
    color: #1a1a1a;
  }

  .quiz-step--success {
    text-align: center;
  }

  .quiz-step__success-content {
    padding: 40px 20px;
  }

  .quiz-step__success-icon {
    font-size: 64px;
    margin-bottom: 24px;
    display: block;
  }

  .quiz-step__success-title {
    font-size: 24px;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0 0 16px;
  }

  .quiz-step__success-message {
    font-size: 16px;
    color: #666;
    margin: 0 0 24px;
  }

  .quiz-step__discount-code {
    display: flex;
    gap: 12px;
    max-width: 400px;
    margin: 0 auto 24px;
    align-items: center;
  }

  .quiz-step__code-input {
    flex: 1;
    padding: 12px 16px;
    border: 2px solid #1a1a1a;
    border-radius: 8px;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    letter-spacing: 2px;
    background: #f9f9f9;
  }

  .quiz-step__copy-btn {
    padding: 12px 20px;
    border: 2px solid #1a1a1a;
    border-radius: 8px;
    background: #1a1a1a;
    color: white;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
  }

  .quiz-step__copy-btn:hover {
    background: #333;
  }

  .quiz-step__copy-btn.copied {
    background: #10b981;
    border-color: #10b981;
  }

  .quiz-step__close-btn {
    padding: 12px 32px;
    border: 2px solid #1a1a1a;
    border-radius: 8px;
    background: white;
    color: #1a1a1a;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .quiz-step__close-btn:hover {
    background: #1a1a1a;
    color: white;
  }

  /* Error Step Styles */
  .quiz-step--error {
    text-align: center;
  }

  .quiz-step__error-content {
    padding: 40px 20px;
  }

  .quiz-step__error-icon {
    font-size: 64px;
    margin-bottom: 24px;
    display: block;
  }

  .quiz-step__error-title {
    font-size: 24px;
    font-weight: 600;
    color: #ef4444;
    margin: 0 0 16px;
  }

  .quiz-step__error-message {
    font-size: 16px;
    color: #666;
    margin: 0 0 24px;
  }

  .quiz-step__restart-btn {
    padding: 12px 32px;
    border: 2px solid #1a1a1a;
    border-radius: 8px;
    background: #1a1a1a;
    color: white;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .quiz-step__restart-btn:hover {
    background: #333;
  }

  /* Sticky Tab */
  .quiz-sticky-tab {
    position: fixed;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9997;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
  }

  .quiz-sticky-tab.visible {
    opacity: 1;
    pointer-events: auto;
  }

  .quiz-sticky-tab__button {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    padding: 20px 12px;
    background: #1a1a1a;
    color: white;
    border: none;
    border-radius: 0 12px 12px 0;
    cursor: pointer;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 2px;
    transition: all 0.3s ease;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
  }

  .quiz-sticky-tab__button:hover {
    background: #333;
    transform: translateX(4px);
  }

  .quiz-sticky-tab__text {
    display: block;
  }

  /* Responsive */
  @media (max-width: 768px) {
    .quiz-modal__container {
      width: 95%;
      max-height: 95vh;
    }

    .quiz-modal__content {
      padding: 32px 20px 24px;
    }

    .quiz-modal__title {
      font-size: 20px;
    }

    .quiz-step__question-text {
      font-size: 18px;
    }

    .quiz-step__answer {
      padding: 14px 16px;
      font-size: 15px;
    }

    .quiz-step__discount-code {
      flex-direction: column;
    }

    .quiz-step__code-input {
      width: 100%;
    }

    .quiz-step__copy-btn {
      width: 100%;
      justify-content: center;
    }
  }
</style>

<script>
  (function () {
    class QuizModal extends HTMLElement {
      constructor() {
        super();
        this.sectionId = this.dataset.sectionId;
        this.discountCode = this.dataset.discountCode || '';
        this.autoShow = this.dataset.autoShow === 'true';
        this.currentStep = 1;
        this.answers = {};
        this.totalQuestions = parseInt(this.dataset.totalQuestions) || 0;
        this.isFinished = false;
        this.init();
      }

      init() {
        const finishedKey = `quiz_finished_${this.sectionId}`;
        const finishedDate = localStorage.getItem(finishedKey);

        if (finishedDate) {
          const daysPassed = (Date.now() - parseInt(finishedDate)) / (1000 * 60 * 60 * 24);
          if (daysPassed < 7) {
            this.autoShow = false;
            this.isFinished = true;
            this.showStickyTab();
            return;
          } else {
            localStorage.removeItem(finishedKey);
          }
        }

        const storageKey = `quiz_closed_${this.sectionId}`;
        const closedDate = localStorage.getItem(storageKey);

        if (closedDate) {
          const daysPassed = (Date.now() - parseInt(closedDate)) / (1000 * 60 * 60 * 24);
          if (daysPassed < 7) {
            this.autoShow = false;
          } else {
            localStorage.removeItem(storageKey);
          }
        }

        this.shuffleAnswers();

        this.querySelectorAll('[data-quiz-close]').forEach((btn) => {
          btn.addEventListener('click', () => this.close());
        });

        this.querySelectorAll('.quiz-step__answer').forEach((answer) => {
          answer.addEventListener('click', (e) => this.handleAnswer(e));
        });

        this.querySelector('[data-copy-code]')?.addEventListener('click', () => this.copyCode());

        this.querySelector('[data-quiz-restart]')?.addEventListener('click', () => {
          this.resetQuiz();
        });

        this.querySelector('.quiz-modal__overlay')?.addEventListener('click', (e) => {
          if (e.target.classList.contains('quiz-modal__overlay')) {
            this.close();
          }
        });

        window.addEventListener('quiz-reset', () => {
          this.resetAllData();
        });
      }

      open(showDiscountOnly = false) {
        this.setAttribute('open', '');
        document.body.style.overflow = 'hidden';
        this.hideStickyTab();

        const finishedKey = `quiz_finished_${this.sectionId}`;
        const finishedDate = localStorage.getItem(finishedKey);
        let shouldShowSuccess = false;

        if (finishedDate) {
          const daysPassed = (Date.now() - parseInt(finishedDate)) / (1000 * 60 * 60 * 24);
          if (daysPassed < 7) {
            shouldShowSuccess = true;
            this.isFinished = true;
          } else {
            localStorage.removeItem(finishedKey);
            this.isFinished = false;
          }
        }

        if (showDiscountOnly || shouldShowSuccess || this.isFinished) {
          this.showSuccess();
        } else {
          this.resetQuiz();
        }
      }

      close() {
        this.removeAttribute('open');
        document.body.style.overflow = '';
        this.showStickyTab();
      }

      handleAnswer(e) {
        const answerBtn = e.currentTarget;
        const step = answerBtn.closest('.quiz-step');
        const stepNumber = parseInt(step.dataset.step);
        const answerIndex = parseInt(answerBtn.dataset.answer);
        const isCorrect = answerBtn.dataset.correct === 'true';

        step.querySelectorAll('.quiz-step__answer').forEach((btn) => {
          btn.disabled = true;
          btn.style.pointerEvents = 'none';
        });

        step.querySelectorAll('.quiz-step__answer').forEach((btn) => {
          btn.classList.remove('selected', 'correct', 'incorrect');
        });

        answerBtn.classList.add('selected');
        if (isCorrect) {
          answerBtn.classList.add('correct');
        } else {
          answerBtn.classList.add('incorrect');
          step.querySelectorAll('.quiz-step__answer').forEach((btn) => {
            if (btn.dataset.correct === 'true') {
              btn.classList.add('correct');
            }
          });
        }

        this.answers[stepNumber] = isCorrect;

        if (isCorrect) {
          setTimeout(() => {
            if (stepNumber === this.totalQuestions) {
              const allCorrect = Object.values(this.answers).every((ans) => ans === true);
              if (allCorrect) {
                this.showSuccess();
              }
            } else {
              this.showStep(stepNumber + 1);
            }
          }, 1000);
        } else {
          setTimeout(() => {
            this.showError();
          }, 1000);
        }
      }

      showStep(stepNumber) {
        this.querySelectorAll('.quiz-step[data-step]').forEach((step) => {
          step.style.display = 'none';
          step.querySelectorAll('.quiz-step__answer').forEach((btn) => {
            btn.disabled = false;
            btn.style.pointerEvents = '';
          });
        });

        const nextStep = this.querySelector(`.quiz-step[data-step="${stepNumber}"]`);
        if (nextStep) {
          nextStep.style.display = 'block';
          this.currentStep = stepNumber;
          nextStep.querySelectorAll('.quiz-step__answer').forEach((btn) => {
            btn.disabled = false;
            btn.style.pointerEvents = '';
          });
        }
      }

      showError() {
        const header = this.querySelector('.quiz-modal__header');
        if (header) {
          header.style.display = 'none';
        }

        this.querySelectorAll('.quiz-step[data-step]').forEach((step) => {
          step.style.display = 'none';
        });

        const errorStep = this.querySelector('.quiz-step--error');
        if (errorStep) {
          errorStep.style.display = 'block';
        }
      }

      showSuccess() {
        const header = this.querySelector('.quiz-modal__header');
        if (header) {
          header.style.display = 'none';
        }

        this.querySelectorAll('.quiz-step[data-step]').forEach((step) => {
          step.style.display = 'none';
        });

        const errorStep = this.querySelector('.quiz-step--error');
        if (errorStep) {
          errorStep.style.display = 'none';
        }

        const successStep = this.querySelector('.quiz-step--success');
        if (successStep) {
          successStep.style.display = 'block';

          const allCloseButtons = this.querySelectorAll('[data-quiz-close]');
          allCloseButtons.forEach((btn) => {
            const newBtn = btn.cloneNode(true);
            btn.parentNode.replaceChild(newBtn, btn);
            newBtn.addEventListener('click', () => {
              this.close();
            });
          });

          const copyBtn = successStep.querySelector('[data-copy-code]');
          if (copyBtn) {
            const newCopyBtn = copyBtn.cloneNode(true);
            copyBtn.parentNode.replaceChild(newCopyBtn, copyBtn);
            newCopyBtn.addEventListener('click', () => {
              this.copyCode();
            });
          }
        }

        const finishedKey = `quiz_finished_${this.sectionId}`;
        localStorage.setItem(finishedKey, Date.now().toString());
        this.isFinished = true;
      }

      shuffleAnswers() {
        this.querySelectorAll('.quiz-step[data-step]').forEach((step) => {
          const answersContainer = step.querySelector('.quiz-step__answers');
          if (!answersContainer) return;

          const answers = Array.from(answersContainer.children);

          for (let i = answers.length - 1; i > 0; i--) {
            const j = Math.floor(Math.random() * (i + 1));
            [answers[i], answers[j]] = [answers[j], answers[i]];
          }

          answersContainer.innerHTML = '';
          answers.forEach((btn) => {
            answersContainer.appendChild(btn);
          });

          answers.forEach((btn, index) => {
            const numberSpan = btn.querySelector('.quiz-step__answer-number');
            if (numberSpan) {
              numberSpan.textContent = index + 1;
            }
            btn.dataset.answer = (index + 1).toString();
          });
        });
      }

      resetQuiz() {
        this.currentStep = 1;
        this.answers = {};

        const header = this.querySelector('.quiz-modal__header');
        if (header) {
          header.style.display = '';
        }

        const successStep = this.querySelector('.quiz-step--success');
        if (successStep) {
          successStep.style.display = 'none';
        }
        const errorStep = this.querySelector('.quiz-step--error');
        if (errorStep) {
          errorStep.style.display = 'none';
        }

        this.querySelectorAll('.quiz-step[data-step]').forEach((step, index) => {
          step.style.display = index === 0 ? 'block' : 'none';
          step.querySelectorAll('.quiz-step__answer').forEach((btn) => {
            btn.classList.remove('selected', 'correct', 'incorrect');
            btn.disabled = false;
            btn.style.pointerEvents = '';
          });
        });

        this.shuffleAnswers();
      }

      resetAllData() {
        const finishedKey = `quiz_finished_${this.sectionId}`;
        const closedKey = `quiz_closed_${this.sectionId}`;
        localStorage.removeItem(finishedKey);
        localStorage.removeItem(closedKey);
        this.isFinished = false;
        this.resetQuiz();
      }

      copyCode() {
        const input = this.querySelector(`#discount-code-${this.sectionId}`);
        const copyBtn = this.querySelector('[data-copy-code]');

        if (input && copyBtn) {
          input.select();
          input.setSelectionRange(0, 99999);
          document.execCommand('copy');

          copyBtn.classList.add('copied');
          copyBtn.innerHTML =
            '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg> Kopyalandı!';

          setTimeout(() => {
            copyBtn.classList.remove('copied');
            copyBtn.innerHTML =
              '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg> Kopyala';
          }, 2000);
        }
      }

      showStickyTab() {
        const stickyTab = document.getElementById(`quiz-sticky-${this.sectionId}`);
        if (stickyTab) {
          stickyTab.classList.add('visible');
        }
      }

      hideStickyTab() {
        const stickyTab = document.getElementById(`quiz-sticky-${this.sectionId}`);
        if (stickyTab) {
          stickyTab.classList.remove('visible');
        }
      }
    }

    class QuizStickyTab extends HTMLElement {
      constructor() {
        super();
        this.sectionId = this.dataset.sectionId;
        this.init();
      }

      init() {
        const quizModal = document.getElementById(`quiz-modal-${this.sectionId}`);
        if (!quizModal) return;

        // Always show sticky tab
        this.classList.add('visible');

        // Check if quiz is finished
        const finishedKey = `quiz_finished_${this.sectionId}`;
        const finishedDate = localStorage.getItem(finishedKey);
        let isFinished = false;

        if (finishedDate) {
          const daysPassed = (Date.now() - parseInt(finishedDate)) / (1000 * 60 * 60 * 24);
          if (daysPassed < 7) {
            isFinished = true;
          } else {
            localStorage.removeItem(finishedKey);
          }
        }

        this.querySelector('[data-quiz-open]')?.addEventListener('click', () => {
          if (isFinished) {
            // If finished, show only discount code popup
            quizModal.open(true);
          } else {
            // Otherwise, show full quiz
            quizModal.open();
          }
        });
      }
    }

    if (!window.customElements.get('quiz-modal')) {
      window.customElements.define('quiz-modal', QuizModal);
    }
    if (!window.customElements.get('quiz-sticky-tab')) {
      window.customElements.define('quiz-sticky-tab', QuizStickyTab);
    }

    window.resetQuizData = function () {
      const quizModals = document.querySelectorAll('quiz-modal');
      if (quizModals.length === 0) {
        return;
      }
      quizModals.forEach((modal) => {
        const instance = modal;
        if (instance && typeof instance.resetAllData === 'function') {
          instance.resetAllData();
        } else {
          const sectionId = modal.dataset.sectionId;
          if (sectionId) {
            localStorage.removeItem(`quiz_finished_${sectionId}`);
            localStorage.removeItem(`quiz_closed_${sectionId}`);
          }
        }
      });
    };

    window.addEventListener('quiz-reset', () => {
      window.resetQuizData();
    });
  })();
</script>

{% schema %}
{
  "name": "Quiz Modal",
  "settings": [
    {
      "type": "text",
      "id": "title",
      "label": "Başlık",
      "default": "3 soruyu doğru cevapla %15 indirim kazan ✨"
    },
    {
      "type": "text",
      "id": "subtitle",
      "label": "Alt Başlık",
      "default": "Bilginizi test edin ve özel indirim kazanın!"
    },
    {
      "type": "text",
      "id": "discount_code",
      "label": "İndirim Kodu",
      "default": "QUIZ15",
      "info": "Tüm sorular doğru cevaplandığında gösterilecek kod"
    },
    {
      "type": "text",
      "id": "success_title",
      "label": "Başarı Başlığı",
      "default": "Tebrikler! Tüm soruları doğru cevapladınız!"
    },
    {
      "type": "text",
      "id": "success_message",
      "label": "Başarı Mesajı",
      "default": "Özel indirim kodunuz:"
    },
    {
      "type": "checkbox",
      "id": "auto_show",
      "label": "Otomatik Göster",
      "default": true,
      "info": "Sayfa yüklendiğinde otomatik olarak göster"
    }
  ],
  "blocks": [
    {
      "type": "question",
      "name": "Soru",
      "settings": [
        {
          "type": "text",
          "id": "emoji",
          "label": "Emoji",
          "default": "✨"
        },
        {
          "type": "textarea",
          "id": "question",
          "label": "Soru",
        },
        {
          "type": "textarea",
          "id": "answers",
          "label": "Cevaplar",
          "info": "Her satıra bir cevap yazın veya | ile ayırın",
        },
        {
          "type": "range",
          "id": "correct_answer",
          "label": "Doğru Cevap",
          "min": 1,
          "max": 4,
          "step": 1,
          "default": 3
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Quiz Modal",
      "blocks": [
        {
          "type": "question",
          "settings": {
            "emoji": "🌿",
            "question": "Soru 1",
            "answers": "Cevap 1|Cevap 2|Cevap 3|Cevap 4",
            "correct_answer": 3
          }
        },
        {
          "type": "question",
          "settings": {
            "emoji": "☀️",
            "question": "Soru 2",
            "answers": "Cevap 1|Cevap 2|Cevap 3|Cevap 4",
            "correct_answer": 3
          }
        },
        {
          "type": "question",
          "settings": {
            "emoji": "✨",
            "question": "Soru 3",
            "answers": "Cevap 1|Cevap 2|Cevap 3|Cevap 4",
            "correct_answer": 4
          }
        }
      ]
    }
  ]
}
{% endschema %}