{"id":4182,"date":"2024-07-11T20:44:37","date_gmt":"2024-07-11T20:44:37","guid":{"rendered":"https:\/\/prokopidis.sites.sch.gr\/?p=4182"},"modified":"2026-01-20T20:05:53","modified_gmt":"2026-01-20T20:05:53","slug":"4182","status":"publish","type":"post","link":"https:\/\/prokopidis.sites.sch.gr\/?p=4182","title":{"rendered":"\u03a0\u03bf\u03bb\u03bb\u03b1\u03c0\u03bb\u03b1\u03c3\u03b9\u03b1\u03c3\u03bc\u03cc\u03c2 \u03c6\u03c5\u03c3\u03b9\u03ba\u03bf\u03cd \u03b1\u03c1\u03b9\u03b8\u03bc\u03bf\u03cd \u03ae \u03ba\u03bb\u03ac\u03c3\u03bc\u03b1\u03c4\u03bf\u03c2 \u03bc\u03b5 \u03ba\u03bb\u03ac\u03c3\u03bc\u03b1- \u0391\u03bd\u03c4\u03af\u03c3\u03c4\u03c1\u03bf\u03c6\u03bf\u03b9 \u03b1\u03c1\u03b9\u03b8\u03bc\u03bf\u03af"},"content":{"rendered":"\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6a4014369124d&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6a4014369124d\" class=\"wp-block-image size-large wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"569\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/prokopidis.sites.sch.gr\/wp-content\/uploads\/2024\/07\/\u03a3\u03c4\u03b9\u03b3\u03bc\u03b9\u03cc\u03c4\u03c5\u03c0\u03bf-\u03bf\u03b8\u03cc\u03bd\u03b7\u03c2-2026-01-20-211748-1024x569.png\" alt=\"\" class=\"wp-image-5990\" srcset=\"https:\/\/prokopidis.sites.sch.gr\/wp-content\/uploads\/2024\/07\/\u03a3\u03c4\u03b9\u03b3\u03bc\u03b9\u03cc\u03c4\u03c5\u03c0\u03bf-\u03bf\u03b8\u03cc\u03bd\u03b7\u03c2-2026-01-20-211748-1024x569.png 1024w, https:\/\/prokopidis.sites.sch.gr\/wp-content\/uploads\/2024\/07\/\u03a3\u03c4\u03b9\u03b3\u03bc\u03b9\u03cc\u03c4\u03c5\u03c0\u03bf-\u03bf\u03b8\u03cc\u03bd\u03b7\u03c2-2026-01-20-211748-300x167.png 300w, https:\/\/prokopidis.sites.sch.gr\/wp-content\/uploads\/2024\/07\/\u03a3\u03c4\u03b9\u03b3\u03bc\u03b9\u03cc\u03c4\u03c5\u03c0\u03bf-\u03bf\u03b8\u03cc\u03bd\u03b7\u03c2-2026-01-20-211748-768x426.png 768w, https:\/\/prokopidis.sites.sch.gr\/wp-content\/uploads\/2024\/07\/\u03a3\u03c4\u03b9\u03b3\u03bc\u03b9\u03cc\u03c4\u03c5\u03c0\u03bf-\u03bf\u03b8\u03cc\u03bd\u03b7\u03c2-2026-01-20-211748.png 1095w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"\u039c\u03b5\u03b3\u03ad\u03b8\u03c5\u03bd\u03c3\u03b7\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><figcaption class=\"wp-element-caption\">\u03ba\u03bb\u03b9\u03ba \u03b3\u03b9\u03b1 \u03bc\u03b5\u03b3\u03ad\u03b8\u03c5\u03bd\u03c3\u03b7<\/figcaption><\/figure>\n\n\n<div class=\"_df_book df-lite\" id=\"df_6018\"  _slug=\"%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%86%cf%85%cf%83%ce%b9%ce%ba%ce%bf%cf%8d-%ce%b1%cf%81%ce%b9%ce%b8%ce%bc%ce%bf%cf%8d-%ce%ae-%ce%ba%ce%bb\" data-title=\"%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%86%cf%85%cf%83%ce%b9%ce%ba%ce%bf%cf%8d-%ce%b1%cf%81%ce%b9%ce%b8%ce%bc%ce%bf%cf%8d-%ce%ae-%ce%ba%ce%bb\" wpoptions=\"true\" thumbtype=\"\" ><\/div><script class=\"df-shortcode-script\" nowprocket type=\"application\/javascript\">window.option_df_6018 = {\"outline\":[],\"autoEnableOutline\":\"false\",\"autoEnableThumbnail\":\"false\",\"overwritePDFOutline\":\"false\",\"enableDownload\":\"false\",\"direction\":\"1\",\"pageSize\":\"1\",\"source\":\"https:\\\/\\\/prokopidis.sites.sch.gr\\\/wp-content\\\/uploads\\\/2026\\\/01\\\/Multiplying_Fractions-1.pdf\",\"wpOptions\":\"true\"}; if(window.DFLIP && window.DFLIP.parseBooks){window.DFLIP.parseBooks();}<\/script>\n\n\n\n<p><\/p>\n\n\n<div class=\"_df_book df-lite\" id=\"6015\"  data-title=\"\" wpoptions=\"true\" thumbtype=\"\" ><\/div>\n\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>\u039c\u03b1\u03b8\u03b7\u03bc\u03b1\u03c4\u03b9\u03ba\u03cc \u0393\u03bb\u03c9\u03c3\u03c3\u03ac\u03c1\u03b9<\/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        .app-wrapper {\n            min-height: 100%;\n            width: 100%;\n            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n            padding: 2rem;\n            overflow-auto;\n            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n        }\n        \n        .container {\n            max-width: 1200px;\n            margin: 0 auto;\n        }\n        \n        .header {\n            text-align: center;\n            margin-bottom: 3rem;\n        }\n        \n        .main-title {\n            font-size: 3rem;\n            font-weight: bold;\n            color: #ffffff;\n            margin-bottom: 0.5rem;\n            text-shadow: 2px 2px 4px rgba(0,0,0,0.2);\n        }\n        \n        .subtitle {\n            font-size: 1.5rem;\n            color: #f0f0f0;\n            font-weight: 300;\n        }\n        \n        .glossary-grid {\n            display: grid;\n            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n            gap: 1.5rem;\n            margin-bottom: 2rem;\n        }\n        \n        .term-card {\n            background: #ffffff;\n            border-radius: 16px;\n            padding: 0;\n            cursor: pointer;\n            transition: transform 0.3s ease, box-shadow 0.3s ease;\n            box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n            perspective: 1000px;\n            min-height: 200px;\n        }\n        \n        .term-card:hover {\n            transform: translateY(-5px);\n            box-shadow: 0 8px 12px rgba(0,0,0,0.15);\n        }\n        \n        .card-inner {\n            position: relative;\n            width: 100%;\n            height: 100%;\n            min-height: 200px;\n            text-align: center;\n            transition: transform 0.6s;\n            transform-style: preserve-3d;\n        }\n        \n        .term-card.flipped .card-inner {\n            transform: rotateY(180deg);\n        }\n        \n        .card-front, .card-back {\n            position: absolute;\n            width: 100%;\n            height: 100%;\n            backface-visibility: hidden;\n            border-radius: 16px;\n            display: flex;\n            flex-direction: column;\n            justify-content: center;\n            align-items: center;\n            padding: 1.5rem;\n        }\n        \n        .card-front {\n            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);\n        }\n        \n        .card-back {\n            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);\n            transform: rotateY(180deg);\n        }\n        \n        .term-icon {\n            font-size: 3rem;\n            margin-bottom: 1rem;\n        }\n        \n        .term-name {\n            font-size: 1.5rem;\n            font-weight: bold;\n            color: #ffffff;\n            margin-bottom: 0.5rem;\n        }\n        \n        .term-hint {\n            font-size: 0.9rem;\n            color: #ffffff;\n            opacity: 0.9;\n        }\n        \n        .term-definition {\n            font-size: 1.1rem;\n            color: #ffffff;\n            line-height: 1.6;\n            text-align: center;\n        }\n        \n        .term-example {\n            font-size: 1rem;\n            color: #ffffff;\n            margin-top: 1rem;\n            padding: 0.75rem;\n            background: rgba(255,255,255,0.2);\n            border-radius: 8px;\n            font-weight: 500;\n        }\n        \n        .footer {\n            text-align: center;\n            margin-top: 3rem;\n            padding: 1.5rem;\n            background: rgba(255,255,255,0.1);\n            border-radius: 12px;\n        }\n        \n        .footer-text {\n            color: #ffffff;\n            font-size: 1.1rem;\n        }\n        \n        @media (max-width: 768px) {\n            .app-wrapper {\n                padding: 1rem;\n            }\n            \n            .main-title {\n                font-size: 2rem;\n            }\n            \n            .subtitle {\n                font-size: 1.2rem;\n            }\n            \n            .glossary-grid {\n                grid-template-columns: 1fr;\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=\"container\">\n    <header class=\"header\">\n     <h1 class=\"main-title\" id=\"mainTitle\">\u039c\u03b1\u03b8\u03b7\u03bc\u03b1\u03c4\u03b9\u03ba\u03cc \u0393\u03bb\u03c9\u03c3\u03c3\u03ac\u03c1\u03b9<\/h1>\n     <p class=\"subtitle\" id=\"subtitle\">\u03a0\u03bf\u03bb\u03bb\u03b1\u03c0\u03bb\u03b1\u03c3\u03b9\u03b1\u03c3\u03bc\u03cc\u03c2 \u03bc\u03b5 \u039a\u03bb\u03ac\u03c3\u03bc\u03b1\u03c4\u03b1 &amp; \u0391\u03bd\u03c4\u03af\u03c3\u03c4\u03c1\u03bf\u03c6\u03bf\u03b9 \u0391\u03c1\u03b9\u03b8\u03bc\u03bf\u03af<\/p>\n    <\/header>\n    <div class=\"glossary-grid\" id=\"glossaryGrid\"><\/div>\n    <footer class=\"footer\">\n     <p class=\"footer-text\" id=\"footerText\">\ud83d\udca1 \u039a\u03ac\u03bd\u03b5 \u03ba\u03bb\u03b9\u03ba \u03c3\u03c4\u03b9\u03c2 \u03ba\u03ac\u03c1\u03c4\u03b5\u03c2 \u03b3\u03b9\u03b1 \u03bd\u03b1 \u03b1\u03bd\u03b1\u03ba\u03b1\u03bb\u03cd\u03c8\u03b5\u03b9\u03c2 \u03c4\u03b9\u03c2 \u03ad\u03bd\u03bd\u03bf\u03b9\u03b5\u03c2!<\/p>\n    <\/footer>\n   <\/div>\n  <\/div>\n  <script>\n        const defaultConfig = {\n            main_title: \"\u039c\u03b1\u03b8\u03b7\u03bc\u03b1\u03c4\u03b9\u03ba\u03cc \u0393\u03bb\u03c9\u03c3\u03c3\u03ac\u03c1\u03b9\",\n            subtitle: \"\u03a0\u03bf\u03bb\u03bb\u03b1\u03c0\u03bb\u03b1\u03c3\u03b9\u03b1\u03c3\u03bc\u03cc\u03c2 \u03bc\u03b5 \u039a\u03bb\u03ac\u03c3\u03bc\u03b1\u03c4\u03b1 & \u0391\u03bd\u03c4\u03af\u03c3\u03c4\u03c1\u03bf\u03c6\u03bf\u03b9 \u0391\u03c1\u03b9\u03b8\u03bc\u03bf\u03af\",\n            footer_text: \"\ud83d\udca1 \u039a\u03ac\u03bd\u03b5 \u03ba\u03bb\u03b9\u03ba \u03c3\u03c4\u03b9\u03c2 \u03ba\u03ac\u03c1\u03c4\u03b5\u03c2 \u03b3\u03b9\u03b1 \u03bd\u03b1 \u03b1\u03bd\u03b1\u03ba\u03b1\u03bb\u03cd\u03c8\u03b5\u03b9\u03c2 \u03c4\u03b9\u03c2 \u03ad\u03bd\u03bd\u03bf\u03b9\u03b5\u03c2!\",\n            background_color: \"#667eea\",\n            card_front_color: \"#f093fb\",\n            card_back_color: \"#4facfe\",\n            text_color: \"#ffffff\",\n            footer_bg_color: \"#f0f0f0\"\n        };\n\n        const terms = [\n            {\n                icon: \"\ud83d\udd22\",\n                name: \"\u039a\u03bb\u03ac\u03c3\u03bc\u03b1\",\n                hint: \"\u039a\u03ac\u03bd\u03b5 \u03ba\u03bb\u03b9\u03ba \u03b3\u03b9\u03b1 \u03bf\u03c1\u03b9\u03c3\u03bc\u03cc\",\n                definition: \"\u0391\u03c1\u03b9\u03b8\u03bc\u03cc\u03c2 \u03c0\u03bf\u03c5 \u03b5\u03ba\u03c6\u03c1\u03ac\u03b6\u03b5\u03b9 \u03bc\u03ad\u03c1\u03bf\u03c2 \u03b5\u03bd\u03cc\u03c2 \u03b1\u03ba\u03ad\u03c1\u03b1\u03b9\u03bf\u03c5. \u0391\u03c0\u03bf\u03c4\u03b5\u03bb\u03b5\u03af\u03c4\u03b1\u03b9 \u03b1\u03c0\u03cc \u03b1\u03c1\u03b9\u03b8\u03bc\u03b7\u03c4\u03ae \u03ba\u03b1\u03b9 \u03c0\u03b1\u03c1\u03bf\u03bd\u03bf\u03bc\u03b1\u03c3\u03c4\u03ae.\",\n                example: \"\u03a0\u03b1\u03c1\u03ac\u03b4\u03b5\u03b9\u03b3\u03bc\u03b1: 3\/4 (\u03c4\u03c1\u03af\u03b1 \u03c4\u03ad\u03c4\u03b1\u03c1\u03c4\u03b1)\"\n            },\n            {\n                icon: \"\u2b06\ufe0f\",\n                name: \"\u0391\u03c1\u03b9\u03b8\u03bc\u03b7\u03c4\u03ae\u03c2\",\n                hint: \"\u039a\u03ac\u03bd\u03b5 \u03ba\u03bb\u03b9\u03ba \u03b3\u03b9\u03b1 \u03bf\u03c1\u03b9\u03c3\u03bc\u03cc\",\n                definition: \"\u039f \u03b1\u03c1\u03b9\u03b8\u03bc\u03cc\u03c2 \u03c0\u03bf\u03c5 \u03b2\u03c1\u03af\u03c3\u03ba\u03b5\u03c4\u03b1\u03b9 \u03c0\u03ac\u03bd\u03c9 \u03b1\u03c0\u03cc \u03c4\u03b7\u03bd \u03ba\u03bb\u03b1\u03c3\u03bc\u03b1\u03c4\u03b9\u03ba\u03ae \u03b3\u03c1\u03b1\u03bc\u03bc\u03ae. \u0394\u03b5\u03af\u03c7\u03bd\u03b5\u03b9 \u03c0\u03cc\u03c3\u03b1 \u03bc\u03ad\u03c1\u03b7 \u03c0\u03b1\u03af\u03c1\u03bd\u03bf\u03c5\u03bc\u03b5.\",\n                example: \"\u03a3\u03c4\u03bf 3\/4, \u03bf \u03b1\u03c1\u03b9\u03b8\u03bc\u03b7\u03c4\u03ae\u03c2 \u03b5\u03af\u03bd\u03b1\u03b9 \u03c4\u03bf 3\"\n            },\n            {\n                icon: \"\u2b07\ufe0f\",\n                name: \"\u03a0\u03b1\u03c1\u03bf\u03bd\u03bf\u03bc\u03b1\u03c3\u03c4\u03ae\u03c2\",\n                hint: \"\u039a\u03ac\u03bd\u03b5 \u03ba\u03bb\u03b9\u03ba \u03b3\u03b9\u03b1 \u03bf\u03c1\u03b9\u03c3\u03bc\u03cc\",\n                definition: \"\u039f \u03b1\u03c1\u03b9\u03b8\u03bc\u03cc\u03c2 \u03c0\u03bf\u03c5 \u03b2\u03c1\u03af\u03c3\u03ba\u03b5\u03c4\u03b1\u03b9 \u03ba\u03ac\u03c4\u03c9 \u03b1\u03c0\u03cc \u03c4\u03b7\u03bd \u03ba\u03bb\u03b1\u03c3\u03bc\u03b1\u03c4\u03b9\u03ba\u03ae \u03b3\u03c1\u03b1\u03bc\u03bc\u03ae. \u0394\u03b5\u03af\u03c7\u03bd\u03b5\u03b9 \u03c3\u03b5 \u03c0\u03cc\u03c3\u03b1 \u03af\u03c3\u03b1 \u03bc\u03ad\u03c1\u03b7 \u03c7\u03c9\u03c1\u03af\u03b6\u03b5\u03c4\u03b1\u03b9 \u03c4\u03bf \u03c3\u03cd\u03bd\u03bf\u03bb\u03bf.\",\n                example: \"\u03a3\u03c4\u03bf 3\/4, \u03bf \u03c0\u03b1\u03c1\u03bf\u03bd\u03bf\u03bc\u03b1\u03c3\u03c4\u03ae\u03c2 \u03b5\u03af\u03bd\u03b1\u03b9 \u03c4\u03bf 4\"\n            },\n            {\n                icon: \"\u2716\ufe0f\",\n                name: \"\u03a0\u03bf\u03bb\u03bb\u03b1\u03c0\u03bb\u03b1\u03c3\u03b9\u03b1\u03c3\u03bc\u03cc\u03c2 \u039a\u03bb\u03b1\u03c3\u03bc\u03ac\u03c4\u03c9\u03bd\",\n                hint: \"\u039a\u03ac\u03bd\u03b5 \u03ba\u03bb\u03b9\u03ba \u03b3\u03b9\u03b1 \u03bf\u03c1\u03b9\u03c3\u03bc\u03cc\",\n                definition: \"\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\u03b7\u03c4\u03ad\u03c2 \u03bc\u03b5\u03c4\u03b1\u03be\u03cd \u03c4\u03bf\u03c5\u03c2 \u03ba\u03b1\u03b9 \u03c4\u03bf\u03c5\u03c2 \u03c0\u03b1\u03c1\u03bf\u03bd\u03bf\u03bc\u03b1\u03c3\u03c4\u03ad\u03c2 \u03bc\u03b5\u03c4\u03b1\u03be\u03cd \u03c4\u03bf\u03c5\u03c2.\",\n                example: \"2\/3 \u00d7 3\/4 = (2\u00d73)\/(3\u00d74) = 6\/12 = 1\/2\"\n            },\n            {\n                icon: \"\ud83d\udd04\",\n                name: \"\u0391\u03bd\u03c4\u03af\u03c3\u03c4\u03c1\u03bf\u03c6\u03bf\u03c2 \u0391\u03c1\u03b9\u03b8\u03bc\u03cc\u03c2\",\n                hint: \"\u039a\u03ac\u03bd\u03b5 \u03ba\u03bb\u03b9\u03ba \u03b3\u03b9\u03b1 \u03bf\u03c1\u03b9\u03c3\u03bc\u03cc\",\n                definition: \"\u03a4\u03bf \u03ba\u03bb\u03ac\u03c3\u03bc\u03b1 \u03c0\u03bf\u03c5 \u03c0\u03c1\u03bf\u03ba\u03cd\u03c0\u03c4\u03b5\u03b9 \u03cc\u03c4\u03b1\u03bd \u03b1\u03bd\u03c4\u03b9\u03c3\u03c4\u03c1\u03ad\u03c8\u03bf\u03c5\u03bc\u03b5 \u03c4\u03bf\u03bd \u03b1\u03c1\u03b9\u03b8\u03bc\u03b7\u03c4\u03ae \u03bc\u03b5 \u03c4\u03bf\u03bd \u03c0\u03b1\u03c1\u03bf\u03bd\u03bf\u03bc\u03b1\u03c3\u03c4\u03ae.\",\n                example: \"\u039f \u03b1\u03bd\u03c4\u03af\u03c3\u03c4\u03c1\u03bf\u03c6\u03bf\u03c2 \u03c4\u03bf\u03c5 3\/4 \u03b5\u03af\u03bd\u03b1\u03b9 \u03c4\u03bf 4\/3\"\n            },\n            {\n                icon: \"\ud83c\udfaf\",\n                name: \"\u03a6\u03c5\u03c3\u03b9\u03ba\u03cc\u03c2 \u0391\u03c1\u03b9\u03b8\u03bc\u03cc\u03c2 \u00d7 \u039a\u03bb\u03ac\u03c3\u03bc\u03b1\",\n                hint: \"\u039a\u03ac\u03bd\u03b5 \u03ba\u03bb\u03b9\u03ba \u03b3\u03b9\u03b1 \u03bf\u03c1\u03b9\u03c3\u03bc\u03cc\",\n                definition: \"\u0393\u03c1\u03ac\u03c6\u03bf\u03c5\u03bc\u03b5 \u03c4\u03bf\u03bd \u03c6\u03c5\u03c3\u03b9\u03ba\u03cc \u03b1\u03c1\u03b9\u03b8\u03bc\u03cc \u03c9\u03c2 \u03ba\u03bb\u03ac\u03c3\u03bc\u03b1 \u03bc\u03b5 \u03c0\u03b1\u03c1\u03bf\u03bd\u03bf\u03bc\u03b1\u03c3\u03c4\u03ae 1 \u03ba\u03b1\u03b9 \u03c0\u03bf\u03bb\u03bb\u03b1\u03c0\u03bb\u03b1\u03c3\u03b9\u03ac\u03b6\u03bf\u03c5\u03bc\u03b5.\",\n                example: \"5 \u00d7 2\/3 = 5\/1 \u00d7 2\/3 = 10\/3\"\n            },\n            {\n                icon: \"\ud83d\udd22\",\n                name: \"\u0391\u03c0\u03bb\u03bf\u03c0\u03bf\u03af\u03b7\u03c3\u03b7 \u039a\u03bb\u03ac\u03c3\u03bc\u03b1\u03c4\u03bf\u03c2\",\n                hint: \"\u039a\u03ac\u03bd\u03b5 \u03ba\u03bb\u03b9\u03ba \u03b3\u03b9\u03b1 \u03bf\u03c1\u03b9\u03c3\u03bc\u03cc\",\n                definition: \"\u0394\u03b9\u03b1\u03b9\u03c1\u03bf\u03cd\u03bc\u03b5 \u03c4\u03bf\u03bd \u03b1\u03c1\u03b9\u03b8\u03bc\u03b7\u03c4\u03ae \u03ba\u03b1\u03b9 \u03c4\u03bf\u03bd \u03c0\u03b1\u03c1\u03bf\u03bd\u03bf\u03bc\u03b1\u03c3\u03c4\u03ae \u03bc\u03b5 \u03c4\u03bf\u03bd \u03af\u03b4\u03b9\u03bf \u03b1\u03c1\u03b9\u03b8\u03bc\u03cc \u03b3\u03b9\u03b1 \u03bd\u03b1 \u03b2\u03c1\u03bf\u03cd\u03bc\u03b5 \u03c4\u03bf \u03b1\u03c0\u03bb\u03bf\u03cd\u03c3\u03c4\u03b5\u03c1\u03bf \u03ba\u03bb\u03ac\u03c3\u03bc\u03b1.\",\n                example: \"6\/12 = (6\u00f76)\/(12\u00f76) = 1\/2\"\n            },\n            {\n                icon: \"\ud83d\udcaf\",\n                name: \"\u0399\u03c3\u03bf\u03b4\u03cd\u03bd\u03b1\u03bc\u03b1 \u039a\u03bb\u03ac\u03c3\u03bc\u03b1\u03c4\u03b1\",\n                hint: \"\u039a\u03ac\u03bd\u03b5 \u03ba\u03bb\u03b9\u03ba \u03b3\u03b9\u03b1 \u03bf\u03c1\u03b9\u03c3\u03bc\u03cc\",\n                definition: \"\u039a\u03bb\u03ac\u03c3\u03bc\u03b1\u03c4\u03b1 \u03c0\u03bf\u03c5 \u03b5\u03ba\u03c6\u03c1\u03ac\u03b6\u03bf\u03c5\u03bd \u03c4\u03bf \u03af\u03b4\u03b9\u03bf \u03bc\u03ad\u03c1\u03bf\u03c2 \u03c4\u03bf\u03c5 \u03b1\u03ba\u03ad\u03c1\u03b1\u03b9\u03bf\u03c5.\",\n                example: \"1\/2 = 2\/4 = 3\/6 = 4\/8\"\n            },\n            {\n                icon: \"\u2797\",\n                name: \"\u0394\u03b9\u03b1\u03af\u03c1\u03b5\u03c3\u03b7 \u03bc\u03b5 \u039a\u03bb\u03ac\u03c3\u03bc\u03b1\",\n                hint: \"\u039a\u03ac\u03bd\u03b5 \u03ba\u03bb\u03b9\u03ba \u03b3\u03b9\u03b1 \u03bf\u03c1\u03b9\u03c3\u03bc\u03cc\",\n                definition: \"\u0393\u03b9\u03b1 \u03bd\u03b1 \u03b4\u03b9\u03b1\u03b9\u03c1\u03ad\u03c3\u03bf\u03c5\u03bc\u03b5 \u03bc\u03b5 \u03ba\u03bb\u03ac\u03c3\u03bc\u03b1, \u03c0\u03bf\u03bb\u03bb\u03b1\u03c0\u03bb\u03b1\u03c3\u03b9\u03ac\u03b6\u03bf\u03c5\u03bc\u03b5 \u03bc\u03b5 \u03c4\u03bf\u03bd \u03b1\u03bd\u03c4\u03af\u03c3\u03c4\u03c1\u03bf\u03c6\u03cc \u03c4\u03bf\u03c5.\",\n                example: \"3\/4 \u00f7 2\/5 = 3\/4 \u00d7 5\/2 = 15\/8\"\n            }\n        ];\n\n        function createTermCard(term) {\n            const card = document.createElement('div');\n            card.className = 'term-card';\n            \n            card.innerHTML = `\n                <div class=\"card-inner\">\n                    <div class=\"card-front\">\n                        <div class=\"term-icon\">${term.icon}<\/div>\n                        <div class=\"term-name\">${term.name}<\/div>\n                        <div class=\"term-hint\">${term.hint}<\/div>\n                    <\/div>\n                    <div class=\"card-back\">\n                        <div class=\"term-definition\">${term.definition}<\/div>\n                        <div class=\"term-example\">${term.example}<\/div>\n                    <\/div>\n                <\/div>\n            `;\n            \n            card.addEventListener('click', () => {\n                card.classList.toggle('flipped');\n            });\n            \n            return card;\n        }\n\n        function renderGlossary() {\n            const grid = document.getElementById('glossaryGrid');\n            grid.innerHTML = '';\n            terms.forEach(term => {\n                grid.appendChild(createTermCard(term));\n            });\n        }\n\n        async function onConfigChange(config) {\n            const mainTitle = document.getElementById('mainTitle');\n            const subtitle = document.getElementById('subtitle');\n            const footerText = document.getElementById('footerText');\n            const appWrapper = document.querySelector('.app-wrapper');\n\n            mainTitle.textContent = config.main_title || defaultConfig.main_title;\n            subtitle.textContent = config.subtitle || defaultConfig.subtitle;\n            footerText.textContent = config.footer_text || defaultConfig.footer_text;\n\n            const bgColor = config.background_color || defaultConfig.background_color;\n            appWrapper.style.background = `linear-gradient(135deg, ${bgColor} 0%, #764ba2 100%)`;\n        }\n\n        const element = {\n            defaultConfig: defaultConfig,\n            onConfigChange: onConfigChange,\n            mapToCapabilities: (config) => ({\n                recolorables: [\n                    {\n                        get: () => config.background_color || defaultConfig.background_color,\n                        set: (value) => {\n                            config.background_color = value;\n                            window.elementSdk.setConfig({ background_color: value });\n                        }\n                    }\n                ],\n                borderables: [],\n                fontEditable: undefined,\n                fontSizeable: undefined\n            }),\n            mapToEditPanelValues: (config) => new Map([\n                [\"main_title\", config.main_title || defaultConfig.main_title],\n                [\"subtitle\", config.subtitle || defaultConfig.subtitle],\n                [\"footer_text\", config.footer_text || defaultConfig.footer_text]\n            ])\n        };\n\n        if (window.elementSdk) {\n            window.elementSdk.init(element);\n        }\n\n        renderGlossary();\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:'9b53fdc244866f67',t:'MTc2Njk1NTY2OS4wMDAwMDA='};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<!doctype html>\n<html lang=\"el\" class=\"h-full\">\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 \u03bc\u03b5 \u039a\u03bb\u03ac\u03c3\u03bc\u03b1\u03c4\u03b1 &#8211; \u0395&#8217; \u0394\u03b7\u03bc\u03bf\u03c4\u03b9\u03ba\u03bf\u03cd<\/title>\n  <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n  <style>\n    body {\n      box-sizing: border-box;\n      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n      margin: 0;\n      padding: 0;\n    }\n    \n    .fraction {\n      display: inline-flex;\n      flex-direction: column;\n      align-items: center;\n      vertical-align: middle;\n      margin: 0 4px;\n    }\n    \n    .fraction-numerator {\n      padding: 2px 8px;\n      border-bottom: 2px solid currentColor;\n    }\n    \n    .fraction-denominator {\n      padding: 2px 8px;\n    }\n    \n    .correct-answer {\n      background-color: #4ade80 !important;\n      border-color: #22c55e !important;\n    }\n    \n    .wrong-answer {\n      background-color: #f87171 !important;\n      border-color: #ef4444 !important;\n    }\n    \n    @keyframes bounce {\n      0%, 100% { transform: translateY(0); }\n      50% { transform: translateY(-10px); }\n    }\n    \n    .bounce {\n      animation: bounce 0.5s ease;\n    }\n\n    @keyframes fadeIn {\n      from { opacity: 0; transform: translateY(20px); }\n      to { opacity: 1; transform: translateY(0); }\n    }\n\n    .fade-in {\n      animation: fadeIn 0.5s ease;\n    }\n  <\/style>\n  <style>@view-transition { navigation: auto; }<\/style>\n  <script src=\"\/_sdk\/data_sdk.js\" type=\"text\/javascript\"><\/script>\n  <script src=\"\/_sdk\/element_sdk.js\" type=\"text\/javascript\"><\/script>\n <\/head>\n <body class=\"h-full\">\n  <div id=\"app\" class=\"h-full w-full overflow-auto\"><\/div>\n  <script>\n    let currentSection = 'menu';\n    let quizScore = 0;\n    let currentQuizQuestion = 0;\n    \n    const quizQuestions = [\n      {\n        question: \"\u03a5\u03c0\u03bf\u03bb\u03cc\u03b3\u03b9\u03c3\u03b5:\",\n        problem: { num1: 3, den1: 4, num2: 2, den2: 5 },\n        options: [\n          { num: 6, den: 20 },\n          { num: 5, den: 9 },\n          { num: 6, den: 9 },\n          { num: 3, den: 10 }\n        ],\n        correct: 0\n      },\n      {\n        question: \"\u0392\u03c1\u03b5\u03c2 \u03c4\u03bf \u03b3\u03b9\u03bd\u03cc\u03bc\u03b5\u03bd\u03bf:\",\n        problem: { num1: 5, num2: 2, den2: 3 },\n        options: [\n          { num: 10, den: 3 },\n          { num: 7, den: 3 },\n          { num: 5, den: 6 },\n          { num: 3, den: 5 }\n        ],\n        correct: 0\n      },\n      {\n        question: \"\u03a0\u03bf\u03b9\u03bf\u03c2 \u03b5\u03af\u03bd\u03b1\u03b9 \u03bf \u03b1\u03bd\u03c4\u03af\u03c3\u03c4\u03c1\u03bf\u03c6\u03bf\u03c2 \u03c4\u03bf\u03c5 4\/7;\",\n        problem: { num1: 4, den1: 7 },\n        options: [\n          { num: 7, den: 4 },\n          { num: 4, den: 7 },\n          { num: 1, den: 4 },\n          { num: 7, den: 1 }\n        ],\n        correct: 0\n      },\n      {\n        question: \"\u03a5\u03c0\u03bf\u03bb\u03cc\u03b3\u03b9\u03c3\u03b5:\",\n        problem: { num1: 2, den1: 3, num2: 9, den2: 10 },\n        options: [\n          { num: 18, den: 30 },\n          { num: 3, den: 5 },\n          { num: 11, den: 13 },\n          { num: 6, den: 10 }\n        ],\n        correct: 1\n      },\n      {\n        question: \"\u0392\u03c1\u03b5\u03c2 \u03c4\u03bf \u03b3\u03b9\u03bd\u03cc\u03bc\u03b5\u03bd\u03bf: 8 \u00d7 3\/4\",\n        problem: { num1: 8, num2: 3, den2: 4 },\n        options: [\n          { num: 24, den: 4 },\n          { num: 6, den: 1 },\n          { num: 11, den: 4 },\n          { num: 32, den: 3 }\n        ],\n        correct: 1\n      }\n    ];\n\n    function createFraction(num, den) {\n      if (den === 1 || !den) {\n        return `<span class=\"text-2xl font-bold\">${num}<\/span>`;\n      }\n      return `\n        <span class=\"fraction\">\n          <span class=\"fraction-numerator text-xl font-bold\">${num}<\/span>\n          <span class=\"fraction-denominator text-xl font-bold\">${den}<\/span>\n        <\/span>\n      `;\n    }\n\n    function renderMenu() {\n      return `\n        <div class=\"min-h-full flex items-center justify-center p-8\" style=\"background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\">\n          <div class=\"max-w-4xl w-full fade-in\" style=\"background-color: #ffffff; border-radius: 24px; padding: 48px; box-shadow: 0 20px 60px rgba(0,0,0,0.3);\">\n            <div class=\"text-center mb-12\">\n              <div class=\"text-6xl mb-6\">\ud83d\udcd0\u2728<\/div>\n              <h1 style=\"font-size: 2.5rem; color: #1e293b; font-weight: bold; margin-bottom: 16px;\">\n                \u03a0\u03bf\u03bb\u03bb\u03b1\u03c0\u03bb\u03b1\u03c3\u03b9\u03b1\u03c3\u03bc\u03cc\u03c2 \u03bc\u03b5 \u039a\u03bb\u03ac\u03c3\u03bc\u03b1\u03c4\u03b1\n              <\/h1>\n              <p style=\"font-size: 1.25rem; color: #64748b;\">\n                \u0395' \u0394\u03b7\u03bc\u03bf\u03c4\u03b9\u03ba\u03bf\u03cd - \u0394\u03b9\u03b1\u03b4\u03c1\u03b1\u03c3\u03c4\u03b9\u03ba\u03ae \u0386\u03c3\u03ba\u03b7\u03c3\u03b7\n              <\/p>\n            <\/div>\n            \n            <div class=\"grid gap-6\">\n              <button onclick=\"changeSection('theory')\" style=\"background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); color: white; font-size: 1.125rem; padding: 20px 32px; border-radius: 12px; font-weight: 600; transition: all 0.3s; border: none; cursor: pointer; width: 100%; box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);\" \n                onmouseover=\"this.style.transform='translateY(-2px)'; this.style.boxShadow='0 8px 24px rgba(59, 130, 246, 0.5)';\"\n                onmouseout=\"this.style.transform='translateY(0)'; this.style.boxShadow='0 4px 12px rgba(59, 130, 246, 0.4)';\">\n                \ud83d\udcda \u0398\u03b5\u03c9\u03c1\u03af\u03b1 & \u03a0\u03b1\u03c1\u03b1\u03b4\u03b5\u03af\u03b3\u03bc\u03b1\u03c4\u03b1\n              <\/button>\n              \n              <button onclick=\"changeSection('practice')\" style=\"background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%); color: white; font-size: 1.125rem; padding: 20px 32px; border-radius: 12px; font-weight: 600; transition: all 0.3s; border: none; cursor: pointer; width: 100%; box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4);\"\n                onmouseover=\"this.style.transform='translateY(-2px)'; this.style.boxShadow='0 8px 24px rgba(139, 92, 246, 0.5)';\"\n                onmouseout=\"this.style.transform='translateY(0)'; this.style.boxShadow='0 4px 12px rgba(139, 92, 246, 0.4)';\">\n                \u270f\ufe0f \u0391\u03c3\u03ba\u03ae\u03c3\u03b5\u03b9\u03c2 \u0395\u03be\u03ac\u03c3\u03ba\u03b7\u03c3\u03b7\u03c2\n              <\/button>\n              \n              <button onclick=\"startQuiz()\" style=\"background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: white; font-size: 1.125rem; padding: 20px 32px; border-radius: 12px; font-weight: 600; transition: all 0.3s; border: none; cursor: pointer; width: 100%; box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);\"\n                onmouseover=\"this.style.transform='translateY(-2px)'; this.style.boxShadow='0 8px 24px rgba(16, 185, 129, 0.5)';\"\n                onmouseout=\"this.style.transform='translateY(0)'; this.style.boxShadow='0 4px 12px rgba(16, 185, 129, 0.4)';\">\n                \ud83c\udfaf \u0394\u03b9\u03b1\u03b4\u03c1\u03b1\u03c3\u03c4\u03b9\u03ba\u03cc \u039a\u03bf\u03c5\u03af\u03b6\n              <\/button>\n            <\/div>\n          <\/div>\n        <\/div>\n      `;\n    }\n\n    function renderTheory() {\n      return `\n        <div class=\"min-h-full p-8\" style=\"background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\">\n          <div class=\"max-w-4xl mx-auto fade-in\">\n            <button onclick=\"changeSection('menu')\" style=\"background-color: #ffffff; color: #1e293b; font-size: 1rem; padding: 12px 24px; border-radius: 8px; border: 2px solid #3b82f6; cursor: pointer; margin-bottom: 24px; font-weight: 600; transition: all 0.3s;\"\n              onmouseover=\"this.style.backgroundColor='#3b82f6'; this.style.color='white';\"\n              onmouseout=\"this.style.backgroundColor='#ffffff'; this.style.color='#1e293b';\">\n              \u2190 \u0395\u03c0\u03b9\u03c3\u03c4\u03c1\u03bf\u03c6\u03ae\n            <\/button>\n            \n            <div style=\"background-color: #ffffff; border-radius: 16px; padding: 32px; margin-bottom: 24px; box-shadow: 0 8px 24px rgba(0,0,0,0.2);\">\n              <h2 style=\"font-size: 2rem; color: #3b82f6; font-weight: bold; margin-bottom: 24px;\">\n                \ud83d\udcda \u0398\u03b5\u03c9\u03c1\u03af\u03b1\n              <\/h2>\n              \n              <div style=\"margin-bottom: 32px;\">\n                <h3 style=\"font-size: 1.5rem; color: #1e293b; font-weight: 600; margin-bottom: 16px;\">\n                  1. \u03a0\u03bf\u03bb\u03bb\u03b1\u03c0\u03bb\u03b1\u03c3\u03b9\u03b1\u03c3\u03bc\u03cc\u03c2 \u03ba\u03bb\u03ac\u03c3\u03bc\u03b1\u03c4\u03bf\u03c2 \u03bc\u03b5 \u03ba\u03bb\u03ac\u03c3\u03bc\u03b1\n                <\/h3>\n                <p style=\"font-size: 1rem; color: #475569; line-height: 1.8; margin-bottom: 16px;\">\n                  \u0393\u03b9\u03b1 \u03bd\u03b1 \u03c0\u03bf\u03bb\u03bb\u03b1\u03c0\u03bb\u03b1\u03c3\u03b9\u03ac\u03c3\u03bf\u03c5\u03bc\u03b5 \u03b4\u03cd\u03bf \u03ba\u03bb\u03ac\u03c3\u03bc\u03b1\u03c4\u03b1, <strong>\u03c0\u03bf\u03bb\u03bb\u03b1\u03c0\u03bb\u03b1\u03c3\u03b9\u03ac\u03b6\u03bf\u03c5\u03bc\u03b5 \u03c4\u03bf\u03c5\u03c2 \u03b1\u03c1\u03b9\u03b8\u03bc\u03b7\u03c4\u03ad\u03c2 \u03bc\u03b5\u03c4\u03b1\u03be\u03cd \u03c4\u03bf\u03c5\u03c2<\/strong> \u03ba\u03b1\u03b9 <strong>\u03c4\u03bf\u03c5\u03c2 \u03c0\u03b1\u03c1\u03bf\u03bd\u03bf\u03bc\u03b1\u03c3\u03c4\u03ad\u03c2 \u03bc\u03b5\u03c4\u03b1\u03be\u03cd \u03c4\u03bf\u03c5\u03c2<\/strong>.\n                <\/p>\n                <div style=\"background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%); padding: 24px; border-radius: 12px; text-align: center; margin-bottom: 16px; border: 2px solid #3b82f6;\">\n                  <div style=\"font-size: 1.25rem; color: #1e293b;\">\n                    ${createFraction(2, 3)} \u00d7 ${createFraction(3, 4)} = ${createFraction('2\u00d73', '3\u00d74')} = ${createFraction(6, 12)} = ${createFraction(1, 2)}\n                  <\/div>\n                <\/div>\n              <\/div>\n              \n              <div style=\"margin-bottom: 32px;\">\n                <h3 style=\"font-size: 1.5rem; color: #1e293b; font-weight: 600; margin-bottom: 16px;\">\n                  2. \u03a0\u03bf\u03bb\u03bb\u03b1\u03c0\u03bb\u03b1\u03c3\u03b9\u03b1\u03c3\u03bc\u03cc\u03c2 \u03c6\u03c5\u03c3\u03b9\u03ba\u03bf\u03cd \u03b1\u03c1\u03b9\u03b8\u03bc\u03bf\u03cd \u03bc\u03b5 \u03ba\u03bb\u03ac\u03c3\u03bc\u03b1\n                <\/h3>\n                <p style=\"font-size: 1rem; color: #475569; line-height: 1.8; margin-bottom: 16px;\">\n                  \u03a4\u03bf\u03bd \u03c6\u03c5\u03c3\u03b9\u03ba\u03cc \u03b1\u03c1\u03b9\u03b8\u03bc\u03cc \u03c4\u03bf\u03bd \u03b3\u03c1\u03ac\u03c6\u03bf\u03c5\u03bc\u03b5 \u03c3\u03b1\u03bd \u03ba\u03bb\u03ac\u03c3\u03bc\u03b1 \u03bc\u03b5 \u03c0\u03b1\u03c1\u03bf\u03bd\u03bf\u03bc\u03b1\u03c3\u03c4\u03ae \u03c4\u03bf 1 \u03ba\u03b1\u03b9 \u03bc\u03b5\u03c4\u03ac \u03c0\u03bf\u03bb\u03bb\u03b1\u03c0\u03bb\u03b1\u03c3\u03b9\u03ac\u03b6\u03bf\u03c5\u03bc\u03b5.\n                <\/p>\n                <div style=\"background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%); padding: 24px; border-radius: 12px; text-align: center; margin-bottom: 16px; border: 2px solid #8b5cf6;\">\n                  <div style=\"font-size: 1.25rem; color: #1e293b;\">\n                    5 \u00d7 ${createFraction(2, 3)} = ${createFraction(5, 1)} \u00d7 ${createFraction(2, 3)} = ${createFraction(10, 3)}\n                  <\/div>\n                <\/div>\n              <\/div>\n              \n              <div>\n                <h3 style=\"font-size: 1.5rem; color: #1e293b; font-weight: 600; margin-bottom: 16px;\">\n                  3. \u0391\u03bd\u03c4\u03af\u03c3\u03c4\u03c1\u03bf\u03c6\u03bf\u03b9 \u03b1\u03c1\u03b9\u03b8\u03bc\u03bf\u03af\n                <\/h3>\n                <p style=\"font-size: 1rem; color: #475569; line-height: 1.8; margin-bottom: 16px;\">\n                  \u0394\u03cd\u03bf \u03b1\u03c1\u03b9\u03b8\u03bc\u03bf\u03af \u03b5\u03af\u03bd\u03b1\u03b9 <strong>\u03b1\u03bd\u03c4\u03af\u03c3\u03c4\u03c1\u03bf\u03c6\u03bf\u03b9<\/strong> \u03cc\u03c4\u03b1\u03bd \u03c4\u03bf \u03b3\u03b9\u03bd\u03cc\u03bc\u03b5\u03bd\u03cc \u03c4\u03bf\u03c5\u03c2 \u03b5\u03af\u03bd\u03b1\u03b9 \u03af\u03c3\u03bf \u03bc\u03b5 1. \u0393\u03b9\u03b1 \u03bd\u03b1 \u03b2\u03c1\u03bf\u03cd\u03bc\u03b5 \u03c4\u03bf\u03bd \u03b1\u03bd\u03c4\u03af\u03c3\u03c4\u03c1\u03bf\u03c6\u03bf \u03b5\u03bd\u03cc\u03c2 \u03ba\u03bb\u03ac\u03c3\u03bc\u03b1\u03c4\u03bf\u03c2, <strong>\u03b1\u03bd\u03c4\u03b9\u03c3\u03c4\u03c1\u03ad\u03c6\u03bf\u03c5\u03bc\u03b5 \u03c4\u03bf\u03bd \u03b1\u03c1\u03b9\u03b8\u03bc\u03b7\u03c4\u03ae \u03bc\u03b5 \u03c4\u03bf\u03bd \u03c0\u03b1\u03c1\u03bf\u03bd\u03bf\u03bc\u03b1\u03c3\u03c4\u03ae<\/strong>.\n                <\/p>\n                <div style=\"background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%); padding: 24px; border-radius: 12px; text-align: center; border: 2px solid #10b981;\">\n                  <div style=\"font-size: 1.25rem; color: #1e293b; margin-bottom: 12px;\">\n                    \u039f \u03b1\u03bd\u03c4\u03af\u03c3\u03c4\u03c1\u03bf\u03c6\u03bf\u03c2 \u03c4\u03bf\u03c5 ${createFraction(3, 5)} \u03b5\u03af\u03bd\u03b1\u03b9 \u03c4\u03bf ${createFraction(5, 3)}\n                  <\/div>\n                  <div style=\"font-size: 1.25rem; color: #1e293b;\">\n                    \u03b3\u03b9\u03b1\u03c4\u03af: ${createFraction(3, 5)} \u00d7 ${createFraction(5, 3)} = ${createFraction(15, 15)} = 1\n                  <\/div>\n                <\/div>\n              <\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n      `;\n    }\n\n    function renderPractice() {\n      return `\n        <div class=\"min-h-full p-8\" style=\"background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\">\n          <div class=\"max-w-4xl mx-auto fade-in\">\n            <button onclick=\"changeSection('menu')\" style=\"background-color: #ffffff; color: #1e293b; font-size: 1rem; padding: 12px 24px; border-radius: 8px; border: 2px solid #3b82f6; cursor: pointer; margin-bottom: 24px; font-weight: 600; transition: all 0.3s;\"\n              onmouseover=\"this.style.backgroundColor='#3b82f6'; this.style.color='white';\"\n              onmouseout=\"this.style.backgroundColor='#ffffff'; this.style.color='#1e293b';\">\n              \u2190 \u0395\u03c0\u03b9\u03c3\u03c4\u03c1\u03bf\u03c6\u03ae\n            <\/button>\n            \n            <div style=\"background-color: #ffffff; border-radius: 16px; padding: 32px; box-shadow: 0 8px 24px rgba(0,0,0,0.2);\">\n              <h2 style=\"font-size: 2rem; color: #8b5cf6; font-weight: bold; margin-bottom: 24px;\">\n                \u270f\ufe0f \u0391\u03c3\u03ba\u03ae\u03c3\u03b5\u03b9\u03c2 \u0395\u03be\u03ac\u03c3\u03ba\u03b7\u03c3\u03b7\u03c2\n              <\/h2>\n              \n              <div class=\"space-y-6\">\n                <div id=\"practice1\" style=\"background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%); padding: 24px; border-radius: 12px; border: 2px solid #8b5cf6;\">\n                  <p style=\"font-size: 1.25rem; color: #1e293b; font-weight: 600; margin-bottom: 16px;\">\n                    \u0386\u03c3\u03ba\u03b7\u03c3\u03b7 1: \u03a5\u03c0\u03bf\u03bb\u03cc\u03b3\u03b9\u03c3\u03b5 \u03c4\u03bf ${createFraction(3, 4)} \u00d7 ${createFraction(2, 5)}\n                  <\/p>\n                  <div class=\"flex gap-3 items-center flex-wrap\">\n                    <span style=\"font-size: 1rem; color: #1e293b;\">\u0391\u03c1\u03b9\u03b8\u03bc\u03b7\u03c4\u03ae\u03c2:<\/span>\n                    <input type=\"number\" id=\"p1-num\" style=\"font-size: 1rem; padding: 8px 16px; border: 2px solid #cbd5e1; border-radius: 8px; width: 80px;\">\n                    <span style=\"font-size: 1rem; color: #1e293b;\">\u03a0\u03b1\u03c1\u03bf\u03bd\u03bf\u03bc\u03b1\u03c3\u03c4\u03ae\u03c2:<\/span>\n                    <input type=\"number\" id=\"p1-den\" style=\"font-size: 1rem; padding: 8px 16px; border: 2px solid #cbd5e1; border-radius: 8px; width: 80px;\">\n                    <button onclick=\"checkPractice1()\" style=\"background-color: #8b5cf6; color: white; font-size: 1rem; padding: 8px 24px; border-radius: 8px; border: none; cursor: pointer; font-weight: 600; transition: all 0.3s;\"\n                      onmouseover=\"this.style.backgroundColor='#7c3aed';\"\n                      onmouseout=\"this.style.backgroundColor='#8b5cf6';\">\n                      \u0388\u03bb\u03b5\u03b3\u03c7\u03bf\u03c2\n                    <\/button>\n                  <\/div>\n                  <div id=\"p1-result\" style=\"font-size: 1rem; margin-top: 12px; font-weight: 600;\"><\/div>\n                <\/div>\n                \n                <div id=\"practice2\" style=\"background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%); padding: 24px; border-radius: 12px; border: 2px solid #3b82f6;\">\n                  <p style=\"font-size: 1.25rem; color: #1e293b; font-weight: 600; margin-bottom: 16px;\">\n                    \u0386\u03c3\u03ba\u03b7\u03c3\u03b7 2: \u03a5\u03c0\u03bf\u03bb\u03cc\u03b3\u03b9\u03c3\u03b5 \u03c4\u03bf 6 \u00d7 ${createFraction(5, 8)}\n                  <\/p>\n                  <div class=\"flex gap-3 items-center flex-wrap\">\n                    <span style=\"font-size: 1rem; color: #1e293b;\">\u0391\u03c1\u03b9\u03b8\u03bc\u03b7\u03c4\u03ae\u03c2:<\/span>\n                    <input type=\"number\" id=\"p2-num\" style=\"font-size: 1rem; padding: 8px 16px; border: 2px solid #cbd5e1; border-radius: 8px; width: 80px;\">\n                    <span style=\"font-size: 1rem; color: #1e293b;\">\u03a0\u03b1\u03c1\u03bf\u03bd\u03bf\u03bc\u03b1\u03c3\u03c4\u03ae\u03c2:<\/span>\n                    <input type=\"number\" id=\"p2-den\" style=\"font-size: 1rem; padding: 8px 16px; border: 2px solid #cbd5e1; border-radius: 8px; width: 80px;\">\n                    <button onclick=\"checkPractice2()\" style=\"background-color: #3b82f6; color: white; font-size: 1rem; padding: 8px 24px; border-radius: 8px; border: none; cursor: pointer; font-weight: 600; transition: all 0.3s;\"\n                      onmouseover=\"this.style.backgroundColor='#2563eb';\"\n                      onmouseout=\"this.style.backgroundColor='#3b82f6';\">\n                      \u0388\u03bb\u03b5\u03b3\u03c7\u03bf\u03c2\n                    <\/button>\n                  <\/div>\n                  <div id=\"p2-result\" style=\"font-size: 1rem; margin-top: 12px; font-weight: 600;\"><\/div>\n                <\/div>\n                \n                <div id=\"practice3\" style=\"background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%); padding: 24px; border-radius: 12px; border: 2px solid #10b981;\">\n                  <p style=\"font-size: 1.25rem; color: #1e293b; font-weight: 600; margin-bottom: 16px;\">\n                    \u0386\u03c3\u03ba\u03b7\u03c3\u03b7 3: \u0392\u03c1\u03b5\u03c2 \u03c4\u03bf\u03bd \u03b1\u03bd\u03c4\u03af\u03c3\u03c4\u03c1\u03bf\u03c6\u03bf \u03c4\u03bf\u03c5 ${createFraction(7, 9)}\n                  <\/p>\n                  <div class=\"flex gap-3 items-center flex-wrap\">\n                    <span style=\"font-size: 1rem; color: #1e293b;\">\u0391\u03c1\u03b9\u03b8\u03bc\u03b7\u03c4\u03ae\u03c2:<\/span>\n                    <input type=\"number\" id=\"p3-num\" style=\"font-size: 1rem; padding: 8px 16px; border: 2px solid #cbd5e1; border-radius: 8px; width: 80px;\">\n                    <span style=\"font-size: 1rem; color: #1e293b;\">\u03a0\u03b1\u03c1\u03bf\u03bd\u03bf\u03bc\u03b1\u03c3\u03c4\u03ae\u03c2:<\/span>\n                    <input type=\"number\" id=\"p3-den\" style=\"font-size: 1rem; padding: 8px 16px; border: 2px solid #cbd5e1; border-radius: 8px; width: 80px;\">\n                    <button onclick=\"checkPractice3()\" style=\"background-color: #10b981; color: white; font-size: 1rem; padding: 8px 24px; border-radius: 8px; border: none; cursor: pointer; font-weight: 600; transition: all 0.3s;\"\n                      onmouseover=\"this.style.backgroundColor='#059669';\"\n                      onmouseout=\"this.style.backgroundColor='#10b981';\">\n                      \u0388\u03bb\u03b5\u03b3\u03c7\u03bf\u03c2\n                    <\/button>\n                  <\/div>\n                  <div id=\"p3-result\" style=\"font-size: 1rem; margin-top: 12px; font-weight: 600;\"><\/div>\n                <\/div>\n              <\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n      `;\n    }\n\n    function renderQuiz() {\n      if (currentQuizQuestion >= quizQuestions.length) {\n        return renderQuizResults();\n      }\n      \n      const q = quizQuestions[currentQuizQuestion];\n      let problemDisplay = '';\n      \n      if (q.problem.den1 && q.problem.den2) {\n        problemDisplay = `${createFraction(q.problem.num1, q.problem.den1)} \u00d7 ${createFraction(q.problem.num2, q.problem.den2)}`;\n      } else if (q.problem.den2) {\n        problemDisplay = `${q.problem.num1} \u00d7 ${createFraction(q.problem.num2, q.problem.den2)}`;\n      } else if (q.problem.den1) {\n        problemDisplay = `\u0392\u03c1\u03b5\u03c2 \u03c4\u03bf\u03bd \u03b1\u03bd\u03c4\u03af\u03c3\u03c4\u03c1\u03bf\u03c6\u03bf \u03c4\u03bf\u03c5 ${createFraction(q.problem.num1, q.problem.den1)}`;\n      }\n      \n      return `\n        <div class=\"min-h-full p-8\" style=\"background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\">\n          <div class=\"max-w-4xl mx-auto fade-in\">\n            <div class=\"flex justify-between items-center mb-6 flex-wrap gap-4\">\n              <button onclick=\"changeSection('menu')\" style=\"background-color: #ffffff; color: #1e293b; font-size: 1rem; padding: 12px 24px; border-radius: 8px; border: 2px solid #3b82f6; cursor: pointer; font-weight: 600; transition: all 0.3s;\"\n                onmouseover=\"this.style.backgroundColor='#3b82f6'; this.style.color='white';\"\n                onmouseout=\"this.style.backgroundColor='#ffffff'; this.style.color='#1e293b';\">\n                \u2190 \u0395\u03c0\u03b9\u03c3\u03c4\u03c1\u03bf\u03c6\u03ae\n              <\/button>\n              <div style=\"background-color: #ffffff; color: #1e293b; font-size: 1rem; padding: 12px 24px; border-radius: 8px; font-weight: 600; box-shadow: 0 4px 12px rgba(0,0,0,0.1);\">\n                \u0392\u03b1\u03b8\u03bc\u03bf\u03bb\u03bf\u03b3\u03af\u03b1: ${quizScore}\/${quizQuestions.length}\n              <\/div>\n            <\/div>\n            \n            <div style=\"background-color: #ffffff; border-radius: 16px; padding: 32px; box-shadow: 0 8px 24px rgba(0,0,0,0.2);\">\n              <div class=\"flex justify-between items-center mb-6 flex-wrap gap-4\">\n                <h2 style=\"font-size: 2rem; color: #10b981; font-weight: bold;\">\n                  \ud83c\udfaf \u039a\u03bf\u03c5\u03af\u03b6\n                <\/h2>\n                <span style=\"font-size: 1.125rem; color: #1e293b; font-weight: 600;\">\n                  \u0395\u03c1\u03ce\u03c4\u03b7\u03c3\u03b7 ${currentQuizQuestion + 1}\/${quizQuestions.length}\n                <\/span>\n              <\/div>\n              \n              <div style=\"background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%); padding: 32px; border-radius: 12px; margin-bottom: 24px; text-align: center; border: 2px solid #10b981;\">\n                <p style=\"font-size: 1.25rem; color: #1e293b; margin-bottom: 16px; font-weight: 600;\">\n                  ${q.question}\n                <\/p>\n                <div style=\"font-size: 1.5rem; color: #1e293b; font-weight: bold;\">\n                  ${problemDisplay}\n                <\/div>\n              <\/div>\n              \n              <div class=\"grid gap-4\" id=\"quiz-options\">\n                ${q.options.map((opt, idx) => `\n                  <button onclick=\"checkAnswer(${idx})\" class=\"quiz-option\" style=\"background-color: #f8fafc; color: #1e293b; font-size: 1.125rem; padding: 20px; border-radius: 12px; border: 3px solid #e2e8f0; cursor: pointer; text-align: center; transition: all 0.3s; font-weight: 600;\"\n                    onmouseover=\"if(!this.disabled) { this.style.borderColor='#10b981'; this.style.transform='translateX(8px)'; this.style.backgroundColor='#f0fdf4'; }\"\n                    onmouseout=\"if(!this.disabled) { this.style.borderColor='#e2e8f0'; this.style.transform='translateX(0)'; this.style.backgroundColor='#f8fafc'; }\">\n                    ${createFraction(opt.num, opt.den)}\n                  <\/button>\n                `).join('')}\n              <\/div>\n              \n              <div id=\"quiz-feedback\" style=\"font-size: 1.125rem; margin-top: 24px; padding: 16px; border-radius: 8px; text-align: center; font-weight: 600;\"><\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n      `;\n    }\n\n    function renderQuizResults() {\n      const percentage = (quizScore \/ quizQuestions.length) * 100;\n      let emoji = '\ud83c\udf89';\n      let message = '\u0395\u03be\u03b1\u03b9\u03c1\u03b5\u03c4\u03b9\u03ba\u03ac!';\n      let bgColor = '#10b981';\n      \n      if (percentage < 50) {\n        emoji = '\ud83d\udcda';\n        message = '\u03a3\u03c5\u03bd\u03ad\u03c7\u03b9\u03c3\u03b5 \u03c4\u03b7\u03bd \u03c0\u03c1\u03bf\u03c3\u03c0\u03ac\u03b8\u03b5\u03b9\u03b1!';\n        bgColor = '#f59e0b';\n      } else if (percentage < 80) {\n        emoji = '\ud83d\udc4d';\n        message = '\u03a0\u03bf\u03bb\u03cd \u03ba\u03b1\u03bb\u03ac!';\n        bgColor = '#3b82f6';\n      }\n      \n      return `\n        <div class=\"min-h-full flex items-center justify-center p-8\" style=\"background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\">\n          <div class=\"max-w-2xl w-full fade-in\" style=\"background-color: #ffffff; border-radius: 24px; padding: 48px; box-shadow: 0 20px 60px rgba(0,0,0,0.3); text-align: center;\">\n            <div style=\"font-size: 80px; margin-bottom: 24px;\">${emoji}<\/div>\n            <h2 style=\"font-size: 2.5rem; color: ${bgColor}; font-weight: bold; margin-bottom: 16px;\">\n              ${message}\n            <\/h2>\n            <p style=\"font-size: 1.5rem; color: #1e293b; margin-bottom: 32px; font-weight: 600;\">\n              \u0397 \u03b2\u03b1\u03b8\u03bc\u03bf\u03bb\u03bf\u03b3\u03af\u03b1 \u03c3\u03bf\u03c5: ${quizScore}\/${quizQuestions.length}\n            <\/p>\n            <div style=\"background-color: #f1f5f9; border-radius: 12px; padding: 16px; margin-bottom: 32px;\">\n              <div style=\"background: linear-gradient(135deg, ${bgColor} 0%, ${bgColor}dd 100%); height: 32px; border-radius: 8px; width: ${percentage}%; transition: width 1s ease; box-shadow: 0 4px 12px ${bgColor}44;\"><\/div>\n            <\/div>\n            <div class=\"flex gap-4 justify-center flex-wrap\">\n              <button onclick=\"startQuiz()\" style=\"background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: white; font-size: 1.125rem; padding: 16px 32px; border-radius: 12px; border: none; cursor: pointer; font-weight: 600; transition: all 0.3s; box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);\"\n                onmouseover=\"this.style.transform='translateY(-2px)'; this.style.boxShadow='0 8px 24px rgba(16, 185, 129, 0.5)';\"\n                onmouseout=\"this.style.transform='translateY(0)'; this.style.boxShadow='0 4px 12px rgba(16, 185, 129, 0.4)';\">\n                \ud83d\udd04 \u039e\u03b1\u03bd\u03b1\u03b4\u03bf\u03ba\u03af\u03bc\u03b1\u03c3\u03b5\n              <\/button>\n              <button onclick=\"changeSection('menu')\" style=\"background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); color: white; font-size: 1.125rem; padding: 16px 32px; border-radius: 12px; border: none; cursor: pointer; font-weight: 600; transition: all 0.3s; box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);\"\n                onmouseover=\"this.style.transform='translateY(-2px)'; this.style.boxShadow='0 8px 24px rgba(59, 130, 246, 0.5)';\"\n                onmouseout=\"this.style.transform='translateY(0)'; this.style.boxShadow='0 4px 12px rgba(59, 130, 246, 0.4)';\">\n                \ud83c\udfe0 \u0391\u03c1\u03c7\u03b9\u03ba\u03ae\n              <\/button>\n            <\/div>\n          <\/div>\n        <\/div>\n      `;\n    }\n\n    function render() {\n      const app = document.getElementById('app');\n      \n      if (currentSection === 'menu') {\n        app.innerHTML = renderMenu();\n      } else if (currentSection === 'theory') {\n        app.innerHTML = renderTheory();\n      } else if (currentSection === 'practice') {\n        app.innerHTML = renderPractice();\n      } else if (currentSection === 'quiz') {\n        app.innerHTML = renderQuiz();\n      }\n    }\n\n    window.changeSection = function(section) {\n      currentSection = section;\n      render();\n    };\n\n    window.startQuiz = function() {\n      currentSection = 'quiz';\n      currentQuizQuestion = 0;\n      quizScore = 0;\n      render();\n    };\n\n    window.checkAnswer = function(selectedIndex) {\n      const q = quizQuestions[currentQuizQuestion];\n      const feedback = document.getElementById('quiz-feedback');\n      const options = document.querySelectorAll('.quiz-option');\n      \n      options.forEach(btn => btn.disabled = true);\n      \n      if (selectedIndex === q.correct) {\n        options[selectedIndex].classList.add('correct-answer', 'bounce');\n        feedback.style.backgroundColor = '#d1fae5';\n        feedback.style.color = '#065f46';\n        feedback.textContent = '\u2713 \u03a3\u03c9\u03c3\u03c4\u03ac! \u039c\u03c0\u03c1\u03ac\u03b2\u03bf!';\n        quizScore++;\n      } else {\n        options[selectedIndex].classList.add('wrong-answer');\n        options[q.correct].classList.add('correct-answer');\n        feedback.style.backgroundColor = '#fee2e2';\n        feedback.style.color = '#991b1b';\n        feedback.textContent = '\u2717 \u039b\u03ac\u03b8\u03bf\u03c2. \u0397 \u03c3\u03c9\u03c3\u03c4\u03ae \u03b1\u03c0\u03ac\u03bd\u03c4\u03b7\u03c3\u03b7 \u03b5\u03af\u03bd\u03b1\u03b9 \u03b7 \u03b5\u03c0\u03b9\u03c3\u03b7\u03bc\u03b1\u03c3\u03bc\u03ad\u03bd\u03b7.';\n      }\n      \n      setTimeout(() => {\n        currentQuizQuestion++;\n        render();\n      }, 2500);\n    };\n\n    window.checkPractice1 = function() {\n      const num = parseInt(document.getElementById('p1-num').value);\n      const den = parseInt(document.getElementById('p1-den').value);\n      const result = document.getElementById('p1-result');\n      \n      if (num === 6 && den === 20) {\n        result.style.color = '#059669';\n        result.textContent = '\u2713 \u03a3\u03c9\u03c3\u03c4\u03ac! \u039c\u03c0\u03bf\u03c1\u03b5\u03af\u03c2 \u03bd\u03b1 \u03c4\u03bf \u03b1\u03c0\u03bb\u03bf\u03c0\u03bf\u03b9\u03ae\u03c3\u03b5\u03b9\u03c2 \u03c3\u03b5 3\/10.';\n      } else if (num === 3 && den === 10) {\n        result.style.color = '#059669';\n        result.textContent = '\u2713 \u0386\u03c1\u03b9\u03c3\u03c4\u03b1! \u0391\u03c5\u03c4\u03ae \u03b5\u03af\u03bd\u03b1\u03b9 \u03b7 \u03b1\u03c0\u03bb\u03bf\u03c0\u03bf\u03b9\u03b7\u03bc\u03ad\u03bd\u03b7 \u03bc\u03bf\u03c1\u03c6\u03ae!';\n      } else {\n        result.style.color = '#dc2626';\n        result.textContent = '\u2717 \u03a0\u03c1\u03bf\u03c3\u03c0\u03ac\u03b8\u03b7\u03c3\u03b5 \u03be\u03b1\u03bd\u03ac. \u0398\u03c5\u03bc\u03ae\u03c3\u03bf\u03c5: \u03c0\u03bf\u03bb\u03bb\u03b1\u03c0\u03bb\u03b1\u03c3\u03b9\u03ac\u03b6\u03bf\u03c5\u03bc\u03b5 3\u00d72 \u03ba\u03b1\u03b9 4\u00d75.';\n      }\n    };\n\n    window.checkPractice2 = function() {\n      const num = parseInt(document.getElementById('p2-num').value);\n      const den = parseInt(document.getElementById('p2-den').value);\n      const result = document.getElementById('p2-result');\n      \n      if (num === 30 && den === 8) {\n        result.style.color = '#059669';\n        result.textContent = '\u2713 \u03a3\u03c9\u03c3\u03c4\u03ac! \u039c\u03c0\u03bf\u03c1\u03b5\u03af\u03c2 \u03bd\u03b1 \u03c4\u03bf \u03b1\u03c0\u03bb\u03bf\u03c0\u03bf\u03b9\u03ae\u03c3\u03b5\u03b9\u03c2 \u03c3\u03b5 15\/4.';\n      } else if (num === 15 && den === 4) {\n        result.style.color = '#059669';\n        result.textContent = '\u2713 \u0386\u03c1\u03b9\u03c3\u03c4\u03b1! \u0391\u03c5\u03c4\u03ae \u03b5\u03af\u03bd\u03b1\u03b9 \u03b7 \u03b1\u03c0\u03bb\u03bf\u03c0\u03bf\u03b9\u03b7\u03bc\u03ad\u03bd\u03b7 \u03bc\u03bf\u03c1\u03c6\u03ae!';\n      } else {\n        result.style.color = '#dc2626';\n        result.textContent = '\u2717 \u03a0\u03c1\u03bf\u03c3\u03c0\u03ac\u03b8\u03b7\u03c3\u03b5 \u03be\u03b1\u03bd\u03ac. \u03a4\u03bf 6 \u03b3\u03af\u03bd\u03b5\u03c4\u03b1\u03b9 6\/1 \u03ba\u03b1\u03b9 \u03bc\u03b5\u03c4\u03ac \u03c0\u03bf\u03bb\u03bb\u03b1\u03c0\u03bb\u03b1\u03c3\u03b9\u03ac\u03b6\u03bf\u03c5\u03bc\u03b5.';\n      }\n    };\n\n    window.checkPractice3 = function() {\n      const num = parseInt(document.getElementById('p3-num').value);\n      const den = parseInt(document.getElementById('p3-den').value);\n      const result = document.getElementById('p3-result');\n      \n      if (num === 9 && den === 7) {\n        result.style.color = '#059669';\n        result.textContent = '\u2713 \u039c\u03c0\u03c1\u03ac\u03b2\u03bf! \u0391\u03bd\u03c4\u03b9\u03c3\u03c4\u03c1\u03ad\u03c8\u03b1\u03bc\u03b5 \u03c4\u03bf\u03bd \u03b1\u03c1\u03b9\u03b8\u03bc\u03b7\u03c4\u03ae \u03bc\u03b5 \u03c4\u03bf\u03bd \u03c0\u03b1\u03c1\u03bf\u03bd\u03bf\u03bc\u03b1\u03c3\u03c4\u03ae!';\n      } else {\n        result.style.color = '#dc2626';\n        result.textContent = '\u2717 \u03a0\u03c1\u03bf\u03c3\u03c0\u03ac\u03b8\u03b7\u03c3\u03b5 \u03be\u03b1\u03bd\u03ac. \u039f \u03b1\u03bd\u03c4\u03af\u03c3\u03c4\u03c1\u03bf\u03c6\u03bf\u03c2 \u03b2\u03c1\u03af\u03c3\u03ba\u03b5\u03c4\u03b1\u03b9 \u03b1\u03bd\u03c4\u03b9\u03c3\u03c4\u03c1\u03ad\u03c6\u03bf\u03bd\u03c4\u03b1\u03c2 \u03c4\u03bf \u03ba\u03bb\u03ac\u03c3\u03bc\u03b1.';\n      }\n    };\n\n    render();\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:'9b58308964c16f67',t:'MTc2Njk5OTY5Mi4wMDAwMDA='};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\n<p>.<\/p>\n\n\n\n<p><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/gemini.google.com\/share\/76e73c54f304\" target=\"_blank\" rel=\" noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"740\" height=\"606\" src=\"https:\/\/prokopidis.sites.sch.gr\/wp-content\/uploads\/2024\/07\/\u03a3\u03c4\u03b9\u03b3\u03bc\u03b9\u03cc\u03c4\u03c5\u03c0\u03bf-\u03bf\u03b8\u03cc\u03bd\u03b7\u03c2-2025-12-25-113732.png\" alt=\"\" class=\"wp-image-5546\" srcset=\"https:\/\/prokopidis.sites.sch.gr\/wp-content\/uploads\/2024\/07\/\u03a3\u03c4\u03b9\u03b3\u03bc\u03b9\u03cc\u03c4\u03c5\u03c0\u03bf-\u03bf\u03b8\u03cc\u03bd\u03b7\u03c2-2025-12-25-113732.png 740w, https:\/\/prokopidis.sites.sch.gr\/wp-content\/uploads\/2024\/07\/\u03a3\u03c4\u03b9\u03b3\u03bc\u03b9\u03cc\u03c4\u03c5\u03c0\u03bf-\u03bf\u03b8\u03cc\u03bd\u03b7\u03c2-2025-12-25-113732-300x246.png 300w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 61vw, (max-width: 1362px) 45vw, 600px\" \/><\/a><figcaption class=\"wp-element-caption\">\u0393\u03b9\u03b1 \u03b5\u03c1\u03c9\u03c4\u03ae\u03c3\u03b5\u03b9\u03c2 \u03ba\u03bb\u03b9\u03ba \u03c3\u03c4\u03b7\u03bd \u03b5\u03b9\u03ba\u03cc\u03bd\u03b1<\/figcaption><\/figure>\n<\/div>\n\n\n<p>.<\/p>\n\n\n<div class=\"wp-block-pdfemb-pdf-embedder-viewer\"><a href=\"https:\/\/prokopidis.sites.sch.gr\/wp-content\/uploads\/2024\/07\/\u03a6\u03c5\u03bb\u03bb\u03ac\u03b4\u03b9\u03bf-\u0395\u03c1\u03b3\u03b1\u03c3\u03af\u03b1\u03c2-\u039c\u03b1\u03b8\u03b7\u03bc\u03b1\u03c4\u03b9\u03ba\u03ac-\u0395-\u0394\u03b7\u03bc\u03bf\u03c4\u03b9\u03ba\u03bf\u03cd.pdf\" class=\"pdfemb-viewer\" style=\"\" data-width=\"max\" data-height=\"max\" data-toolbar=\"bottom\" data-toolbar-fixed=\"off\">\u03a6\u03c5\u03bb\u03bb\u03ac\u03b4\u03b9\u03bf-\u0395\u03c1\u03b3\u03b1\u03c3\u03af\u03b1\u03c2-\u039c\u03b1\u03b8\u03b7\u03bc\u03b1\u03c4\u03b9\u03ba\u03ac-\u0395-\u0394\u03b7\u03bc\u03bf\u03c4\u03b9\u03ba\u03bf\u03cd<\/a><\/div>","protected":false},"excerpt":{"rendered":"<p>\u039c\u03b1\u03b8\u03b7\u03bc\u03b1\u03c4\u03b9\u03ba\u03cc \u0393\u03bb\u03c9\u03c3\u03c3\u03ac\u03c1\u03b9 \u039c\u03b1\u03b8\u03b7\u03bc\u03b1\u03c4\u03b9\u03ba\u03cc \u0393\u03bb\u03c9\u03c3\u03c3\u03ac\u03c1\u03b9 \u03a0\u03bf\u03bb\u03bb\u03b1\u03c0\u03bb\u03b1\u03c3\u03b9\u03b1\u03c3\u03bc\u03cc\u03c2 \u03bc\u03b5 \u039a\u03bb\u03ac\u03c3\u03bc\u03b1\u03c4\u03b1 &amp; \u0391\u03bd\u03c4\u03af\u03c3\u03c4\u03c1\u03bf\u03c6\u03bf\u03b9 \u0391\u03c1\u03b9\u03b8\u03bc\u03bf\u03af \ud83d\udca1 \u039a\u03ac\u03bd\u03b5 \u03ba\u03bb\u03b9\u03ba \u03c3\u03c4\u03b9\u03c2 \u03ba\u03ac\u03c1\u03c4\u03b5\u03c2 \u03b3\u03b9\u03b1 \u03bd\u03b1 \u03b1\u03bd\u03b1\u03ba\u03b1\u03bb\u03cd\u03c8\u03b5\u03b9\u03c2 \u03c4\u03b9\u03c2 \u03ad\u03bd\u03bd\u03bf\u03b9\u03b5\u03c2! . \u03a0\u03bf\u03bb\u03bb\u03b1\u03c0\u03bb\u03b1\u03c3\u03b9\u03b1\u03c3\u03bc\u03cc\u03c2 \u03bc\u03b5 \u039a\u03bb\u03ac\u03c3\u03bc\u03b1\u03c4\u03b1 &#8211; \u0395&#8217; \u0394\u03b7\u03bc\u03bf\u03c4\u03b9\u03ba\u03bf\u03cd . .<\/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-4182","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\/4182","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=4182"}],"version-history":[{"count":30,"href":"https:\/\/prokopidis.sites.sch.gr\/index.php?rest_route=\/wp\/v2\/posts\/4182\/revisions"}],"predecessor-version":[{"id":6021,"href":"https:\/\/prokopidis.sites.sch.gr\/index.php?rest_route=\/wp\/v2\/posts\/4182\/revisions\/6021"}],"wp:attachment":[{"href":"https:\/\/prokopidis.sites.sch.gr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=4182"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/prokopidis.sites.sch.gr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=4182"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/prokopidis.sites.sch.gr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=4182"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}