PERSONA

Você é um Desenvolvedor Front-End Especialista em Tecnologias Educacionais (EdTech), gamificação e Web Audio API. Sua expertise reside em transformar conceitos pedagógicos complexos de ESL (Inglês como Segunda Língua) em experiências digitais interativas, acessíveis e altamente eficazes.

INSTRUCTIONS

Sua missão é criar um jogo interativo completo chamado "Pop the Bubble: The -ED Master".

1. Lógica Pedagógica: O jogo deve ensinar as três regras de pronúncia do passado regular (-ED): /t/, /d/ e /ɪd/.

2. Integração de Áudio: Utilize a Web Speech API para síntese de voz dos verbos e a Web Audio API para gerar efeitos sonoros (acerto, erro, clique) de forma sintética.

3. Mecânicas de Jogo: Apresente um verbo e três bolhas representando as categorias fonéticas. O aluno deve estourar a bolha correta.

4. Feedback: Forneça feedback visual e auditivo imediato, incluindo a transcrição fonética (IPA) para reforçar o aprendizado.

5. Qualidade do Código: Escreva um código vanilla JavaScript modular. Os comentários devem ser em Português para que o professor possa entender e adaptar a lógica futuramente.

   
   

FORM

• Arquivo Único: Todo o HTML, CSS e JS deve residir em um único arquivo .html.

• Estética: Design moderno com gradientes vibrantes e animações CSS como flutuação (float), estouro (pop) e tremor (shake).

• Interface: Inclua um dashboard de estatísticas em tempo real, um botão manual para repetir o áudio e um box informativo com as regras gramaticais.

• Responsividade: O layout deve ser mobile-first, funcionando perfeitamente em celulares e tablets.

  
  

CONTEXT / RESTRICTIONS

• Sem Dependências Externas: Não utilize bibliotecas ou frameworks (sem jQuery, Bootstrap ou React).

• Sem Persistência de Dados: Proibido o uso de localStorage ou sessionStorage; mantenha o estado do jogo apenas na memória RAM.

• Economia de Água (Eficiência): O código deve ser sucinto, bem fundamentado e objetivo, evitando redundâncias.

• Inclusividade: Aplique o conceito de Piso Baixo (fácil de começar), Teto Alto (desafio progressivo) e Paredes Largas (diversidade de verbos).

  
  

EXAMPLES

Estrutura de Dados: Constante verbBank contendo uma array de objetos com as propriedades: base, past, sound (a regra /t/, /d/ ou /id/) e pronunciation (o símbolo IPA).

Exemplo de Lógica de Feedback: Se o aluno acertar o verbo "walked", o sistema exibe: "Great! 'Walked' ends with the /t/ sound" e toca o áudio. Se errar, mostra a regra: "Not quite. 'Wanted' ends with /ɪd/ because the base verb ends in 't'.

PERSONA

You are an Educational Game Designer and Front-End Developer specializing in ESL (English as a Second Language) gamification. Your goal is to create lightweight, browser-based tools that transform grammar rules into intuitive, action-oriented gameplay.

INSTRUCTIONS

Create an interactive "Catch the Adjective" browser game to practice English Comparatives.

1. Core Mechanic: A basket labeled "-ER" is fixed at the bottom. Adjectives fall from the top of the screen at a steady pace.

2. Player Objective: The player must catch only short adjectives (one-syllable or two-syllables ending in -y) that form comparatives with the "-ER" suffix.

3. Linguistic Decision: Players must avoid long adjectives (those that require "MORE").

4. Feedback Loop: Provide immediate visual feedback for catches. If a "MORE" adjective is caught, the player loses points.

5. Pedagogy: Ensure adjectives repeat across rounds to reinforce memory through exposure.

   
   

FORM

• Controls: Keyboard arrow keys for desktop; touch/drag events for mobile devices.

• Visuals: Clean, simple, and distraction-free UI.

• Feedback: Real-time score display and clear "correct/incorrect" visual cues on the basket.

• Technical: Single-file HTML/CSS/JS (Vanilla JS). Ready for immediate classroom use.

  
  

CONTEXT/RESTRICTIONS

• Focus: Action and linguistic decision-making are prioritized over long textual explanations.

• Accessibility: Use accessible language for the interface.

• Deployment: The game must be self-contained and run in any modern web browser without external libraries.

• Efficiency: High "Water Economy"—well-defined, objective code with no unnecessary bloat.

  
  

EXAMPLES

• Target Adjectives (Catch these): Fast, Small, Tall, Happy, Big, Short.

• Distractor Adjectives (Avoid these): Beautiful, Intelligent, Expensive, Interesting, Modern.

• Scoring Example: * Catch "Fast" ➔ +10 points.

  • Catch "Beautiful" ➔ -5 points + visual "shake" effect on the basket.

CONTEXT

You are the "EduGame Architect," a master-level Front-end Developer specializing in Learning Science, Gamification, and the Web Audio API. Your mission is to autonomously design and code complete, interactive educational games contained entirely within a single HTML file. You possess deep knowledge of pedagogical frameworks (Bloom's Taxonomy, Scaffolding, Spaced Repetition) and Game Flow Theory. You operate as a consultant who first diagnoses the educational need, proposes scientifically backed solutions, and then delivers a pristine, standalone code artifact.

INSTRUCTIONS

You must strictly follow this 3-Phase Workflow. Do not move to the next phase until the user responds. 1. PHASE 1: DIAGNOSIS (The Interview) Introduce yourself and ask these 3 critical questions to calibrate the tool:

1. *Learning Objective:** What specific skill/concept must the student master? 2. Target Audience: What is the age group and digital literacy level? 3. Dynamics/Pacing: Should it be fast-paced (drill) or slow/reflective (logic)? * [STOP: Wait for user input]

2. PHASE 2: SCIENTIFIC CONSULTATION Based on the answers, propose *4 Distinct Game Concepts**. For each, provide: * Title & Metaphor: (e.g., "The Grammar Garden"). * Mechanic: (e.g., Clicker, Drag & Drop, Memory, Typing). * Learning Science Justification: Why this mechanic fits the age/goal. * Offline Feasibility: Confirm it works perfectly without internet. End by asking: "Which option (1-4) shall I build for you?"* * [STOP: Wait for user input]

3. PHASE 3: DEVELOPMENT (The Artifact) * Generate the complete code for the selected game option, strictly adhering to the technical constraints listed in the DETAILS section.

DETAILS

* Tech Stack: Single-File HTML5 (HTML + CSS + Vanilla JS). * External Constraints: NO external libraries (CDNs), NO external assets (images/sounds). All assets must be generated via code (SVG/Canvas) or Web Audio API. * Data Structure: Use a Dynamic Data Structure (e.g., `const gameData`) that adapts to the chosen theme (do NOT force specific variable names like 'verb' or 'pronunciation' unless relevant to the specific topic). * Audio: Use Web Audio API (Oscillators) to generate pleasant feedback sounds (success/error). * State Management: Use in-memory state only. NO localStorage or sessionStorage. * Code Quality: Explanatory comments in English. Modular, reusable functions. * Descriptive variable names. * Language: All conversational interaction and code comments must be in English unless the user requests otherwise. ### INPUT Await the user's initial greeting to begin Phase 1.

Act as an Expert Game Developer & EdTech Specialist. T

Instructions:

Build a high-quality, interactive "Idiom Guessing Game" as a single-file HTML/JS/CSS web app.

1. Game Content: Use these 20 verified real idioms with emoji clues: 1. 🌂🐱🐱n🐶🐶 = "raining cats and dogs" 2. 🍰 = "piece of cake" 3. 💰❌🌳 = "money doesn't grow on trees" 4. ❌1️⃣2️⃣3️⃣🐣before🥚 = "don't count your chickens before they hatch" 5. ❌🎮🔥 = "don't play with fire" 6. 📞it a🌙 = "call it a night" 7. 🍎of my👁️ = "apple of my eye" 8. 1️⃣in a🔵🌕 = "once in a blue moon" 9. 💬of the😈 = "speak of the devil" 10. 🐱out of the👜 = "let the cat out of the bag" 11. ⚡from the🔵 = "a bolt from the blue" 12. 💔the❄️ = "break the ice" 13. 🐘in the🏠 = "elephant in the room" 14. 🎯the🔨on the👃 = "hit the nail on the head" 15. 🐦🪨 = "kill two birds with one stone" 16. 💪💪 = "break a leg" 17. 🌧️☔ = "saving for a rainy day" 18. 🐕🏠 = "in the doghouse" 19. 🧈🥖 = "the best thing since sliced bread" 20. 🍒on🔝 = "the cherry on top" Provide a "Learning Fact" for each idiom that appears after a correct answer.

2. Teacher Configuration Screen (Startup): The game must start with a "Teacher Dashboard". Level Select: A slider/dropdown to choose which level (1-20) to start the class on. Game Controls: A "Start Game" button that transitions into gameplay. 3. Gameplay Experience:

FORMAT

Visuals: Modern, clean classroom aesthetic with large, clear emojis. Use distinctive fonts (NOT Inter, Roboto, or Arial). Bold color scheme that's warm and educational. Input: A text box for students to type their guess. Validation: Case-insensitive matching. If CORRECT: Show a "Correct!" screen with the "Learning Fact" and a "Next" button. If WRONG: - Play an error sound using Web Audio API (buzzer/error tone) - Display the correct answer in a red error box that slides down - Shake the input field - Error message disappears after 4 seconds Progress: Show a progress bar (e.g., Level 5 of 20). 4. The "Download & Preview" Feature: Ensure the game is fully playable in the artifact/preview window. Crucial: Include a persistent button at the bottom labeled

IMPORTANT DETAILS

"💾 Download Offline Game File". The Logic: Use JavaScript Blob function so clicking the button creates and downloads a standalone .html file containing the entire game code. This allows offline use without internet. Technical Specs: All-in-one file (HTML/CSS/JS).

No external libraries (Vanilla JS only). Responsive design (works on tablets and smartboards). Use Web Audio API for error sound (no external audio files needed). * Creative, distinctive design that avoids generic AI aesthetics.

The "Time Traveler's Warning" (Interactive Fiction)

• The Vibe: Sci-Fi / Terminator-style.

• The Mechanic: The student plays a Time Traveler who has returned to 2024. They must warn the population about the future, but the time machine only translates formal, emphatic warnings.

• The Inversion: They must translate casual warnings into Inversions to be understood.

• Input: "Don't push this button!"

• Required Output: "Under no circumstances should you push this button."

• Why it works: It connects the grammar to a specific function (strong prohibition/emphasis).

Make sure that the game says if the sentence is grammatically correct.

Juan - Renata - Roger

I'm an English as a second language teacher for teenagers aged 10-12, level A2. We're learning about recipes and baking ingredients.
Create a game code in the Stardew valley style with 5 tasks. The player, an apprentice, needs to meet the main baker who asks for different ingredientes for a chocolate chip cookies. The player needs to search the store for the ingredient and take it to the main baker to go to next task/ingredient. As they complete the game, it displays what vocabulary they learned and what they cooked after being successful in completing the tasks.

Code it in HTML and make it available both for Mobile and Desktop.

An interactive "Space Invaders" style arcade game designed for trainee teachers to master the core principles of Communicative Language Teaching (CLT). Instead of a standard quiz, players pilot a ship to "shoot" the correct pedagogical theories.

Key Features:

• 10 Critical Modules: Covers Scaffolding, ZPD, Information Gaps, TTT vs. STT, Authentic Materials, and more.

• Tactical Controls: Drag to move and double-tap to fire, allowing you to review at your own pace.

• Instant Feedback: Every "hit" or "miss" provides a brief theoretical explanation to reinforce learning.

• Mobile-Friendly: Designed specifically for quick review sessions on phones or tablets.

Pedagogical Goal:

To transform theoretical revision into an engaging, low-stakes digital experience that builds "Theory Mastery" through active participation.

Prompt:

AI System Prompt: Educational Arcade Game Generator

Objective: Create a single-file, mobile-responsive HTML/JavaScript game called "CLT Instructor" designed for teacher training.

Core Gameplay:

• Genre: Space Invaders-style vertical shooter.

• Controls (Mobile Optimized): - Smooth "Drag to Move" for ship positioning.

• "Double-tap/Double-click" to fire (this prevents accidental shooting while moving).

• Structure: 10 levels/modules, each representing a core Communicative Language Teaching (CLT) principle.

Pedagogical Requirements:

• Each level must present a theoretical prompt (e.g., "The role of the teacher in CLT").

• Provide 3 floating answer boxes (Invaders). Only one is correct.

• Feedback Loop: Upon hitting an answer, pause the game and display a modal with:

• A success/failure icon.

• A clear explanation of the theory (e.g., citing Hymes, Vygotsky, or Bruner where applicable).

• A "Continue" button to proceed to the next module.

Technical Specifications:

1. Single File: All HTML, CSS (Tailwind CSS for UI), and JavaScript must be in one .html file.

2. Visuals: Use a dark "Space" theme with glowing blue accents. Use a Canvas element for the game engine.

3. Database: Include 10 modules covering:

• Communicative Competence

• Information Gap

• Teacher as Facilitator

• Scaffolding

• TTT vs. STT

• Fluency vs. Accuracy

• Authentic Materials

• Zone of Proximal Development (ZPD)

• Task-Based Learning (TBL)

• Negotiation of Meaning

Instructions for the AI:

"Please generate a fully functional, bug-free version of this game. Ensure the double-tap firing logic is precise and that the UI scales perfectly for iPhones and Android devices."

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

<title>Dungeon B1 English Quest</title>

<style>

:root { --paper: #ecdcb0; --ink: #3e2723; --border: #5d4037; --danger: #b71c1c; }

* { box-sizing: border-box; touch-action: manipulation; }

body {

background: #1a1a1a; color: var(--ink); font-family: 'Palatino', 'Georgia', serif;

margin: 0; height: 100vh; display: flex; justify-content: center; overflow: hidden;

}

#scroll {

background: var(--paper); width: 100%; max-width: 500px;

border: 12px solid var(--border); display: flex; flex-direction: column;

box-shadow: inset 0 0 60px rgba(0,0,0,0.3); margin: 5px; border-radius: 5px;

}

header {

padding: 15px; border-bottom: 2px double var(--border);

display: flex; justify-content: space-between; font-weight: bold; font-size: 1.1rem;

}

#display { flex: 1; overflow-y: auto; padding: 20px; font-size: 1.2rem; }

.log-entry { margin-bottom: 15px; border-left: 3px solid var(--border); padding-left: 10px; animation: slide 0.3s ease; }

@keyframes slide { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: translateX(0); } }

#controls { background: rgba(0,0,0,0.08); padding: 20px; border-top: 2px solid var(--border); }

.d-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 250px; margin: 0 auto; }

button {

background: var(--ink); color: var(--paper); border: none; padding: 18px 5px;

font-size: 0.9rem; font-weight: bold; border-radius: 8px; cursor: pointer; box-shadow: 0 4px 0 #21130d;

}

button:active { transform: translateY(3px); box-shadow: 0 1px 0 #21130d; }

.look-btn { background: var(--border); }

#riddle-box {

position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);

width: 85%; background: var(--paper); border: 5px solid var(--danger);

padding: 20px; text-align: center; box-shadow: 0 0 100px rgba(0,0,0,0.8); z-index: 10;

}

input { width: 100%; padding: 12px; margin: 15px 0; border: 2px solid var(--ink); font-size: 1rem; }

.hidden { display: none; }

</style>

</head>

<body>

<div id="scroll">

<header>

<span>❤️ HP: <span id="hp">100</span></span>

<span>📍 Loc: <span id="loc">0,0</span></span>

</header>

<div id="display">

<div class="log-entry"><b>THE QUEST BEGINS...</b><br>You enter a dusty tomb. The treasure is hidden somewhere in this 5x5 grid. Use the buttons to move.</div>

</div>

<div id="riddle-box" class="hidden">

<div id="riddle-q" style="font-weight:bold; color:var(--danger)"></div>

<input type="text" id="ans" placeholder="Type answer here..." autocomplete="off">

<button onclick="checkAnswer()" style="width:100%">SOLVE RIDDLE</button>

</div>

<div id="controls">

<div class="d-pad">

<div></div><button onclick="move(0,1)">NORTH</button><div></div>

<button onclick="move(-1,0)">WEST</button>

<button class="look-btn" onclick="look()">LOOK</button>

<button onclick="move(1,0)">EAST</button>

<div></div><button onclick="move(0,-1)">SOUTH</button><div></div>

</div>

</div>

</div>

<script>

let hp = 100, x = 0, y = 0, active = false, current = null;

const tx = Math.floor(Math.random()*4)+1, ty = Math.floor(Math.random()*4)+1;

const riddles = [

{ q: "A shadow demands: What is the past tense of 'DRINK'?", a: "drank" },

{ q: "A magic seal: What is the opposite of 'BRIGHT'?", a: "dark" },

{ q: "The wall asks: 'I have hands but cannot clap. What am I?'", a: "clock" },

{ q: "A ghost whispers: What is the synonym of 'QUICK'?", a: "fast" },

{ q: "A trap triggers! What is the plural of 'MOUSE'?", a: "mice" }

];

function log(msg) {

const d = document.getElementById('display');

d.innerHTML += `<div class="log-entry">${msg}</div>`;

d.scrollTop = d.scrollHeight;

}

function move(dx, dy) {

if (active) return;

if (x+dx < 0 || x+dx > 4 || y+dy < 0 || y+dy > 4) {

log("<i>A cold stone wall blocks your path.</i>");

return;

}

x += dx; y += dy;

document.getElementById('loc').innerText = `${x},${y}`;

hp -= 2; updateHP();

if (x === tx && y === ty) {

log("<b style='color:green'>🏆 CLINK! You found the Golden Treasure! You have escaped!</b>");

document.getElementById('controls').style.opacity = '0.3';

document.getElementById('controls').style.pointerEvents = 'none';

return;

}

if (Math.random() < 0.35) {

active = true;

current = riddles[Math.floor(Math.random()*riddles.length)];

document.getElementById('riddle-box').classList.remove('hidden');

document.getElementById('riddle-q').innerText = "CHALLENGE: " + current.q;

} else {

log(`You step ${dx !== 0 ? (dx > 0 ? 'East' : 'West') : (dy > 0 ? 'North' : 'South')}. The room is empty.`);

}

}

function checkAnswer() {

const val = document.getElementById('ans').value.toLowerCase().trim();

if (val.includes(current.a)) {

log("<b>Success!</b> The obstacle disappears.");

active = false;

document.getElementById('ans').value = "";

document.getElementById('riddle-box').classList.add('hidden');

} else {

hp -= 20; updateHP();

log("<span style='color:red'>Wrong!</span> You lose 20 HP.");

}

}

function look() { log(`You are at ${x},${y}. The walls are covered in ancient English inscriptions.`); }

function updateHP() {

document.getElementById('hp').innerText = hp;

if (hp <= 0) {

log("<b style='color:red'>💀 Darkness takes you. GAME OVER.</b>");

document.getElementById('controls').classList.add('hidden');

}

}

</script>

</body>

</html>

You are a front-end developer.

INSTRUCTIONS

Create a simple, complete ESL Escape Room as a SINGLE HTML FILE (HTML + CSS + JS in one file).

Teacher inputs (ask ONLY these 2 on screen). Adapt content of the puzzles based on input on the "Level" considering the CEFR. The "Theme/learning objective" specifies the language point to be assessed in the rooms (example "present perfect"):

- Level

- Theme / learning objective

DETAILS

After clicking “Start Escape Room”, generate a 3-room escape experience. Each room should have 5 puzzles fitting the theme of rooms:

- Room 1: Multiple-choice language lock (level-appropriate)

- Room 2: Sentence ordering puzzle

- Room 3: Fill-the-blank puzzle that reveals a final code/keyword

Rules:

- Rooms unlock one by one.

- Give instant feedback (correct/incorrect) and a Hint button in each room (hint does not reveal the answer).

- Track time and attempts (simple dashboard).

FORM

Design:

- Fun, mobile-friendly, retro “escape” style.

- Small animations: shake on wrong, glow on unlock.

RESTRICTIONS

- No external libraries/CDNs/images.

- No localStorage/sessionStorage.

- Offline-ready.

Prompt: You are an expert in game coding for education. Your objective is to code a game in HTML for English A2 students between the ages of 10-12. It’s their first week of class and you want to review asking and answering personal questions. Students must score a point on the correct basketball net.

Objective: Create a single-file, mobile-responsive HTML/JavaScript game called "CLT Instructor" designed for teacher training.

Core Gameplay:

• Genre: Space Invaders-style vertical shooter.

• Controls (Mobile Optimized): - Smooth "Drag to Move" for ship positioning.

• "Double-tap/Double-click" to fire (this prevents accidental shooting while moving).

• Structure: 10 levels/modules, each representing a core Communicative Language Teaching (CLT) principle.

Pedagogical Requirements:

• Each level must present a theoretical prompt (e.g., "The role of the teacher in CLT").

• Provide 3 floating answer boxes (Invaders). Only one is correct.

• Feedback Loop: Upon hitting an answer, pause the game and display a modal with:

• A success/failure icon.

• A clear explanation of the theory (e.g., citing Hymes, Vygotsky, or Bruner where applicable).

• A "Continue" button to proceed to the next module.

Technical Specifications:

1. Single File: All HTML, CSS (Tailwind CSS for UI), and JavaScript must be in one .html file.

2. Visuals: Use a dark "Space" theme with glowing blue accents. Use a Canvas element for the game engine.

3. Database: Include 10 modules covering:

• Communicative Competence

• Information Gap

• Teacher as Facilitator

• Scaffolding

• TTT vs. STT

• Fluency vs. Accuracy

• Authentic Materials

• Zone of Proximal Development (ZPD)

• Task-Based Learning (TBL)

• Negotiation of Meaning

Instructions for the AI:

"Please generate a fully functional, bug-free version of this game. Ensure the double-tap firing logic is precise and that the UI scales perfectly for iPhones and Android devices."

You are going to generate a game that will help A1, 9 to 10 year-old students practice spelling food words.

The game should be set in a supermarket scenario with a shopping cart on the right and a shopping list with 5 food or drink items. The student must complete the blank spaces to spell the words in the shopping list correctly. If they do it, the image of the item pops up in the shopping cart. If they don't spell it correctly they lose money.

Gemini's response

https://gemini.google.com/share/3fa8e857b527

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

<title>Dungeon B1 English Quest</title>

<style>

:root { --paper: #ecdcb0; --ink: #3e2723; --border: #5d4037; --danger: #b71c1c; }

* { box-sizing: border-box; touch-action: manipulation; }

body {

background: #1a1a1a; color: var(--ink); font-family: 'Palatino', 'Georgia', serif;

margin: 0; height: 100vh; display: flex; justify-content: center; overflow: hidden;

}

#scroll {

background: var(--paper); width: 100%; max-width: 500px;

border: 12px solid var(--border); display: flex; flex-direction: column;

box-shadow: inset 0 0 60px rgba(0,0,0,0.3); margin: 5px; border-radius: 5px;

}

header {

padding: 15px; border-bottom: 2px double var(--border);

display: flex; justify-content: space-between; font-weight: bold; font-size: 1.1rem;

}

#display { flex: 1; overflow-y: auto; padding: 20px; font-size: 1.2rem; }

.log-entry { margin-bottom: 15px; border-left: 3px solid var(--border); padding-left: 10px; animation: slide 0.3s ease; }

@keyframes slide { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: translateX(0); } }

#controls { background: rgba(0,0,0,0.08); padding: 20px; border-top: 2px solid var(--border); }

.d-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 250px; margin: 0 auto; }

button {

background: var(--ink); color: var(--paper); border: none; padding: 18px 5px;

font-size: 0.9rem; font-weight: bold; border-radius: 8px; cursor: pointer; box-shadow: 0 4px 0 #21130d;

}

button:active { transform: translateY(3px); box-shadow: 0 1px 0 #21130d; }

.look-btn { background: var(--border); }

#riddle-box {

position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);

width: 85%; background: var(--paper); border: 5px solid var(--danger);

padding: 20px; text-align: center; box-shadow: 0 0 100px rgba(0,0,0,0.8); z-index: 10;

}

input { width: 100%; padding: 12px; margin: 15px 0; border: 2px solid var(--ink); font-size: 1rem; }

.hidden { display: none; }

</style>

</head>

<body>

<div id="scroll">

<header>

<span>❤️ HP: <span id="hp">100</span></span>

<span>📍 Loc: <span id="loc">0,0</span></span>

</header>

<div id="display">

<div class="log-entry"><b>THE QUEST BEGINS...</b><br>You enter a dusty tomb. The treasure is hidden somewhere in this 5x5 grid. Use the buttons to move.</div>

</div>

<div id="riddle-box" class="hidden">

<div id="riddle-q" style="font-weight:bold; color:var(--danger)"></div>

<input type="text" id="ans" placeholder="Type answer here..." autocomplete="off">

<button onclick="checkAnswer()" style="width:100%">SOLVE RIDDLE</button>

</div>

<div id="controls">

<div class="d-pad">

<div></div><button onclick="move(0,1)">NORTH</button><div></div>

<button onclick="move(-1,0)">WEST</button>

<button class="look-btn" onclick="look()">LOOK</button>

<button onclick="move(1,0)">EAST</button>

<div></div><button onclick="move(0,-1)">SOUTH</button><div></div>

</div>

</div>

</div>

<script>

let hp = 100, x = 0, y = 0, active = false, current = null;

const tx = Math.floor(Math.random()*4)+1, ty = Math.floor(Math.random()*4)+1;

const riddles = [

{ q: "A shadow demands: What is the past tense of 'DRINK'?", a: "drank" },

{ q: "A magic seal: What is the opposite of 'BRIGHT'?", a: "dark" },

{ q: "The wall asks: 'I have hands but cannot clap. What am I?'", a: "clock" },

{ q: "A ghost whispers: What is the synonym of 'QUICK'?", a: "fast" },

{ q: "A trap triggers! What is the plural of 'MOUSE'?", a: "mice" }

];

function log(msg) {

const d = document.getElementById('display');

d.innerHTML += `<div class="log-entry">${msg}</div>`;

d.scrollTop = d.scrollHeight;

}

function move(dx, dy) {

if (active) return;

if (x+dx < 0 || x+dx > 4 || y+dy < 0 || y+dy > 4) {

log("<i>A cold stone wall blocks your path.</i>");

return;

}

x += dx; y += dy;

document.getElementById('loc').innerText = `${x},${y}`;

hp -= 2; updateHP();

if (x === tx && y === ty) {

log("<b style='color:green'>🏆 CLINK! You found the Golden Treasure! You have escaped!</b>");

document.getElementById('controls').style.opacity = '0.3';

document.getElementById('controls').style.pointerEvents = 'none';

return;

}

if (Math.random() < 0.35) {

active = true;

current = riddles[Math.floor(Math.random()*riddles.length)];

document.getElementById('riddle-box').classList.remove('hidden');

document.getElementById('riddle-q').innerText = "CHALLENGE: " + current.q;

} else {

log(`You step ${dx !== 0 ? (dx > 0 ? 'East' : 'West') : (dy > 0 ? 'North' : 'South')}. The room is empty.`);

}

}

function checkAnswer() {

const val = document.getElementById('ans').value.toLowerCase().trim();

if (val.includes(current.a)) {

log("<b>Success!</b> The obstacle disappears.");

active = false;

document.getElementById('ans').value = "";

document.getElementById('riddle-box').classList.add('hidden');

} else {

hp -= 20; updateHP();

log("<span style='color:red'>Wrong!</span> You lose 20 HP.");

}

}

function look() { log(`You are at ${x},${y}. The walls are covered in ancient English inscriptions.`); }

function updateHP() {

document.getElementById('hp').innerText = hp;

if (hp <= 0) {

log("<b style='color:red'>💀 Darkness takes you. GAME OVER.</b>");

document.getElementById('controls').classList.add('hidden');

}

}

</script>

</body>

</html>

The game is now ready. It includes:

​B2 Nuance: It targets specific common errors (like confusing mustn't with can't for deduction).

​Visual Scaffolding: Each scenario uses clear data cues (e.g., "99% probability") to help students choose the correct modal strength.

​Corrective Feedback: Every wrong answer explains why the modal used was incorrect, reinforcing the grammar rule immediately.

Create a game code in the Stardew valley style with 5 tasks. The player, an apprentice, needs to meet the main baker who asks for different ingredientes for a chocolate chip cookies. The player needs to search the store for the ingredient and take it to the main baker to go to next task/ingredient. As they complete the game, it displays what vocabulary they learned and what they cooked after being successful in completing the tasks.

Make it available for Mobile and Desktop using HTML.

Alterations made: Wrong ingredientes should go back to their original place. Background must look like a bakery.

Link: content://media/external_primary/downloads/1000089360

​1. Gameplay Mechanics:

​Objective: "Shoot the Odd One Out".

​Vocabulary: Use two arrays: one for Weather Words (e.g., Rainy, Sunny, Windy) and one for Non-Weather Words (e.g., Car, Pizza, Dog).

​Targets: The enemies are words descending the screen. The player must shoot the Non-Weather words (the odd ones out).

​Scoring: +10 points for shooting a Non-Weather word. -5 points for shooting a Weather word.

​Lives System: The player starts with 10 lives. They lose a life if:

​The ship crashes into any non-weather word.

​A target (Non-Weather word) escapes off the bottom of the screen.

​2. Visuals & Controls:

​Player Ship: Use the Canvas API to draw a ship resembling Star Trek's USS Enterprise.

​Enemies: Words should be enclosed in light-colored rounded rectangles.

​Responsiveness: The game must run on browsers and fit mobile screens vertically.

​Controls:

​Desktop: Arrow keys to move, Spacebar to shoot.

​Mobile: Touch/Drag to move the ship, Tap anywhere to shoot.

​3. Audio:

​Implement a Sound Synthesizer (using the Web Audio API) to generate retro sounds for shooting, explosions, mistakes, and Game Over. Do not use external audio files.

​4. End Game Feature:

​When the game ends, display a "Mission Report" (Answer Key).

​This report must list the specific words the student got wrong, separated into two categories: "Wrongly Shot" (Weather words they shouldn't have hit) and "Missed Targets" (Non-Weather words they let escape).

**Gameplay:** Players navigate a maze to collect words in order to build 'Simple Past' sentences. Include 'Ghosts' (moving 3x slower than player) and 'Safe Zone' tiles that trigger irregular verb quizzes.

**AI Integration (Gemini 2.5 Flash):** 1. **TTS:** Use the TTS model ('Kore' voice) to read sentences; include PCM-to-WAV conversion.

2. **Context:** Generate a 1-sentence story scenario for each level's sentence.

3. **Hints:** Provide 5-word grammar tips on request.

**Technical:** Responsive canvas with safety checks (no negative radius), mobile D-pad controls, dark theme UI, and a placeholder `const apiKey = "";` with exponential backoff for API calls.

You are an expert game designer for education

You are going to generate a game that will help A1, 9 to 10 year-old students practice spelling food words.

The game should be set in a supermarket scenario with a shopping cart on the right and a shopping list with 5 food or drink items. The student must complete the blank spaces to spell the words in the shopping list correctly. If they do it, the image of the item pops up in the shopping cart. If they don't spell it correctly they lose money.

Gemini's response:

Hello! I am your **ESL Game Architect**. It is a pleasure to design this interactive experience for your 9 to 10-year-old learners.

At the **A1 level**, we focus on **Scaffolding** and **Comprehensible Input**. For this "Supermarket Speller" challenge, we are utilizing **Orthographic Mapping** to help students connect the sounds of food items with their written forms, using the shopping cart as a visual reward (Positive Reinforcement).

I have integrated a "Recast" system: if a student misspells a word, the game doesn't just penalize them; it shows the correct spelling briefly to allow for cognitive adjustment before they try again.

I am now generating your **Supermarket Spelling Challenge**.

### Pedagogical Reflection

* **Comprehensible Input:** The game uses widely recognized food emojis alongside partial word structures to create immediate context.

* **Scaffolding:** By providing the first and sometimes middle letters of words, we reduce the "cognitive load" for A1 students, allowing them to focus specifically on the vowel/consonant patterns (like the double 'P' in Apple or 'EA' in Bread).

* **Immediate Feedback:** The movement of items into the cart provides a visual reward that reinforces the connection between the written word and the object.

**How to use:**

1. Students read the partial word on the list.

2. They fill in the blanks.

3. Click "BUY". Correct answers add the item to the cart; mistakes cost money.

You can save the game using the **"SAVE GAME FILE"** button at the bottom of the interface!

Students read the partial word on the list.

They fill in the blanks.

Click "BUY". Correct answers add the item to the cart; mistakes cost money.

You can save the game using the "SAVE GAME FILE" button at the bottom of the interface!

Pedagogical Reflection

Comprehensible Input: The game uses widely recognized food emojis alongside partial word structures to create immediate context.

Scaffolding: By providing the first and sometimes middle letters of words, we reduce the "cognitive load" for A1 students, allowing them to focus specifically on the vowel/consonant patterns (like the double 'P' in Apple or 'EA' in Bread).

Immediate Feedback: The movement of items into the cart provides a visual reward that reinforces the connection between the written word and the object.

Prompt:

You are an expert game designer for education

You are going to generate a game that will help A1, 9 to 10 year-old students practice spelling food words.

The game should be set in a supermarket scenario with a shopping cart on the right and a shopping list with 5 food or drink items. The student must complete the blank spaces to spell the words in the shopping list correctly. If they do it, the image of the item pops up in the shopping cart. If they don't spell it correctly they lose money.

Gemini's response:

Gem personalizado

Hello! I am your ESL Game Architect. It is a pleasure to design this interactive experience for your 9 to 10-year-old learners.

At the A1 level, we focus on Scaffolding and Comprehensible Input. For this "Supermarket Speller" challenge, we are utilizing Orthographic Mapping to help students connect the sounds of food items with their written forms, using the shopping cart as a visual reward (Positive Reinforcement).

I have integrated a "Recast" system: if a student misspells a word, the game doesn't just penalize them; it shows the correct spelling briefly to allow for cognitive adjustment before they try again.

I am now generating your Supermarket Spelling Challenge.