{"id":4186,"date":"2024-07-11T20:46:00","date_gmt":"2024-07-11T20:46:00","guid":{"rendered":"https:\/\/prokopidis.sites.sch.gr\/?p=4186"},"modified":"2026-01-24T19:45:12","modified_gmt":"2026-01-24T19:45:12","slug":"4186","status":"publish","type":"post","link":"https:\/\/prokopidis.sites.sch.gr\/?p=4186","title":{"rendered":"\u0394\u03b9\u03b1\u03af\u03c1\u03b5\u03c3\u03b7 \u03ba\u03bb\u03b1\u03c3\u03bc\u03ac\u03c4\u03c9\u03bd"},"content":{"rendered":"<div class=\"wp-block-image\">\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6a3fea757c303&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6a3fea757c303\" class=\"aligncenter size-large wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" 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-23-233550-1024x576.png\" alt=\"\" class=\"wp-image-6025\" 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-23-233550-1024x576.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-23-233550-300x169.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-23-233550-768x432.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-23-233550.png 1086w\" 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><\/figure>\n<\/div>\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<div class=\"_df_book df-lite\" id=\"df_6026\"  _slug=\"6026\" data-title=\"%ce%b4%ce%b9%ce%b1%ce%af%cf%81%ce%b5%cf%83%ce%b7-%ce%ba%ce%bb%ce%b1%cf%83%ce%bc%ce%ac%cf%84%cf%89%ce%bd\" wpoptions=\"true\" thumbtype=\"\" ><\/div><script class=\"df-shortcode-script\" nowprocket type=\"application\/javascript\">window.option_df_6026 = {\"outline\":[],\"autoEnableOutline\":\"false\",\"autoEnableThumbnail\":\"false\",\"overwritePDFOutline\":\"false\",\"enableDownload\":\"false\",\"direction\":\"1\",\"pageSize\":\"1\",\"source\":\"https:\\\/\\\/prokopidis.sites.sch.gr\\\/wp-content\\\/uploads\\\/2026\\\/01\\\/Fraction_Division_Logic_Explained.pdf\",\"wpOptions\":\"true\"}; if(window.DFLIP && window.DFLIP.parseBooks){window.DFLIP.parseBooks();}<\/script> \n\n\n\n<p>\u03ba\u03bb\u03b9\u03ba \u03c3\u03c4\u03b9\u03c2 \u03c4\u03c1\u03b5\u03b9\u03c2 \u03c4\u03b5\u03bb\u03b5\u03af\u03b5\u03c2 \u03ba\u03b1\u03b9 \u03bc\u03b5\u03c4\u03ac single Page Mode<\/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<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-medium is-resized\"><a href=\"https:\/\/gemini.google.com\/share\/85d27d495a4d\" target=\"_blank\" rel=\" noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"100\" 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-121615-300x100.png\" alt=\"\" class=\"wp-image-5553\" style=\"aspect-ratio:2.9860177953228333;width:532px;height:auto\" 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-121615-300x100.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-2025-12-25-121615-768x257.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-2025-12-25-121615.png 857w\" sizes=\"auto, (max-width: 300px) 85vw, 300px\" \/><\/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<!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 \u0394\u03b9\u03b1\u03af\u03c1\u03b5\u03c3\u03b7\u03c2 \u039a\u03bb\u03b1\u03c3\u03bc\u03ac\u03c4\u03c9\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        }\n        \n        html, body {\n            margin: 0;\n            padding: 0;\n            height: 100%;\n            width: 100%;\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 id=\"app-container\"><\/div>\n  <script>\n        const defaultConfig = {\n            background_color: \"#FFF4E6\",\n            card_color: \"#FFFFFF\",\n            primary_button_color: \"#FF6B9D\",\n            text_color: \"#2C3E50\",\n            accent_color: \"#FFB347\",\n            font_family: \"Comic Sans MS\",\n            font_size: 16,\n            main_title: \"\ud83c\udfaf \u0393\u03bb\u03c9\u03c3\u03c3\u03ac\u03c1\u03b9 \u039c\u03b1\u03b8\u03b7\u03bc\u03b1\u03c4\u03b9\u03ba\u03ce\u03bd \ud83c\udfaf\",\n            subtitle: \"\u0394\u03b9\u03b1\u03af\u03c1\u03b5\u03c3\u03b7 \u039a\u03bb\u03b1\u03c3\u03bc\u03ac\u03c4\u03c9\u03bd - \u03a0\u03ad\u03bc\u03c0\u03c4\u03b7 \u0394\u03b7\u03bc\u03bf\u03c4\u03b9\u03ba\u03bf\u03cd\",\n            footer_text: \"\u039a\u03b1\u03bb\u03ae \u03b5\u03c0\u03b9\u03c4\u03c5\u03c7\u03af\u03b1 \u03c3\u03c4\u03b7 \u03bc\u03ac\u03b8\u03b7\u03c3\u03b7! \ud83c\udf1f\"\n        };\n\n        const glossaryTerms = [\n            {\n                id: 1,\n                term: \"\u039a\u03bb\u03ac\u03c3\u03bc\u03b1\",\n                definition: \"\u0388\u03bd\u03b1 \u03bc\u03b1\u03b8\u03b7\u03bc\u03b1\u03c4\u03b9\u03ba\u03cc \u03c3\u03cd\u03bc\u03b2\u03bf\u03bb\u03bf \u03c0\u03bf\u03c5 \u03b4\u03b5\u03af\u03c7\u03bd\u03b5\u03b9 \u03ad\u03bd\u03b1 \u03bc\u03ad\u03c1\u03bf\ufffd\ufffd \u03b1\u03c0\u03cc \u03ad\u03bd\u03b1 \u03c3\u03cd\u03bd\u03bf\u03bb\u03bf. \u0391\u03c0\u03bf\u03c4\u03b5\u03bb\u03b5\u03af\u03c4\u03b1\u03b9 \u03b1\u03c0\u03cc \u03c4\u03bf\u03bd \u03b1\u03c1\u03b9\u03b8\u03bc\u03b7\u03c4\u03ae (\u03c0\u03ac\u03bd\u03c9 \u03b1\u03c1\u03b9\u03b8\u03bc\u03cc\u03c2) \u03ba\u03b1\u03b9 \ufffd\ufffd\u03bf\u03bd \ufffd\ufffd\u03b1\u03c1\u03bf\u03bd\u03bf\u03bc\u03b1\u03c3\u03c4\u03ae (\u03ba\u03ac\u03c4\u03c9 \u03b1\u03c1\u03b9\u03b8\u03bc\u03cc\u03c2).\",\n                example: \"\u00be \u03c3\u03b7\u03bc\u03b1\u03af\u03bd\u03b5\u03b9 3 \u03bc\u03ad\u03c1\u03b7 \u03b1\u03c0\u03cc 4 \u03af\u03c3\u03b1 \u03ba\u03bf\u03bc\u03bc\u03ac\u03c4\u03b9\u03b1\",\n                emoji: \"\ud83c\udf55\"\n            },\n            {\n                id: 2,\n                term: \"\u0391\u03c1\u03b9\u03b8\u03bc\u03b7\u03c4\u03ae\u03c2\",\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 \u03ba\u03bf\u03bc\u03bc\u03ac\u03c4\u03b9\u03b1 \u03ad\u03c7\u03bf\u03c5\u03bc\u03b5.\",\n                example: \"\u03a3\u03c4\u03bf \u03ba\u03bb\u03ac\u03c3\u03bc\u03b1 3\/4, \u03bf \u03b1\u03c1\u03b9\u03b8\u03bc\u03cc\u03c2 3 \u03b5\u03af\u03bd\u03b1\u03b9 \u03bf \u03b1\u03c1\u03b9\u03b8\u03bc\u03b7\u03c4\u03ae\u03c2\",\n                emoji: \"\u2b06\ufe0f\"\n            },\n            {\n                id: 3,\n                term: \"\u03a0\u03b1\u03c1\u03bf\u03bd\u03bf\u03bc\u03b1\u03c3\u03c4\u03ae\u03c2\",\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 \u03ba\u03bf\ufffd\ufffd\u03bc\u03ac\u03c4\u03b9\u03b1 \u03c7\u03c9\u03c1\u03af\u03b6\u03bf\u03c5\u03bc\u03b5 \u03c4\u03bf \u03c3\u03cd\u03bd\u03bf\u03bb\u03bf.\",\n                example: \"\u03a3\u03c4\u03bf \u03ba\u03bb\u03ac\u03c3\u03bc\u03b1 3\/4, \u03bf \u03b1\u03c1\ufffd\ufffd\u03b8\u03bc\u03cc\u03c2 4 \u03b5\u03af\u03bd\u03b1\u03b9 \u03bf \u03c0\u03b1\u03c1\u03bf\u03bd\u03bf\u03bc\u03b1\u03c3\u03c4\u03ae\u03c2\",\n                emoji: \"\u2b07\ufe0f\"\n            },\n            {\n                id: 4,\n                term: \"\u0394\u03b9\u03b1\u03af\u03c1\u03b5\u03c3\u03b7 \u039a\u03bb\u03b1\u03c3\u03bc\u03ac\u03c4\u03c9\u03bd\",\n                definition: \"\u0397 \u03c0\u03c1\u03ac\u03be\u03b7 \u03cc\u03c0\u03bf\u03c5 \u03b4\u03b9\u03b1\u03b9\u03c1\u03bf\u03cd\u03bc\u03b5 \u03ad\u03bd\u03b1 \u03ba\u03bb\u03ac\u03c3\u03bc\u03b1 \u03bc\u03b5 \u03ad\u03bd\u03b1 \u03ac\u03bb\u03bb\u03bf. \u0393\u03b9\u03b1 \u03bd\u03b1 \u03b4\u03b9\u03b1\u03b9\u03c1\u03ad\u03c3\u03bf\u03c5\u03bc\u03b5 \u03ba\u03bb\u03ac\u03c3\u03bc\u03b1\u03c4\u03b1, \u03c0\u03bf\u03bb\u03bb\u03b1\u03c0\u03bb\u03b1\u03c3\u03b9\u03ac\u03b6\u03bf\u03c5\u03bc\u03b5 \u03c4\u03bf \u03c0\u03c1\u03ce\u03c4\u03bf \u03ba\u03bb\u03ac\u03c3\u03bc\u03b1 \u03bc\u03b5 \u03c4\u03bf \u03b1\u03bd\u03c4\u03af\u03c3\u03c4\u03c1\u03bf\u03c6\u03bf \u03c4\u03bf\u03c5 \u03b4\u03b5\u03cd\u03c4\u03b5\u03c1\u03bf\u03c5.\",\n                example: \"\u00bd \u00f7 \u00bc = \u00bd \u00d7 4\/1 = 2\",\n                emoji: \"\u2797\"\n            },\n            {\n                id: 5,\n                term: \"\u0391\u03bd\u03c4\u03af\u03c3\u03c4\u03c1\u03bf\u03c6\u03bf \u039a\u03bb\u03ac\u03c3\u03bc\u03b1\",\n                definition: \"\u038c\u03c4\u03b1\u03bd \u03b1\u03bd\u03c4\u03b9\u03c3\u03c4\u03c1\u03ad\u03c6\u03bf\u03c5\u03bc\u03b5 \u03ad\u03bd\u03b1\u03bd \u03b1\u03c1\u03b9\u03b8\u03bc\u03b7\u03c4\u03ae \u03ba\u03b1\u03b9 \u03ad\u03bd\u03b1\u03bd \u03c0\u03b1\u03c1\u03bf\u03bd\u03bf\u03bc\u03b1\u03c3\u03c4\u03ae. \u03a4\u03bf \u03b1\u03bd\u03c4\u03af\u03c3\u03c4\u03c1\u03bf\u03c6\u03bf \u03c7\u03c1\u03b7\u03c3\u03b9\u03bc\u03bf\u03c0\u03bf\u03b9\u03b5\u03af\u03c4\u03b1\u03b9 \u03c3\u03c4\u03b7 \u03b4\u03b9\u03b1\u03af\u03c1\ufffd\ufffd\u03c3\u03b7 \u03ba\u03bb\u03b1\u03c3\u03bc\u03ac\u03c4\u03c9\u03bd.\",\n                example: \"\u03a4\u03bf \u03b1\u03bd\u03c4\u03af\u03c3\u03c4\u03c1\u03bf\u03c6\u03bf \u03c4\u03bf\u03c5 3\/4 \u03b5\u03af\u03bd\u03b1\u03b9 4\/3\",\n                emoji: \"\ud83d\udd04\"\n            },\n            {\n                id: 6,\n                term: \"\u0391\u03c0\u03bb\u03bf\u03c0\u03bf\u03af\u03b7\u03c3\u03b7\",\n                definition: \"\u0397 \u03b4\u03b9\u03b1\u03b4\u03b9\u03ba\u03b1\u03c3\u03af\u03b1 \u03bc\u03b5\u03c4\u03b1\u03c4\u03c1\u03bf\u03c0\u03ae\u03c2 \u03b5\u03bd\u03cc\u03c2 \u03ba\u03bb\u03ac\u03c3\u03bc\u03b1\u03c4\u03bf\u03c2 \u03c3\u03c4\u03b7\u03bd \u03c0\u03b9\u03bf \u03b1\u03c0\u03bb\u03ae \u03c4\u03bf\u03c5 \u03bc\u03bf\u03c1\ufffd\ufffd\u03ae, \u03b4\u03b9\u03b1\u03b9\u03c1\u03ce\u03bd\u03c4\u03b1\u03c2 \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.\",\n                example: \"6\/8 = 3\/4 (\u03b4\u03b9\u03b1\u03b9\u03c1\u03ad\u03c3\u03b1\u03bc\u03b5 \u03ba\u03b1\u03b9 \u03c4\u03b1 \u03b4\u03cd\u03bf \u03bc\u03b5 \u03c4\u03bf 2)\",\n                emoji: \"\u2728\"\n            },\n            {\n                id: 7,\n                term: \"\u039c\u03b9\u03ba\u03c4\u03cc\u03c2 \u0391\u03c1\u03b9\u03b8\u03bc\u03cc\u03c2\",\n                definition: \"\u0388\u03bd\u03b1\u03c2 \u03b1\u03c1\u03b9\u03b8\u03bc\u03cc\u03c2 \u03c0\u03bf\u03c5 \u03b1\u03c0\u03bf\u03c4\u03b5\u03bb\u03b5\u03af\u03c4\u03b1\u03b9 \u03b1\u03c0\u03cc \u03ad\u03bd\u03b1\u03bd \u03b1\u03ba\u03ad\u03c1\u03b1\u03b9\u03bf \u03ba\u03b1\u03b9 \u03ad\u03bd\u03b1 \u03ba\u03bb\u03ac\u03c3\u03bc\u03b1.\",\n                example: \"2 \u00bd \u03b5\u03af\u03bd\u03b1\u03b9 \u03bc\u03b9\u03ba\u03c4\u03cc\u03c2 \u03b1\u03c1\u03b9\u03b8\u03bc\u03cc\u03c2 (2 \u03bf\u03bb\u03cc\u03ba\u03bb\u03b7\u03c1\u03b1 \u03ba\u03b1\u03b9 \u03bc\u03b9\u03c3\u03cc)\",\n                emoji: \"\ud83c\udf82\"\n            },\n            {\n                id: 8,\n                term: \"\u039f\u03bc\u03ce\u03bd\u03c5\u03bc\u03b1 \u039a\u03bb\u03ac\u03c3\u03bc\u03b1\u03c4\u03b1\",\n                definition: \"\u039a\u03bb\u03ac\u03c3\u03bc\u03b1\u03c4\u03b1 \u03c0\u03bf\u03c5 \u03ad\u03c7\u03bf\u03c5\u03bd \u03c4\u03bf\u03bd \u03af\u03b4\u03b9\u03bf \u03c0\u03b1\u03c1\u03bf\u03bd\u03bf\u03bc\u03b1\u03c3\u03c4\u03ae.\",\n                example: \"2\/5 \u03ba\u03b1\u03b9 3\/5 \u03b5\u03af\u03bd\u03b1\u03b9 \u03bf\u03bc\u03ce\u03bd\u03c5\u03bc\u03b1 \u03ba\u03bb\u03ac\u03c3\u03bc\u03b1\u03c4\u03b1\",\n                emoji: \"\ud83d\udc6f\"\n            }\n        ];\n\n        let selectedCard = null;\n\n        async function onConfigChange(config) {\n            const appContainer = document.getElementById('app-container');\n            const customFont = config.font_family || defaultConfig.font_family;\n            const baseFontStack = 'Arial, sans-serif';\n            const baseSize = config.font_size || defaultConfig.font_size;\n            const bgColor = config.background_color || defaultConfig.background_color;\n            const cardColor = config.card_color || defaultConfig.card_color;\n            const primaryColor = config.primary_button_color || defaultConfig.primary_button_color;\n            const textColor = config.text_color || defaultConfig.text_color;\n            const accentColor = config.accent_color || defaultConfig.accent_color;\n            const mainTitle = config.main_title || defaultConfig.main_title;\n            const subtitle = config.subtitle || defaultConfig.subtitle;\n            const footerText = config.footer_text || defaultConfig.footer_text;\n\n            appContainer.style.backgroundColor = bgColor;\n            appContainer.style.color = textColor;\n            appContainer.style.fontFamily = `${customFont}, ${baseFontStack}`;\n            appContainer.style.fontSize = `${baseSize}px`;\n            appContainer.style.minHeight = '100%';\n            appContainer.style.width = '100%';\n            appContainer.style.padding = '20px';\n            appContainer.style.overflowY = 'auto';\n\n            let html = `\n                <header style=\"text-align: center; margin-bottom: 30px;\">\n                    <h1 style=\"font-size: ${baseSize * 2}px; margin: 10px 0; color: ${textColor}; font-family: ${customFont}, ${baseFontStack};\">${mainTitle}<\/h1>\n                    <p style=\"font-size: ${baseSize * 1.2}px; color: ${textColor}; margin: 5px 0; font-family: ${customFont}, ${baseFontStack};\">${subtitle}<\/p>\n                <\/header>\n\n                <main style=\"max-width: 1200px; margin: 0 auto;\">\n                    <div style=\"display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-bottom: 30px;\">\n                    <style>\n                        @media (max-width: 768px) {\n                            main > div {\n                                grid-template-columns: 1fr !important;\n                            }\n                        }\n                        @media (min-width: 900px) {\n                            main > div {\n                                grid-template-columns: repeat(3, 1fr) !important;\n                            }\n                        }\n                    <\/style>\n            `;\n\n            glossaryTerms.forEach(term => {\n                html += `\n                    <article class=\"term-card\" data-term-id=\"${term.id}\" style=\"\n                        background: ${cardColor};\n                        border-radius: 15px;\n                        padding: 20px;\n                        cursor: pointer;\n                        transition: all 0.3s ease;\n                        border: 3px solid ${accentColor};\n                        box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n                    \">\n                        <div style=\"text-align: center; font-size: ${baseSize * 2.5}px; margin-bottom: 10px;\">\n                            ${term.emoji}\n                        <\/div>\n                        <h2 style=\"font-size: ${baseSize * 1.4}px; margin: 10px 0; color: ${primaryColor}; text-align: center; font-family: ${customFont}, ${baseFontStack};\">\n                            ${term.term}\n                        <\/h2>\n                        <div class=\"term-content\" style=\"display: none;\">\n                            <p style=\"font-size: ${baseSize}px; line-height: 1.6; margin: 15px 0; color: ${textColor}; font-family: ${customFont}, ${baseFontStack};\">\n                                ${term.definition}\n                            <\/p>\n                            <div style=\"background: ${bgColor}; padding: 15px; border-radius: 10px; margin-top: 15px; border-left: 4px solid ${primaryColor};\">\n                                <strong style=\"color: ${primaryColor}; font-size: ${baseSize * 1.1}px; font-family: ${customFont}, ${baseFontStack};\">\ud83d\udcdd \u03a0\u03b1\u03c1\u03ac\u03b4\u03b5\u03b9\u03b3\u03bc\u03b1:<\/strong>\n                                <p style=\"font-size: ${baseSize * 0.95}px; margin: 8px 0 0 0; color: ${textColor}; font-family: ${customFont}, ${baseFontStack};\">\n                                    ${term.example}\n                                <\/p>\n                            <\/div>\n                        <\/div>\n                        <button class=\"toggle-btn\" style=\"\n                            background: ${primaryColor};\n                            color: white;\n                            border: none;\n                            padding: 10px 20px;\n                            border-radius: 20px;\n                            cursor: pointer;\n                            font-size: ${baseSize * 0.9}px;\n                            margin-top: 15px;\n                            width: 100%;\n                            font-weight: bold;\n                            transition: all 0.3s ease;\n                            font-family: ${customFont}, ${baseFontStack};\n                        \">\n                            \u0394\u03b5\u03c2 \u03c0\u03b5\u03c1\u03b9\u03c3\u03c3\u03cc\u03c4\u03b5\u03c1\u03b1 \u25bc\n                        <\/button>\n                    <\/article>\n                `;\n            });\n\n            html += `\n                    <\/div>\n                <\/main>\n\n                <footer style=\"text-align: center; margin-top: 40px; padding: 20px; background: ${cardColor}; border-radius: 15px; border: 2px solid ${accentColor};\">\n                    <p style=\"font-size: ${baseSize * 1.1}px; color: ${textColor}; margin: 0; font-family: ${customFont}, ${baseFontStack};\">${footerText}<\/p>\n                <\/footer>\n            `;\n\n            appContainer.innerHTML = html;\n\n            const cards = appContainer.querySelectorAll('.term-card');\n            cards.forEach(card => {\n                const toggleBtn = card.querySelector('.toggle-btn');\n                const content = card.querySelector('.term-content');\n                \n                card.addEventListener('mouseenter', () => {\n                    card.style.transform = 'translateY(-5px) scale(1.02)';\n                    card.style.boxShadow = '0 8px 16px rgba(0,0,0,0.2)';\n                });\n\n                card.addEventListener('mouseleave', () => {\n                    card.style.transform = 'translateY(0) scale(1)';\n                    card.style.boxShadow = '0 4px 6px rgba(0,0,0,0.1)';\n                });\n\n                toggleBtn.addEventListener('click', (e) => {\n                    e.stopPropagation();\n                    const isOpen = content.style.display === 'block';\n                    \n                    if (isOpen) {\n                        content.style.display = 'none';\n                        toggleBtn.textContent = '\u0394\u03b5\u03c2 \u03c0\u03b5\u03c1\u03b9\u03c3\u03c3\u03cc\u03c4\u03b5\u03c1\u03b1 \u25bc';\n                        toggleBtn.style.background = primaryColor;\n                    } else {\n                        content.style.display = 'block';\n                        toggleBtn.textContent = '\u039a\u03bb\u03b5\u03af\ufffd\ufffd\u03b5 \u25b2';\n                        toggleBtn.style.background = accentColor;\n                    }\n                });\n\n                toggleBtn.addEventListener('mouseenter', () => {\n                    toggleBtn.style.opacity = '0.8';\n                    toggleBtn.style.transform = 'scale(1.05)';\n                });\n\n                toggleBtn.addEventListener('mouseleave', () => {\n                    toggleBtn.style.opacity = '1';\n                    toggleBtn.style.transform = 'scale(1)';\n                });\n            });\n        }\n\n        const capabilities = {\n            recolorables: [\n                {\n                    get: () => window.elementSdk?.config?.background_color || defaultConfig.background_color,\n                    set: (value) => {\n                        if (window.elementSdk) {\n                            window.elementSdk.setConfig({ background_color: value });\n                        }\n                    }\n                },\n                {\n                    get: () => window.elementSdk?.config?.card_color || defaultConfig.card_color,\n                    set: (value) => {\n                        if (window.elementSdk) {\n                            window.elementSdk.setConfig({ card_color: value });\n                        }\n                    }\n                },\n                {\n                    get: () => window.elementSdk?.config?.text_color || defaultConfig.text_color,\n                    set: (value) => {\n                        if (window.elementSdk) {\n                            window.elementSdk.setConfig({ text_color: value });\n                        }\n                    }\n                },\n                {\n                    get: () => window.elementSdk?.config?.primary_button_color || defaultConfig.primary_button_color,\n                    set: (value) => {\n                        if (window.elementSdk) {\n                            window.elementSdk.setConfig({ primary_button_color: value });\n                        }\n                    }\n                },\n                {\n                    get: () => window.elementSdk?.config?.accent_color || defaultConfig.accent_color,\n                    set: (value) => {\n                        if (window.elementSdk) {\n                            window.elementSdk.setConfig({ accent_color: value });\n                        }\n                    }\n                }\n            ],\n            borderables: [],\n            fontEditable: {\n                get: () => window.elementSdk?.config?.font_family || defaultConfig.font_family,\n                set: (value) => {\n                    if (window.elementSdk) {\n                        window.elementSdk.setConfig({ font_family: value });\n                    }\n                }\n            },\n            fontSizeable: {\n                get: () => window.elementSdk?.config?.font_size || defaultConfig.font_size,\n                set: (value) => {\n                    if (window.elementSdk) {\n                        window.elementSdk.setConfig({ font_size: value });\n                    }\n                }\n            }\n        };\n\n        if (window.elementSdk) {\n            window.elementSdk.init({\n                defaultConfig,\n                onConfigChange,\n                mapToCapabilities: () => capabilities,\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        } else {\n            onConfigChange(defaultConfig);\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:'9b58456b958e6f67',t:'MTc2NzAwMDU0Ny4wMDAwMDA='};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<!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>\u0394\u03b9\u03b1\u03af\u03c1\u03b5\u03c3\u03b7 \u039a\u03bb\u03b1\u03c3\u03bc\u03ac\u03c4\u03c9\u03bd<\/title>\n  <script src=\"\/_sdk\/element_sdk.js\"><\/script>\n  <style>\n        body {\n            box-sizing: border-box;\n            margin: 0;\n            padding: 0;\n            font-family: 'Comic Sans MS', 'Arial', sans-serif;\n            overflow-x: hidden;\n        }\n        \n        html, body {\n            height: 100%;\n            width: 100%;\n        }\n        \n        .app-container {\n            min-height: 100%;\n            width: 100%;\n            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n            padding: 40px 20px;\n            overflow-y: auto;\n        }\n        \n        .main-content {\n            max-width: 1200px;\n            margin: 0 auto;\n        }\n        \n        .header {\n            text-align: center;\n            margin-bottom: 40px;\n            animation: fadeInDown 0.8s ease;\n        }\n        \n        .header h1 {\n            color: #ffffff;\n            font-size: 48px;\n            margin: 0 0 10px 0;\n            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);\n        }\n        \n        .header p {\n            color: #f0f0f0;\n            font-size: 22px;\n            margin: 0;\n        }\n        \n        .section {\n            background: white;\n            border-radius: 20px;\n            padding: 30px;\n            margin-bottom: 30px;\n            box-shadow: 0 8px 20px rgba(0,0,0,0.2);\n            animation: fadeInUp 0.8s ease;\n        }\n        \n        .section h2 {\n            color: #667eea;\n            font-size: 32px;\n            margin: 0 0 20px 0;\n            border-bottom: 3px solid #667eea;\n            padding-bottom: 10px;\n        }\n        \n        .theory-content {\n            font-size: 20px;\n            line-height: 1.8;\n            color: #333;\n        }\n        \n        .theory-content strong {\n            color: #764ba2;\n            font-size: 22px;\n        }\n        \n        .rule-box {\n            background: #f0f4ff;\n            border-left: 5px solid #667eea;\n            padding: 20px;\n            margin: 20px 0;\n            border-radius: 10px;\n            font-size: 20px;\n        }\n        \n        .fraction {\n            display: inline-block;\n            vertical-align: middle;\n            text-align: center;\n            margin: 0 8px;\n        }\n        \n        .fraction-num {\n            display: block;\n            border-bottom: 2px solid #333;\n            padding-bottom: 2px;\n            font-size: 24px;\n            font-weight: bold;\n        }\n        \n        .fraction-den {\n            display: block;\n            padding-top: 2px;\n            font-size: 24px;\n            font-weight: bold;\n        }\n        \n        .examples-grid {\n            display: grid;\n            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));\n            gap: 20px;\n            margin-top: 20px;\n        }\n        \n        .example-card {\n            background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);\n            padding: 25px;\n            border-radius: 15px;\n            box-shadow: 0 4px 10px rgba(0,0,0,0.1);\n            transition: transform 0.3s ease;\n        }\n        \n        .example-card:hover {\n            transform: translateY(-5px);\n        }\n        \n        .example-card h3 {\n            color: #c0392b;\n            margin: 0 0 15px 0;\n            font-size: 24px;\n        }\n        \n        .example-step {\n            font-size: 20px;\n            line-height: 1.8;\n            color: #333;\n            margin: 10px 0;\n        }\n        \n        .quiz-grid {\n            display: grid;\n            grid-template-columns: repeat(2, 1fr);\n            gap: 25px;\n            margin-top: 20px;\n        }\n        \n        @media (max-width: 768px) {\n            .quiz-grid {\n                grid-template-columns: 1fr;\n            }\n        }\n        \n        .quiz-card {\n            background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);\n            padding: 25px;\n            border-radius: 15px;\n            box-shadow: 0 4px 10px rgba(0,0,0,0.1);\n        }\n        \n        .quiz-question {\n            font-size: 22px;\n            color: #2c3e50;\n            margin-bottom: 15px;\n            font-weight: bold;\n        }\n        \n        .quiz-options {\n            display: flex;\n            flex-direction: column;\n            gap: 10px;\n        }\n        \n        .quiz-option {\n            background: white;\n            border: 3px solid #667eea;\n            padding: 15px;\n            border-radius: 10px;\n            cursor: pointer;\n            font-size: 20px;\n            transition: all 0.3s ease;\n            text-align: center;\n        }\n        \n        .quiz-option:hover {\n            background: #667eea;\n            color: white;\n            transform: scale(1.05);\n        }\n        \n        .quiz-option.correct {\n            background: #2ecc71;\n            color: white;\n            border-color: #2ecc71;\n        }\n        \n        .quiz-option.incorrect {\n            background: #e74c3c;\n            color: white;\n            border-color: #e74c3c;\n        }\n        \n        .quiz-option.disabled {\n            pointer-events: none;\n            opacity: 0.6;\n        }\n        \n        .feedback {\n            margin-top: 15px;\n            padding: 15px;\n            border-radius: 10px;\n            font-size: 18px;\n            font-weight: bold;\n            text-align: center;\n            display: none;\n        }\n        \n        .feedback.show {\n            display: block;\n        }\n        \n        .feedback.correct {\n            background: #d4edda;\n            color: #155724;\n        }\n        \n        .feedback.incorrect {\n            background: #f8d7da;\n            color: #721c24;\n        }\n        \n        .score-display {\n            text-align: center;\n            font-size: 28px;\n            color: #667eea;\n            margin-top: 30px;\n            padding: 20px;\n            background: #f0f4ff;\n            border-radius: 15px;\n            font-weight: bold;\n        }\n        \n        @keyframes fadeInDown {\n            from {\n                opacity: 0;\n                transform: translateY(-30px);\n            }\n            to {\n                opacity: 1;\n                transform: translateY(0);\n            }\n        }\n        \n        @keyframes fadeInUp {\n            from {\n                opacity: 0;\n                transform: translateY(30px);\n            }\n            to {\n                opacity: 1;\n                transform: translateY(0);\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-container\">\n   <div class=\"main-content\">\n    <header class=\"header\">\n     <h1 id=\"main-title\">\u0394\u03b9\u03b1\u03af\u03c1\u03b5\u03c3\u03b7 \u039a\u03bb\u03b1\u03c3\u03bc\u03ac\u03c4\u03c9\u03bd<\/h1>\n     <p id=\"subtitle\">\u039c\u03b1\u03b8\u03b1\u03af\u03bd\u03c9 \u03b5\u03cd\u03ba\u03bf\u03bb\u03b1 \u03ba\u03b1\u03b9 \u03b4\u03b9\u03b1\u03c3\u03ba\u03b5\u03b4\u03b1\u03c3\u03c4\u03b9\u03ba\u03ac! \ud83c\udf93<\/p>\n    <\/header>\n    <section class=\"section\">\n     <h2 id=\"theory-title\">\ud83d\udcda \u0398\u03b5\u03c9\u03c1\u03af\u03b1<\/h2>\n     <div class=\"theory-content\">\n      <p><strong>\u03a0\u03ce\u03c2 \u03b4\u03b9\u03b1\u03b9\u03c1\u03bf\u03cd\u03bc\u03b5 \u03ba\u03bb\u03ac\u03c3\u03bc\u03b1\u03c4\u03b1;<\/strong><\/p>\n      <p>\u0393\u03b9\u03b1 \u03bd\u03b1 \u03b4\u03b9\u03b1\u03b9\u03c1\u03ad\u03c3\u03bf\u03c5\u03bc\u03b5 \u03b4\u03cd\u03bf \u03ba\u03bb\u03ac\u03c3\u03bc\u03b1\u03c4\u03b1, \u03b1\u03ba\u03bf\u03bb\u03bf\u03c5\u03b8\u03bf\u03cd\u03bc\u03b5 \u03c4\u03b1 \u03b5\u03be\u03ae\u03c2 \u03b2\u03ae\u03bc\u03b1\u03c4\u03b1:<\/p>\n      <div class=\"rule-box\"><strong>\u039a\u03b1\u03bd\u03cc\u03bd\u03b1\u03c2:<\/strong> \u03a0\u03bf\u03bb\u03bb\u03b1\u03c0\u03bb\u03b1\u03c3\u03b9\u03ac\u03b6\u03bf\u03c5\u03bc\u03b5 \u03c4\u03bf \u03c0\u03c1\u03ce\u03c4\u03bf \u03ba\u03bb\u03ac\u03c3\u03bc\u03b1 \u03bc\u03b5 \u03c4\u03bf <strong>\u03b1\u03bd\u03c4\u03af\u03c3\u03c4\u03c1\u03bf\u03c6\u03bf<\/strong> \u03c4\u03bf\u03c5 \u03b4\u03b5\u03cd\u03c4\u03b5\u03c1\u03bf\u03c5 \u03ba\u03bb\u03ac\u03c3\u03bc\u03b1\u03c4\u03bf\u03c2.\n      <\/div>\n      <p>\u03a4\u03bf <strong>\u03b1\u03bd\u03c4\u03af\u03c3\u03c4\u03c1\u03bf\u03c6\u03bf<\/strong> \u03b5\u03bd\u03cc\u03c2 \u03ba\u03bb\u03ac\u03c3\u03bc\u03b1\u03c4\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\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.<\/p>\n      <p>\u03a0\u03b1\u03c1\u03ac\u03b4\u03b5\u03b9\u03b3\u03bc\u03b1: \u03a4\u03bf \u03b1\u03bd\u03c4\u03af\u03c3\u03c4\u03c1\u03bf\u03c6\u03bf \u03c4\u03bf\u03c5 <span class=\"fraction\"> <span class=\"fraction-num\">3<\/span> <span class=\"fraction-den\">4<\/span> <\/span> \u03b5\u03af\u03bd\u03b1\u03b9 \u03c4\u03bf <span class=\"fraction\"> <span class=\"fraction-num\">4<\/span> <span class=\"fraction-den\">3<\/span> <\/span><\/p>\n     <\/div>\n    <\/section>\n    <section class=\"section\">\n     <h2 id=\"examples-title\">\ud83d\udca1 \u03a0\u03b1\u03c1\u03b1\u03b4\u03b5\u03af\u03b3\u03bc\u03b1\u03c4\u03b1<\/h2>\n     <div class=\"examples-grid\">\n      <div class=\"example-card\">\n       <h3>\u03a0\u03b1\u03c1\u03ac\u03b4\u03b5\u03b9\u03b3\u03bc\u03b1 1<\/h3>\n       <div class=\"example-step\"><span class=\"fraction\"> <span class=\"fraction-num\">2<\/span> <span class=\"fraction-den\">3<\/span> <\/span> \u00f7 <span class=\"fraction\"> <span class=\"fraction-num\">4<\/span> <span class=\"fraction-den\">5<\/span> <\/span> = ?\n       <\/div>\n       <div class=\"example-step\"><strong>\u0392\u03ae\u03bc\u03b1 1:<\/strong> \u0392\u03c1\u03af\u03c3\u03ba\u03bf\u03c5\u03bc\u03b5 \u03c4\u03bf \u03b1\u03bd\u03c4\u03af\u03c3\u03c4\u03c1\u03bf\u03c6\u03bf \u03c4\u03bf\u03c5 <span class=\"fraction\"> <span class=\"fraction-num\">4<\/span> <span class=\"fraction-den\">5<\/span> <\/span> \u03c0\u03bf\u03c5 \u03b5\u03af\u03bd\u03b1\u03b9 <span class=\"fraction\"> <span class=\"fraction-num\">5<\/span> <span class=\"fraction-den\">4<\/span> <\/span>\n       <\/div>\n       <div class=\"example-step\"><strong>\u0392\u03ae\u03bc\u03b1 2:<\/strong> \u03a0\u03bf\u03bb\u03bb\u03b1\u03c0\u03bb\u03b1\u03c3\u03b9\u03ac\u03b6\u03bf\u03c5\u03bc\u03b5: <span class=\"fraction\"> <span class=\"fraction-num\">2<\/span> <span class=\"fraction-den\">3<\/span> <\/span> \u00d7 <span class=\"fraction\"> <span class=\"fraction-num\">5<\/span> <span class=\"fraction-den\">4<\/span> <\/span> = <span class=\"fraction\"> <span class=\"fraction-num\">10<\/span> <span class=\"fraction-den\">12<\/span> <\/span> = <span class=\"fraction\"> <span class=\"fraction-num\">5<\/span> <span class=\"fraction-den\">6<\/span> <\/span>\n       <\/div>\n      <\/div>\n      <div class=\"example-card\">\n       <h3>\u03a0\u03b1\u03c1\u03ac\u03b4\u03b5\u03b9\u03b3\u03bc\u03b1 2<\/h3>\n       <div class=\"example-step\"><span class=\"fraction\"> <span class=\"fraction-num\">3<\/span> <span class=\"fraction-den\">4<\/span> <\/span> \u00f7 <span class=\"fraction\"> <span class=\"fraction-num\">1<\/span> <span class=\"fraction-den\">2<\/span> <\/span> = ?\n       <\/div>\n       <div class=\"example-step\"><strong>\u0392\u03ae\u03bc\u03b1 1:<\/strong> \u0392\u03c1\u03af\u03c3\u03ba\u03bf\u03c5\u03bc\u03b5 \u03c4\u03bf \u03b1\u03bd\u03c4\u03af\u03c3\u03c4\u03c1\u03bf\u03c6\u03bf \u03c4\u03bf\u03c5 <span class=\"fraction\"> <span class=\"fraction-num\">1<\/span> <span class=\"fraction-den\">2<\/span> <\/span> \u03c0\u03bf\u03c5 \u03b5\u03af\u03bd\u03b1\u03b9 <span class=\"fraction\"> <span class=\"fraction-num\">2<\/span> <span class=\"fraction-den\">1<\/span> <\/span>\n       <\/div>\n       <div class=\"example-step\"><strong>\u0392\u03ae\u03bc\u03b1 2:<\/strong> \u03a0\u03bf\u03bb\u03bb\u03b1\u03c0\u03bb\u03b1\u03c3\u03b9\u03ac\u03b6\u03bf\u03c5\u03bc\u03b5: <span class=\"fraction\"> <span class=\"fraction-num\">3<\/span> <span class=\"fraction-den\">4<\/span> <\/span> \u00d7 <span class=\"fraction\"> <span class=\"fraction-num\">2<\/span> <span class=\"fraction-den\">1<\/span> <\/span> = <span class=\"fraction\"> <span class=\"fraction-num\">6<\/span> <span class=\"fraction-den\">4<\/span> <\/span> = <span class=\"fraction\"> <span class=\"fraction-num\">3<\/span> <span class=\"fraction-den\">2<\/span> <\/span>\n       <\/div>\n      <\/div>\n      <div class=\"example-card\">\n       <h3>\u03a0\u03b1\u03c1\u03ac\u03b4\u03b5\u03b9\u03b3\u03bc\u03b1 3<\/h3>\n       <div class=\"example-step\"><span class=\"fraction\"> <span class=\"fraction-num\">5<\/span> <span class=\"fraction-den\">6<\/span> <\/span> \u00f7 <span class=\"fraction\"> <span class=\"fraction-num\">2<\/span> <span class=\"fraction-den\">3<\/span> <\/span> = ?\n       <\/div>\n       <div class=\"example-step\"><strong>\u0392\u03ae\u03bc\u03b1 1:<\/strong> \u0392\u03c1\u03af\u03c3\u03ba\u03bf\u03c5\u03bc\u03b5 \u03c4\u03bf \u03b1\u03bd\u03c4\u03af\u03c3\u03c4\u03c1\u03bf\u03c6\u03bf \u03c4\u03bf\u03c5 <span class=\"fraction\"> <span class=\"fraction-num\">2<\/span> <span class=\"fraction-den\">3<\/span> <\/span> \u03c0\u03bf\u03c5 \u03b5\u03af\u03bd\u03b1\u03b9 <span class=\"fraction\"> <span class=\"fraction-num\">3<\/span> <span class=\"fraction-den\">2<\/span> <\/span>\n       <\/div>\n       <div class=\"example-step\"><strong>\u0392\u03ae\u03bc\u03b1 2:<\/strong> \u03a0\u03bf\u03bb\u03bb\u03b1\u03c0\u03bb\u03b1\u03c3\u03b9\u03ac\u03b6\u03bf\u03c5\u03bc\u03b5: <span class=\"fraction\"> <span class=\"fraction-num\">5<\/span> <span class=\"fraction-den\">6<\/span> <\/span> \u00d7 <span class=\"fraction\"> <span class=\"fraction-num\">3<\/span> <span class=\"fraction-den\">2<\/span> <\/span> = <span class=\"fraction\"> <span class=\"fraction-num\">15<\/span> <span class=\"fraction-den\">12<\/span> <\/span> = <span class=\"fraction\"> <span class=\"fraction-num\">5<\/span> <span class=\"fraction-den\">4<\/span> <\/span>\n       <\/div>\n      <\/div>\n     <\/div>\n    <\/section>\n    <section class=\"section\">\n     <h2 id=\"quiz-title\">\ud83c\udfaf \u039a\u03bf\u03c5\u03af\u03b6 &#8211; \u0394\u03bf\u03ba\u03af\u03bc\u03b1\u03c3\u03b5 \u03c4\u03b9\u03c2 \u03b3\u03bd\u03ce\u03c3\u03b5\u03b9\u03c2 \u03c3\u03bf\u03c5!<\/h2>\n     <div class=\"quiz-grid\" id=\"quiz-container\"><\/div>\n     <div class=\"score-display\" id=\"score-display\">\n      \u0392\u03b1\u03b8\u03bc\u03bf\u03bb\u03bf\u03b3\u03af\u03b1: 0\/6 \u2728\n     <\/div>\n    <\/section>\n   <\/div>\n  <\/div>\n  <script>\n        const defaultConfig = {\n            main_title: \"\u0394\u03b9\u03b1\u03af\u03c1\u03b5\u03c3\u03b7 \u039a\u03bb\u03b1\u03c3\u03bc\u03ac\u03c4\u03c9\u03bd\",\n            subtitle: \"\u039c\u03b1\u03b8\u03b1\u03af\u03bd\u03c9 \u03b5\u03cd\u03ba\u03bf\u03bb\u03b1 \u03ba\u03b1\u03b9 \u03b4\u03b9\u03b1\u03c3\u03ba\u03b5\u03b4\u03b1\u03c3\u03c4\u03b9\u03ba\u03ac! \ud83c\udf93\",\n            theory_title: \"\ud83d\udcda \u0398\u03b5\u03c9\u03c1\u03af\u03b1\",\n            examples_title: \"\ud83d\udca1 \u03a0\u03b1\u03c1\u03b1\u03b4\u03b5\u03af\u03b3\u03bc\u03b1\u03c4\u03b1\",\n            quiz_title: \"\ud83c\udfaf \u039a\u03bf\u03c5\u03af\u03b6 - \u0394\u03bf\u03ba\u03af\u03bc\u03b1\u03c3\u03b5 \u03c4\u03b9\u03c2 \u03b3\u03bd\u03ce\u03c3\u03b5\u03b9\u03c2 \u03c3\u03bf\u03c5!\",\n            background_color: \"#667eea\",\n            accent_color: \"#764ba2\",\n            card_color: \"#ffffff\",\n            text_color: \"#333333\",\n            button_color: \"#667eea\"\n        };\n\n        const quizQuestions = [\n            {\n                question: \"1\/2 \u00f7 1\/4 = ?\",\n                options: [\"1\/8\", \"2\", \"1\/2\", \"4\"],\n                correct: 1\n            },\n            {\n                question: \"3\/4 \u00f7 3\/8 = ?\",\n                options: [\"9\/32\", \"2\", \"1\/2\", \"3\"],\n                correct: 1\n            },\n            {\n                question: \"2\/3 \u00f7 1\/6 = ?\",\n                options: [\"2\/18\", \"4\", \"1\/3\", \"3\"],\n                correct: 1\n            },\n            {\n                question: \"5\/6 \u00f7 5\/12 = ?\",\n                options: [\"25\/72\", \"2\", \"5\/2\", \"1\"],\n                correct: 1\n            },\n            {\n                question: \"4\/5 \u00f7 2\/5 = ?\",\n                options: [\"8\/25\", \"2\", \"4\/10\", \"5\/2\"],\n                correct: 1\n            },\n            {\n                question: \"7\/8 \u00f7 1\/4 = ?\",\n                options: [\"7\/32\", \"7\/2\", \"4\", \"2\"],\n                correct: 1\n            }\n        ];\n\n        let score = 0;\n\n        function createQuizCards() {\n            const container = document.getElementById('quiz-container');\n            container.innerHTML = '';\n            \n            quizQuestions.forEach((quiz, index) => {\n                const card = document.createElement('div');\n                card.className = 'quiz-card';\n                \n                const question = document.createElement('div');\n                question.className = 'quiz-question';\n                question.textContent = quiz.question;\n                card.appendChild(question);\n                \n                const optionsDiv = document.createElement('div');\n                optionsDiv.className = 'quiz-options';\n                \n                quiz.options.forEach((option, optIndex) => {\n                    const optionBtn = document.createElement('div');\n                    optionBtn.className = 'quiz-option';\n                    optionBtn.textContent = option;\n                    optionBtn.onclick = () => checkAnswer(index, optIndex, optionBtn, optionsDiv);\n                    optionsDiv.appendChild(optionBtn);\n                });\n                \n                card.appendChild(optionsDiv);\n                \n                const feedback = document.createElement('div');\n                feedback.className = 'feedback';\n                feedback.id = `feedback-${index}`;\n                card.appendChild(feedback);\n                \n                container.appendChild(card);\n            });\n        }\n\n        function checkAnswer(questionIndex, selectedIndex, button, optionsDiv) {\n            const question = quizQuestions[questionIndex];\n            const feedback = document.getElementById(`feedback-${questionIndex}`);\n            const allOptions = optionsDiv.querySelectorAll('.quiz-option');\n            \n            allOptions.forEach(opt => opt.classList.add('disabled'));\n            \n            if (selectedIndex === question.correct) {\n                button.classList.add('correct');\n                feedback.className = 'feedback correct show';\n                feedback.textContent = '\u2713 \u039c\u03c0\u03c1\u03ac\u03b2\u03bf! \u03a3\u03c9\u03c3\u03c4\u03ae \u03b1\u03c0\u03ac\u03bd\u03c4\u03b7\u03c3\u03b7! \ud83c\udf89';\n                score++;\n            } else {\n                button.classList.add('incorrect');\n                allOptions[question.correct].classList.add('correct');\n                feedback.className = 'feedback incorrect show';\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: ' + question.options[question.correct];\n            }\n            \n            updateScore();\n        }\n\n        function updateScore() {\n            const scoreDisplay = document.getElementById('score-display');\n            scoreDisplay.textContent = `\u0392\u03b1\u03b8\u03bc\u03bf\u03bb\u03bf\u03b3\u03af\u03b1: ${score}\/${quizQuestions.length} \u2728`;\n        }\n\n        async function onConfigChange(config) {\n            document.getElementById('main-title').textContent = config.main_title || defaultConfig.main_title;\n            document.getElementById('subtitle').textContent = config.subtitle || defaultConfig.subtitle;\n            document.getElementById('theory-title').textContent = config.theory_title || defaultConfig.theory_title;\n            document.getElementById('examples-title').textContent = config.examples_title || defaultConfig.examples_title;\n            document.getElementById('quiz-title').textContent = config.quiz_title || defaultConfig.quiz_title;\n        }\n\n        if (window.elementSdk) {\n            window.elementSdk.init({\n                defaultConfig: defaultConfig,\n                onConfigChange: onConfigChange,\n                mapToCapabilities: (config) => ({\n                    recolorables: [],\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                    [\"theory_title\", config.theory_title || defaultConfig.theory_title],\n                    [\"examples_title\", config.examples_title || defaultConfig.examples_title],\n                    [\"quiz_title\", config.quiz_title || defaultConfig.quiz_title]\n                ])\n            });\n        }\n\n        createQuizCards();\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:'9b584cef263e6f67',t:'MTc2NzAwMDg1NS4wMDAwMDA='};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","protected":false},"excerpt":{"rendered":"<p>\u03ba\u03bb\u03b9\u03ba \u03c3\u03c4\u03b9\u03c2 \u03c4\u03c1\u03b5\u03b9\u03c2 \u03c4\u03b5\u03bb\u03b5\u03af\u03b5\u03c2 \u03ba\u03b1\u03b9 \u03bc\u03b5\u03c4\u03ac single Page Mode \u0393\u03bb\u03c9\u03c3\u03c3\u03ac\u03c1\u03b9 \u0394\u03b9\u03b1\u03af\u03c1\u03b5\u03c3\u03b7\u03c2 \u039a\u03bb\u03b1\u03c3\u03bc\u03ac\u03c4\u03c9\u03bd . \u0394\u03b9\u03b1\u03af\u03c1\u03b5\u03c3\u03b7 \u039a\u03bb\u03b1\u03c3\u03bc\u03ac\u03c4\u03c9\u03bd \u0394\u03b9\u03b1\u03af\u03c1\u03b5\u03c3\u03b7 \u039a\u03bb\u03b1\u03c3\u03bc\u03ac\u03c4\u03c9\u03bd \u039c\u03b1\u03b8\u03b1\u03af\u03bd\u03c9 \u03b5\u03cd\u03ba\u03bf\u03bb\u03b1 \u03ba\u03b1\u03b9 \u03b4\u03b9\u03b1\u03c3\u03ba\u03b5\u03b4\u03b1\u03c3\u03c4\u03b9\u03ba\u03ac! \ud83c\udf93 \ud83d\udcda \u0398\u03b5\u03c9\u03c1\u03af\u03b1 \u03a0\u03ce\u03c2 \u03b4\u03b9\u03b1\u03b9\u03c1\u03bf\u03cd\u03bc\u03b5 \u03ba\u03bb\u03ac\u03c3\u03bc\u03b1\u03c4\u03b1; \u0393\u03b9\u03b1 \u03bd\u03b1 \u03b4\u03b9\u03b1\u03b9\u03c1\u03ad\u03c3\u03bf\u03c5\u03bc\u03b5 \u03b4\u03cd\u03bf \u03ba\u03bb\u03ac\u03c3\u03bc\u03b1\u03c4\u03b1, \u03b1\u03ba\u03bf\u03bb\u03bf\u03c5\u03b8\u03bf\u03cd\u03bc\u03b5 \u03c4\u03b1 \u03b5\u03be\u03ae\u03c2 \u03b2\u03ae\u03bc\u03b1\u03c4\u03b1: \u039a\u03b1\u03bd\u03cc\u03bd\u03b1\u03c2: \u03a0\u03bf\u03bb\u03bb\u03b1\u03c0\u03bb\u03b1\u03c3\u03b9\u03ac\u03b6\u03bf\u03c5\u03bc\u03b5 \u03c4\u03bf \u03c0\u03c1\u03ce\u03c4\u03bf \u03ba\u03bb\u03ac\u03c3\u03bc\u03b1 \u03bc\u03b5 \u03c4\u03bf \u03b1\u03bd\u03c4\u03af\u03c3\u03c4\u03c1\u03bf\u03c6\u03bf \u03c4\u03bf\u03c5 \u03b4\u03b5\u03cd\u03c4\u03b5\u03c1\u03bf\u03c5 \u03ba\u03bb\u03ac\u03c3\u03bc\u03b1\u03c4\u03bf\u03c2. \u03a4\u03bf \u03b1\u03bd\u03c4\u03af\u03c3\u03c4\u03c1\u03bf\u03c6\u03bf \u03b5\u03bd\u03cc\u03c2 \u03ba\u03bb\u03ac\u03c3\u03bc\u03b1\u03c4\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\u03bd \u03b1\u03c1\u03b9\u03b8\u03bc\u03b7\u03c4\u03ae &hellip; <a href=\"https:\/\/prokopidis.sites.sch.gr\/?p=4186\" 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\"> &#8220;\u0394\u03b9\u03b1\u03af\u03c1\u03b5\u03c3\u03b7 \u03ba\u03bb\u03b1\u03c3\u03bc\u03ac\u03c4\u03c9\u03bd&#8221;<\/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-4186","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\/4186","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=4186"}],"version-history":[{"count":10,"href":"https:\/\/prokopidis.sites.sch.gr\/index.php?rest_route=\/wp\/v2\/posts\/4186\/revisions"}],"predecessor-version":[{"id":6033,"href":"https:\/\/prokopidis.sites.sch.gr\/index.php?rest_route=\/wp\/v2\/posts\/4186\/revisions\/6033"}],"wp:attachment":[{"href":"https:\/\/prokopidis.sites.sch.gr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=4186"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/prokopidis.sites.sch.gr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=4186"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/prokopidis.sites.sch.gr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=4186"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}