{"id":4682,"date":"2024-07-29T08:33:36","date_gmt":"2024-07-29T08:33:36","guid":{"rendered":"https:\/\/prokopidis.sites.sch.gr\/?p=4682"},"modified":"2026-01-06T09:46:09","modified_gmt":"2026-01-06T09:46:09","slug":"%ce%bf-%ce%bc%ce%b1%ce%b3%ce%b9%ce%ba%cf%8c%cf%82-%ce%ba%cf%8c%cf%83%ce%bc%ce%bf%cf%82-%cf%84%cf%89%ce%bd-%ce%b2%ce%b9%ce%b2%ce%bb%ce%af%cf%89%ce%bd","status":"publish","type":"post","link":"https:\/\/prokopidis.sites.sch.gr\/?p=4682","title":{"rendered":"\u039f \u03bc\u03b1\u03b3\u03b9\u03ba\u03cc\u03c2 \u03ba\u03cc\u03c3\u03bc\u03bf\u03c2 \u03c4\u03c9\u03bd \u03b2\u03b9\u03b2\u03bb\u03af\u03c9\u03bd"},"content":{"rendered":"<div class=\"wp-block-image\">\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6a40383459a09&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6a40383459a09\" class=\"aligncenter size-large wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"570\" 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-06-111348-1024x570.png\" alt=\"\" class=\"wp-image-5935\" 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-06-111348-1024x570.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-06-111348-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-06-111348-768x428.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-06-111348.png 1090w\" 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 \u03c3\u03c4\u03b7\u03bd \u03b5\u03b9\u03ba\u03cc\u03bd\u03b1 \u03b3\u03b9\u03b1 \u03bc\u03b5\u03b3\u03ad\u03b8\u03c5\u03bd\u03c3\u03b7<\/figcaption><\/figure>\n<\/div>\n\n\n<div class=\"_df_book df-lite\" id=\"df_5937\"  _slug=\"%cf%83%cf%8d%ce%bd%ce%b4%ce%b5%cf%83%ce%b7-%cf%80%cf%81%ce%bf%cf%84%ce%ac%cf%83%ce%b5%cf%89%ce%bd-%cf%85%cf%80%ce%bf%cf%84%ce%b1%ce%ba%cf%84%ce%b9%ce%ba%ce%ae-%cf%80%ce%b1%cf%81%ce%b1%cf%84%ce%b1\" data-title=\"%cf%83%cf%8d%ce%bd%ce%b4%ce%b5%cf%83%ce%b7-%cf%80%cf%81%ce%bf%cf%84%ce%ac%cf%83%ce%b5%cf%89%ce%bd-%cf%85%cf%80%ce%bf%cf%84%ce%b1%ce%ba%cf%84%ce%b9%ce%ba%ce%ae-%cf%80%ce%b1%cf%81%ce%b1%cf%84\" wpoptions=\"true\" thumbtype=\"\" ><\/div><script class=\"df-shortcode-script\" nowprocket type=\"application\/javascript\">window.option_df_5937 = {\"outline\":[],\"autoEnableOutline\":\"false\",\"autoEnableThumbnail\":\"false\",\"overwritePDFOutline\":\"false\",\"enableDownload\":\"false\",\"direction\":\"1\",\"pageSize\":\"1\",\"source\":\"https:\\\/\\\/prokopidis.sites.sch.gr\\\/wp-content\\\/uploads\\\/2026\\\/01\\\/\\u0397_\\u0391\\u03c1\\u03c7\\u03b9\\u03c4\\u03b5\\u03ba\\u03c4\\u03bf\\u03bd\\u03b9\\u03ba\\u03ae_\\u03c4\\u03b7\\u03c2_\\u0393\\u03bb\\u03ce\\u03c3\\u03c3\\u03b1\\u03c2.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\n<p>&#8211;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"193\" height=\"16\" src=\"https:\/\/prokopidis.sites.sch.gr\/wp-content\/uploads\/2024\/06\/\u03a3\u03c4\u03b9\u03b3\u03bc\u03b9\u03cc\u03c4\u03c5\u03c0\u03bf-\u03bf\u03b8\u03cc\u03bd\u03b7\u03c2-2025-12-30-203202.png\" alt=\"\" class=\"wp-image-5725\"\/><\/figure>\n<\/div>\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<!doctype html>\n<html lang=\"el\">\n <head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>\u0393\u03bb\u03c9\u03c3\u03c3\u03ac\u03c1\u03b9 \u03a3\u03cd\u03bd\u03b4\u03b5\u03c3\u03b7\u03c2 \u03a0\u03c1\u03bf\u03c4\u03ac\u03c3\u03b5\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', 'Segoe UI', Tahoma, sans-serif;\n            overflow: auto;\n        }\n\n        html, body {\n            height: 100%;\n        }\n\n        .main-wrapper {\n            min-height: 100%;\n            width: 100%;\n            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n            padding: 40px 20px;\n        }\n\n        .container {\n            max-width: 900px;\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        .main-title {\n            color: #ffffff;\n            font-size: 48px;\n            font-weight: bold;\n            text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.3);\n            margin: 0 0 15px 0;\n        }\n\n        .subtitle {\n            color: #f0e6ff;\n            font-size: 20px;\n            margin: 0;\n        }\n\n        .cards-grid {\n            display: grid;\n            grid-template-columns: repeat(2, 1fr);\n            gap: 25px;\n            margin-bottom: 30px;\n        }\n\n        .card {\n            background: white;\n            border-radius: 20px;\n            padding: 30px;\n            cursor: pointer;\n            transition: all 0.3s ease;\n            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);\n            position: relative;\n            overflow: hidden;\n        }\n\n        .card:hover {\n            transform: translateY(-5px);\n            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);\n        }\n\n        .card.flipped .card-front {\n            transform: rotateY(180deg);\n        }\n\n        .card.flipped .card-back {\n            transform: rotateY(0deg);\n        }\n\n        .card-front, .card-back {\n            transition: transform 0.6s;\n            backface-visibility: hidden;\n        }\n\n        .card-back {\n            position: absolute;\n            top: 0;\n            left: 0;\n            right: 0;\n            bottom: 0;\n            padding: 30px;\n            background: white;\n            border-radius: 20px;\n            transform: rotateY(-180deg);\n            display: flex;\n            flex-direction: column;\n            justify-content: center;\n        }\n\n        .card-title {\n            font-size: 28px;\n            font-weight: bold;\n            margin-bottom: 15px;\n            display: flex;\n            align-items: center;\n            gap: 10px;\n        }\n\n        .card-emoji {\n            font-size: 36px;\n        }\n\n        .card-example {\n            color: #666;\n            font-size: 16px;\n            font-style: italic;\n            margin-top: 10px;\n        }\n\n        .card-definition {\n            font-size: 18px;\n            color: #333;\n            line-height: 1.6;\n        }\n\n        .card-examples-list {\n            margin-top: 15px;\n            font-size: 16px;\n            color: #555;\n        }\n\n        .card-examples-list li {\n            margin: 8px 0;\n        }\n\n        .card.type-parataktiki {\n            border-top: 6px solid #ff6b6b;\n        }\n\n        .card.type-parataktiki .card-title {\n            color: #ff6b6b;\n        }\n\n        .card.type-ypotaktiki {\n            border-top: 6px solid #4ecdc4;\n        }\n\n        .card.type-ypotaktiki .card-title {\n            color: #4ecdc4;\n        }\n\n        .card.type-asyndeto {\n            border-top: 6px solid #ffd93d;\n        }\n\n        .card.type-asyndeto .card-title {\n            color: #ffd93d;\n        }\n\n        .flip-hint {\n            text-align: center;\n            color: #f0e6ff;\n            font-size: 14px;\n            margin-top: 10px;\n            animation: pulse 2s infinite;\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 pulse {\n            0%, 100% {\n                opacity: 1;\n            }\n            50% {\n                opacity: 0.6;\n            }\n        }\n\n        @media (max-width: 768px) {\n            .cards-grid {\n                grid-template-columns: 1fr;\n            }\n\n            .main-title {\n                font-size: 36px;\n            }\n\n            .card-title {\n                font-size: 24px;\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=\"main-wrapper\">\n   <div class=\"container\">\n    <div class=\"header\">\n     <h1 class=\"main-title\" id=\"mainTitle\">\u0393\u03bb\u03c9\u03c3\u03c3\u03ac\u03c1\u03b9 \u03a3\u03cd\u03bd\u03b4\u03b5\u03c3\u03b7\u03c2 \u03a0\u03c1\u03bf\u03c4\u03ac\u03c3\u03b5\u03c9\u03bd<\/h1>\n     <p class=\"subtitle\" id=\"subtitle\">\u03a0\u03ac\u03c4\u03b7\u03c3\u03b5 \u03c4\u03b9\u03c2 \u03ba\u03ac\u03c1\u03c4\u03b5\u03c2 \u03b3\u03b9\u03b1 \u03bd\u03b1 \u03b4\u03b5\u03b9\u03c2 \u03c4\u03bf\u03c5\u03c2 \u03bf\u03c1\u03b9\u03c3\u03bc\u03bf\u03cd\u03c2! \ud83c\udfaf<\/p>\n    <\/div>\n    <div class=\"cards-grid\">\n     <div class=\"card type-parataktiki\" onclick=\"flipCard(this)\">\n      <div class=\"card-front\">\n       <div class=\"card-title\"><span class=\"card-emoji\">\ud83d\udd17<\/span> \u03a0\u03b1\u03c1\u03b1\u03c4\u03b1\u03ba\u03c4\u03b9\u03ba\u03ae \u03a3\u03cd\u03bd\u03b4\u03b5\u03c3\u03b7\n       <\/div>\n       <p class=\"card-example\">\u00ab\u03a0\u03ae\u03b3\u03b1 \u03c3\u03c4\u03bf \u03c3\u03c7\u03bf\u03bb\u03b5\u03af\u03bf \u03ba\u03b1\u03b9 \u03c3\u03c5\u03bd\u03ac\u03bd\u03c4\u03b7\u03c3\u03b1 \u03c4\u03b7 \u03c6\u03af\u03bb\u03b7 \u03bc\u03bf\u03c5.\u00bb<\/p>\n       <p class=\"flip-hint\">\ud83d\udc46 \u03a0\u03ac\u03c4\u03b7\u03c3\u03b5 \u03b3\u03b9\u03b1 \u03c0\u03b5\u03c1\u03b9\u03c3\u03c3\u03cc\u03c4\u03b5\u03c1\u03b1<\/p>\n      <\/div>\n      <div class=\"card-back\">\n       <div class=\"card-definition\"><strong>\u03a4\u03b9 \u03b5\u03af\u03bd\u03b1\u03b9:<\/strong> \u0394\u03cd\u03bf \u03b1\u03bd\u03b5\u03be\u03ac\u03c1\u03c4\u03b7\u03c4\u03b5\u03c2 \u03c0\u03c1\u03bf\u03c4\u03ac\u03c3\u03b5\u03b9\u03c2 \u03c0\u03bf\u03c5 \u03c3\u03c5\u03bd\u03b4\u03ad\u03bf\u03bd\u03c4\u03b1\u03b9 \u03bc\u03b5 \u03c3\u03cd\u03bd\u03b4\u03b5\u03c3\u03bc\u03bf.\n       <\/div>\n       <ul class=\"card-examples-list\">\n        <li>\u03a3\u03cd\u03bd\u03b4\u03b5\u03c3\u03bc\u03bf\u03b9: <strong>\u03ba\u03b1\u03b9, \u03ae, \u03b1\u03bb\u03bb\u03ac, \u03cc\u03bc\u03c9\u03c2, \u03bc\u03b1<\/strong><\/li>\n        <li>\u039f\u03b9 \u03c0\u03c1\u03bf\u03c4\u03ac\u03c3\u03b5\u03b9\u03c2 \u03b5\u03af\u03bd\u03b1\u03b9 \u03b9\u03c3\u03cc\u03c4\u03b9\u03bc\u03b5\u03c2<\/li>\n        <li>\u039c\u03c0\u03bf\u03c1\u03bf\u03cd\u03bd \u03bd\u03b1 \u03c3\u03c4\u03b1\u03b8\u03bf\u03cd\u03bd \u03bc\u03cc\u03bd\u03b5\u03c2 \u03c4\u03bf\u03c5\u03c2<\/li>\n       <\/ul>\n      <\/div>\n     <\/div>\n     <div class=\"card type-ypotaktiki\" onclick=\"flipCard(this)\">\n      <div class=\"card-front\">\n       <div class=\"card-title\"><span class=\"card-emoji\">\ud83c\udfaf<\/span> \u03a5\u03c0\u03bf\u03c4\u03b1\u03ba\u03c4\u03b9\u03ba\u03ae \u03a3\u03cd\u03bd\u03b4\u03b5\u03c3\u03b7\n       <\/div>\n       <p class=\"card-example\">\u00ab\u0394\u03b9\u03ac\u03b2\u03b1\u03c3\u03b1 \u03c0\u03bf\u03bb\u03cd, \u03b3\u03b9\u03b1\u03c4\u03af \u03ae\u03b8\u03b5\u03bb\u03b1 \u03bd\u03b1 \u03c0\u03ac\u03c1\u03c9 \u03ac\u03c1\u03b9\u03c3\u03c4\u03b1.\u00bb<\/p>\n       <p class=\"flip-hint\">\ud83d\udc46 \u03a0\u03ac\u03c4\u03b7\u03c3\u03b5 \u03b3\u03b9\u03b1 \u03c0\u03b5\u03c1\u03b9\u03c3\u03c3\u03cc\u03c4\u03b5\u03c1\u03b1<\/p>\n      <\/div>\n      <div class=\"card-back\">\n       <div class=\"card-definition\"><strong>\u03a4\u03b9 \u03b5\u03af\u03bd\u03b1\u03b9:<\/strong> \u039c\u03b9\u03b1 \u03ba\u03cd\u03c1\u03b9\u03b1 \u03c0\u03c1\u03cc\u03c4\u03b1\u03c3\u03b7 \u03ba\u03b1\u03b9 \u03bc\u03b9\u03b1 \u03b4\u03b5\u03c5\u03c4\u03b5\u03c1\u03b5\u03cd\u03bf\u03c5\u03c3\u03b1 \u03c0\u03bf\u03c5 \u03b5\u03be\u03b1\u03c1\u03c4\u03ac\u03c4\u03b1\u03b9 \u03b1\u03c0\u03cc \u03b1\u03c5\u03c4\u03ae\u03bd.\n       <\/div>\n       <ul class=\"card-examples-list\">\n        <li>\u03a3\u03cd\u03bd\u03b4\u03b5\u03c3\u03bc\u03bf\u03b9: <strong>\u03b3\u03b9\u03b1\u03c4\u03af, \u03cc\u03c4\u03b1\u03bd, \u03b1\u03bd, \u03c0\u03bf\u03c5, \u03b3\u03b9\u03b1 \u03bd\u03b1<\/strong><\/li>\n        <li>\u0397 \u03b4\u03b5\u03c5\u03c4\u03b5\u03c1\u03b5\u03cd\u03bf\u03c5\u03c3\u03b1 \u03b5\u03be\u03b1\u03c1\u03c4\u03ac\u03c4\u03b1\u03b9 \u03b1\u03c0\u03cc \u03c4\u03b7\u03bd \u03ba\u03cd\u03c1\u03b9\u03b1<\/li>\n        <li>\u0394\u03b5\u03af\u03c7\u03bd\u03b5\u03b9 \u03b1\u03b9\u03c4\u03af\u03b1, \u03c7\u03c1\u03cc\u03bd\u03bf, \u03c3\u03ba\u03bf\u03c0\u03cc, \u03ba.\u03ac.<\/li>\n       <\/ul>\n      <\/div>\n     <\/div>\n     <div class=\"card type-asyndeto\" onclick=\"flipCard(this)\">\n      <div class=\"card-front\">\n       <div class=\"card-title\"><span class=\"card-emoji\">\u2728<\/span> \u0391\u03c3\u03cd\u03bd\u03b4\u03b5\u03c4\u03bf \u03a3\u03c7\u03ae\u03bc\u03b1\n       <\/div>\n       <p class=\"card-example\">\u00ab\u0388\u03c4\u03c1\u03b5\u03be\u03b1, \u03ad\u03c0\u03b5\u03c3\u03b1, \u03c3\u03b7\u03ba\u03ce\u03b8\u03b7\u03ba\u03b1, \u03c3\u03c5\u03bd\u03ad\u03c7\u03b9\u03c3\u03b1.\u00bb<\/p>\n       <p class=\"flip-hint\">\ud83d\udc46 \u03a0\u03ac\u03c4\u03b7\u03c3\u03b5 \u03b3\u03b9\u03b1 \u03c0\u03b5\u03c1\u03b9\u03c3\u03c3\u03cc\u03c4\u03b5\u03c1\u03b1<\/p>\n      <\/div>\n      <div class=\"card-back\">\n       <div class=\"card-definition\"><strong>\u03a4\u03b9 \u03b5\u03af\u03bd\u03b1\u03b9:<\/strong> \u03a0\u03c1\u03bf\u03c4\u03ac\u03c3\u03b5\u03b9\u03c2 \u03c0\u03bf\u03c5 \u03c3\u03c5\u03bd\u03b4\u03ad\u03bf\u03bd\u03c4\u03b1\u03b9 \u03c7\u03c9\u03c1\u03af\u03c2 \u03c3\u03cd\u03bd\u03b4\u03b5\u03c3\u03bc\u03bf, \u03bc\u03cc\u03bd\u03bf \u03bc\u03b5 \u03ba\u03cc\u03bc\u03bc\u03b1\u03c4\u03b1.\n       <\/div>\n       <ul class=\"card-examples-list\">\n        <li>\u0394\u03b5\u03bd \u03c5\u03c0\u03ac\u03c1\u03c7\u03b5\u03b9 \u03c3\u03cd\u03bd\u03b4\u03b5\u03c3\u03bc\u03bf\u03c2<\/li>\n        <li>\u03a7\u03c1\u03b7\u03c3\u03b9\u03bc\u03bf\u03c0\u03bf\u03b9\u03bf\u03cd\u03bc\u03b5 \u03ba\u03cc\u03bc\u03bc\u03b1\u03c4\u03b1<\/li>\n        <li>\u0394\u03af\u03bd\u03b5\u03b9 \u03c1\u03c5\u03b8\u03bc\u03cc \u03ba\u03b1\u03b9 \u03ad\u03bc\u03c6\u03b1\u03c3\u03b7<\/li>\n       <\/ul>\n      <\/div>\n     <\/div>\n     <div class=\"card type-parataktiki\" onclick=\"flipCard(this)\">\n      <div class=\"card-front\">\n       <div class=\"card-title\"><span class=\"card-emoji\">\ud83d\udca1<\/span> \u03a0\u03b1\u03c1\u03b1\u03b4\u03b5\u03af\u03b3\u03bc\u03b1\u03c4\u03b1 \u03a0\u03b1\u03c1\u03b1\u03c4\u03b1\u03ba\u03c4\u03b9\u03ba\u03ae\u03c2\n       <\/div>\n       <p class=\"card-example\">\u00ab\u0397 \u03bc\u03b1\u03bc\u03ac \u03bc\u03b1\u03b3\u03b5\u03b9\u03c1\u03b5\u03cd\u03b5\u03b9 \u03ba\u03b1\u03b9 \u03bf \u03bc\u03c0\u03b1\u03bc\u03c0\u03ac\u03c2 \u03b4\u03bf\u03c5\u03bb\u03b5\u03cd\u03b5\u03b9.\u00bb<\/p>\n       <p class=\"flip-hint\">\ud83d\udc46 \u03a0\u03ac\u03c4\u03b7\u03c3\u03b5 \u03b3\u03b9\u03b1 \u03c0\u03b5\u03c1\u03b9\u03c3\u03c3\u03cc\u03c4\u03b5\u03c1\u03b1<\/p>\n      <\/div>\n      <div class=\"card-back\">\n       <div class=\"card-definition\"><strong>\u03a0\u03b5\u03c1\u03b9\u03c3\u03c3\u03cc\u03c4\u03b5\u03c1\u03b1 \u03c0\u03b1\u03c1\u03b1\u03b4\u03b5\u03af\u03b3\u03bc\u03b1\u03c4\u03b1:<\/strong>\n       <\/div>\n       <ul class=\"card-examples-list\">\n        <li>\u00ab\u0398\u03ad\u03bb\u03c9 \u03c0\u03b1\u03b3\u03c9\u03c4\u03cc <strong>\u03ae<\/strong> \u03c3\u03bf\u03ba\u03bf\u03bb\u03ac\u03c4\u03b1;\u00bb<\/li>\n        <li>\u00ab\u03a0\u03c1\u03bf\u03c3\u03c0\u03ac\u03b8\u03b7\u03c3\u03b1 <strong>\u03b1\u03bb\u03bb\u03ac<\/strong> \u03b4\u03b5\u03bd \u03c4\u03b1 \u03ba\u03b1\u03c4\u03ac\u03c6\u03b5\u03c1\u03b1.\u00bb<\/li>\n        <li>\u00ab\u03a6\u03ce\u03bd\u03b1\u03be\u03b5 <strong>\u03cc\u03bc\u03c9\u03c2<\/strong> \u03ba\u03b1\u03bd\u03b5\u03af\u03c2 \u03b4\u03b5\u03bd \u03ac\u03ba\u03bf\u03c5\u03c3\u03b5.\u00bb<\/li>\n       <\/ul>\n      <\/div>\n     <\/div>\n     <div class=\"card type-ypotaktiki\" onclick=\"flipCard(this)\">\n      <div class=\"card-front\">\n       <div class=\"card-title\"><span class=\"card-emoji\">\ud83c\udf1f<\/span> \u03a0\u03b1\u03c1\u03b1\u03b4\u03b5\u03af\u03b3\u03bc\u03b1\u03c4\u03b1 \u03a5\u03c0\u03bf\u03c4\u03b1\u03ba\u03c4\u03b9\u03ba\u03ae\u03c2\n       <\/div>\n       <p class=\"card-example\">\u00ab\u038c\u03c4\u03b1\u03bd \u03c4\u03b5\u03bb\u03b5\u03af\u03c9\u03c3\u03b1, \u03c0\u03ae\u03b3\u03b1 \u03bd\u03b1 \u03c0\u03b1\u03af\u03be\u03c9.\u00bb<\/p>\n       <p class=\"flip-hint\">\ud83d\udc46 \u03a0\u03ac\u03c4\u03b7\u03c3\u03b5 \u03b3\u03b9\u03b1 \u03c0\u03b5\u03c1\u03b9\u03c3\u03c3\u03cc\u03c4\u03b5\u03c1\u03b1<\/p>\n      <\/div>\n      <div class=\"card-back\">\n       <div class=\"card-definition\"><strong>\u03a0\u03b5\u03c1\u03b9\u03c3\u03c3\u03cc\u03c4\u03b5\u03c1\u03b1 \u03c0\u03b1\u03c1\u03b1\u03b4\u03b5\u03af\u03b3\u03bc\u03b1\u03c4\u03b1:<\/strong>\n       <\/div>\n       <ul class=\"card-examples-list\">\n        <li>\u00ab<strong>\u0391\u03bd<\/strong> \u03b2\u03c1\u03ad\u03be\u03b5\u03b9, \u03b8\u03b1 \u03bc\u03b5\u03af\u03bd\u03c9 \u03c3\u03c0\u03af\u03c4\u03b9.\u00bb<\/li>\n        <li>\u00ab\u0394\u03b9\u03ac\u03b2\u03b1\u03c3\u03b1 \u03c4\u03bf \u03b2\u03b9\u03b2\u03bb\u03af\u03bf <strong>\u03c0\u03bf\u03c5<\/strong> \u03bc\u03bf\u03c5 \u03ad\u03b4\u03c9\u03c3\u03b5\u03c2.\u00bb<\/li>\n        <li>\u00ab\u0389\u03c1\u03b8\u03b1 \u03bd\u03c9\u03c1\u03af\u03c2 <strong>\u03b3\u03b9\u03b1 \u03bd\u03b1<\/strong> \u03c3\u03b5 \u03b4\u03c9.\u00bb<\/li>\n       <\/ul>\n      <\/div>\n     <\/div>\n     <div class=\"card type-asyndeto\" onclick=\"flipCard(this)\">\n      <div class=\"card-front\">\n       <div class=\"card-title\"><span class=\"card-emoji\">\ud83d\ude80<\/span> \u03a0\u03b1\u03c1\u03b1\u03b4\u03b5\u03af\u03b3\u03bc\u03b1\u03c4\u03b1 \u0391\u03c3\u03cd\u03bd\u03b4\u03b5\u03c4\u03bf\u03c5\n       <\/div>\n       <p class=\"card-example\">\u00ab\u03a7\u03b1\u03bc\u03bf\u03b3\u03ad\u03bb\u03b1\u03c3\u03b1, \u03c7\u03b5\u03b9\u03c1\u03bf\u03ba\u03c1\u03cc\u03c4\u03b7\u03c3\u03b1, \u03c0\u03b1\u03bd\u03b7\u03b3\u03cd\u03c1\u03b9\u03c3\u03b1.\u00bb<\/p>\n       <p class=\"flip-hint\">\ud83d\udc46 \u03a0\u03ac\u03c4\u03b7\u03c3\u03b5 \u03b3\u03b9\u03b1 \u03c0\u03b5\u03c1\u03b9\u03c3\u03c3\u03cc\u03c4\u03b5\u03c1\u03b1<\/p>\n      <\/div>\n      <div class=\"card-back\">\n       <div class=\"card-definition\"><strong>\u03a0\u03b5\u03c1\u03b9\u03c3\u03c3\u03cc\u03c4\u03b5\u03c1\u03b1 \u03c0\u03b1\u03c1\u03b1\u03b4\u03b5\u03af\u03b3\u03bc\u03b1\u03c4\u03b1:<\/strong>\n       <\/div>\n       <ul class=\"card-examples-list\">\n        <li>\u00ab\u0389\u03c1\u03b8\u03b1, \u03b5\u03af\u03b4\u03b1, \u03bd\u03af\u03ba\u03b7\u03c3\u03b1.\u00bb (\u039a\u03b1\u03af\u03c3\u03b1\u03c1\u03b1\u03c2)<\/li>\n        <li>\u00ab\u03a3\u03b7\u03ba\u03ce\u03b8\u03b7\u03ba\u03b1, \u03bd\u03c4\u03cd\u03b8\u03b7\u03ba\u03b1, \u03ad\u03c6\u03c5\u03b3\u03b1.\u00bb<\/li>\n        <li>\u00ab\u0393\u03ad\u03bb\u03b1\u03c3\u03b1, \u03ad\u03ba\u03bb\u03b1\u03c8\u03b1, \u03b8\u03cd\u03bc\u03c9\u03c3\u03b1.\u00bb<\/li>\n       <\/ul>\n      <\/div>\n     <\/div>\n    <\/div>\n   <\/div>\n  <\/div>\n  <script>\n        const defaultConfig = {\n            main_title: \"\u0393\u03bb\u03c9\u03c3\u03c3\u03ac\u03c1\u03b9 \u03a3\u03cd\u03bd\u03b4\u03b5\u03c3\u03b7\u03c2 \u03a0\u03c1\u03bf\u03c4\u03ac\u03c3\u03b5\u03c9\u03bd\",\n            subtitle: \"\u03a0\u03ac\u03c4\u03b7\u03c3\u03b5 \u03c4\u03b9\u03c2 \u03ba\u03ac\u03c1\u03c4\u03b5\u03c2 \u03b3\u03b9\u03b1 \u03bd\u03b1 \u03b4\u03b5\u03b9\u03c2 \u03c4\u03bf\u03c5\u03c2 \u03bf\u03c1\u03b9\u03c3\u03bc\u03bf\u03cd\u03c2! \ud83c\udfaf\",\n            background_color: \"#667eea\",\n            card_background: \"#ffffff\",\n            text_color: \"#333333\"\n        };\n\n        function flipCard(card) {\n            card.classList.toggle('flipped');\n        }\n\n        async function onConfigChange(config) {\n            const mainTitle = document.getElementById('mainTitle');\n            const subtitle = document.getElementById('subtitle');\n            \n            if (mainTitle) {\n                mainTitle.textContent = config.main_title || defaultConfig.main_title;\n            }\n            \n            if (subtitle) {\n                subtitle.textContent = config.subtitle || defaultConfig.subtitle;\n            }\n        }\n\n        if (window.elementSdk) {\n            window.elementSdk.init({\n                defaultConfig,\n                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                ])\n            });\n        }\n    <\/script>\n <script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML=\"window.__CF$cv$params={r:'9b5ad3f715486f67',t:'MTc2NzAyNzM1Ny4wMDAwMDA='};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<!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>\u03a3\u03cd\u03bd\u03b4\u03b5\u03c3\u03b7 \u03a0\u03c1\u03bf\u03c4\u03ac\u03c3\u03b5\u03c9\u03bd &#8211; \u0394\u03b9\u03b1\u03b4\u03c1\u03b1\u03c3\u03c4\u03b9\u03ba\u03ae \u0386\u03c3\u03ba\u03b7\u03c3\u03b7<\/title>\n  <script src=\"\/_sdk\/element_sdk.js\"><\/script>\n  <style>\n        body {\n            box-sizing: border-box;\n        }\n        \n        * {\n            margin: 0;\n            padding: 0;\n            box-sizing: border-box;\n        }\n\n        html, body {\n            height: 100%;\n            width: 100%;\n        }\n\n        body {\n            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n            overflow-y: auto;\n        }\n\n        .container {\n            width: 100%;\n            min-height: 100%;\n            padding: 40px 20px;\n        }\n\n        .header {\n            text-align: center;\n            margin-bottom: 40px;\n        }\n\n        .main-title {\n            font-size: 42px;\n            color: #003366;\n            margin-bottom: 10px;\n            text-shadow: 2px 2px 4px rgba(0,0,0,0.1);\n        }\n\n        .subtitle {\n            font-size: 24px;\n            color: #003366;\n            font-weight: 300;\n        }\n\n        .cards-grid {\n            display: grid;\n            grid-template-columns: repeat(2, 1fr);\n            gap: 30px;\n            max-width: 1200px;\n            margin: 0 auto;\n        }\n\n        .card {\n            background: #ffffff;\n            border-radius: 20px;\n            padding: 30px;\n            box-shadow: 0 10px 30px rgba(0,0,0,0.2);\n            cursor: pointer;\n            transition: all 0.3s ease;\n            min-height: 400px;\n            display: flex;\n            flex-direction: column;\n        }\n\n        .card:hover {\n            transform: translateY(-5px);\n            box-shadow: 0 15px 40px rgba(0,0,0,0.3);\n        }\n\n        .card-icon {\n            font-size: 48px;\n            margin-bottom: 15px;\n        }\n\n        .card-title {\n            font-size: 28px;\n            color: #667eea;\n            margin-bottom: 15px;\n            font-weight: 600;\n        }\n\n        .card-content {\n            font-size: 16px;\n            color: #555;\n            line-height: 1.8;\n            flex-grow: 1;\n        }\n\n        .theory-section {\n            margin-bottom: 20px;\n        }\n\n        .theory-subtitle {\n            font-size: 20px;\n            color: #764ba2;\n            margin: 20px 0 10px 0;\n            font-weight: 600;\n        }\n\n        .example {\n            background: #f8f4ff;\n            padding: 15px;\n            border-left: 4px solid #667eea;\n            margin: 10px 0;\n            border-radius: 5px;\n        }\n\n        .example-text {\n            color: #333;\n            font-style: italic;\n        }\n\n        .exercise-item {\n            background: #f8f4ff;\n            padding: 20px;\n            border-radius: 10px;\n            margin-bottom: 20px;\n        }\n\n        .exercise-question {\n            font-size: 18px;\n            color: #333;\n            margin-bottom: 15px;\n            font-weight: 500;\n        }\n\n        .options {\n            display: flex;\n            flex-direction: column;\n            gap: 10px;\n        }\n\n        .option-btn {\n            background: #ffffff;\n            border: 2px solid #667eea;\n            padding: 12px 20px;\n            border-radius: 8px;\n            cursor: pointer;\n            transition: all 0.3s ease;\n            font-size: 16px;\n            text-align: left;\n        }\n\n        .option-btn:hover {\n            background: #667eea;\n            color: #ffffff;\n        }\n\n        .option-btn.correct {\n            background: #4caf50;\n            color: #ffffff;\n            border-color: #4caf50;\n        }\n\n        .option-btn.incorrect {\n            background: #f44336;\n            color: #ffffff;\n            border-color: #f44336;\n        }\n\n        .option-btn:disabled {\n            cursor: not-allowed;\n            opacity: 0.7;\n        }\n\n        .quiz-item {\n            background: #f8f4ff;\n            padding: 20px;\n            border-radius: 10px;\n            margin-bottom: 20px;\n        }\n\n        .quiz-question {\n            font-size: 18px;\n            color: #333;\n            margin-bottom: 15px;\n            font-weight: 500;\n        }\n\n        .submit-btn {\n            background: #667eea;\n            color: #ffffff;\n            border: none;\n            padding: 15px 40px;\n            border-radius: 10px;\n            font-size: 18px;\n            cursor: pointer;\n            transition: all 0.3s ease;\n            margin-top: 20px;\n            width: 100%;\n        }\n\n        .submit-btn:hover {\n            background: #764ba2;\n            transform: translateY(-2px);\n        }\n\n        .result-message {\n            background: #4caf50;\n            color: #ffffff;\n            padding: 20px;\n            border-radius: 10px;\n            margin-top: 20px;\n            text-align: center;\n            font-size: 20px;\n            font-weight: 600;\n        }\n\n        .result-message.fail {\n            background: #ff9800;\n        }\n\n        .score {\n            font-size: 48px;\n            color: #667eea;\n            text-align: center;\n            margin: 30px 0;\n            font-weight: 700;\n        }\n\n        .feedback {\n            background: #e3f2fd;\n            padding: 20px;\n            border-radius: 10px;\n            margin-top: 20px;\n            border-left: 4px solid #2196f3;\n        }\n\n        .feedback-title {\n            font-size: 18px;\n            color: #1976d2;\n            margin-bottom: 10px;\n            font-weight: 600;\n        }\n\n        .feedback-text {\n            color: #555;\n            line-height: 1.6;\n        }\n\n        @media (max-width: 768px) {\n            .cards-grid {\n                grid-template-columns: 1fr;\n            }\n\n            .main-title {\n                font-size: 32px;\n            }\n\n            .subtitle {\n                font-size: 18px;\n            }\n\n            .card-title {\n                font-size: 24px;\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=\"container\">\n   <div class=\"header\">\n    <h1 class=\"main-title\" id=\"mainTitle\">\u03a3\u03cd\u03bd\u03b4\u03b5\u03c3\u03b7 \u03a0\u03c1\u03bf\u03c4\u03ac\u03c3\u03b5\u03c9\u03bd<\/h1>\n    <p class=\"subtitle\" id=\"subtitle\">\u03a0\u03b1\u03c1\u03b1\u03c4\u03b1\u03ba\u03c4\u03b9\u03ba\u03ae &#8211; \u03a5\u03c0\u03bf\u03c4\u03b1\u03ba\u03c4\u03b9\u03ba\u03ae &#8211; \u0391\u03c3\u03cd\u03bd\u03b4\u03b5\u03c4\u03bf \u03c3\u03c7\u03ae\u03bc\u03b1<\/p>\n   <\/div>\n   <div class=\"cards-grid\"><!-- \u039a\u03b1\u03c1\u03c4\u03ad\u03bb\u03b1 1: \u0398\u03b5\u03c9\u03c1\u03af\u03b1 -->\n    <div class=\"card\">\n     <div class=\"card-icon\">\n      \ud83d\udcda\n     <\/div>\n     <h2 class=\"card-title\" id=\"theoryTitle\">\u0398\u03b5\u03c9\u03c1\u03af\u03b1<\/h2>\n     <div class=\"card-content\">\n      <div class=\"theory-section\">\n       <p><strong>\u039f\u03b9 \u03c0\u03c1\u03bf\u03c4\u03ac\u03c3\u03b5\u03b9\u03c2 \u03c3\u03c5\u03bd\u03b4\u03ad\u03bf\u03bd\u03c4\u03b1\u03b9 \u03bc\u03b5 \u03c4\u03c1\u03b5\u03b9\u03c2 \u03c4\u03c1\u03cc\u03c0\u03bf\u03c5\u03c2:<\/strong><\/p>\n      <\/div>\n      <div class=\"theory-subtitle\">\n       1. \u03a0\u03b1\u03c1\u03b1\u03c4\u03b1\u03ba\u03c4\u03b9\u03ba\u03ae \u03a3\u03cd\u03bd\u03b4\u03b5\u03c3\u03b7\n      <\/div>\n      <p>\u039f\u03b9 \u03c0\u03c1\u03bf\u03c4\u03ac\u03c3\u03b5\u03b9\u03c2 \u03b5\u03af\u03bd\u03b1\u03b9 \u03b9\u03c3\u03cc\u03c4\u03b9\u03bc\u03b5\u03c2 \u03ba\u03b1\u03b9 \u03c3\u03c5\u03bd\u03b4\u03ad\u03bf\u03bd\u03c4\u03b1\u03b9 \u03bc\u03b5 \u03c3\u03cd\u03bd\u03b4\u03b5\u03c3\u03bc\u03bf.<\/p>\n      <div class=\"example\">\n       <p class=\"example-text\">\u0394\u03b9\u03ac\u03b2\u03b1\u03c3\u03b1 \u03c4\u03bf \u03b2\u03b9\u03b2\u03bb\u03af\u03bf <strong>\u03ba\u03b1\u03b9<\/strong> \u03bc\u03bf\u03c5 \u03ac\u03c1\u03b5\u03c3\u03b5 \u03c0\u03bf\u03bb\u03cd.<\/p>\n      <\/div>\n      <div class=\"theory-subtitle\">\n       2. \u03a5\u03c0\u03bf\u03c4\u03b1\u03ba\u03c4\u03b9\u03ba\u03ae \u03a3\u03cd\u03bd\u03b4\u03b5\u03c3\u03b7\n      <\/div>\n      <p>\u039c\u03af\u03b1 \u03c0\u03c1\u03cc\u03c4\u03b1\u03c3\u03b7 \u03b5\u03be\u03b1\u03c1\u03c4\u03ac\u03c4\u03b1\u03b9 \u03b1\u03c0\u03cc \u03c4\u03b7\u03bd \u03ac\u03bb\u03bb\u03b7 \u03bc\u03b5 \u03c5\u03c0\u03bf\u03c4\u03b1\u03ba\u03c4\u03b9\u03ba\u03cc \u03c3\u03cd\u03bd\u03b4\u03b5\u03c3\u03bc\u03bf.<\/p>\n      <div class=\"example\">\n       <p class=\"example-text\">\u0398\u03b1 \u03c0\u03ac\u03c9 \u03b2\u03cc\u03bb\u03c4\u03b1 <strong>\u03b1\u03bd<\/strong> \u03c4\u03b5\u03bb\u03b5\u03b9\u03ce\u03c3\u03c9 \u03c4\u03b1 \u03bc\u03b1\u03b8\u03ae\u03bc\u03b1\u03c4\u03ac \u03bc\u03bf\u03c5.<\/p>\n      <\/div>\n      <div class=\"theory-subtitle\">\n       3. \u0391\u03c3\u03cd\u03bd\u03b4\u03b5\u03c4\u03bf \u03a3\u03c7\u03ae\u03bc\u03b1\n      <\/div>\n      <p>\u039f\u03b9 \u03c0\u03c1\u03bf\u03c4\u03ac\u03c3\u03b5\u03b9\u03c2 \u03c3\u03c5\u03bd\u03b4\u03ad\u03bf\u03bd\u03c4\u03b1\u03b9 \u03c7\u03c9\u03c1\u03af\u03c2 \u03c3\u03cd\u03bd\u03b4\u03b5\u03c3\u03bc\u03bf, \u03bc\u03b5 \u03ba\u03cc\u03bc\u03bc\u03b1 \u03ae \u03ac\u03bd\u03c9 \u03c4\u03b5\u03bb\u03b5\u03af\u03b1.<\/p>\n      <div class=\"example\">\n       <p class=\"example-text\">\u0389\u03c1\u03b8\u03b1, \u03b5\u03af\u03b4\u03b1, \u03bd\u03af\u03ba\u03b7\u03c3\u03b1.<\/p>\n      <\/div>\n     <\/div>\n    <\/div><!-- \u039a\u03b1\u03c1\u03c4\u03ad\u03bb\u03b1 2: \u0395\u03be\u03ac\u03c3\u03ba\u03b7\u03c3\u03b7 -->\n    <div class=\"card\">\n     <div class=\"card-icon\">\n      \u270f\ufe0f\n     <\/div>\n     <h2 class=\"card-title\" id=\"practiceTitle\">\u0395\u03be\u03ac\u03c3\u03ba\u03b7\u03c3\u03b7<\/h2>\n     <div class=\"card-content\">\n      <div class=\"exercise-item\">\n       <div class=\"exercise-question\">\n        1. \u03a4\u03b9 \u03b5\u03af\u03b4\u03bf\u03c2 \u03c3\u03cd\u03bd\u03b4\u03b5\u03c3\u03b7\u03c2 \u03ad\u03c7\u03b5\u03b9 \u03b7 \u03c0\u03c1\u03cc\u03c4\u03b1\u03c3\u03b7:<br>\n        &#8220;\u03a0\u03ae\u03b3\u03b1 \u03c3\u03c4\u03bf \u03c3\u03c7\u03bf\u03bb\u03b5\u03af\u03bf \u03ba\u03b1\u03b9 \u03c3\u03c5\u03bd\u03ac\u03bd\u03c4\u03b7\u03c3\u03b1 \u03c4\u03bf\u03bd \u03c6\u03af\u03bb\u03bf \u03bc\u03bf\u03c5&#8221;;\n       <\/div>\n       <div class=\"options\"><button class=\"option-btn\" onclick=\"checkAnswer(this, true)\">\u03a0\u03b1\u03c1\u03b1\u03c4\u03b1\u03ba\u03c4\u03b9\u03ba\u03ae<\/button> <button class=\"option-btn\" onclick=\"checkAnswer(this, false)\">\u03a5\u03c0\u03bf\u03c4\u03b1\u03ba\u03c4\u03b9\u03ba\u03ae<\/button> <button class=\"option-btn\" onclick=\"checkAnswer(this, false)\">\u0391\u03c3\u03cd\u03bd\u03b4\u03b5\u03c4\u03bf \u03c3\u03c7\u03ae\u03bc\u03b1<\/button>\n       <\/div>\n      <\/div>\n      <div class=\"exercise-item\">\n       <div class=\"exercise-question\">\n        2. \u03a0\u03bf\u03b9\u03b1 \u03c0\u03c1\u03cc\u03c4\u03b1\u03c3\u03b7 \u03ad\u03c7\u03b5\u03b9 \u03c5\u03c0\u03bf\u03c4\u03b1\u03ba\u03c4\u03b9\u03ba\u03ae \u03c3\u03cd\u03bd\u03b4\u03b5\u03c3\u03b7;\n       <\/div>\n       <div class=\"options\"><button class=\"option-btn\" onclick=\"checkAnswer(this, false)\">\u0389\u03c1\u03b8\u03b5, \u03ad\u03c6\u03c5\u03b3\u03b5.<\/button> <button class=\"option-btn\" onclick=\"checkAnswer(this, true)\">\u0398\u03b1 \u03ad\u03c1\u03b8\u03c9 \u03cc\u03c4\u03b1\u03bd \u03c4\u03b5\u03bb\u03b5\u03b9\u03ce\u03c3\u03c9.<\/button> <button class=\"option-btn\" onclick=\"checkAnswer(this, false)\">\u0388\u03c4\u03c1\u03b5\u03be\u03b1 \u03ba\u03b1\u03b9 \u03ba\u03ad\u03c1\u03b4\u03b9\u03c3\u03b1.<\/button>\n       <\/div>\n      <\/div>\n      <div class=\"exercise-item\">\n       <div class=\"exercise-question\">\n        3. \u03a0\u03bf\u03b9\u03b1 \u03c0\u03c1\u03cc\u03c4\u03b1\u03c3\u03b7 \u03ad\u03c7\u03b5\u03b9 \u03b1\u03c3\u03cd\u03bd\u03b4\u03b5\u03c4\u03bf \u03c3\u03c7\u03ae\u03bc\u03b1;\n       <\/div>\n       <div class=\"options\"><button class=\"option-btn\" onclick=\"checkAnswer(this, false)\">\u0394\u03b9\u03ac\u03b2\u03b1\u03c3\u03b1 \u03b3\u03b9\u03b1\u03c4\u03af \u03b5\u03af\u03c7\u03b1 \u03b4\u03b9\u03b1\u03b3\u03ce\u03bd\u03b9\u03c3\u03bc\u03b1.<\/button> <button class=\"option-btn\" onclick=\"checkAnswer(this, false)\">\u03a0\u03b1\u03af\u03b6\u03c9 \u03ba\u03b1\u03b9 \u03b4\u03b9\u03b1\u03c3\u03ba\u03b5\u03b4\u03ac\u03b6\u03c9.<\/button> <button class=\"option-btn\" onclick=\"checkAnswer(this, true)\">\u0389\u03c1\u03b8\u03b1, \u03b5\u03af\u03b4\u03b1, \u03bd\u03af\u03ba\u03b7\u03c3\u03b1.<\/button>\n       <\/div>\n      <\/div>\n     <\/div>\n    <\/div><!-- \u039a\u03b1\u03c1\u03c4\u03ad\u03bb\u03b1 3: \u039a\u03bf\u03c5\u03af\u03b6 -->\n    <div class=\"card\">\n     <div class=\"card-icon\">\n      \ud83c\udfaf\n     <\/div>\n     <h2 class=\"card-title\" id=\"quizTitle\">\u039a\u03bf\u03c5\u03af\u03b6 \u0391\u03be\u03b9\u03bf\u03bb\u03cc\u03b3\u03b7\u03c3\u03b7\u03c2<\/h2>\n     <div class=\"card-content\">\n      <div id=\"quizContainer\">\n       <div class=\"quiz-item\">\n        <div class=\"quiz-question\">\n         1. \u03a0\u03bf\u03b9\u03bf\u03c2 \u03c3\u03cd\u03bd\u03b4\u03b5\u03c3\u03bc\u03bf\u03c2 \u03b4\u03b7\u03bb\u03ce\u03bd\u03b5\u03b9 \u03c0\u03b1\u03c1\u03b1\u03c4\u03b1\u03ba\u03c4\u03b9\u03ba\u03ae \u03c3\u03cd\u03bd\u03b4\u03b5\u03c3\u03b7;\n        <\/div>\n        <div class=\"options\"><button class=\"option-btn\" data-answer=\"correct\">\u03ba\u03b1\u03b9<\/button> <button class=\"option-btn\" data-answer=\"wrong\">\u03cc\u03c4\u03b1\u03bd<\/button> <button class=\"option-btn\" data-answer=\"wrong\">\u03b5\u03c0\u03b5\u03b9\u03b4\u03ae<\/button>\n        <\/div>\n       <\/div>\n       <div class=\"quiz-item\">\n        <div class=\"quiz-question\">\n         2. \u03a3\u03b5 \u03c0\u03bf\u03b9\u03b1 \u03c0\u03c1\u03cc\u03c4\u03b1\u03c3\u03b7 \u03c5\u03c0\u03ac\u03c1\u03c7\u03b5\u03b9 \u03c5\u03c0\u03bf\u03c4\u03b1\u03ba\u03c4\u03b9\u03ba\u03ae \u03c3\u03cd\u03bd\u03b4\u03b5\u03c3\u03b7;\n        <\/div>\n        <div class=\"options\"><button class=\"option-btn\" data-answer=\"wrong\">\u0388\u03c6\u03c5\u03b3\u03b1 \u03b1\u03bb\u03bb\u03ac \u03b5\u03c0\u03ad\u03c3\u03c4\u03c1\u03b5\u03c8\u03b1.<\/button> <button class=\"option-btn\" data-answer=\"correct\">\u0388\u03c6\u03c5\u03b3\u03b1 \u03cc\u03c4\u03b1\u03bd \u03c7\u03c4\u03cd\u03c0\u03b7\u03c3\u03b5 \u03c4\u03bf \u03ba\u03bf\u03c5\u03b4\u03bf\u03cd\u03bd\u03b9.<\/button> <button class=\"option-btn\" data-answer=\"wrong\">\u0388\u03c6\u03c5\u03b3\u03b1, \u03b5\u03c0\u03ad\u03c3\u03c4\u03c1\u03b5\u03c8\u03b1.<\/button>\n        <\/div>\n       <\/div>\n       <div class=\"quiz-item\">\n        <div class=\"quiz-question\">\n         3. \u03a4\u03b9 \u03c3\u03cd\u03bd\u03b4\u03b5\u03c3\u03b7 \u03ad\u03c7\u03b5\u03b9 \u03b7 \u03c0\u03c1\u03cc\u03c4\u03b1\u03c3\u03b7: &#8220;\u0392\u03c1\u03ad\u03c7\u03b5\u03b9, \u03c6\u03c5\u03c3\u03ac\u03b5\u03b9&#8221;;\n        <\/div>\n        <div class=\"options\"><button class=\"option-btn\" data-answer=\"wrong\">\u03a0\u03b1\u03c1\u03b1\u03c4\u03b1\u03ba\u03c4\u03b9\u03ba\u03ae<\/button> <button class=\"option-btn\" data-answer=\"wrong\">\u03a5\u03c0\u03bf\u03c4\u03b1\u03ba\u03c4\u03b9\u03ba\u03ae<\/button> <button class=\"option-btn\" data-answer=\"correct\">\u0391\u03c3\u03cd\u03bd\u03b4\u03b5\u03c4\u03bf \u03c3\u03c7\u03ae\u03bc\u03b1<\/button>\n        <\/div>\n       <\/div>\n       <div class=\"quiz-item\">\n        <div class=\"quiz-question\">\n         4. \u03a0\u03bf\u03b9\u03bf\u03c2 \u03b5\u03af\u03bd\u03b1\u03b9 \u03c5\u03c0\u03bf\u03c4\u03b1\u03ba\u03c4\u03b9\u03ba\u03cc\u03c2 \u03c3\u03cd\u03bd\u03b4\u03b5\u03c3\u03bc\u03bf\u03c2;\n        <\/div>\n        <div class=\"options\"><button class=\"option-btn\" data-answer=\"wrong\">\u03ba\u03b1\u03b9<\/button> <button class=\"option-btn\" data-answer=\"correct\">\u03b1\u03bd<\/button> <button class=\"option-btn\" data-answer=\"wrong\">\u03b1\u03bb\u03bb\u03ac<\/button>\n        <\/div>\n       <\/div>\n       <div class=\"quiz-item\">\n        <div class=\"quiz-question\">\n         5. \u03a0\u03bf\u03b9\u03b1 \u03c0\u03c1\u03cc\u03c4\u03b1\u03c3\u03b7 \u03ad\u03c7\u03b5\u03b9 \u03c0\u03b1\u03c1\u03b1\u03c4\u03b1\u03ba\u03c4\u03b9\u03ba\u03ae \u03c3\u03cd\u03bd\u03b4\u03b5\u03c3\u03b7;\n        <\/div>\n        <div class=\"options\"><button class=\"option-btn\" data-answer=\"correct\">\u0394\u03b9\u03ac\u03b2\u03b1\u03c3\u03b1 \u03ba\u03b1\u03b9 \u03ba\u03b1\u03c4\u03ac\u03bb\u03b1\u03b2\u03b1.<\/button> <button class=\"option-btn\" data-answer=\"wrong\">\u0394\u03b9\u03ac\u03b2\u03b1\u03c3\u03b1 \u03b3\u03b9\u03b1\u03c4\u03af \u03b5\u03af\u03c7\u03b1 \u03b4\u03b9\u03b1\u03b3\u03ce\u03bd\u03b9\u03c3\u03bc\u03b1.<\/button> <button class=\"option-btn\" data-answer=\"wrong\">\u0394\u03b9\u03ac\u03b2\u03b1\u03c3\u03b1, \u03ba\u03b1\u03c4\u03ac\u03bb\u03b1\u03b2\u03b1.<\/button>\n        <\/div>\n       <\/div><button class=\"submit-btn\" onclick=\"submitQuiz()\">\u03a5\u03c0\u03bf\u03b2\u03bf\u03bb\u03ae \u0391\u03c0\u03b1\u03bd\u03c4\u03ae\u03c3\u03b5\u03c9\u03bd<\/button>\n       <div id=\"quizResult\"><\/div>\n      <\/div>\n     <\/div>\n    <\/div><!-- \u039a\u03b1\u03c1\u03c4\u03ad\u03bb\u03b1 4: \u0391\u03c0\u03bf\u03c4\u03b5\u03bb\u03ad\u03c3\u03bc\u03b1\u03c4\u03b1 -->\n    <div class=\"card\">\n     <div class=\"card-icon\">\n      \ud83c\udfc6\n     <\/div>\n     <h2 class=\"card-title\" id=\"resultsTitle\">\u03a3\u03c5\u03bc\u03b2\u03bf\u03c5\u03bb\u03ad\u03c2 &amp; \u0391\u03c0\u03bf\u03c4\u03b5\u03bb\u03ad\u03c3\u03bc\u03b1\u03c4\u03b1<\/h2>\n     <div class=\"card-content\">\n      <div class=\"feedback\">\n       <div class=\"feedback-title\">\n        \ud83d\udca1 \u03a7\u03c1\u03ae\u03c3\u03b9\u03bc\u03b5\u03c2 \u03a3\u03c5\u03bc\u03b2\u03bf\u03c5\u03bb\u03ad\u03c2:\n       <\/div>\n       <div class=\"feedback-text\">\n        <p><strong>\u0393\u03b9\u03b1 \u03bd\u03b1 \u03b1\u03bd\u03b1\u03b3\u03bd\u03c9\u03c1\u03af\u03c3\u03b5\u03b9\u03c2 \u03c4\u03b7 \u03c3\u03cd\u03bd\u03b4\u03b5\u03c3\u03b7:<\/strong><\/p>\n        <ul style=\"margin-left: 20px; margin-top: 10px;\">\n         <li style=\"margin-bottom: 8px;\">\u0391\u03bd \u03c5\u03c0\u03ac\u03c1\u03c7\u03b5\u03b9 <strong>\u03ba\u03b1\u03b9, \u03ae, \u03b1\u03bb\u03bb\u03ac, \u03cc\u03bc\u03c9\u03c2<\/strong> \u2192 \u03a0\u03b1\u03c1\u03b1\u03c4\u03b1\u03ba\u03c4\u03b9\u03ba\u03ae<\/li>\n         <li style=\"margin-bottom: 8px;\">\u0391\u03bd \u03c5\u03c0\u03ac\u03c1\u03c7\u03b5\u03b9 <strong>\u03cc\u03c4\u03b1\u03bd, \u03b5\u03c0\u03b5\u03b9\u03b4\u03ae, \u03b1\u03bd, \u03b3\u03b9\u03b1\u03c4\u03af<\/strong> \u2192 \u03a5\u03c0\u03bf\u03c4\u03b1\u03ba\u03c4\u03b9\u03ba\u03ae<\/li>\n         <li style=\"margin-bottom: 8px;\">\u0391\u03bd \u03b4\u03b5\u03bd \u03c5\u03c0\u03ac\u03c1\u03c7\u03b5\u03b9 \u03c3\u03cd\u03bd\u03b4\u03b5\u03c3\u03bc\u03bf\u03c2 (\u03bc\u03cc\u03bd\u03bf \u03ba\u03cc\u03bc\u03bc\u03b1\/\u03ac\u03bd\u03c9 \u03c4\u03b5\u03bb\u03b5\u03af\u03b1) \u2192 \u0391\u03c3\u03cd\u03bd\u03b4\u03b5\u03c4\u03bf<\/li>\n        <\/ul>\n       <\/div>\n      <\/div>\n      <div class=\"score\" id=\"totalScore\">\n       \u03a0\u03cc\u03bd\u03c4\u03bf\u03b9: 0\/0\n      <\/div>\n      <div class=\"feedback\">\n       <div class=\"feedback-title\">\n        \ud83d\udcca \u03a0\u03c1\u03cc\u03bf\u03b4\u03bf\u03c2:\n       <\/div>\n       <div class=\"feedback-text\" id=\"progressText\">\n        <p>\u039f\u03bb\u03bf\u03ba\u03bb\u03ae\u03c1\u03c9\u03c3\u03b5 \u03c4\u03b9\u03c2 \u03b1\u03c3\u03ba\u03ae\u03c3\u03b5\u03b9\u03c2 \u03b3\u03b9\u03b1 \u03bd\u03b1 \u03b4\u03b5\u03b9\u03c2 \u03c4\u03b7\u03bd \u03c0\u03c1\u03cc\u03bf\u03b4\u03cc \u03c3\u03bf\u03c5!<\/p>\n       <\/div>\n      <\/div>\n      <div class=\"feedback\" style=\"margin-top: 20px;\">\n       <div class=\"feedback-title\">\n        \ud83c\udf93 \u039c\u03ae\u03bd\u03c5\u03bc\u03b1 \u0394\u03b1\u03c3\u03ba\u03ac\u03bb\u03bf\u03c5:\n       <\/div>\n       <div class=\"feedback-text\">\n        <p>\u0397 \u03b5\u03be\u03ac\u03c3\u03ba\u03b7\u03c3\u03b7 \u03b5\u03af\u03bd\u03b1\u03b9 \u03c4\u03bf \u03ba\u03bb\u03b5\u03b9\u03b4\u03af \u03c4\u03b7\u03c2 \u03b5\u03c0\u03b9\u03c4\u03c5\u03c7\u03af\u03b1\u03c2! \u03a3\u03c5\u03bd\u03ad\u03c7\u03b9\u03c3\u03b5 \u03bd\u03b1 \u03b5\u03be\u03b1\u03c3\u03ba\u03b5\u03af\u03c3\u03b1\u03b9 \u03ba\u03b1\u03b9 \u03b8\u03b1 \u03b3\u03af\u03bd\u03b5\u03b9\u03c2 \u03ac\u03c1\u03b9\u03c3\u03c4\u03bf\u03c2 \u03c3\u03c4\u03b7 \u03c3\u03cd\u03bd\u03b4\u03b5\u03c3\u03b7 \u03c0\u03c1\u03bf\u03c4\u03ac\u03c3\u03b5\u03c9\u03bd!<\/p>\n       <\/div>\n      <\/div>\n     <\/div>\n    <\/div>\n   <\/div>\n  <\/div>\n  <script>\n        const defaultConfig = {\n            main_title: \"\u03a3\u03cd\u03bd\u03b4\u03b5\u03c3\u03b7 \u03a0\u03c1\u03bf\u03c4\u03ac\u03c3\u03b5\u03c9\u03bd\",\n            subtitle: \"\u03a0\u03b1\u03c1\u03b1\u03c4\u03b1\u03ba\u03c4\u03b9\u03ba\u03ae - \u03a5\u03c0\u03bf\u03c4\u03b1\u03ba\u03c4\u03b9\u03ba\u03ae - \u0391\u03c3\u03cd\u03bd\u03b4\u03b5\u03c4\u03bf \u03c3\u03c7\u03ae\u03bc\u03b1\",\n            theory_title: \"\u0398\u03b5\u03c9\u03c1\u03af\u03b1\",\n            practice_title: \"\u0395\u03be\u03ac\u03c3\u03ba\u03b7\u03c3\u03b7\",\n            quiz_title: \"\u039a\u03bf\u03c5\u03af\u03b6 \u0391\u03be\u03b9\u03bf\u03bb\u03cc\u03b3\u03b7\u03c3\u03b7\u03c2\",\n            results_title: \"\u03a3\u03c5\u03bc\u03b2\u03bf\u03c5\u03bb\u03ad\u03c2 & \u0391\u03c0\u03bf\u03c4\u03b5\u03bb\u03ad\u03c3\u03bc\u03b1\u03c4\u03b1\",\n            primary_color: \"#667eea\",\n            secondary_color: \"#764ba2\",\n            background_color: \"#ffffff\",\n            text_color: \"#333333\",\n            accent_color: \"#4caf50\"\n        };\n\n        let exerciseScore = 0;\n        let exerciseTotal = 0;\n        let quizScore = 0;\n        let selectedAnswers = new Set();\n\n        function checkAnswer(button, isCorrect) {\n            const allButtons = button.parentElement.querySelectorAll('.option-btn');\n            allButtons.forEach(btn => btn.disabled = true);\n            \n            if (isCorrect) {\n                button.classList.add('correct');\n                exerciseScore++;\n            } else {\n                button.classList.add('incorrect');\n                allButtons.forEach(btn => {\n                    if (btn.onclick && btn.onclick.toString().includes('true')) {\n                        btn.classList.add('correct');\n                    }\n                });\n            }\n            \n            exerciseTotal++;\n            updateProgress();\n        }\n\n        function submitQuiz() {\n            const quizItems = document.querySelectorAll('.quiz-item');\n            let correctCount = 0;\n            let totalQuestions = quizItems.length;\n            \n            quizItems.forEach(item => {\n                const buttons = item.querySelectorAll('.option-btn');\n                let answered = false;\n                let correct = false;\n                \n                buttons.forEach(btn => {\n                    if (selectedAnswers.has(btn)) {\n                        answered = true;\n                        btn.disabled = true;\n                        if (btn.dataset.answer === 'correct') {\n                            btn.classList.add('correct');\n                            correct = true;\n                            correctCount++;\n                        } else {\n                            btn.classList.add('incorrect');\n                        }\n                    } else if (btn.dataset.answer === 'correct') {\n                        btn.classList.add('correct');\n                        btn.disabled = true;\n                    } else {\n                        btn.disabled = true;\n                    }\n                });\n            });\n            \n            quizScore = correctCount;\n            \n            const resultDiv = document.getElementById('quizResult');\n            const percentage = (correctCount \/ totalQuestions) * 100;\n            \n            if (percentage >= 80) {\n                resultDiv.innerHTML = `<div class=\"result-message\">\u03a3\u03c5\u03b3\u03c7\u03b1\u03c1\u03b7\u03c4\u03ae\u03c1\u03b9\u03b1! \u03a0\u03ad\u03c4\u03c5\u03c7\u03b5\u03c2 ${correctCount}\/${totalQuestions} (${percentage.toFixed(0)}%) \ud83c\udf1f<\/div>`;\n            } else if (percentage >= 60) {\n                resultDiv.innerHTML = `<div class=\"result-message\">\u039a\u03b1\u03bb\u03ae \u03c0\u03c1\u03bf\u03c3\u03c0\u03ac\u03b8\u03b5\u03b9\u03b1! \u03a0\u03ad\u03c4\u03c5\u03c7\u03b5\u03c2 ${correctCount}\/${totalQuestions} (${percentage.toFixed(0)}%) \ud83d\udc4d<\/div>`;\n            } else {\n                resultDiv.innerHTML = `<div class=\"result-message fail\">\u03a7\u03c1\u03b5\u03b9\u03ac\u03b6\u03b5\u03c4\u03b1\u03b9 \u03c0\u03b5\u03c1\u03b9\u03c3\u03c3\u03cc\u03c4\u03b5\u03c1\u03b7 \u03b5\u03be\u03ac\u03c3\u03ba\u03b7\u03c3\u03b7. \u03a0\u03ad\u03c4\u03c5\u03c7\u03b5\u03c2 ${correctCount}\/${totalQuestions} (${percentage.toFixed(0)}%) \ud83d\udcaa<\/div>`;\n            }\n            \n            document.querySelector('.submit-btn').disabled = true;\n            updateProgress();\n        }\n\n        function updateProgress() {\n            const totalScore = exerciseScore + quizScore;\n            const totalPossible = 3 + 5;\n            document.getElementById('totalScore').textContent = `\u03a0\u03cc\u03bd\u03c4\u03bf\u03b9: ${totalScore}\/${totalPossible}`;\n            \n            const progressText = document.getElementById('progressText');\n            const percentage = (totalScore \/ totalPossible) * 100;\n            \n            if (percentage >= 80) {\n                progressText.innerHTML = `<p>\ud83c\udf1f \u0395\u03be\u03b1\u03b9\u03c1\u03b5\u03c4\u03b9\u03ba\u03ae \u03b4\u03bf\u03c5\u03bb\u03b5\u03b9\u03ac! \u0388\u03c7\u03b5\u03b9\u03c2 \u03ba\u03b1\u03c4\u03b1\u03ba\u03c4\u03ae\u03c3\u03b5\u03b9 \u03c4\u03b7 \u03c3\u03cd\u03bd\u03b4\u03b5\u03c3\u03b7 \u03c0\u03c1\u03bf\u03c4\u03ac\u03c3\u03b5\u03c9\u03bd!<\/p>`;\n            } else if (percentage >= 60) {\n                progressText.innerHTML = `<p>\ud83d\udc4d \u039a\u03b1\u03bb\u03ae \u03c0\u03c1\u03bf\u03c3\u03c0\u03ac\u03b8\u03b5\u03b9\u03b1! \u03a3\u03c5\u03bd\u03ad\u03c7\u03b9\u03c3\u03b5 \u03bd\u03b1 \u03b5\u03be\u03b1\u03c3\u03ba\u03b5\u03af\u03c3\u03b1\u03b9!<\/p>`;\n            } else if (totalScore > 0) {\n                progressText.innerHTML = `<p>\ud83d\udcaa \u039a\u03b1\u03bb\u03ae \u03b1\u03c1\u03c7\u03ae! \u039e\u03b1\u03bd\u03b1\u03ba\u03bf\u03af\u03c4\u03b1\u03be\u03b5 \u03c4\u03b7 \u03b8\u03b5\u03c9\u03c1\u03af\u03b1 \u03ba\u03b1\u03b9 \u03b4\u03bf\u03ba\u03af\u03bc\u03b1\u03c3\u03b5 \u03be\u03b1\u03bd\u03ac!<\/p>`;\n            }\n        }\n\n        document.querySelectorAll('#quizContainer .option-btn').forEach(btn => {\n            btn.addEventListener('click', function() {\n                const siblings = this.parentElement.querySelectorAll('.option-btn');\n                siblings.forEach(s => {\n                    selectedAnswers.delete(s);\n                    s.style.background = '#ffffff';\n                    s.style.color = '#333';\n                });\n                selectedAnswers.add(this);\n                this.style.background = '#667eea';\n                this.style.color = '#ffffff';\n            });\n        });\n\n        async function onConfigChange(config) {\n            document.getElementById('mainTitle').textContent = config.main_title || defaultConfig.main_title;\n            document.getElementById('subtitle').textContent = config.subtitle || defaultConfig.subtitle;\n            document.getElementById('theoryTitle').textContent = config.theory_title || defaultConfig.theory_title;\n            document.getElementById('practiceTitle').textContent = config.practice_title || defaultConfig.practice_title;\n            document.getElementById('quizTitle').textContent = config.quiz_title || defaultConfig.quiz_title;\n            document.getElementById('resultsTitle').textContent = config.results_title || defaultConfig.results_title;\n\n            const primaryColor = config.primary_color || defaultConfig.primary_color;\n            const secondaryColor = config.secondary_color || defaultConfig.secondary_color;\n            const backgroundColor = config.background_color || defaultConfig.background_color;\n            const textColor = config.text_color || defaultConfig.text_color;\n            const accentColor = config.accent_color || defaultConfig.accent_color;\n\n            document.body.style.background = `linear-gradient(135deg, ${primaryColor} 0%, ${secondaryColor} 100%)`;\n            \n            document.querySelectorAll('.card').forEach(card => {\n                card.style.background = backgroundColor;\n            });\n            \n            document.querySelectorAll('.card-title').forEach(title => {\n                title.style.color = primaryColor;\n            });\n            \n            document.querySelectorAll('.theory-subtitle').forEach(subtitle => {\n                subtitle.style.color = secondaryColor;\n            });\n            \n            document.querySelectorAll('.card-content, .exercise-question, .quiz-question').forEach(text => {\n                text.style.color = textColor;\n            });\n            \n            document.querySelectorAll('.submit-btn').forEach(btn => {\n                btn.style.background = primaryColor;\n            });\n            \n            document.querySelectorAll('.option-btn.correct').forEach(btn => {\n                btn.style.background = accentColor;\n                btn.style.borderColor = accentColor;\n            });\n        }\n\n        if (window.elementSdk) {\n            window.elementSdk.init({\n                defaultConfig: defaultConfig,\n                onConfigChange: onConfigChange,\n                mapToCapabilities: (config) => ({\n                    recolorables: [\n                        {\n                            get: () => config.primary_color || defaultConfig.primary_color,\n                            set: (value) => {\n                                config.primary_color = value;\n                                window.elementSdk.setConfig({ primary_color: value });\n                            }\n                        },\n                        {\n                            get: () => config.secondary_color || defaultConfig.secondary_color,\n                            set: (value) => {\n                                config.secondary_color = value;\n                                window.elementSdk.setConfig({ secondary_color: value });\n                            }\n                        },\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                            get: () => config.text_color || defaultConfig.text_color,\n                            set: (value) => {\n                                config.text_color = value;\n                                window.elementSdk.setConfig({ text_color: value });\n                            }\n                        },\n                        {\n                            get: () => config.accent_color || defaultConfig.accent_color,\n                            set: (value) => {\n                                config.accent_color = value;\n                                window.elementSdk.setConfig({ accent_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                    [\"theory_title\", config.theory_title || defaultConfig.theory_title],\n                    [\"practice_title\", config.practice_title || defaultConfig.practice_title],\n                    [\"quiz_title\", config.quiz_title || defaultConfig.quiz_title],\n                    [\"results_title\", config.results_title || defaultConfig.results_title]\n                ])\n            });\n        }\n    <\/script>\n <script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML=\"window.__CF$cv$params={r:'9b5b096ec5e86f67',t:'MTc2NzAyOTU0Ny4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='\/cdn-cgi\/challenge-platform\/scripts\/jsd\/main.js';document.getElementsByTagName('head')[0].appendChild(a);\";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();<\/script><\/body>\n<\/html>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\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 &#8211; \u0393\u03bb\u03c9\u03c3\u03c3\u03ac\u03c1\u03b9 \u03a3\u03cd\u03bd\u03b4\u03b5\u03c3\u03b7\u03c2 \u03a0\u03c1\u03bf\u03c4\u03ac\u03c3\u03b5\u03c9\u03bd \u0393\u03bb\u03c9\u03c3\u03c3\u03ac\u03c1\u03b9 \u03a3\u03cd\u03bd\u03b4\u03b5\u03c3\u03b7\u03c2 \u03a0\u03c1\u03bf\u03c4\u03ac\u03c3\u03b5\u03c9\u03bd \u03a0\u03ac\u03c4\u03b7\u03c3\u03b5 \u03c4\u03b9\u03c2 \u03ba\u03ac\u03c1\u03c4\u03b5\u03c2 \u03b3\u03b9\u03b1 \u03bd\u03b1 \u03b4\u03b5\u03b9\u03c2 \u03c4\u03bf\u03c5\u03c2 \u03bf\u03c1\u03b9\u03c3\u03bc\u03bf\u03cd\u03c2! \ud83c\udfaf \ud83d\udd17 \u03a0\u03b1\u03c1\u03b1\u03c4\u03b1\u03ba\u03c4\u03b9\u03ba\u03ae \u03a3\u03cd\u03bd\u03b4\u03b5\u03c3\u03b7 \u00ab\u03a0\u03ae\u03b3\u03b1 \u03c3\u03c4\u03bf \u03c3\u03c7\u03bf\u03bb\u03b5\u03af\u03bf \u03ba\u03b1\u03b9 \u03c3\u03c5\u03bd\u03ac\u03bd\u03c4\u03b7\u03c3\u03b1 \u03c4\u03b7 \u03c6\u03af\u03bb\u03b7 \u03bc\u03bf\u03c5.\u00bb \ud83d\udc46 \u03a0\u03ac\u03c4\u03b7\u03c3\u03b5 \u03b3\u03b9\u03b1 \u03c0\u03b5\u03c1\u03b9\u03c3\u03c3\u03cc\u03c4\u03b5\u03c1\u03b1 \u03a4\u03b9 \u03b5\u03af\u03bd\u03b1\u03b9: \u0394\u03cd\u03bf \u03b1\u03bd\u03b5\u03be\u03ac\u03c1\u03c4\u03b7\u03c4\u03b5\u03c2 \u03c0\u03c1\u03bf\u03c4\u03ac\u03c3\u03b5\u03b9\u03c2 \u03c0\u03bf\u03c5 \u03c3\u03c5\u03bd\u03b4\u03ad\u03bf\u03bd\u03c4\u03b1\u03b9 \u03bc\u03b5 \u03c3\u03cd\u03bd\u03b4\u03b5\u03c3\u03bc\u03bf. \u03a3\u03cd\u03bd\u03b4\u03b5\u03c3\u03bc\u03bf\u03b9: \u03ba\u03b1\u03b9, \u03ae, \u03b1\u03bb\u03bb\u03ac, \u03cc\u03bc\u03c9\u03c2, \u03bc\u03b1 &hellip; <a href=\"https:\/\/prokopidis.sites.sch.gr\/?p=4682\" 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;\u039f \u03bc\u03b1\u03b3\u03b9\u03ba\u03cc\u03c2 \u03ba\u03cc\u03c3\u03bc\u03bf\u03c2 \u03c4\u03c9\u03bd \u03b2\u03b9\u03b2\u03bb\u03af\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-4682","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\/4682","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=4682"}],"version-history":[{"count":14,"href":"https:\/\/prokopidis.sites.sch.gr\/index.php?rest_route=\/wp\/v2\/posts\/4682\/revisions"}],"predecessor-version":[{"id":5944,"href":"https:\/\/prokopidis.sites.sch.gr\/index.php?rest_route=\/wp\/v2\/posts\/4682\/revisions\/5944"}],"wp:attachment":[{"href":"https:\/\/prokopidis.sites.sch.gr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=4682"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/prokopidis.sites.sch.gr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=4682"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/prokopidis.sites.sch.gr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=4682"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}