\u03a4\u03bf \u03a0\u03b1\u03b9\u03c7\u03bd\u03af\u03b4\u03b9 \u03c4\u03bf\u03c5 \u0392\u03b1\u03c4\u03c1\u03ac\u03c7\u03bf\u03c5 – \u039c\u03b1\u03b8\u03b7\u03bc\u03b1\u03c4\u03b9\u03ba\u03ac<\/title>\n\n<script src=\"https:\/\/cdn.tailwindcss.com?plugins=forms,container-queries\"><\/script>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Comfortaa:wght@800;10000&display=swap\" rel=\"stylesheet\"\/>\n\n<style data-purpose=\"typography\">\n body {\n font-family: 'Comfortaa', cursive;\n overflow-x: hidden;\n }\n .game-text-shadow {\n text-shadow: 2px 2px 0px rgba(0,0,0,0.1);\n }\n <\/style>\n<style data-purpose=\"animations\">\n @keyframes float {\n 0% { transform: translateY(0px); }\n 50% { transform: translateY(-10px); }\n 100% { transform: translateY(0px); }\n }\n .animate-float {\n animation: float 3s ease-in-out infinite;\n }\n .frog-transition {\n transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n }\n .shake {\n animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;\n }\n @keyframes shake {\n 10%, 90% { transform: translate3d(-1px, 0, 0); }\n 20%, 80% { transform: translate3d(2px, 0, 0); }\n 30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }\n 40%, 60% { transform: translate3d(4px, 0, 0); }\n }\n <\/style>\n<style data-purpose=\"layout\">\n .lake-bg {\n background: linear-gradient(180deg, #a5f3fc 0%, #38bdf8 100%);\n min-height: 100vh;\n position: relative;\n }\n .lily-pad {\n width: 60px;\n height: 40px;\n background: #22c55e;\n border-radius: 50%;\n position: relative;\n box-shadow: 0 4px 0 #166534;\n }\n .lily-pad::after {\n content: '';\n position: absolute;\n top: 50%;\n left: 0;\n width: 15px;\n height: 10px;\n background: #38bdf8;\n clip-path: polygon(0 0, 100% 50%, 0 100%);\n transform: translateY(-50%);\n }\n <\/style>\n<script data-purpose=\"tailwind-config\">\n tailwind.config = {\n theme: {\n extend: {\n colors: {\n pond: {\n light: '#7dd3fc',\n dark: '#0284c7',\n },\n frog: '#4ade80',\n }\n }\n }\n }\n <\/script>\n<script>\n const audioCtx = new (window.AudioContext || window.webkitAudioContext)();\n let soundEnabled = true;\n\n function playTone(freq, type, duration, volume = 0.1) {\n if (!soundEnabled) return;\n if (audioCtx.state === 'suspended') audioCtx.resume();\n const osc = audioCtx.createOscillator();\n const gain = audioCtx.createGain();\n osc.type = type;\n osc.frequency.setValueAtTime(freq, audioCtx.currentTime);\n gain.gain.setValueAtTime(volume, audioCtx.currentTime);\n gain.gain.exponentialRampToValueAtTime(0.01, audioCtx.currentTime + duration);\n osc.connect(gain);\n gain.connect(audioCtx.destination);\n osc.start();\n osc.stop(audioCtx.currentTime + duration);\n }\n\n function playSuccessSound() {\n playTone(523.25, 'sine', 0.2); \/\/ C5\n setTimeout(() => playTone(659.25, 'sine', 0.3), 100); \/\/ E5\n }\n\n function playErrorSound() {\n playTone(150, 'sawtooth', 0.4, 0.05);\n }\n\n function playVictorySound() {\n const notes = [523.25, 659.25, 783.99, 1046.50]; \/\/ C5, E5, G5, C6\n notes.forEach((note, i) => {\n setTimeout(() => playTone(note, 'triangle', 0.5), i * 150);\n });\n }\n\n function toggleSound() {\n soundEnabled = !soundEnabled;\n document.getElementById('sound-toggle').innerText = soundEnabled ? '\ud83d\udd0a' : '\ud83d\udd07';\n }\n <\/script><\/head>\n<body class=\"lake-bg flex flex-col items-center justify-center p-4\"><button class=\"fixed top-4 right-4 z-50 bg-white\/80 p-3 rounded-full shadow-lg text-2xl hover:scale-110 transition-transform\" id=\"sound-toggle\" onclick=\"toggleSound()\">\ud83d\udd0a<\/button>\n\n<div class=\"max-w-2xl w-full bg-white\/90 backdrop-blur rounded-3xl p-8 shadow-2xl border-4 border-white text-center\" data-purpose=\"menu-container\" id=\"main-menu\">\n<h1 class=\"text-4xl font-bold text-blue-600 mb-8 game-text-shadow\">\ud83d\udc38 \u03a4\u03bf \u03a0\u03b1\u03b9\u03c7\u03bd\u03af\u03b4\u03b9 \u03c4\u03bf\u03c5 \u0392\u03b1\u03c4\u03c1\u03ac\u03c7\u03bf\u03c5<\/h1>\n<p class=\"text-xl text-gray-700 mb-6\">\u0394\u03b9\u03ac\u03bb\u03b5\u03be\u03b5 \u03c0\u03c1\u03ac\u03be\u03b7 \u03b3\u03b9\u03b1 \u03bd\u03b1 \u03be\u03b5\u03ba\u03b9\u03bd\u03ae\u03c3\u03b5\u03b9\u03c2!<\/p>\n<div class=\"grid grid-cols-1 sm:grid-cols-2 gap-4 mb-8\">\n<button class=\"bg-green-500 hover:bg-green-600 text-white font-bold py-4 px-6 rounded-2xl shadow-lg transition transform hover:scale-105\" onclick=\"selectOperation('addition')\">\u03a0\u03c1\u03cc\u03c3\u03b8\u03b5\u03c3\u03b7 (+)<\/button>\n<button class=\"bg-blue-500 hover:bg-blue-600 text-white font-bold py-4 px-6 rounded-2xl shadow-lg transition transform hover:scale-105\" onclick=\"selectOperation('subtraction')\">\u0391\u03c6\u03b1\u03af\u03c1\u03b5\u03c3\u03b7 (-)<\/button>\n<button class=\"bg-yellow-500 hover:bg-yellow-600 text-white font-bold py-4 px-6 rounded-2xl shadow-lg transition transform hover:scale-105\" onclick=\"selectOperation('multiplication')\">\u03a0\u03bf\u03bb\u03bb\u03b1\u03c0\u03bb\u03b1\u03c3\u03b9\u03b1\u03c3\u03bc\u03cc\u03c2 (\u00d7)<\/button>\n<button class=\"bg-purple-500 hover:bg-purple-600 text-white font-bold py-4 px-6 rounded-2xl shadow-lg transition transform hover:scale-105\" onclick=\"selectOperation('division')\">\u0394\u03b9\u03b1\u03af\u03c1\u03b5\u03c3\u03b7 (\u00f7)<\/button>\n<button class=\"bg-orange-500 hover:bg-orange-600 text-white font-bold py-4 px-6 rounded-2xl shadow-lg transition transform hover:scale-105 col-span-full\" onclick=\"selectOperation('mixed')\">\u039c\u03b9\u03ba\u03c4\u03ac (+ – \u00d7 \u00f7)<\/button>\n<\/div>\n<\/div>\n\n\n<div class=\"hidden max-w-2xl w-full bg-white\/90 backdrop-blur rounded-3xl p-8 shadow-2xl border-4 border-white text-center\" data-purpose=\"difficulty-container\" id=\"difficulty-menu\">\n<h2 class=\"text-3xl font-bold text-blue-600 mb-8\">\u0395\u03c0\u03af\u03c0\u03b5\u03b4\u03bf \u0394\u03c5\u03c3\u03ba\u03bf\u03bb\u03af\u03b1\u03c2<\/h2>\n<div class=\"flex flex-col gap-4\">\n<button class=\"bg-emerald-400 hover:bg-emerald-500 text-white font-bold py-4 px-6 rounded-2xl shadow-lg transition transform hover:scale-105\" onclick=\"startGame('easy')\">\u0395\u03cd\u03ba\u03bf\u03bb\u03bf<\/button>\n<button class=\"bg-amber-400 hover:bg-amber-500 text-white font-bold py-4 px-6 rounded-2xl shadow-lg transition transform hover:scale-105\" onclick=\"startGame('medium')\">\u039c\u03ad\u03c4\u03c1\u03b9\u03bf<\/button>\n<button class=\"bg-rose-400 hover:bg-rose-500 text-white font-bold py-4 px-6 rounded-2xl shadow-lg transition transform hover:scale-105\" onclick=\"startGame('hard')\">\u0394\u03cd\u03c3\u03ba\u03bf\u03bb\u03bf<\/button>\n<\/div>\n<button class=\"mt-8 text-blue-500 font-bold hover:underline\" onclick=\"backToMenu()\">\u2190 \u03a0\u03af\u03c3\u03c9 \u03c3\u03c4\u03bf \u039c\u03b5\u03bd\u03bf\u03cd<\/button>\n<\/div>\n\n\n<div class=\"hidden w-full max-w-5xl flex flex-col items-center\" data-purpose=\"gameplay-container\" id=\"gameplay-screen\">\n\n<div class=\"w-full flex justify-between items-center mb-8 px-4\">\n<div class=\"bg-white\/80 p-3 rounded-full shadow-md flex items-center gap-2\">\n<span class=\"text-2xl\">\u2b50<\/span>\n<span class=\"font-bold text-xl text-blue-600\" id=\"score-display\">0<\/span>\n<\/div>\n<div class=\"bg-white\/80 p-3 rounded-full shadow-md flex items-center gap-2\">\n<span class=\"text-2xl\">\ud83d\udd25<\/span>\n<span class=\"font-bold text-xl text-orange-500\" id=\"streak-display\">0<\/span>\n<\/div>\n<\/div>\n\n<div class=\"w-full h-32 relative mb-12 flex items-center justify-between px-4 bg-blue-400\/20 rounded-full\" id=\"lake-container\">\n\n<div class=\"w-full flex justify-between absolute px-10\" id=\"pond-path\">\n\n<\/div>\n\n<div class=\"frog-transition absolute text-4xl z-10 animate-float\" id=\"frog-sprite\" style=\"left: 40px;\">\ud83d\udc38<\/div>\n<\/div>\n\n<div class=\"bg-white rounded-3xl p-8 shadow-xl mb-8 relative border-4 border-blue-100 min-w-[300px] text-center\">\n<div class=\"absolute -bottom-4 left-1\/2 -translate-x-1\/2 w-8 h-8 bg-white rotate-45 border-b-4 border-r-4 border-blue-100\"><\/div>\n<div class=\"text-5xl font-bold text-gray-800\" id=\"question-text\">5 + 5 = ?<\/div>\n<\/div>\n\n<div class=\"grid grid-cols-2 sm:grid-cols-4 gap-4 w-full max-w-2xl px-4\" id=\"answer-grid\">\n\n<\/div>\n<\/div>\n\n\n<div class=\"hidden fixed inset-0 bg-blue-500\/90 backdrop-blur flex items-center justify-center z-50 p-6\" id=\"victory-screen\">\n<div class=\"bg-white rounded-[3rem] p-12 shadow-2xl text-center max-w-lg w-full border-8 border-yellow-400\">\n<div class=\"text-8xl mb-6\">\ud83c\udfc6<\/div>\n<h2 class=\"text-4xl font-bold text-blue-600 mb-4\">\u039d\u0399\u039a\u0397!<\/h2>\n<p class=\"text-xl text-gray-600 mb-8\">\u039f \u03b2\u03ac\u03c4\u03c1\u03b1\u03c7\u03bf\u03c2 \u03ad\u03c6\u03c4\u03b1\u03c3\u03b5 \u03c3\u03c4\u03b7\u03bd \u03ac\u03bb\u03bb\u03b7 \u03c0\u03bb\u03b5\u03c5\u03c1\u03ac!<\/p>\n<div class=\"flex justify-around mb-8\">\n<div>\n<p class=\"text-sm text-gray-400 uppercase tracking-widest\">\u03a3\u03ba\u03bf\u03c1<\/p>\n<p class=\"text-3xl font-bold text-blue-500\" id=\"final-score\">0<\/p>\n<\/div>\n<div>\n<p class=\"text-sm text-gray-400 uppercase tracking-widest\">\u03a3\u03b5\u03c1\u03af<\/p>\n<p class=\"text-3xl font-bold text-orange-500\" id=\"final-streak\">0<\/p>\n<\/div>\n<\/div>\n<button class=\"bg-green-500 hover:bg-green-600 text-white text-2xl font-bold py-6 px-12 rounded-3xl shadow-xl transition transform hover:scale-110 w-full\" onclick=\"location.reload()\">\u03a0\u03b1\u03af\u03be\u03b5 \u039e\u03b1\u03bd\u03ac!<\/button>\n<\/div>\n<\/div>\n\n\n<script data-purpose=\"game-logic\">\n const state = {\n operation: null,\n difficulty: null,\n currentStep: 0,\n totalSteps: 10,\n currentQuestion: null,\n score: 0,\n streak: 0,\n questionsAnswered: 0\n };\n\n const screens = {\n menu: document.getElementById('main-menu'),\n difficulty: document.getElementById('difficulty-menu'),\n gameplay: document.getElementById('gameplay-screen'),\n victory: document.getElementById('victory-screen')\n };\n\n function selectOperation(op) {\n state.operation = op;\n screens.menu.classList.add('hidden');\n screens.difficulty.classList.remove('hidden');\n }\n\n function backToMenu() {\n screens.difficulty.classList.add('hidden');\n screens.menu.classList.remove('hidden');\n }\n\n function startGame(diff) {\n state.difficulty = diff;\n screens.difficulty.classList.add('hidden');\n screens.gameplay.classList.remove('hidden');\n setupPond();\n generateQuestion();\n }\n\n function setupPond() {\n const pondPath = document.getElementById('pond-path');\n pondPath.innerHTML = '';\n for (let i = 0; i <= state.totalSteps; i++) {\n const pad = document.createElement('div');\n pad.className = 'lily-pad';\n pad.id = `pad-${i}`;\n pondPath.appendChild(pad);\n }\n updateFrogPosition();\n }\n\n function updateFrogPosition() {\n const frog = document.getElementById('frog-sprite');\n const targetPad = document.getElementById(`pad-${state.currentStep}`);\n if (targetPad) {\n const rect = targetPad.getBoundingClientRect();\n const containerRect = document.getElementById('lake-container').getBoundingClientRect();\n \n const leftPos = rect.left - containerRect.left + (rect.width \/ 2) - 20;\n frog.style.left = `${leftPos}px`;\n }\n }\n\n function generateQuestion() {\n let num1, num2, answer, opSymbol;\n const op = state.operation === 'mixed' ? \n ['addition', 'subtraction', 'multiplication', 'division'][Math.floor(Math.random() * 4)] : \n state.operation;\n\n if (op === 'addition' || op === 'subtraction') {\n const max = state.difficulty === 'easy' ? 20 : (state.difficulty === 'medium' ? 50 : 100);\n if (op === 'addition') {\n num1 = Math.floor(Math.random() * (max \/ 2));\n num2 = Math.floor(Math.random() * (max \/ 2));\n answer = num1 + num2;\n opSymbol = '+';\n } else {\n num1 = Math.floor(Math.random() * max);\n num2 = Math.floor(Math.random() * num1);\n answer = num1 - num2;\n opSymbol = '-';\n }\n } else {\n const maxFactor = state.difficulty === 'easy' ? 5 : (state.difficulty === 'medium' ? 8 : 10);\n num1 = Math.floor(Math.random() * maxFactor) + 1;\n num2 = Math.floor(Math.random() * 10) + 1;\n if (op === 'multiplication') {\n answer = num1 * num2;\n opSymbol = '\u00d7';\n } else {\n const dividend = num1 * num2;\n answer = num2;\n const temp = num1;\n num1 = dividend;\n num2 = temp;\n opSymbol = '\u00f7';\n }\n }\n\n state.currentQuestion = { num1, num2, answer, opSymbol };\n document.getElementById('question-text').innerText = `${num1} ${opSymbol} ${num2} = ?`;\n renderAnswers(answer);\n }\n\n function renderAnswers(correctAnswer) {\n const grid = document.getElementById('answer-grid');\n grid.innerHTML = '';\n \n const options = new Set();\n options.add(correctAnswer);\n \n while (options.size < 4) {\n let wrong = correctAnswer + (Math.floor(Math.random() * 10) - 5);\n if (wrong >= 0 && wrong !== correctAnswer) options.add(wrong);\n }\n\n const shuffledOptions = Array.from(options).sort(() => Math.random() - 0.5);\n\n shuffledOptions.forEach(opt => {\n const btn = document.createElement('button');\n btn.innerText = opt;\n btn.className = \"bg-white hover:bg-blue-50 text-blue-600 border-4 border-blue-200 text-3xl font-bold py-6 rounded-2xl shadow-lg transition transform active:scale-95\";\n btn.onclick = () => checkAnswer(opt, btn);\n grid.appendChild(btn);\n });\n }\n\n function checkAnswer(selected, btnElement) {\n if (selected === state.currentQuestion.answer) {\n playSuccessSound();\n state.score += 10;\n state.streak++;\n state.currentStep = Math.min(state.currentStep + 1, state.totalSteps);\n \n btnElement.classList.replace('border-blue-200', 'border-green-500');\n btnElement.classList.add('bg-green-100');\n \n if (state.currentStep === state.totalSteps) {\n setTimeout(showVictory, 600);\n } else {\n setTimeout(nextTurn, 600);\n }\n } else {\n playErrorSound();\n state.streak = 0;\n state.currentStep = Math.max(state.currentStep - 1, 0);\n \n btnElement.classList.replace('border-blue-200', 'border-red-500');\n btnElement.classList.add('bg-red-100', 'shake');\n \n setTimeout(nextTurn, 800);\n }\n \n updateStats();\n updateFrogPosition();\n }\n\n function updateStats() {\n document.getElementById('score-display').innerText = state.score;\n document.getElementById('streak-display').innerText = state.streak;\n }\n\n function nextTurn() {\n generateQuestion();\n }\n\n function showVictory() {\n playVictorySound();\n screens.gameplay.classList.add('hidden');\n screens.victory.classList.remove('hidden');\n document.getElementById('final-score').innerText = state.score;\n document.getElementById('final-streak').innerText = state.streak;\n }\n\n window.addEventListener('resize', updateFrogPosition);\n <\/script>\n\n<\/body><\/html>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u03a4\u03bf \u03a0\u03b1\u03b9\u03c7\u03bd\u03af\u03b4\u03b9 \u03c4\u03bf\u03c5 \u0392\u03b1\u03c4\u03c1\u03ac\u03c7\u03bf\u03c5 – \u039c\u03b1\u03b8\u03b7\u03bc\u03b1\u03c4\u03b9\u03ba\u03ac \ud83d\udd0a \ud83d\udc38 \u03a4\u03bf \u03a0\u03b1\u03b9\u03c7\u03bd\u03af\u03b4\u03b9 \u03c4\u03bf\u03c5 \u0392\u03b1\u03c4\u03c1\u03ac\u03c7\u03bf\u03c5 \u0394\u03b9\u03ac\u03bb\u03b5\u03be\u03b5 \u03c0\u03c1\u03ac\u03be\u03b7 \u03b3\u03b9\u03b1 \u03bd\u03b1 \u03be\u03b5\u03ba\u03b9\u03bd\u03ae\u03c3\u03b5\u03b9\u03c2! \u03a0\u03c1\u03cc\u03c3\u03b8\u03b5\u03c3\u03b7 (+) \u0391\u03c6\u03b1\u03af\u03c1\u03b5\u03c3\u03b7 (-) \u03a0\u03bf\u03bb\u03bb\u03b1\u03c0\u03bb\u03b1\u03c3\u03b9\u03b1\u03c3\u03bc\u03cc\u03c2 (\u00d7) \u0394\u03b9\u03b1\u03af\u03c1\u03b5\u03c3\u03b7 (\u00f7) \u039c\u03b9\u03ba\u03c4\u03ac (+ – \u00d7 \u00f7) \u0395\u03c0\u03af\u03c0\u03b5\u03b4\u03bf \u0394\u03c5\u03c3\u03ba\u03bf\u03bb\u03af\u03b1\u03c2 \u0395\u03cd\u03ba\u03bf\u03bb\u03bf \u039c\u03ad\u03c4\u03c1\u03b9\u03bf \u0394\u03cd\u03c3\u03ba\u03bf\u03bb\u03bf \u2190 \u03a0\u03af\u03c3\u03c9 \u03c3\u03c4\u03bf \u039c\u03b5\u03bd\u03bf\u03cd \u2b50 0 \ud83d\udd25 0 \ud83d\udc38 5 + 5 = ? \ud83c\udfc6 […]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[],"class_list":["post-363","post","type-post","status-publish","format-standard","hentry","category-efarmoges-drastiriotites"],"featured_image_src":null,"featured_image_src_square":null,"author_info":{"display_name":"\u0395\u03c5\u03c3\u03c4\u03c1\u03ac\u03c4\u03b9\u03bf\u03c2 \u0391\u03c1\u03b5\u03c4\u03cc\u03c2","author_link":"https:\/\/earetos.sites.sch.gr\/?author=3"},"_links":{"self":[{"href":"https:\/\/earetos.sites.sch.gr\/index.php?rest_route=\/wp\/v2\/posts\/363","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/earetos.sites.sch.gr\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/earetos.sites.sch.gr\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/earetos.sites.sch.gr\/index.php?rest_route=\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/earetos.sites.sch.gr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=363"}],"version-history":[{"count":3,"href":"https:\/\/earetos.sites.sch.gr\/index.php?rest_route=\/wp\/v2\/posts\/363\/revisions"}],"predecessor-version":[{"id":371,"href":"https:\/\/earetos.sites.sch.gr\/index.php?rest_route=\/wp\/v2\/posts\/363\/revisions\/371"}],"wp:attachment":[{"href":"https:\/\/earetos.sites.sch.gr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=363"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/earetos.sites.sch.gr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=363"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/earetos.sites.sch.gr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=363"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":363,"date":"2026-02-22T15:43:45","date_gmt":"2026-02-22T13:43:45","guid":{"rendered":"https:\/\/earetos.sites.sch.gr\/?p=363"},"modified":"2026-02-22T15:57:47","modified_gmt":"2026-02-22T13:57:47","slug":"paichnidi-me-tis-praxeis","status":"publish","type":"post","link":"https:\/\/earetos.sites.sch.gr\/?p=363","title":{"rendered":"\u03a0\u0391\u0399\u03a7\u039d\u0399\u0394\u0399 \u039c\u0395 \u03a4\u0399\u03a3 \u03a0\u03a1\u0391\u039e\u0395\u0399\u03a3"},"content":{"rendered":"\n\n\n\n\n\n\u03a4\u03bf \u03a0\u03b1\u03b9\u03c7\u03bd\u03af\u03b4\u03b9 \u03c4\u03bf\u03c5 \u0392\u03b1\u03c4\u03c1\u03ac\u03c7\u03bf\u03c5 – \u039c\u03b1\u03b8\u03b7\u03bc\u03b1\u03c4\u03b9\u03ba\u03ac<\/title>\n\n<script src=\"https:\/\/cdn.tailwindcss.com?plugins=forms,container-queries\"><\/script>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Comfortaa:wght@800;10000&display=swap\" rel=\"stylesheet\"\/>\n\n<style data-purpose=\"typography\">\n body {\n font-family: 'Comfortaa', cursive;\n overflow-x: hidden;\n }\n .game-text-shadow {\n text-shadow: 2px 2px 0px rgba(0,0,0,0.1);\n }\n <\/style>\n<style data-purpose=\"animations\">\n @keyframes float {\n 0% { transform: translateY(0px); }\n 50% { transform: translateY(-10px); }\n 100% { transform: translateY(0px); }\n }\n .animate-float {\n animation: float 3s ease-in-out infinite;\n }\n .frog-transition {\n transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n }\n .shake {\n animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;\n }\n @keyframes shake {\n 10%, 90% { transform: translate3d(-1px, 0, 0); }\n 20%, 80% { transform: translate3d(2px, 0, 0); }\n 30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }\n 40%, 60% { transform: translate3d(4px, 0, 0); }\n }\n <\/style>\n<style data-purpose=\"layout\">\n .lake-bg {\n background: linear-gradient(180deg, #a5f3fc 0%, #38bdf8 100%);\n min-height: 100vh;\n position: relative;\n }\n .lily-pad {\n width: 60px;\n height: 40px;\n background: #22c55e;\n border-radius: 50%;\n position: relative;\n box-shadow: 0 4px 0 #166534;\n }\n .lily-pad::after {\n content: '';\n position: absolute;\n top: 50%;\n left: 0;\n width: 15px;\n height: 10px;\n background: #38bdf8;\n clip-path: polygon(0 0, 100% 50%, 0 100%);\n transform: translateY(-50%);\n }\n <\/style>\n<script data-purpose=\"tailwind-config\">\n tailwind.config = {\n theme: {\n extend: {\n colors: {\n pond: {\n light: '#7dd3fc',\n dark: '#0284c7',\n },\n frog: '#4ade80',\n }\n }\n }\n }\n <\/script>\n<script>\n const audioCtx = new (window.AudioContext || window.webkitAudioContext)();\n let soundEnabled = true;\n\n function playTone(freq, type, duration, volume = 0.1) {\n if (!soundEnabled) return;\n if (audioCtx.state === 'suspended') audioCtx.resume();\n const osc = audioCtx.createOscillator();\n const gain = audioCtx.createGain();\n osc.type = type;\n osc.frequency.setValueAtTime(freq, audioCtx.currentTime);\n gain.gain.setValueAtTime(volume, audioCtx.currentTime);\n gain.gain.exponentialRampToValueAtTime(0.01, audioCtx.currentTime + duration);\n osc.connect(gain);\n gain.connect(audioCtx.destination);\n osc.start();\n osc.stop(audioCtx.currentTime + duration);\n }\n\n function playSuccessSound() {\n playTone(523.25, 'sine', 0.2); \/\/ C5\n setTimeout(() => playTone(659.25, 'sine', 0.3), 100); \/\/ E5\n }\n\n function playErrorSound() {\n playTone(150, 'sawtooth', 0.4, 0.05);\n }\n\n function playVictorySound() {\n const notes = [523.25, 659.25, 783.99, 1046.50]; \/\/ C5, E5, G5, C6\n notes.forEach((note, i) => {\n setTimeout(() => playTone(note, 'triangle', 0.5), i * 150);\n });\n }\n\n function toggleSound() {\n soundEnabled = !soundEnabled;\n document.getElementById('sound-toggle').innerText = soundEnabled ? '\ud83d\udd0a' : '\ud83d\udd07';\n }\n <\/script><\/head>\n<body class=\"lake-bg flex flex-col items-center justify-center p-4\"><button class=\"fixed top-4 right-4 z-50 bg-white\/80 p-3 rounded-full shadow-lg text-2xl hover:scale-110 transition-transform\" id=\"sound-toggle\" onclick=\"toggleSound()\">\ud83d\udd0a<\/button>\n\n<div class=\"max-w-2xl w-full bg-white\/90 backdrop-blur rounded-3xl p-8 shadow-2xl border-4 border-white text-center\" data-purpose=\"menu-container\" id=\"main-menu\">\n<h1 class=\"text-4xl font-bold text-blue-600 mb-8 game-text-shadow\">\ud83d\udc38 \u03a4\u03bf \u03a0\u03b1\u03b9\u03c7\u03bd\u03af\u03b4\u03b9 \u03c4\u03bf\u03c5 \u0392\u03b1\u03c4\u03c1\u03ac\u03c7\u03bf\u03c5<\/h1>\n<p class=\"text-xl text-gray-700 mb-6\">\u0394\u03b9\u03ac\u03bb\u03b5\u03be\u03b5 \u03c0\u03c1\u03ac\u03be\u03b7 \u03b3\u03b9\u03b1 \u03bd\u03b1 \u03be\u03b5\u03ba\u03b9\u03bd\u03ae\u03c3\u03b5\u03b9\u03c2!<\/p>\n<div class=\"grid grid-cols-1 sm:grid-cols-2 gap-4 mb-8\">\n<button class=\"bg-green-500 hover:bg-green-600 text-white font-bold py-4 px-6 rounded-2xl shadow-lg transition transform hover:scale-105\" onclick=\"selectOperation('addition')\">\u03a0\u03c1\u03cc\u03c3\u03b8\u03b5\u03c3\u03b7 (+)<\/button>\n<button class=\"bg-blue-500 hover:bg-blue-600 text-white font-bold py-4 px-6 rounded-2xl shadow-lg transition transform hover:scale-105\" onclick=\"selectOperation('subtraction')\">\u0391\u03c6\u03b1\u03af\u03c1\u03b5\u03c3\u03b7 (-)<\/button>\n<button class=\"bg-yellow-500 hover:bg-yellow-600 text-white font-bold py-4 px-6 rounded-2xl shadow-lg transition transform hover:scale-105\" onclick=\"selectOperation('multiplication')\">\u03a0\u03bf\u03bb\u03bb\u03b1\u03c0\u03bb\u03b1\u03c3\u03b9\u03b1\u03c3\u03bc\u03cc\u03c2 (\u00d7)<\/button>\n<button class=\"bg-purple-500 hover:bg-purple-600 text-white font-bold py-4 px-6 rounded-2xl shadow-lg transition transform hover:scale-105\" onclick=\"selectOperation('division')\">\u0394\u03b9\u03b1\u03af\u03c1\u03b5\u03c3\u03b7 (\u00f7)<\/button>\n<button class=\"bg-orange-500 hover:bg-orange-600 text-white font-bold py-4 px-6 rounded-2xl shadow-lg transition transform hover:scale-105 col-span-full\" onclick=\"selectOperation('mixed')\">\u039c\u03b9\u03ba\u03c4\u03ac (+ – \u00d7 \u00f7)<\/button>\n<\/div>\n<\/div>\n\n\n<div class=\"hidden max-w-2xl w-full bg-white\/90 backdrop-blur rounded-3xl p-8 shadow-2xl border-4 border-white text-center\" data-purpose=\"difficulty-container\" id=\"difficulty-menu\">\n<h2 class=\"text-3xl font-bold text-blue-600 mb-8\">\u0395\u03c0\u03af\u03c0\u03b5\u03b4\u03bf \u0394\u03c5\u03c3\u03ba\u03bf\u03bb\u03af\u03b1\u03c2<\/h2>\n<div class=\"flex flex-col gap-4\">\n<button class=\"bg-emerald-400 hover:bg-emerald-500 text-white font-bold py-4 px-6 rounded-2xl shadow-lg transition transform hover:scale-105\" onclick=\"startGame('easy')\">\u0395\u03cd\u03ba\u03bf\u03bb\u03bf<\/button>\n<button class=\"bg-amber-400 hover:bg-amber-500 text-white font-bold py-4 px-6 rounded-2xl shadow-lg transition transform hover:scale-105\" onclick=\"startGame('medium')\">\u039c\u03ad\u03c4\u03c1\u03b9\u03bf<\/button>\n<button class=\"bg-rose-400 hover:bg-rose-500 text-white font-bold py-4 px-6 rounded-2xl shadow-lg transition transform hover:scale-105\" onclick=\"startGame('hard')\">\u0394\u03cd\u03c3\u03ba\u03bf\u03bb\u03bf<\/button>\n<\/div>\n<button class=\"mt-8 text-blue-500 font-bold hover:underline\" onclick=\"backToMenu()\">\u2190 \u03a0\u03af\u03c3\u03c9 \u03c3\u03c4\u03bf \u039c\u03b5\u03bd\u03bf\u03cd<\/button>\n<\/div>\n\n\n<div class=\"hidden w-full max-w-5xl flex flex-col items-center\" data-purpose=\"gameplay-container\" id=\"gameplay-screen\">\n\n<div class=\"w-full flex justify-between items-center mb-8 px-4\">\n<div class=\"bg-white\/80 p-3 rounded-full shadow-md flex items-center gap-2\">\n<span class=\"text-2xl\">\u2b50<\/span>\n<span class=\"font-bold text-xl text-blue-600\" id=\"score-display\">0<\/span>\n<\/div>\n<div class=\"bg-white\/80 p-3 rounded-full shadow-md flex items-center gap-2\">\n<span class=\"text-2xl\">\ud83d\udd25<\/span>\n<span class=\"font-bold text-xl text-orange-500\" id=\"streak-display\">0<\/span>\n<\/div>\n<\/div>\n\n<div class=\"w-full h-32 relative mb-12 flex items-center justify-between px-4 bg-blue-400\/20 rounded-full\" id=\"lake-container\">\n\n<div class=\"w-full flex justify-between absolute px-10\" id=\"pond-path\">\n\n<\/div>\n\n<div class=\"frog-transition absolute text-4xl z-10 animate-float\" id=\"frog-sprite\" style=\"left: 40px;\">\ud83d\udc38<\/div>\n<\/div>\n\n<div class=\"bg-white rounded-3xl p-8 shadow-xl mb-8 relative border-4 border-blue-100 min-w-[300px] text-center\">\n<div class=\"absolute -bottom-4 left-1\/2 -translate-x-1\/2 w-8 h-8 bg-white rotate-45 border-b-4 border-r-4 border-blue-100\"><\/div>\n<div class=\"text-5xl font-bold text-gray-800\" id=\"question-text\">5 + 5 = ?<\/div>\n<\/div>\n\n<div class=\"grid grid-cols-2 sm:grid-cols-4 gap-4 w-full max-w-2xl px-4\" id=\"answer-grid\">\n\n<\/div>\n<\/div>\n\n\n<div class=\"hidden fixed inset-0 bg-blue-500\/90 backdrop-blur flex items-center justify-center z-50 p-6\" id=\"victory-screen\">\n<div class=\"bg-white rounded-[3rem] p-12 shadow-2xl text-center max-w-lg w-full border-8 border-yellow-400\">\n<div class=\"text-8xl mb-6\">\ud83c\udfc6<\/div>\n<h2 class=\"text-4xl font-bold text-blue-600 mb-4\">\u039d\u0399\u039a\u0397!<\/h2>\n<p class=\"text-xl text-gray-600 mb-8\">\u039f \u03b2\u03ac\u03c4\u03c1\u03b1\u03c7\u03bf\u03c2 \u03ad\u03c6\u03c4\u03b1\u03c3\u03b5 \u03c3\u03c4\u03b7\u03bd \u03ac\u03bb\u03bb\u03b7 \u03c0\u03bb\u03b5\u03c5\u03c1\u03ac!<\/p>\n<div class=\"flex justify-around mb-8\">\n<div>\n<p class=\"text-sm text-gray-400 uppercase tracking-widest\">\u03a3\u03ba\u03bf\u03c1<\/p>\n<p class=\"text-3xl font-bold text-blue-500\" id=\"final-score\">0<\/p>\n<\/div>\n<div>\n<p class=\"text-sm text-gray-400 uppercase tracking-widest\">\u03a3\u03b5\u03c1\u03af<\/p>\n<p class=\"text-3xl font-bold text-orange-500\" id=\"final-streak\">0<\/p>\n<\/div>\n<\/div>\n<button class=\"bg-green-500 hover:bg-green-600 text-white text-2xl font-bold py-6 px-12 rounded-3xl shadow-xl transition transform hover:scale-110 w-full\" onclick=\"location.reload()\">\u03a0\u03b1\u03af\u03be\u03b5 \u039e\u03b1\u03bd\u03ac!<\/button>\n<\/div>\n<\/div>\n\n\n<script data-purpose=\"game-logic\">\n const state = {\n operation: null,\n difficulty: null,\n currentStep: 0,\n totalSteps: 10,\n currentQuestion: null,\n score: 0,\n streak: 0,\n questionsAnswered: 0\n };\n\n const screens = {\n menu: document.getElementById('main-menu'),\n difficulty: document.getElementById('difficulty-menu'),\n gameplay: document.getElementById('gameplay-screen'),\n victory: document.getElementById('victory-screen')\n };\n\n function selectOperation(op) {\n state.operation = op;\n screens.menu.classList.add('hidden');\n screens.difficulty.classList.remove('hidden');\n }\n\n function backToMenu() {\n screens.difficulty.classList.add('hidden');\n screens.menu.classList.remove('hidden');\n }\n\n function startGame(diff) {\n state.difficulty = diff;\n screens.difficulty.classList.add('hidden');\n screens.gameplay.classList.remove('hidden');\n setupPond();\n generateQuestion();\n }\n\n function setupPond() {\n const pondPath = document.getElementById('pond-path');\n pondPath.innerHTML = '';\n for (let i = 0; i <= state.totalSteps; i++) {\n const pad = document.createElement('div');\n pad.className = 'lily-pad';\n pad.id = `pad-${i}`;\n pondPath.appendChild(pad);\n }\n updateFrogPosition();\n }\n\n function updateFrogPosition() {\n const frog = document.getElementById('frog-sprite');\n const targetPad = document.getElementById(`pad-${state.currentStep}`);\n if (targetPad) {\n const rect = targetPad.getBoundingClientRect();\n const containerRect = document.getElementById('lake-container').getBoundingClientRect();\n \n const leftPos = rect.left - containerRect.left + (rect.width \/ 2) - 20;\n frog.style.left = `${leftPos}px`;\n }\n }\n\n function generateQuestion() {\n let num1, num2, answer, opSymbol;\n const op = state.operation === 'mixed' ? \n ['addition', 'subtraction', 'multiplication', 'division'][Math.floor(Math.random() * 4)] : \n state.operation;\n\n if (op === 'addition' || op === 'subtraction') {\n const max = state.difficulty === 'easy' ? 20 : (state.difficulty === 'medium' ? 50 : 100);\n if (op === 'addition') {\n num1 = Math.floor(Math.random() * (max \/ 2));\n num2 = Math.floor(Math.random() * (max \/ 2));\n answer = num1 + num2;\n opSymbol = '+';\n } else {\n num1 = Math.floor(Math.random() * max);\n num2 = Math.floor(Math.random() * num1);\n answer = num1 - num2;\n opSymbol = '-';\n }\n } else {\n const maxFactor = state.difficulty === 'easy' ? 5 : (state.difficulty === 'medium' ? 8 : 10);\n num1 = Math.floor(Math.random() * maxFactor) + 1;\n num2 = Math.floor(Math.random() * 10) + 1;\n if (op === 'multiplication') {\n answer = num1 * num2;\n opSymbol = '\u00d7';\n } else {\n const dividend = num1 * num2;\n answer = num2;\n const temp = num1;\n num1 = dividend;\n num2 = temp;\n opSymbol = '\u00f7';\n }\n }\n\n state.currentQuestion = { num1, num2, answer, opSymbol };\n document.getElementById('question-text').innerText = `${num1} ${opSymbol} ${num2} = ?`;\n renderAnswers(answer);\n }\n\n function renderAnswers(correctAnswer) {\n const grid = document.getElementById('answer-grid');\n grid.innerHTML = '';\n \n const options = new Set();\n options.add(correctAnswer);\n \n while (options.size < 4) {\n let wrong = correctAnswer + (Math.floor(Math.random() * 10) - 5);\n if (wrong >= 0 && wrong !== correctAnswer) options.add(wrong);\n }\n\n const shuffledOptions = Array.from(options).sort(() => Math.random() - 0.5);\n\n shuffledOptions.forEach(opt => {\n const btn = document.createElement('button');\n btn.innerText = opt;\n btn.className = \"bg-white hover:bg-blue-50 text-blue-600 border-4 border-blue-200 text-3xl font-bold py-6 rounded-2xl shadow-lg transition transform active:scale-95\";\n btn.onclick = () => checkAnswer(opt, btn);\n grid.appendChild(btn);\n });\n }\n\n function checkAnswer(selected, btnElement) {\n if (selected === state.currentQuestion.answer) {\n playSuccessSound();\n state.score += 10;\n state.streak++;\n state.currentStep = Math.min(state.currentStep + 1, state.totalSteps);\n \n btnElement.classList.replace('border-blue-200', 'border-green-500');\n btnElement.classList.add('bg-green-100');\n \n if (state.currentStep === state.totalSteps) {\n setTimeout(showVictory, 600);\n } else {\n setTimeout(nextTurn, 600);\n }\n } else {\n playErrorSound();\n state.streak = 0;\n state.currentStep = Math.max(state.currentStep - 1, 0);\n \n btnElement.classList.replace('border-blue-200', 'border-red-500');\n btnElement.classList.add('bg-red-100', 'shake');\n \n setTimeout(nextTurn, 800);\n }\n \n updateStats();\n updateFrogPosition();\n }\n\n function updateStats() {\n document.getElementById('score-display').innerText = state.score;\n document.getElementById('streak-display').innerText = state.streak;\n }\n\n function nextTurn() {\n generateQuestion();\n }\n\n function showVictory() {\n playVictorySound();\n screens.gameplay.classList.add('hidden');\n screens.victory.classList.remove('hidden');\n document.getElementById('final-score').innerText = state.score;\n document.getElementById('final-streak').innerText = state.streak;\n }\n\n window.addEventListener('resize', updateFrogPosition);\n <\/script>\n\n<\/body><\/html>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u03a4\u03bf \u03a0\u03b1\u03b9\u03c7\u03bd\u03af\u03b4\u03b9 \u03c4\u03bf\u03c5 \u0392\u03b1\u03c4\u03c1\u03ac\u03c7\u03bf\u03c5 – \u039c\u03b1\u03b8\u03b7\u03bc\u03b1\u03c4\u03b9\u03ba\u03ac \ud83d\udd0a \ud83d\udc38 \u03a4\u03bf \u03a0\u03b1\u03b9\u03c7\u03bd\u03af\u03b4\u03b9 \u03c4\u03bf\u03c5 \u0392\u03b1\u03c4\u03c1\u03ac\u03c7\u03bf\u03c5 \u0394\u03b9\u03ac\u03bb\u03b5\u03be\u03b5 \u03c0\u03c1\u03ac\u03be\u03b7 \u03b3\u03b9\u03b1 \u03bd\u03b1 \u03be\u03b5\u03ba\u03b9\u03bd\u03ae\u03c3\u03b5\u03b9\u03c2! \u03a0\u03c1\u03cc\u03c3\u03b8\u03b5\u03c3\u03b7 (+) \u0391\u03c6\u03b1\u03af\u03c1\u03b5\u03c3\u03b7 (-) \u03a0\u03bf\u03bb\u03bb\u03b1\u03c0\u03bb\u03b1\u03c3\u03b9\u03b1\u03c3\u03bc\u03cc\u03c2 (\u00d7) \u0394\u03b9\u03b1\u03af\u03c1\u03b5\u03c3\u03b7 (\u00f7) \u039c\u03b9\u03ba\u03c4\u03ac (+ – \u00d7 \u00f7) \u0395\u03c0\u03af\u03c0\u03b5\u03b4\u03bf \u0394\u03c5\u03c3\u03ba\u03bf\u03bb\u03af\u03b1\u03c2 \u0395\u03cd\u03ba\u03bf\u03bb\u03bf \u039c\u03ad\u03c4\u03c1\u03b9\u03bf \u0394\u03cd\u03c3\u03ba\u03bf\u03bb\u03bf \u2190 \u03a0\u03af\u03c3\u03c9 \u03c3\u03c4\u03bf \u039c\u03b5\u03bd\u03bf\u03cd \u2b50 0 \ud83d\udd25 0 \ud83d\udc38 5 + 5 = ? \ud83c\udfc6 […]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[],"class_list":["post-363","post","type-post","status-publish","format-standard","hentry","category-efarmoges-drastiriotites"],"featured_image_src":null,"featured_image_src_square":null,"author_info":{"display_name":"\u0395\u03c5\u03c3\u03c4\u03c1\u03ac\u03c4\u03b9\u03bf\u03c2 \u0391\u03c1\u03b5\u03c4\u03cc\u03c2","author_link":"https:\/\/earetos.sites.sch.gr\/?author=3"},"_links":{"self":[{"href":"https:\/\/earetos.sites.sch.gr\/index.php?rest_route=\/wp\/v2\/posts\/363","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/earetos.sites.sch.gr\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/earetos.sites.sch.gr\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/earetos.sites.sch.gr\/index.php?rest_route=\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/earetos.sites.sch.gr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=363"}],"version-history":[{"count":3,"href":"https:\/\/earetos.sites.sch.gr\/index.php?rest_route=\/wp\/v2\/posts\/363\/revisions"}],"predecessor-version":[{"id":371,"href":"https:\/\/earetos.sites.sch.gr\/index.php?rest_route=\/wp\/v2\/posts\/363\/revisions\/371"}],"wp:attachment":[{"href":"https:\/\/earetos.sites.sch.gr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=363"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/earetos.sites.sch.gr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=363"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/earetos.sites.sch.gr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=363"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}