Shopify-Quiz-Plugin für Fragen und Antworten

Shopify Quiz Modal: Verdienen Sie Ihren Besuchern einen Rabattcode

Benötigen Sie eine überschaubare Bearbeitung in Ihrem Shopify-Shop, bei der Ihre Besucher ein paar Fragen lösen und dann einen Rabattcode erhalten, wenn sie alle Fragen richtig beantworten? Wir haben es für dich entwickelt. Sie können den Code unten auf der Seite sehen.

Was ist Quiz Modal und wie funktioniert es?

Quiz Modal ist ein vollständig überschaubares interaktives Quizsystem, mit dem Sie mit Ihren Kunden in Ihrem Shopify-Shop interagieren und ihnen exklusive Rabattcodes anbieten können. Dank dieses Systems können Ihre Besucher ein unterhaltsames Quizerlebnis haben, während Sie die Kundenbindung steigern und Ihren Umsatz steigern können.

Die wichtigsten Funktionen

Überschaubares Quizsystem

  • Einfache Verwaltung über das Admin-Panel: Im Shopify-Adminbereich kannst du ganz einfach Fragen, Antworten und korrekte Antworten hinzufügen und bearbeiten.
  • Unbegrenzt viele Fragen hinzufügen: Sie können beliebig viele Fragen hinzufügen und für jede Frage 4 verschiedene Antwortoptionen erstellen.
  • Individuell anpassbarer Inhalt: Sie können den Titel, den Untertitel, die Erfolgsmeldungen und den Rabattcode im Admin-Panel anpassen.

Rabattcode-System

  • Leistungspreis: Besucher erhalten deinen speziellen Rabattcode, wenn sie alle Fragen richtig beantworten.
  • Kopieren mit einem Klick: Der verdiente Rabattcode kann mit einem Klick kopiert werden, die Benutzererfahrung ist maximal.
  • 7-Tages-Zugang: Nach Abschluss des erfolgreichen Quiz kann 7 Tage lang auf den Rabattcode-Bildschirm zugegriffen werden.

Funktionen für die Benutzererfahrung

  • Automatisches Öffnen: Das Quiz-Modal öffnet sich automatisch nach 5 Sekunden, wenn die Seite geladen wird (optional).
  • Klebrige Tabs: Auf der linken Seite der Seite befindet sich ein fester Reiter „QUIZ“, Besucher können jederzeit auf das Quiz zugreifen.
  • Fortschrittsanzeige: Mit der Fortschrittsanzeige bei jeder Frage kann der Benutzer sehen, in welcher Phase er sich befindet.
  • Shuffle-Funktion: Zu Beginn jedes Quizzes werden die Antworten automatisch gemischt, sodass jedes Erlebnis anders ist.
  • Verwaltung von Bugs: Wenn die falsche Antwort gegeben wird, wird der Benutzer informiert und hat die Möglichkeit, den Test erneut zu starten.

Responsives Design

  • Kompatibel mit Mobilgeräten: Hervorragendes Aussehen und Nutzungserlebnis auf allen Geräten.
  • Moderne Oberfläche: Sauberes, modernes und benutzerfreundliches Design.
  • Reibungslose Animationen: Professioneller Look mit Übergängen und Animationen.

Wie installiert man

  1. Abschnitte hinzufügen: Navigiere im Shopify-Adminbereich zu „Online-Shop > Themes > Anpassen“.
  2. Quiz zum Modalbereich: Klicken Sie auf die Schaltfläche „Abschnitt hinzufügen“ und fügen Sie den Abschnitt „Quiz-Modal“ hinzu.
  3. Einstellungen konfigurieren:
    • Titel und Untertitel eingeben
    • Ermitteln Sie Ihren Rabattcode
    • Erfolgsmeldungen anpassen
    • Passen Sie die Einstellung für automatisches Öffnen an
  4. Fragen hinzufügenFüge deine Fragen mit der Schaltfläche „Block hinzufügen“ hinzu:
    • Wähle Emoji für jede Frage
    • Schreiben Sie den Text der Frage
    • Geben Sie die Antworten ein, indem Sie sie mit dem Zeichen „|“ trennen
    • Wähle die richtige Antwort (1-4)
  5. Speichern: Speichere alle Einstellungen und dein Quiz ist fertig!

Nutzungsszenarien

E-Commerce-Geschäfte

  • Kundenschulung mit Produktwissentests
  • Steigerung der Markenbekanntheit
  • Erstellen Sie eine E-Mail-Liste
  • Verkaufsförderungskampagnen

Körperpflege und Kosmetik

  • Wissenstest zur Hautpflege
  • Anleitung zur Produktbenutzung
  • Kundensegmentierung
  • Besondere Rabattaktionen

Schulung und Beratung

  • Quizze
  • Messung des Kundeninteresses
  • Generierung von Leads
  • Steigern Sie das Markenengagement

Technische Spezifikationen

  • Web-Komponenten: Verwendung von benutzerdefinierten Elementen gemäß modernen Webstandards
  • Lokaler Speicher: Speichern des Benutzerstatus im Browser
  • Flüssige Vorlage: Integration mit dem Shopify Liquid-Vorlagensystem
  • Vanille-JavaScript: Leichter und schneller Betrieb ohne Framework-Abhängigkeit
  • CSS-Animationen: Reibungslose Übergänge und Animationen

Vorteile

✅ Erhöht die Konversionsrate: Interaktive Inhalte wecken das Interesse der Kunden und steigern den Umsatz. ✅ Schulung für Kunden: Mit dem Quizformat können Sie Ihre Kunden über Ihre Produkte informieren. ✅ Erfassung von E-Mails: Sie können Kunden anhand der Quizergebnisse segmentieren. ✅ Interaktion mit der Marke: Sie erhöhen die Markentreue, indem Sie ein unterhaltsames Erlebnis bieten. ✅ SEO-freundlich: Interaktive Inhalte erhöhen die Seitendauer und tragen zu Ihrem SEO-Score bei. ✅ Einfache Verwaltung: Einfache Verwaltung über das Admin-Panel, erfordert keine technischen Kenntnisse.

Folge

Das Shopify Quiz Modal-System ist eine der unterhaltsamsten und effektivsten Möglichkeiten, mit Ihren Kunden in Ihrem Geschäft zu interagieren und ihnen wertvolle Rabattcodes anzubieten. Mit seiner überschaubaren Struktur, dem modernen Design und der benutzerfreundlichen Oberfläche ist es eine Lösung, mit der sowohl Sie als auch Ihre Kunden zufrieden sein werden.

Binden Sie Ihre Kunden ein, steigern Sie Ihre Markenbekanntheit und steigern Sie Ihren Umsatz mit 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 %}

İlgili Yazılar

Stratejik tasarım ve dijital deneyimlerle markaların büyümesine yardımcı oluyoruz.
2025
Shopify Turkiye
2025
Was ist Shopify Plus? Warum wird es für große Marken bevorzugt?

Shopify
Einrichtung des Shops

Nehmen Sie Kontakt auf.