<!doctype html>
<html lang="es" class="h-full">
 <head><script src="/_sdk/telemetry_sdk.js"></script>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Frog Verb Game</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=Fredoka:wght@400;600;700&amp;display=swap" rel="stylesheet">
  <style>
    * { font-family: 'Fredoka', sans-serif; }
    .lily-pad {
      background: radial-gradient(ellipse at center, #4ade80 0%, #16a34a 70%, #15803d 100%);
      border-radius: 50%;
      box-shadow: 0 4px 12px rgba(0,0,0,0.2), inset 0 -2px 4px rgba(0,0,0,0.1);
    }
    .frog-bounce {
      animation: bounce 0.6s ease infinite alternate;
    }
    @keyframes bounce {
      from { transform: translateY(0); }
      to { transform: translateY(-8px); }
    }
    .splash {
      animation: splash 0.4s ease-out forwards;
    }
    @keyframes splash {
      0% { transform: scale(0.8); opacity: 0; }
      50% { transform: scale(1.1); opacity: 1; }
      100% { transform: scale(1); opacity: 1; }
    }
    .wrong-shake {
      animation: shake 0.4s ease;
    }
    @keyframes shake {
      0%, 100% { transform: translateX(0); }
      25% { transform: translateX(-8px); }
      75% { transform: translateX(8px); }
    }
    .pond-bg {
      background: linear-gradient(180deg, #0c4a6e 0%, #0369a1 30%, #0ea5e9 60%, #7dd3fc 100%);
    }
    .option-btn {
      transition: all 0.2s ease;
    }
    .option-btn:hover {
      transform: scale(1.05);
    }
    .stars {
      animation: twinkle 1s ease-in-out;
    }
    @keyframes twinkle {
      0% { opacity: 0; transform: scale(0) rotate(0deg); }
      50% { opacity: 1; transform: scale(1.3) rotate(180deg); }
      100% { opacity: 1; transform: scale(1) rotate(360deg); }
    }
  </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="h-full w-full pond-bg overflow-auto flex flex-col items-center justify-center p-4"><!-- Title -->
   <h1 id="game-title" class="text-3xl md:text-4xl font-bold text-white drop-shadow-lg mb-2 text-center">🐸 Frog Verb Jump!</h1><!-- Score -->
   <div id="score-display" class="text-white text-lg mb-4 flex items-center gap-4"><span>⭐ Score: <strong id="score">0</strong></span> <span>❤️ Lives: <strong id="lives">3</strong></span>
   </div><!-- Question Area -->
   <div id="question-area" class="bg-white/90 backdrop-blur rounded-2xl p-5 md:p-6 max-w-lg w-full shadow-xl mb-6 text-center">
    <p class="text-sm text-sky-700 font-semibold mb-1">Complete the sentence:</p>
    <p id="sentence" class="text-xl md:text-2xl font-bold text-gray-800 leading-relaxed"></p>
   </div><!-- Frog -->
   <div id="frog" class="frog-bounce text-5xl mb-4 select-none">
    🐸
   </div><!-- Options (lily pads) -->
   <div id="options" class="grid grid-cols-2 sm:grid-cols-3 gap-3 max-w-lg w-full"></div><!-- Feedback -->
   <div id="feedback" class="mt-4 text-xl font-bold text-white h-8 text-center"></div><!-- Game Over -->
   <div id="game-over" class="hidden flex-col items-center gap-4 bg-white/95 rounded-2xl p-8 shadow-xl text-center">
    <p class="text-3xl font-bold text-gray-800">🎉 Game Over!</p>
    <p id="final-score" class="text-xl text-sky-700"></p><button onclick="restartGame()" class="bg-green-500 hover:bg-green-600 text-white font-bold px-6 py-3 rounded-full text-lg option-btn">Play Again 🐸</button>
   </div>
  </div>
  <script>
  const defaultConfig = {
    game_title: '🐸 Frog Verb Jump!',
    background_color: '#0c4a6e',
    surface_color: '#ffffff',
    text_color: '#1e3a5f',
    primary_action_color: '#16a34a',
    secondary_action_color: '#0ea5e9'
  };

  const questions = [
    { sentence: "Please ___ me the book.", answer: "give", options: ["give", "send", "take"] },
    { sentence: "Can you ___ this letter to Mary?", answer: "send", options: ["send", "bring", "show"] },
    { sentence: "___ your umbrella, it's raining!", answer: "Take", options: ["Take", "Give", "Send"] },
    { sentence: "Please ___ me your homework.", answer: "show", options: ["show", "take", "bring"] },
    { sentence: "Can you ___ some water from the kitchen?", answer: "bring", options: ["bring", "send", "give"] },
    { sentence: "I'll ___ you a present for your birthday.", answer: "give", options: ["give", "take", "show"] },
    { sentence: "She will ___ the package by mail.", answer: "send", options: ["send", "bring", "show"] },
    { sentence: "Don't ___ my pencil without asking!", answer: "take", options: ["take", "give", "send"] },
    { sentence: "___ me the way to the park, please.", answer: "Show", options: ["Show", "Bring", "Take"] },
    { sentence: "Mom asked me to ___ the groceries inside.", answer: "bring", options: ["bring", "send", "give"] },
    { sentence: "Could you ___ me a hand with this?", answer: "give", options: ["give", "show", "take"] },
    { sentence: "I need to ___ an email to my teacher.", answer: "send", options: ["send", "take", "bring"] },
    { sentence: "___ me your new toy! I want to see it.", answer: "Show", options: ["Show", "Give", "Send"] },
    { sentence: "Please ___ your sister to the party.", answer: "bring", options: ["bring", "take", "send"] },
    { sentence: "He will ___ the dog for a walk.", answer: "take", options: ["take", "give", "show"] },
  ];

  let score = 0;
  let lives = 3;
  let currentQ = 0;
  let shuffledQuestions = [];

  function shuffle(arr) {
    const a = [...arr];
    for (let i = a.length - 1; i > 0; i--) {
      const j = Math.floor(Math.random() * (i + 1));
      [a[i], a[j]] = [a[j], a[i]];
    }
    return a;
  }

  function startGame() {
    score = 0; lives = 3; currentQ = 0;
    shuffledQuestions = shuffle(questions);
    document.getElementById('game-over').classList.add('hidden');
    document.getElementById('question-area').classList.remove('hidden');
    document.getElementById('frog').classList.remove('hidden');
    document.getElementById('options').classList.remove('hidden');
    document.getElementById('score-display').classList.remove('hidden');
    updateUI();
    showQuestion();
  }

  function updateUI() {
    document.getElementById('score').textContent = score;
    document.getElementById('lives').textContent = lives;
  }

  function showQuestion() {
    if (currentQ >= shuffledQuestions.length || lives <= 0) return endGame();
    const q = shuffledQuestions[currentQ];
    document.getElementById('sentence').innerHTML = q.sentence.replace('___', '<span class="text-green-500 underline decoration-wavy">______</span>');
    const opts = shuffle(q.options);
    const container = document.getElementById('options');
    container.innerHTML = '';
    opts.forEach(opt => {
      const btn = document.createElement('button');
      btn.className = 'lily-pad option-btn px-4 py-4 text-white font-bold text-lg md:text-xl cursor-pointer select-none';
      btn.textContent = opt;
      btn.onclick = () => checkAnswer(opt, btn);
      container.appendChild(btn);
    });
    document.getElementById('feedback').textContent = '';
  }

  function checkAnswer(selected, btn) {
    const q = shuffledQuestions[currentQ];
    const feedback = document.getElementById('feedback');
    const frog = document.getElementById('frog');

    document.querySelectorAll('#options button').forEach(b => b.onclick = null);

    if (selected.toLowerCase() === q.answer.toLowerCase()) {
      score += 10;
      feedback.innerHTML = '✨ Correct! Great job! ✨';
      feedback.className = 'mt-4 text-xl font-bold text-yellow-300 h-8 text-center stars';
      frog.classList.remove('frog-bounce');
      frog.classList.add('splash');
    } else {
      lives--;
      feedback.textContent = `❌ Oops! The answer was "${q.answer}"`;
      feedback.className = 'mt-4 text-xl font-bold text-red-300 h-8 text-center';
      btn.classList.add('wrong-shake');
      btn.style.background = '#ef4444';
    }

    updateUI();
    setTimeout(() => {
      frog.classList.remove('splash');
      frog.classList.add('frog-bounce');
      currentQ++;
      showQuestion();
    }, 1500);
  }

  function endGame() {
    document.getElementById('question-area').classList.add('hidden');
    document.getElementById('frog').classList.add('hidden');
    document.getElementById('options').classList.add('hidden');
    document.getElementById('feedback').textContent = '';
    const go = document.getElementById('game-over');
    go.classList.remove('hidden');
    go.classList.add('flex');
    document.getElementById('final-score').textContent = `You scored ${score} points!`;
  }

  function restartGame() {
    document.getElementById('game-over').classList.remove('flex');
    startGame();
  }

  // Element SDK
  window.elementSdk.init({
    defaultConfig,
    onConfigChange: async (config) => {
      const title = config.game_title || defaultConfig.game_title;
      document.getElementById('game-title').textContent = title;
    },
    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 || 'Fredoka',
        set: (v) => { config.font_family = v; window.elementSdk.setConfig({ font_family: v }); }
      },
      fontSizeable: {
        get: () => config.font_size || 18,
        set: (v) => { config.font_size = v; window.elementSdk.setConfig({ font_size: v }); }
      }
    }),
    mapToEditPanelValues: (config) => new Map([
      ["game_title", config.game_title || defaultConfig.game_title]
    ])
  });

  startGame();
  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:'a0b25a1654126c34',t:'MTc4MTM2Njg4NS4wMDAwMDA='};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>