{"id":278,"date":"2026-08-18T15:38:03","date_gmt":"2026-08-18T15:38:03","guid":{"rendered":"https:\/\/lab.rwb.my.id\/story\/?page_id=278"},"modified":"2026-08-18T15:39:53","modified_gmt":"2026-08-18T15:39:53","slug":"tebak-siapa","status":"publish","type":"page","link":"https:\/\/lab.rwb.my.id\/story\/tebak-siapa\/","title":{"rendered":"Tebak Siapa"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"278\" class=\"elementor elementor-278\">\n\t\t\t\t<div class=\"elementor-element elementor-element-59e0973 e-con-full e-flex e-con e-parent\" data-id=\"59e0973\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-163ab9b elementor-widget elementor-widget-html\" data-id=\"163ab9b\" 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-guess-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-guess-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-guess-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 *\/\n  .kt-guess-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-guess-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-guess-level {\n    font-family: 'Bangers', cursive;\n    font-size: 1.2rem;\n    color: #1A1A1A;\n    background: #A7F3D0;\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 Misteri *\/\n  .kt-guess-emoji {\n    font-size: 5rem;\n    margin-bottom: 20px;\n    display: block;\n    animation: ktGuessBounce 2s infinite;\n  }\n  @keyframes ktGuessBounce {\n    0%, 100% { transform: translateY(0) rotate(0deg); }\n    50% { transform: translateY(-10px) rotate(5deg); }\n  }\n\n  \/* Box Petunjuk (Clues) *\/\n  .kt-guess-clues {\n    background: #FFF8E1;\n    border: 2.5px solid #1A1A1A;\n    border-radius: 15px 255px 15px 225px \/ 225px 15px 255px 15px;\n    padding: 15px 20px;\n    margin-bottom: 30px;\n    text-align: left;\n  }\n  .kt-guess-clues h4 {\n    font-family: 'Bangers', cursive;\n    font-size: 1.2rem;\n    color: #1A1A1A;\n    margin: 0 0 10px 0;\n    text-align: center;\n  }\n  .kt-guess-clues ul {\n    list-style: none;\n    padding: 0;\n    margin: 0;\n  }\n  .kt-guess-clues li {\n    font-size: 0.95rem;\n    font-weight: 700;\n    color: #57534E;\n    margin-bottom: 8px;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n  }\n\n  \/* Tombol Pilihan *\/\n  .kt-guess-options {\n    display: flex;\n    flex-direction: column;\n    gap: 15px;\n  }\n  .kt-guess-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-guess-btn:hover:not(:disabled) {\n    transform: translateY(-2px);\n    box-shadow: 6px 6px 0 #1A1A1A;\n  }\n  .kt-guess-btn:disabled {\n    cursor: not-allowed;\n    opacity: 0.6;\n  }\n  .kt-guess-btn.kt-correct {\n    background: #A7F3D0;\n    color: #1A1A1A;\n    border-color: #1A1A1A;\n    opacity: 1 !important;\n  }\n  .kt-guess-btn.kt-wrong {\n    background: #EF4444;\n    color: #FFFFFF;\n    border-color: #1A1A1A;\n    opacity: 1 !important;\n  }\n\n  \/* Feedback *\/\n  .kt-guess-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-guess-feedback.kt-show-correct {\n    background: #A7F3D0;\n    border: 2.5px solid #1A1A1A;\n    color: #1A1A1A;\n  }\n  .kt-guess-feedback.kt-show-wrong {\n    background: #FBCFE8;\n    border: 2.5px solid #1A1A1A;\n    color: #1A1A1A;\n  }\n\n  \/* Tombol Lanjut *\/\n  .kt-guess-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 #FBBF24;\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-guess-next:hover {\n    transform: translateY(-3px);\n    box-shadow: 6px 6px 0 #FBBF24;\n  }\n\n  \/* Halaman Menang (Hasil) *\/\n  .kt-guess-result {\n    display: none;\n    text-align: center;\n  }\n  .kt-guess-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-guess-result p {\n    font-size: 1.2rem;\n    font-weight: 800;\n    color: #1A1A1A;\n    margin-bottom: 30px;\n  }\n  .kt-guess-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-guess-replay:hover {\n    transform: translateY(-3px) rotate(-2deg);\n    box-shadow: 6px 6px 0 #1A1A1A;\n  }\n<\/style>\n\n<!-- Library Confetti -->\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/canvas-confetti@1.9.2\/dist\/confetti.browser.min.js\"><\/script>\n\n<div class=\"kt-guess-section\">\n  <div class=\"kt-guess-wrap\">\n    \n    <!-- GAME -->\n    <div id=\"ktGuessMain\">\n      <div class=\"kt-guess-card\">\n        <div class=\"kt-guess-header\">\n          <span class=\"kt-guess-title\">\ud83d\udc09 TEBAK SIAPA?<\/span>\n          <span class=\"kt-guess-level\" id=\"ktLevelLabel\">Level 1\/5<\/span>\n        <\/div>\n        \n        <span class=\"kt-guess-emoji\">\ud83d\udd75\ufe0f<\/span>\n        \n        <div class=\"kt-guess-clues\">\n          <h4>Petunjuk Siapa Aku:<\/h4>\n          <ul id=\"ktCluesList\">\n            <!-- Petunjuk diisi oleh JS -->\n          <\/ul>\n        <\/div>\n        \n        <div class=\"kt-guess-options\" id=\"ktGuessOptions\">\n          <!-- Tombol diisi oleh JS -->\n        <\/div>\n\n        <div class=\"kt-guess-feedback\" id=\"ktGuessFeedback\"><\/div>\n        <button class=\"kt-guess-next\" id=\"ktGuessNextBtn\" onclick=\"ktGuessNext()\">Lanjut \u2794<\/button>\n      <\/div>\n    <\/div>\n\n    <!-- HASIL MENANG -->\n    <div class=\"kt-guess-result\" id=\"ktGuessResult\">\n      <div class=\"kt-guess-card\">\n        <h2>\ud83c\udf89 HEBAT! \ud83c\udf89<\/h2>\n        <p>Kamu berhasil menebak semua karakter!<br>Kamu adalah Detektif Dongeng Sejati! \ud83d\udd75\ufe0f\u200d\u2642\ufe0f\u2728<\/p>\n        <button class=\"kt-guess-replay\" onclick=\"ktRestartGuess()\">\ud83d\udd04 Main Lagi<\/button>\n      <\/div>\n    <\/div>\n\n  <\/div>\n<\/div>\n\n<script>\n  \/\/ Data Tebak Siapa (5 Level)\n  const guessLevels = [\n    {\n      clues: [\"Aku punya empat kaki.\", \"Aku suka mengeong.\", \"Aku sering mengejar tikus.\", \"Aku suka tidur sepanjang hari.\"],\n      opts: [\"\ud83d\udc36 Anjing\", \"\ud83d\udc31 Kucing\", \"\ud83d\udc30 Kelinci\", \"\ud83e\udd8a Rubah\"],\n      correct: 1,\n      correctMsg: \"\ud83c\udf89 BETUL! Aku adalah Kucing. \ud83d\udc31\",\n      wrongMsg: \"\ud83d\ude04 Salah! Ayo coba tebak lagi.\"\n    },\n    {\n      clues: [\"Aku berjalan sangat lambat.\", \"Aku punya rumah di punggungku.\", \"Dulu aku pernah menang lomba lari sama kelinci.\", \"Aku bisa bersembunyi di cangkangku.\"],\n      opts: [\"\ud83d\udc0a Buaya\", \"\ud83d\udc0c Siput\", \"\ud83d\udc22 Kura-kura\", \"\ud83e\udd8e Kadal\"],\n      correct: 2,\n      correctMsg: \"\ud83c\udf89 TEPAT! Aku adalah Kura-kura. \ud83d\udc22\",\n      wrongMsg: \"\ud83d\ude04 Belum tepat! Coba ingat lagi petunjuknya.\"\n    },\n    {\n      clues: [\"Aku adalah hewan besar.\", \"Aku punya belalai panjang.\", \"Aku punya gading putih.\", \"Aku suka semprot air.\"],\n      opts: [\"\ud83e\udd8f Badak\", \"\ud83d\udc18 Gajah\", \"\ud83e\udd9b Kuda Nil\", \"\ud83d\udc03 Kerbau\"],\n      correct: 1,\n      correctMsg: \"\ud83c\udf89 JENIUS! Aku adalah Gajah. \ud83d\udc18\",\n      wrongMsg: \"\ud83d\ude04 Yah, salah! Tebak lagi yuk.\"\n    },\n    {\n      clues: [\"Aku bisa terbang.\", \"Aku aktif di malam hari.\", \"Aku suwa berbunyi 'kukuuuk'.\", \"Mataku sangat besar.\"],\n      opts: [\"\ud83e\udd85 Elang\", \"\ud83d\udc14 Ayam\", \"\ud83e\udd87 Kelelawar\", \"\ud83e\udd89 Burung Hantu\"],\n      correct: 3,\n      correctMsg: \"\ud83c\udf89 MANTAP! Aku adalah Burung Hantu. \ud83e\udd89\",\n      wrongMsg: \"\ud83d\ude04 Kurang beruntung! Coba lagi.\"\n    },\n    {\n      clues: [\"Aku tinggal di gua.\", \"Aku bisa terbang walau punya sayap besar.\", \"Aku sering mengeluarkan api dari mulutku.\", \"Aku adalah tokoh dongeng yang menakutkan.\"],\n      opts: [\"\ud83e\udd95 Dinosaurus\", \"\ud83d\udc09 Naga\", \"\ud83e\udd8e Komodo\", \"\ud83d\udc0a Buaya\"],\n      correct: 1,\n      correctMsg: \"\ud83c\udf89 HEBAT! Aku adalah Naga. \ud83d\udc09\",\n      wrongMsg: \"\ud83d\ude04 Salah ya! Tebak sekali lagi.\"\n    }\n  ];\n\n  let currentLevel = 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();\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);\n    setTimeout(() => playSound(1200, 0.15, 'sine', 0.3), 80);\n  }\n\n  function playWrongSound() {\n    playSound(150, 0.4, 'sawtooth', 0.2);\n  }\n\n  function playWinSound() {\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    var duration = 2 * 1000;\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 GAME TEBAK SIAPA\n  \/\/ ==========================================\n  function loadLevel() {\n    const lvl = guessLevels[currentLevel];\n    document.getElementById('ktLevelLabel').innerText = `Level ${currentLevel + 1}\/${guessLevels.length}`;\n    \n    \/\/ Masukin Petunjuk\n    let cluesList = document.getElementById('ktCluesList');\n    cluesList.innerHTML = '';\n    lvl.clues.forEach(clue => {\n      let li = document.createElement('li');\n      li.innerHTML = `\ud83d\udd39 ${clue}`;\n      cluesList.appendChild(li);\n    });\n\n    \/\/ Masukin Tombol\n    let optsContainer = document.getElementById('ktGuessOptions');\n    optsContainer.innerHTML = '';\n    \n    lvl.opts.forEach((opt, index) => {\n      let btn = document.createElement('button');\n      btn.className = 'kt-guess-btn';\n      btn.innerHTML = opt;\n      btn.onclick = function() { ktGuessAnswer(this, index === lvl.correct) };\n      optsContainer.appendChild(btn);\n    });\n\n    document.getElementById('ktGuessFeedback').innerHTML = '';\n    document.getElementById('ktGuessFeedback').className = 'kt-guess-feedback';\n    document.getElementById('ktGuessNextBtn').style.display = 'none';\n  }\n\n  function ktGuessAnswer(btn, isCorrect) {\n    let buttons = document.querySelectorAll('.kt-guess-btn');\n    buttons.forEach(b => b.disabled = true);\n\n    let feedback = document.getElementById('ktGuessFeedback');\n    let lvl = guessLevels[currentLevel];\n    \n    if(isCorrect) {\n      btn.classList.add('kt-correct');\n      feedback.innerHTML = lvl.correctMsg;\n      feedback.classList.add('kt-show-correct');\n      playCorrectSound();\n    } else {\n      btn.classList.add('kt-wrong');\n      feedback.innerHTML = lvl.wrongMsg;\n      feedback.classList.add('kt-show-wrong');\n      \n      \/\/ Kasih tau jawaban yang benar\n      buttons[lvl.correct].classList.add('kt-correct');\n      playWrongSound();\n    }\n\n    document.getElementById('ktGuessNextBtn').style.display = 'block';\n  }\n\n  function ktGuessNext() {\n    currentLevel++;\n    if(currentLevel < guessLevels.length) {\n      loadLevel();\n    } else {\n      \/\/ Game Selesai\n      document.getElementById('ktGuessMain').style.display = 'none';\n      document.getElementById('ktGuessResult').style.display = 'block';\n      playWinSound();\n      fireConfetti();\n    }\n  }\n\n  function ktRestartGuess() {\n    currentLevel = 0;\n    document.getElementById('ktGuessResult').style.display = 'none';\n    document.getElementById('ktGuessMain').style.display = 'block';\n    loadLevel();\n  }\n\n  \/\/ Load Level Pertama\n  loadLevel();\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>\ud83d\udc09 TEBAK SIAPA? Level 1\/5 \ud83d\udd75\ufe0f Petunjuk Siapa Aku: Lanjut \u2794 \ud83c\udf89 HEBAT! \ud83c\udf89 Kamu berhasil menebak semua karakter!Kamu adalah Detektif Dongeng Sejati! \ud83d\udd75\ufe0f\u200d\u2642\ufe0f\u2728 \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-278","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/lab.rwb.my.id\/story\/wp-json\/wp\/v2\/pages\/278","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=278"}],"version-history":[{"count":7,"href":"https:\/\/lab.rwb.my.id\/story\/wp-json\/wp\/v2\/pages\/278\/revisions"}],"predecessor-version":[{"id":285,"href":"https:\/\/lab.rwb.my.id\/story\/wp-json\/wp\/v2\/pages\/278\/revisions\/285"}],"wp:attachment":[{"href":"https:\/\/lab.rwb.my.id\/story\/wp-json\/wp\/v2\/media?parent=278"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}