4.3 KiB
4.3 KiB
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:
- La cireșe — Nică a cules 36 de cireșe. Câte a mâncat și câte i-au rămas?
- La pupăză — Nică vede pupeze și capre. 20 animale, 56 picioare. Câte sunt din fiecare?
- 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?
- La școală — 24 exerciții de matematică și citire. Cele de matematică sunt de 2 ori mai multe. Câte de fiecare?
- În curte — Pupeze și capre. 22 animale, 56 picioare. Câte din fiecare?
- 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ă:
- Despre pozițiile markerelor — arată-mi coordonatele propuse (top%, left%) și confirmă cu mine dacă se potrivesc peste cifrele din imagine
- Despre formularea problemelor — propune textul pentru fiecare problemă și variantele A/B/C/D și lasă-mă să le ajustez
- Despre designul modalului — descrie-mi cum va arăta și întreabă dacă vreau altceva
- 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)