Shopify Quiz Soru Cevap Eklentisi

Shopify mağazanızda ziyaretçilerinizin birkaç soruluk quiz çözdüğü, akabinde tüm sorulara doğru cevap verdiler ise indirim kodu kazandıkları yönetilebilir bir kurguya mı ihtiyacınız var? Sizler için geliştirdik. Kodu sayfanın en altında görebilirsiniz.

Quiz Modal Nedir ve Nasıl Çalışır?

Quiz Modal, Shopify mağazanızda müşterilerinizle etkileşim kurmanızı ve onlara özel indirim kodları sunmanızı sağlayan, tamamen yönetilebilir bir interaktif quiz sistemidir. Bu sistem sayesinde ziyaretçileriniz eğlenceli bir quiz deneyimi yaşarken, siz de müşteri ilgisini artırabilir ve satışlarınızı yükseltebilirsiniz.

Temel Özellikler

Yönetilebilir Quiz Sistemi

• Admin Panelden Kolay Yönetim: Shopify admin panelinden soruları, cevapları ve doğru cevapları kolayca ekleyip düzenleyebilirsiniz.
• Sınırsız Soru Ekleme: İstediğiniz kadar soru ekleyebilir, her soru için 4 farklı cevap seçeneği oluşturabilirsiniz.
• Özelleştirilebilir İçerik: Başlık, alt başlık, başarı mesajları ve indirim kodunu admin panelden özelleştirebilirsiniz.

İndirim Kodu Sistemi

• Başarı Ödülü: Ziyaretçiler tüm sorulara doğru cevap verdiğinde özel indirim kodunuzu kazanırlar.
• Tek Tıkla Kopyalama: Kazanılan indirim kodu tek tıkla kopyalanabilir, kullanıcı deneyimi maksimum seviyededir.
• 7 Günlük Erişim: Başarılı quiz tamamlandıktan sonra 7 gün boyunca indirim kodu ekranına erişilebilir.

Kullanıcı Deneyimi Özellikleri

• Otomatik Açılım: Sayfa yüklendiğinde 5 saniye sonra otomatik olarak quiz modal açılır (isteğe bağlı).
• Sticky Tab: Sayfanın sol tarafında sabit bir "QUIZ" sekmesi bulunur, ziyaretçiler istedikleri zaman quiz'e erişebilir.
• Progress Göstergesi: Her soruda ilerleme göstergesi ile kullanıcı hangi aşamada olduğunu görebilir.
• Shuffle Özelliği: Her quiz başlangıcında cevaplar otomatik olarak karıştırılır, böylece her deneyim farklıdır.
• Hata Yönetimi: Yanlış cevap verildiğinde kullanıcıya bilgilendirme yapılır ve teste tekrar başlama imkanı sunulur.

Responsive Tasarım

• Mobil Uyumlu: Tüm cihazlarda mükemmel görünüm ve kullanım deneyimi.
• Modern Arayüz: Temiz, modern ve kullanıcı dostu tasarım.
• Smooth Animasyonlar: Geçişler ve animasyonlar ile profesyonel bir görünüm.

Nasıl Kurulur?

1. Section Ekleme: Shopify admin panelinde "Online Store > Themes > Customize" bölümüne gidin.
2. Quiz Modal Section: "Add section" butonuna tıklayın ve "Quiz Modal" section'ını ekleyin.
3. Ayarları Yapılandırın:
   • Başlık ve alt başlığı girin
   • İndirim kodunuzu belirleyin
   • Başarı mesajlarını özelleştirin
   • Otomatik açılım ayarını yapın
4. Soruları Ekleyin: "Add block" butonu ile sorularınızı ekleyin:
   • Her soru için emoji seçin
   • Soru metnini yazın
   • Cevapları "|" işareti ile ayırarak girin
   • Doğru cevabı seçin (1-4 arası)
5. Kaydedin: Tüm ayarları kaydedin ve quiz'iniz hazır!

Kullanım Senaryoları

E-ticaret Mağazaları

• Ürün bilgisi testi ile müşteri eğitimi
• Marka bilinirliği artırma
• E-posta listesi oluşturma
• Satış artırma kampanyaları

Kişisel Bakım ve Kozmetik

• Cilt bakımı bilgi testi
• Ürün kullanım rehberi
• Müşteri segmentasyonu
• Özel indirim kampanyaları

Eğitim ve Danışmanlık

• Bilgi yarışması
• Müşteri ilgisini ölçme
• Lead generation
• Marka etkileşimi artırma

Teknik Özellikler

• Web Components: Modern web standartlarına uygun custom elements kullanımı
• LocalStorage: Kullanıcı durumunu tarayıcıda saklama
• Liquid Template: Shopify Liquid template sistemi ile entegrasyon
• Vanilla JavaScript: Framework bağımlılığı olmadan hafif ve hızlı çalışma
• CSS Animations: Smooth geçişler ve animasyonlar

Avantajlar

✅ Dönüşüm Oranını Artırır: Etkileşimli içerik müşteri ilgisini çeker ve satışları artırır. ✅ Müşteri Eğitimi: Quiz formatı ile müşterilerinizi ürünleriniz hakkında bilgilendirebilirsiniz. ✅ E-posta Toplama: Quiz sonuçlarına göre müşteri segmentasyonu yapabilirsiniz. ✅ Marka Etkileşimi: Eğlenceli bir deneyim sunarak marka bağlılığını artırırsınız. ✅ SEO Dostu: Etkileşimli içerik sayfa süresini artırır ve SEO skorunuza katkı sağlar. ✅ Kolay Yönetim: Admin panelden kolayca yönetilebilir, teknik bilgi gerektirmez.

Sonuç

Shopify Quiz Modal sistemi, mağazanızda müşterilerinizle etkileşim kurmanın ve onlara değerli indirim kodları sunmanın en eğlenceli ve etkili yollarından biridir. Yönetilebilir yapısı, modern tasarımı ve kullanıcı dostu arayüzü ile hem sizin hem de müşterilerinizin memnun kalacağı bir çözümdür.

Quiz Modal ile müşterilerinizin ilgisini çekin, marka bilinirliğinizi artırın ve satışlarınızı yükseltin!

‍

{%- 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 %}