iLAP: Assessment<\/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=Poppins:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\">\r\n<style>\r\n :root{\r\n --green:#1a9c6e;\r\n --green-dark:#158058;\r\n --navy:#0c1530;\r\n --navy-card:#141d3d;\r\n --text-dark:#13202c;\r\n --text-gray:#5b6573;\r\n --bg-light:#f3f5f8;\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:'Poppins', 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 a{text-decoration:none;color:inherit;}\r\n\r\n \/* ===== Animation Utility ===== *\/\r\n .fade-up{\r\n opacity:0;\r\n transform:translateY(30px);\r\n transition:opacity 0.8s ease, transform 0.8s ease;\r\n }\r\n .fade-up.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 \/* ===== Elementor Editor \u2014 make everything visible immediately ===== *\/\r\n .elementor-editor-active .fade-up,\r\n .elementor-editor-preview .fade-up {\r\n opacity:1 !important;\r\n transform:translateY(0) !important;\r\n }\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.14);\r\n }\r\n\r\n \/* ===== Top Bar ===== *\/\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);\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: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.4px;\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 Section ===== *\/\r\n .hero{\r\n background:var(--bg-light);\r\n padding:70px 60px 90px;\r\n text-align:center;\r\n }\r\n .badge{\r\n display:inline-block;\r\n background:#daf1e7;\r\n color:var(--green);\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:30px;\r\n }\r\n .hero h2{\r\n font-size:50px;\r\n font-weight:800;\r\n line-height:1.2;\r\n color:#13202c;\r\n margin-bottom:36px;\r\n max-width:900px;\r\n margin-left:auto;\r\n margin-right:auto;\r\n }\r\n .hero-sub-row{\r\n display:flex;\r\n align-items:flex-start;\r\n justify-content:center;\r\n gap:40px;\r\n flex-wrap:wrap;\r\n margin-bottom:50px;\r\n }\r\n .hero-desc{\r\n font-size:16px;\r\n font-weight:400;\r\n line-height:1.7;\r\n color:var(--text-gray);\r\n max-width:480px;\r\n text-align:left;\r\n }\r\n .btn-demo{\r\n background:var(--green);\r\n color:#fff;\r\n font-size:12.5px;\r\n font-weight:700;\r\n letter-spacing:0.4px;\r\n padding:18px 32px;\r\n border-radius:30px;\r\n border:none;\r\n cursor:pointer;\r\n white-space:nowrap;\r\n transition:all 0.3s ease;\r\n box-shadow:0 10px 22px rgba(26,156,110,0.3);\r\n }\r\n .btn-demo:hover{\r\n background:var(--green-dark);\r\n transform:translateY(-3px);\r\n box-shadow:0 14px 26px rgba(26,156,110,0.4);\r\n }\r\n\r\n .hero-image-wrap{\r\n max-width:980px;\r\n margin:0 auto;\r\n }\r\n .hero-image-card{\r\n border-radius:18px;\r\n overflow:hidden;\r\n box-shadow:0 25px 50px rgba(0,0,0,0.18);\r\n transition:transform 0.5s ease;\r\n }\r\n .hero-image-card:hover{\r\n transform:scale(1.015);\r\n }\r\n .hero-image-placeholder{\r\n width:100%;\r\n height:480px;\r\n background:#dfe3e8 url('https:\/\/idealslearning.cite.hku.hk\/wp-content\/uploads\/2026\/07\/1AuR3bZlEZgGiWDahPylV_U_Tfi-yLIx6.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 \/* ===== Versatile Learning Management (Dark Section) ===== *\/\r\n .versatile-section{\r\n background:var(--navy);\r\n padding:90px 60px;\r\n }\r\n .versatile-grid{\r\n display:flex;\r\n gap:50px;\r\n align-items:flex-start;\r\n max-width:1180px;\r\n margin:0 auto;\r\n flex-wrap:wrap;\r\n }\r\n .versatile-left{flex:1;min-width:300px;color:#fff;}\r\n .versatile-right{flex:1.4;min-width:340px;}\r\n\r\n .versatile-left h3{\r\n font-size:34px;\r\n font-weight:800;\r\n line-height:1.3;\r\n margin-bottom:22px;\r\n color:#ffffff;\r\n}\r\n .divider-line{\r\n width:60px;\r\n height:4px;\r\n background:var(--green);\r\n border-radius:4px;\r\n margin-bottom:26px;\r\n }\r\n .versatile-left p{\r\n font-size:14.5px;\r\n font-weight:400;\r\n line-height:1.85;\r\n color:#a7afc0;\r\n max-width:460px;\r\n }\r\n\r\n .feature-grid{\r\n display:grid;\r\n grid-template-columns:1fr 1fr;\r\n gap:18px;\r\n }\r\n .feature-box{\r\n background:var(--navy-card);\r\n border-radius:16px;\r\n padding:24px 22px;\r\n transition:transform 0.35s ease, background 0.35s ease;\r\n }\r\n .feature-box:hover{\r\n transform:translateY(-4px);\r\n background:#1a2548;\r\n }\r\n .feature-icon{\r\n font-size:18px;\r\n margin-bottom:14px;\r\n color:var(--green);\r\n }\r\n .feature-box h5{\r\n font-size:14.5px;\r\n font-weight:700;\r\n color:#fff;\r\n margin-bottom:8px;\r\n }\r\n .feature-box p{\r\n font-size:12px;\r\n font-weight:400;\r\n line-height:1.6;\r\n color:#8993ab;\r\n }\r\n\r\n \/* ===== Final CTA ===== *\/\r\n .final-cta-wrap{\r\n padding:90px 60px 100px;\r\n display:flex;\r\n justify-content:center;\r\n }\r\n .final-cta{\r\n background:linear-gradient(135deg,#1aa377,#147f57);\r\n border-radius:24px;\r\n color:#fff;\r\n text-align:center;\r\n padding:60px 30px 0;\r\n max-width:920px;\r\n width:100%;\r\n box-shadow:0 30px 60px rgba(26,156,110,0.22);\r\n overflow:hidden;\r\n }\r\n .final-cta h2{\r\n font-size:34px;\r\n font-weight:800;\r\n line-height:1.3;\r\n margin-bottom:34px;\r\n max-width:700px;\r\n margin-left:auto;\r\n margin-right:auto;\r\n color:#ffffff;\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 margin-bottom:40px;\r\n }\r\n .btn-white{\r\n background:#fff;\r\n color:#1a9c6e !important;\r\n font-size:12.5px;\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-white:hover{\r\n transform: translateY(-3px);\r\n box-shadow: 0 10px 20px rgba(0,0,0,0.2);\r\n background-color: #ffff;\r\n color: #ffffff;\r\n}\r\n .btn-outline-white{\r\n border:1.5px solid #fff;\r\n color:#ffffff;\r\n background:transparent;\r\n font-size:12.5px;\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:#fff;\r\n color:var(--green);\r\n }\r\n .final-cta-base{\r\n height:26px;\r\n background:rgba(0,0,0,0.08);\r\n margin:0 -1px;\r\n }\r\n\r\n \/* ===== Responsive ===== *\/\r\n @media(max-width:900px){\r\n .topbar{padding:16px 24px;}\r\n .hero{padding:50px 24px 70px;}\r\n .hero h2{font-size:34px;}\r\n .versatile-section{padding:60px 24px;}\r\n .final-cta-wrap{padding:60px 24px 70px;}\r\n .versatile-left h3{font-size:26px;}\r\n .final-cta h2{font-size:26px;}\r\n .feature-grid{grid-template-columns:1fr 1fr;}\r\n }\r\n @media(max-width:600px){\r\n .topbar-titles p{display:none;}\r\n .hero h2{font-size:26px;}\r\n .hero-desc{text-align:center;max-width:100%;}\r\n .hero-sub-row{flex-direction:column;align-items:center;}\r\n .feature-grid{grid-template-columns:1fr;}\r\n .final-cta h2{font-size:22px;}\r\n }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n \r\n <div class=\"topbar\">\r\n <div class=\"topbar-left\">\r\n <div class=\"topbar-icon\">\ud83d\udcd6<\/div>\r\n <div class=\"topbar-titles\">\r\n <h1>iLAP: Assessment<\/h1>\r\n <p>INTERACTIVE LEARNING ACTIVITY PLATFORM<\/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 \r\n <section class=\"hero\">\r\n <span class=\"badge fade-up\">INTERACTIVE LMS<\/span>\r\n <h2 class=\"fade-up\">Interactive Learning and Assessment Platform (iLAP)<\/h2>\r\n <div class=\"hero-sub-row fade-up delay-1\">\r\n <p class=\"hero-desc\">A versatile learning management system accessible by both teachers and students for seamless and active learning.<\/p>\r\n <a href=\"mailto:ideals@hku.hk?subject=IDEALS:%20Request%20a%20Demo\" \r\n\r\n style=\"display:inline-block; background:#1a9c6e; color:#ffffff; border:1.5px solid #ffffff; padding:14px 30px; border-radius:30px; font-size:12.5px; font-weight:700; letter-spacing:0.4px; text-decoration:none;\">\r\n\r\n REQUEST DEMO\r\n\r\n<\/a>\r\n <\/div>\r\n <div class=\"hero-image-wrap fade-up delay-2\">\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 <\/section>\r\n\r\n \r\n <section class=\"versatile-section\">\r\n <div class=\"versatile-grid\">\r\n <div class=\"versatile-left fade-up\">\r\n <h3>Versatile Learning Management<\/h3>\r\n <div class=\"divider-line\"><\/div>\r\n <p>The concept of iLAP serves both teachers and students as a versatile learning management system for pedagogical engagement and data capture within the context of design intent.<\/p>\r\n <\/div>\r\n <div class=\"versatile-right fade-up delay-1\">\r\n <div class=\"feature-grid\">\r\n <div class=\"feature-box hover-lift\">\r\n <div class=\"feature-icon\">\ud83d\udc65<\/div>\r\n <h5>Interactive Learning<\/h5>\r\n <p>Wide range of tools including forums, workshops, and collaborative spaces.<\/p>\r\n <\/div>\r\n <div class=\"feature-box hover-lift\">\r\n <div class=\"feature-icon\">\ud83d\udcda<\/div>\r\n <h5>Diversified Assessment<\/h5>\r\n <p>Supports both formative and summative evaluation across different activities.<\/p>\r\n <\/div>\r\n <div class=\"feature-box hover-lift\">\r\n <div class=\"feature-icon\">\u25a6<\/div>\r\n <h5>Design-Aware tracking<\/h5>\r\n <p>Links learning activity data back to the pedagogical intent.<\/p>\r\n <\/div>\r\n <div class=\"feature-box hover-lift\">\r\n <div class=\"feature-icon\">\u2726<\/div>\r\n <h5>H5P Integration<\/h5>\r\n <p>Seamless support for rich, interactive content embedding.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <div class=\"final-cta-wrap\">\r\n <div class=\"final-cta fade-up\">\r\n <h2>Empower Collaborative Learning Today<\/h2>\r\n <div class=\"final-cta-buttons\">\r\n <a href=\"mailto:ideals@hku.hk?subject=IDEALS:%20Request%20a%20Demo\" \r\n\r\n style=\"display:inline-block; background:#ffffff; color:#1a9c6e; border:1.5px solid #ffffff; padding:14px 30px; border-radius:30px; font-size:12.5px; font-weight:700; letter-spacing:0.4px; text-decoration:none;\">\r\n\r\n REQUEST DEMO\r\n\r\n<\/a>\r\n <a href=\"https:\/\/web.edcity.hk\/en\/elafp\/project\/20210212\/\"\r\n target=\"_blank\"\r\n rel=\"noopener\"\r\n class=\"btn-outline-white\"\r\n style=\"color:#ffffff;\">\r\n SUBSCRIBE\r\n<\/a>\r\n <\/div>\r\n <div class=\"final-cta-base\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n<script>\r\n(function() {\r\n function initFadeUp() {\r\n var elements = document.querySelectorAll('.fade-up');\r\n\r\n \/* If inside Elementor editor \u2014 make all visible immediately *\/\r\n if (\r\n document.body.classList.contains('elementor-editor-active') ||\r\n document.body.classList.contains('elementor-editor-preview') ||\r\n window.elementorFrontend ||\r\n window.elementor\r\n ) {\r\n elements.forEach(function(el) {\r\n el.classList.add('visible');\r\n });\r\n return;\r\n }\r\n\r\n \/* Normal front-end \u2014 use IntersectionObserver *\/\r\n if ('IntersectionObserver' in window) {\r\n var observer = new IntersectionObserver(function(entries) {\r\n entries.forEach(function(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(function(el) { observer.observe(el); });\r\n } else {\r\n \/* Fallback for old browsers *\/\r\n elements.forEach(function(el) { el.classList.add('visible'); });\r\n }\r\n }\r\n\r\n \/* Run immediately + on DOM ready + on Elementor frontend init *\/\r\n initFadeUp();\r\n document.addEventListener('DOMContentLoaded', initFadeUp);\r\n\r\n \/* Elementor fires this when editor reloads a widget *\/\r\n window.addEventListener('elementor\/frontend\/init', initFadeUp);\r\n\r\n \/* Extra safety: run again after short delay to catch late renders *\/\r\n setTimeout(initFadeUp, 300);\r\n setTimeout(initFadeUp, 800);\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>iLAP: Assessment \ud83d\udcd6 iLAP: Assessment INTERACTIVE LEARNING ACTIVITY PLATFORM BACK \u2715 INTERACTIVE LMS Interactive Learning and Assessment Platform (iLAP) A versatile learning management system accessible by both teachers and students for seamless and active learning. REQUEST DEMO Versatile Learning Management The concept of iLAP serves both teachers and students as a versatile learning management system […]<\/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-764","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/idealslearning.cite.hku.hk\/index.php?rest_route=\/wp\/v2\/pages\/764","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=764"}],"version-history":[{"count":28,"href":"https:\/\/idealslearning.cite.hku.hk\/index.php?rest_route=\/wp\/v2\/pages\/764\/revisions"}],"predecessor-version":[{"id":1653,"href":"https:\/\/idealslearning.cite.hku.hk\/index.php?rest_route=\/wp\/v2\/pages\/764\/revisions\/1653"}],"wp:attachment":[{"href":"https:\/\/idealslearning.cite.hku.hk\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=764"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n\r\n\r\niLAP: Assessment<\/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=Poppins:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\">\r\n<style>\r\n :root{\r\n --green:#1a9c6e;\r\n --green-dark:#158058;\r\n --navy:#0c1530;\r\n --navy-card:#141d3d;\r\n --text-dark:#13202c;\r\n --text-gray:#5b6573;\r\n --bg-light:#f3f5f8;\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:'Poppins', 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 a{text-decoration:none;color:inherit;}\r\n\r\n \/* ===== Animation Utility ===== *\/\r\n .fade-up{\r\n opacity:0;\r\n transform:translateY(30px);\r\n transition:opacity 0.8s ease, transform 0.8s ease;\r\n }\r\n .fade-up.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 \/* ===== Elementor Editor \u2014 make everything visible immediately ===== *\/\r\n .elementor-editor-active .fade-up,\r\n .elementor-editor-preview .fade-up {\r\n opacity:1 !important;\r\n transform:translateY(0) !important;\r\n }\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.14);\r\n }\r\n\r\n \/* ===== Top Bar ===== *\/\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);\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: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.4px;\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 Section ===== *\/\r\n .hero{\r\n background:var(--bg-light);\r\n padding:70px 60px 90px;\r\n text-align:center;\r\n }\r\n .badge{\r\n display:inline-block;\r\n background:#daf1e7;\r\n color:var(--green);\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:30px;\r\n }\r\n .hero h2{\r\n font-size:50px;\r\n font-weight:800;\r\n line-height:1.2;\r\n color:#13202c;\r\n margin-bottom:36px;\r\n max-width:900px;\r\n margin-left:auto;\r\n margin-right:auto;\r\n }\r\n .hero-sub-row{\r\n display:flex;\r\n align-items:flex-start;\r\n justify-content:center;\r\n gap:40px;\r\n flex-wrap:wrap;\r\n margin-bottom:50px;\r\n }\r\n .hero-desc{\r\n font-size:16px;\r\n font-weight:400;\r\n line-height:1.7;\r\n color:var(--text-gray);\r\n max-width:480px;\r\n text-align:left;\r\n }\r\n .btn-demo{\r\n background:var(--green);\r\n color:#fff;\r\n font-size:12.5px;\r\n font-weight:700;\r\n letter-spacing:0.4px;\r\n padding:18px 32px;\r\n border-radius:30px;\r\n border:none;\r\n cursor:pointer;\r\n white-space:nowrap;\r\n transition:all 0.3s ease;\r\n box-shadow:0 10px 22px rgba(26,156,110,0.3);\r\n }\r\n .btn-demo:hover{\r\n background:var(--green-dark);\r\n transform:translateY(-3px);\r\n box-shadow:0 14px 26px rgba(26,156,110,0.4);\r\n }\r\n\r\n .hero-image-wrap{\r\n max-width:980px;\r\n margin:0 auto;\r\n }\r\n .hero-image-card{\r\n border-radius:18px;\r\n overflow:hidden;\r\n box-shadow:0 25px 50px rgba(0,0,0,0.18);\r\n transition:transform 0.5s ease;\r\n }\r\n .hero-image-card:hover{\r\n transform:scale(1.015);\r\n }\r\n .hero-image-placeholder{\r\n width:100%;\r\n height:480px;\r\n background:#dfe3e8 url('https:\/\/idealslearning.cite.hku.hk\/wp-content\/uploads\/2026\/07\/1AuR3bZlEZgGiWDahPylV_U_Tfi-yLIx6.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 \/* ===== Versatile Learning Management (Dark Section) ===== *\/\r\n .versatile-section{\r\n background:var(--navy);\r\n padding:90px 60px;\r\n }\r\n .versatile-grid{\r\n display:flex;\r\n gap:50px;\r\n align-items:flex-start;\r\n max-width:1180px;\r\n margin:0 auto;\r\n flex-wrap:wrap;\r\n }\r\n .versatile-left{flex:1;min-width:300px;color:#fff;}\r\n .versatile-right{flex:1.4;min-width:340px;}\r\n\r\n .versatile-left h3{\r\n font-size:34px;\r\n font-weight:800;\r\n line-height:1.3;\r\n margin-bottom:22px;\r\n color:#ffffff;\r\n}\r\n .divider-line{\r\n width:60px;\r\n height:4px;\r\n background:var(--green);\r\n border-radius:4px;\r\n margin-bottom:26px;\r\n }\r\n .versatile-left p{\r\n font-size:14.5px;\r\n font-weight:400;\r\n line-height:1.85;\r\n color:#a7afc0;\r\n max-width:460px;\r\n }\r\n\r\n .feature-grid{\r\n display:grid;\r\n grid-template-columns:1fr 1fr;\r\n gap:18px;\r\n }\r\n .feature-box{\r\n background:var(--navy-card);\r\n border-radius:16px;\r\n padding:24px 22px;\r\n transition:transform 0.35s ease, background 0.35s ease;\r\n }\r\n .feature-box:hover{\r\n transform:translateY(-4px);\r\n background:#1a2548;\r\n }\r\n .feature-icon{\r\n font-size:18px;\r\n margin-bottom:14px;\r\n color:var(--green);\r\n }\r\n .feature-box h5{\r\n font-size:14.5px;\r\n font-weight:700;\r\n color:#fff;\r\n margin-bottom:8px;\r\n }\r\n .feature-box p{\r\n font-size:12px;\r\n font-weight:400;\r\n line-height:1.6;\r\n color:#8993ab;\r\n }\r\n\r\n \/* ===== Final CTA ===== *\/\r\n .final-cta-wrap{\r\n padding:90px 60px 100px;\r\n display:flex;\r\n justify-content:center;\r\n }\r\n .final-cta{\r\n background:linear-gradient(135deg,#1aa377,#147f57);\r\n border-radius:24px;\r\n color:#fff;\r\n text-align:center;\r\n padding:60px 30px 0;\r\n max-width:920px;\r\n width:100%;\r\n box-shadow:0 30px 60px rgba(26,156,110,0.22);\r\n overflow:hidden;\r\n }\r\n .final-cta h2{\r\n font-size:34px;\r\n font-weight:800;\r\n line-height:1.3;\r\n margin-bottom:34px;\r\n max-width:700px;\r\n margin-left:auto;\r\n margin-right:auto;\r\n color:#ffffff;\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 margin-bottom:40px;\r\n }\r\n .btn-white{\r\n background:#fff;\r\n color:#1a9c6e !important;\r\n font-size:12.5px;\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-white:hover{\r\n transform: translateY(-3px);\r\n box-shadow: 0 10px 20px rgba(0,0,0,0.2);\r\n background-color: #ffff;\r\n color: #ffffff;\r\n}\r\n .btn-outline-white{\r\n border:1.5px solid #fff;\r\n color:#ffffff;\r\n background:transparent;\r\n font-size:12.5px;\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:#fff;\r\n color:var(--green);\r\n }\r\n .final-cta-base{\r\n height:26px;\r\n background:rgba(0,0,0,0.08);\r\n margin:0 -1px;\r\n }\r\n\r\n \/* ===== Responsive ===== *\/\r\n @media(max-width:900px){\r\n .topbar{padding:16px 24px;}\r\n .hero{padding:50px 24px 70px;}\r\n .hero h2{font-size:34px;}\r\n .versatile-section{padding:60px 24px;}\r\n .final-cta-wrap{padding:60px 24px 70px;}\r\n .versatile-left h3{font-size:26px;}\r\n .final-cta h2{font-size:26px;}\r\n .feature-grid{grid-template-columns:1fr 1fr;}\r\n }\r\n @media(max-width:600px){\r\n .topbar-titles p{display:none;}\r\n .hero h2{font-size:26px;}\r\n .hero-desc{text-align:center;max-width:100%;}\r\n .hero-sub-row{flex-direction:column;align-items:center;}\r\n .feature-grid{grid-template-columns:1fr;}\r\n .final-cta h2{font-size:22px;}\r\n }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n \r\n <div class=\"topbar\">\r\n <div class=\"topbar-left\">\r\n <div class=\"topbar-icon\">\ud83d\udcd6<\/div>\r\n <div class=\"topbar-titles\">\r\n <h1>iLAP: Assessment<\/h1>\r\n <p>INTERACTIVE LEARNING ACTIVITY PLATFORM<\/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 \r\n <section class=\"hero\">\r\n <span class=\"badge fade-up\">INTERACTIVE LMS<\/span>\r\n <h2 class=\"fade-up\">Interactive Learning and Assessment Platform (iLAP)<\/h2>\r\n <div class=\"hero-sub-row fade-up delay-1\">\r\n <p class=\"hero-desc\">A versatile learning management system accessible by both teachers and students for seamless and active learning.<\/p>\r\n <a href=\"mailto:ideals@hku.hk?subject=IDEALS:%20Request%20a%20Demo\" \r\n\r\n style=\"display:inline-block; background:#1a9c6e; color:#ffffff; border:1.5px solid #ffffff; padding:14px 30px; border-radius:30px; font-size:12.5px; font-weight:700; letter-spacing:0.4px; text-decoration:none;\">\r\n\r\n REQUEST DEMO\r\n\r\n<\/a>\r\n <\/div>\r\n <div class=\"hero-image-wrap fade-up delay-2\">\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 <\/section>\r\n\r\n \r\n <section class=\"versatile-section\">\r\n <div class=\"versatile-grid\">\r\n <div class=\"versatile-left fade-up\">\r\n <h3>Versatile Learning Management<\/h3>\r\n <div class=\"divider-line\"><\/div>\r\n <p>The concept of iLAP serves both teachers and students as a versatile learning management system for pedagogical engagement and data capture within the context of design intent.<\/p>\r\n <\/div>\r\n <div class=\"versatile-right fade-up delay-1\">\r\n <div class=\"feature-grid\">\r\n <div class=\"feature-box hover-lift\">\r\n <div class=\"feature-icon\">\ud83d\udc65<\/div>\r\n <h5>Interactive Learning<\/h5>\r\n <p>Wide range of tools including forums, workshops, and collaborative spaces.<\/p>\r\n <\/div>\r\n <div class=\"feature-box hover-lift\">\r\n <div class=\"feature-icon\">\ud83d\udcda<\/div>\r\n <h5>Diversified Assessment<\/h5>\r\n <p>Supports both formative and summative evaluation across different activities.<\/p>\r\n <\/div>\r\n <div class=\"feature-box hover-lift\">\r\n <div class=\"feature-icon\">\u25a6<\/div>\r\n <h5>Design-Aware tracking<\/h5>\r\n <p>Links learning activity data back to the pedagogical intent.<\/p>\r\n <\/div>\r\n <div class=\"feature-box hover-lift\">\r\n <div class=\"feature-icon\">\u2726<\/div>\r\n <h5>H5P Integration<\/h5>\r\n <p>Seamless support for rich, interactive content embedding.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <div class=\"final-cta-wrap\">\r\n <div class=\"final-cta fade-up\">\r\n <h2>Empower Collaborative Learning Today<\/h2>\r\n <div class=\"final-cta-buttons\">\r\n <a href=\"mailto:ideals@hku.hk?subject=IDEALS:%20Request%20a%20Demo\" \r\n\r\n style=\"display:inline-block; background:#ffffff; color:#1a9c6e; border:1.5px solid #ffffff; padding:14px 30px; border-radius:30px; font-size:12.5px; font-weight:700; letter-spacing:0.4px; text-decoration:none;\">\r\n\r\n REQUEST DEMO\r\n\r\n<\/a>\r\n <a href=\"https:\/\/web.edcity.hk\/en\/elafp\/project\/20210212\/\"\r\n target=\"_blank\"\r\n rel=\"noopener\"\r\n class=\"btn-outline-white\"\r\n style=\"color:#ffffff;\">\r\n SUBSCRIBE\r\n<\/a>\r\n <\/div>\r\n <div class=\"final-cta-base\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n<script>\r\n(function() {\r\n function initFadeUp() {\r\n var elements = document.querySelectorAll('.fade-up');\r\n\r\n \/* If inside Elementor editor \u2014 make all visible immediately *\/\r\n if (\r\n document.body.classList.contains('elementor-editor-active') ||\r\n document.body.classList.contains('elementor-editor-preview') ||\r\n window.elementorFrontend ||\r\n window.elementor\r\n ) {\r\n elements.forEach(function(el) {\r\n el.classList.add('visible');\r\n });\r\n return;\r\n }\r\n\r\n \/* Normal front-end \u2014 use IntersectionObserver *\/\r\n if ('IntersectionObserver' in window) {\r\n var observer = new IntersectionObserver(function(entries) {\r\n entries.forEach(function(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(function(el) { observer.observe(el); });\r\n } else {\r\n \/* Fallback for old browsers *\/\r\n elements.forEach(function(el) { el.classList.add('visible'); });\r\n }\r\n }\r\n\r\n \/* Run immediately + on DOM ready + on Elementor frontend init *\/\r\n initFadeUp();\r\n document.addEventListener('DOMContentLoaded', initFadeUp);\r\n\r\n \/* Elementor fires this when editor reloads a widget *\/\r\n window.addEventListener('elementor\/frontend\/init', initFadeUp);\r\n\r\n \/* Extra safety: run again after short delay to catch late renders *\/\r\n setTimeout(initFadeUp, 300);\r\n setTimeout(initFadeUp, 800);\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>iLAP: Assessment \ud83d\udcd6 iLAP: Assessment INTERACTIVE LEARNING ACTIVITY PLATFORM BACK \u2715 INTERACTIVE LMS Interactive Learning and Assessment Platform (iLAP) A versatile learning management system accessible by both teachers and students for seamless and active learning. REQUEST DEMO Versatile Learning Management The concept of iLAP serves both teachers and students as a versatile learning management system […]<\/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-764","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/idealslearning.cite.hku.hk\/index.php?rest_route=\/wp\/v2\/pages\/764","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=764"}],"version-history":[{"count":28,"href":"https:\/\/idealslearning.cite.hku.hk\/index.php?rest_route=\/wp\/v2\/pages\/764\/revisions"}],"predecessor-version":[{"id":1653,"href":"https:\/\/idealslearning.cite.hku.hk\/index.php?rest_route=\/wp\/v2\/pages\/764\/revisions\/1653"}],"wp:attachment":[{"href":"https:\/\/idealslearning.cite.hku.hk\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=764"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}