AI Tutor – \u03a0\u03bf\u03bb\u03bb\u03b1\u03c0\u03bb\u03b1\u03c3\u03b9\u03b1\u03c3\u03bc\u03cc\u03c2 \u0394\u03b5\u03ba\u03b1\u03b4\u03b9\u03ba\u03ce\u03bd<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <style>\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Comfortaa:wght@300;700&display=swap');\n body {\n font-family: 'Comfortaa', cursive;\n background-color: #f0f9ff;\n }\n .chat-bubble {\n border-radius: 20px;\n max-width: 85%;\n padding: 12px 16px;\n margin-bottom: 10px;\n }\n .tutor-bubble {\n background-color: #ffffff;\n border: 2px solid #3b82f6;\n color: #1e3a8a;\n align-self: flex-start;\n }\n .user-bubble {\n background-color: #3b82f6;\n color: white;\n align-self: flex-end;\n }\n .theory-card {\n background: linear-gradient(135deg, #60a5fa, #3b82f6);\n color: white;\n border-radius: 15px;\n padding: 20px;\n box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n }\n <\/style>\n<\/head>\n<body class=\"p-4 md:p-8\">\n\n <div class=\"max-w-4xl mx-auto\">\n \n <div class=\"text-center mb-8\">\n <h1 class=\"text-3xl font-bold text-blue-800 mb-2\">\ud83e\udd16 \u039f \u03a8\u03b7\u03c6\u03b9\u03b1\u03ba\u03cc\u03c2 \u03c3\u03bf\u03c5 \u0392\u03bf\u03b7\u03b8\u03cc\u03c2 \u03c3\u03c4\u03b1 \u039c\u03b1\u03b8\u03b7\u03bc\u03b1\u03c4\u03b9\u03ba\u03ac<\/h1>\n <p class=\"text-blue-600 italic\">\u039c\u03b1\u03b8\u03b1\u03af\u03bd\u03bf\u03c5\u03bc\u03b5 \u03c4\u03bf\u03bd \u03a0\u03bf\u03bb\u03bb\u03b1\u03c0\u03bb\u03b1\u03c3\u03b9\u03b1\u03c3\u03bc\u03cc \u0394\u03b5\u03ba\u03b1\u03b4\u03b9\u03ba\u03ce\u03bd \u03bc\u03b1\u03b6\u03af!<\/p>\n <\/div>\n\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-8\">\n \n \n <div class=\"theory-card\">\n <h2 class=\"text-xl font-bold mb-4 flex items-center\">\n <span class=\"mr-2\">\ud83d\udcda<\/span> \u0397 \u0398\u03b5\u03c9\u03c1\u03af\u03b1 \u03bc\u03b1\u03c2\n <\/h2>\n <div class=\"space-y-4 text-sm leading-relaxed\">\n <p><strong>1. \u039e\u03ad\u03c7\u03bd\u03b1 \u03c4\u03b7\u03bd \u03c5\u03c0\u03bf\u03b4\u03b9\u03b1\u03c3\u03c4\u03bf\u03bb\u03ae:<\/strong> \u039a\u03ac\u03bd\u03b5 \u03c4\u03bf\u03bd \u03c0\u03bf\u03bb\u03bb\u03b1\u03c0\u03bb\u03b1\u03c3\u03b9\u03b1\u03c3\u03bc\u03cc \u03c3\u03b1\u03bd \u03bd\u03b1 \u03b5\u03af\u03bd\u03b1\u03b9 \u03c6\u03c5\u03c3\u03b9\u03ba\u03bf\u03af \u03b1\u03c1\u03b9\u03b8\u03bc\u03bf\u03af.<\/p>\n <p><strong>2. \u039c\u03ad\u03c4\u03c1\u03b1 \u03c4\u03b1 \u03c8\u03b7\u03c6\u03af\u03b1:<\/strong> \u0394\u03b5\u03c2 \u03c0\u03cc\u03c3\u03b1 \u03c8\u03b7\u03c6\u03af\u03b1 \u03c5\u03c0\u03ac\u03c1\u03c7\u03bf\u03c5\u03bd \u03bc\u03b5\u03c4\u03ac \u03c4\u03b7\u03bd \u03c5\u03c0\u03bf\u03b4\u03b9\u03b1\u03c3\u03c4\u03bf\u03bb\u03ae \u039a\u0391\u0399 \u03c3\u03c4\u03bf\u03c5\u03c2 \u03b4\u03cd\u03bf \u03b1\u03c1\u03b9\u03b8\u03bc\u03bf\u03cd\u03c2 \u03bc\u03b1\u03b6\u03af.<\/p>\n <p><strong>3. \u0392\u03ac\u03bb\u03b5 \u03c4\u03b7\u03bd \u03c5\u03c0\u03bf\u03b4\u03b9\u03b1\u03c3\u03c4\u03bf\u03bb\u03ae:<\/strong> \u039e\u03b5\u03ba\u03af\u03bd\u03b1 \u03b1\u03c0\u03cc \u03c4\u03bf \u03c4\u03ad\u03bb\u03bf\u03c2 \u03c4\u03bf\u03c5 \u03b1\u03c0\u03bf\u03c4\u03b5\u03bb\u03ad\u03c3\u03bc\u03b1\u03c4\u03bf\u03c2 \u03ba\u03b1\u03b9 \u03bc\u03ad\u03c4\u03c1\u03b1 \u03c0\u03c1\u03bf\u03c2 \u03c4\u03b1 \u03b1\u03c1\u03b9\u03c3\u03c4\u03b5\u03c1\u03ac \u03c4\u03cc\u03c3\u03b5\u03c2 \u03b8\u03ad\u03c3\u03b5\u03b9\u03c2 \u03cc\u03c3\u03b1 \u03ae\u03c4\u03b1\u03bd \u03c4\u03b1 \u03c8\u03b7\u03c6\u03af\u03b1 \u03c0\u03bf\u03c5 \u03bc\u03ad\u03c4\u03c1\u03b7\u03c3\u03b5\u03c2.<\/p>\n <div class=\"bg-blue-800 p-3 rounded-lg mt-2 font-mono text-center\">\n \u03a0\u03b1\u03c1\u03ac\u03b4\u03b5\u03b9\u03b3\u03bc\u03b1:<br>\n 1,2 (1 \u03b8\u03ad\u03c3\u03b7) \u00d7 0,3 (1 \u03b8\u03ad\u03c3\u03b7) =<br>\n 12 \u00d7 3 = 36<br>\n \u0386\u03c1\u03b1: 0,36 (2 \u03b8\u03ad\u03c3\u03b5\u03b9\u03c2!)\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"bg-white rounded-2xl shadow-xl flex flex-col h-[500px] border border-blue-100 overflow-hidden\">\n \n <div id=\"chat-window\" class=\"flex-1 p-4 overflow-y-auto flex flex-col space-y-2\">\n <div class=\"chat-bubble tutor-bubble\">\n \u0393\u03b5\u03b9\u03b1 \u03c3\u03bf\u03c5! \u0395\u03af\u03bc\u03b1\u03b9 \u03bf \u03b4\u03ac\u03c3\u03ba\u03b1\u03bb\u03cc\u03c2 \u03c3\u03bf\u03c5. \u0388\u03c7\u03b5\u03b9\u03c2 \u03ba\u03ac\u03c0\u03bf\u03b9\u03b1 \u03b1\u03c0\u03bf\u03c1\u03af\u03b1 \u03b3\u03b9\u03b1 \u03c4\u03bf\u03c5\u03c2 \u03b4\u03b5\u03ba\u03b1\u03b4\u03b9\u03ba\u03bf\u03cd\u03c2; \u03a1\u03ce\u03c4\u03b7\u03c3\u03ad \u03bc\u03b5 \u03cc,\u03c4\u03b9 \u03b8\u03ad\u03bb\u03b5\u03b9\u03c2 (\u03b1\u03ba\u03cc\u03bc\u03b1 \u03ba\u03b9 \u03b1\u03bd \u03ba\u03ac\u03bd\u03b5\u03b9\u03c2 \u03bb\u03ac\u03b8\u03b7, \u03b8\u03b1 \u03c3\u03b5 \u03ba\u03b1\u03c4\u03b1\u03bb\u03ac\u03b2\u03c9!)\n <\/div>\n <\/div>\n\n \n <div class=\"p-4 border-t border-gray-100 bg-gray-50\">\n <div class=\"flex gap-2\">\n <input type=\"text\" id=\"user-input\" placeholder=\"\u0393\u03c1\u03ac\u03c8\u03b5 \u03c4\u03b7\u03bd \u03b5\u03c1\u03ce\u03c4\u03b7\u03c3\u03ae \u03c3\u03bf\u03c5 \u03b5\u03b4\u03ce...\" \n class=\"flex-1 p-3 rounded-full border border-blue-200 focus:outline-none focus:ring-2 focus:ring-blue-400\">\n <button onclick=\"handleUserInput()\" class=\"bg-blue-600 text-white p-3 rounded-full hover:bg-blue-700 transition\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 19l9 2-9-18-9 18 9-2zm0 0v-8\" \/>\n <\/svg>\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n\n <\/div>\n <\/div>\n\n <script>\n const chatWindow = document.getElementById('chat-window');\n const userInput = document.getElementById('user-input');\n\n \/\/ \u039b\u03b5\u03be\u03b9\u03ba\u03cc \u0391\u03c0\u03b1\u03bd\u03c4\u03ae\u03c3\u03b5\u03c9\u03bd \u03ba\u03b1\u03b9 \u039b\u03ad\u03be\u03b5\u03c9\u03bd-\u039a\u03bb\u03b5\u03b9\u03b4\u03b9\u03ce\u03bd\n \/\/ \u03a0\u03b5\u03c1\u03b9\u03bb\u03b1\u03bc\u03b2\u03ac\u03bd\u03b5\u03b9 \u03ba\u03b1\u03b9 \u03bf\u03c1\u03b8\u03bf\u03b3\u03c1\u03b1\u03c6\u03b9\u03ba\u03ac \u03bb\u03ac\u03b8\u03b7 \u03b3\u03b9\u03b1 \u03ba\u03b1\u03bb\u03cd\u03c4\u03b5\u03c1\u03bf \"\u03c4\u03b1\u03af\u03c1\u03b9\u03b1\u03c3\u03bc\u03b1\"\n const knowledgeBase = [\n {\n keywords: ['\u03c0\u03c9\u03c2', '\u03ba\u03b1\u03bd\u03c9', '\u03c0\u03bf\u03bb\u03bb\u03b1\u03c0\u03bb\u03b1\u03c3\u03b9\u03b1\u03c3\u03bc\u03bf', '\u03c0\u03bf\u03bb\u03b1\u03c0\u03bb\u03b1\u03c3\u03b9\u03b1\u03c3\u03bc\u03bf\u03c2', '\u03b2\u03b7\u03bc\u03b1\u03c4\u03b1', '\u03bc\u03b1\u03b8\u03c9'],\n response: \"\u0395\u03af\u03bd\u03b1\u03b9 \u03b1\u03c0\u03bb\u03cc! \u039a\u03ac\u03bd\u03b5\u03b9\u03c2 \u03c4\u03bf\u03bd \u03c0\u03bf\u03bb\u03bb\u03b1\u03c0\u03bb\u03b1\u03c3\u03b9\u03b1\u03c3\u03bc\u03cc \u03ba\u03b1\u03bd\u03bf\u03bd\u03b9\u03ba\u03ac \u03c7\u03c9\u03c1\u03af\u03c2 \u03bd\u03b1 \u03b2\u03bb\u03ad\u03c0\u03b5\u03b9\u03c2 \u03c4\u03b9\u03c2 \u03c5\u03c0\u03bf\u03b4\u03b9\u03b1\u03c3\u03c4\u03bf\u03bb\u03ad\u03c2. \u03a3\u03c4\u03bf \u03c4\u03ad\u03bb\u03bf\u03c2, \u03bc\u03b5\u03c4\u03c1\u03ac\u03c2 \u03c0\u03cc\u03c3\u03b1 \u03c8\u03b7\u03c6\u03af\u03b1 \u03b5\u03af\u03bd\u03b1\u03b9 \u03c0\u03af\u03c3\u03c9 \u03b1\u03c0\u03cc \u03c4\u03b7\u03bd \u03c5\u03c0\u03bf\u03b4\u03b9\u03b1\u03c3\u03c4\u03bf\u03bb\u03ae \u03ba\u03b1\u03b9 \u03c3\u03c4\u03bf\u03c5\u03c2 \u03b4\u03cd\u03bf \u03b1\u03c1\u03b9\u03b8\u03bc\u03bf\u03cd\u03c2 \u03ba\u03b1\u03b9 \u03b2\u03ac\u03b6\u03b5\u03b9\u03c2 \u03c4\u03b7\u03bd \u03c5\u03c0\u03bf\u03b4\u03b9\u03b1\u03c3\u03c4\u03bf\u03bb\u03ae \u03c3\u03c4\u03bf \u03b1\u03c0\u03bf\u03c4\u03ad\u03bb\u03b5\u03c3\u03bc\u03b1 \u03bc\u03b5\u03c4\u03c1\u03ce\u03bd\u03c4\u03b1\u03c2 \u03b1\u03c0\u03cc \u03b4\u03b5\u03be\u03b9\u03ac \u03c0\u03c1\u03bf\u03c2 \u03c4\u03b1 \u03b1\u03c1\u03b9\u03c3\u03c4\u03b5\u03c1\u03ac!\"\n },\n {\n keywords: ['\u03c5\u03c0\u03bf\u03b4\u03b9\u03b1\u03c3\u03c4\u03bf\u03bb\u03b7', '\u03c0\u03bf\u03c5', '\u03bc\u03c0\u03b1\u03b9\u03bd\u03b5\u03b9', '\u03b9\u03c0\u03bf\u03b4\u03b9\u03b1\u03c3\u03c4\u03bf\u03bb\u03b9', '\u03ba\u03bf\u03bc\u03bc\u03b1'],\n response: \"\u0397 \u03c5\u03c0\u03bf\u03b4\u03b9\u03b1\u03c3\u03c4\u03bf\u03bb\u03ae \u03bc\u03c0\u03b1\u03af\u03bd\u03b5\u03b9 \u03c3\u03c4\u03bf \u03c4\u03ad\u03bb\u03bf\u03c2! \u039c\u03b5\u03c4\u03c1\u03ac\u03bc\u03b5 \u03c0\u03cc\u03c3\u03b1 \u03b4\u03b5\u03ba\u03b1\u03b4\u03b9\u03ba\u03ac \u03c8\u03b7\u03c6\u03af\u03b1 \u03ad\u03c7\u03bf\u03c5\u03bd \u03ba\u03b1\u03b9 \u03bf\u03b9 \u03b4\u03cd\u03bf \u03b1\u03c1\u03b9\u03b8\u03bc\u03bf\u03af \u03bc\u03b1\u03b6\u03af. \u0391\u03bd \u03bf \u03ad\u03bd\u03b1\u03c2 \u03ad\u03c7\u03b5\u03b9 1 \u03ba\u03b1\u03b9 \u03bf \u03ac\u03bb\u03bb\u03bf\u03c2 2, \u03c4\u03bf \u03b1\u03c0\u03bf\u03c4\u03ad\u03bb\u03b5\u03c3\u03bc\u03b1 \u03b8\u03b1 \u03ad\u03c7\u03b5\u03b9 3!\"\n },\n {\n keywords: ['\u03c0\u03b1\u03c1\u03b1\u03b4\u03b5\u03b9\u03b3\u03bc\u03b1', '\u03b4\u03b9\u03be\u03b5', '\u03b4\u03b9\u03be\u03b1\u03b9', '\u03c0\u03b1\u03c1\u03b1\u03b4\u03b9\u03b3\u03bc\u03b1'],\n response: \"\u0391\u03c2 \u03b4\u03bf\u03cd\u03bc\u03b5 \u03ad\u03bd\u03b1! 0,5 \u03b5\u03c0\u03af 0,2. \u03a3\u03ba\u03ad\u03c8\u03bf\u03c5 5 \u03b5\u03c0\u03af 2 = 10. \u0388\u03c7\u03bf\u03c5\u03bc\u03b5 \u03c3\u03c5\u03bd\u03bf\u03bb\u03b9\u03ba\u03ac 2 \u03b4\u03b5\u03ba\u03b1\u03b4\u03b9\u03ba\u03ac \u03c8\u03b7\u03c6\u03af\u03b1 (\u03ad\u03bd\u03b1 \u03b1\u03c0\u03cc \u03c4\u03bf 0,5 \u03ba\u03b1\u03b9 \u03ad\u03bd\u03b1 \u03b1\u03c0\u03cc \u03c4\u03bf 0,2). \u0386\u03c1\u03b1 \u03c4\u03bf 10 \u03b3\u03af\u03bd\u03b5\u03c4\u03b1\u03b9 0,10!\"\n },\n {\n keywords: ['10', '100', '1000', '\u03b4\u03c5\u03bd\u03b1\u03bc\u03b5\u03b9\u03c2'],\n response: \"\u038c\u03c4\u03b1\u03bd \u03c0\u03bf\u03bb\u03bb\u03b1\u03c0\u03bb\u03b1\u03c3\u03b9\u03ac\u03b6\u03bf\u03c5\u03bc\u03b5 \u03bc\u03b5 10, 100, 1000, \u03b7 \u03c5\u03c0\u03bf\u03b4\u03b9\u03b1\u03c3\u03c4\u03bf\u03bb\u03ae \u03ba\u03ac\u03bd\u03b5\u03b9... \u03ac\u03bb\u03bc\u03b1\u03c4\u03b1 \u03c0\u03c1\u03bf\u03c2 \u03c4\u03b1 \u0394\u0395\u039e\u0399\u0391! \u03a4\u03cc\u03c3\u03b1 \u03ac\u03bb\u03bc\u03b1\u03c4\u03b1 \u03cc\u03c3\u03b1 \u03b5\u03af\u03bd\u03b1\u03b9 \u03ba\u03b1\u03b9 \u03c4\u03b1 \u03bc\u03b7\u03b4\u03b5\u03bd\u03b9\u03ba\u03ac.\"\n }\n ];\n\n \/\/ \u03a3\u03c5\u03bd\u03ac\u03c1\u03c4\u03b7\u03c3\u03b7 \u03b3\u03b9\u03b1 \u03c4\u03bf\u03bd \u03ad\u03bb\u03b5\u03b3\u03c7\u03bf \u03bf\u03bc\u03bf\u03b9\u03cc\u03c4\u03b7\u03c4\u03b1\u03c2 (Levenshtein simple logic \/ Keyword matching)\n function getResponse(text) {\n const input = text.toLowerCase().normalize(\"NFD\").replace(\/[\\u0300-\\u036f]\/g, \"\"); \/\/ \u0391\u03c6\u03b1\u03af\u03c1\u03b5\u03c3\u03b7 \u03c4\u03cc\u03bd\u03c9\u03bd\n \n let bestMatch = null;\n let maxScore = 0;\n\n knowledgeBase.forEach(item => {\n let score = 0;\n item.keywords.forEach(key => {\n if (input.includes(key)) score++;\n });\n\n if (score > maxScore) {\n maxScore = score;\n bestMatch = item.response;\n }\n });\n\n return bestMatch || \"\u0394\u03b5\u03bd \u03b5\u03af\u03bc\u03b1\u03b9 \u03c3\u03af\u03b3\u03bf\u03c5\u03c1\u03bf\u03c2 \u03b1\u03bd \u03ba\u03b1\u03c4\u03ac\u03bb\u03b1\u03b2\u03b1, \u03b1\u03bb\u03bb\u03ac \u03b8\u03c5\u03bc\u03ae\u03c3\u03bf\u03c5: \u03c3\u03c4\u03bf\u03bd \u03c0\u03bf\u03bb\u03bb\u03b1\u03c0\u03bb\u03b1\u03c3\u03b9\u03b1\u03c3\u03bc\u03cc \u03b4\u03b5\u03ba\u03b1\u03b4\u03b9\u03ba\u03ce\u03bd \u03bc\u03b5\u03c4\u03c1\u03ac\u03bc\u03b5 \u03c0\u03ac\u03bd\u03c4\u03b1 \u03c4\u03b1 \u03c8\u03b7\u03c6\u03af\u03b1 \u03c3\u03c4\u03bf \u03c4\u03ad\u03bb\u03bf\u03c2! \u0398\u03ad\u03bb\u03b5\u03b9\u03c2 \u03bd\u03b1 \u03bc\u03b5 \u03c1\u03c9\u03c4\u03ae\u03c3\u03b5\u03b9\u03c2 \u03b3\u03b9\u03b1 \u03c4\u03b1 \u03b2\u03ae\u03bc\u03b1\u03c4\u03b1 \u03ae \u03bd\u03b1 \u03c3\u03bf\u03c5 \u03c0\u03c9 \u03ad\u03bd\u03b1 \u03c0\u03b1\u03c1\u03ac\u03b4\u03b5\u03b9\u03b3\u03bc\u03b1;\";\n }\n\n function addMessage(text, isUser) {\n const div = document.createElement('div');\n div.className = `chat-bubble ${isUser ? 'user-bubble' : 'tutor-bubble'}`;\n div.textContent = text;\n chatWindow.appendChild(div);\n chatWindow.scrollTop = chatWindow.scrollHeight;\n }\n\n function handleUserInput() {\n const text = userInput.value.trim();\n if (!text) return;\n\n addMessage(text, true);\n userInput.value = '';\n\n setTimeout(() => {\n const response = getResponse(text);\n addMessage(response, false);\n }, 600);\n }\n\n \/\/ \u0395\u03c0\u03b9\u03c4\u03c1\u03ad\u03c0\u03b5\u03b9 \u03c4\u03bf \"Enter\" \u03b3\u03b9\u03b1 \u03b1\u03c0\u03bf\u03c3\u03c4\u03bf\u03bb\u03ae\n userInput.addEventListener(\"keypress\", function(event) {\n if (event.key === \"Enter\") {\n handleUserInput();\n }\n });\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"193\" height=\"16\" src=\"https:\/\/prokopidis.sites.sch.gr\/wp-content\/uploads\/2024\/06\/\u03a3\u03c4\u03b9\u03b3\u03bc\u03b9\u03cc\u03c4\u03c5\u03c0\u03bf-\u03bf\u03b8\u03cc\u03bd\u03b7\u03c2-2025-12-30-203202.png\" alt=\"\" class=\"wp-image-5725\"\/><\/figure>\n<\/div>\n\n\n<p><\/p>\n\n\n\n<!doctype html>\n<html lang=\"el\">\n <head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>\u0393\u03bb\u03c9\u03c3\u03c3\u03ac\u03c1\u03b9 \u03a0\u03bf\u03bb\u03bb\u03b1\u03c0\u03bb\u03b1\u03c3\u03b9\u03b1\u03c3\u03bc\u03bf\u03cd \u0394\u03b5\u03ba\u03b1\u03b4\u03b9\u03ba\u03ce\u03bd<\/title>\n <script src=\"\/_sdk\/element_sdk.js\"><\/script>\n <style>\n body {\n box-sizing: border-box;\n }\n \n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n html, body {\n height: 100%;\n width: 100%;\n }\n\n body {\n font-family: 'Comic Sans MS', 'Arial Rounded MT Bold', sans-serif;\n overflow-auto;\n }\n\n .app-wrapper {\n min-height: 100%;\n width: 100%;\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n padding: 2rem;\n }\n\n .main-content {\n max-width: 1000px;\n margin: 0 auto;\n }\n\n .page-header {\n text-align: center;\n margin-bottom: 2.5rem;\n background: white;\n padding: 2rem;\n border-radius: 20px;\n box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);\n }\n\n .page-title {\n font-size: 2.5rem;\n color: #667eea;\n margin-bottom: 0.5rem;\n font-weight: bold;\n }\n\n .page-subtitle {\n font-size: 1.2rem;\n color: #764ba2;\n }\n\n .cards-grid {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 1.5rem;\n margin-bottom: 2rem;\n }\n\n .term-card {\n background: white;\n border-radius: 15px;\n padding: 1.5rem;\n box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);\n cursor: pointer;\n transition: transform 0.3s ease, box-shadow 0.3s ease;\n }\n\n .term-card:hover {\n transform: translateY(-5px);\n box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);\n }\n\n .term-card.card-1 { border-left: 5px solid #FF6B6B; }\n .term-card.card-2 { border-left: 5px solid #4ECDC4; }\n .term-card.card-3 { border-left: 5px solid #FFD93D; }\n .term-card.card-4 { border-left: 5px solid #95E1D3; }\n .term-card.card-5 { border-left: 5px solid #F38181; }\n .term-card.card-6 { border-left: 5px solid #AA96DA; }\n\n .term-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 1rem;\n }\n\n .term-title {\n font-size: 1.5rem;\n font-weight: bold;\n color: #2d3748;\n }\n\n .term-icon {\n font-size: 2rem;\n transition: transform 0.3s ease;\n }\n\n .term-card.expanded .term-icon {\n transform: rotate(180deg);\n }\n\n .term-definition {\n max-height: 0;\n overflow: hidden;\n transition: max-height 0.4s ease;\n color: #4a5568;\n line-height: 1.6;\n font-size: 1.1rem;\n }\n\n .term-card.expanded .term-definition {\n max-height: 500px;\n margin-top: 1rem;\n }\n\n .term-example {\n background: #f7fafc;\n padding: 1rem;\n border-radius: 10px;\n margin-top: 1rem;\n border-left: 3px solid #667eea;\n }\n\n .example-label {\n font-weight: bold;\n color: #667eea;\n margin-bottom: 0.5rem;\n }\n\n @media (max-width: 768px) {\n .cards-grid {\n grid-template-columns: 1fr;\n }\n\n .page-title {\n font-size: 2rem;\n }\n\n .term-title {\n font-size: 1.2rem;\n }\n }\n <\/style>\n <style>@view-transition { navigation: auto; }<\/style>\n <script src=\"\/_sdk\/data_sdk.js\" type=\"text\/javascript\"><\/script>\n <script src=\"https:\/\/cdn.tailwindcss.com\" type=\"text\/javascript\"><\/script>\n <\/head>\n <body>\n <div class=\"app-wrapper\">\n <div class=\"main-content\">\n <header class=\"page-header\">\n <h1 class=\"page-title\" id=\"mainTitle\">\ud83d\udcda \u0393\u03bb\u03c9\u03c3\u03c3\u03ac\u03c1\u03b9 \u039c\u03b1\u03b8\u03b7\u03bc\u03b1\u03c4\u03b9\u03ba\u03ce\u03bd<\/h1>\n <p class=\"page-subtitle\" id=\"subtitle\">\u039f \u03a0\u03bf\u03bb\u03bb\u03b1\u03c0\u03bb\u03b1\u03c3\u03b9\u03b1\u03c3\u03bc\u03cc\u03c2 \u03c3\u03c4\u03bf\u03c5\u03c2 \u0394\u03b5\u03ba\u03b1\u03b4\u03b9\u03ba\u03bf\u03cd\u03c2 \u0391\u03c1\u03b9\u03b8\u03bc\u03bf\u03cd\u03c2<\/p>\n <\/header>\n <div class=\"cards-grid\">\n <article class=\"term-card card-1\" onclick=\"toggleCard(this)\">\n <div class=\"term-header\">\n <h2 class=\"term-title\">\ud83d\udd22 \u0394\u03b5\u03ba\u03b1\u03b4\u03b9\u03ba\u03cc\u03c2 \u0391\u03c1\u03b9\u03b8\u03bc\u03cc\u03c2<\/h2><span class=\"term-icon\">\u2b07\ufe0f<\/span>\n <\/div>\n <div class=\"term-definition\">\n <p>\u0395\u03af\u03bd\u03b1\u03b9 \u03ad\u03bd\u03b1\u03c2 \u03b1\u03c1\u03b9\u03b8\u03bc\u03cc\u03c2 \u03c0\u03bf\u03c5 \u03ad\u03c7\u03b5\u03b9 \u03b4\u03cd\u03bf \u03bc\u03ad\u03c1\u03b7: \u03c4\u03bf \u03b1\u03ba\u03ad\u03c1\u03b1\u03b9\u03bf \u03bc\u03ad\u03c1\u03bf\u03c2 \u03ba\u03b1\u03b9 \u03c4\u03bf \u03b4\u03b5\u03ba\u03b1\u03b4\u03b9\u03ba\u03cc \u03bc\u03ad\u03c1\u03bf\u03c2. \u03a4\u03b1 \u03b4\u03cd\u03bf \u03bc\u03ad\u03c1\u03b7 \u03c7\u03c9\u03c1\u03af\u03b6\u03bf\u03bd\u03c4\u03b1\u03b9 \u03bc\u03b5 \u03c4\u03b7\u03bd \u03c5\u03c0\u03bf\u03b4\u03b9\u03b1\u03c3\u03c4\u03bf\u03bb\u03ae (\u03ba\u03cc\u03bc\u03bc\u03b1).<\/p>\n <div class=\"term-example\">\n <div class=\"example-label\">\n \ud83d\udccc \u03a0\u03b1\u03c1\u03ac\u03b4\u03b5\u03b9\u03b3\u03bc\u03b1:\n <\/div>\n <div>\n 3,5 \u2192 \u03c4\u03bf 3 \u03b5\u03af\u03bd\u03b1\u03b9 \u03c4\u03bf \u03b1\u03ba\u03ad\u03c1\u03b1\u03b9\u03bf \u03bc\u03ad\u03c1\u03bf\u03c2 \u03ba\u03b1\u03b9 \u03c4\u03bf 5 \u03b5\u03af\u03bd\u03b1\u03b9 \u03c4\u03bf \u03b4\u03b5\u03ba\u03b1\u03b4\u03b9\u03ba\u03cc \u03bc\u03ad\u03c1\u03bf\u03c2\n <\/div>\n <\/div>\n <\/div>\n <\/article>\n <article class=\"term-card card-2\" onclick=\"toggleCard(this)\">\n <div class=\"term-header\">\n <h2 class=\"term-title\">\u2716\ufe0f \u03a0\u03bf\u03bb\u03bb\u03b1\u03c0\u03bb\u03b1\u03c3\u03b9\u03b1\u03c3\u03bc\u03cc\u03c2<\/h2><span class=\"term-icon\">\u2b07\ufe0f<\/span>\n <\/div>\n <div class=\"term-definition\">\n <p>\u0395\u03af\u03bd\u03b1\u03b9 \u03b7 \u03bc\u03b1\u03b8\u03b7\u03bc\u03b1\u03c4\u03b9\u03ba\u03ae \u03c0\u03c1\u03ac\u03be\u03b7 \u03cc\u03c0\u03bf\u03c5 \u03ad\u03bd\u03b1\u03c2 \u03b1\u03c1\u03b9\u03b8\u03bc\u03cc\u03c2 (\u03c0\u03bf\u03bb\u03bb\u03b1\u03c0\u03bb\u03b1\u03c3\u03b9\u03b1\u03c3\u03c4\u03ad\u03bf\u03c2) \u03b5\u03c0\u03b1\u03bd\u03b1\u03bb\u03b1\u03bc\u03b2\u03ac\u03bd\u03b5\u03c4\u03b1\u03b9 \u03c4\u03cc\u03c3\u03b5\u03c2 \u03c6\u03bf\u03c1\u03ad\u03c2 \u03cc\u03c3\u03b5\u03c2 \u03b4\u03b5\u03af\u03c7\u03bd\u03b5\u03b9 \u03ad\u03bd\u03b1\u03c2 \u03ac\u03bb\u03bb\u03bf\u03c2 \u03b1\u03c1\u03b9\u03b8\u03bc\u03cc\u03c2 (\u03c0\u03bf\u03bb\u03bb\u03b1\u03c0\u03bb\u03b1\u03c3\u03b9\u03b1\u03c3\u03c4\u03ae\u03c2).<\/p>\n <div class=\"term-example\">\n <div class=\"example-label\">\n \ud83d\udccc \u03a0\u03b1\u03c1\u03ac\u03b4\u03b5\u03b9\u03b3\u03bc\u03b1:\n <\/div>\n <div>\n 2,5 \u00d7 3 = 2,5 + 2,5 + 2,5 = 7,5\n <\/div>\n <\/div>\n <\/div>\n <\/article>\n <article class=\"term-card card-3\" onclick=\"toggleCard(this)\">\n <div class=\"term-header\">\n <h2 class=\"term-title\">\ud83d\udccd \u03a5\u03c0\u03bf\u03b4\u03b9\u03b1\u03c3\u03c4\u03bf\u03bb\u03ae<\/h2><span class=\"term-icon\">\u2b07\ufe0f<\/span>\n <\/div>\n <div class=\"term-definition\">\n <p>\u0395\u03af\u03bd\u03b1\u03b9 \u03c4\u03bf \u03c3\u03b7\u03bc\u03b5\u03af\u03bf (\u03ba\u03cc\u03bc\u03bc\u03b1) \u03c0\u03bf\u03c5 \u03c7\u03c9\u03c1\u03af\u03b6\u03b5\u03b9 \u03c4\u03bf \u03b1\u03ba\u03ad\u03c1\u03b1\u03b9\u03bf \u03bc\u03ad\u03c1\u03bf\u03c2 \u03b1\u03c0\u03cc \u03c4\u03bf \u03b4\u03b5\u03ba\u03b1\u03b4\u03b9\u03ba\u03cc \u03bc\u03ad\u03c1\u03bf\u03c2 \u03b5\u03bd\u03cc\u03c2 \u03b1\u03c1\u03b9\u03b8\u03bc\u03bf\u03cd. \u03a3\u03c4\u03bf\u03bd \u03c0\u03bf\u03bb\u03bb\u03b1\u03c0\u03bb\u03b1\u03c3\u03b9\u03b1\u03c3\u03bc\u03cc, \u03c0\u03c1\u03bf\u03c3\u03ad\u03c7\u03bf\u03c5\u03bc\u03b5 \u03c0\u03cc\u03c3\u03b1 \u03b4\u03b5\u03ba\u03b1\u03b4\u03b9\u03ba\u03ac \u03c8\u03b7\u03c6\u03af\u03b1 \u03ad\u03c7\u03bf\u03c5\u03bd \u03bf\u03b9 \u03c0\u03b1\u03c1\u03ac\u03b3\u03bf\u03bd\u03c4\u03b5\u03c2 \u03b3\u03b9\u03b1 \u03bd\u03b1 \u03b2\u03ac\u03bb\u03bf\u03c5\u03bc\u03b5 \u03c3\u03c9\u03c3\u03c4\u03ac \u03c4\u03b7\u03bd \u03c5\u03c0\u03bf\u03b4\u03b9\u03b1\u03c3\u03c4\u03bf\u03bb\u03ae \u03c3\u03c4\u03bf \u03b3\u03b9\u03bd\u03cc\u03bc\u03b5\u03bd\u03bf.<\/p>\n <div class=\"term-example\">\n <div class=\"example-label\">\n \ud83d\udccc \u03a0\u03b1\u03c1\u03ac\u03b4\u03b5\u03b9\u03b3\u03bc\u03b1:\n <\/div>\n <div>\n 1,2 \u00d7 0,3 = 0,36 (1+1=2 \u03b4\u03b5\u03ba\u03b1\u03b4\u03b9\u03ba\u03ac \u03c8\u03b7\u03c6\u03af\u03b1)\n <\/div>\n <\/div>\n <\/div>\n <\/article>\n <article class=\"term-card card-4\" onclick=\"toggleCard(this)\">\n <div class=\"term-header\">\n <h2 class=\"term-title\">\ud83c\udfaf \u0393\u03b9\u03bd\u03cc\u03bc\u03b5\u03bd\u03bf<\/h2><span class=\"term-icon\">\u2b07\ufe0f<\/span>\n <\/div>\n <div class=\"term-definition\">\n <p>\u0395\u03af\u03bd\u03b1\u03b9 \u03c4\u03bf \u03b1\u03c0\u03bf\u03c4\u03ad\u03bb\u03b5\u03c3\u03bc\u03b1 \u03c4\u03bf\u03c5 \u03c0\u03bf\u03bb\u03bb\u03b1\u03c0\u03bb\u03b1\u03c3\u03b9\u03b1\u03c3\u03bc\u03bf\u03cd. \u038c\u03c4\u03b1\u03bd \u03c0\u03bf\u03bb\u03bb\u03b1\u03c0\u03bb\u03b1\u03c3\u03b9\u03ac\u03b6\u03bf\u03c5\u03bc\u03b5 \u03b4\u03b5\u03ba\u03b1\u03b4\u03b9\u03ba\u03bf\u03cd\u03c2 \u03b1\u03c1\u03b9\u03b8\u03bc\u03bf\u03cd\u03c2, \u03c4\u03bf \u03b3\u03b9\u03bd\u03cc\u03bc\u03b5\u03bd\u03bf \u03b5\u03af\u03bd\u03b1\u03b9 \u03b5\u03c0\u03af\u03c3\u03b7\u03c2 \u03b4\u03b5\u03ba\u03b1\u03b4\u03b9\u03ba\u03cc\u03c2 \u03b1\u03c1\u03b9\u03b8\u03bc\u03cc\u03c2.<\/p>\n <div class=\"term-example\">\n <div class=\"example-label\">\n \ud83d\udccc \u03a0\u03b1\u03c1\u03ac\u03b4\u03b5\u03b9\u03b3\u03bc\u03b1:\n <\/div>\n <div>\n 4,5 \u00d7 2 = 9 \u2192 \u03a4\u03bf 9 \u03b5\u03af\u03bd\u03b1\u03b9 \u03c4\u03bf \u03b3\u03b9\u03bd\u03cc\u03bc\u03b5\u03bd\u03bf\n <\/div>\n <\/div>\n <\/div>\n <\/article>\n <article class=\"term-card card-5\" onclick=\"toggleCard(this)\">\n <div class=\"term-header\">\n <h2 class=\"term-title\">\ud83d\udd1f \u0394\u03b5\u03ba\u03b1\u03b4\u03b9\u03ba\u03cc \u03a8\u03b7\u03c6\u03af\u03bf<\/h2><span class=\"term-icon\">\u2b07\ufe0f<\/span>\n <\/div>\n <div class=\"term-definition\">\n <p>\u0395\u03af\u03bd\u03b1\u03b9 \u03c4\u03b1 \u03c8\u03b7\u03c6\u03af\u03b1 \u03c0\u03bf\u03c5 \u03b2\u03c1\u03af\u03c3\u03ba\u03bf\u03bd\u03c4\u03b1\u03b9 \u03b4\u03b5\u03be\u03b9\u03ac \u03c4\u03b7\u03c2 \u03c5\u03c0\u03bf\u03b4\u03b9\u03b1\u03c3\u03c4\u03bf\u03bb\u03ae\u03c2. \u03a3\u03c4\u03bf\u03bd \u03c0\u03bf\u03bb\u03bb\u03b1\u03c0\u03bb\u03b1\u03c3\u03b9\u03b1\u03c3\u03bc\u03cc, \u03bc\u03b5\u03c4\u03c1\u03ac\u03bc\u03b5 \u03c0\u03cc\u03c3\u03b1 \u03b4\u03b5\u03ba\u03b1\u03b4\u03b9\u03ba\u03ac \u03c8\u03b7\u03c6\u03af\u03b1 \u03ad\u03c7\u03bf\u03c5\u03bd \u03cc\u03bb\u03bf\u03b9 \u03bf\u03b9 \u03c0\u03b1\u03c1\u03ac\u03b3\u03bf\u03bd\u03c4\u03b5\u03c2 \u03bc\u03b1\u03b6\u03af \u03b3\u03b9\u03b1 \u03bd\u03b1 \u03b2\u03ac\u03bb\u03bf\u03c5\u03bc\u03b5 \u03c4\u03b7 \u03c3\u03c9\u03c3\u03c4\u03ae \u03c5\u03c0\u03bf\u03b4\u03b9\u03b1\u03c3\u03c4\u03bf\u03bb\u03ae.<\/p>\n <div class=\"term-example\">\n <div class=\"example-label\">\n \ud83d\udccc \u03a0\u03b1\u03c1\u03ac\u03b4\u03b5\u03b9\u03b3\u03bc\u03b1:\n <\/div>\n <div>\n 0,25 \u00d7 0,4 \u2192 2 + 1 = 3 \u03b4\u03b5\u03ba\u03b1\u03b4\u03b9\u03ba\u03ac \u03c8\u03b7\u03c6\u03af\u03b1 \u2192 0,100 = 0,1\n <\/div>\n <\/div>\n <\/div>\n <\/article>\n <article class=\"term-card card-6\" onclick=\"toggleCard(this)\">\n <div class=\"term-header\">\n <h2 class=\"term-title\">\u26a1 \u039a\u03b1\u03bd\u03cc\u03bd\u03b1\u03c2 \u03a0\u03bf\u03bb\u03bb\u03b1\u03c0\u03bb\u03b1\u03c3\u03b9\u03b1\u03c3\u03bc\u03bf\u03cd<\/h2><span class=\"term-icon\">\u2b07\ufe0f<\/span>\n <\/div>\n <div class=\"term-definition\">\n <p>\u03a0\u03bf\u03bb\u03bb\u03b1\u03c0\u03bb\u03b1\u03c3\u03b9\u03ac\u03b6\u03bf\u03c5\u03bc\u03b5 \u03c4\u03bf\u03c5\u03c2 \u03b4\u03b5\u03ba\u03b1\u03b4\u03b9\u03ba\u03bf\u03cd\u03c2 \u03c3\u03b1\u03bd \u03bd\u03b1 \u03b5\u03af\u03bd\u03b1\u03b9 \u03b1\u03ba\u03ad\u03c1\u03b1\u03b9\u03bf\u03b9 (\u03b1\u03b3\u03bd\u03bf\u03ce\u03bd\u03c4\u03b1\u03c2 \u03c4\u03b7\u03bd \u03c5\u03c0\u03bf\u03b4\u03b9\u03b1\u03c3\u03c4\u03bf\u03bb\u03ae). \u039c\u03b5\u03c4\u03ac, \u03bc\u03b5\u03c4\u03c1\u03ac\u03bc\u03b5 \u03c4\u03b1 \u03b4\u03b5\u03ba\u03b1\u03b4\u03b9\u03ba\u03ac \u03c8\u03b7\u03c6\u03af\u03b1 \u03ba\u03b1\u03b9 \u03c4\u03c9\u03bd \u03b4\u03cd\u03bf \u03b1\u03c1\u03b9\u03b8\u03bc\u03ce\u03bd \u03ba\u03b1\u03b9 \u03b2\u03ac\u03b6\u03bf\u03c5\u03bc\u03b5 \u03c4\u03b7\u03bd \u03c5\u03c0\u03bf\u03b4\u03b9\u03b1\u03c3\u03c4\u03bf\u03bb\u03ae \u03c3\u03c4\u03bf \u03b1\u03c0\u03bf\u03c4\u03ad\u03bb\u03b5\u03c3\u03bc\u03b1.<\/p>\n <div class=\"term-example\">\n <div class=\"example-label\">\n \ud83d\udccc \u03a0\u03b1\u03c1\u03ac\u03b4\u03b5\u03b9\u03b3\u03bc\u03b1:\n <\/div>\n <div>\n 1,5 \u00d7 2,3 \u2192 15 \u00d7 23 = 345 \u2192 1+1=2 \u03c8\u03b7\u03c6\u03af\u03b1 \u2192 3,45\n <\/div>\n <\/div>\n <\/div>\n <\/article>\n <\/div>\n <\/div>\n <\/div>\n <script>\n const defaultConfig = {\n main_title: \"\ud83d\udcda \u0393\u03bb\u03c9\u03c3\u03c3\u03ac\u03c1\u03b9 \u039c\u03b1\u03b8\u03b7\u03bc\u03b1\u03c4\u03b9\u03ba\u03ce\u03bd\",\n subtitle: \"\u039f \u03a0\u03bf\u03bb\u03bb\u03b1\u03c0\u03bb\u03b1\u03c3\u03b9\u03b1\u03c3\u03bc\u03cc\u03c2 \u03c3\u03c4\u03bf\u03c5\u03c2 \u0394\u03b5\u03ba\u03b1\u03b4\u03b9\u03ba\u03bf\u03cd\u03c2 \u0391\u03c1\u03b9\u03b8\u03bc\u03bf\u03cd\u03c2\",\n background_color: \"#667eea\",\n card_background: \"#ffffff\",\n title_color: \"#667eea\",\n text_color: \"#2d3748\",\n font_family: \"Comic Sans MS\"\n };\n\n function toggleCard(card) {\n card.classList.toggle('expanded');\n }\n\n async function onConfigChange(config) {\n const mainTitle = document.getElementById('mainTitle');\n const subtitle = document.getElementById('subtitle');\n\n if (mainTitle) {\n mainTitle.textContent = config.main_title || defaultConfig.main_title;\n }\n if (subtitle) {\n subtitle.textContent = config.subtitle || defaultConfig.subtitle;\n }\n }\n\n function mapToCapabilities(config) {\n return {\n recolorables: [\n {\n get: () => config.background_color || defaultConfig.background_color,\n set: (value) => {\n config.background_color = value;\n const wrapper = document.querySelector('.app-wrapper');\n if (wrapper) {\n wrapper.style.background = `linear-gradient(135deg, ${value} 0%, ${value} 100%)`;\n }\n window.elementSdk.setConfig({ background_color: value });\n }\n },\n {\n get: () => config.card_background || defaultConfig.card_background,\n set: (value) => {\n config.card_background = value;\n const cards = document.querySelectorAll('.term-card, .page-header');\n cards.forEach(card => {\n card.style.backgroundColor = value;\n });\n window.elementSdk.setConfig({ card_background: value });\n }\n },\n {\n get: () => config.title_color || defaultConfig.title_color,\n set: (value) => {\n config.title_color = value;\n const titles = document.querySelectorAll('.page-title, .example-label');\n titles.forEach(title => {\n title.style.color = value;\n });\n window.elementSdk.setConfig({ title_color: value });\n }\n },\n {\n get: () => config.text_color || defaultConfig.text_color,\n set: (value) => {\n config.text_color = value;\n const texts = document.querySelectorAll('.term-title, .term-definition, .page-subtitle');\n texts.forEach(text => {\n text.style.color = value;\n });\n window.elementSdk.setConfig({ text_color: value });\n }\n }\n ],\n borderables: [],\n fontEditable: {\n get: () => config.font_family || defaultConfig.font_family,\n set: (value) => {\n config.font_family = value;\n document.body.style.fontFamily = `${value}, 'Comic Sans MS', 'Arial Rounded MT Bold', sans-serif`;\n window.elementSdk.setConfig({ font_family: value });\n }\n },\n fontSizeable: undefined\n };\n }\n\n function mapToEditPanelValues(config) {\n return new Map([\n [\"main_title\", config.main_title || defaultConfig.main_title],\n [\"subtitle\", config.subtitle || defaultConfig.subtitle]\n ]);\n }\n\n if (window.elementSdk) {\n window.elementSdk.init({\n defaultConfig,\n onConfigChange,\n mapToCapabilities,\n mapToEditPanelValues\n });\n }\n <\/script>\n <script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML=\"window.__CF$cv$params={r:'9b7b2a04756e6f67',t:'MTc2NzM2NjQyNi4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='\/cdn-cgi\/challenge-platform\/scripts\/jsd\/main.js';document.getElementsByTagName('head')[0].appendChild(a);\";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();<\/script><\/body>\n<\/html>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"193\" height=\"16\" src=\"https:\/\/prokopidis.sites.sch.gr\/wp-content\/uploads\/2024\/06\/\u03a3\u03c4\u03b9\u03b3\u03bc\u03b9\u03cc\u03c4\u03c5\u03c0\u03bf-\u03bf\u03b8\u03cc\u03bd\u03b7\u03c2-2025-12-30-203202.png\" alt=\"\" class=\"wp-image-5725\"\/><\/figure>\n<\/div>\n\n\n<!doctype html>\n<html lang=\"el\">\n <head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>\u03a0\u03bf\u03bb\u03bb\u03b1\u03c0\u03bb\u03b1\u03c3\u03b9\u03b1\u03c3\u03bc\u03cc\u03c2 \u0394\u03b5\u03ba\u03b1\u03b4\u03b9\u03ba\u03ce\u03bd \u0391\u03c1\u03b9\u03b8\u03bc\u03ce\u03bd<\/title>\n <script src=\"\/_sdk\/element_sdk.js\"><\/script>\n <style>\n body {\n box-sizing: border-box;\n }\n \n * {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n }\n\n html, body {\n height: 100%;\n }\n\n .app-wrapper {\n width: 100%;\n height: 100%;\n overflow-auto;\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n padding: 40px 20px;\n }\n\n .main-content {\n max-width: 1200px;\n margin: 0 auto;\n }\n\n .page-title {\n text-align: center;\n color: #1e3a8a;\n font-size: 42px;\n font-weight: bold;\n margin-bottom: 40px;\n text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);\n background: white;\n padding: 30px;\n border-radius: 20px;\n box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);\n }\n\n .tabs-grid {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 30px;\n margin-bottom: 40px;\n }\n\n .tab-card {\n background: white;\n border-radius: 16px;\n padding: 30px;\n box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);\n cursor: pointer;\n transition: all 0.3s ease;\n border: 3px solid transparent;\n }\n\n .tab-card:hover {\n transform: translateY(-5px);\n box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);\n border-color: #667eea;\n }\n\n .tab-card.active {\n border-color: #667eea;\n background: linear-gradient(135deg, #f8f9ff 0%, #e8ecff 100%);\n }\n\n .tab-icon {\n font-size: 48px;\n margin-bottom: 15px;\n text-align: center;\n }\n\n .tab-title {\n font-size: 24px;\n font-weight: bold;\n color: #1e3a8a;\n text-align: center;\n margin-bottom: 10px;\n }\n\n .tab-description {\n font-size: 16px;\n color: #64748b;\n text-align: center;\n }\n\n .content-area {\n background: white;\n border-radius: 16px;\n padding: 40px;\n box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);\n min-height: 400px;\n }\n\n .content-section {\n display: none;\n }\n\n .content-section.active {\n display: block;\n animation: fadeIn 0.5s ease;\n }\n\n @keyframes fadeIn {\n from {\n opacity: 0;\n transform: translateY(20px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n .section-title {\n font-size: 28px;\n font-weight: bold;\n color: #1e3a8a;\n margin-bottom: 25px;\n padding-bottom: 15px;\n border-bottom: 3px solid #667eea;\n }\n\n .theory-content {\n line-height: 1.8;\n color: #334155;\n font-size: 18px;\n }\n\n .theory-content strong {\n color: #1e3a8a;\n font-size: 20px;\n }\n\n .example-box {\n background: #f1f5f9;\n border-left: 5px solid #667eea;\n padding: 20px;\n margin: 20px 0;\n border-radius: 8px;\n }\n\n .example-title {\n font-weight: bold;\n color: #1e3a8a;\n margin-bottom: 10px;\n font-size: 20px;\n }\n\n .exercise-item {\n background: #f8fafc;\n padding: 25px;\n margin: 20px 0;\n border-radius: 12px;\n border: 2px solid #e2e8f0;\n }\n\n .exercise-question {\n font-size: 20px;\n font-weight: bold;\n color: #334155;\n margin-bottom: 15px;\n }\n\n .exercise-input {\n display: flex;\n gap: 15px;\n align-items: center;\n margin: 15px 0;\n }\n\n .exercise-input input {\n flex: 1;\n padding: 12px 20px;\n font-size: 18px;\n border: 2px solid #cbd5e1;\n border-radius: 8px;\n transition: border-color 0.3s ease;\n }\n\n .exercise-input input:focus {\n outline: none;\n border-color: #667eea;\n }\n\n .check-button {\n background: #667eea;\n color: white;\n border: none;\n padding: 12px 30px;\n border-radius: 8px;\n font-size: 16px;\n font-weight: bold;\n cursor: pointer;\n transition: all 0.3s ease;\n }\n\n .check-button:hover {\n background: #5568d3;\n transform: scale(1.05);\n }\n\n .feedback {\n margin-top: 15px;\n padding: 15px;\n border-radius: 8px;\n font-weight: bold;\n display: none;\n }\n\n .feedback.correct {\n background: #d1fae5;\n color: #065f46;\n border: 2px solid #10b981;\n display: block;\n }\n\n .feedback.incorrect {\n background: #fee2e2;\n color: #991b1b;\n border: 2px solid #ef4444;\n display: block;\n }\n\n .quiz-question {\n background: #f8fafc;\n padding: 25px;\n margin: 20px 0;\n border-radius: 12px;\n border: 2px solid #e2e8f0;\n }\n\n .quiz-text {\n font-size: 20px;\n font-weight: bold;\n color: #334155;\n margin-bottom: 20px;\n }\n\n .quiz-options {\n display: flex;\n flex-direction: column;\n gap: 12px;\n }\n\n .quiz-option {\n background: white;\n padding: 15px 20px;\n border: 2px solid #cbd5e1;\n border-radius: 8px;\n cursor: pointer;\n transition: all 0.3s ease;\n font-size: 18px;\n }\n\n .quiz-option:hover {\n border-color: #667eea;\n background: #f1f5f9;\n }\n\n .quiz-option.selected {\n background: #667eea;\n color: white;\n border-color: #667eea;\n }\n\n .quiz-option.correct {\n background: #10b981;\n color: white;\n border-color: #10b981;\n }\n\n .quiz-option.incorrect {\n background: #ef4444;\n color: white;\n border-color: #ef4444;\n }\n\n .score-display {\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n color: white;\n padding: 25px;\n border-radius: 12px;\n text-align: center;\n margin-top: 30px;\n font-size: 24px;\n font-weight: bold;\n }\n\n @media (max-width: 768px) {\n .tabs-grid {\n grid-template-columns: 1fr;\n }\n\n .page-title {\n font-size: 32px;\n padding: 20px;\n }\n\n .content-area {\n padding: 25px;\n }\n }\n <\/style>\n <style>@view-transition { navigation: auto; }<\/style>\n <script src=\"\/_sdk\/data_sdk.js\" type=\"text\/javascript\"><\/script>\n <script src=\"https:\/\/cdn.tailwindcss.com\" type=\"text\/javascript\"><\/script>\n <\/head>\n <body>\n <div class=\"app-wrapper\">\n <div class=\"main-content\">\n <h1 class=\"page-title\" id=\"mainTitle\">\u039f \u03a0\u03bf\u03bb\u03bb\u03b1\u03c0\u03bb\u03b1\u03c3\u03b9\u03b1\u03c3\u03bc\u03cc\u03c2 \u03c3\u03c4\u03bf\u03c5\u03c2 \u0394\u03b5\u03ba\u03b1\u03b4\u03b9\u03ba\u03bf\u03cd\u03c2 \u0391\u03c1\u03b9\u03b8\u03bc\u03bf\u03cd\u03c2<\/h1>\n <div class=\"tabs-grid\">\n <div class=\"tab-card\" data-tab=\"theory\">\n <div class=\"tab-icon\">\n \ud83d\udcda\n <\/div>\n <div class=\"tab-title\" id=\"tab1Title\">\n \u0398\u03b5\u03c9\u03c1\u03af\u03b1\n <\/div>\n <div class=\"tab-description\">\n \u039c\u03ac\u03b8\u03b5 \u03c4\u03bf\u03c5\u03c2 \u03ba\u03b1\u03bd\u03cc\u03bd\u03b5\u03c2\n <\/div>\n <\/div>\n <div class=\"tab-card\" data-tab=\"examples\">\n <div class=\"tab-icon\">\n \ud83d\udca1\n <\/div>\n <div class=\"tab-title\" id=\"tab2Title\">\n \u03a0\u03b1\u03c1\u03b1\u03b4\u03b5\u03af\u03b3\u03bc\u03b1\u03c4\u03b1\n <\/div>\n <div class=\"tab-description\">\n \u0394\u03b5\u03c2 \u03bb\u03c5\u03bc\u03ad\u03bd\u03b5\u03c2 \u03b1\u03c3\u03ba\u03ae\u03c3\u03b5\u03b9\u03c2\n <\/div>\n <\/div>\n <div class=\"tab-card\" data-tab=\"exercises\">\n <div class=\"tab-icon\">\n \u270f\ufe0f\n <\/div>\n <div class=\"tab-title\" id=\"tab3Title\">\n \u0391\u03c3\u03ba\u03ae\u03c3\u03b5\u03b9\u03c2\n <\/div>\n <div class=\"tab-description\">\n \u0395\u03be\u03b1\u03c3\u03ba\u03ae\u03c3\u03bf\u03c5 \u03c3\u03c4\u03b1 \u03bc\u03b1\u03b8\u03b7\u03bc\u03b1\u03c4\u03b9\u03ba\u03ac\n <\/div>\n <\/div>\n <div class=\"tab-card\" data-tab=\"quiz\">\n <div class=\"tab-icon\">\n \ud83c\udfaf\n <\/div>\n <div class=\"tab-title\" id=\"tab4Title\">\n \u039a\u03bf\u03c5\u03af\u03b6\n <\/div>\n <div class=\"tab-description\">\n \u0394\u03bf\u03ba\u03af\u03bc\u03b1\u03c3\u03b5 \u03c4\u03b9\u03c2 \u03b3\u03bd\u03ce\u03c3\u03b5\u03b9\u03c2 \u03c3\u03bf\u03c5\n <\/div>\n <\/div>\n <\/div>\n <div class=\"content-area\">\n <div class=\"content-section active\" id=\"theory\">\n <h2 class=\"section-title\">\u0398\u03b5\u03c9\u03c1\u03af\u03b1 – \u039a\u03b1\u03bd\u03cc\u03bd\u03b5\u03c2 \u03a0\u03bf\u03bb\u03bb\u03b1\u03c0\u03bb\u03b1\u03c3\u03b9\u03b1\u03c3\u03bc\u03bf\u03cd<\/h2>\n <div class=\"theory-content\">\n <p><strong>\u03a0\u03ce\u03c2 \u03c0\u03bf\u03bb\u03bb\u03b1\u03c0\u03bb\u03b1\u03c3\u03b9\u03ac\u03b6\u03bf\u03c5\u03bc\u03b5 \u03b4\u03b5\u03ba\u03b1\u03b4\u03b9\u03ba\u03bf\u03cd\u03c2 \u03b1\u03c1\u03b9\u03b8\u03bc\u03bf\u03cd\u03c2;<\/strong><\/p>\n <div class=\"example-box\">\n <div class=\"example-title\">\n \ud83d\udcdd \u0392\u03ae\u03bc\u03b1 1:\n <\/div>\n <p>\u03a0\u03bf\u03bb\u03bb\u03b1\u03c0\u03bb\u03b1\u03c3\u03b9\u03ac\u03b6\u03bf\u03c5\u03bc\u03b5 \u03c4\u03bf\u03c5\u03c2 \u03b1\u03c1\u03b9\u03b8\u03bc\u03bf\u03cd\u03c2 \u03c7\u03c9\u03c1\u03af\u03c2 \u03bd\u03b1 \u03bb\u03ac\u03b2\u03bf\u03c5\u03bc\u03b5 \u03c5\u03c0\u03cc\u03c8\u03b7 \u03c4\u03b7\u03bd \u03c5\u03c0\u03bf\u03b4\u03b9\u03b1\u03c3\u03c4\u03bf\u03bb\u03ae (\u03b4\u03b7\u03bb\u03b1\u03b4\u03ae \u03c3\u03b1\u03bd \u03bd\u03b1 \u03b5\u03af\u03bd\u03b1\u03b9 \u03b1\u03ba\u03ad\u03c1\u03b1\u03b9\u03bf\u03b9).<\/p>\n <\/div>\n <div class=\"example-box\">\n <div class=\"example-title\">\n \ud83d\udcdd \u0392\u03ae\u03bc\u03b1 2:\n <\/div>\n <p>\u039c\u03b5\u03c4\u03c1\u03ac\u03bc\u03b5 \u03c0\u03cc\u03c3\u03b1 \u03c8\u03b7\u03c6\u03af\u03b1 \u03ad\u03c7\u03b5\u03b9 \u03c4\u03bf \u03c0\u03c1\u03ce\u03c4\u03bf \u03b4\u03b5\u03ba\u03b1\u03b4\u03b9\u03ba\u03cc \u03bc\u03ad\u03c1\u03bf\u03c2 \u03ba\u03b1\u03b9 \u03c0\u03cc\u03c3\u03b1 \u03c4\u03bf \u03b4\u03b5\u03cd\u03c4\u03b5\u03c1\u03bf.<\/p>\n <\/div>\n <div class=\"example-box\">\n <div class=\"example-title\">\n \ud83d\udcdd \u0392\u03ae\u03bc\u03b1 3:\n <\/div>\n <p>\u03a4\u03bf\u03c0\u03bf\u03b8\u03b5\u03c4\u03bf\u03cd\u03bc\u03b5 \u03c4\u03b7\u03bd \u03c5\u03c0\u03bf\u03b4\u03b9\u03b1\u03c3\u03c4\u03bf\u03bb\u03ae \u03c3\u03c4\u03bf \u03b3\u03b9\u03bd\u03cc\u03bc\u03b5\u03bd\u03bf, \u03bc\u03b5\u03c4\u03c1\u03ce\u03bd\u03c4\u03b1\u03c2 \u03b1\u03c0\u03cc \u03c4\u03b1 \u03b4\u03b5\u03be\u03b9\u03ac \u03c0\u03c1\u03bf\u03c2 \u03c4\u03b1 \u03b1\u03c1\u03b9\u03c3\u03c4\u03b5\u03c1\u03ac \u03c4\u03cc\u03c3\u03b1 \u03c8\u03b7\u03c6\u03af\u03b1 \u03cc\u03c3\u03b1 \u03b5\u03af\u03bd\u03b1\u03b9 \u03c4\u03bf \u03ac\u03b8\u03c1\u03bf\u03b9\u03c3\u03bc\u03b1 \u03c4\u03c9\u03bd \u03b4\u03b5\u03ba\u03b1\u03b4\u03b9\u03ba\u03ce\u03bd \u03c8\u03b7\u03c6\u03af\u03c9\u03bd \u03c4\u03c9\u03bd \u03b4\u03cd\u03bf \u03c0\u03b1\u03c1\u03b1\u03b3\u03cc\u03bd\u03c4\u03c9\u03bd.<\/p>\n <\/div>\n <div class=\"example-box\">\n <div class=\"example-title\">\n \u2728 \u03a0\u03b1\u03c1\u03ac\u03b4\u03b5\u03b9\u03b3\u03bc\u03b1:\n <\/div>\n <p><strong>2,5 \u00d7 1,2 = ;<\/strong><\/p>\n <p>\u2022 \u03a0\u03bf\u03bb\u03bb\u03b1\u03c0\u03bb\u03b1\u03c3\u03b9\u03ac\u03b6\u03bf\u03c5\u03bc\u03b5: 25 \u00d7 12 = 300<\/p>\n <p>\u2022 \u039c\u03b5\u03c4\u03c1\u03ac\u03bc\u03b5: 2,5 \u03ad\u03c7\u03b5\u03b9 1 \u03b4\u03b5\u03ba\u03b1\u03b4\u03b9\u03ba\u03cc \u03c8\u03b7\u03c6\u03af\u03bf, 1,2 \u03ad\u03c7\u03b5\u03b9 1 \u03b4\u03b5\u03ba\u03b1\u03b4\u03b9\u03ba\u03cc \u03c8\u03b7\u03c6\u03af\u03bf, \u03c3\u03cd\u03bd\u03bf\u03bb\u03bf 2<\/p>\n <p>\u2022 \u03a4\u03bf\u03c0\u03bf\u03b8\u03b5\u03c4\u03bf\u03cd\u03bc\u03b5 \u03c4\u03b7\u03bd \u03c5\u03c0\u03bf\u03b4\u03b9\u03b1\u03c3\u03c4\u03bf\u03bb\u03ae: 3,00 = <strong>3<\/strong><\/p>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"content-section\" id=\"examples\">\n <h2 class=\"section-title\">\u03a0\u03b1\u03c1\u03b1\u03b4\u03b5\u03af\u03b3\u03bc\u03b1\u03c4\u03b1 – \u039b\u03c5\u03bc\u03ad\u03bd\u03b5\u03c2 \u0391\u03c3\u03ba\u03ae\u03c3\u03b5\u03b9\u03c2<\/h2>\n <div class=\"example-box\">\n <div class=\"example-title\">\n \ud83d\udccc \u03a0\u03b1\u03c1\u03ac\u03b4\u03b5\u03b9\u03b3\u03bc\u03b1 1: 3,4 \u00d7 2\n <\/div>\n <p><strong>\u039b\u03cd\u03c3\u03b7:<\/strong><\/p>\n <p>\u2022 \u03a0\u03bf\u03bb\u03bb\u03b1\u03c0\u03bb\u03b1\u03c3\u03b9\u03ac\u03b6\u03bf\u03c5\u03bc\u03b5: 34 \u00d7 2 = 68<\/p>\n <p>\u2022 \u03a4\u03bf 3,4 \u03ad\u03c7\u03b5\u03b9 1 \u03b4\u03b5\u03ba\u03b1\u03b4\u03b9\u03ba\u03cc \u03c8\u03b7\u03c6\u03af\u03bf<\/p>\n <p>\u2022 \u03a4\u03bf\u03c0\u03bf\u03b8\u03b5\u03c4\u03bf\u03cd\u03bc\u03b5 \u03c4\u03b7\u03bd \u03c5\u03c0\u03bf\u03b4\u03b9\u03b1\u03c3\u03c4\u03bf\u03bb\u03ae: <strong>6,8<\/strong><\/p>\n <\/div>\n <div class=\"example-box\">\n <div class=\"example-title\">\n \ud83d\udccc \u03a0\u03b1\u03c1\u03ac\u03b4\u03b5\u03b9\u03b3\u03bc\u03b1 2: 1,25 \u00d7 4\n <\/div>\n <p><strong>\u039b\u03cd\u03c3\u03b7:<\/strong><\/p>\n <p>\u2022 \u03a0\u03bf\u03bb\u03bb\u03b1\u03c0\u03bb\u03b1\u03c3\u03b9\u03ac\u03b6\u03bf\u03c5\u03bc\u03b5: 125 \u00d7 4 = 500<\/p>\n <p>\u2022 \u03a4\u03bf 1,25 \u03ad\u03c7\u03b5\u03b9 2 \u03b4\u03b5\u03ba\u03b1\u03b4\u03b9\u03ba\u03ac \u03c8\u03b7\u03c6\u03af\u03b1<\/p>\n <p>\u2022 \u03a4\u03bf\u03c0\u03bf\u03b8\u03b5\u03c4\u03bf\u03cd\u03bc\u03b5 \u03c4\u03b7\u03bd \u03c5\u03c0\u03bf\u03b4\u03b9\u03b1\u03c3\u03c4\u03bf\u03bb\u03ae: <strong>5,00 = 5<\/strong><\/p>\n <\/div>\n <div class=\"example-box\">\n <div class=\"example-title\">\n \ud83d\udccc \u03a0\u03b1\u03c1\u03ac\u03b4\u03b5\u03b9\u03b3\u03bc\u03b1 3: 2,3 \u00d7 1,5\n <\/div>\n <p><strong>\u039b\u03cd\u03c3\u03b7:<\/strong><\/p>\n <p>\u2022 \u03a0\u03bf\u03bb\u03bb\u03b1\u03c0\u03bb\u03b1\u03c3\u03b9\u03ac\u03b6\u03bf\u03c5\u03bc\u03b5: 23 \u00d7 15 = 345<\/p>\n <p>\u2022 \u03a4\u03bf 2,3 \u03ad\u03c7\u03b5\u03b9 1 \u03b4\u03b5\u03ba\u03b1\u03b4\u03b9\u03ba\u03cc, \u03c4\u03bf 1,5 \u03ad\u03c7\u03b5\u03b9 1 \u03b4\u03b5\u03ba\u03b1\u03b4\u03b9\u03ba\u03cc, \u03c3\u03cd\u03bd\u03bf\u03bb\u03bf 2<\/p>\n <p>\u2022 \u03a4\u03bf\u03c0\u03bf\u03b8\u03b5\u03c4\u03bf\u03cd\u03bc\u03b5 \u03c4\u03b7\u03bd \u03c5\u03c0\u03bf\u03b4\u03b9\u03b1\u03c3\u03c4\u03bf\u03bb\u03ae: <strong>3,45<\/strong><\/p>\n <\/div>\n <div class=\"example-box\">\n <div class=\"example-title\">\n \ud83d\udccc \u03a0\u03b1\u03c1\u03ac\u03b4\u03b5\u03b9\u03b3\u03bc\u03b1 4: 0,5 \u00d7 0,6\n <\/div>\n <p><strong>\u039b\u03cd\u03c3\u03b7:<\/strong><\/p>\n <p>\u2022 \u03a0\u03bf\u03bb\u03bb\u03b1\u03c0\u03bb\u03b1\u03c3\u03b9\u03ac\u03b6\u03bf\u03c5\u03bc\u03b5: 5 \u00d7 6 = 30<\/p>\n <p>\u2022 \u03a4\u03bf 0,5 \u03ad\u03c7\u03b5\u03b9 1 \u03b4\u03b5\u03ba\u03b1\u03b4\u03b9\u03ba\u03cc, \u03c4\u03bf 0,6 \u03ad\u03c7\u03b5\u03b9 1 \u03b4\u03b5\u03ba\u03b1\u03b4\u03b9\u03ba\u03cc, \u03c3\u03cd\u03bd\u03bf\u03bb\u03bf 2<\/p>\n <p>\u2022 \u03a4\u03bf\u03c0\u03bf\u03b8\u03b5\u03c4\u03bf\u03cd\u03bc\u03b5 \u03c4\u03b7\u03bd \u03c5\u03c0\u03bf\u03b4\u03b9\u03b1\u03c3\u03c4\u03bf\u03bb\u03ae: <strong>0,30 = 0,3<\/strong><\/p>\n <\/div>\n <\/div>\n <div class=\"content-section\" id=\"exercises\">\n <h2 class=\"section-title\">\u0391\u03c3\u03ba\u03ae\u03c3\u03b5\u03b9\u03c2 – \u0395\u03be\u03b1\u03c3\u03ba\u03ae\u03c3\u03bf\u03c5<\/h2>\n <div class=\"exercise-item\">\n <div class=\"exercise-question\">\n 1. \u03a5\u03c0\u03bf\u03bb\u03cc\u03b3\u03b9\u03c3\u03b5: 4,2 \u00d7 3 = ;\n <\/div>\n <div class=\"exercise-input\"><input type=\"text\" id=\"ex1\" placeholder=\"\u0393\u03c1\u03ac\u03c8\u03b5 \u03c4\u03b7\u03bd \u03b1\u03c0\u03ac\u03bd\u03c4\u03b7\u03c3\u03ae \u03c3\u03bf\u03c5\"> <button class=\"check-button\" onclick=\"checkExercise(1, 12.6)\">\u0388\u03bb\u03b5\u03b3\u03c7\u03bf\u03c2<\/button>\n <\/div>\n <div class=\"feedback\" id=\"feedback1\"><\/div>\n <\/div>\n <div class=\"exercise-item\">\n <div class=\"exercise-question\">\n 2. \u03a5\u03c0\u03bf\u03bb\u03cc\u03b3\u03b9\u03c3\u03b5: 1,5 \u00d7 2,4 = ;\n <\/div>\n <div class=\"exercise-input\"><input type=\"text\" id=\"ex2\" placeholder=\"\u0393\u03c1\u03ac\u03c8\u03b5 \u03c4\u03b7\u03bd \u03b1\u03c0\u03ac\u03bd\u03c4\u03b7\u03c3\u03ae \u03c3\u03bf\u03c5\"> <button class=\"check-button\" onclick=\"checkExercise(2, 3.6)\">\u0388\u03bb\u03b5\u03b3\u03c7\u03bf\u03c2<\/button>\n <\/div>\n <div class=\"feedback\" id=\"feedback2\"><\/div>\n <\/div>\n <div class=\"exercise-item\">\n <div class=\"exercise-question\">\n 3. \u03a5\u03c0\u03bf\u03bb\u03cc\u03b3\u03b9\u03c3\u03b5: 0,8 \u00d7 5 = ;\n <\/div>\n <div class=\"exercise-input\"><input type=\"text\" id=\"ex3\" placeholder=\"\u0393\u03c1\u03ac\u03c8\u03b5 \u03c4\u03b7\u03bd \u03b1\u03c0\u03ac\u03bd\u03c4\u03b7\u03c3\u03ae \u03c3\u03bf\u03c5\"> <button class=\"check-button\" onclick=\"checkExercise(3, 4)\">\u0388\u03bb\u03b5\u03b3\u03c7\u03bf\u03c2<\/button>\n <\/div>\n <div class=\"feedback\" id=\"feedback3\"><\/div>\n <\/div>\n <div class=\"exercise-item\">\n <div class=\"exercise-question\">\n 4. \u03a5\u03c0\u03bf\u03bb\u03cc\u03b3\u03b9\u03c3\u03b5: 2,25 \u00d7 4 = ;\n <\/div>\n <div class=\"exercise-input\"><input type=\"text\" id=\"ex4\" placeholder=\"\u0393\u03c1\u03ac\u03c8\u03b5 \u03c4\u03b7\u03bd \u03b1\u03c0\u03ac\u03bd\u03c4\u03b7\u03c3\u03ae \u03c3\u03bf\u03c5\"> <button class=\"check-button\" onclick=\"checkExercise(4, 9)\">\u0388\u03bb\u03b5\u03b3\u03c7\u03bf\u03c2<\/button>\n <\/div>\n <div class=\"feedback\" id=\"feedback4\"><\/div>\n <\/div>\n <div class=\"exercise-item\">\n <div class=\"exercise-question\">\n 5. \u03a5\u03c0\u03bf\u03bb\u03cc\u03b3\u03b9\u03c3\u03b5: 3,5 \u00d7 2,2 = ;\n <\/div>\n <div class=\"exercise-input\"><input type=\"text\" id=\"ex5\" placeholder=\"\u0393\u03c1\u03ac\u03c8\u03b5 \u03c4\u03b7\u03bd \u03b1\u03c0\u03ac\u03bd\u03c4\u03b7\u03c3\u03ae \u03c3\u03bf\u03c5\"> <button class=\"check-button\" onclick=\"checkExercise(5, 7.7)\">\u0388\u03bb\u03b5\u03b3\u03c7\u03bf\u03c2<\/button>\n <\/div>\n <div class=\"feedback\" id=\"feedback5\"><\/div>\n <\/div>\n <\/div>\n <div class=\"content-section\" id=\"quiz\">\n <h2 class=\"section-title\">\u039a\u03bf\u03c5\u03af\u03b6 – \u0394\u03bf\u03ba\u03b9\u03bc\u03ac\u03c3\u03c4\u03b5 \u03c4\u03b9\u03c2 \u0393\u03bd\u03ce\u03c3\u03b5\u03b9\u03c2 \u03c3\u03b1\u03c2<\/h2>\n <div class=\"quiz-question\" id=\"q1\">\n <div class=\"quiz-text\">\n 1. \u03a0\u03cc\u03c3\u03bf \u03ba\u03ac\u03bd\u03b5\u03b9 1,5 \u00d7 2 ;\n <\/div>\n <div class=\"quiz-options\">\n <div class=\"quiz-option\" onclick=\"checkQuiz(1, 1, false)\">\n 1,5\n <\/div>\n <div class=\"quiz-option\" onclick=\"checkQuiz(1, 2, true)\">\n 3\n <\/div>\n <div class=\"quiz-option\" onclick=\"checkQuiz(1, 3, false)\">\n 3,5\n <\/div>\n <div class=\"quiz-option\" onclick=\"checkQuiz(1, 4, false)\">\n 4\n <\/div>\n <\/div>\n <\/div>\n <div class=\"quiz-question\" id=\"q2\">\n <div class=\"quiz-text\">\n 2. \u03a0\u03cc\u03c3\u03bf \u03ba\u03ac\u03bd\u03b5\u03b9 0,5 \u00d7 0,4 ;\n <\/div>\n <div class=\"quiz-options\">\n <div class=\"quiz-option\" onclick=\"checkQuiz(2, 1, false)\">\n 0,9\n <\/div>\n <div class=\"quiz-option\" onclick=\"checkQuiz(2, 2, true)\">\n 0,2\n <\/div>\n <div class=\"quiz-option\" onclick=\"checkQuiz(2, 3, false)\">\n 2\n <\/div>\n <div class=\"quiz-option\" onclick=\"checkQuiz(2, 4, false)\">\n 0,1\n <\/div>\n <\/div>\n <\/div>\n <div class=\"quiz-question\" id=\"q3\">\n <div class=\"quiz-text\">\n 3. \u03a0\u03cc\u03c3\u03bf \u03ba\u03ac\u03bd\u03b5\u03b9 2,5 \u00d7 3 ;\n <\/div>\n <div class=\"quiz-options\">\n <div class=\"quiz-option\" onclick=\"checkQuiz(3, 1, false)\">\n 6,5\n <\/div>\n <div class=\"quiz-option\" onclick=\"checkQuiz(3, 2, false)\">\n 5,5\n <\/div>\n <div class=\"quiz-option\" onclick=\"checkQuiz(3, 3, true)\">\n 7,5\n <\/div>\n <div class=\"quiz-option\" onclick=\"checkQuiz(3, 4, false)\">\n 8\n <\/div>\n <\/div>\n <\/div>\n <div class=\"quiz-question\" id=\"q4\">\n <div class=\"quiz-text\">\n 4. \u03a0\u03cc\u03c3\u03bf \u03ba\u03ac\u03bd\u03b5\u03b9 1,2 \u00d7 1,5 ;\n <\/div>\n <div class=\"quiz-options\">\n <div class=\"quiz-option\" onclick=\"checkQuiz(4, 1, false)\">\n 1,5\n <\/div>\n <div class=\"quiz-option\" onclick=\"checkQuiz(4, 2, true)\">\n 1,8\n <\/div>\n <div class=\"quiz-option\" onclick=\"checkQuiz(4, 3, false)\">\n 2,7\n <\/div>\n <div class=\"quiz-option\" onclick=\"checkQuiz(4, 4, false)\">\n 1,2\n <\/div>\n <\/div>\n <\/div>\n <div class=\"quiz-question\" id=\"q5\">\n <div class=\"quiz-text\">\n 5. \u03a0\u03cc\u03c3\u03bf \u03ba\u03ac\u03bd\u03b5\u03b9 4,5 \u00d7 2 ;\n <\/div>\n <div class=\"quiz-options\">\n <div class=\"quiz-option\" onclick=\"checkQuiz(5, 1, false)\">\n 8\n <\/div>\n <div class=\"quiz-option\" onclick=\"checkQuiz(5, 2, true)\">\n 9\n <\/div>\n <div class=\"quiz-option\" onclick=\"checkQuiz(5, 3, false)\">\n 6,5\n <\/div>\n <div class=\"quiz-option\" onclick=\"checkQuiz(5, 4, false)\">\n 10\n <\/div>\n <\/div>\n <\/div>\n <div class=\"score-display\" id=\"scoreDisplay\" style=\"display: none;\">\n \u03a3\u03ba\u03bf\u03c1: <span id=\"score\">0<\/span>\/5 \u2b50\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <script>\n const defaultConfig = {\n main_title: \"\u039f \u03a0\u03bf\u03bb\u03bb\u03b1\u03c0\u03bb\u03b1\u03c3\u03b9\u03b1\u03c3\u03bc\u03cc\u03c2 \u03c3\u03c4\u03bf\u03c5\u03c2 \u0394\u03b5\u03ba\u03b1\u03b4\u03b9\u03ba\u03bf\u03cd\u03c2 \u0391\u03c1\u03b9\u03b8\u03bc\u03bf\u03cd\u03c2\",\n tab1_title: \"\u0398\u03b5\u03c9\u03c1\u03af\u03b1\",\n tab2_title: \"\u03a0\u03b1\u03c1\u03b1\u03b4\u03b5\u03af\u03b3\u03bc\u03b1\u03c4\u03b1\",\n tab3_title: \"\u0391\u03c3\u03ba\u03ae\u03c3\u03b5\u03b9\u03c2\",\n tab4_title: \"\u039a\u03bf\u03c5\u03af\u03b6\"\n };\n\n let quizScore = 0;\n let quizAnswered = 0;\n\n function checkExercise(exerciseNum, correctAnswer) {\n const input = document.getElementById('ex' + exerciseNum);\n const feedback = document.getElementById('feedback' + exerciseNum);\n const userAnswer = parseFloat(input.value.replace(',', '.'));\n\n if (Math.abs(userAnswer - correctAnswer) < 0.01) {\n feedback.className = 'feedback correct';\n feedback.textContent = '\u2705 \u039c\u03c0\u03c1\u03ac\u03b2\u03bf! \u03a3\u03c9\u03c3\u03c4\u03ae \u03b1\u03c0\u03ac\u03bd\u03c4\u03b7\u03c3\u03b7!';\n } else {\n feedback.className = 'feedback incorrect';\n feedback.textContent = '\u274c \u039b\u03ac\u03b8\u03bf\u03c2! \u0397 \u03c3\u03c9\u03c3\u03c4\u03ae \u03b1\u03c0\u03ac\u03bd\u03c4\u03b7\u03c3\u03b7 \u03b5\u03af\u03bd\u03b1\u03b9: ' + correctAnswer;\n }\n }\n\n function checkQuiz(questionNum, optionNum, isCorrect) {\n const question = document.getElementById('q' + questionNum);\n const options = question.querySelectorAll('.quiz-option');\n \n if (options[optionNum - 1].classList.contains('correct') || \n options[optionNum - 1].classList.contains('incorrect')) {\n return;\n }\n\n quizAnswered++;\n\n options.forEach((option, index) => {\n option.style.pointerEvents = 'none';\n if (index === optionNum - 1) {\n if (isCorrect) {\n option.classList.add('correct');\n quizScore++;\n } else {\n option.classList.add('incorrect');\n }\n } else if (option.onclick && option.onclick.toString().includes('true')) {\n option.classList.add('correct');\n }\n });\n\n if (quizAnswered === 5) {\n const scoreDisplay = document.getElementById('scoreDisplay');\n const scoreSpan = document.getElementById('score');\n scoreSpan.textContent = quizScore;\n scoreDisplay.style.display = 'block';\n }\n }\n\n document.querySelectorAll('.tab-card').forEach(card => {\n card.addEventListener('click', function() {\n const tabName = this.dataset.tab;\n \n document.querySelectorAll('.tab-card').forEach(c => c.classList.remove('active'));\n this.classList.add('active');\n \n document.querySelectorAll('.content-section').forEach(section => {\n section.classList.remove('active');\n });\n \n document.getElementById(tabName).classList.add('active');\n });\n });\n\n async function onConfigChange(config) {\n const mainTitle = config.main_title || defaultConfig.main_title;\n const tab1Title = config.tab1_title || defaultConfig.tab1_title;\n const tab2Title = config.tab2_title || defaultConfig.tab2_title;\n const tab3Title = config.tab3_title || defaultConfig.tab3_title;\n const tab4Title = config.tab4_title || defaultConfig.tab4_title;\n\n document.getElementById('mainTitle').textContent = mainTitle;\n document.getElementById('tab1Title').textContent = tab1Title;\n document.getElementById('tab2Title').textContent = tab2Title;\n document.getElementById('tab3Title').textContent = tab3Title;\n document.getElementById('tab4Title').textContent = tab4Title;\n }\n\n function mapToCapabilities(config) {\n return {\n recolorables: [],\n borderables: [],\n fontEditable: undefined,\n fontSizeable: undefined\n };\n }\n\n function mapToEditPanelValues(config) {\n return new Map([\n [\"main_title\", config.main_title || defaultConfig.main_title],\n [\"tab1_title\", config.tab1_title || defaultConfig.tab1_title],\n [\"tab2_title\", config.tab2_title || defaultConfig.tab2_title],\n [\"tab3_title\", config.tab3_title || defaultConfig.tab3_title],\n [\"tab4_title\", config.tab4_title || defaultConfig.tab4_title]\n ]);\n }\n\n if (window.elementSdk) {\n window.elementSdk.init({\n defaultConfig,\n onConfigChange,\n mapToCapabilities,\n mapToEditPanelValues\n });\n }\n <\/script>\n <script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML=\"window.__CF$cv$params={r:'9b7b322667b66f67',t:'MTc2NzM2Njc1OS4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='\/cdn-cgi\/challenge-platform\/scripts\/jsd\/main.js';document.getElementsByTagName('head')[0].appendChild(a);\";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();<\/script><\/body>\n<\/html>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>AI Tutor – \u03a0\u03bf\u03bb\u03bb\u03b1\u03c0\u03bb\u03b1\u03c3\u03b9\u03b1\u03c3\u03bc\u03cc\u03c2 \u0394\u03b5\u03ba\u03b1\u03b4\u03b9\u03ba\u03ce\u03bd \ud83e\udd16 \u039f \u03a8\u03b7\u03c6\u03b9\u03b1\u03ba\u03cc\u03c2 \u03c3\u03bf\u03c5 \u0392\u03bf\u03b7\u03b8\u03cc\u03c2 \u03c3\u03c4\u03b1 \u039c\u03b1\u03b8\u03b7\u03bc\u03b1\u03c4\u03b9\u03ba\u03ac \u039c\u03b1\u03b8\u03b1\u03af\u03bd\u03bf\u03c5\u03bc\u03b5 \u03c4\u03bf\u03bd \u03a0\u03bf\u03bb\u03bb\u03b1\u03c0\u03bb\u03b1\u03c3\u03b9\u03b1\u03c3\u03bc\u03cc \u0394\u03b5\u03ba\u03b1\u03b4\u03b9\u03ba\u03ce\u03bd \u03bc\u03b1\u03b6\u03af! \ud83d\udcda \u0397 \u0398\u03b5\u03c9\u03c1\u03af\u03b1 \u03bc\u03b1\u03c2 1. \u039e\u03ad\u03c7\u03bd\u03b1 \u03c4\u03b7\u03bd \u03c5\u03c0\u03bf\u03b4\u03b9\u03b1\u03c3\u03c4\u03bf\u03bb\u03ae: \u039a\u03ac\u03bd\u03b5 \u03c4\u03bf\u03bd \u03c0\u03bf\u03bb\u03bb\u03b1\u03c0\u03bb\u03b1\u03c3\u03b9\u03b1\u03c3\u03bc\u03cc \u03c3\u03b1\u03bd \u03bd\u03b1 \u03b5\u03af\u03bd\u03b1\u03b9 \u03c6\u03c5\u03c3\u03b9\u03ba\u03bf\u03af \u03b1\u03c1\u03b9\u03b8\u03bc\u03bf\u03af. 2. \u039c\u03ad\u03c4\u03c1\u03b1 \u03c4\u03b1 \u03c8\u03b7\u03c6\u03af\u03b1: \u0394\u03b5\u03c2 \u03c0\u03cc\u03c3\u03b1 \u03c8\u03b7\u03c6\u03af\u03b1 \u03c5\u03c0\u03ac\u03c1\u03c7\u03bf\u03c5\u03bd \u03bc\u03b5\u03c4\u03ac \u03c4\u03b7\u03bd \u03c5\u03c0\u03bf\u03b4\u03b9\u03b1\u03c3\u03c4\u03bf\u03bb\u03ae \u039a\u0391\u0399 \u03c3\u03c4\u03bf\u03c5\u03c2 \u03b4\u03cd\u03bf \u03b1\u03c1\u03b9\u03b8\u03bc\u03bf\u03cd\u03c2 \u03bc\u03b1\u03b6\u03af. 3. \u0392\u03ac\u03bb\u03b5 \u03c4\u03b7\u03bd \u03c5\u03c0\u03bf\u03b4\u03b9\u03b1\u03c3\u03c4\u03bf\u03bb\u03ae: \u039e\u03b5\u03ba\u03af\u03bd\u03b1 \u03b1\u03c0\u03cc … <a href=\"https:\/\/prokopidis.sites.sch.gr\/?p=4209\" class=\"more-link\">\u0394\u03b9\u03b1\u03b2\u03ac\u03c3\u03c4\u03b5 \u03c0\u03b5\u03c1\u03b9\u03c3\u03c3\u03cc\u03c4\u03b5\u03c1\u03b1<span class=\"screen-reader-text\"> “\u039f \u03c0\u03bf\u03bb\u03bb\u03b1\u03c0\u03bb\u03b1\u03c3\u03b9\u03b1\u03c3\u03bc\u03cc\u03c2 \u03c3\u03c4\u03bf\u03c5\u03c2 \u03b4\u03b5\u03ba\u03b1\u03b4\u03b9\u03ba\u03bf\u03cd\u03c2 \u03b1\u03c1\u03b9\u03b8\u03bc\u03bf\u03cd\u03c2”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-4209","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"featured_image_src":null,"featured_image_src_square":null,"author_info":{"display_name":"nikos","author_link":"https:\/\/prokopidis.sites.sch.gr\/?author=1"},"_links":{"self":[{"href":"https:\/\/prokopidis.sites.sch.gr\/index.php?rest_route=\/wp\/v2\/posts\/4209","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/prokopidis.sites.sch.gr\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/prokopidis.sites.sch.gr\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/prokopidis.sites.sch.gr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/prokopidis.sites.sch.gr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=4209"}],"version-history":[{"count":7,"href":"https:\/\/prokopidis.sites.sch.gr\/index.php?rest_route=\/wp\/v2\/posts\/4209\/revisions"}],"predecessor-version":[{"id":5875,"href":"https:\/\/prokopidis.sites.sch.gr\/index.php?rest_route=\/wp\/v2\/posts\/4209\/revisions\/5875"}],"wp:attachment":[{"href":"https:\/\/prokopidis.sites.sch.gr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=4209"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/prokopidis.sites.sch.gr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=4209"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/prokopidis.sites.sch.gr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=4209"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":4209,"date":"2024-07-11T21:00:46","date_gmt":"2024-07-11T21:00:46","guid":{"rendered":"https:\/\/prokopidis.sites.sch.gr\/?p=4209"},"modified":"2026-01-02T15:29:01","modified_gmt":"2026-01-02T15:29:01","slug":"%ce%bf-%cf%80%ce%bf%ce%bb%ce%bb%ce%b1%cf%80%ce%bb%ce%b1%cf%83%ce%b9%ce%b1%cf%83%ce%bc%cf%8c%cf%82-%cf%83%cf%84%ce%bf%cf%85%cf%82-%ce%b4%ce%b5%ce%ba%ce%b1%ce%b4%ce%b9%ce%ba%ce%bf%cf%8d%cf%82-%ce%b1","status":"publish","type":"post","link":"https:\/\/prokopidis.sites.sch.gr\/?p=4209","title":{"rendered":"\u039f \u03c0\u03bf\u03bb\u03bb\u03b1\u03c0\u03bb\u03b1\u03c3\u03b9\u03b1\u03c3\u03bc\u03cc\u03c2 \u03c3\u03c4\u03bf\u03c5\u03c2 \u03b4\u03b5\u03ba\u03b1\u03b4\u03b9\u03ba\u03bf\u03cd\u03c2 \u03b1\u03c1\u03b9\u03b8\u03bc\u03bf\u03cd\u03c2"},"content":{"rendered":"\n\n\n\n \n \n AI Tutor – \u03a0\u03bf\u03bb\u03bb\u03b1\u03c0\u03bb\u03b1\u03c3\u03b9\u03b1\u03c3\u03bc\u03cc\u03c2 \u0394\u03b5\u03ba\u03b1\u03b4\u03b9\u03ba\u03ce\u03bd<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <style>\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Comfortaa:wght@300;700&display=swap');\n body {\n font-family: 'Comfortaa', cursive;\n background-color: #f0f9ff;\n }\n .chat-bubble {\n border-radius: 20px;\n max-width: 85%;\n padding: 12px 16px;\n margin-bottom: 10px;\n }\n .tutor-bubble {\n background-color: #ffffff;\n border: 2px solid #3b82f6;\n color: #1e3a8a;\n align-self: flex-start;\n }\n .user-bubble {\n background-color: #3b82f6;\n color: white;\n align-self: flex-end;\n }\n .theory-card {\n background: linear-gradient(135deg, #60a5fa, #3b82f6);\n color: white;\n border-radius: 15px;\n padding: 20px;\n box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n }\n <\/style>\n<\/head>\n<body class=\"p-4 md:p-8\">\n\n <div class=\"max-w-4xl mx-auto\">\n \n <div class=\"text-center mb-8\">\n <h1 class=\"text-3xl font-bold text-blue-800 mb-2\">\ud83e\udd16 \u039f \u03a8\u03b7\u03c6\u03b9\u03b1\u03ba\u03cc\u03c2 \u03c3\u03bf\u03c5 \u0392\u03bf\u03b7\u03b8\u03cc\u03c2 \u03c3\u03c4\u03b1 \u039c\u03b1\u03b8\u03b7\u03bc\u03b1\u03c4\u03b9\u03ba\u03ac<\/h1>\n <p class=\"text-blue-600 italic\">\u039c\u03b1\u03b8\u03b1\u03af\u03bd\u03bf\u03c5\u03bc\u03b5 \u03c4\u03bf\u03bd \u03a0\u03bf\u03bb\u03bb\u03b1\u03c0\u03bb\u03b1\u03c3\u03b9\u03b1\u03c3\u03bc\u03cc \u0394\u03b5\u03ba\u03b1\u03b4\u03b9\u03ba\u03ce\u03bd \u03bc\u03b1\u03b6\u03af!<\/p>\n <\/div>\n\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-8\">\n \n \n <div class=\"theory-card\">\n <h2 class=\"text-xl font-bold mb-4 flex items-center\">\n <span class=\"mr-2\">\ud83d\udcda<\/span> \u0397 \u0398\u03b5\u03c9\u03c1\u03af\u03b1 \u03bc\u03b1\u03c2\n <\/h2>\n <div class=\"space-y-4 text-sm leading-relaxed\">\n <p><strong>1. \u039e\u03ad\u03c7\u03bd\u03b1 \u03c4\u03b7\u03bd \u03c5\u03c0\u03bf\u03b4\u03b9\u03b1\u03c3\u03c4\u03bf\u03bb\u03ae:<\/strong> \u039a\u03ac\u03bd\u03b5 \u03c4\u03bf\u03bd \u03c0\u03bf\u03bb\u03bb\u03b1\u03c0\u03bb\u03b1\u03c3\u03b9\u03b1\u03c3\u03bc\u03cc \u03c3\u03b1\u03bd \u03bd\u03b1 \u03b5\u03af\u03bd\u03b1\u03b9 \u03c6\u03c5\u03c3\u03b9\u03ba\u03bf\u03af \u03b1\u03c1\u03b9\u03b8\u03bc\u03bf\u03af.<\/p>\n <p><strong>2. \u039c\u03ad\u03c4\u03c1\u03b1 \u03c4\u03b1 \u03c8\u03b7\u03c6\u03af\u03b1:<\/strong> \u0394\u03b5\u03c2 \u03c0\u03cc\u03c3\u03b1 \u03c8\u03b7\u03c6\u03af\u03b1 \u03c5\u03c0\u03ac\u03c1\u03c7\u03bf\u03c5\u03bd \u03bc\u03b5\u03c4\u03ac \u03c4\u03b7\u03bd \u03c5\u03c0\u03bf\u03b4\u03b9\u03b1\u03c3\u03c4\u03bf\u03bb\u03ae \u039a\u0391\u0399 \u03c3\u03c4\u03bf\u03c5\u03c2 \u03b4\u03cd\u03bf \u03b1\u03c1\u03b9\u03b8\u03bc\u03bf\u03cd\u03c2 \u03bc\u03b1\u03b6\u03af.<\/p>\n <p><strong>3. \u0392\u03ac\u03bb\u03b5 \u03c4\u03b7\u03bd \u03c5\u03c0\u03bf\u03b4\u03b9\u03b1\u03c3\u03c4\u03bf\u03bb\u03ae:<\/strong> \u039e\u03b5\u03ba\u03af\u03bd\u03b1 \u03b1\u03c0\u03cc \u03c4\u03bf \u03c4\u03ad\u03bb\u03bf\u03c2 \u03c4\u03bf\u03c5 \u03b1\u03c0\u03bf\u03c4\u03b5\u03bb\u03ad\u03c3\u03bc\u03b1\u03c4\u03bf\u03c2 \u03ba\u03b1\u03b9 \u03bc\u03ad\u03c4\u03c1\u03b1 \u03c0\u03c1\u03bf\u03c2 \u03c4\u03b1 \u03b1\u03c1\u03b9\u03c3\u03c4\u03b5\u03c1\u03ac \u03c4\u03cc\u03c3\u03b5\u03c2 \u03b8\u03ad\u03c3\u03b5\u03b9\u03c2 \u03cc\u03c3\u03b1 \u03ae\u03c4\u03b1\u03bd \u03c4\u03b1 \u03c8\u03b7\u03c6\u03af\u03b1 \u03c0\u03bf\u03c5 \u03bc\u03ad\u03c4\u03c1\u03b7\u03c3\u03b5\u03c2.<\/p>\n <div class=\"bg-blue-800 p-3 rounded-lg mt-2 font-mono text-center\">\n \u03a0\u03b1\u03c1\u03ac\u03b4\u03b5\u03b9\u03b3\u03bc\u03b1:<br>\n 1,2 (1 \u03b8\u03ad\u03c3\u03b7) \u00d7 0,3 (1 \u03b8\u03ad\u03c3\u03b7) =<br>\n 12 \u00d7 3 = 36<br>\n \u0386\u03c1\u03b1: 0,36 (2 \u03b8\u03ad\u03c3\u03b5\u03b9\u03c2!)\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"bg-white rounded-2xl shadow-xl flex flex-col h-[500px] border border-blue-100 overflow-hidden\">\n \n <div id=\"chat-window\" class=\"flex-1 p-4 overflow-y-auto flex flex-col space-y-2\">\n <div class=\"chat-bubble tutor-bubble\">\n \u0393\u03b5\u03b9\u03b1 \u03c3\u03bf\u03c5! \u0395\u03af\u03bc\u03b1\u03b9 \u03bf \u03b4\u03ac\u03c3\u03ba\u03b1\u03bb\u03cc\u03c2 \u03c3\u03bf\u03c5. \u0388\u03c7\u03b5\u03b9\u03c2 \u03ba\u03ac\u03c0\u03bf\u03b9\u03b1 \u03b1\u03c0\u03bf\u03c1\u03af\u03b1 \u03b3\u03b9\u03b1 \u03c4\u03bf\u03c5\u03c2 \u03b4\u03b5\u03ba\u03b1\u03b4\u03b9\u03ba\u03bf\u03cd\u03c2; \u03a1\u03ce\u03c4\u03b7\u03c3\u03ad \u03bc\u03b5 \u03cc,\u03c4\u03b9 \u03b8\u03ad\u03bb\u03b5\u03b9\u03c2 (\u03b1\u03ba\u03cc\u03bc\u03b1 \u03ba\u03b9 \u03b1\u03bd \u03ba\u03ac\u03bd\u03b5\u03b9\u03c2 \u03bb\u03ac\u03b8\u03b7, \u03b8\u03b1 \u03c3\u03b5 \u03ba\u03b1\u03c4\u03b1\u03bb\u03ac\u03b2\u03c9!)\n <\/div>\n <\/div>\n\n \n <div class=\"p-4 border-t border-gray-100 bg-gray-50\">\n <div class=\"flex gap-2\">\n <input type=\"text\" id=\"user-input\" placeholder=\"\u0393\u03c1\u03ac\u03c8\u03b5 \u03c4\u03b7\u03bd \u03b5\u03c1\u03ce\u03c4\u03b7\u03c3\u03ae \u03c3\u03bf\u03c5 \u03b5\u03b4\u03ce...\" \n class=\"flex-1 p-3 rounded-full border border-blue-200 focus:outline-none focus:ring-2 focus:ring-blue-400\">\n <button onclick=\"handleUserInput()\" class=\"bg-blue-600 text-white p-3 rounded-full hover:bg-blue-700 transition\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 19l9 2-9-18-9 18 9-2zm0 0v-8\" \/>\n <\/svg>\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n\n <\/div>\n <\/div>\n\n <script>\n const chatWindow = document.getElementById('chat-window');\n const userInput = document.getElementById('user-input');\n\n \/\/ \u039b\u03b5\u03be\u03b9\u03ba\u03cc \u0391\u03c0\u03b1\u03bd\u03c4\u03ae\u03c3\u03b5\u03c9\u03bd \u03ba\u03b1\u03b9 \u039b\u03ad\u03be\u03b5\u03c9\u03bd-\u039a\u03bb\u03b5\u03b9\u03b4\u03b9\u03ce\u03bd\n \/\/ \u03a0\u03b5\u03c1\u03b9\u03bb\u03b1\u03bc\u03b2\u03ac\u03bd\u03b5\u03b9 \u03ba\u03b1\u03b9 \u03bf\u03c1\u03b8\u03bf\u03b3\u03c1\u03b1\u03c6\u03b9\u03ba\u03ac \u03bb\u03ac\u03b8\u03b7 \u03b3\u03b9\u03b1 \u03ba\u03b1\u03bb\u03cd\u03c4\u03b5\u03c1\u03bf \"\u03c4\u03b1\u03af\u03c1\u03b9\u03b1\u03c3\u03bc\u03b1\"\n const knowledgeBase = [\n {\n keywords: ['\u03c0\u03c9\u03c2', '\u03ba\u03b1\u03bd\u03c9', '\u03c0\u03bf\u03bb\u03bb\u03b1\u03c0\u03bb\u03b1\u03c3\u03b9\u03b1\u03c3\u03bc\u03bf', '\u03c0\u03bf\u03bb\u03b1\u03c0\u03bb\u03b1\u03c3\u03b9\u03b1\u03c3\u03bc\u03bf\u03c2', '\u03b2\u03b7\u03bc\u03b1\u03c4\u03b1', '\u03bc\u03b1\u03b8\u03c9'],\n response: \"\u0395\u03af\u03bd\u03b1\u03b9 \u03b1\u03c0\u03bb\u03cc! \u039a\u03ac\u03bd\u03b5\u03b9\u03c2 \u03c4\u03bf\u03bd \u03c0\u03bf\u03bb\u03bb\u03b1\u03c0\u03bb\u03b1\u03c3\u03b9\u03b1\u03c3\u03bc\u03cc \u03ba\u03b1\u03bd\u03bf\u03bd\u03b9\u03ba\u03ac \u03c7\u03c9\u03c1\u03af\u03c2 \u03bd\u03b1 \u03b2\u03bb\u03ad\u03c0\u03b5\u03b9\u03c2 \u03c4\u03b9\u03c2 \u03c5\u03c0\u03bf\u03b4\u03b9\u03b1\u03c3\u03c4\u03bf\u03bb\u03ad\u03c2. \u03a3\u03c4\u03bf \u03c4\u03ad\u03bb\u03bf\u03c2, \u03bc\u03b5\u03c4\u03c1\u03ac\u03c2 \u03c0\u03cc\u03c3\u03b1 \u03c8\u03b7\u03c6\u03af\u03b1 \u03b5\u03af\u03bd\u03b1\u03b9 \u03c0\u03af\u03c3\u03c9 \u03b1\u03c0\u03cc \u03c4\u03b7\u03bd \u03c5\u03c0\u03bf\u03b4\u03b9\u03b1\u03c3\u03c4\u03bf\u03bb\u03ae \u03ba\u03b1\u03b9 \u03c3\u03c4\u03bf\u03c5\u03c2 \u03b4\u03cd\u03bf \u03b1\u03c1\u03b9\u03b8\u03bc\u03bf\u03cd\u03c2 \u03ba\u03b1\u03b9 \u03b2\u03ac\u03b6\u03b5\u03b9\u03c2 \u03c4\u03b7\u03bd \u03c5\u03c0\u03bf\u03b4\u03b9\u03b1\u03c3\u03c4\u03bf\u03bb\u03ae \u03c3\u03c4\u03bf \u03b1\u03c0\u03bf\u03c4\u03ad\u03bb\u03b5\u03c3\u03bc\u03b1 \u03bc\u03b5\u03c4\u03c1\u03ce\u03bd\u03c4\u03b1\u03c2 \u03b1\u03c0\u03cc \u03b4\u03b5\u03be\u03b9\u03ac \u03c0\u03c1\u03bf\u03c2 \u03c4\u03b1 \u03b1\u03c1\u03b9\u03c3\u03c4\u03b5\u03c1\u03ac!\"\n },\n {\n keywords: ['\u03c5\u03c0\u03bf\u03b4\u03b9\u03b1\u03c3\u03c4\u03bf\u03bb\u03b7', '\u03c0\u03bf\u03c5', '\u03bc\u03c0\u03b1\u03b9\u03bd\u03b5\u03b9', '\u03b9\u03c0\u03bf\u03b4\u03b9\u03b1\u03c3\u03c4\u03bf\u03bb\u03b9', '\u03ba\u03bf\u03bc\u03bc\u03b1'],\n response: \"\u0397 \u03c5\u03c0\u03bf\u03b4\u03b9\u03b1\u03c3\u03c4\u03bf\u03bb\u03ae \u03bc\u03c0\u03b1\u03af\u03bd\u03b5\u03b9 \u03c3\u03c4\u03bf \u03c4\u03ad\u03bb\u03bf\u03c2! \u039c\u03b5\u03c4\u03c1\u03ac\u03bc\u03b5 \u03c0\u03cc\u03c3\u03b1 \u03b4\u03b5\u03ba\u03b1\u03b4\u03b9\u03ba\u03ac \u03c8\u03b7\u03c6\u03af\u03b1 \u03ad\u03c7\u03bf\u03c5\u03bd \u03ba\u03b1\u03b9 \u03bf\u03b9 \u03b4\u03cd\u03bf \u03b1\u03c1\u03b9\u03b8\u03bc\u03bf\u03af \u03bc\u03b1\u03b6\u03af. \u0391\u03bd \u03bf \u03ad\u03bd\u03b1\u03c2 \u03ad\u03c7\u03b5\u03b9 1 \u03ba\u03b1\u03b9 \u03bf \u03ac\u03bb\u03bb\u03bf\u03c2 2, \u03c4\u03bf \u03b1\u03c0\u03bf\u03c4\u03ad\u03bb\u03b5\u03c3\u03bc\u03b1 \u03b8\u03b1 \u03ad\u03c7\u03b5\u03b9 3!\"\n },\n {\n keywords: ['\u03c0\u03b1\u03c1\u03b1\u03b4\u03b5\u03b9\u03b3\u03bc\u03b1', '\u03b4\u03b9\u03be\u03b5', '\u03b4\u03b9\u03be\u03b1\u03b9', '\u03c0\u03b1\u03c1\u03b1\u03b4\u03b9\u03b3\u03bc\u03b1'],\n response: \"\u0391\u03c2 \u03b4\u03bf\u03cd\u03bc\u03b5 \u03ad\u03bd\u03b1! 0,5 \u03b5\u03c0\u03af 0,2. \u03a3\u03ba\u03ad\u03c8\u03bf\u03c5 5 \u03b5\u03c0\u03af 2 = 10. \u0388\u03c7\u03bf\u03c5\u03bc\u03b5 \u03c3\u03c5\u03bd\u03bf\u03bb\u03b9\u03ba\u03ac 2 \u03b4\u03b5\u03ba\u03b1\u03b4\u03b9\u03ba\u03ac \u03c8\u03b7\u03c6\u03af\u03b1 (\u03ad\u03bd\u03b1 \u03b1\u03c0\u03cc \u03c4\u03bf 0,5 \u03ba\u03b1\u03b9 \u03ad\u03bd\u03b1 \u03b1\u03c0\u03cc \u03c4\u03bf 0,2). \u0386\u03c1\u03b1 \u03c4\u03bf 10 \u03b3\u03af\u03bd\u03b5\u03c4\u03b1\u03b9 0,10!\"\n },\n {\n keywords: ['10', '100', '1000', '\u03b4\u03c5\u03bd\u03b1\u03bc\u03b5\u03b9\u03c2'],\n response: \"\u038c\u03c4\u03b1\u03bd \u03c0\u03bf\u03bb\u03bb\u03b1\u03c0\u03bb\u03b1\u03c3\u03b9\u03ac\u03b6\u03bf\u03c5\u03bc\u03b5 \u03bc\u03b5 10, 100, 1000, \u03b7 \u03c5\u03c0\u03bf\u03b4\u03b9\u03b1\u03c3\u03c4\u03bf\u03bb\u03ae \u03ba\u03ac\u03bd\u03b5\u03b9... \u03ac\u03bb\u03bc\u03b1\u03c4\u03b1 \u03c0\u03c1\u03bf\u03c2 \u03c4\u03b1 \u0394\u0395\u039e\u0399\u0391! \u03a4\u03cc\u03c3\u03b1 \u03ac\u03bb\u03bc\u03b1\u03c4\u03b1 \u03cc\u03c3\u03b1 \u03b5\u03af\u03bd\u03b1\u03b9 \u03ba\u03b1\u03b9 \u03c4\u03b1 \u03bc\u03b7\u03b4\u03b5\u03bd\u03b9\u03ba\u03ac.\"\n }\n ];\n\n \/\/ \u03a3\u03c5\u03bd\u03ac\u03c1\u03c4\u03b7\u03c3\u03b7 \u03b3\u03b9\u03b1 \u03c4\u03bf\u03bd \u03ad\u03bb\u03b5\u03b3\u03c7\u03bf \u03bf\u03bc\u03bf\u03b9\u03cc\u03c4\u03b7\u03c4\u03b1\u03c2 (Levenshtein simple logic \/ Keyword matching)\n function getResponse(text) {\n const input = text.toLowerCase().normalize(\"NFD\").replace(\/[\\u0300-\\u036f]\/g, \"\"); \/\/ \u0391\u03c6\u03b1\u03af\u03c1\u03b5\u03c3\u03b7 \u03c4\u03cc\u03bd\u03c9\u03bd\n \n let bestMatch = null;\n let maxScore = 0;\n\n knowledgeBase.forEach(item => {\n let score = 0;\n item.keywords.forEach(key => {\n if (input.includes(key)) score++;\n });\n\n if (score > maxScore) {\n maxScore = score;\n bestMatch = item.response;\n }\n });\n\n return bestMatch || \"\u0394\u03b5\u03bd \u03b5\u03af\u03bc\u03b1\u03b9 \u03c3\u03af\u03b3\u03bf\u03c5\u03c1\u03bf\u03c2 \u03b1\u03bd \u03ba\u03b1\u03c4\u03ac\u03bb\u03b1\u03b2\u03b1, \u03b1\u03bb\u03bb\u03ac \u03b8\u03c5\u03bc\u03ae\u03c3\u03bf\u03c5: \u03c3\u03c4\u03bf\u03bd \u03c0\u03bf\u03bb\u03bb\u03b1\u03c0\u03bb\u03b1\u03c3\u03b9\u03b1\u03c3\u03bc\u03cc \u03b4\u03b5\u03ba\u03b1\u03b4\u03b9\u03ba\u03ce\u03bd \u03bc\u03b5\u03c4\u03c1\u03ac\u03bc\u03b5 \u03c0\u03ac\u03bd\u03c4\u03b1 \u03c4\u03b1 \u03c8\u03b7\u03c6\u03af\u03b1 \u03c3\u03c4\u03bf \u03c4\u03ad\u03bb\u03bf\u03c2! \u0398\u03ad\u03bb\u03b5\u03b9\u03c2 \u03bd\u03b1 \u03bc\u03b5 \u03c1\u03c9\u03c4\u03ae\u03c3\u03b5\u03b9\u03c2 \u03b3\u03b9\u03b1 \u03c4\u03b1 \u03b2\u03ae\u03bc\u03b1\u03c4\u03b1 \u03ae \u03bd\u03b1 \u03c3\u03bf\u03c5 \u03c0\u03c9 \u03ad\u03bd\u03b1 \u03c0\u03b1\u03c1\u03ac\u03b4\u03b5\u03b9\u03b3\u03bc\u03b1;\";\n }\n\n function addMessage(text, isUser) {\n const div = document.createElement('div');\n div.className = `chat-bubble ${isUser ? 'user-bubble' : 'tutor-bubble'}`;\n div.textContent = text;\n chatWindow.appendChild(div);\n chatWindow.scrollTop = chatWindow.scrollHeight;\n }\n\n function handleUserInput() {\n const text = userInput.value.trim();\n if (!text) return;\n\n addMessage(text, true);\n userInput.value = '';\n\n setTimeout(() => {\n const response = getResponse(text);\n addMessage(response, false);\n }, 600);\n }\n\n \/\/ \u0395\u03c0\u03b9\u03c4\u03c1\u03ad\u03c0\u03b5\u03b9 \u03c4\u03bf \"Enter\" \u03b3\u03b9\u03b1 \u03b1\u03c0\u03bf\u03c3\u03c4\u03bf\u03bb\u03ae\n userInput.addEventListener(\"keypress\", function(event) {\n if (event.key === \"Enter\") {\n handleUserInput();\n }\n });\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"193\" height=\"16\" src=\"https:\/\/prokopidis.sites.sch.gr\/wp-content\/uploads\/2024\/06\/\u03a3\u03c4\u03b9\u03b3\u03bc\u03b9\u03cc\u03c4\u03c5\u03c0\u03bf-\u03bf\u03b8\u03cc\u03bd\u03b7\u03c2-2025-12-30-203202.png\" alt=\"\" class=\"wp-image-5725\"\/><\/figure>\n<\/div>\n\n\n<p><\/p>\n\n\n\n<!doctype html>\n<html lang=\"el\">\n <head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>\u0393\u03bb\u03c9\u03c3\u03c3\u03ac\u03c1\u03b9 \u03a0\u03bf\u03bb\u03bb\u03b1\u03c0\u03bb\u03b1\u03c3\u03b9\u03b1\u03c3\u03bc\u03bf\u03cd \u0394\u03b5\u03ba\u03b1\u03b4\u03b9\u03ba\u03ce\u03bd<\/title>\n <script src=\"\/_sdk\/element_sdk.js\"><\/script>\n <style>\n body {\n box-sizing: border-box;\n }\n \n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n html, body {\n height: 100%;\n width: 100%;\n }\n\n body {\n font-family: 'Comic Sans MS', 'Arial Rounded MT Bold', sans-serif;\n overflow-auto;\n }\n\n .app-wrapper {\n min-height: 100%;\n width: 100%;\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n padding: 2rem;\n }\n\n .main-content {\n max-width: 1000px;\n margin: 0 auto;\n }\n\n .page-header {\n text-align: center;\n margin-bottom: 2.5rem;\n background: white;\n padding: 2rem;\n border-radius: 20px;\n box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);\n }\n\n .page-title {\n font-size: 2.5rem;\n color: #667eea;\n margin-bottom: 0.5rem;\n font-weight: bold;\n }\n\n .page-subtitle {\n font-size: 1.2rem;\n color: #764ba2;\n }\n\n .cards-grid {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 1.5rem;\n margin-bottom: 2rem;\n }\n\n .term-card {\n background: white;\n border-radius: 15px;\n padding: 1.5rem;\n box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);\n cursor: pointer;\n transition: transform 0.3s ease, box-shadow 0.3s ease;\n }\n\n .term-card:hover {\n transform: translateY(-5px);\n box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);\n }\n\n .term-card.card-1 { border-left: 5px solid #FF6B6B; }\n .term-card.card-2 { border-left: 5px solid #4ECDC4; }\n .term-card.card-3 { border-left: 5px solid #FFD93D; }\n .term-card.card-4 { border-left: 5px solid #95E1D3; }\n .term-card.card-5 { border-left: 5px solid #F38181; }\n .term-card.card-6 { border-left: 5px solid #AA96DA; }\n\n .term-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 1rem;\n }\n\n .term-title {\n font-size: 1.5rem;\n font-weight: bold;\n color: #2d3748;\n }\n\n .term-icon {\n font-size: 2rem;\n transition: transform 0.3s ease;\n }\n\n .term-card.expanded .term-icon {\n transform: rotate(180deg);\n }\n\n .term-definition {\n max-height: 0;\n overflow: hidden;\n transition: max-height 0.4s ease;\n color: #4a5568;\n line-height: 1.6;\n font-size: 1.1rem;\n }\n\n .term-card.expanded .term-definition {\n max-height: 500px;\n margin-top: 1rem;\n }\n\n .term-example {\n background: #f7fafc;\n padding: 1rem;\n border-radius: 10px;\n margin-top: 1rem;\n border-left: 3px solid #667eea;\n }\n\n .example-label {\n font-weight: bold;\n color: #667eea;\n margin-bottom: 0.5rem;\n }\n\n @media (max-width: 768px) {\n .cards-grid {\n grid-template-columns: 1fr;\n }\n\n .page-title {\n font-size: 2rem;\n }\n\n .term-title {\n font-size: 1.2rem;\n }\n }\n <\/style>\n <style>@view-transition { navigation: auto; }<\/style>\n <script src=\"\/_sdk\/data_sdk.js\" type=\"text\/javascript\"><\/script>\n <script src=\"https:\/\/cdn.tailwindcss.com\" type=\"text\/javascript\"><\/script>\n <\/head>\n <body>\n <div class=\"app-wrapper\">\n <div class=\"main-content\">\n <header class=\"page-header\">\n <h1 class=\"page-title\" id=\"mainTitle\">\ud83d\udcda \u0393\u03bb\u03c9\u03c3\u03c3\u03ac\u03c1\u03b9 \u039c\u03b1\u03b8\u03b7\u03bc\u03b1\u03c4\u03b9\u03ba\u03ce\u03bd<\/h1>\n <p class=\"page-subtitle\" id=\"subtitle\">\u039f \u03a0\u03bf\u03bb\u03bb\u03b1\u03c0\u03bb\u03b1\u03c3\u03b9\u03b1\u03c3\u03bc\u03cc\u03c2 \u03c3\u03c4\u03bf\u03c5\u03c2 \u0394\u03b5\u03ba\u03b1\u03b4\u03b9\u03ba\u03bf\u03cd\u03c2 \u0391\u03c1\u03b9\u03b8\u03bc\u03bf\u03cd\u03c2<\/p>\n <\/header>\n <div class=\"cards-grid\">\n <article class=\"term-card card-1\" onclick=\"toggleCard(this)\">\n <div class=\"term-header\">\n <h2 class=\"term-title\">\ud83d\udd22 \u0394\u03b5\u03ba\u03b1\u03b4\u03b9\u03ba\u03cc\u03c2 \u0391\u03c1\u03b9\u03b8\u03bc\u03cc\u03c2<\/h2><span class=\"term-icon\">\u2b07\ufe0f<\/span>\n <\/div>\n <div class=\"term-definition\">\n <p>\u0395\u03af\u03bd\u03b1\u03b9 \u03ad\u03bd\u03b1\u03c2 \u03b1\u03c1\u03b9\u03b8\u03bc\u03cc\u03c2 \u03c0\u03bf\u03c5 \u03ad\u03c7\u03b5\u03b9 \u03b4\u03cd\u03bf \u03bc\u03ad\u03c1\u03b7: \u03c4\u03bf \u03b1\u03ba\u03ad\u03c1\u03b1\u03b9\u03bf \u03bc\u03ad\u03c1\u03bf\u03c2 \u03ba\u03b1\u03b9 \u03c4\u03bf \u03b4\u03b5\u03ba\u03b1\u03b4\u03b9\u03ba\u03cc \u03bc\u03ad\u03c1\u03bf\u03c2. \u03a4\u03b1 \u03b4\u03cd\u03bf \u03bc\u03ad\u03c1\u03b7 \u03c7\u03c9\u03c1\u03af\u03b6\u03bf\u03bd\u03c4\u03b1\u03b9 \u03bc\u03b5 \u03c4\u03b7\u03bd \u03c5\u03c0\u03bf\u03b4\u03b9\u03b1\u03c3\u03c4\u03bf\u03bb\u03ae (\u03ba\u03cc\u03bc\u03bc\u03b1).<\/p>\n <div class=\"term-example\">\n <div class=\"example-label\">\n \ud83d\udccc \u03a0\u03b1\u03c1\u03ac\u03b4\u03b5\u03b9\u03b3\u03bc\u03b1:\n <\/div>\n <div>\n 3,5 \u2192 \u03c4\u03bf 3 \u03b5\u03af\u03bd\u03b1\u03b9 \u03c4\u03bf \u03b1\u03ba\u03ad\u03c1\u03b1\u03b9\u03bf \u03bc\u03ad\u03c1\u03bf\u03c2 \u03ba\u03b1\u03b9 \u03c4\u03bf 5 \u03b5\u03af\u03bd\u03b1\u03b9 \u03c4\u03bf \u03b4\u03b5\u03ba\u03b1\u03b4\u03b9\u03ba\u03cc \u03bc\u03ad\u03c1\u03bf\u03c2\n <\/div>\n <\/div>\n <\/div>\n <\/article>\n <article class=\"term-card card-2\" onclick=\"toggleCard(this)\">\n <div class=\"term-header\">\n <h2 class=\"term-title\">\u2716\ufe0f \u03a0\u03bf\u03bb\u03bb\u03b1\u03c0\u03bb\u03b1\u03c3\u03b9\u03b1\u03c3\u03bc\u03cc\u03c2<\/h2><span class=\"term-icon\">\u2b07\ufe0f<\/span>\n <\/div>\n <div class=\"term-definition\">\n <p>\u0395\u03af\u03bd\u03b1\u03b9 \u03b7 \u03bc\u03b1\u03b8\u03b7\u03bc\u03b1\u03c4\u03b9\u03ba\u03ae \u03c0\u03c1\u03ac\u03be\u03b7 \u03cc\u03c0\u03bf\u03c5 \u03ad\u03bd\u03b1\u03c2 \u03b1\u03c1\u03b9\u03b8\u03bc\u03cc\u03c2 (\u03c0\u03bf\u03bb\u03bb\u03b1\u03c0\u03bb\u03b1\u03c3\u03b9\u03b1\u03c3\u03c4\u03ad\u03bf\u03c2) \u03b5\u03c0\u03b1\u03bd\u03b1\u03bb\u03b1\u03bc\u03b2\u03ac\u03bd\u03b5\u03c4\u03b1\u03b9 \u03c4\u03cc\u03c3\u03b5\u03c2 \u03c6\u03bf\u03c1\u03ad\u03c2 \u03cc\u03c3\u03b5\u03c2 \u03b4\u03b5\u03af\u03c7\u03bd\u03b5\u03b9 \u03ad\u03bd\u03b1\u03c2 \u03ac\u03bb\u03bb\u03bf\u03c2 \u03b1\u03c1\u03b9\u03b8\u03bc\u03cc\u03c2 (\u03c0\u03bf\u03bb\u03bb\u03b1\u03c0\u03bb\u03b1\u03c3\u03b9\u03b1\u03c3\u03c4\u03ae\u03c2).<\/p>\n <div class=\"term-example\">\n <div class=\"example-label\">\n \ud83d\udccc \u03a0\u03b1\u03c1\u03ac\u03b4\u03b5\u03b9\u03b3\u03bc\u03b1:\n <\/div>\n <div>\n 2,5 \u00d7 3 = 2,5 + 2,5 + 2,5 = 7,5\n <\/div>\n <\/div>\n <\/div>\n <\/article>\n <article class=\"term-card card-3\" onclick=\"toggleCard(this)\">\n <div class=\"term-header\">\n <h2 class=\"term-title\">\ud83d\udccd \u03a5\u03c0\u03bf\u03b4\u03b9\u03b1\u03c3\u03c4\u03bf\u03bb\u03ae<\/h2><span class=\"term-icon\">\u2b07\ufe0f<\/span>\n <\/div>\n <div class=\"term-definition\">\n <p>\u0395\u03af\u03bd\u03b1\u03b9 \u03c4\u03bf \u03c3\u03b7\u03bc\u03b5\u03af\u03bf (\u03ba\u03cc\u03bc\u03bc\u03b1) \u03c0\u03bf\u03c5 \u03c7\u03c9\u03c1\u03af\u03b6\u03b5\u03b9 \u03c4\u03bf \u03b1\u03ba\u03ad\u03c1\u03b1\u03b9\u03bf \u03bc\u03ad\u03c1\u03bf\u03c2 \u03b1\u03c0\u03cc \u03c4\u03bf \u03b4\u03b5\u03ba\u03b1\u03b4\u03b9\u03ba\u03cc \u03bc\u03ad\u03c1\u03bf\u03c2 \u03b5\u03bd\u03cc\u03c2 \u03b1\u03c1\u03b9\u03b8\u03bc\u03bf\u03cd. \u03a3\u03c4\u03bf\u03bd \u03c0\u03bf\u03bb\u03bb\u03b1\u03c0\u03bb\u03b1\u03c3\u03b9\u03b1\u03c3\u03bc\u03cc, \u03c0\u03c1\u03bf\u03c3\u03ad\u03c7\u03bf\u03c5\u03bc\u03b5 \u03c0\u03cc\u03c3\u03b1 \u03b4\u03b5\u03ba\u03b1\u03b4\u03b9\u03ba\u03ac \u03c8\u03b7\u03c6\u03af\u03b1 \u03ad\u03c7\u03bf\u03c5\u03bd \u03bf\u03b9 \u03c0\u03b1\u03c1\u03ac\u03b3\u03bf\u03bd\u03c4\u03b5\u03c2 \u03b3\u03b9\u03b1 \u03bd\u03b1 \u03b2\u03ac\u03bb\u03bf\u03c5\u03bc\u03b5 \u03c3\u03c9\u03c3\u03c4\u03ac \u03c4\u03b7\u03bd \u03c5\u03c0\u03bf\u03b4\u03b9\u03b1\u03c3\u03c4\u03bf\u03bb\u03ae \u03c3\u03c4\u03bf \u03b3\u03b9\u03bd\u03cc\u03bc\u03b5\u03bd\u03bf.<\/p>\n <div class=\"term-example\">\n <div class=\"example-label\">\n \ud83d\udccc \u03a0\u03b1\u03c1\u03ac\u03b4\u03b5\u03b9\u03b3\u03bc\u03b1:\n <\/div>\n <div>\n 1,2 \u00d7 0,3 = 0,36 (1+1=2 \u03b4\u03b5\u03ba\u03b1\u03b4\u03b9\u03ba\u03ac \u03c8\u03b7\u03c6\u03af\u03b1)\n <\/div>\n <\/div>\n <\/div>\n <\/article>\n <article class=\"term-card card-4\" onclick=\"toggleCard(this)\">\n <div class=\"term-header\">\n <h2 class=\"term-title\">\ud83c\udfaf \u0393\u03b9\u03bd\u03cc\u03bc\u03b5\u03bd\u03bf<\/h2><span class=\"term-icon\">\u2b07\ufe0f<\/span>\n <\/div>\n <div class=\"term-definition\">\n <p>\u0395\u03af\u03bd\u03b1\u03b9 \u03c4\u03bf \u03b1\u03c0\u03bf\u03c4\u03ad\u03bb\u03b5\u03c3\u03bc\u03b1 \u03c4\u03bf\u03c5 \u03c0\u03bf\u03bb\u03bb\u03b1\u03c0\u03bb\u03b1\u03c3\u03b9\u03b1\u03c3\u03bc\u03bf\u03cd. \u038c\u03c4\u03b1\u03bd \u03c0\u03bf\u03bb\u03bb\u03b1\u03c0\u03bb\u03b1\u03c3\u03b9\u03ac\u03b6\u03bf\u03c5\u03bc\u03b5 \u03b4\u03b5\u03ba\u03b1\u03b4\u03b9\u03ba\u03bf\u03cd\u03c2 \u03b1\u03c1\u03b9\u03b8\u03bc\u03bf\u03cd\u03c2, \u03c4\u03bf \u03b3\u03b9\u03bd\u03cc\u03bc\u03b5\u03bd\u03bf \u03b5\u03af\u03bd\u03b1\u03b9 \u03b5\u03c0\u03af\u03c3\u03b7\u03c2 \u03b4\u03b5\u03ba\u03b1\u03b4\u03b9\u03ba\u03cc\u03c2 \u03b1\u03c1\u03b9\u03b8\u03bc\u03cc\u03c2.<\/p>\n <div class=\"term-example\">\n <div class=\"example-label\">\n \ud83d\udccc \u03a0\u03b1\u03c1\u03ac\u03b4\u03b5\u03b9\u03b3\u03bc\u03b1:\n <\/div>\n <div>\n 4,5 \u00d7 2 = 9 \u2192 \u03a4\u03bf 9 \u03b5\u03af\u03bd\u03b1\u03b9 \u03c4\u03bf \u03b3\u03b9\u03bd\u03cc\u03bc\u03b5\u03bd\u03bf\n <\/div>\n <\/div>\n <\/div>\n <\/article>\n <article class=\"term-card card-5\" onclick=\"toggleCard(this)\">\n <div class=\"term-header\">\n <h2 class=\"term-title\">\ud83d\udd1f \u0394\u03b5\u03ba\u03b1\u03b4\u03b9\u03ba\u03cc \u03a8\u03b7\u03c6\u03af\u03bf<\/h2><span class=\"term-icon\">\u2b07\ufe0f<\/span>\n <\/div>\n <div class=\"term-definition\">\n <p>\u0395\u03af\u03bd\u03b1\u03b9 \u03c4\u03b1 \u03c8\u03b7\u03c6\u03af\u03b1 \u03c0\u03bf\u03c5 \u03b2\u03c1\u03af\u03c3\u03ba\u03bf\u03bd\u03c4\u03b1\u03b9 \u03b4\u03b5\u03be\u03b9\u03ac \u03c4\u03b7\u03c2 \u03c5\u03c0\u03bf\u03b4\u03b9\u03b1\u03c3\u03c4\u03bf\u03bb\u03ae\u03c2. \u03a3\u03c4\u03bf\u03bd \u03c0\u03bf\u03bb\u03bb\u03b1\u03c0\u03bb\u03b1\u03c3\u03b9\u03b1\u03c3\u03bc\u03cc, \u03bc\u03b5\u03c4\u03c1\u03ac\u03bc\u03b5 \u03c0\u03cc\u03c3\u03b1 \u03b4\u03b5\u03ba\u03b1\u03b4\u03b9\u03ba\u03ac \u03c8\u03b7\u03c6\u03af\u03b1 \u03ad\u03c7\u03bf\u03c5\u03bd \u03cc\u03bb\u03bf\u03b9 \u03bf\u03b9 \u03c0\u03b1\u03c1\u03ac\u03b3\u03bf\u03bd\u03c4\u03b5\u03c2 \u03bc\u03b1\u03b6\u03af \u03b3\u03b9\u03b1 \u03bd\u03b1 \u03b2\u03ac\u03bb\u03bf\u03c5\u03bc\u03b5 \u03c4\u03b7 \u03c3\u03c9\u03c3\u03c4\u03ae \u03c5\u03c0\u03bf\u03b4\u03b9\u03b1\u03c3\u03c4\u03bf\u03bb\u03ae.<\/p>\n <div class=\"term-example\">\n <div class=\"example-label\">\n \ud83d\udccc \u03a0\u03b1\u03c1\u03ac\u03b4\u03b5\u03b9\u03b3\u03bc\u03b1:\n <\/div>\n <div>\n 0,25 \u00d7 0,4 \u2192 2 + 1 = 3 \u03b4\u03b5\u03ba\u03b1\u03b4\u03b9\u03ba\u03ac \u03c8\u03b7\u03c6\u03af\u03b1 \u2192 0,100 = 0,1\n <\/div>\n <\/div>\n <\/div>\n <\/article>\n <article class=\"term-card card-6\" onclick=\"toggleCard(this)\">\n <div class=\"term-header\">\n <h2 class=\"term-title\">\u26a1 \u039a\u03b1\u03bd\u03cc\u03bd\u03b1\u03c2 \u03a0\u03bf\u03bb\u03bb\u03b1\u03c0\u03bb\u03b1\u03c3\u03b9\u03b1\u03c3\u03bc\u03bf\u03cd<\/h2><span class=\"term-icon\">\u2b07\ufe0f<\/span>\n <\/div>\n <div class=\"term-definition\">\n <p>\u03a0\u03bf\u03bb\u03bb\u03b1\u03c0\u03bb\u03b1\u03c3\u03b9\u03ac\u03b6\u03bf\u03c5\u03bc\u03b5 \u03c4\u03bf\u03c5\u03c2 \u03b4\u03b5\u03ba\u03b1\u03b4\u03b9\u03ba\u03bf\u03cd\u03c2 \u03c3\u03b1\u03bd \u03bd\u03b1 \u03b5\u03af\u03bd\u03b1\u03b9 \u03b1\u03ba\u03ad\u03c1\u03b1\u03b9\u03bf\u03b9 (\u03b1\u03b3\u03bd\u03bf\u03ce\u03bd\u03c4\u03b1\u03c2 \u03c4\u03b7\u03bd \u03c5\u03c0\u03bf\u03b4\u03b9\u03b1\u03c3\u03c4\u03bf\u03bb\u03ae). \u039c\u03b5\u03c4\u03ac, \u03bc\u03b5\u03c4\u03c1\u03ac\u03bc\u03b5 \u03c4\u03b1 \u03b4\u03b5\u03ba\u03b1\u03b4\u03b9\u03ba\u03ac \u03c8\u03b7\u03c6\u03af\u03b1 \u03ba\u03b1\u03b9 \u03c4\u03c9\u03bd \u03b4\u03cd\u03bf \u03b1\u03c1\u03b9\u03b8\u03bc\u03ce\u03bd \u03ba\u03b1\u03b9 \u03b2\u03ac\u03b6\u03bf\u03c5\u03bc\u03b5 \u03c4\u03b7\u03bd \u03c5\u03c0\u03bf\u03b4\u03b9\u03b1\u03c3\u03c4\u03bf\u03bb\u03ae \u03c3\u03c4\u03bf \u03b1\u03c0\u03bf\u03c4\u03ad\u03bb\u03b5\u03c3\u03bc\u03b1.<\/p>\n <div class=\"term-example\">\n <div class=\"example-label\">\n \ud83d\udccc \u03a0\u03b1\u03c1\u03ac\u03b4\u03b5\u03b9\u03b3\u03bc\u03b1:\n <\/div>\n <div>\n 1,5 \u00d7 2,3 \u2192 15 \u00d7 23 = 345 \u2192 1+1=2 \u03c8\u03b7\u03c6\u03af\u03b1 \u2192 3,45\n <\/div>\n <\/div>\n <\/div>\n <\/article>\n <\/div>\n <\/div>\n <\/div>\n <script>\n const defaultConfig = {\n main_title: \"\ud83d\udcda \u0393\u03bb\u03c9\u03c3\u03c3\u03ac\u03c1\u03b9 \u039c\u03b1\u03b8\u03b7\u03bc\u03b1\u03c4\u03b9\u03ba\u03ce\u03bd\",\n subtitle: \"\u039f \u03a0\u03bf\u03bb\u03bb\u03b1\u03c0\u03bb\u03b1\u03c3\u03b9\u03b1\u03c3\u03bc\u03cc\u03c2 \u03c3\u03c4\u03bf\u03c5\u03c2 \u0394\u03b5\u03ba\u03b1\u03b4\u03b9\u03ba\u03bf\u03cd\u03c2 \u0391\u03c1\u03b9\u03b8\u03bc\u03bf\u03cd\u03c2\",\n background_color: \"#667eea\",\n card_background: \"#ffffff\",\n title_color: \"#667eea\",\n text_color: \"#2d3748\",\n font_family: \"Comic Sans MS\"\n };\n\n function toggleCard(card) {\n card.classList.toggle('expanded');\n }\n\n async function onConfigChange(config) {\n const mainTitle = document.getElementById('mainTitle');\n const subtitle = document.getElementById('subtitle');\n\n if (mainTitle) {\n mainTitle.textContent = config.main_title || defaultConfig.main_title;\n }\n if (subtitle) {\n subtitle.textContent = config.subtitle || defaultConfig.subtitle;\n }\n }\n\n function mapToCapabilities(config) {\n return {\n recolorables: [\n {\n get: () => config.background_color || defaultConfig.background_color,\n set: (value) => {\n config.background_color = value;\n const wrapper = document.querySelector('.app-wrapper');\n if (wrapper) {\n wrapper.style.background = `linear-gradient(135deg, ${value} 0%, ${value} 100%)`;\n }\n window.elementSdk.setConfig({ background_color: value });\n }\n },\n {\n get: () => config.card_background || defaultConfig.card_background,\n set: (value) => {\n config.card_background = value;\n const cards = document.querySelectorAll('.term-card, .page-header');\n cards.forEach(card => {\n card.style.backgroundColor = value;\n });\n window.elementSdk.setConfig({ card_background: value });\n }\n },\n {\n get: () => config.title_color || defaultConfig.title_color,\n set: (value) => {\n config.title_color = value;\n const titles = document.querySelectorAll('.page-title, .example-label');\n titles.forEach(title => {\n title.style.color = value;\n });\n window.elementSdk.setConfig({ title_color: value });\n }\n },\n {\n get: () => config.text_color || defaultConfig.text_color,\n set: (value) => {\n config.text_color = value;\n const texts = document.querySelectorAll('.term-title, .term-definition, .page-subtitle');\n texts.forEach(text => {\n text.style.color = value;\n });\n window.elementSdk.setConfig({ text_color: value });\n }\n }\n ],\n borderables: [],\n fontEditable: {\n get: () => config.font_family || defaultConfig.font_family,\n set: (value) => {\n config.font_family = value;\n document.body.style.fontFamily = `${value}, 'Comic Sans MS', 'Arial Rounded MT Bold', sans-serif`;\n window.elementSdk.setConfig({ font_family: value });\n }\n },\n fontSizeable: undefined\n };\n }\n\n function mapToEditPanelValues(config) {\n return new Map([\n [\"main_title\", config.main_title || defaultConfig.main_title],\n [\"subtitle\", config.subtitle || defaultConfig.subtitle]\n ]);\n }\n\n if (window.elementSdk) {\n window.elementSdk.init({\n defaultConfig,\n onConfigChange,\n mapToCapabilities,\n mapToEditPanelValues\n });\n }\n <\/script>\n <script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML=\"window.__CF$cv$params={r:'9b7b2a04756e6f67',t:'MTc2NzM2NjQyNi4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='\/cdn-cgi\/challenge-platform\/scripts\/jsd\/main.js';document.getElementsByTagName('head')[0].appendChild(a);\";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();<\/script><\/body>\n<\/html>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"193\" height=\"16\" src=\"https:\/\/prokopidis.sites.sch.gr\/wp-content\/uploads\/2024\/06\/\u03a3\u03c4\u03b9\u03b3\u03bc\u03b9\u03cc\u03c4\u03c5\u03c0\u03bf-\u03bf\u03b8\u03cc\u03bd\u03b7\u03c2-2025-12-30-203202.png\" alt=\"\" class=\"wp-image-5725\"\/><\/figure>\n<\/div>\n\n\n<!doctype html>\n<html lang=\"el\">\n <head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>\u03a0\u03bf\u03bb\u03bb\u03b1\u03c0\u03bb\u03b1\u03c3\u03b9\u03b1\u03c3\u03bc\u03cc\u03c2 \u0394\u03b5\u03ba\u03b1\u03b4\u03b9\u03ba\u03ce\u03bd \u0391\u03c1\u03b9\u03b8\u03bc\u03ce\u03bd<\/title>\n <script src=\"\/_sdk\/element_sdk.js\"><\/script>\n <style>\n body {\n box-sizing: border-box;\n }\n \n * {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n }\n\n html, body {\n height: 100%;\n }\n\n .app-wrapper {\n width: 100%;\n height: 100%;\n overflow-auto;\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n padding: 40px 20px;\n }\n\n .main-content {\n max-width: 1200px;\n margin: 0 auto;\n }\n\n .page-title {\n text-align: center;\n color: #1e3a8a;\n font-size: 42px;\n font-weight: bold;\n margin-bottom: 40px;\n text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);\n background: white;\n padding: 30px;\n border-radius: 20px;\n box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);\n }\n\n .tabs-grid {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 30px;\n margin-bottom: 40px;\n }\n\n .tab-card {\n background: white;\n border-radius: 16px;\n padding: 30px;\n box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);\n cursor: pointer;\n transition: all 0.3s ease;\n border: 3px solid transparent;\n }\n\n .tab-card:hover {\n transform: translateY(-5px);\n box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);\n border-color: #667eea;\n }\n\n .tab-card.active {\n border-color: #667eea;\n background: linear-gradient(135deg, #f8f9ff 0%, #e8ecff 100%);\n }\n\n .tab-icon {\n font-size: 48px;\n margin-bottom: 15px;\n text-align: center;\n }\n\n .tab-title {\n font-size: 24px;\n font-weight: bold;\n color: #1e3a8a;\n text-align: center;\n margin-bottom: 10px;\n }\n\n .tab-description {\n font-size: 16px;\n color: #64748b;\n text-align: center;\n }\n\n .content-area {\n background: white;\n border-radius: 16px;\n padding: 40px;\n box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);\n min-height: 400px;\n }\n\n .content-section {\n display: none;\n }\n\n .content-section.active {\n display: block;\n animation: fadeIn 0.5s ease;\n }\n\n @keyframes fadeIn {\n from {\n opacity: 0;\n transform: translateY(20px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n .section-title {\n font-size: 28px;\n font-weight: bold;\n color: #1e3a8a;\n margin-bottom: 25px;\n padding-bottom: 15px;\n border-bottom: 3px solid #667eea;\n }\n\n .theory-content {\n line-height: 1.8;\n color: #334155;\n font-size: 18px;\n }\n\n .theory-content strong {\n color: #1e3a8a;\n font-size: 20px;\n }\n\n .example-box {\n background: #f1f5f9;\n border-left: 5px solid #667eea;\n padding: 20px;\n margin: 20px 0;\n border-radius: 8px;\n }\n\n .example-title {\n font-weight: bold;\n color: #1e3a8a;\n margin-bottom: 10px;\n font-size: 20px;\n }\n\n .exercise-item {\n background: #f8fafc;\n padding: 25px;\n margin: 20px 0;\n border-radius: 12px;\n border: 2px solid #e2e8f0;\n }\n\n .exercise-question {\n font-size: 20px;\n font-weight: bold;\n color: #334155;\n margin-bottom: 15px;\n }\n\n .exercise-input {\n display: flex;\n gap: 15px;\n align-items: center;\n margin: 15px 0;\n }\n\n .exercise-input input {\n flex: 1;\n padding: 12px 20px;\n font-size: 18px;\n border: 2px solid #cbd5e1;\n border-radius: 8px;\n transition: border-color 0.3s ease;\n }\n\n .exercise-input input:focus {\n outline: none;\n border-color: #667eea;\n }\n\n .check-button {\n background: #667eea;\n color: white;\n border: none;\n padding: 12px 30px;\n border-radius: 8px;\n font-size: 16px;\n font-weight: bold;\n cursor: pointer;\n transition: all 0.3s ease;\n }\n\n .check-button:hover {\n background: #5568d3;\n transform: scale(1.05);\n }\n\n .feedback {\n margin-top: 15px;\n padding: 15px;\n border-radius: 8px;\n font-weight: bold;\n display: none;\n }\n\n .feedback.correct {\n background: #d1fae5;\n color: #065f46;\n border: 2px solid #10b981;\n display: block;\n }\n\n .feedback.incorrect {\n background: #fee2e2;\n color: #991b1b;\n border: 2px solid #ef4444;\n display: block;\n }\n\n .quiz-question {\n background: #f8fafc;\n padding: 25px;\n margin: 20px 0;\n border-radius: 12px;\n border: 2px solid #e2e8f0;\n }\n\n .quiz-text {\n font-size: 20px;\n font-weight: bold;\n color: #334155;\n margin-bottom: 20px;\n }\n\n .quiz-options {\n display: flex;\n flex-direction: column;\n gap: 12px;\n }\n\n .quiz-option {\n background: white;\n padding: 15px 20px;\n border: 2px solid #cbd5e1;\n border-radius: 8px;\n cursor: pointer;\n transition: all 0.3s ease;\n font-size: 18px;\n }\n\n .quiz-option:hover {\n border-color: #667eea;\n background: #f1f5f9;\n }\n\n .quiz-option.selected {\n background: #667eea;\n color: white;\n border-color: #667eea;\n }\n\n .quiz-option.correct {\n background: #10b981;\n color: white;\n border-color: #10b981;\n }\n\n .quiz-option.incorrect {\n background: #ef4444;\n color: white;\n border-color: #ef4444;\n }\n\n .score-display {\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n color: white;\n padding: 25px;\n border-radius: 12px;\n text-align: center;\n margin-top: 30px;\n font-size: 24px;\n font-weight: bold;\n }\n\n @media (max-width: 768px) {\n .tabs-grid {\n grid-template-columns: 1fr;\n }\n\n .page-title {\n font-size: 32px;\n padding: 20px;\n }\n\n .content-area {\n padding: 25px;\n }\n }\n <\/style>\n <style>@view-transition { navigation: auto; }<\/style>\n <script src=\"\/_sdk\/data_sdk.js\" type=\"text\/javascript\"><\/script>\n <script src=\"https:\/\/cdn.tailwindcss.com\" type=\"text\/javascript\"><\/script>\n <\/head>\n <body>\n <div class=\"app-wrapper\">\n <div class=\"main-content\">\n <h1 class=\"page-title\" id=\"mainTitle\">\u039f \u03a0\u03bf\u03bb\u03bb\u03b1\u03c0\u03bb\u03b1\u03c3\u03b9\u03b1\u03c3\u03bc\u03cc\u03c2 \u03c3\u03c4\u03bf\u03c5\u03c2 \u0394\u03b5\u03ba\u03b1\u03b4\u03b9\u03ba\u03bf\u03cd\u03c2 \u0391\u03c1\u03b9\u03b8\u03bc\u03bf\u03cd\u03c2<\/h1>\n <div class=\"tabs-grid\">\n <div class=\"tab-card\" data-tab=\"theory\">\n <div class=\"tab-icon\">\n \ud83d\udcda\n <\/div>\n <div class=\"tab-title\" id=\"tab1Title\">\n \u0398\u03b5\u03c9\u03c1\u03af\u03b1\n <\/div>\n <div class=\"tab-description\">\n \u039c\u03ac\u03b8\u03b5 \u03c4\u03bf\u03c5\u03c2 \u03ba\u03b1\u03bd\u03cc\u03bd\u03b5\u03c2\n <\/div>\n <\/div>\n <div class=\"tab-card\" data-tab=\"examples\">\n <div class=\"tab-icon\">\n \ud83d\udca1\n <\/div>\n <div class=\"tab-title\" id=\"tab2Title\">\n \u03a0\u03b1\u03c1\u03b1\u03b4\u03b5\u03af\u03b3\u03bc\u03b1\u03c4\u03b1\n <\/div>\n <div class=\"tab-description\">\n \u0394\u03b5\u03c2 \u03bb\u03c5\u03bc\u03ad\u03bd\u03b5\u03c2 \u03b1\u03c3\u03ba\u03ae\u03c3\u03b5\u03b9\u03c2\n <\/div>\n <\/div>\n <div class=\"tab-card\" data-tab=\"exercises\">\n <div class=\"tab-icon\">\n \u270f\ufe0f\n <\/div>\n <div class=\"tab-title\" id=\"tab3Title\">\n \u0391\u03c3\u03ba\u03ae\u03c3\u03b5\u03b9\u03c2\n <\/div>\n <div class=\"tab-description\">\n \u0395\u03be\u03b1\u03c3\u03ba\u03ae\u03c3\u03bf\u03c5 \u03c3\u03c4\u03b1 \u03bc\u03b1\u03b8\u03b7\u03bc\u03b1\u03c4\u03b9\u03ba\u03ac\n <\/div>\n <\/div>\n <div class=\"tab-card\" data-tab=\"quiz\">\n <div class=\"tab-icon\">\n \ud83c\udfaf\n <\/div>\n <div class=\"tab-title\" id=\"tab4Title\">\n \u039a\u03bf\u03c5\u03af\u03b6\n <\/div>\n <div class=\"tab-description\">\n \u0394\u03bf\u03ba\u03af\u03bc\u03b1\u03c3\u03b5 \u03c4\u03b9\u03c2 \u03b3\u03bd\u03ce\u03c3\u03b5\u03b9\u03c2 \u03c3\u03bf\u03c5\n <\/div>\n <\/div>\n <\/div>\n <div class=\"content-area\">\n <div class=\"content-section active\" id=\"theory\">\n <h2 class=\"section-title\">\u0398\u03b5\u03c9\u03c1\u03af\u03b1 – \u039a\u03b1\u03bd\u03cc\u03bd\u03b5\u03c2 \u03a0\u03bf\u03bb\u03bb\u03b1\u03c0\u03bb\u03b1\u03c3\u03b9\u03b1\u03c3\u03bc\u03bf\u03cd<\/h2>\n <div class=\"theory-content\">\n <p><strong>\u03a0\u03ce\u03c2 \u03c0\u03bf\u03bb\u03bb\u03b1\u03c0\u03bb\u03b1\u03c3\u03b9\u03ac\u03b6\u03bf\u03c5\u03bc\u03b5 \u03b4\u03b5\u03ba\u03b1\u03b4\u03b9\u03ba\u03bf\u03cd\u03c2 \u03b1\u03c1\u03b9\u03b8\u03bc\u03bf\u03cd\u03c2;<\/strong><\/p>\n <div class=\"example-box\">\n <div class=\"example-title\">\n \ud83d\udcdd \u0392\u03ae\u03bc\u03b1 1:\n <\/div>\n <p>\u03a0\u03bf\u03bb\u03bb\u03b1\u03c0\u03bb\u03b1\u03c3\u03b9\u03ac\u03b6\u03bf\u03c5\u03bc\u03b5 \u03c4\u03bf\u03c5\u03c2 \u03b1\u03c1\u03b9\u03b8\u03bc\u03bf\u03cd\u03c2 \u03c7\u03c9\u03c1\u03af\u03c2 \u03bd\u03b1 \u03bb\u03ac\u03b2\u03bf\u03c5\u03bc\u03b5 \u03c5\u03c0\u03cc\u03c8\u03b7 \u03c4\u03b7\u03bd \u03c5\u03c0\u03bf\u03b4\u03b9\u03b1\u03c3\u03c4\u03bf\u03bb\u03ae (\u03b4\u03b7\u03bb\u03b1\u03b4\u03ae \u03c3\u03b1\u03bd \u03bd\u03b1 \u03b5\u03af\u03bd\u03b1\u03b9 \u03b1\u03ba\u03ad\u03c1\u03b1\u03b9\u03bf\u03b9).<\/p>\n <\/div>\n <div class=\"example-box\">\n <div class=\"example-title\">\n \ud83d\udcdd \u0392\u03ae\u03bc\u03b1 2:\n <\/div>\n <p>\u039c\u03b5\u03c4\u03c1\u03ac\u03bc\u03b5 \u03c0\u03cc\u03c3\u03b1 \u03c8\u03b7\u03c6\u03af\u03b1 \u03ad\u03c7\u03b5\u03b9 \u03c4\u03bf \u03c0\u03c1\u03ce\u03c4\u03bf \u03b4\u03b5\u03ba\u03b1\u03b4\u03b9\u03ba\u03cc \u03bc\u03ad\u03c1\u03bf\u03c2 \u03ba\u03b1\u03b9 \u03c0\u03cc\u03c3\u03b1 \u03c4\u03bf \u03b4\u03b5\u03cd\u03c4\u03b5\u03c1\u03bf.<\/p>\n <\/div>\n <div class=\"example-box\">\n <div class=\"example-title\">\n \ud83d\udcdd \u0392\u03ae\u03bc\u03b1 3:\n <\/div>\n <p>\u03a4\u03bf\u03c0\u03bf\u03b8\u03b5\u03c4\u03bf\u03cd\u03bc\u03b5 \u03c4\u03b7\u03bd \u03c5\u03c0\u03bf\u03b4\u03b9\u03b1\u03c3\u03c4\u03bf\u03bb\u03ae \u03c3\u03c4\u03bf \u03b3\u03b9\u03bd\u03cc\u03bc\u03b5\u03bd\u03bf, \u03bc\u03b5\u03c4\u03c1\u03ce\u03bd\u03c4\u03b1\u03c2 \u03b1\u03c0\u03cc \u03c4\u03b1 \u03b4\u03b5\u03be\u03b9\u03ac \u03c0\u03c1\u03bf\u03c2 \u03c4\u03b1 \u03b1\u03c1\u03b9\u03c3\u03c4\u03b5\u03c1\u03ac \u03c4\u03cc\u03c3\u03b1 \u03c8\u03b7\u03c6\u03af\u03b1 \u03cc\u03c3\u03b1 \u03b5\u03af\u03bd\u03b1\u03b9 \u03c4\u03bf \u03ac\u03b8\u03c1\u03bf\u03b9\u03c3\u03bc\u03b1 \u03c4\u03c9\u03bd \u03b4\u03b5\u03ba\u03b1\u03b4\u03b9\u03ba\u03ce\u03bd \u03c8\u03b7\u03c6\u03af\u03c9\u03bd \u03c4\u03c9\u03bd \u03b4\u03cd\u03bf \u03c0\u03b1\u03c1\u03b1\u03b3\u03cc\u03bd\u03c4\u03c9\u03bd.<\/p>\n <\/div>\n <div class=\"example-box\">\n <div class=\"example-title\">\n \u2728 \u03a0\u03b1\u03c1\u03ac\u03b4\u03b5\u03b9\u03b3\u03bc\u03b1:\n <\/div>\n <p><strong>2,5 \u00d7 1,2 = ;<\/strong><\/p>\n <p>\u2022 \u03a0\u03bf\u03bb\u03bb\u03b1\u03c0\u03bb\u03b1\u03c3\u03b9\u03ac\u03b6\u03bf\u03c5\u03bc\u03b5: 25 \u00d7 12 = 300<\/p>\n <p>\u2022 \u039c\u03b5\u03c4\u03c1\u03ac\u03bc\u03b5: 2,5 \u03ad\u03c7\u03b5\u03b9 1 \u03b4\u03b5\u03ba\u03b1\u03b4\u03b9\u03ba\u03cc \u03c8\u03b7\u03c6\u03af\u03bf, 1,2 \u03ad\u03c7\u03b5\u03b9 1 \u03b4\u03b5\u03ba\u03b1\u03b4\u03b9\u03ba\u03cc \u03c8\u03b7\u03c6\u03af\u03bf, \u03c3\u03cd\u03bd\u03bf\u03bb\u03bf 2<\/p>\n <p>\u2022 \u03a4\u03bf\u03c0\u03bf\u03b8\u03b5\u03c4\u03bf\u03cd\u03bc\u03b5 \u03c4\u03b7\u03bd \u03c5\u03c0\u03bf\u03b4\u03b9\u03b1\u03c3\u03c4\u03bf\u03bb\u03ae: 3,00 = <strong>3<\/strong><\/p>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"content-section\" id=\"examples\">\n <h2 class=\"section-title\">\u03a0\u03b1\u03c1\u03b1\u03b4\u03b5\u03af\u03b3\u03bc\u03b1\u03c4\u03b1 – \u039b\u03c5\u03bc\u03ad\u03bd\u03b5\u03c2 \u0391\u03c3\u03ba\u03ae\u03c3\u03b5\u03b9\u03c2<\/h2>\n <div class=\"example-box\">\n <div class=\"example-title\">\n \ud83d\udccc \u03a0\u03b1\u03c1\u03ac\u03b4\u03b5\u03b9\u03b3\u03bc\u03b1 1: 3,4 \u00d7 2\n <\/div>\n <p><strong>\u039b\u03cd\u03c3\u03b7:<\/strong><\/p>\n <p>\u2022 \u03a0\u03bf\u03bb\u03bb\u03b1\u03c0\u03bb\u03b1\u03c3\u03b9\u03ac\u03b6\u03bf\u03c5\u03bc\u03b5: 34 \u00d7 2 = 68<\/p>\n <p>\u2022 \u03a4\u03bf 3,4 \u03ad\u03c7\u03b5\u03b9 1 \u03b4\u03b5\u03ba\u03b1\u03b4\u03b9\u03ba\u03cc \u03c8\u03b7\u03c6\u03af\u03bf<\/p>\n <p>\u2022 \u03a4\u03bf\u03c0\u03bf\u03b8\u03b5\u03c4\u03bf\u03cd\u03bc\u03b5 \u03c4\u03b7\u03bd \u03c5\u03c0\u03bf\u03b4\u03b9\u03b1\u03c3\u03c4\u03bf\u03bb\u03ae: <strong>6,8<\/strong><\/p>\n <\/div>\n <div class=\"example-box\">\n <div class=\"example-title\">\n \ud83d\udccc \u03a0\u03b1\u03c1\u03ac\u03b4\u03b5\u03b9\u03b3\u03bc\u03b1 2: 1,25 \u00d7 4\n <\/div>\n <p><strong>\u039b\u03cd\u03c3\u03b7:<\/strong><\/p>\n <p>\u2022 \u03a0\u03bf\u03bb\u03bb\u03b1\u03c0\u03bb\u03b1\u03c3\u03b9\u03ac\u03b6\u03bf\u03c5\u03bc\u03b5: 125 \u00d7 4 = 500<\/p>\n <p>\u2022 \u03a4\u03bf 1,25 \u03ad\u03c7\u03b5\u03b9 2 \u03b4\u03b5\u03ba\u03b1\u03b4\u03b9\u03ba\u03ac \u03c8\u03b7\u03c6\u03af\u03b1<\/p>\n <p>\u2022 \u03a4\u03bf\u03c0\u03bf\u03b8\u03b5\u03c4\u03bf\u03cd\u03bc\u03b5 \u03c4\u03b7\u03bd \u03c5\u03c0\u03bf\u03b4\u03b9\u03b1\u03c3\u03c4\u03bf\u03bb\u03ae: <strong>5,00 = 5<\/strong><\/p>\n <\/div>\n <div class=\"example-box\">\n <div class=\"example-title\">\n \ud83d\udccc \u03a0\u03b1\u03c1\u03ac\u03b4\u03b5\u03b9\u03b3\u03bc\u03b1 3: 2,3 \u00d7 1,5\n <\/div>\n <p><strong>\u039b\u03cd\u03c3\u03b7:<\/strong><\/p>\n <p>\u2022 \u03a0\u03bf\u03bb\u03bb\u03b1\u03c0\u03bb\u03b1\u03c3\u03b9\u03ac\u03b6\u03bf\u03c5\u03bc\u03b5: 23 \u00d7 15 = 345<\/p>\n <p>\u2022 \u03a4\u03bf 2,3 \u03ad\u03c7\u03b5\u03b9 1 \u03b4\u03b5\u03ba\u03b1\u03b4\u03b9\u03ba\u03cc, \u03c4\u03bf 1,5 \u03ad\u03c7\u03b5\u03b9 1 \u03b4\u03b5\u03ba\u03b1\u03b4\u03b9\u03ba\u03cc, \u03c3\u03cd\u03bd\u03bf\u03bb\u03bf 2<\/p>\n <p>\u2022 \u03a4\u03bf\u03c0\u03bf\u03b8\u03b5\u03c4\u03bf\u03cd\u03bc\u03b5 \u03c4\u03b7\u03bd \u03c5\u03c0\u03bf\u03b4\u03b9\u03b1\u03c3\u03c4\u03bf\u03bb\u03ae: <strong>3,45<\/strong><\/p>\n <\/div>\n <div class=\"example-box\">\n <div class=\"example-title\">\n \ud83d\udccc \u03a0\u03b1\u03c1\u03ac\u03b4\u03b5\u03b9\u03b3\u03bc\u03b1 4: 0,5 \u00d7 0,6\n <\/div>\n <p><strong>\u039b\u03cd\u03c3\u03b7:<\/strong><\/p>\n <p>\u2022 \u03a0\u03bf\u03bb\u03bb\u03b1\u03c0\u03bb\u03b1\u03c3\u03b9\u03ac\u03b6\u03bf\u03c5\u03bc\u03b5: 5 \u00d7 6 = 30<\/p>\n <p>\u2022 \u03a4\u03bf 0,5 \u03ad\u03c7\u03b5\u03b9 1 \u03b4\u03b5\u03ba\u03b1\u03b4\u03b9\u03ba\u03cc, \u03c4\u03bf 0,6 \u03ad\u03c7\u03b5\u03b9 1 \u03b4\u03b5\u03ba\u03b1\u03b4\u03b9\u03ba\u03cc, \u03c3\u03cd\u03bd\u03bf\u03bb\u03bf 2<\/p>\n <p>\u2022 \u03a4\u03bf\u03c0\u03bf\u03b8\u03b5\u03c4\u03bf\u03cd\u03bc\u03b5 \u03c4\u03b7\u03bd \u03c5\u03c0\u03bf\u03b4\u03b9\u03b1\u03c3\u03c4\u03bf\u03bb\u03ae: <strong>0,30 = 0,3<\/strong><\/p>\n <\/div>\n <\/div>\n <div class=\"content-section\" id=\"exercises\">\n <h2 class=\"section-title\">\u0391\u03c3\u03ba\u03ae\u03c3\u03b5\u03b9\u03c2 – \u0395\u03be\u03b1\u03c3\u03ba\u03ae\u03c3\u03bf\u03c5<\/h2>\n <div class=\"exercise-item\">\n <div class=\"exercise-question\">\n 1. \u03a5\u03c0\u03bf\u03bb\u03cc\u03b3\u03b9\u03c3\u03b5: 4,2 \u00d7 3 = ;\n <\/div>\n <div class=\"exercise-input\"><input type=\"text\" id=\"ex1\" placeholder=\"\u0393\u03c1\u03ac\u03c8\u03b5 \u03c4\u03b7\u03bd \u03b1\u03c0\u03ac\u03bd\u03c4\u03b7\u03c3\u03ae \u03c3\u03bf\u03c5\"> <button class=\"check-button\" onclick=\"checkExercise(1, 12.6)\">\u0388\u03bb\u03b5\u03b3\u03c7\u03bf\u03c2<\/button>\n <\/div>\n <div class=\"feedback\" id=\"feedback1\"><\/div>\n <\/div>\n <div class=\"exercise-item\">\n <div class=\"exercise-question\">\n 2. \u03a5\u03c0\u03bf\u03bb\u03cc\u03b3\u03b9\u03c3\u03b5: 1,5 \u00d7 2,4 = ;\n <\/div>\n <div class=\"exercise-input\"><input type=\"text\" id=\"ex2\" placeholder=\"\u0393\u03c1\u03ac\u03c8\u03b5 \u03c4\u03b7\u03bd \u03b1\u03c0\u03ac\u03bd\u03c4\u03b7\u03c3\u03ae \u03c3\u03bf\u03c5\"> <button class=\"check-button\" onclick=\"checkExercise(2, 3.6)\">\u0388\u03bb\u03b5\u03b3\u03c7\u03bf\u03c2<\/button>\n <\/div>\n <div class=\"feedback\" id=\"feedback2\"><\/div>\n <\/div>\n <div class=\"exercise-item\">\n <div class=\"exercise-question\">\n 3. \u03a5\u03c0\u03bf\u03bb\u03cc\u03b3\u03b9\u03c3\u03b5: 0,8 \u00d7 5 = ;\n <\/div>\n <div class=\"exercise-input\"><input type=\"text\" id=\"ex3\" placeholder=\"\u0393\u03c1\u03ac\u03c8\u03b5 \u03c4\u03b7\u03bd \u03b1\u03c0\u03ac\u03bd\u03c4\u03b7\u03c3\u03ae \u03c3\u03bf\u03c5\"> <button class=\"check-button\" onclick=\"checkExercise(3, 4)\">\u0388\u03bb\u03b5\u03b3\u03c7\u03bf\u03c2<\/button>\n <\/div>\n <div class=\"feedback\" id=\"feedback3\"><\/div>\n <\/div>\n <div class=\"exercise-item\">\n <div class=\"exercise-question\">\n 4. \u03a5\u03c0\u03bf\u03bb\u03cc\u03b3\u03b9\u03c3\u03b5: 2,25 \u00d7 4 = ;\n <\/div>\n <div class=\"exercise-input\"><input type=\"text\" id=\"ex4\" placeholder=\"\u0393\u03c1\u03ac\u03c8\u03b5 \u03c4\u03b7\u03bd \u03b1\u03c0\u03ac\u03bd\u03c4\u03b7\u03c3\u03ae \u03c3\u03bf\u03c5\"> <button class=\"check-button\" onclick=\"checkExercise(4, 9)\">\u0388\u03bb\u03b5\u03b3\u03c7\u03bf\u03c2<\/button>\n <\/div>\n <div class=\"feedback\" id=\"feedback4\"><\/div>\n <\/div>\n <div class=\"exercise-item\">\n <div class=\"exercise-question\">\n 5. \u03a5\u03c0\u03bf\u03bb\u03cc\u03b3\u03b9\u03c3\u03b5: 3,5 \u00d7 2,2 = ;\n <\/div>\n <div class=\"exercise-input\"><input type=\"text\" id=\"ex5\" placeholder=\"\u0393\u03c1\u03ac\u03c8\u03b5 \u03c4\u03b7\u03bd \u03b1\u03c0\u03ac\u03bd\u03c4\u03b7\u03c3\u03ae \u03c3\u03bf\u03c5\"> <button class=\"check-button\" onclick=\"checkExercise(5, 7.7)\">\u0388\u03bb\u03b5\u03b3\u03c7\u03bf\u03c2<\/button>\n <\/div>\n <div class=\"feedback\" id=\"feedback5\"><\/div>\n <\/div>\n <\/div>\n <div class=\"content-section\" id=\"quiz\">\n <h2 class=\"section-title\">\u039a\u03bf\u03c5\u03af\u03b6 – \u0394\u03bf\u03ba\u03b9\u03bc\u03ac\u03c3\u03c4\u03b5 \u03c4\u03b9\u03c2 \u0393\u03bd\u03ce\u03c3\u03b5\u03b9\u03c2 \u03c3\u03b1\u03c2<\/h2>\n <div class=\"quiz-question\" id=\"q1\">\n <div class=\"quiz-text\">\n 1. \u03a0\u03cc\u03c3\u03bf \u03ba\u03ac\u03bd\u03b5\u03b9 1,5 \u00d7 2 ;\n <\/div>\n <div class=\"quiz-options\">\n <div class=\"quiz-option\" onclick=\"checkQuiz(1, 1, false)\">\n 1,5\n <\/div>\n <div class=\"quiz-option\" onclick=\"checkQuiz(1, 2, true)\">\n 3\n <\/div>\n <div class=\"quiz-option\" onclick=\"checkQuiz(1, 3, false)\">\n 3,5\n <\/div>\n <div class=\"quiz-option\" onclick=\"checkQuiz(1, 4, false)\">\n 4\n <\/div>\n <\/div>\n <\/div>\n <div class=\"quiz-question\" id=\"q2\">\n <div class=\"quiz-text\">\n 2. \u03a0\u03cc\u03c3\u03bf \u03ba\u03ac\u03bd\u03b5\u03b9 0,5 \u00d7 0,4 ;\n <\/div>\n <div class=\"quiz-options\">\n <div class=\"quiz-option\" onclick=\"checkQuiz(2, 1, false)\">\n 0,9\n <\/div>\n <div class=\"quiz-option\" onclick=\"checkQuiz(2, 2, true)\">\n 0,2\n <\/div>\n <div class=\"quiz-option\" onclick=\"checkQuiz(2, 3, false)\">\n 2\n <\/div>\n <div class=\"quiz-option\" onclick=\"checkQuiz(2, 4, false)\">\n 0,1\n <\/div>\n <\/div>\n <\/div>\n <div class=\"quiz-question\" id=\"q3\">\n <div class=\"quiz-text\">\n 3. \u03a0\u03cc\u03c3\u03bf \u03ba\u03ac\u03bd\u03b5\u03b9 2,5 \u00d7 3 ;\n <\/div>\n <div class=\"quiz-options\">\n <div class=\"quiz-option\" onclick=\"checkQuiz(3, 1, false)\">\n 6,5\n <\/div>\n <div class=\"quiz-option\" onclick=\"checkQuiz(3, 2, false)\">\n 5,5\n <\/div>\n <div class=\"quiz-option\" onclick=\"checkQuiz(3, 3, true)\">\n 7,5\n <\/div>\n <div class=\"quiz-option\" onclick=\"checkQuiz(3, 4, false)\">\n 8\n <\/div>\n <\/div>\n <\/div>\n <div class=\"quiz-question\" id=\"q4\">\n <div class=\"quiz-text\">\n 4. \u03a0\u03cc\u03c3\u03bf \u03ba\u03ac\u03bd\u03b5\u03b9 1,2 \u00d7 1,5 ;\n <\/div>\n <div class=\"quiz-options\">\n <div class=\"quiz-option\" onclick=\"checkQuiz(4, 1, false)\">\n 1,5\n <\/div>\n <div class=\"quiz-option\" onclick=\"checkQuiz(4, 2, true)\">\n 1,8\n <\/div>\n <div class=\"quiz-option\" onclick=\"checkQuiz(4, 3, false)\">\n 2,7\n <\/div>\n <div class=\"quiz-option\" onclick=\"checkQuiz(4, 4, false)\">\n 1,2\n <\/div>\n <\/div>\n <\/div>\n <div class=\"quiz-question\" id=\"q5\">\n <div class=\"quiz-text\">\n 5. \u03a0\u03cc\u03c3\u03bf \u03ba\u03ac\u03bd\u03b5\u03b9 4,5 \u00d7 2 ;\n <\/div>\n <div class=\"quiz-options\">\n <div class=\"quiz-option\" onclick=\"checkQuiz(5, 1, false)\">\n 8\n <\/div>\n <div class=\"quiz-option\" onclick=\"checkQuiz(5, 2, true)\">\n 9\n <\/div>\n <div class=\"quiz-option\" onclick=\"checkQuiz(5, 3, false)\">\n 6,5\n <\/div>\n <div class=\"quiz-option\" onclick=\"checkQuiz(5, 4, false)\">\n 10\n <\/div>\n <\/div>\n <\/div>\n <div class=\"score-display\" id=\"scoreDisplay\" style=\"display: none;\">\n \u03a3\u03ba\u03bf\u03c1: <span id=\"score\">0<\/span>\/5 \u2b50\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <script>\n const defaultConfig = {\n main_title: \"\u039f \u03a0\u03bf\u03bb\u03bb\u03b1\u03c0\u03bb\u03b1\u03c3\u03b9\u03b1\u03c3\u03bc\u03cc\u03c2 \u03c3\u03c4\u03bf\u03c5\u03c2 \u0394\u03b5\u03ba\u03b1\u03b4\u03b9\u03ba\u03bf\u03cd\u03c2 \u0391\u03c1\u03b9\u03b8\u03bc\u03bf\u03cd\u03c2\",\n tab1_title: \"\u0398\u03b5\u03c9\u03c1\u03af\u03b1\",\n tab2_title: \"\u03a0\u03b1\u03c1\u03b1\u03b4\u03b5\u03af\u03b3\u03bc\u03b1\u03c4\u03b1\",\n tab3_title: \"\u0391\u03c3\u03ba\u03ae\u03c3\u03b5\u03b9\u03c2\",\n tab4_title: \"\u039a\u03bf\u03c5\u03af\u03b6\"\n };\n\n let quizScore = 0;\n let quizAnswered = 0;\n\n function checkExercise(exerciseNum, correctAnswer) {\n const input = document.getElementById('ex' + exerciseNum);\n const feedback = document.getElementById('feedback' + exerciseNum);\n const userAnswer = parseFloat(input.value.replace(',', '.'));\n\n if (Math.abs(userAnswer - correctAnswer) < 0.01) {\n feedback.className = 'feedback correct';\n feedback.textContent = '\u2705 \u039c\u03c0\u03c1\u03ac\u03b2\u03bf! \u03a3\u03c9\u03c3\u03c4\u03ae \u03b1\u03c0\u03ac\u03bd\u03c4\u03b7\u03c3\u03b7!';\n } else {\n feedback.className = 'feedback incorrect';\n feedback.textContent = '\u274c \u039b\u03ac\u03b8\u03bf\u03c2! \u0397 \u03c3\u03c9\u03c3\u03c4\u03ae \u03b1\u03c0\u03ac\u03bd\u03c4\u03b7\u03c3\u03b7 \u03b5\u03af\u03bd\u03b1\u03b9: ' + correctAnswer;\n }\n }\n\n function checkQuiz(questionNum, optionNum, isCorrect) {\n const question = document.getElementById('q' + questionNum);\n const options = question.querySelectorAll('.quiz-option');\n \n if (options[optionNum - 1].classList.contains('correct') || \n options[optionNum - 1].classList.contains('incorrect')) {\n return;\n }\n\n quizAnswered++;\n\n options.forEach((option, index) => {\n option.style.pointerEvents = 'none';\n if (index === optionNum - 1) {\n if (isCorrect) {\n option.classList.add('correct');\n quizScore++;\n } else {\n option.classList.add('incorrect');\n }\n } else if (option.onclick && option.onclick.toString().includes('true')) {\n option.classList.add('correct');\n }\n });\n\n if (quizAnswered === 5) {\n const scoreDisplay = document.getElementById('scoreDisplay');\n const scoreSpan = document.getElementById('score');\n scoreSpan.textContent = quizScore;\n scoreDisplay.style.display = 'block';\n }\n }\n\n document.querySelectorAll('.tab-card').forEach(card => {\n card.addEventListener('click', function() {\n const tabName = this.dataset.tab;\n \n document.querySelectorAll('.tab-card').forEach(c => c.classList.remove('active'));\n this.classList.add('active');\n \n document.querySelectorAll('.content-section').forEach(section => {\n section.classList.remove('active');\n });\n \n document.getElementById(tabName).classList.add('active');\n });\n });\n\n async function onConfigChange(config) {\n const mainTitle = config.main_title || defaultConfig.main_title;\n const tab1Title = config.tab1_title || defaultConfig.tab1_title;\n const tab2Title = config.tab2_title || defaultConfig.tab2_title;\n const tab3Title = config.tab3_title || defaultConfig.tab3_title;\n const tab4Title = config.tab4_title || defaultConfig.tab4_title;\n\n document.getElementById('mainTitle').textContent = mainTitle;\n document.getElementById('tab1Title').textContent = tab1Title;\n document.getElementById('tab2Title').textContent = tab2Title;\n document.getElementById('tab3Title').textContent = tab3Title;\n document.getElementById('tab4Title').textContent = tab4Title;\n }\n\n function mapToCapabilities(config) {\n return {\n recolorables: [],\n borderables: [],\n fontEditable: undefined,\n fontSizeable: undefined\n };\n }\n\n function mapToEditPanelValues(config) {\n return new Map([\n [\"main_title\", config.main_title || defaultConfig.main_title],\n [\"tab1_title\", config.tab1_title || defaultConfig.tab1_title],\n [\"tab2_title\", config.tab2_title || defaultConfig.tab2_title],\n [\"tab3_title\", config.tab3_title || defaultConfig.tab3_title],\n [\"tab4_title\", config.tab4_title || defaultConfig.tab4_title]\n ]);\n }\n\n if (window.elementSdk) {\n window.elementSdk.init({\n defaultConfig,\n onConfigChange,\n mapToCapabilities,\n mapToEditPanelValues\n });\n }\n <\/script>\n <script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML=\"window.__CF$cv$params={r:'9b7b322667b66f67',t:'MTc2NzM2Njc1OS4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='\/cdn-cgi\/challenge-platform\/scripts\/jsd\/main.js';document.getElementsByTagName('head')[0].appendChild(a);\";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();<\/script><\/body>\n<\/html>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>AI Tutor – \u03a0\u03bf\u03bb\u03bb\u03b1\u03c0\u03bb\u03b1\u03c3\u03b9\u03b1\u03c3\u03bc\u03cc\u03c2 \u0394\u03b5\u03ba\u03b1\u03b4\u03b9\u03ba\u03ce\u03bd \ud83e\udd16 \u039f \u03a8\u03b7\u03c6\u03b9\u03b1\u03ba\u03cc\u03c2 \u03c3\u03bf\u03c5 \u0392\u03bf\u03b7\u03b8\u03cc\u03c2 \u03c3\u03c4\u03b1 \u039c\u03b1\u03b8\u03b7\u03bc\u03b1\u03c4\u03b9\u03ba\u03ac \u039c\u03b1\u03b8\u03b1\u03af\u03bd\u03bf\u03c5\u03bc\u03b5 \u03c4\u03bf\u03bd \u03a0\u03bf\u03bb\u03bb\u03b1\u03c0\u03bb\u03b1\u03c3\u03b9\u03b1\u03c3\u03bc\u03cc \u0394\u03b5\u03ba\u03b1\u03b4\u03b9\u03ba\u03ce\u03bd \u03bc\u03b1\u03b6\u03af! \ud83d\udcda \u0397 \u0398\u03b5\u03c9\u03c1\u03af\u03b1 \u03bc\u03b1\u03c2 1. \u039e\u03ad\u03c7\u03bd\u03b1 \u03c4\u03b7\u03bd \u03c5\u03c0\u03bf\u03b4\u03b9\u03b1\u03c3\u03c4\u03bf\u03bb\u03ae: \u039a\u03ac\u03bd\u03b5 \u03c4\u03bf\u03bd \u03c0\u03bf\u03bb\u03bb\u03b1\u03c0\u03bb\u03b1\u03c3\u03b9\u03b1\u03c3\u03bc\u03cc \u03c3\u03b1\u03bd \u03bd\u03b1 \u03b5\u03af\u03bd\u03b1\u03b9 \u03c6\u03c5\u03c3\u03b9\u03ba\u03bf\u03af \u03b1\u03c1\u03b9\u03b8\u03bc\u03bf\u03af. 2. \u039c\u03ad\u03c4\u03c1\u03b1 \u03c4\u03b1 \u03c8\u03b7\u03c6\u03af\u03b1: \u0394\u03b5\u03c2 \u03c0\u03cc\u03c3\u03b1 \u03c8\u03b7\u03c6\u03af\u03b1 \u03c5\u03c0\u03ac\u03c1\u03c7\u03bf\u03c5\u03bd \u03bc\u03b5\u03c4\u03ac \u03c4\u03b7\u03bd \u03c5\u03c0\u03bf\u03b4\u03b9\u03b1\u03c3\u03c4\u03bf\u03bb\u03ae \u039a\u0391\u0399 \u03c3\u03c4\u03bf\u03c5\u03c2 \u03b4\u03cd\u03bf \u03b1\u03c1\u03b9\u03b8\u03bc\u03bf\u03cd\u03c2 \u03bc\u03b1\u03b6\u03af. 3. \u0392\u03ac\u03bb\u03b5 \u03c4\u03b7\u03bd \u03c5\u03c0\u03bf\u03b4\u03b9\u03b1\u03c3\u03c4\u03bf\u03bb\u03ae: \u039e\u03b5\u03ba\u03af\u03bd\u03b1 \u03b1\u03c0\u03cc … <a href=\"https:\/\/prokopidis.sites.sch.gr\/?p=4209\" class=\"more-link\">\u0394\u03b9\u03b1\u03b2\u03ac\u03c3\u03c4\u03b5 \u03c0\u03b5\u03c1\u03b9\u03c3\u03c3\u03cc\u03c4\u03b5\u03c1\u03b1<span class=\"screen-reader-text\"> “\u039f \u03c0\u03bf\u03bb\u03bb\u03b1\u03c0\u03bb\u03b1\u03c3\u03b9\u03b1\u03c3\u03bc\u03cc\u03c2 \u03c3\u03c4\u03bf\u03c5\u03c2 \u03b4\u03b5\u03ba\u03b1\u03b4\u03b9\u03ba\u03bf\u03cd\u03c2 \u03b1\u03c1\u03b9\u03b8\u03bc\u03bf\u03cd\u03c2”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-4209","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"featured_image_src":null,"featured_image_src_square":null,"author_info":{"display_name":"nikos","author_link":"https:\/\/prokopidis.sites.sch.gr\/?author=1"},"_links":{"self":[{"href":"https:\/\/prokopidis.sites.sch.gr\/index.php?rest_route=\/wp\/v2\/posts\/4209","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/prokopidis.sites.sch.gr\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/prokopidis.sites.sch.gr\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/prokopidis.sites.sch.gr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/prokopidis.sites.sch.gr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=4209"}],"version-history":[{"count":7,"href":"https:\/\/prokopidis.sites.sch.gr\/index.php?rest_route=\/wp\/v2\/posts\/4209\/revisions"}],"predecessor-version":[{"id":5875,"href":"https:\/\/prokopidis.sites.sch.gr\/index.php?rest_route=\/wp\/v2\/posts\/4209\/revisions\/5875"}],"wp:attachment":[{"href":"https:\/\/prokopidis.sites.sch.gr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=4209"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/prokopidis.sites.sch.gr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=4209"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/prokopidis.sites.sch.gr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=4209"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}