diff --git a/.gitignore b/.gitignore index 6f7a6bd..d48fd64 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,3 @@ .playwright-mcp/ +.gstack/ +test_*.png diff --git a/10_provocarea_bonus_felicitari.png b/10_provocarea_bonus_felicitari.png new file mode 100644 index 0000000..22fc2a9 Binary files /dev/null and b/10_provocarea_bonus_felicitari.png differ diff --git a/1_Start.png b/1_Start.png new file mode 100644 index 0000000..8ef16e4 Binary files /dev/null and b/1_Start.png differ diff --git a/2_escape-room.png b/2_escape-room.png new file mode 100644 index 0000000..48864d0 Binary files /dev/null and b/2_escape-room.png differ diff --git a/3_felicitari.png b/3_felicitari.png new file mode 100644 index 0000000..be85dc5 Binary files /dev/null and b/3_felicitari.png differ diff --git a/background.jpg b/background.jpg deleted file mode 100644 index 22f9342..0000000 Binary files a/background.jpg and /dev/null differ diff --git a/escape_room.html b/escape_room.html index 91f96a1..94416ff 100644 --- a/escape_room.html +++ b/escape_room.html @@ -11,85 +11,104 @@ const PROBLEMS = [ { id: 1, - title: "La cireșe", - text: "Nică a cules 36 de cireșe. Cele mâncate sunt de două ori mai multe decât cele rămase. Câte a mâncat și câte i-au rămas?", - hint: "Fie x = cireșe mâncate, y = cireșe rămase.\nx + y = 36\nx = 2y", - options: [ - { label: "A", text: "x = 24, y = 12", correct: true }, - { label: "B", text: "x = 18, y = 18", correct: false }, - { label: "C", text: "x = 20, y = 16", correct: false }, - { label: "D", text: "x = 30, y = 6", correct: false } - ], + title: '"Potrivelile" lui Nică', + text: '
„Iară eu, mirându-mă de dibăcia minciunilor pe care le potriveam, mai-mai că-mi venea să le cred singur pe jumătate."
Dacă lui Nică îi venea să creadă jumătate dintre minciunile pe care le spusese, și lui Nică îi venea să creadă 5 minciuni, câte spusese în total?', + inputType: "single", + inputs: [{ label: "Răspuns:", answer: "10" }], + cherries: 1, + letter: "T", + isBonus: false, + hint: "Fie x = numărul total de minciuni.\nx / 2 = 5\nx = ?", marker: { top: "18%", left: "16%" } }, { id: 2, - title: "La pupăză", - text: "Nică vede pupeze și capre. Sunt 20 de animale și 56 de picioare în total. Câte pupeze și câte capre sunt?", - hint: "Fie p = pupeze, c = capre.\np + c = 20\n2p + 4c = 56", - options: [ - { label: "A", text: "p = 12, c = 8", correct: true }, - { label: "B", text: "p = 14, c = 6", correct: false }, - { label: "C", text: "p = 10, c = 10", correct: false }, - { label: "D", text: "p = 16, c = 4", correct: false } + title: "Cireșele lui Nică", + text: 'Nică și vărul său au împreună 20 de cireșe. Nică are cu 4 cireșe mai mult decât vărul său. Câte cireșe are fiecare?', + inputType: "multi", + inputs: [ + { label: "Nică:", answer: "12", suffix: "cireșe" }, + { label: "Vărul:", answer: "8", suffix: "cireșe" } ], + cherries: 1, + letter: "S", + isBonus: false, + hint: "Fie n = cireșele lui Nică, v = cireșele vărului.\nn + v = 20\nn = v + 4", marker: { top: "46%", left: "12%" } }, { id: 3, - title: "La scăldat", - text: "Băieții din Humulești sunt cu 6 mai mulți decât cei din satul vecin. În total sunt 22. Câți băieți sunt din fiecare sat?", - hint: "Fie h = băieți Humulești, s = băieți sat vecin.\nh − s = 6\nh + s = 22", - options: [ - { label: "A", text: "h = 14, s = 8", correct: true }, - { label: "B", text: "h = 16, s = 6", correct: false }, - { label: "C", text: "h = 12, s = 10", correct: false }, - { label: "D", text: "h = 11, s = 11", correct: false } + title: "Tema la matematică", + text: 'La școală, Nică are de făcut exerciții de matematică și de citire. Exercițiile de matematică sunt de două ori mai multe decât cele de citire. În total sunt 24 exerciții.', + inputType: "trueFalseAndInput", + steps: [ + { question: "Este posibil să aibă 12 exerciții de matematică?", type: "trueFalse", answer: "FALS" }, + { question: "Câte exerciții are de făcut Nică la tema la matematică?", type: "input", inputs: [{ label: "Răspuns:", answer: "16" }] } ], + cherries: 1, + letter: "I", + isBonus: false, + hint: "Fie m = exerciții matematică, c = exerciții citire.\nm = 2c\nm + c = 24", marker: { top: "22%", left: "72%" } }, { id: 4, - title: "La școală", - text: "Nică are 24 de exerciții de matematică și citire. Cele de matematică sunt de 2 ori mai multe decât cele de citire. Câte exerciții sunt de fiecare fel?", - hint: "Fie m = exerciții mate, c = exerciții citire.\nm = 2c\nm + c = 24", - options: [ - { label: "A", text: "m = 16, c = 8", correct: true }, - { label: "B", text: "m = 12, c = 12", correct: false }, - { label: "C", text: "m = 18, c = 6", correct: false }, - { label: "D", text: "m = 14, c = 10", correct: false } + title: "Pupeze și capre", + text: 'În satul lui Nică sunt în total 23 de animale: pupeze și capre râioase. Dacă sunt 82 de picioare, câte animale sunt din fiecare fel?', + inputType: "multi", + inputs: [ + { label: "Pupeze:", answer: "5" }, + { label: "Capre:", answer: "18" } ], + cherries: 2, + letter: "Ț", + isBonus: false, + hint: "Fie p = pupeze, c = capre.\np + c = 23\n2p + 4c = 82", marker: { top: "72%", left: "24%" } }, { id: 5, - title: "În curte", - text: "Nică vede pupeze și capre în curte. Sunt 22 de animale și 56 de picioare. Câte sunt din fiecare?", - hint: "Fie p = pupeze, c = capre.\np + c = 22\n2p + 4c = 56", - options: [ - { label: "A", text: "p = 16, c = 6", correct: true }, - { label: "B", text: "p = 12, c = 10", correct: false }, - { label: "C", text: "p = 14, c = 8", correct: false }, - { label: "D", text: "p = 18, c = 4", correct: false } + title: "Vârstele Smarandei și ale lui Nică", + text: 'Smaranda are de zece ori vârsta lui Nică, iar peste 6 ani va avea de patru ori mai mult decât fiul ei. Ce vârstă au cei doi în prezent?', + inputType: "multi", + inputs: [ + { label: "Smaranda:", answer: "30", suffix: "ani" }, + { label: "Nică:", answer: "3", suffix: "ani" } ], + cherries: 2, + letter: "E", + isBonus: false, + hint: "Fie s = vârsta Smarandei, n = vârsta lui Nică.\ns = 10n\ns + 6 = 4(n + 6)", marker: { top: "58%", left: "60%" } }, { id: 6, - title: "La târg", - text: "Nică merge la târg cu 30 de fructe: mere și nuci. Merele sunt cu 6 mai multe decât nucile. Câte mere și câte nuci are?", - hint: "Fie m = mere, n = nuci.\nm − n = 6\nm + n = 30", - options: [ - { label: "A", text: "m = 18, n = 12", correct: true }, - { label: "B", text: "m = 20, n = 10", correct: false }, - { label: "C", text: "m = 15, n = 15", correct: false }, - { label: "D", text: "m = 22, n = 8", correct: false } + title: "Școala de la biserică", + text: 'La școala de la biserica din sat, dacă se așează câte 6 copii într-o bancă, rămân 2 copii în picioare, iar dacă se așează câte 4, rămân 2 bănci libere.', + inputType: "yesNoAndMulti", + steps: [ + { question: "Numărul copiilor poate fi egal cu 50?", type: "yesNo", answer: "NU" }, + { question: "Câți copii și câte bănci sunt?", type: "multi", inputs: [ + { label: "Copii:", answer: "56" }, + { label: "Bănci:", answer: "9" } + ]} ], + cherries: 0, + letter: null, + isBonus: true, + hint: "Fie c = copii, b = bănci.\nc = 6b + 2\nc = 4(b - 2) + 4·4\nSimplificați a doua ecuație.", marker: { top: "50%", left: "88%" } } ]; const TOTAL_HEARTS = 10; +const TOTAL_CHERRIES = 7; +const SECRET_WORD = "ISTEȚ"; + +const IMG_START = "1_Start.png"; +const IMG_MAP = "2_escape-room.png"; +const IMG_FELICITARI = "3_felicitari.png"; +const IMG_BONUS_FELICITARI = "10_provocarea_bonus_felicitari.png"; -
+ + +
Se încarcă...
+ + @@ -643,10 +657,10 @@ html, body {
-
+
-
✓ Bravo!
-
Mai gândiți-vă!
+
+
@@ -668,19 +682,26 @@ html, body { - -
-
-
Felicitări!
-
-
-
Ați descoperit toate secretele
drumului lui Nică prin Humulești!
-
- - + +
+
+
Introdu cuvântul secret
+
Folosește literele colectate în ordinea corectă
+
+
+
+ +
+ + +
+ + +
+ - \ No newline at end of file + diff --git a/spec.md b/spec.md deleted file mode 100644 index 0bbef5f..0000000 --- a/spec.md +++ /dev/null @@ -1,77 +0,0 @@ -## Context - -Sunt profesor de matematică, clasa a 7-a. Am o lecție deschisă cu inspecție și vreau un **Escape Room Matematic** interactiv, afișat pe proiector, bazat pe tema "Drumul lui Nică prin Humulești" (Ion Creangă). - -## Imaginea de fundal - -Am o imagine ilustrată (`background.jpg` — se află în directorul curent) care reprezintă o hartă a Humulestilor cu 6 provocări/stații numerotate: - -1. **La cireșe** — Nică a cules 36 de cireșe. Câte a mâncat și câte i-au rămas? -2. **La pupăză** — Nică vede pupeze și capre. 20 animale, 56 picioare. Câte sunt din fiecare? -3. **La scăldat** — Băieții din Humulești sunt cu 6 mai mulți decât cei din satul vecin. Total 22. Câți din fiecare sat? -4. **La școală** — 24 exerciții de matematică și citire. Cele de matematică sunt de 2 ori mai multe. Câte de fiecare? -5. **În curte** — Pupeze și capre. 22 animale, 56 picioare. Câte din fiecare? -6. **La târg** — 30 fructe: mere și nuci. Merele sunt cu 6 mai multe decât nucile. Câte din fiecare? - - -## Ce vreau - -Un singur fișier `escape_room.html` (imaginea de fundal encodată base64 inline) care: - -### Funcționalitate -- Ecran de start → este chiar imaginea de background, cu un mesaj: "click pentru a începe" -- Imaginea e fundalul full-screen (100vw × 100vh, cover) -- VREAU sa nu se vada initial provocarile deja scrise, ci sa fie acoperite initial, si sa se descopere pe masura ce se raspunde corect. -- Markerele trebuie să fie zone clickabile invizibile/subtile poziționate PESTE cifrele roșii existente din imagine -- La click pe o zonă → se deschide un modal/popup cu: - - Titlul provocării - - Textul problemei (CONCIS — nu verbose, exact textul din problema.) - - Buton "💡 Indiciu" care la click arată ecuația/sistemul de ecuații sau un ajutor pentru descoperire - - 4 variante de răspuns (A, B, C, D) — scurte, cu notație matematică (ex: `m = 24, r = 12`) scrise clar, in stilul kahoot -- La răspuns corect → feedback scurt "Bravo!" → se închide automat → markerul devine verde cu ✓ si problema ramane vizibila -- La răspuns greșit → feedback "Mai gândiți-vă!" → se poate încerca din nou -- Sa aiba si un sistem de vieti - 5 inimioare - cate una pentru fiecare raspuns gresit sau pentru hint folosit -- Bara de progres + steluțe (6 steluțe, una per provocare) -- La final (toate 6 rezolvate) → ecran de victorie cu confetti -- ESC închide modalul - -### Design -- Trebuie să arate PROFESIONAL pe proiector (1920×1080 sau 1366×768) -- Imaginea de fundal trebuie să rămână curată, neacoperită de elemente inutile -- Modalul: stil pergament/carte veche, fonturi frumoase (Playfair Display + Nunito sau similar) -- Animații subtile, nu distrag — sparks la rezolvare, confetti la final -- Responsiv dar optimizat pentru landscape/proiector - -### Ton -- E pentru copii de clasa a 7-a, trebuie să fie cald, prietenos -- Nu excesiv de colorat sau agitat — e lecție cu inspecție, trebuie echilibru între fun și profesionalism - -## Proces de lucru - -**IMPORTANT**: Înainte de a scrie cod, întreabă-mă: - -1. **Despre pozițiile markerelor** — arată-mi coordonatele propuse (top%, left%) și confirmă cu mine dacă se potrivesc peste cifrele din imagine -2. **Despre formularea problemelor** — propune textul pentru fiecare problemă și variantele A/B/C/D și lasă-mă să le ajustez -3. **Despre designul modalului** — descrie-mi cum va arăta și întreabă dacă vreau altceva -4. **Despre orice decizie creativă** — nu presupune, întreabă - -După ce avem totul confirmat, scrie codul. După prima versiune, deschide fișierul și arată-mi screenshot, apoi întreabă ce trebuie ajustat. - -## Structura fișierelor - -``` -proiect/ -├── background.jpg # imaginea originală (deja existentă) -└── escape_room.html # output-ul final (un singur fișier, base64 inline) -``` - -## Verificări finale - -Înainte de a considera proiectul gata: -- [ ] Deschide fișierul în browser și verifică vizual -- [ ] Testează fiecare provocare (click, răspuns corect, răspuns greșit) -- [ ] Verifică ecranul de victorie -- [ ] Confirmă că nu sunt elemente vizuale care acoperă textul din imagine -- [ ] Confirmă că markerele sunt poziționate corect -- [ ] Testează ESC pentru închidere modal -- [ ] Verifică că fișierul funcționează standalone (fără dependențe externe în afară de Google Fonts) \ No newline at end of file