Ez a gyakorlat egy egyszerű, mégis látványos HTML és JavaScript alapú projekt, amelyben egy interaktív felületen keresztül próbálhatod ki, hogyan lehet dinamikusan generált tartalmat kezelni a böngészőben. A feladat során JavaScript segítségével módosítjuk a szöveget, kezeljük a felhasználói inputot, valamint valós időben visszajelzést adunk.
A cél, hogy gyakorold az alapvető frontend technikákat: DOM-kezelést, eseménykezelést, valamint a logikai feldolgozást. Emellett betekintést kapsz abba is, hogyan lehet egy egyszerű ötletből interaktív, felhasználóbarát alkalmazást készíteni.
Mi történik ilyenkor?
Az agyad nem betűről betűre olvas.
Inkább mintákat és jelentéseket ismer fel.
Amikor meglát egy szót:
- nem az összes betűt elemzi
- hanem a forma + kontextus + tapasztalat alapján „kitalálja”
Példa (próbáld ki!)
El tudod olvasni ezt?
„Az aagyd nm mtiedn bteűt ovlas el, mgéis értd.”
Meglepő módon: igen.
Mert az agyad:
- felismeri a szó hosszát
- az első és utolsó betűket
- a mondat értelmét
És már kész is az „értelmes” változat.
Miért hasznos ez?
Ez a képesség valójában egy evolúciós gyorsító funkció:
- Gyorsabb olvasás
- Kevesebb energia felhasználás
- Hatékonyabb döntéshozás
Az agyad mindig optimalizál.
De van egy „mellékhatás”…
Ez a rendszer néha hibázik:
- elnézel hibákat (pl. elgépelés)
- félreértesz mondatokat
- becsapnak optikai illúziók
Magyarul: az agyad nem a valóságot látja, hanem amit vár.
Hol használják ezt ki?
- 📢 reklámok (figyelem manipulálás)
- 📰 címek és clickbait
- 🧪 pszichológiai kísérletek
- 🎨 design és UX
Kód
<!DOCTYPE html> <html lang="hu"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Agy teszt - hiányzó betűk</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> <style> body { background:#0f172a; color:#e2e8f0; } .card { background:#1e293b; border:none; border-radius:20px; } .btn-custom { border-radius:30px; } .highlight { color:#38bdf8; font-weight:bold; } #result { font-size:1.2rem; } </style> </head> <body> <div class="container py-5"> <div class="text-center mb-5"> <h1 class="fw-bold">🧠 Az agyad kiegészíti a hiányzó betűket</h1> <p>Próbáld ki! Írd be mit látsz 👇</p> </div> <div class="card p-4 shadow-lg"> <div class="mb-3 text-center"> <h3 id="scrambledText" class="highlight"></h3> </div> <div class="mb-3"> <input type="text" id="userInput" class="form-control form-control-lg" placeholder="Mit olvastál ki?"> </div> <div class="d-grid gap-2"> <button class="btn btn-primary btn-custom" onclick="checkAnswer()">Ellenőrzés</button> <button class="btn btn-secondary btn-custom" onclick="generateNew()">Új példa</button> <button class="btn btn-success btn-custom" onclick="downloadPage()">Letöltés HTML-ként</button> </div> <div id="result" class="mt-4 text-center"></div> </div> </div> <script> const sentences = [ "Az agyad nem minden betűt olvas el mégis érted", "A valóságot az agyad értelmezi nem csak látod", "Gyorsabban olvasol ha nem minden betű pontos", "Az agy minták alapján dolgozik nem betűkkel", "Sokszor azt látod amit vársz nem amit tényleg van", "Az agyad előre kitalálja mit fogsz olvasni", "Egy hibás szó is érthető ha a környezet segít", "Az információkat az agyad automatikusan javítja", "Nem a szemed hanem az agyad olvas igazából", "A mondat értelme segít felismerni a hibás szavakat", "Az agy gyorsabb mint hinnéd ezért csal néha", "A tapasztalat alapján egészíted ki a hiányzó részeket" ]; function scrambleWord(word) { if (word.length <= 3) return word; let middle = word.slice(1, -1).split(''); for (let i = middle.length - 1; i > 0; i--) { let j = Math.floor(Math.random() * (i + 1)); [middle[i], middle[j]] = [middle[j], middle[i]]; } return word[0] + middle.join('') + word[word.length - 1]; } function scrambleSentence(sentence) { return sentence.split(' ').map(scrambleWord).join(' '); } let currentSentence = ""; function generateNew() { const random = sentences[Math.floor(Math.random() * sentences.length)]; currentSentence = random; document.getElementById('scrambledText').innerText = scrambleSentence(random); document.getElementById('result').innerHTML = ""; document.getElementById('userInput').value = ""; } function checkAnswer() { const input = document.getElementById('userInput').value.toLowerCase(); const original = currentSentence.toLowerCase(); if (input === original) { document.getElementById('result').innerHTML = "<span class='text-success'>✔️ Tökéletes! Az agyad jól dolgozik 😄</span>"; } else { document.getElementById('result').innerHTML = "<span class='text-warning'>Nem teljesen pontos... de mégis értetted, igaz? 😉</span><br><br><span class='text-info'>Eredeti: " + currentSentence + "</span>"; } } function downloadPage() { const element = document.documentElement.outerHTML; const blob = new Blob([element], { type: 'text/html' }); const a = document.createElement('a'); a.href = URL.createObjectURL(blob); a.download = 'agy-teszt.html'; a.click(); } generateNew(); </script> </body> </html>