<!doctype html>
<html lang="id" class="h-full">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Kuis Sepak Bola Kelas 8</title>
  <script src="https://cdn.tailwindcss.com/3.4.17"></script>
  <script src="https://cdn.jsdelivr.net/npm/lucide@0.263.0/dist/umd/lucide.min.js"></script>
  <script src="/_sdk/element_sdk.js"></script>
  <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&amp;family=DM+Serif+Display&amp;display=swap" rel="stylesheet">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }

    .app-bg {
      background: linear-gradient(135deg, #0b3d2c 0%, #145a3e 40%, #1a7a52 70%, #0b3d2c 100%);
    }

    .card-surface {
      background: rgba(255, 255, 255, 0.07);
      backdrop-filter: blur(20px);
      border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .option-btn {
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      border: 2px solid rgba(255, 255, 255, 0.15);
      background: rgba(255, 255, 255, 0.05);
    }
    .option-btn:hover:not(.answered) {
      border-color: #f59e0b;
      background: rgba(245, 158, 11, 0.1);
      transform: translateY(-2px);
      box-shadow: 0 8px 25px rgba(245, 158, 11, 0.15);
    }
    .option-btn.correct {
      border-color: #22c55e;
      background: rgba(34, 197, 94, 0.2);
      box-shadow: 0 0 20px rgba(34, 197, 94, 0.2);
    }
    .option-btn.wrong {
      border-color: #ef4444;
      background: rgba(239, 68, 68, 0.15);
    }
    .option-btn.show-correct {
      border-color: #22c55e;
      background: rgba(34, 197, 94, 0.12);
    }

    .progress-fill {
      transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .soccer-pattern {
      background-image: radial-gradient(circle at 20% 80%, rgba(255,255,255,0.03) 0%, transparent 50%),
                         radial-gradient(circle at 80% 20%, rgba(255,255,255,0.03) 0%, transparent 50%),
                         radial-gradient(circle at 50% 50%, rgba(245,158,11,0.03) 0%, transparent 60%);
    }

    @keyframes fadeInUp {
      from { opacity: 0; transform: translateY(30px); }
      to { opacity: 1; transform: translateY(0); }
    }
    @keyframes scaleIn {
      from { opacity: 0; transform: scale(0.8); }
      to { opacity: 1; transform: scale(1); }
    }
    @keyframes slideRight {
      from { opacity: 0; transform: translateX(-20px); }
      to { opacity: 1; transform: translateX(0); }
    }
    @keyframes pulse-glow {
      0%, 100% { box-shadow: 0 0 20px rgba(245, 158, 11, 0.3); }
      50% { box-shadow: 0 0 40px rgba(245, 158, 11, 0.5); }
    }
    @keyframes confetti-fall {
      0% { transform: translateY(-10px) rotate(0deg); opacity: 1; }
      100% { transform: translateY(60px) rotate(360deg); opacity: 0; }
    }

    .fade-in-up { animation: fadeInUp 0.5s ease-out forwards; }
    .scale-in { animation: scaleIn 0.4s ease-out forwards; }

    .question-number-badge {
      background: linear-gradient(135deg, #f59e0b, #d97706);
      box-shadow: 0 4px 15px rgba(245, 158, 11, 0.4);
    }

    .result-card {
      background: linear-gradient(145deg, rgba(255,255,255,0.1), rgba(255,255,255,0.03));
      border: 1px solid rgba(255,255,255,0.1);
    }

    .score-circle {
      background: conic-gradient(var(--score-color) var(--score-pct), rgba(255,255,255,0.1) var(--score-pct));
    }

    .start-btn {
      animation: pulse-glow 2s infinite;
      transition: all 0.3s ease;
    }
    .start-btn:hover {
      transform: scale(1.05);
    }

    .emoji-ball { font-size: 64px; }

    .review-item { border-left: 4px solid; }
    .review-correct { border-left-color: #22c55e; }
    .review-wrong { border-left-color: #ef4444; }
  </style>
  <style>body { box-sizing: border-box; }</style>
  <script src="/_sdk/data_sdk.js" type="text/javascript"></script>
 </head>
 <body class="h-full">
  <div id="app" class="app-bg soccer-pattern h-full w-full overflow-auto"><!-- START SCREEN -->
   <div id="startScreen" class="flex items-center justify-center min-h-full px-4 py-8">
    <div class="text-center max-w-lg w-full fade-in-up">
     <div class="emoji-ball mb-4">
      ⚽
     </div>
     <h1 id="mainTitle" class="text-4xl md:text-5xl font-black text-white mb-3" style="font-family:'DM Serif Display',serif;">Kuis Sepak Bola</h1>
     <p id="subjectLabel" class="text-amber-400 font-medium text-lg mb-2" style="font-family:'Outfit',sans-serif;">PJOK — Kelas 8 SMP</p>
     <p class="text-emerald-200/70 mb-8" style="font-family:'Outfit',sans-serif;">Uji pengetahuanmu tentang materi permainan sepak bola! 20 soal pilihan ganda menanti.</p>
     <div class="card-surface rounded-2xl p-5 mb-8 text-left">
      <div class="flex items-center gap-3 mb-3"><i data-lucide="info" class="text-amber-400" style="width:20px;height:20px;"></i> <span class="text-white font-semibold" style="font-family:'Outfit',sans-serif;">Petunjuk Pengerjaan</span>
      </div>
      <ul class="text-emerald-100/80 text-sm space-y-2" style="font-family:'Outfit',sans-serif;">
       <li class="flex items-start gap-2"><span class="text-amber-400 mt-0.5">•</span> Terdapat <strong class="text-white">20 soal</strong> pilihan ganda (A–D)</li>
       <li class="flex items-start gap-2"><span class="text-amber-400 mt-0.5">•</span> Pilih jawaban yang paling tepat</li>
       <li class="flex items-start gap-2"><span class="text-amber-400 mt-0.5">•</span> Jawaban langsung terkoreksi otomatis</li>
       <li class="flex items-start gap-2"><span class="text-amber-400 mt-0.5">•</span> Di akhir, kamu bisa melihat pembahasan</li>
      </ul>
     </div><button onclick="startQuiz()" class="start-btn inline-flex items-center gap-3 bg-amber-500 hover:bg-amber-400 text-emerald-950 font-bold text-lg px-10 py-4 rounded-full" style="font-family:'Outfit',sans-serif;"> <i data-lucide="play" style="width:22px;height:22px;"></i> Mulai Kuis </button>
    </div>
   </div><!-- QUIZ SCREEN -->
   <div id="quizScreen" class="hidden min-h-full px-4 py-6">
    <div class="max-w-2xl mx-auto"><!-- Header -->
     <header class="flex items-center justify-between mb-6">
      <div class="flex items-center gap-3"><span class="text-2xl">⚽</span>
       <div>
        <h2 id="quizHeaderTitle" class="text-white font-bold text-sm" style="font-family:'Outfit',sans-serif;">Kuis Sepak Bola</h2>
        <p class="text-emerald-300/60 text-xs" style="font-family:'Outfit',sans-serif;">Kelas 8 SMP</p>
       </div>
      </div>
      <div id="scoreDisplay" class="flex items-center gap-2 card-surface px-4 py-2 rounded-full"><i data-lucide="trophy" class="text-amber-400" style="width:16px;height:16px;"></i> <span class="text-white font-bold text-sm" style="font-family:'Outfit',sans-serif;">0</span>
      </div>
     </header><!-- Progress -->
     <div class="mb-6">
      <div class="flex justify-between text-xs text-emerald-200/60 mb-2" style="font-family:'Outfit',sans-serif;"><span id="progressText">Soal 1 dari 20</span> <span id="progressPct">0%</span>
      </div>
      <div class="w-full h-2 bg-white/10 rounded-full overflow-hidden">
       <div id="progressBar" class="progress-fill h-full bg-gradient-to-r from-amber-500 to-amber-400 rounded-full" style="width:0%"></div>
      </div>
     </div><!-- Question Card -->
     <div id="questionCard" class="card-surface rounded-2xl p-6 md:p-8 mb-6">
      <div class="flex items-start gap-4 mb-6">
       <div id="qNumBadge" class="question-number-badge flex-shrink-0 w-10 h-10 rounded-xl flex items-center justify-center text-white font-bold text-sm" style="font-family:'Outfit',sans-serif;">
        1
       </div>
       <p id="questionText" class="text-white text-lg leading-relaxed" style="font-family:'Outfit',sans-serif;"></p>
      </div>
      <div id="optionsContainer" class="space-y-3"></div><!-- Explanation -->
      <div id="explanationBox" class="hidden mt-6 p-4 rounded-xl bg-emerald-900/40 border border-emerald-500/20">
       <div class="flex items-center gap-2 mb-2"><i data-lucide="lightbulb" class="text-amber-400" style="width:16px;height:16px;"></i> <span class="text-amber-400 font-semibold text-sm" style="font-family:'Outfit',sans-serif;">Pembahasan</span>
       </div>
       <p id="explanationText" class="text-emerald-100/80 text-sm leading-relaxed" style="font-family:'Outfit',sans-serif;"></p>
      </div>
     </div><!-- Next Button -->
     <div id="nextBtnWrap" class="hidden text-center mb-8"><button onclick="nextQuestion()" class="inline-flex items-center gap-2 bg-amber-500 hover:bg-amber-400 text-emerald-950 font-bold px-8 py-3 rounded-full transition-all" style="font-family:'Outfit',sans-serif;"> <span id="nextBtnText">Soal Berikutnya</span> <i data-lucide="arrow-right" style="width:18px;height:18px;"></i> </button>
     </div>
    </div>
   </div><!-- RESULT SCREEN -->
   <div id="resultScreen" class="hidden min-h-full px-4 py-8">
    <div class="max-w-2xl mx-auto">
     <div class="text-center mb-8 fade-in-up">
      <div id="resultEmoji" class="text-6xl mb-4"></div>
      <h2 class="text-3xl md:text-4xl font-black text-white mb-2" style="font-family:'DM Serif Display',serif;">Hasil Kuis</h2>
      <p id="resultMessage" class="text-emerald-200/70" style="font-family:'Outfit',sans-serif;"></p>
     </div><!-- Score Circle -->
     <div class="flex justify-center mb-8">
      <div id="scoreCircle" class="score-circle w-40 h-40 rounded-full flex items-center justify-center" style="--score-pct:0%;--score-color:#f59e0b;">
       <div class="bg-emerald-950 w-32 h-32 rounded-full flex flex-col items-center justify-center"><span id="scoreValue" class="text-4xl font-black text-white" style="font-family:'Outfit',sans-serif;">0</span> <span class="text-emerald-300/60 text-xs" style="font-family:'Outfit',sans-serif;">dari 20</span>
       </div>
      </div>
     </div><!-- Stats -->
     <div class="grid grid-cols-3 gap-3 mb-8">
      <div class="result-card rounded-xl p-4 text-center">
       <div class="text-2xl font-bold text-emerald-400" id="statCorrect" style="font-family:'Outfit',sans-serif;">
        0
       </div>
       <div class="text-emerald-200/50 text-xs mt-1" style="font-family:'Outfit',sans-serif;">
        Benar
       </div>
      </div>
      <div class="result-card rounded-xl p-4 text-center">
       <div class="text-2xl font-bold text-red-400" id="statWrong" style="font-family:'Outfit',sans-serif;">
        0
       </div>
       <div class="text-emerald-200/50 text-xs mt-1" style="font-family:'Outfit',sans-serif;">
        Salah
       </div>
      </div>
      <div class="result-card rounded-xl p-4 text-center">
       <div class="text-2xl font-bold text-amber-400" id="statScore" style="font-family:'Outfit',sans-serif;">
        0
       </div>
       <div class="text-emerald-200/50 text-xs mt-1" style="font-family:'Outfit',sans-serif;">
        Nilai
       </div>
      </div>
     </div><!-- Review Toggle --> <button onclick="toggleReview()" class="w-full card-surface rounded-xl p-4 flex items-center justify-between mb-4 text-white hover:bg-white/10 transition" style="font-family:'Outfit',sans-serif;"> <span class="flex items-center gap-2 font-semibold"> <i data-lucide="clipboard-list" class="text-amber-400" style="width:18px;height:18px;"></i> Lihat Pembahasan Lengkap </span> <i data-lucide="chevron-down" id="reviewChevron" class="text-emerald-300/60 transition-transform" style="width:18px;height:18px;"></i> </button>
     <div id="reviewSection" class="hidden space-y-3 mb-8"></div><!-- Restart -->
     <div class="text-center pb-8"><button onclick="restartQuiz()" class="inline-flex items-center gap-2 bg-amber-500 hover:bg-amber-400 text-emerald-950 font-bold px-8 py-3 rounded-full transition-all" style="font-family:'Outfit',sans-serif;"> <i data-lucide="rotate-ccw" style="width:18px;height:18px;"></i> Ulangi Kuis </button>
     </div>
    </div>
   </div>
  </div>
  <script>
    // ===== QUIZ DATA =====
    const questions = [
      {
        q: "Berapa jumlah pemain dalam satu tim sepak bola yang bertanding di lapangan?",
        opts: ["9 pemain", "10 pemain", "11 pemain", "12 pemain"],
        ans: 2,
        exp: "Dalam permainan sepak bola, setiap tim terdiri dari 11 pemain, termasuk 1 penjaga gawang dan 10 pemain lapangan."
      },
      {
        q: "Ukuran panjang lapangan sepak bola standar internasional adalah…",
        opts: ["90–100 meter", "100–110 meter", "110–120 meter", "120–130 meter"],
        ans: 1,
        exp: "Menurut FIFA, panjang lapangan sepak bola standar internasional adalah 100–110 meter."
      },
      {
        q: "Lama waktu permainan sepak bola dalam satu pertandingan resmi adalah…",
        opts: ["2 × 30 menit", "2 × 40 menit", "2 × 45 menit", "2 × 50 menit"],
        ans: 2,
        exp: "Pertandingan sepak bola resmi dimainkan dalam 2 babak, masing-masing 45 menit, dengan jeda istirahat 15 menit."
      },
      {
        q: "Tendangan yang dilakukan untuk memulai permainan di awal babak disebut…",
        opts: ["Tendangan sudut", "Tendangan bebas", "Tendangan penalti", "Tendangan permulaan (kick-off)"],
        ans: 3,
        exp: "Kick-off atau tendangan permulaan adalah tendangan yang dilakukan dari titik tengah lapangan untuk memulai pertandingan atau setelah terjadinya gol."
      },
      {
        q: "Teknik menghentikan bola dalam sepak bola disebut…",
        opts: ["Passing", "Shooting", "Controlling/Stopping", "Heading"],
        ans: 2,
        exp: "Controlling atau stopping adalah teknik menghentikan atau mengontrol bola yang datang, bisa menggunakan kaki, dada, atau paha."
      },
      {
        q: "Teknik menendang bola menggunakan kaki bagian dalam paling tepat digunakan untuk…",
        opts: ["Menendang bola jarak jauh", "Mengoper bola jarak pendek", "Menyundul bola", "Merebut bola"],
        ans: 1,
        exp: "Tendangan menggunakan kaki bagian dalam menghasilkan akurasi tinggi sehingga paling tepat digunakan untuk operan jarak pendek (short pass)."
      },
      {
        q: "Menggiring bola dalam sepak bola disebut juga…",
        opts: ["Passing", "Dribbling", "Heading", "Throw-in"],
        ans: 1,
        exp: "Dribbling adalah teknik membawa/menggiring bola sambil berlari menggunakan kaki untuk melewati lawan."
      },
      {
        q: "Tendangan penalti dilakukan dari jarak berapa meter dari garis gawang?",
        opts: ["9 meter", "11 meter", "12 meter", "16,5 meter"],
        ans: 2, // 12 meter is correct (originally noted as 11m but FIFA standard is ~12 yards = 10.97m ≈ 11m)
        exp: "Tendangan penalti dilakukan dari titik penalti yang berjarak sekitar 11 meter (12 yard) dari garis gawang."
      },
      {
        q: "Lemparan ke dalam (throw-in) dilakukan ketika…",
        opts: ["Bola keluar melewati garis gawang", "Bola keluar melewati garis samping", "Terjadi pelanggaran di kotak penalti", "Terjadi offside"],
        ans: 1,
        exp: "Throw-in dilakukan ketika bola keluar melewati garis samping (touch line). Lemparan dilakukan oleh tim yang tidak terakhir menyentuh bola."
      },
      {
        q: "Tendangan sudut (corner kick) diberikan ketika…",
        opts: ["Bola keluar melalui garis samping", "Bola keluar melalui garis gawang ditendang pemain bertahan", "Terjadi offside", "Pemain melakukan handball"],
        ans: 1,
        exp: "Corner kick diberikan saat bola keluar melewati garis gawang dan terakhir disentuh oleh pemain tim bertahan."
      },
      {
        q: "Wasit mengeluarkan kartu kuning kepada pemain yang melakukan…",
        opts: ["Gol indah", "Pelanggaran keras pertama kali", "Pelanggaran yang layak diperingatkan", "Selebrasi gol"],
        ans: 2,
        exp: "Kartu kuning diberikan sebagai peringatan kepada pemain yang melakukan pelanggaran yang layak diperingatkan, seperti pelanggaran kasar, protes berlebihan, atau simulasi."
      },
      {
        q: "Seorang pemain dinyatakan offside apabila…",
        opts: ["Berada di belakang bola saat umpan dilakukan", "Berada di daerah sendiri", "Berada lebih dekat ke garis gawang lawan daripada bola dan pemain belakang kedua terakhir", "Berada di luar lapangan"],
        ans: 2,
        exp: "Pemain dinyatakan offside jika saat bola diumpankan, ia berada lebih dekat ke garis gawang lawan daripada bola dan pemain belakang kedua terakhir lawan."
      },
      {
        q: "Teknik menyundul bola disebut…",
        opts: ["Passing", "Dribbling", "Heading", "Tackling"],
        ans: 2,
        exp: "Heading adalah teknik memainkan bola menggunakan kepala, bisa untuk mencetak gol, mengoper, atau membuang bola dari area pertahanan."
      },
      {
        q: "Berikut ini yang BUKAN merupakan teknik dasar sepak bola adalah…",
        opts: ["Menendang (kicking)", "Menggiring (dribbling)", "Smash", "Menyundul (heading)"],
        ans: 2,
        exp: "Smash adalah teknik dalam permainan bola voli atau bulutangkis, bukan teknik dasar sepak bola."
      },
      {
        q: "Ukuran lebar lapangan sepak bola standar internasional adalah…",
        opts: ["50–60 meter", "64–75 meter", "80–90 meter", "90–100 meter"],
        ans: 1,
        exp: "Menurut FIFA, lebar lapangan sepak bola standar internasional adalah 64–75 meter."
      },
      {
        q: "Tendangan bebas tidak langsung diberikan ketika terjadi pelanggaran berupa…",
        opts: ["Handball di luar kotak penalti", "Offside", "Menarik baju lawan", "Menendang lawan dari belakang"],
        ans: 1,
        exp: "Tendangan bebas tidak langsung diberikan untuk pelanggaran seperti offside, obstruction, atau pelanggaran terhadap penjaga gawang."
      },
      {
        q: "Posisi pemain yang bertugas menjaga pertahanan dan menghalau serangan lawan disebut…",
        opts: ["Striker", "Midfielder", "Defender (bek)", "Goalkeeper"],
        ans: 2,
        exp: "Defender atau bek adalah pemain yang bertugas utama menjaga pertahanan, menghalau serangan lawan, dan melindungi area gawang."
      },
      {
        q: "Gerakan tipuan untuk melewati lawan dalam sepak bola disebut…",
        opts: ["Screening", "Feinting", "Marking", "Sliding"],
        ans: 1,
        exp: "Feinting adalah gerakan tipuan yang dilakukan untuk mengecoh atau melewati pemain lawan saat menguasai bola."
      },
      {
        q: "Dalam sepak bola, tendangan menggunakan punggung kaki (kura-kura kaki) paling tepat untuk…",
        opts: ["Mengoper bola jarak pendek", "Menembak bola keras ke gawang", "Menghentikan bola lambung", "Melakukan lemparan ke dalam"],
        ans: 1,
        exp: "Tendangan menggunakan punggung kaki menghasilkan tenaga besar sehingga tepat untuk menembak (shooting) ke gawang dengan keras."
      },
      {
        q: "Apa fungsi utama gelandang (midfielder) dalam permainan sepak bola?",
        opts: ["Menjaga gawang", "Mencetak gol saja", "Menghubungkan pertahanan dan penyerangan", "Melakukan throw-in"],
        ans: 2,
        exp: "Gelandang (midfielder) berperan menghubungkan lini pertahanan dan penyerangan, mengatur tempo permainan, serta membantu bertahan maupun menyerang."
      }
    ];

    // ===== STATE =====
    let currentQ = 0;
    let score = 0;
    let answered = false;
    let userAnswers = [];

    // ===== DEFAULT CONFIG =====
    const defaultConfig = {
      quiz_title: "Kuis Sepak Bola",
      subject_label: "PJOK — Kelas 8 SMP",
      background_color: "#0b3d2c",
      surface_color: "#1a3a2e",
      text_color: "#ffffff",
      primary_action_color: "#f59e0b",
      secondary_action_color: "#22c55e",
      font_family: "Outfit",
      font_size: 16
    };

    // ===== ELEMENT SDK =====
    window.elementSdk.init({
      defaultConfig,
      onConfigChange: async (config) => {
        const c = key => config[key] || defaultConfig[key];
        const font = c('font_family');
        const baseSize = c('font_size');
        const baseFontStack = `${font}, 'Outfit', sans-serif`;
        const serifStack = `'DM Serif Display', ${font}, serif`;

        // Update text content
        document.getElementById('mainTitle').textContent = c('quiz_title');
        document.getElementById('subjectLabel').textContent = c('subject_label');
        document.getElementById('quizHeaderTitle').textContent = c('quiz_title');

        // Colors
        const bg = c('background_color');
        const surface = c('surface_color');
        const text = c('text_color');
        const primary = c('primary_action_color');
        const secondary = c('secondary_action_color');

        const app = document.getElementById('app');
        app.style.background = `linear-gradient(135deg, ${bg} 0%, ${adjustColor(bg, 20)} 40%, ${adjustColor(bg, 40)} 70%, ${bg} 100%)`;

        document.querySelectorAll('.card-surface').forEach(el => {
          el.style.backgroundColor = hexToRgba(surface, 0.15);
        });

        document.querySelectorAll('.question-number-badge').forEach(el => {
          el.style.background = `linear-gradient(135deg, ${primary}, ${adjustColor(primary, -15)})`;
        });

        document.querySelectorAll('.start-btn, #nextBtnWrap button, #resultScreen button').forEach(el => {
          el.style.backgroundColor = primary;
        });

        // Fonts
        document.querySelectorAll('[style*="font-family"]').forEach(el => {
          if (el.style.fontFamily.includes('Serif')) {
            el.style.fontFamily = serifStack;
          } else {
            el.style.fontFamily = baseFontStack;
          }
        });

        // Font sizes
        document.getElementById('mainTitle').style.fontSize = `${baseSize * 2.5}px`;
        document.getElementById('subjectLabel').style.fontSize = `${baseSize * 1.1}px`;
        const qText = document.getElementById('questionText');
        if (qText) qText.style.fontSize = `${baseSize * 1.12}px`;
      },
      mapToCapabilities: (config) => ({
        recolorables: [
          { get: () => config.background_color || defaultConfig.background_color, set: (v) => { config.background_color = v; window.elementSdk.setConfig({ background_color: v }); } },
          { get: () => config.surface_color || defaultConfig.surface_color, set: (v) => { config.surface_color = v; window.elementSdk.setConfig({ surface_color: v }); } },
          { get: () => config.text_color || defaultConfig.text_color, set: (v) => { config.text_color = v; window.elementSdk.setConfig({ text_color: v }); } },
          { get: () => config.primary_action_color || defaultConfig.primary_action_color, set: (v) => { config.primary_action_color = v; window.elementSdk.setConfig({ primary_action_color: v }); } },
          { get: () => config.secondary_action_color || defaultConfig.secondary_action_color, set: (v) => { config.secondary_action_color = v; window.elementSdk.setConfig({ secondary_action_color: v }); } }
        ],
        borderables: [],
        fontEditable: { get: () => config.font_family || defaultConfig.font_family, set: (v) => { config.font_family = v; window.elementSdk.setConfig({ font_family: v }); } },
        fontSizeable: { get: () => config.font_size || defaultConfig.font_size, set: (v) => { config.font_size = v; window.elementSdk.setConfig({ font_size: v }); } }
      }),
      mapToEditPanelValues: (config) => new Map([
        ["quiz_title", config.quiz_title || defaultConfig.quiz_title],
        ["subject_label", config.subject_label || defaultConfig.subject_label]
      ])
    });

    // ===== HELPERS =====
    function hexToRgba(hex, alpha) {
      const r = parseInt(hex.slice(1,3), 16);
      const g = parseInt(hex.slice(3,5), 16);
      const b = parseInt(hex.slice(5,7), 16);
      return `rgba(${r},${g},${b},${alpha})`;
    }
    function adjustColor(hex, amount) {
      let r = parseInt(hex.slice(1,3), 16) + amount;
      let g = parseInt(hex.slice(3,5), 16) + amount;
      let b = parseInt(hex.slice(5,7), 16) + amount;
      r = Math.max(0, Math.min(255, r));
      g = Math.max(0, Math.min(255, g));
      b = Math.max(0, Math.min(255, b));
      return `#${r.toString(16).padStart(2,'0')}${g.toString(16).padStart(2,'0')}${b.toString(16).padStart(2,'0')}`;
    }

    // ===== QUIZ LOGIC =====
    function startQuiz() {
      currentQ = 0; score = 0; answered = false; userAnswers = [];
      document.getElementById('startScreen').classList.add('hidden');
      document.getElementById('quizScreen').classList.remove('hidden');
      document.getElementById('resultScreen').classList.add('hidden');
      loadQuestion();
    }

    function loadQuestion() {
      answered = false;
      const q = questions[currentQ];
      document.getElementById('qNumBadge').textContent = currentQ + 1;
      document.getElementById('questionText').textContent = q.q;
      document.getElementById('progressText').textContent = `Soal ${currentQ + 1} dari ${questions.length}`;
      const pct = Math.round(((currentQ) / questions.length) * 100);
      document.getElementById('progressPct').textContent = `${pct}%`;
      document.getElementById('progressBar').style.width = `${pct}%`;
      document.getElementById('scoreDisplay').querySelector('span').textContent = score;
      document.getElementById('explanationBox').classList.add('hidden');
      document.getElementById('nextBtnWrap').classList.add('hidden');

      const labels = ['A', 'B', 'C', 'D'];
      const container = document.getElementById('optionsContainer');
      container.innerHTML = '';

      q.opts.forEach((opt, i) => {
        const btn = document.createElement('button');
        btn.className = 'option-btn w-full text-left rounded-xl px-5 py-4 flex items-center gap-4 cursor-pointer';
        btn.style.fontFamily = "'Outfit', sans-serif";
        btn.innerHTML = `
          <span class="flex-shrink-0 w-8 h-8 rounded-lg bg-white/10 flex items-center justify-center text-amber-400 font-bold text-sm">${labels[i]}</span>
          <span class="text-emerald-50 text-sm">${opt}</span>
        `;
        btn.addEventListener('click', () => selectAnswer(i, btn));
        btn.style.animation = `slideRight 0.3s ease-out ${i * 0.08}s both`;
        container.appendChild(btn);
      });

      if (currentQ === questions.length - 1) {
        document.getElementById('nextBtnText').textContent = 'Lihat Hasil';
      } else {
        document.getElementById('nextBtnText').textContent = 'Soal Berikutnya';
      }

      lucide.createIcons();
    }

    function selectAnswer(index, btn) {
      if (answered) return;
      answered = true;

      const q = questions[currentQ];
      const isCorrect = index === q.ans;
      userAnswers.push({ qIndex: currentQ, selected: index, correct: isCorrect });

      if (isCorrect) score++;

      const allBtns = document.querySelectorAll('.option-btn');
      allBtns.forEach((b, i) => {
        b.classList.add('answered');
        b.style.cursor = 'default';
        if (i === q.ans) b.classList.add('correct');
        if (i === index && !isCorrect) b.classList.add('wrong');
        if (i === q.ans && !isCorrect) b.classList.add('show-correct');
      });

      document.getElementById('scoreDisplay').querySelector('span').textContent = score;

      document.getElementById('explanationText').textContent = q.exp;
      document.getElementById('explanationBox').classList.remove('hidden');
      document.getElementById('explanationBox').style.animation = 'fadeInUp 0.3s ease-out';

      document.getElementById('nextBtnWrap').classList.remove('hidden');
      document.getElementById('nextBtnWrap').style.animation = 'fadeInUp 0.3s ease-out 0.15s both';
    }

    function nextQuestion() {
      if (currentQ < questions.length - 1) {
        currentQ++;
        loadQuestion();
        document.getElementById('questionCard').style.animation = 'fadeInUp 0.35s ease-out';
      } else {
        showResults();
      }
    }

    function showResults() {
      document.getElementById('quizScreen').classList.add('hidden');
      document.getElementById('resultScreen').classList.remove('hidden');

      const pct = Math.round((score / questions.length) * 100);
      const wrong = questions.length - score;

      document.getElementById('scoreValue').textContent = score;
      document.getElementById('statCorrect').textContent = score;
      document.getElementById('statWrong').textContent = wrong;
      document.getElementById('statScore').textContent = pct;

      const circle = document.getElementById('scoreCircle');
      setTimeout(() => {
        circle.style.setProperty('--score-pct', `${pct}%`);
        circle.style.setProperty('--score-color', pct >= 70 ? '#22c55e' : pct >= 40 ? '#f59e0b' : '#ef4444');
      }, 100);

      let emoji, msg;
      if (pct >= 90) { emoji = '🏆'; msg = 'Luar biasa! Kamu menguasai materi sepak bola dengan sangat baik!'; }
      else if (pct >= 70) { emoji = '⭐'; msg = 'Hebat! Pemahamanmu tentang sepak bola sudah bagus!'; }
      else if (pct >= 50) { emoji = '💪'; msg = 'Cukup baik! Terus belajar untuk meningkatkan pemahamanmu.'; }
      else { emoji = '📚'; msg = 'Jangan menyerah! Pelajari kembali materi sepak bola dan coba lagi.'; }

      document.getElementById('resultEmoji').textContent = emoji;
      document.getElementById('resultMessage').textContent = msg;

      // Build review
      const reviewSection = document.getElementById('reviewSection');
      reviewSection.innerHTML = '';
      const labels = ['A', 'B', 'C', 'D'];
      userAnswers.forEach((ua, idx) => {
        const q = questions[ua.qIndex];
        const div = document.createElement('div');
        div.className = `review-item card-surface rounded-xl p-4 ${ua.correct ? 'review-correct' : 'review-wrong'}`;
        div.style.fontFamily = "'Outfit', sans-serif";
        div.innerHTML = `
          <div class="flex items-start gap-3 mb-2">
            <span class="flex-shrink-0 w-7 h-7 rounded-lg ${ua.correct ? 'bg-emerald-500/20 text-emerald-400' : 'bg-red-500/20 text-red-400'} flex items-center justify-center font-bold text-xs">${idx + 1}</span>
            <p class="text-white text-sm leading-relaxed">${q.q}</p>
          </div>
          <div class="ml-10 space-y-1 text-sm">
            <p class="text-emerald-300/60">Jawabanmu: <span class="${ua.correct ? 'text-emerald-400' : 'text-red-400'} font-semibold">${labels[ua.selected]}. ${q.opts[ua.selected]}</span></p>
            ${!ua.correct ? `<p class="text-emerald-300/60">Jawaban benar: <span class="text-emerald-400 font-semibold">${labels[q.ans]}. ${q.opts[q.ans]}</span></p>` : ''}
            <p class="text-emerald-200/50 text-xs mt-2 italic">${q.exp}</p>
          </div>
        `;
        reviewSection.appendChild(div);
      });

      lucide.createIcons();
    }

    let reviewOpen = false;
    function toggleReview() {
      reviewOpen = !reviewOpen;
      document.getElementById('reviewSection').classList.toggle('hidden');
      const chevron = document.getElementById('reviewChevron');
      chevron.style.transform = reviewOpen ? 'rotate(180deg)' : 'rotate(0)';
    }

    function restartQuiz() {
      document.getElementById('resultScreen').classList.add('hidden');
      document.getElementById('startScreen').classList.remove('hidden');
      reviewOpen = false;
      document.getElementById('reviewSection').classList.add('hidden');
      document.getElementById('reviewChevron').style.transform = 'rotate(0)';
    }

    // Init icons
    lucide.createIcons();
  </script>
 <script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'9dc042c2d26386a1',t:'MTc3MzQ1OTY2Ni4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script></body>
</html>