{"id":267,"date":"2026-08-18T15:19:18","date_gmt":"2026-08-18T15:19:18","guid":{"rendered":"https:\/\/lab.rwb.my.id\/story\/?page_id=267"},"modified":"2026-08-18T15:31:41","modified_gmt":"2026-08-18T15:31:41","slug":"kuis-seru","status":"publish","type":"page","link":"https:\/\/lab.rwb.my.id\/story\/kuis-seru\/","title":{"rendered":"Kuis Seru"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"267\" class=\"elementor elementor-267\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0ac5ab1 e-con-full e-flex e-con e-parent\" data-id=\"0ac5ab1\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5ba3f34 elementor-widget elementor-widget-html\" data-id=\"5ba3f34\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n  @import url('https:\/\/fonts.googleapis.com\/css2?family=Bangers&family=Nunito:wght@400;600;700;800&display=swap');\n\n  .kt-quiz-section {\n    background-color: #FFF8E1;\n    font-family: 'Nunito', sans-serif;\n    padding: 60px 0;\n    min-height: 80vh;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n  .kt-quiz-wrap {\n    max-width: 600px;\n    width: 100%;\n    margin: 0 auto;\n    padding: 0 20px;\n    position: relative;\n  }\n\n  \/* Kartu Soal *\/\n  .kt-quiz-card {\n    background: #FFFFFF;\n    border: 3.5px solid #1A1A1A;\n    border-radius: 255px 15px 225px 15px \/ 15px 225px 15px 255px;\n    box-shadow: 8px 8px 0 #1A1A1A;\n    padding: 40px 30px;\n    text-align: center;\n    position: relative;\n  }\n\n  \/* Header Kuis *\/\n  .kt-quiz-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin-bottom: 30px;\n    border-bottom: 3px dashed #1A1A1A;\n    padding-bottom: 15px;\n  }\n  .kt-quiz-title {\n    font-family: 'Bangers', cursive;\n    font-size: 1.8rem;\n    color: #EF4444;\n    -webkit-text-stroke: 1px #1A1A1A;\n    paint-order: stroke fill;\n    letter-spacing: 0.03em;\n  }\n  .kt-quiz-score {\n    font-family: 'Bangers', cursive;\n    font-size: 1.2rem;\n    color: #1A1A1A;\n    background: #FBBF24;\n    padding: 5px 15px;\n    border: 2.5px solid #1A1A1A;\n    border-radius: 255px 15px 225px 15px \/ 15px 225px 15px 255px;\n    box-shadow: 2px 2px 0 #1A1A1A;\n  }\n\n  \/* Emoji Soal *\/\n  .kt-quiz-emoji {\n    font-size: 5rem;\n    margin-bottom: 20px;\n    display: block;\n    animation: ktBounce 2s infinite;\n  }\n  @keyframes ktBounce {\n    0%, 100% { transform: translateY(0); }\n    50% { transform: translateY(-10px); }\n  }\n\n  \/* Teks Soal *\/\n  .kt-quiz-question {\n    font-size: 1.2rem;\n    font-weight: 800;\n    color: #1A1A1A;\n    margin-bottom: 30px;\n    line-height: 1.4;\n  }\n\n  \/* Tombol Jawaban *\/\n  .kt-quiz-options {\n    display: flex;\n    flex-direction: column;\n    gap: 15px;\n  }\n  .kt-quiz-btn {\n    background: #FFFFFF;\n    border: 3px solid #1A1A1A;\n    border-radius: 15px 255px 15px 225px \/ 225px 15px 255px 15px;\n    box-shadow: 4px 4px 0 #1A1A1A;\n    padding: 15px 20px;\n    font-size: 1rem;\n    font-weight: 800;\n    font-family: 'Nunito', sans-serif;\n    color: #1A1A1A;\n    cursor: pointer;\n    transition: all 0.15s ease;\n    text-align: left;\n    display: flex;\n    align-items: center;\n    gap: 10px;\n  }\n  .kt-quiz-btn:hover:not(:disabled) {\n    transform: translateY(-2px);\n    box-shadow: 6px 6px 0 #1A1A1A;\n  }\n  .kt-quiz-btn:disabled {\n    cursor: not-allowed;\n    opacity: 0.6;\n  }\n\n  \/* Warna Jawaban *\/\n  .kt-quiz-btn.kt-correct {\n    background: #A7F3D0;\n    color: #1A1A1A;\n    border-color: #1A1A1A;\n    opacity: 1 !important;\n  }\n  .kt-quiz-btn.kt-wrong {\n    background: #EF4444;\n    color: #FFFFFF;\n    border-color: #1A1A1A;\n    opacity: 1 !important;\n  }\n\n  \/* Feedback Teks *\/\n  .kt-quiz-feedback {\n    margin-top: 25px;\n    font-weight: 800;\n    font-size: 1.1rem;\n    min-height: 30px;\n    padding: 10px;\n    border-radius: 10px;\n  }\n  .kt-quiz-feedback.kt-show-correct {\n    background: #A7F3D0;\n    border: 2.5px solid #1A1A1A;\n    color: #1A1A1A;\n  }\n  .kt-quiz-feedback.kt-show-wrong {\n    background: #FBCFE8;\n    border: 2.5px solid #1A1A1A;\n    color: #1A1A1A;\n  }\n\n  \/* Tombol Lanjut *\/\n  .kt-quiz-next {\n    margin-top: 20px;\n    background: #1A1A1A;\n    color: #FFF;\n    border: 3px solid #1A1A1A;\n    border-radius: 255px 15px 225px 15px \/ 15px 225px 15px 255px;\n    box-shadow: 4px 4px 0 #EF4444;\n    padding: 15px;\n    width: 100%;\n    font-size: 1.2rem;\n    font-family: 'Bangers', cursive;\n    letter-spacing: 0.05em;\n    cursor: pointer;\n    transition: all 0.2s ease;\n    display: none;\n  }\n  .kt-quiz-next:hover {\n    transform: translateY(-3px);\n    box-shadow: 6px 6px 0 #EF4444;\n  }\n\n  \/* Halaman Hasil *\/\n  .kt-quiz-result {\n    display: none;\n    text-align: center;\n  }\n  .kt-quiz-result h2 {\n    font-family: 'Bangers', cursive;\n    font-size: 3rem;\n    color: #EF4444;\n    -webkit-text-stroke: 2px #1A1A1A;\n    paint-order: stroke fill;\n    margin-bottom: 20px;\n  }\n  .kt-quiz-result p {\n    font-size: 1.5rem;\n    font-weight: 800;\n    color: #1A1A1A;\n    margin-bottom: 30px;\n  }\n  .kt-quiz-replay {\n    background: #FBBF24;\n    color: #1A1A1A;\n    border: 3px solid #1A1A1A;\n    border-radius: 15px 255px 15px 225px \/ 225px 15px 255px 15px;\n    box-shadow: 4px 4px 0 #1A1A1A;\n    padding: 15px 30px;\n    font-size: 1.2rem;\n    font-family: 'Bangers', cursive;\n    cursor: pointer;\n    transition: all 0.2s ease;\n  }\n  .kt-quiz-replay:hover {\n    transform: translateY(-3px) rotate(-2deg);\n    box-shadow: 6px 6px 0 #1A1A1A;\n  }\n<\/style>\n\n<!-- Library Confetti dari CDN -->\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/canvas-confetti@1.9.2\/dist\/confetti.browser.min.js\"><\/script>\n\n<div class=\"kt-quiz-section\">\n  <div class=\"kt-quiz-wrap\">\n    \n    <!-- KUIS -->\n    <div id=\"ktQuizMain\">\n      <div class=\"kt-quiz-card\">\n        <div class=\"kt-quiz-header\">\n          <span class=\"kt-quiz-title\">\ud83e\udde0 KUIS SERU<\/span>\n          <span class=\"kt-quiz-score\" id=\"ktScoreLabel\">\u2b50 0\/10<\/span>\n        <\/div>\n        \n        <span class=\"kt-quiz-emoji\" id=\"ktEmoji\">\ud83d\udc09<\/span>\n        <div class=\"kt-quiz-question\" id=\"ktQuestion\">Siapa yang tinggal di gua?<\/div>\n        \n        <!-- Tombol akan otomatis diisi oleh JavaScript -->\n        <div class=\"kt-quiz-options\" id=\"ktOptions\"><\/div>\n\n        <div class=\"kt-quiz-feedback\" id=\"ktFeedback\"><\/div>\n        <button class=\"kt-quiz-next\" id=\"ktNextBtn\" onclick=\"ktNextQuestion()\">Lanjut \u2794<\/button>\n      <\/div>\n    <\/div>\n\n    <!-- HASIL -->\n    <div class=\"kt-quiz-result\" id=\"ktQuizResult\">\n      <div class=\"kt-quiz-card\">\n        <h2>\ud83c\udf89 KUIS SELESAI!<\/h2>\n        <p>Skormu: <span id=\"ktFinalScore\">0<\/span>\/10<\/p>\n        <button class=\"kt-quiz-replay\" onclick=\"ktRestartQuiz()\">\ud83d\udd04 Main Lagi<\/button>\n      <\/div>\n    <\/div>\n\n  <\/div>\n<\/div>\n\n<script>\n  \/\/ Data Soal (Total 10 Soal)\n  const questions = [\n    { emoji: \"\ud83d\udc09\", q: \"Siapa yang tinggal di gua?\", opts: [\"\ud83d\udc30 Kelinci\", \"\ud83d\udc09 Naga\", \"\ud83d\udc31 Kucing\", \"\ud83d\udc38 Katak\"], correct: 1, correctMsg: \"\ud83c\udf89 BENAR! Kamu hebat. Naga memang tinggal di gua.\", wrongMsg: \"\ud83d\ude04 Belum tepat! Jawaban yang benar adalah Naga.\" },\n    { emoji: \"\ud83d\udc30\", q: \"Apa makanan favorit kelinci?\", opts: [\"\ud83e\udd55 Wortel\", \"\ud83c\udf56 Daging\", \"\ud83c\udf57 Ayam\", \"\ud83d\udc1f Ikan\"], correct: 0, correctMsg: \"\ud83c\udf89 BETUL! Kelinci sangat suka wortel.\", wrongMsg: \"\ud83d\ude04 Uhuk! Jawaban yang benar adalah Wortel.\" },\n    { emoji: \"\ud83e\udd89\", q: \"Hewan apa yang terbang di malam hari?\", opts: [\"\ud83d\udc14 Ayam\", \"\ud83e\udd85 Elang\", \"\ud83e\udd89 Burung Hantu\", \"\ud83d\udc27 Penguin\"], correct: 2, correctMsg: \"\ud83c\udf89 HEBAT! Burung Hantu memang aktif di malam hari.\", wrongMsg: \"\ud83d\ude04 Yah, salah ya. Jawabannya Burung Hantu.\" },\n    { emoji: \"\ud83d\udc2e\", q: \"Hewan apa yang menghasilkan susu?\", opts: [\"\ud83d\udc2e Sapi\", \"\ud83d\udc0e Kuda\", \"\ud83d\udc0f Domba\", \"\ud83d\udc16 Babi\"], correct: 0, correctMsg: \"\ud83c\udf89 BETUL! Sapi memang penghasil susu.\", wrongMsg: \"\ud83d\ude04 Belum tepat! Jawabannya adalah Sapi.\" },\n    { emoji: \"\ud83d\udc18\", q: \"Hewan apa yang memiliki belalai?\", opts: [\"\ud83e\udd8f Badak\", \"\ud83d\udc18 Gajah\", \"\ud83e\udd9b Kuda Nil\", \"\ud83d\udc0a Buaya\"], correct: 1, correctMsg: \"\ud83c\udf89 HEBAT! Gajah terkenal dengan belalainya.\", wrongMsg: \"\ud83d\ude04 Ups, salah! Jawaban yang benar Gajah.\" },\n    { emoji: \"\ud83d\udc0d\", q: \"Hewan melata apa yang tidak punya kaki?\", opts: [\"\ud83d\udc0a Buaya\", \"\ud83e\udd8e Kadal\", \"\ud83d\udc0d Ular\", \"\ud83d\udc22 Kura-kura\"], correct: 2, correctMsg: \"\ud83c\udf89 JELAS! Ular memang melata tanpa kaki.\", wrongMsg: \"\ud83d\ude04 Coba lagi! Jawabannya Ular.\" },\n    { emoji: \"\ud83d\udc1d\", q: \"Serangga apa yang menghasilkan madu?\", opts: [\"\ud83d\udc1c Semut\", \"\ud83e\udd8b Kupu-kupu\", \"\ud83d\udd77\ufe0f Laba-laba\", \"\ud83d\udc1d Lebah\"], correct: 3, correctMsg: \"\ud83c\udf89 MANTAP! Lebah memang penghasil madu.\", wrongMsg: \"\ud83d\ude04 Kurang beruntung! Jawabannya Lebah.\" },\n    { emoji: \"\ud83d\udc20\", q: \"Hewan apa yang bernapas dengan insang?\", opts: [\"\ud83d\udc19 Gurita\", \"\ud83e\udd91 Cumi-cumi\", \"\ud83d\udc20 Ikan\", \"\ud83d\udc2c Lumba-lumba\"], correct: 2, correctMsg: \"\ud83c\udf89 YAP! Ikan memang bernapas dengan insang.\", wrongMsg: \"\ud83d\ude04 Yah salah! Jawabannya Ikan.\" },\n    { emoji: \"\ud83d\udc2b\", q: \"Hewan apa yang punya punuk di punggungnya?\", opts: [\"\ud83d\udc0e Kuda\", \"\ud83d\udc02 Sapi\", \"\ud83d\udc2b Unta\", \"\ud83e\udd8c Rusa\"], correct: 2, correctMsg: \"\ud83c\udf89 BENAR! Unta punya punuk untuk menyimpan lemak.\", wrongMsg: \"\ud83d\ude04 Salah nih! Jawabannya Unta.\" },\n    { emoji: \"\ud83d\udc27\", q: \"Burung apa yang tidak bisa terbang tapi bisa berenang?\", opts: [\"\ud83d\udc26 Pipit\", \"\ud83d\udc27 Penguin\", \"\ud83e\udd85 Elang\", \"\ud83e\udd9c Beo\"], correct: 1, correctMsg: \"\ud83c\udf89 TOPI! Penguin memang ahli berenang, bukan terbang.\", wrongMsg: \"\ud83d\ude04 Belum tepat! Jawabannya Penguin.\" }\n  ];\n\n  let currentQ = 0;\n  let score = 0;\n\n  \/\/ ==========================================\n  \/\/ KONFIGURASI SUARA (Web Audio API)\n  \/\/ ==========================================\n  let audioCtx;\n  function getAudioCtx() {\n    if (!audioCtx) {\n      audioCtx = new (window.AudioContext || window.webkitAudioContext)();\n    }\n    if (audioCtx.state === 'suspended') {\n      audioCtx.resume(); \/\/ Aktifkan audio kalau browser block\n    }\n    return audioCtx;\n  }\n\n  function playSound(frequency, duration, type = 'sine', volume = 0.2) {\n    let ctx = getAudioCtx();\n    let oscillator = ctx.createOscillator();\n    let gainNode = ctx.createGain();\n    \n    oscillator.connect(gainNode);\n    gainNode.connect(ctx.destination);\n    \n    oscillator.type = type;\n    oscillator.frequency.setValueAtTime(frequency, ctx.currentTime);\n    \n    gainNode.gain.setValueAtTime(volume, ctx.currentTime);\n    gainNode.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + duration);\n    \n    oscillator.start(ctx.currentTime);\n    oscillator.stop(ctx.currentTime + duration);\n  }\n\n  function playCorrectSound() {\n    playSound(880, 0.1, 'sine', 0.3); \/\/ Bunyi \"Ding\" tinggi\n    setTimeout(() => playSound(1200, 0.15, 'sine', 0.3), 80); \/\/ Bunyi kedua lebih tinggi\n  }\n\n  function playWrongSound() {\n    playSound(150, 0.4, 'sawtooth', 0.2); \/\/ Bunyi \"Bzzt\" rendah\n  }\n\n  function playWinSound() {\n    \/\/ Melodi ceria: C, E, G, C (Oktave tinggi)\n    let notes = [523.25, 659.25, 783.99, 1046.50];\n    notes.forEach((note, index) => {\n      setTimeout(() => playSound(note, 0.3, 'triangle', 0.3), index * 150);\n    });\n  }\n\n  function fireConfetti() {\n    \/\/ Tembak dari kiri dan kanan\n    var duration = 2 * 1000; \/\/ 2 detik\n    var animationEnd = Date.now() + duration;\n    var defaults = { startVelocity: 30, spread: 360, ticks: 60, zIndex: 9999 };\n\n    var randomInRange = function(min, max) {\n      return Math.random() * (max - min) + min;\n    };\n\n    var interval = setInterval(function() {\n      var timeLeft = animationEnd - Date.now();\n      if (timeLeft <= 0) return clearInterval(interval);\n      \n      var particleCount = 50 * (timeLeft \/ duration);\n      \n      confetti({ ...defaults, particleCount, origin: { x: randomInRange(0.1, 0.3), y: Math.random() - 0.2 }, colors: ['#EF4444', '#FBBF24', '#A7F3D0', '#1A1A1A'] });\n      confetti({ ...defaults, particleCount, origin: { x: randomInRange(0.7, 0.9), y: Math.random() - 0.2 }, colors: ['#EF4444', '#FBBF24', '#A7F3D0', '#1A1A1A'] });\n    }, 250);\n  }\n\n  \/\/ ==========================================\n  \/\/ LOGIC KUIS\n  \/\/ ==========================================\n  function loadQuestion() {\n    const q = questions[currentQ];\n    document.getElementById('ktEmoji').innerText = q.emoji;\n    document.getElementById('ktQuestion').innerText = q.q;\n    \n    let optsContainer = document.getElementById('ktOptions');\n    optsContainer.innerHTML = '';\n    \n    q.opts.forEach((opt, index) => {\n      let btn = document.createElement('button');\n      btn.className = 'kt-quiz-btn';\n      btn.innerHTML = opt;\n      btn.onclick = function() { ktAnswer(this, index === q.correct) };\n      optsContainer.appendChild(btn);\n    });\n\n    document.getElementById('ktFeedback').innerHTML = '';\n    document.getElementById('ktFeedback').className = 'kt-quiz-feedback';\n    document.getElementById('ktNextBtn').style.display = 'none';\n    document.getElementById('ktScoreLabel').innerText = `\u2b50 ${score}\/${questions.length}`;\n  }\n\n  function ktAnswer(btn, isCorrect) {\n    \/\/ Matiin tombol semua\n    let buttons = document.querySelectorAll('.kt-quiz-btn');\n    buttons.forEach(b => b.disabled = true);\n\n    let feedback = document.getElementById('ktFeedback');\n    \n    if(isCorrect) {\n      btn.classList.add('kt-correct');\n      feedback.innerHTML = questions[currentQ].correctMsg;\n      feedback.classList.add('kt-show-correct');\n      score++;\n      document.getElementById('ktScoreLabel').innerText = `\u2b50 ${score}\/${questions.length}`;\n      \n      playCorrectSound(); \/\/ \ud83d\udd0a Bunyi Benar\n    } else {\n      btn.classList.add('kt-wrong');\n      feedback.innerHTML = questions[currentQ].wrongMsg;\n      feedback.classList.add('kt-show-wrong');\n      \n      let correctIndex = questions[currentQ].correct;\n      buttons[correctIndex].classList.add('kt-correct');\n      \n      playWrongSound(); \/\/ \ud83d\udd0a Bunyi Salah\n    }\n\n    document.getElementById('ktNextBtn').style.display = 'block';\n  }\n\n  function ktNextQuestion() {\n    currentQ++;\n    if(currentQ < questions.length) {\n      loadQuestion();\n    } else {\n      \/\/ Kuis selesai\n      document.getElementById('ktQuizMain').style.display = 'none';\n      document.getElementById('ktQuizResult').style.display = 'block';\n      document.getElementById('ktFinalScore').innerText = score;\n      \n      \/\/ Kalau skornya sempurna, mainkan musik ceria & tembak confetti!\n      if (score === questions.length) {\n        playWinSound();\n        fireConfetti();\n      } else {\n        \/\/ Tetap kasih suara kecil walau gak sempurna\n        playSound(523.25, 0.2, 'triangle', 0.2);\n      }\n    }\n  }\n\n  function ktRestartQuiz() {\n    currentQ = 0;\n    score = 0;\n    document.getElementById('ktQuizResult').style.display = 'none';\n    document.getElementById('ktQuizMain').style.display = 'block';\n    loadQuestion();\n  }\n\n  \/\/ Load pertama kali\n  loadQuestion();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\ud83e\udde0 KUIS SERU \u2b50 0\/10 \ud83d\udc09 Siapa yang tinggal di gua? Lanjut \u2794 \ud83c\udf89 KUIS SELESAI! Skormu: 0\/10 \ud83d\udd04 Main Lagi<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-267","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/lab.rwb.my.id\/story\/wp-json\/wp\/v2\/pages\/267","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lab.rwb.my.id\/story\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/lab.rwb.my.id\/story\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/lab.rwb.my.id\/story\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lab.rwb.my.id\/story\/wp-json\/wp\/v2\/comments?post=267"}],"version-history":[{"count":10,"href":"https:\/\/lab.rwb.my.id\/story\/wp-json\/wp\/v2\/pages\/267\/revisions"}],"predecessor-version":[{"id":277,"href":"https:\/\/lab.rwb.my.id\/story\/wp-json\/wp\/v2\/pages\/267\/revisions\/277"}],"wp:attachment":[{"href":"https:\/\/lab.rwb.my.id\/story\/wp-json\/wp\/v2\/media?parent=267"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}