{"id":778,"date":"2026-06-29T21:35:58","date_gmt":"2026-06-29T13:35:58","guid":{"rendered":"https:\/\/idealslearning.cite.hku.hk\/?page_id=778"},"modified":"2026-07-15T15:54:40","modified_gmt":"2026-07-15T07:54:40","slug":"the-ideals-advantage","status":"publish","type":"page","link":"https:\/\/idealslearning.cite.hku.hk\/?page_id=778","title":{"rendered":"The IDEALS Advantage"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n\r\n\r\nThe IDEALS Advantage<\/title>\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\">\r\n<style>\r\n :root{\r\n --green-dark:#0d6b4f;\r\n --green-darker:#0a5a42;\r\n --green-text:#0c6b4e;\r\n --gold:#bda06a;\r\n --gold-dark:#a98f5c;\r\n --navy:#16213e;\r\n --text-dark:#1c2530;\r\n --text-gray:#5b6573;\r\n --bg-light:#f3f5f8;\r\n --bg-section:#eef1f5;\r\n --white:#ffffff;\r\n --shadow:0 10px 30px rgba(0,0,0,0.08);\r\n }\r\n\r\n *{margin:0;padding:0;box-sizing:border-box;}\r\n\r\n body{\r\n font-family:'Montserrat', sans-serif;\r\n font-weight:400;\r\n color:var(--text-dark);\r\n background:var(--white);\r\n -webkit-font-smoothing:antialiased;\r\n }\r\n\r\n img{max-width:100%;display:block;}\r\n\r\n a{text-decoration:none;color:inherit;}\r\n\r\n .fade-up{\r\n opacity:1;\r\n transform:translateY(0);\r\n transition:opacity 0.8s ease, transform 0.8s ease;\r\n }\r\n .fade-up.fade-up-init{\r\n opacity:0;\r\n transform:translateY(30px);\r\n }\r\n .fade-up.fade-up-init.visible{\r\n opacity:1;\r\n transform:translateY(0);\r\n }\r\n .fade-up.delay-1{transition-delay:0.1s;}\r\n .fade-up.delay-2{transition-delay:0.25s;}\r\n .fade-up.delay-3{transition-delay:0.4s;}\r\n\r\n .hover-lift{\r\n transition:transform 0.35s ease, box-shadow 0.35s ease;\r\n }\r\n .hover-lift:hover{\r\n transform:translateY(-6px);\r\n box-shadow:0 18px 40px rgba(0,0,0,0.12);\r\n }\r\n\r\n .topbar{\r\n display:flex;\r\n align-items:center;\r\n justify-content:space-between;\r\n padding:18px 60px;\r\n background:var(--white);\r\n border-bottom:1px solid #eee;\r\n }\r\n .topbar-left{\r\n display:flex;\r\n align-items:center;\r\n gap:12px;\r\n }\r\n .topbar-icon{\r\n width:36px;\r\n height:36px;\r\n background:var(--green-dark);\r\n border-radius:8px;\r\n display:flex;\r\n align-items:center;\r\n justify-content:center;\r\n color:#fff;\r\n font-size:16px;\r\n }\r\n .topbar-titles h1{\r\n font-size:14px;\r\n font-weight:800;\r\n letter-spacing:0.3px;\r\n color:#13202c;\r\n }\r\n .topbar-titles p{\r\n font-size:10.5px;\r\n color:#8a93a0;\r\n font-weight:600;\r\n letter-spacing:0.3px;\r\n margin-top:2px;\r\n }\r\n .back-btn{\r\n display:flex;\r\n align-items:center;\r\n gap:8px;\r\n padding:9px 20px;\r\n border:1px solid #d8dde3;\r\n border-radius:30px;\r\n font-size:12px;\r\n font-weight:700;\r\n color:#1c2530;\r\n background:#fff;\r\n cursor:pointer;\r\n transition:all 0.3s ease;\r\n }\r\n .back-btn:hover{\r\n background:#f3f3f3;\r\n border-color:#bbb;\r\n }\r\n\r\n .hero{\r\n background:\r\n linear-gradient(135deg, rgba(255,255,255,0.04) 25%, transparent 25%) 0 0\/40px 40px,\r\n linear-gradient(225deg, rgba(255,255,255,0.04) 25%, transparent 25%) 0 0\/40px 40px,\r\n linear-gradient(45deg, rgba(255,255,255,0.04) 25%, transparent 25%) 0 0\/40px 40px,\r\n linear-gradient(315deg, rgba(255,255,255,0.04) 25%, transparent 25%) 0 0\/40px 40px,\r\n linear-gradient(135deg, #0c6b4d, #0a5a42);\r\n padding:70px 60px 90px;\r\n display:flex;\r\n align-items:center;\r\n justify-content:space-between;\r\n gap:50px;\r\n flex-wrap:wrap;\r\n color:#fff;\r\n position:relative;\r\n overflow:hidden;\r\n }\r\n .hero-text{\r\n max-width:560px;\r\n flex:1;\r\n }\r\n .hero-text h2{\r\n font-size:48px;\r\n line-height:1.15;\r\n font-weight:800;\r\n margin-bottom:22px;\r\n color:#ffffff !important;\r\n}\r\n .hero-text p{\r\n font-size:16px;\r\n font-weight:400;\r\n line-height:1.7;\r\n color:#dcefe6;\r\n max-width:480px;\r\n }\r\n .hero-image-wrap{\r\n flex:1;\r\n min-width:320px;\r\n max-width:560px;\r\n }\r\n .hero-image-card{\r\n background:#fff;\r\n border-radius:14px;\r\n box-shadow:0 25px 50px rgba(0,0,0,0.25);\r\n overflow:hidden;\r\n transition:transform 0.5s ease;\r\n }\r\n .hero-image-card:hover{\r\n transform:scale(1.02);\r\n }\r\n .hero-image-placeholder{\r\n width:100%;\r\n height:260px;\r\n background:#f3f5f8 url('https:\/\/peachpuff-magpie-550089.hostingersite.com\/wp-content\/uploads\/2026\/06\/1-OM00lNLzEWQrSnynoinkVmHovn7cGP_.jpg') center\/cover no-repeat;\r\n display:flex;\r\n align-items:center;\r\n justify-content:center;\r\n color:#9aa3ad;\r\n font-size:13px;\r\n font-weight:500;\r\n }\r\n\r\n section{\r\n padding:90px 60px;\r\n }\r\n .section-inner{\r\n max-width:1100px;\r\n margin:0 auto;\r\n }\r\n .center{text-align:center;}\r\n\r\n .badge{\r\n display:inline-block;\r\n background:#f1ece1;\r\n color:#8c7440;\r\n font-size:11px;\r\n font-weight:700;\r\n letter-spacing:0.6px;\r\n padding:7px 18px;\r\n border-radius:20px;\r\n margin-bottom:22px;\r\n }\r\n\r\n .heading-lg{\r\n font-size:38px;\r\n font-weight:800;\r\n line-height:1.25;\r\n color:#13202c;\r\n margin-bottom:24px;\r\n }\r\n\r\n .desc-text{\r\n font-size:15.5px;\r\n font-weight:400;\r\n line-height:1.8;\r\n color:var(--text-gray);\r\n max-width:780px;\r\n margin:0 auto 36px;\r\n }\r\n\r\n \/* ===== Read More expandable content (Empowering Schools section) ===== *\/\r\n .desc-more{\r\n max-height:0;\r\n overflow:hidden;\r\n opacity:0;\r\n max-width:780px;\r\n margin:0 auto;\r\n transition:max-height 0.5s ease, opacity 0.4s ease, margin 0.4s ease;\r\n }\r\n .desc-more p{\r\n font-size:15.5px;\r\n font-weight:400;\r\n line-height:1.8;\r\n color:var(--text-gray);\r\n margin:0 auto 36px;\r\n }\r\n .desc-more.expanded{\r\n max-height:1200px;\r\n opacity:1;\r\n }\r\n\r\n #empowering-toggle,\r\n #empowering-toggle:hover,\r\n #empowering-toggle:focus,\r\n #empowering-toggle:focus-visible,\r\n #empowering-toggle:active,\r\n #empowering-toggle:visited,\r\n #empowering-toggle.expanded{\r\n background:var(--green-dark) !important;\r\n color:#ffffff !important;\r\n border-color:var(--green-dark) !important;\r\n border-radius:30px !important;\r\n box-shadow:none !important;\r\n outline:none !important;\r\n }\r\n\r\n .fragmented-section{\r\n background:var(--bg-section);\r\n }\r\n .fragmented-grid{\r\n display:flex;\r\n gap:60px;\r\n align-items:center;\r\n max-width:1180px;\r\n margin:0 auto;\r\n flex-wrap:wrap;\r\n }\r\n .fragmented-left{flex:1;min-width:320px;}\r\n .fragmented-right{flex:1;min-width:320px;display:flex;justify-content:center;}\r\n\r\n .badge-green{\r\n display:inline-block;\r\n background:#e3f1ea;\r\n color:var(--green-text);\r\n font-size:11px;\r\n font-weight:700;\r\n letter-spacing:0.5px;\r\n padding:7px 16px;\r\n border-radius:20px;\r\n margin-bottom:18px;\r\n }\r\n .fragmented-left h3{\r\n font-size:34px;\r\n font-weight:800;\r\n margin-bottom:22px;\r\n color:#13202c;\r\n }\r\n .fragmented-left p{\r\n font-size:15px;\r\n font-weight:400;\r\n line-height:1.8;\r\n color:var(--text-gray);\r\n margin-bottom:24px;\r\n }\r\n .fragmented-left .highlight-line{\r\n font-size:13.5px;\r\n font-weight:700;\r\n color:var(--green-text);\r\n line-height:1.7;\r\n margin-bottom:22px;\r\n text-transform:uppercase;\r\n }\r\n .check-list{\r\n list-style:none;\r\n }\r\n .check-list li{\r\n display:flex;\r\n align-items:center;\r\n gap:12px;\r\n margin-bottom:16px;\r\n font-size:14.5px;\r\n font-weight:600;\r\n color:#1c2530;\r\n }\r\n .check-icon{\r\n width:22px;\r\n height:22px;\r\n border-radius:50%;\r\n background:var(--green-dark);\r\n color:#fff;\r\n display:flex;\r\n align-items:center;\r\n justify-content:center;\r\n font-size:12px;\r\n flex-shrink:0;\r\n }\r\n\r\n .diagram-card{\r\n background:#fff;\r\n border-radius:18px;\r\n box-shadow:var(--shadow);\r\n padding:30px;\r\n width:100%;\r\n max-width:520px;\r\n }\r\n .diagram-inner{\r\n position:relative;\r\n width:100%;\r\n max-width:460px;\r\n aspect-ratio:1\/1;\r\n margin:0 auto;\r\n background:#eef0f2;\r\n border-radius:14px;\r\n }\r\n .diagram-circle-outline{\r\n position:absolute;\r\n top:50%;left:50%;\r\n width:78%;\r\n height:78%;\r\n transform:translate(-50%,-50%);\r\n border:2px dashed #cfd4d9;\r\n border-radius:50%;\r\n }\r\n .diagram-center{\r\n position:absolute;\r\n top:50%;left:50%;\r\n transform:translate(-50%,-50%);\r\n width:34%;\r\n aspect-ratio:1\/1;\r\n background:#fff;\r\n border-radius:50%;\r\n display:flex;\r\n align-items:center;\r\n justify-content:center;\r\n text-align:center;\r\n font-size:13px;\r\n font-weight:800;\r\n color:#13202c;\r\n box-shadow:0 8px 20px rgba(0,0,0,0.12);\r\n line-height:1.4;\r\n padding:6px;\r\n z-index:3;\r\n }\r\n .node{\r\n position:absolute;\r\n width:24%;\r\n aspect-ratio:1\/1;\r\n border-radius:50%;\r\n display:flex;\r\n flex-direction:column;\r\n align-items:center;\r\n justify-content:center;\r\n color:#fff;\r\n text-align:center;\r\n font-size:10.5px;\r\n font-weight:700;\r\n line-height:1.3;\r\n box-shadow:0 10px 20px rgba(0,0,0,0.15);\r\n transition:transform 0.4s ease;\r\n z-index:2;\r\n }\r\n .node:hover{transform:scale(1.08);}\r\n .node .icon{font-size:18px;margin-bottom:4px;}\r\n\r\n .node-design{ top:2%; left:50%; transform:translateX(-50%); background:#2f7fd1; }\r\n .node-design:hover{ transform:translateX(-50%) scale(1.08); }\r\n .node-learner{ top:24%; right:0%; background:#0c5a3f; }\r\n .node-data{ bottom:8%; right:6%; background:#b9923f; }\r\n .node-analytics{ bottom:8%; left:6%; background:#d65a35; }\r\n .node-actions{ top:24%; left:0%; background:#3aa172; }\r\n\r\n .key-concepts{\r\n background:var(--bg-section);\r\n }\r\n .key-concepts .sub-heading{\r\n font-size:13px;\r\n font-weight:600;\r\n letter-spacing:0.6px;\r\n color:var(--text-gray);\r\n margin-bottom:50px;\r\n }\r\n .cards-row{\r\n display:flex;\r\n gap:26px;\r\n flex-wrap:wrap;\r\n justify-content:center;\r\n margin-bottom:46px;\r\n align-items:stretch;\r\n }\r\n .concept-card{\r\n background:#eef2fb;\r\n border-radius:16px;\r\n padding:34px 30px;\r\n flex:1;\r\n min-width:280px;\r\n max-width:340px;\r\n text-align:left;\r\n box-shadow:0 4px 18px rgba(0,0,0,0.04);\r\n display:flex;\r\n flex-direction:column;\r\n }\r\n .concept-card.mint{background:#e9f8f0;}\r\n .concept-card.cream{background:#fbf3df;}\r\n\r\n .icon-box{\r\n width:46px;\r\n height:46px;\r\n border-radius:10px;\r\n display:flex;\r\n align-items:center;\r\n justify-content:center;\r\n color:#fff;\r\n font-size:20px;\r\n margin-bottom:20px;\r\n }\r\n .icon-box.blue{background:#2f6fe0;}\r\n .icon-box.green{background:#1f9d6e;}\r\n .icon-box.orange{background:#df8d29;}\r\n\r\n .concept-card h4{\r\n font-size:24px;\r\n font-weight:800;\r\n margin-bottom:4px;\r\n }\r\n .concept-card h4.blue-text{color:#2f6fe0;}\r\n .concept-card h4.green-text{color:#1f9d6e;}\r\n .concept-card h4.orange-text{color:#df8d29;}\r\n\r\n .concept-card .tag{\r\n font-size:11px;\r\n font-weight:700;\r\n letter-spacing:0.4px;\r\n color:#8a93a0;\r\n margin-bottom:16px;\r\n }\r\n .concept-card p{\r\n font-size:14px;\r\n font-weight:400;\r\n line-height:1.7;\r\n color:var(--text-gray);\r\n margin-bottom:18px;\r\n }\r\n\r\n \/* ===== Read More expandable content ===== *\/\r\n .concept-more{\r\n max-height:0;\r\n overflow:hidden;\r\n opacity:0;\r\n transition:max-height 0.5s ease, opacity 0.4s ease, margin 0.4s ease;\r\n margin-bottom:0;\r\n }\r\n .concept-more p{\r\n font-size:14px;\r\n font-weight:400;\r\n line-height:1.7;\r\n color:var(--text-gray);\r\n margin-bottom:18px;\r\n }\r\n .concept-more p:last-child{margin-bottom:0;}\r\n .concept-card.expanded .concept-more{\r\n max-height:1200px;\r\n opacity:1;\r\n margin-bottom:18px;\r\n }\r\n\r\n .read-more-link{\r\n font-size:12.5px;\r\n font-weight:700;\r\n display:inline-flex;\r\n align-items:center;\r\n gap:6px;\r\n transition:gap 0.3s ease;\r\n background:none;\r\n border:none;\r\n cursor:pointer;\r\n padding:0;\r\n font-family:'Montserrat', sans-serif;\r\n margin-top:auto;\r\n }\r\n .read-more-link.blue{color:#2f6fe0;}\r\n.read-more-link.green{color:#1f9d6e;}\r\n.read-more-link.orange{color:#df8d29;}\r\n\r\n.read-more-link.blue:hover,\r\n.read-more-link.blue:focus,\r\n.read-more-link.blue:active,\r\n.read-more-link.blue:visited{\r\n color:#2f6fe0 !important;\r\n background:none !important;\r\n}\r\n.read-more-link.green:hover,\r\n.read-more-link.green:focus,\r\n.read-more-link.green:active,\r\n.read-more-link.green:visited{\r\n color:#1f9d6e !important;\r\n background:none !important;\r\n}\r\n.read-more-link.orange:hover,\r\n.read-more-link.orange:focus,\r\n.read-more-link.orange:active,\r\n.read-more-link.orange:visited{\r\n color:#df8d29 !important;\r\n background:none !important;\r\n}\r\n\r\n.read-more-link .arrow{\r\n display:inline-block;\r\n transition:transform 0.3s ease;\r\n}\r\n .concept-card.expanded .read-more-link .arrow{\r\n transform:rotate(180deg);\r\n }\r\n\r\n .cta-row{\r\n display:flex;\r\n gap:18px;\r\n justify-content:center;\r\n }\r\n .btn-solid-green{\r\n background:var(--green-dark);\r\n color:#fff;\r\n font-size:12px;\r\n font-weight:700;\r\n letter-spacing:0.4px;\r\n padding:14px 30px;\r\n border-radius:30px;\r\n border:none;\r\n cursor:pointer;\r\n transition:all 0.3s ease;\r\n }\r\n .btn-solid-green:hover{\r\n background:var(--green-darker);\r\n transform:translateY(-3px);\r\n box-shadow:0 10px 20px rgba(13,107,79,0.3);\r\n }\r\n .btn-solid-gold{\r\n background:var(--gold);\r\n color:#fff;\r\n font-size:12px;\r\n font-weight:700;\r\n letter-spacing:0.4px;\r\n padding:14px 30px;\r\n border-radius:30px;\r\n border:none;\r\n cursor:pointer;\r\n transition:all 0.3s ease;\r\n }\r\n .btn-solid-gold:hover{\r\n background:var(--gold-dark);\r\n transform:translateY(-3px);\r\n box-shadow:0 10px 20px rgba(189,160,106,0.4);\r\n }\r\n\r\n .comparison-section .heading-lg{margin-bottom:10px;}\r\n .comparison-sub{\r\n font-size:13px;\r\n font-weight:700;\r\n letter-spacing:0.5px;\r\n color:var(--green-text);\r\n margin-bottom:46px;\r\n }\r\n .table-wrap{\r\n max-width:920px;\r\n margin:0 auto;\r\n border-radius:16px;\r\n overflow:hidden;\r\n box-shadow:var(--shadow);\r\n }\r\n .table-header-row{\r\n display:grid;\r\n grid-template-columns:2fr 1fr 1fr;\r\n background:var(--green-dark);\r\n color:#fff;\r\n }\r\n .table-header-row div{\r\n padding:18px 28px;\r\n font-size:12.5px;\r\n font-weight:700;\r\n letter-spacing:0.4px;\r\n }\r\n .table-row{\r\n display:grid;\r\n grid-template-columns:2fr 1fr 1fr;\r\n background:#fff;\r\n border-bottom:1px solid #eef0f2;\r\n transition:background 0.3s ease;\r\n }\r\n .table-row:last-child{border-bottom:none;}\r\n .table-row:hover{background:#fafbfc;}\r\n .table-row.alt{background:#fafdfb;}\r\n .table-row div{\r\n padding:22px 28px;\r\n display:flex;\r\n align-items:center;\r\n font-size:14.5px;\r\n font-weight:600;\r\n color:#1c2530;\r\n }\r\n .table-row .feature-col{font-weight:600;}\r\n .table-row .center-col{justify-content:center;}\r\n\r\n .check-circle{\r\n width:26px;height:26px;\r\n border-radius:50%;\r\n background:var(--green-dark);\r\n color:#fff;\r\n display:flex;align-items:center;justify-content:center;\r\n font-size:13px;\r\n }\r\n .x-circle{\r\n width:26px;height:26px;\r\n border-radius:50%;\r\n background:#fde7e7;\r\n color:#e35353;\r\n display:flex;align-items:center;justify-content:center;\r\n font-size:13px;\r\n }\r\n .status-pill{\r\n font-size:11px;\r\n font-weight:700;\r\n color:#e0833c;\r\n background:#fdf0e0;\r\n padding:6px 14px;\r\n border-radius:20px;\r\n }\r\n .status-pill.delayed{\r\n color:#e0833c;\r\n background:#fdf0e0;\r\n }\r\n\r\n .final-cta{\r\n background:linear-gradient(135deg,#0c6b4d,#0a5a42);\r\n color:#fff;\r\n text-align:center;\r\n padding:80px 30px;\r\n }\r\n .final-cta h2{\r\n font-size:34px;\r\n font-weight:800;\r\n margin-bottom:34px;\r\n color:#ffffff !important;\r\n }\r\n .final-cta-buttons{\r\n display:flex;\r\n gap:18px;\r\n justify-content:center;\r\n flex-wrap:wrap;\r\n }\r\n .btn-outline-white{\r\n border:1.5px solid #fff;\r\n color:#ffffff !important;\r\n background:transparent;\r\n font-size:12px;\r\n font-weight:700;\r\n letter-spacing:0.4px;\r\n padding:14px 30px;\r\n border-radius:30px;\r\n cursor:pointer;\r\n transition:all 0.3s ease;\r\n}\r\n .btn-outline-white:hover{\r\n background:#ffffff;\r\n color:#ffffff;\r\n }\r\n\r\n footer{\r\n text-align:center;\r\n padding:34px 20px;\r\n font-size:12.5px;\r\n font-weight:500;\r\n color:#9aa3ad;\r\n }\r\n\r\n @media(max-width:900px){\r\n .topbar{padding:16px 24px;}\r\n .hero{padding:50px 24px 70px;}\r\n .hero-text h2{font-size:34px;}\r\n section{padding:60px 24px;}\r\n .heading-lg{font-size:28px;}\r\n .fragmented-grid{gap:36px;}\r\n .table-header-row div, .table-row div{padding:16px 14px;font-size:12.5px;}\r\n .final-cta h2{font-size:26px;}\r\n }\r\n @media(max-width:600px){\r\n .topbar-titles p{display:none;}\r\n .hero-text h2{font-size:28px;}\r\n .cards-row{flex-direction:column;align-items:center;}\r\n .table-header-row div, .table-row div{padding:12px 10px;font-size:11px;}\r\n }\r\n\r\n body.elementor-editor-active .fade-up,\r\n html.idl-editor-mode .fade-up{\r\n opacity:1 !important;\r\n transform:none !important;\r\n }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n <!-- Top Bar -->\r\n <div class=\"topbar\">\r\n <div class=\"topbar-left\">\r\n <div class=\"topbar-icon\">\ud83d\udee1<\/div>\r\n <div class=\"topbar-titles\">\r\n <h1>THE IDEALS ADVANTAGE<\/h1>\r\n <p>NO COMPARABLE TOTAL SOLUTION<\/p>\r\n <\/div>\r\n <\/div>\r\n <a href=\"https:\/\/idealslearning.cite.hku.hk\/\" class=\"back-btn\">BACK \u2715<\/a>\r\n <\/div>\r\n\r\n <!-- Hero -->\r\n <div class=\"hero\">\r\n <div class=\"hero-text fade-up\">\r\n <h2>The IDEALS<br>Advantage<\/h2>\r\n <p>IDEALS bridges the gap between fragmented EdTech tools to provide a seamless, pedagogically-driven ecosystem.<\/p>\r\n <\/div>\r\n <div class=\"hero-image-wrap fade-up delay-1\">\r\n <div class=\"hero-image-card hover-lift\">\r\n <div class=\"hero-image-placeholder\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Empowering Schools -->\r\n <section class=\"center fade-up\">\r\n <div class=\"section-inner\">\r\n <span class=\"badge\">BRIDGING THE EDTECH GAP<\/span>\r\n <h2 class=\"heading-lg\">Empowering Schools for 21st Century Excellence<\/h2>\r\n <p class=\"desc-text\">The Learning Design Studio and the integrated analytics and visualization engine address several pain points for primary and secondary schools today, including the need to provide teachers with professional development and pedagogical support for the design and implementation of e-learning in blended and fully online modes that are interactive and conducive to nurturing students' 21st century competences<\/p>\r\n <div class=\"desc-more\" id=\"empowering-more\">\r\n <p>and self-directed learning (SDL), to facilitate integration of e-learning across the curriculum, provide just-in-time, supportive feedback to students, and to monitor the implementation and outcomes of strategic development plans regarding student learning at the subject\/Key Learning Area (KLA) and school levels. Teachers face a heavy burden in orchestrating a wide range of tools and resources without a single platform for easily planned integrated execution and collation of student engagement and performance.<\/p>\r\n <\/div>\r\n <button type=\"button\" class=\"btn-outline-dark\" id=\"empowering-toggle\">\r\n <span class=\"btn-label\">READ MORE<\/span> <span class=\"arrow\">\u2192<\/span>\r\n <\/button>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- Beyond Fragmented Tools -->\r\n <section class=\"fragmented-section\">\r\n <div class=\"fragmented-grid\">\r\n <div class=\"fragmented-left fade-up\">\r\n <span class=\"badge-green\">THE IDEALS ADVANTAGE<\/span>\r\n <h3>Beyond Fragmented Tools<\/h3>\r\n <p>There may be tools and platforms such as instructional design tools, learning management systems, GenAI bots, and learning analytics applications offering some of the functions found in IDEALS, but these are not integrated. There is simply no comparable total solution.<\/p>\r\n <p class=\"highlight-line\">A ROBUST CYCLE OF E-LEARNING DESIGN, IMPLEMENTATION AND FEEDBACK USING IDEALS<\/p>\r\n <ul class=\"check-list\">\r\n <li><span class=\"check-icon\">\u2713<\/span> Unified Data Architecture<\/li>\r\n <li><span class=\"check-icon\">\u2713<\/span> Pedagogical Integrity Across Platforms<\/li>\r\n <li><span class=\"check-icon\">\u2713<\/span> Seamless Teacher-Student Workflow<\/li>\r\n <li><span class=\"check-icon\">\u2713<\/span> Real-time Actionable Insights<\/li>\r\n <\/ul>\r\n <\/div>\r\n <div class=\"fragmented-right fade-up delay-1\">\r\n <div class=\"diagram-card hover-lift\">\r\n <div class=\"diagram-inner\">\r\n <div class=\"diagram-circle-outline\"><\/div>\r\n <div class=\"diagram-center\">IDEALS<br>INTEGRATION<\/div>\r\n <div class=\"node node-design\"><span class=\"icon\">\u2726<\/span>LEARNING<br>DESIGN<\/div>\r\n <div class=\"node node-learner\"><span class=\"icon\">\ud83d\udc65<\/span>LEARNER<\/div>\r\n <div class=\"node node-data\"><span class=\"icon\">\ud83d\uddc4<\/span>LEARNING<br>DATA<\/div>\r\n <div class=\"node node-analytics\"><span class=\"icon\">\ud83d\udcca<\/span>LEARNING<br>ANALYTICS<\/div>\r\n <div class=\"node node-actions\"><span class=\"icon\">\u21bb<\/span>FOLLOW-UP<br>ACTIONS<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- Key Concepts -->\r\n <section class=\"key-concepts center\">\r\n <h2 class=\"heading-lg fade-up\">Key Concepts of IDEALS<\/h2>\r\n <p class=\"sub-heading fade-up\">INTELLIGENT DESIGN-AWARE LEARNING ANALYTICS EMPOWERED 21C LEARNING & TEACHING SYSTEM<\/p>\r\n\r\n <div class=\"cards-row\">\r\n <div class=\"concept-card hover-lift fade-up\" id=\"card-lds\">\r\n <div class=\"icon-box blue\">\u25a4<\/div>\r\n <h4 class=\"blue-text\">LDS<\/h4>\r\n <div class=\"tag\">LEARNING DESIGN STUDIO<\/div>\r\n <p>A learning, assessment, and feedback design system providing context-aware and pedagogically sound guidance to teachers.<\/p>\r\n <div class=\"concept-more\">\r\n <p>A learning, assessment, and feedback design system (Learning Design Studio, LDS for short) that provides context-aware and pedagogically sound guidance to teachers in designing blended and fully online learning tasks and environments that fosters 21st century skills in the context of different KLAs, as well as recommendations for pedagogically appropriate digital tools and resources for the teaching and learning activities selected by teachers. The system will also guide the design of assessment, particularly for the purposes of assessment as well as for the targeted learning outcomes and learners.<\/p>\r\n <\/div>\r\n <button type=\"button\" class=\"read-more-link blue concept-toggle\" data-target=\"card-lds\">\r\n <span class=\"btn-label\">READ MORE<\/span> <span class=\"arrow\">\u2192<\/span>\r\n <\/button>\r\n <\/div>\r\n\r\n <div class=\"concept-card mint hover-lift fade-up delay-1\" id=\"card-ilap\">\r\n <div class=\"icon-box green\">\u2b21<\/div>\r\n <h4 class=\"green-text\">iLAP<\/h4>\r\n <div class=\"tag\">INTERACTION & ASSESSMENT<\/div>\r\n <p>A interactive Learning and Assessment Platform supporting students in managing learning.<\/p>\r\n <div class=\"concept-more\">\r\n <p>The completed designs can be deployed directly on iLAP. iLAP (Interactive Learning and Assessment Platform) is a learning management system (LMS) that supports, in addition to the basic functions needed for course and student administration, messaging and communication, distribution of course materials, assignments, etc., a one-stop easy integrated access for students to a wide range of interactive e-learning and assessment activities using popular digital tools and resources for online, on-site, self-directed and collaborative inquiry in groups, and for whole class learning and teaching activities.<\/p>\r\n <\/div>\r\n <button type=\"button\" class=\"read-more-link green concept-toggle\" data-target=\"card-ilap\">\r\n <span class=\"btn-label\">READ MORE<\/span> <span class=\"arrow\">\u2192<\/span>\r\n <\/button>\r\n <\/div>\r\n\r\n <div class=\"concept-card cream hover-lift fade-up delay-2\" id=\"card-dlav\">\r\n <div class=\"icon-box orange\">\ud83d\uddc3<\/div>\r\n <h4 class=\"orange-text\">DLAV<\/h4>\r\n <div class=\"tag\">ANALYTICS & VISUALIZATION<\/div>\r\n <p>A design-aware learning analytics engine that analyzes student performance and provides targeted feedback.<\/p>\r\n <div class=\"concept-more\">\r\n <p>A design-aware learning analytics and visualization engine (DLAV) that analyzes student learning behavior and performance in tasks set by the teacher; and based on the teachers' design intention stored on LDS to provide feedback to teachers and make recommendations on feedback and intervention to students as appropriate to foster students' self-regulation and to improve student learning.<\/p>\r\n <\/div>\r\n <button type=\"button\" class=\"read-more-link orange concept-toggle\" data-target=\"card-dlav\">\r\n <span class=\"btn-label\">READ MORE<\/span> <span class=\"arrow\">\u2192<\/span>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"cta-row fade-up\">\r\n <a href=\"mailto:ideals@hku.hk?subject=IDEALS:%20Request%20a%20Demo\" class=\"btn-solid-green\" style=\"color: #ffffff;\">REQUEST DEMO<\/a>\r\n <a href=\"https:\/\/web.edcity.hk\/en\/elafp\/project\/20210212\/\" style=\"display:inline-block;\"><button class=\"btn-solid-gold\">SUBSCRIBE<\/button><\/a>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- Comparison -->\r\n <section class=\"comparison-section center\">\r\n <h2 class=\"heading-lg fade-up\">The Comparison<\/h2>\r\n <p class=\"comparison-sub fade-up\">IDEALS VS FRAGMENTED SOLUTIONS<\/p>\r\n\r\n <div class=\"table-wrap fade-up\">\r\n <div class=\"table-header-row\">\r\n <div>FEATURE<\/div>\r\n <div style=\"text-align:center;\">IDEALS<\/div>\r\n <div style=\"text-align:center;\">OTHER TOOLS<\/div>\r\n <\/div>\r\n\r\n <div class=\"table-row\">\r\n <div class=\"feature-col\">Integrated Design & Analytics<\/div>\r\n <div class=\"center-col\"><span class=\"check-circle\">\u2713<\/span><\/div>\r\n <div class=\"center-col\"><span class=\"x-circle\">\u2715<\/span><\/div>\r\n <\/div>\r\n <div class=\"table-row\">\r\n <div class=\"feature-col\">AI Pedagogical Scaffolding<\/div>\r\n <div class=\"center-col\"><span class=\"check-circle\">\u2713<\/span><\/div>\r\n <div class=\"center-col\"><span class=\"status-pill\">PARTIAL<\/span><\/div>\r\n <\/div>\r\n <div class=\"table-row\">\r\n <div class=\"feature-col\">Unified User Experience<\/div>\r\n <div class=\"center-col\"><span class=\"check-circle\">\u2713<\/span><\/div>\r\n <div class=\"center-col\"><span class=\"x-circle\">\u2715<\/span><\/div>\r\n <\/div>\r\n <div class=\"table-row\">\r\n <div class=\"feature-col\">Real-time Feedback Loops<\/div>\r\n <div class=\"center-col\"><span class=\"check-circle\">\u2713<\/span><\/div>\r\n <div class=\"center-col\"><span class=\"status-pill delayed\">DELAYED<\/span><\/div>\r\n <\/div>\r\n <div class=\"table-row\">\r\n <div class=\"feature-col\">Evidence-based Iteration<\/div>\r\n <div class=\"center-col\"><span class=\"check-circle\">\u2713<\/span><\/div>\r\n <div class=\"center-col\"><span class=\"x-circle\">\u2715<\/span><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- Final CTA -->\r\n <div class=\"final-cta\">\r\n <span class=\"badge\" style=\"background:rgba(255,255,255,0.15);color:#fff;\">BRIDGING THE EDTECH GAP<\/span>\r\n <h2>Experience the power of integration<\/h2>\r\n <div class=\"final-cta-buttons\">\r\n <a href=\"mailto:ideals@hku.hk?subject=IDEALS:%20Request%20a%20Demo\" class=\"btn-solid-green\" style=\"color: #0d6b4f; background-color: #ffffff;\">REQUEST DEMO<\/a>\r\n <a href=\"https:\/\/idealslearning.cite.hku.hk\/\" class=\"btn-outline-white\" style=\"display:inline-block;\">BACK TO MAIN SITE<\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Footer -->\r\n <footer>\r\n \u00a9 2024 IDEALS EDTECH \u2022 THE UNIVERSITY OF HONG KONG\r\n <\/footer>\r\n\r\n<script>\r\n (function () {\r\n function isElementorEditor() {\r\n try {\r\n if (document.body && document.body.classList.contains('elementor-editor-active')) {\r\n return true;\r\n }\r\n if (window.self !== window.top) {\r\n if (window.top.document.body.classList.contains('elementor-editor-active')) {\r\n return true;\r\n }\r\n }\r\n } catch (e) {\r\n return true;\r\n }\r\n return false;\r\n }\r\n\r\n if (isElementorEditor()) {\r\n document.documentElement.classList.add('idl-editor-mode');\r\n }\r\n })();\r\n\r\n document.addEventListener('DOMContentLoaded', function () {\r\n const elements = document.querySelectorAll('.fade-up');\r\n\r\n if (!document.documentElement.classList.contains('idl-editor-mode')) {\r\n elements.forEach(el => el.classList.add('fade-up-init'));\r\n\r\n if (!('IntersectionObserver' in window)) {\r\n elements.forEach(el => el.classList.add('visible'));\r\n } else {\r\n const observer = new IntersectionObserver((entries) => {\r\n entries.forEach(entry => {\r\n if (entry.isIntersecting) {\r\n entry.target.classList.add('visible');\r\n }\r\n });\r\n }, { threshold: 0.15 });\r\n\r\n elements.forEach(el => observer.observe(el));\r\n }\r\n }\r\n\r\n \/* ===== Read More \/ Read Less toggle for concept cards ===== *\/\r\n const toggles = document.querySelectorAll('.concept-toggle');\r\n toggles.forEach(function (btn) {\r\n btn.addEventListener('click', function () {\r\n const targetId = btn.getAttribute('data-target');\r\n const card = document.getElementById(targetId);\r\n if (!card) return;\r\n\r\n const label = btn.querySelector('.btn-label');\r\n const isExpanded = card.classList.toggle('expanded');\r\n\r\n if (isExpanded) {\r\n label.textContent = 'READ LESS';\r\n } else {\r\n label.textContent = 'READ MORE';\r\n }\r\n });\r\n });\r\n\r\n \/* ===== Read More \/ Read Less toggle for Empowering Schools section ===== *\/\r\n const empoweringToggle = document.getElementById('empowering-toggle');\r\n const empoweringMore = document.getElementById('empowering-more');\r\n if (empoweringToggle && empoweringMore) {\r\n empoweringToggle.addEventListener('click', function () {\r\n const label = empoweringToggle.querySelector('.btn-label');\r\n const isExpanded = empoweringMore.classList.toggle('expanded');\r\n empoweringToggle.classList.toggle('expanded', isExpanded);\r\n\r\n if (isExpanded) {\r\n label.textContent = 'READ LESS';\r\n } else {\r\n label.textContent = 'READ MORE';\r\n }\r\n });\r\n }\r\n });\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>The IDEALS Advantage \ud83d\udee1 THE IDEALS ADVANTAGE NO COMPARABLE TOTAL SOLUTION BACK \u2715 The IDEALSAdvantage IDEALS bridges the gap between fragmented EdTech tools to provide a seamless, pedagogically-driven ecosystem. BRIDGING THE EDTECH GAP Empowering Schools for 21st Century Excellence The Learning Design Studio and the integrated analytics and visualization engine address several pain points for […]<\/p>\n","protected":false},"author":6,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-778","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/idealslearning.cite.hku.hk\/index.php?rest_route=\/wp\/v2\/pages\/778","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/idealslearning.cite.hku.hk\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/idealslearning.cite.hku.hk\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/idealslearning.cite.hku.hk\/index.php?rest_route=\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/idealslearning.cite.hku.hk\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=778"}],"version-history":[{"count":40,"href":"https:\/\/idealslearning.cite.hku.hk\/index.php?rest_route=\/wp\/v2\/pages\/778\/revisions"}],"predecessor-version":[{"id":1570,"href":"https:\/\/idealslearning.cite.hku.hk\/index.php?rest_route=\/wp\/v2\/pages\/778\/revisions\/1570"}],"wp:attachment":[{"href":"https:\/\/idealslearning.cite.hku.hk\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=778"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}