Our Worlds | MetaSkool<\/title>\n \n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@400;500;600;700&family=Roboto:wght@300;400;500;700&display=swap\" rel=\"stylesheet\">\n \n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\" media=\"print\" onload=\"this.media='all'\">\n \n <link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@4.6.2\/dist\/css\/bootstrap.min.css\">\n <style>\n :root {\n --ukm-blue: #003366;\n --ukm-red: #c00;\n --ukm-light-blue: #007bff;\n --light-gray: #f8f9fa;\n --medium-gray: #e9ecef;\n --dark-gray: #495057;\n --spacing-xs: 0.5rem;\n --spacing-sm: 1rem;\n --spacing-md: 2rem;\n --spacing-lg: 4rem;\n --section-bg-1: #ffffff;\n --section-bg-2: #f8f9fa;\n --card-hover-bg: #ffffff;\n }\n \n body {\n background: #fff;\n font-family: 'Roboto', Arial, sans-serif;\n color: #333;\n margin: 0;\n padding: 0;\n }\n\n .metaskool-container {\n padding: 5rem 0;\n background: #ffffff;\n position: relative;\n }\n\n .metaskool-container::before {\n display: none;\n }\n\n .metaskool-header {\n text-align: center;\n margin-bottom: 4rem;\n }\n\n .metaskool-header h1 {\n position: relative;\n font-family: 'Montserrat', sans-serif;\n font-size: 2.8rem;\n font-weight: 700;\n color: var(--ukm-blue);\n margin-bottom: 2rem;\n padding-bottom: 1rem;\n text-shadow: 1px 1px 1px rgba(0,0,0,0.1);\n }\n\n .metaskool-header h1:after {\n content: '';\n position: absolute;\n bottom: 0;\n left: 50%;\n transform: translateX(-50%);\n width: 80px;\n height: 3px;\n background: linear-gradient(to right, var(--ukm-blue), var(--ukm-red));\n }\n\n .metaskool-worlds-grid {\n max-width: 1200px;\n margin: 0 auto;\n padding: 0 1rem;\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 2rem;\n }\n\n .metaskool-world-card {\n background: white;\n border-radius: 4px;\n overflow: hidden;\n box-shadow: 0 3px 10px rgba(0,0,0,0.1);\n transition: all 0.3s ease;\n border: 1px solid rgba(0,51,102,0.1);\n box-sizing: border-box;\n }\n\n .metaskool-world-card:hover {\n transform: translateY(-8px);\n box-shadow: 0 12px 20px rgba(0,0,0,0.15);\n background: var(--card-hover-bg);\n border-color: var(--ukm-red);\n }\n\n .metaskool-world-image {\n width: 100%;\n height: 250px;\n object-fit: cover;\n }\n\n .metaskool-world-content {\n padding: 1.5rem;\n display: flex;\n flex-direction: column;\n min-height: 300px;\n box-sizing: border-box;\n }\n\n .metaskool-world-title {\n font-family: 'Montserrat', sans-serif;\n font-size: 1.3rem;\n font-weight: 600;\n color: var(--ukm-blue);\n margin-bottom: 0.75rem;\n }\n\n .metaskool-world-creator {\n display: inline-block;\n background: var(--ukm-blue);\n color: white;\n font-size: clamp(0.7rem, 2.5vw, 0.9rem);\n padding: 0.5rem 1.2rem;\n border-radius: 50px;\n margin-bottom: 1rem;\n line-height: 1.4;\n max-width: 100%;\n white-space: normal;\n text-align: center;\n box-shadow: 0 2px 4px rgba(0, 51, 102, 0.1);\n }\n\n \/* Additional rule for very long creator names *\/\n .metaskool-world-creator:has(span) {\n font-size: 0.75rem;\n padding: 0.4rem 1rem;\n }\n\n .metaskool-world-description {\n color: var(--dark-gray);\n font-size: 0.95rem;\n line-height: 1.6;\n margin-bottom: 1.5rem;\n flex-grow: 1;\n }\n\n .metaskool-play-button {\n display: flex;\n align-items: center;\n justify-content: center;\n width: calc(100% - 0px);\n background: linear-gradient(45deg, var(--ukm-blue) 0%, var(--ukm-light-blue) 100%);\n color: white;\n text-decoration: none;\n padding: 0.75rem 1.5rem;\n border-radius: 50px;\n font-weight: 500;\n transition: all 0.3s ease;\n box-shadow: 0 2px 5px rgba(0, 51, 102, 0.2);\n border: none;\n cursor: pointer;\n gap: 0.5rem;\n margin-top: auto;\n flex-shrink: 0;\n box-sizing: border-box;\n max-width: 100%;\n }\n\n .metaskool-play-button:hover {\n background: linear-gradient(45deg, var(--ukm-light-blue) 0%, var(--ukm-blue) 100%);\n color: white;\n transform: translateY(-2px);\n box-shadow: 0 4px 10px rgba(0, 51, 102, 0.3);\n text-decoration: none;\n }\n\n .metaskool-featured-card {\n grid-column: 1 \/ -1;\n }\n\n .metaskool-featured-card .metaskool-world-content {\n background: linear-gradient(135deg, var(--ukm-blue) 0%, #004080 100%);\n border-radius: 0 0 4px 4px;\n }\n\n .metaskool-featured-card .metaskool-world-title {\n color: white;\n font-size: 1.8rem;\n }\n\n .metaskool-featured-card .metaskool-world-description {\n color: rgba(255, 255, 255, 0.9);\n }\n\n .metaskool-featured-card .metaskool-world-creator {\n background: rgba(255, 255, 255, 0.2);\n border: 1px solid rgba(255, 255, 255, 0.3);\n box-shadow: none;\n }\n\n .metaskool-featured-card .metaskool-play-button {\n background: rgba(255, 255, 255, 0.2);\n border: 2px solid rgba(255, 255, 255, 0.3);\n }\n\n .metaskool-featured-card .metaskool-play-button:hover {\n background: white;\n color: var(--ukm-blue);\n border-color: white;\n }\n\n \/* Video Button Styles *\/\n .metaskool-world-image-container {\n position: relative;\n }\n\n .metaskool-world-image-container .metaskool-video-btn {\n position: absolute;\n top: 10px;\n right: 10px;\n background: rgba(255, 255, 255, 0.9);\n color: var(--ukm-blue);\n border: none;\n border-radius: 50%;\n width: 40px;\n height: 40px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n font-size: 20px;\n z-index: 2;\n transition: all 0.3s ease;\n }\n\n .metaskool-world-image-container .metaskool-video-btn:hover {\n background: white;\n transform: scale(1.1);\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);\n }\n\n @media (max-width: 768px) {\n .metaskool-container {\n padding: 3rem 0;\n }\n\n .metaskool-header h1 {\n font-size: 2rem;\n }\n\n .metaskool-worlds-grid {\n grid-template-columns: 1fr;\n gap: 1.5rem;\n padding: 0 1rem;\n }\n\n .metaskool-world-image {\n height: 200px;\n }\n\n .metaskool-world-title {\n font-size: 1.2rem;\n }\n\n .metaskool-featured-card .metaskool-world-title {\n font-size: 1.5rem;\n }\n\n .metaskool-world-image-container .metaskool-video-btn {\n width: 36px;\n height: 36px;\n font-size: 18px;\n }\n }\n\n @media (max-width: 480px) {\n .metaskool-container {\n padding: 2rem 0;\n }\n\n .metaskool-header h1 {\n font-size: 1.8rem;\n }\n\n .metaskool-world-image {\n height: 180px;\n }\n\n .metaskool-world-title {\n font-size: 1.1rem;\n }\n\n .metaskool-featured-card .metaskool-world-title {\n font-size: 1.3rem;\n }\n\n .metaskool-play-button {\n padding: 0.6rem 1.2rem;\n font-size: 0.9rem;\n }\n }\n\n .metaskool-fade-in {\n animation: metaskoolFadeIn 0.6s ease-in;\n }\n\n @keyframes metaskoolFadeIn {\n from {\n opacity: 0;\n transform: translateY(20px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n \/* Modal Styles *\/\n .metaskool-modal {\n display: none;\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: rgba(0, 0, 0, 0.9);\n z-index: 1000;\n align-items: center;\n justify-content: center;\n }\n\n .metaskool-modal.active {\n display: flex;\n }\n\n .metaskool-modal-content {\n position: relative;\n width: 90%;\n max-width: 800px;\n background: black;\n border-radius: 10px;\n overflow: hidden;\n }\n\n .metaskool-modal-close {\n position: absolute;\n top: 10px;\n right: 10px;\n color: white;\n background: rgba(255, 255, 255, 0.2);\n border: none;\n border-radius: 50%;\n width: 30px;\n height: 30px;\n font-size: 20px;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1001;\n }\n\n .metaskool-video-container {\n position: relative;\n padding-bottom: 56.25%;\n height: 0;\n overflow: hidden;\n }\n\n .metaskool-video-container iframe {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n border: none;\n }\n <\/style>\n<\/head>\n<body>\n\n<div class=\"metaskool-container\">\n <header class=\"metaskool-header metaskool-fade-in\">\n <h1>Our Worlds<\/h1>\n <\/header>\n\n <div class=\"metaskool-worlds-grid\">\n \n <div class=\"metaskool-world-card metaskool-featured-card metaskool-fade-in\">\n <img decoding=\"async\" src=\"https:\/\/www.ukm.my\/metaskool\/wp-content\/uploads\/2024\/10\/Screenshot-2024-10-26-151719-1024x426.png\" \n alt=\"MetaSkool HQ\" class=\"metaskool-world-image\" onerror=\"this.style.display='none'; this.nextElementSibling.style.display='flex';\">\n <div class=\"metaskool-world-image-placeholder\" style=\"display: none;\">MetaSkool HQ<\/div>\n <div class=\"metaskool-world-content\">\n <div class=\"metaskool-world-header\">\n <h2 class=\"metaskool-world-title\">MetaSkool HQ<\/h2>\n <\/div>\n <p class=\"metaskool-world-description\">\n Welcome to MetaSkool HQ, the central hub connecting all metaverse worlds for pioneering teachers, where educators can explore, collaborate, and innovate in a shared virtual space designed to transform learning.\n <\/p>\n <a href=\"https:\/\/www.spatial.io\/s\/MetaSkool-HQ-66fc2acfa50c8816acd73355?share=761312548929560847\" target=\"_blank\" class=\"metaskool-play-button\">Access Metaverse<\/a>\n <\/div>\n <\/div>\n\n \n <div class=\"metaskool-world-card metaskool-fade-in\">\n <img decoding=\"async\" src=\"https:\/\/www.ukm.my\/metaskool\/wp-content\/uploads\/2024\/10\/Screenshot-2024-10-26-152004-1024x428.png\" \n alt=\"MetaSkool Dead Town\" class=\"metaskool-world-image\" onerror=\"this.style.display='none'; this.nextElementSibling.style.display='flex';\">\n <div class=\"metaskool-world-image-placeholder\" style=\"display: none;\">Dead Town: EcoCity Quest<\/div>\n <div class=\"metaskool-world-content\">\n <div class=\"metaskool-world-header\">\n <h2 class=\"metaskool-world-title\">MetaSkool Dead Town: EcoCity Quest<\/h2>\n <\/div>\n <p class=\"metaskool-world-description\">\n The Metaskool Dead Town Challenge is an immersive experience that combines gaming and philanthropy, inspired by UNICEF’s mission to support children in need. Participants navigate a virtual “dead town,” facing various obstacles and completing missions that highlight issues like health, education, and child protection.\n <\/p>\n <a href=\"https:\/\/www.spatial.io\/s\/MetaSkool-Dead-Town-EcoCity-Quest-669dde549e88bb61b713d8c6?share=6768952026164958946\" target=\"_blank\" class=\"metaskool-play-button\">Access Metaverse<\/a>\n <\/div>\n <\/div>\n\n \n <div class=\"metaskool-world-card metaskool-fade-in\">\n <img decoding=\"async\" src=\"https:\/\/www.ukm.my\/metaskool\/wp-content\/uploads\/2024\/10\/Screenshot-2024-10-26-153238-1024x426.png\" \n alt=\"MetaSkool Parameswara\" class=\"metaskool-world-image\" onerror=\"this.style.display='none'; this.nextElementSibling.style.display='flex';\">\n <div class=\"metaskool-world-image-placeholder\" style=\"display: none;\">MetaSkool Parameswara<\/div>\n <div class=\"metaskool-world-content\">\n <div class=\"metaskool-world-header\">\n <h2 class=\"metaskool-world-title\">MetaSkool Parameswara<\/h2>\n <\/div>\n <p class=\"metaskool-world-description\">\n Metaskool Parameswara World is a vibrant virtual environment that blends gaming with cultural exploration. Set in a richly designed landscape inspired by historical and mythical elements, players can engage in quests, challenges, and collaborative activities that celebrate diverse cultures and traditions.\n <\/p>\n <a href=\"https:\/\/www.spatial.io\/s\/Parameswara-Meta-China-66dbe416f6d74e9b56bec1f2?share=0\" target=\"_blank\" class=\"metaskool-play-button\">Access Metaverse<\/a>\n <\/div>\n <\/div>\n\n \n <div class=\"metaskool-world-card metaskool-fade-in\">\n <img decoding=\"async\" src=\"https:\/\/www.ukm.my\/metaskool\/wp-content\/uploads\/2025\/11\/image-2-1-scaled.png\" \n alt=\"MetaSkool DTABF\" class=\"metaskool-world-image\" onerror=\"this.style.display='none'; this.nextElementSibling.style.display='flex';\">\n <div class=\"metaskool-world-image-placeholder\" style=\"display: none;\">MetaSkool Parameswara<\/div>\n <div class=\"metaskool-world-content\">\n <div class=\"metaskool-world-header\">\n <h2 class=\"metaskool-world-title\">MetaSkool: Drive to A Better Future<\/h2>\n <\/div>\n <p class=\"metaskool-world-description\">\n MetaskoolL: Drive to A Better Future is an innovative virtual world that empowers players to explore sustainable practices and environmental stewardship. Through engaging gameplay and interactive challenges, players learn about climate change, conservation, and the importance of protecting our planet for future generations.\n <\/p>\n <a href=\"https:\/\/www.spatial.io\/s\/Drive-To-A-Better-Future-684b875b7096556e2726aa0f?share=883809180209292036\" target=\"_blank\" class=\"metaskool-play-button\">Access Metaverse<\/a>\n <\/div>\n <\/div>\n\n\n \n <div class=\"metaskool-world-card metaskool-fade-in\">\n <img decoding=\"async\" src=\"https:\/\/www.ukm.my\/metaskool\/wp-content\/uploads\/2025\/11\/image-3-scaled.png\" \n alt=\"MetaSkool France\" class=\"metaskool-world-image\" onerror=\"this.style.display='none'; this.nextElementSibling.style.display='flex';\">\n <div class=\"metaskool-world-image-placeholder\" style=\"display: none;\">MetaSkool France<\/div>\n <div class=\"metaskool-world-content\">\n <div class=\"metaskool-world-header\">\n <h2 class=\"metaskool-world-title\">MetaSkool:Le Monde De Paris<\/h2>\n <\/div>\n <p class=\"metaskool-world-description\">\n Step into the heart of Paris and learn French through immersive experiences. Explore iconic landmarks, interact with native-speaking NPCs, and practice essential phrases in real-world contexts, all while enjoying the sights and sounds of the City of Light.\n <\/p>\n <a href=\"https:\/\/www.spatial.io\/s\/Le-Monde-de-Paris-690ec0b084b580661372085f?share=5917075493221334771\" target=\"_blank\" class=\"metaskool-play-button\">Access Metaverse<\/a>\n <\/div>\n <\/div>\n\n\n \n <div class=\"metaskool-world-card metaskool-fade-in\">\n <img decoding=\"async\" src=\"https:\/\/www.ukm.my\/metaskool\/wp-content\/uploads\/2024\/10\/Screenshot-2024-10-26-152231-1024x390.png\" \n alt=\"SSTP Labuan HQ\" class=\"metaskool-world-image\" onerror=\"this.style.display='none'; this.nextElementSibling.style.display='flex';\">\n <div class=\"metaskool-world-image-placeholder\" style=\"display: none;\">SSTP Labuan HQ<\/div>\n <div class=\"metaskool-world-content\">\n <div class=\"metaskool-world-header\">\n <h2 class=\"metaskool-world-title\">JPN Labuan HQ<\/h2>\n <\/div>\n <p class=\"metaskool-world-description\">\n Step into the JPN Labuan HQ, a virtual home base designed by Labuan\u2019s own schools. Here, students and teachers can explore immersive worlds, join activities, and connect with others\u2014making learning fun, interactive, and limitless.\n <\/p>\n <a href=\"https:\/\/www.spatial.io\/s\/SSTP-WP-Labuan-66fd7d4366126938d7f1679c?share=5461215598753398082\" target=\"_blank\" class=\"metaskool-play-button\">Access Metaverse<\/a>\n <\/div>\n <\/div>\n\n \n <div class=\"metaskool-world-card metaskool-fade-in\">\n <img decoding=\"async\" src=\"https:\/\/www.ukm.my\/metaskool\/wp-content\/uploads\/2024\/11\/SSTP-Melaka-on-11-14-24-at-10.06-AM-1024x508.png\" \n alt=\"SSTP Melaka HQ\" class=\"metaskool-world-image\" onerror=\"this.style.display='none'; this.nextElementSibling.style.display='flex';\">\n <div class=\"metaskool-world-image-placeholder\" style=\"display: none;\">SSTP Melaka HQ<\/div>\n <div class=\"metaskool-world-content\">\n <div class=\"metaskool-world-header\">\n <h2 class=\"metaskool-world-title\">JPN Melaka HQ<\/h2>\n <\/div>\n <p class=\"metaskool-world-description\">\n The JPN Melaka HQ is a dedicated metaverse hub developed by schools in Melaka. It provides an interactive space where students and teachers can connect, explore immersive environments, and collaborate on creative and educational projects.\n <\/p>\n <a href=\"https:\/\/www.spatial.io\/s\/SSTP-Melaka-67204477eeb9742b2d512aa4?share=404033059719784998\" target=\"_blank\" class=\"metaskool-play-button\">Access Metaverse<\/a>\n <\/div>\n <\/div>\n\n \n <div class=\"metaskool-world-card metaskool-fade-in\">\n <img decoding=\"async\" src=\"https:\/\/www.ukm.my\/metaskool\/wp-content\/uploads\/2024\/11\/JPN-Sabah-on-11-14-24-at-11.31-AM-1024x517.png\" \n alt=\"JPN Sabah HQ\" class=\"metaskool-world-image\" onerror=\"this.style.display='none'; this.nextElementSibling.style.display='flex';\">\n <div class=\"metaskool-world-image-placeholder\" style=\"display: none;\">JPN Sabah HQ<\/div>\n <div class=\"metaskool-world-content\">\n <div class=\"metaskool-world-header\">\n <h2 class=\"metaskool-world-title\">JPN Sabah HQ<\/h2>\n <\/div>\n <p class=\"metaskool-world-description\">\n The JPN Sabah HQ serves as a central meeting point in the metaverse, designed by schools across Sabah. It provides opportunities for students and educators to collaborate, innovate, and engage with immersive educational experiences.\n <\/p>\n <a href=\"https:\/\/www.spatial.io\/s\/JPN-Sabah-671b34d09165370c3c76f800?share=8580535881550797116\" target=\"_blank\" class=\"metaskool-play-button\">Access Metaverse<\/a>\n <\/div>\n <\/div>\n\n \n <div class=\"metaskool-world-card metaskool-fade-in\">\n <img decoding=\"async\" src=\"https:\/\/www.ukm.my\/metaskool\/wp-content\/uploads\/2024\/11\/Screenshot-2024-11-19-195419-1024x498.png\" \n alt=\"SSTP Johor HQ\" class=\"metaskool-world-image\" onerror=\"this.style.display='none'; this.nextElementSibling.style.display='flex';\">\n <div class=\"metaskool-world-image-placeholder\" style=\"display: none;\">JPN Johor HQ<\/div>\n <div class=\"metaskool-world-content\">\n <div class=\"metaskool-world-header\">\n <h2 class=\"metaskool-world-title\">JPN Johor HQ<\/h2>\n <\/div>\n <p class=\"metaskool-world-description\">\n Built by selected schools in Johor, the Johor HQ stands as a hub in the metaverse where students and educators can discover new ways of learning, connect across digital spaces, and collaborate on creative ideas.\n <\/p>\n <a href=\"https:\/\/www.spatial.io\/s\/SSTP-Johor-6735ab360934a7f92febe13f?share=6382296245250470094\" target=\"_blank\" class=\"metaskool-play-button\">Access Metaverse<\/a>\n <\/div>\n <\/div>\n\n \n <div class=\"metaskool-world-card metaskool-fade-in\">\n <img decoding=\"async\" src=\"https:\/\/www.ukm.my\/metaskool\/wp-content\/uploads\/2024\/12\/Screenshot-2024-12-12-170839-1024x425.png\" \n alt=\"SSTP Kuala Lumpur HQ\" class=\"metaskool-world-image\" onerror=\"this.style.display='none'; this.nextElementSibling.style.display='flex';\">\n <div class=\"metaskool-world-image-placeholder\" style=\"display: none;\">JPN Kuala Lumpur HQ<\/div>\n <div class=\"metaskool-world-content\">\n <div class=\"metaskool-world-header\">\n <h2 class=\"metaskool-world-title\">JPN Kuala Lumpur HQ<\/h2>\n <\/div>\n <p class=\"metaskool-world-description\">\n As a gateway to digital learning, the JPN Kuala Lumpur HQ opens opportunities for students and teachers to connect, discover innovative worlds, and experience education without boundaries.\n <\/p>\n <a href=\"https:\/\/www.spatial.io\/s\/SSTP-WP-KUALA-LUMPUR-6757b2fc8053fbfabdd1ef34?share=742101832845980379\" target=\"_blank\" class=\"metaskool-play-button\">Access Metaverse<\/a>\n <\/div>\n <\/div>\n\n \n <div class=\"metaskool-world-card metaskool-fade-in\">\n <img decoding=\"async\" src=\"https:\/\/www.ukm.my\/metaskool\/wp-content\/uploads\/2024\/12\/Screenshot-2024-12-12-171011-1024x465.png\" \n alt=\"JPN Sarawak HQ\" class=\"metaskool-world-image\" onerror=\"this.style.display='none'; this.nextElementSibling.style.display='flex';\">\n <div class=\"metaskool-world-image-placeholder\" style=\"display: none;\">JPN Sarawak HQ<\/div>\n <div class=\"metaskool-world-content\">\n <div class=\"metaskool-world-header\">\n <h2 class=\"metaskool-world-title\">JPN Sarawak HQ<\/h2>\n <\/div>\n <p class=\"metaskool-world-description\">\n At the JPN Sarawak HQ, learning comes alive as students and educators collaborate on projects, explore immersive environments, and build meaningful connections across virtual communities.\n <\/p>\n <a href=\"https:\/\/www.spatial.io\/s\/JPN-SARAWAK-67451c5ee83d98deb2b115cb?share=8076304539953097247\" target=\"_blank\" class=\"metaskool-play-button\">Access Metaverse<\/a>\n <\/div>\n <\/div>\n\n \n <div class=\"metaskool-world-card metaskool-fade-in\">\n <div class=\"metaskool-world-image-container\">\n <img decoding=\"async\" src=\"https:\/\/www.ukm.my\/metaskool\/wp-content\/uploads\/2025\/05\/image-min-1024x524.png\" \n alt=\"SSTP Selangor HQ\" class=\"metaskool-world-image\">\n <button class=\"metaskool-video-btn\" onclick=\"openVideo('wn7XCsUtMHc')\" aria-label=\"Watch video\">\n <i class=\"fas fa-play\"><\/i>\n <\/button>\n <\/div>\n <div class=\"metaskool-world-content\">\n <div class=\"metaskool-world-header\">\n <h2 class=\"metaskool-world-title\"> JPN Selangor HQ<\/h2>\n <\/div>\n <p class=\"metaskool-world-description\">\n Created by schools in Selangor, the JPN Selangor HQ is a hub in the metaverse where students and teachers can explore immersive spaces, collaborate on ideas, and connect through future-ready learning experiences.\n <\/p>\n <a href=\"https:\/\/www.spatial.io\/s\/SSTP-Selangor-HQ-681da847a1cf93873ec096c2?share=5486330668586686436\" target=\"_blank\" class=\"metaskool-play-button\">\n Access Metaverse\n <\/a>\n <\/div>\n <\/div>\n\n \n <div class=\"metaskool-world-card metaskool-fade-in\">\n <div class=\"metaskool-world-image-container\">\n <img decoding=\"async\" src=\"https:\/\/www.ukm.my\/metaskool\/wp-content\/uploads\/2025\/06\/sstp-jpn-kedah-metaskool-1024x530.jpeg\" \n alt=\"SSTP JPN Kedah HQ\" class=\"metaskool-world-image\">\n <button class=\"metaskool-video-btn\" onclick=\"openVideo('PLpI9krcsTI')\" aria-label=\"Watch video\">\n <i class=\"fas fa-play\"><\/i>\n <\/button>\n <\/div>\n <div class=\"metaskool-world-content\">\n <div class=\"metaskool-world-header\">\n <h2 class=\"metaskool-world-title\"> JPN Kedah HQ<\/h2>\n <\/div>\n <p class=\"metaskool-world-description\">\n Highlighting Kedah\u2019s drive for digital innovation, the JPN Kedah HQ empowers students and educators to learn, create, and grow together in immersive virtual environments.\n <\/p>\n <a href=\"https:\/\/www.spatial.io\/s\/SSTP-JPN-Kedah-HQ-683fdd202b898296c78b4d73?share=3034533777109101659\" target=\"_blank\" class=\"metaskool-play-button\">\n Access Metaverse\n <\/a>\n <\/div>\n <\/div>\n \n <div class=\"metaskool-world-card metaskool-fade-in\">\n <div class=\"metaskool-world-image-container\">\n <img decoding=\"async\" src=\"https:\/\/www.ukm.my\/metaskool\/wp-content\/uploads\/2025\/07\/image-scaled.png\" \n alt=\"SSTP JPN Pahang HQ\" class=\"metaskool-world-image\">\n <button class=\"metaskool-video-btn\" onclick=\"openVideo('KyP5ZV-rzto')\" aria-label=\"Watch video\">\n <i class=\"fas fa-play\"><\/i>\n <\/button>\n <\/div>\n <div class=\"metaskool-world-content\">\n <div class=\"metaskool-world-header\">\n <h2 class=\"metaskool-world-title\">JPN Pahang HQ<\/h2>\n <\/div>\n <p class=\"metaskool-world-description\">\n At the JPN Pahang HQ, students and teachers explore immersive worlds, connect through shared projects, and collaborate in ways that transform traditional learning into interactive digital experiences.\n <\/p>\n <a href=\"https:\/\/www.spatial.io\/s\/SSTP-JPN-Pahang-HQ-687e4e174a7d6311bc852b16?share=8098598338045192662\" target=\"_blank\" class=\"metaskool-play-button\">\n Access Metaverse\n <\/a>\n <\/div>\n <\/div>\n\n \n <div class=\"metaskool-world-card metaskool-fade-in\">\n <div class=\"metaskool-world-image-container\">\n <img decoding=\"async\" src=\"https:\/\/www.ukm.my\/metaskool\/wp-content\/uploads\/2025\/07\/Screenshot-2025-07-25-at-4.43.36-PM-scaled.jpeg\" \n alt=\"SSTP JPN N9 HQ\" class=\"metaskool-world-image\">\n <button class=\"metaskool-video-btn\" onclick=\"openVideo('q618fHouT5Q')\" aria-label=\"Watch video\">\n <i class=\"fas fa-play\"><\/i>\n <\/button>\n <\/div>\n <div class=\"metaskool-world-content\">\n <div class=\"metaskool-world-header\">\n <h2 class=\"metaskool-world-title\">JPN Negeri Sembilan HQ<\/h2>\n <\/div>\n <p class=\"metaskool-world-description\">\n The JPN Negeri Sembilan HQ stands as a hub in the metaverse, designed during the MetaSkool ToT session. It reflects two days of hands-on exploration where educators and learners built confidence in digital collaboration and creativity.\n <\/p>\n <a href=\"https:\/\/www.spatial.io\/s\/SSTP-JPN-Negeri-Sembilan-HQ-68833c954a7d6311bc8f1029?share=4278144498048192798\" target=\"_blank\" class=\"metaskool-play-button\">\n Access Metaverse\n <\/a>\n <\/div>\n <\/div>\n\n\n<div class=\"metaskool-world-card metaskool-fade-in\">\n <div class=\"metaskool-world-image-container\">\n <img decoding=\"async\" src=\"https:\/\/www.ukm.my\/metaskool\/wp-content\/uploads\/2025\/08\/Screenshot-2025-08-04-at-4.40.44-PM-scaled.png\" \n alt=\"SSTP JPN Perak\" class=\"metaskool-world-image\">\n <button class=\"metaskool-video-btn\" onclick=\"openVideo('GQdW1iTAhwE')\" aria-label=\"Watch video\">\n <i class=\"fas fa-play\"><\/i>\n <\/button>\n <\/div>\n <div class=\"metaskool-world-content\">\n <div class=\"metaskool-world-header\">\n <h2 class=\"metaskool-world-title\">JPN Perak HQ<\/h2>\n <\/div>\n <p class=\"metaskool-world-description\">\n Built by 12 teachers and 24 students from 12 schools during the MetaSkool ToT, the JPN Perak HQ is a metaverse hub that showcases creativity, collaboration, and innovation in support of Malaysia\u2019s digital education vision.\n <\/p>\n <a href=\"https:\/\/www.spatial.io\/s\/SSTP-JPN-Perak-HQ-68902b30e54b7dbaf2234e1e?share=7113860272713157834\" target=\"_blank\" class=\"metaskool-play-button\">\n Access Metaverse\n <\/a>\n <\/div>\n<\/div>\n\n\n<div class=\"metaskool-world-card metaskool-fade-in\">\n <div class=\"metaskool-world-image-container\">\n <img decoding=\"async\" src=\"https:\/\/www.ukm.my\/metaskool\/wp-content\/uploads\/2025\/08\/totpenang-scaled.png\" \n alt=\"SSTP JPN Perak\" class=\"metaskool-world-image\">\n <button class=\"metaskool-video-btn\" onclick=\"openVideo('g7uWc-00uzw')\" aria-label=\"Watch video\">\n <i class=\"fas fa-play\"><\/i>\n <\/button>\n <\/div>\n <div class=\"metaskool-world-content\">\n <div class=\"metaskool-world-header\">\n <h2 class=\"metaskool-world-title\">JPN Pulau Pinang HQ<\/h2>\n <\/div>\n <p class=\"metaskool-world-description\">\n The JPN Pulau Pinang HQ was brought to life by students and teachers in the MetaSkool ToT session, showcasing their creativity and collaboration in building a hub that represents digital learning for the future.\n <\/p>\n <a href=\"https:\/\/www.spatial.io\/s\/SSTP-JPN-Pulau-Pinang-HQ-68a933940d41c996f752ba6e?share=78600161923911630\" target=\"_blank\" class=\"metaskool-play-button\">\n Access Metaverse\n <\/a>\n <\/div>\n<\/div>\n \n \n <\/div>\n<\/div>\n\n\n<div class=\"metaskool-modal\" id=\"videoModal\">\n <div class=\"metaskool-modal-content\">\n <button class=\"metaskool-modal-close\" onclick=\"closeVideo()\">×<\/button>\n <div class=\"metaskool-video-container\">\n <iframe id=\"videoFrame\" \n allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" \n allowfullscreen><\/iframe>\n <\/div>\n <\/div>\n<\/div>\n\n<script>\n \/\/ Add Font Awesome for the play icon\n if (!document.querySelector('link[href*=\"font-awesome\"]')) {\n const link = document.createElement('link');\n link.rel = 'stylesheet';\n link.href = 'https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/5.15.4\/css\/all.min.css';\n document.head.appendChild(link);\n }\n\n function openVideo(videoId) {\n const modal = document.getElementById('videoModal');\n const videoFrame = document.getElementById('videoFrame');\n videoFrame.src = `https:\/\/www.youtube.com\/embed\/${videoId}?autoplay=1`;\n modal.classList.add('active');\n document.body.style.overflow = 'hidden'; \/\/ Prevent scrolling\n }\n\n function closeVideo() {\n const modal = document.getElementById('videoModal');\n const videoFrame = document.getElementById('videoFrame');\n videoFrame.src = '';\n modal.classList.remove('active');\n document.body.style.overflow = ''; \/\/ Restore scrolling\n }\n\n \/\/ Close modal on background click\n document.getElementById('videoModal').addEventListener('click', function(e) {\n if (e.target === this) {\n closeVideo();\n }\n });\n\n \/\/ Close modal on escape key\n document.addEventListener('keydown', function(e) {\n if (e.key === 'Escape') {\n closeVideo();\n }\n });\n<\/script>\n<\/body>\n<\/html>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-4db4d81 e-flex e-con-boxed e-con e-parent\" data-id=\"4db4d81\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\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>Our Worlds | MetaSkool Our Worlds MetaSkool HQ MetaSkool HQ Welcome to MetaSkool HQ, the central hub connecting all metaverse worlds for pioneering teachers, where<a class=\"ut-readmore\" href=\"https:\/\/www.ukm.my\/metaskool\/our-worlds-2\/\"> …<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-298","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.ukm.my\/metaskool\/wp-json\/wp\/v2\/pages\/298","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ukm.my\/metaskool\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.ukm.my\/metaskool\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.ukm.my\/metaskool\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ukm.my\/metaskool\/wp-json\/wp\/v2\/comments?post=298"}],"version-history":[{"count":66,"href":"https:\/\/www.ukm.my\/metaskool\/wp-json\/wp\/v2\/pages\/298\/revisions"}],"predecessor-version":[{"id":864,"href":"https:\/\/www.ukm.my\/metaskool\/wp-json\/wp\/v2\/pages\/298\/revisions\/864"}],"wp:attachment":[{"href":"https:\/\/www.ukm.my\/metaskool\/wp-json\/wp\/v2\/media?parent=298"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\n\n\n \n \n Our Worlds | MetaSkool<\/title>\n \n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@400;500;600;700&family=Roboto:wght@300;400;500;700&display=swap\" rel=\"stylesheet\">\n \n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\" media=\"print\" onload=\"this.media='all'\">\n \n <link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@4.6.2\/dist\/css\/bootstrap.min.css\">\n <style>\n :root {\n --ukm-blue: #003366;\n --ukm-red: #c00;\n --ukm-light-blue: #007bff;\n --light-gray: #f8f9fa;\n --medium-gray: #e9ecef;\n --dark-gray: #495057;\n --spacing-xs: 0.5rem;\n --spacing-sm: 1rem;\n --spacing-md: 2rem;\n --spacing-lg: 4rem;\n --section-bg-1: #ffffff;\n --section-bg-2: #f8f9fa;\n --card-hover-bg: #ffffff;\n }\n \n body {\n background: #fff;\n font-family: 'Roboto', Arial, sans-serif;\n color: #333;\n margin: 0;\n padding: 0;\n }\n\n .metaskool-container {\n padding: 5rem 0;\n background: #ffffff;\n position: relative;\n }\n\n .metaskool-container::before {\n display: none;\n }\n\n .metaskool-header {\n text-align: center;\n margin-bottom: 4rem;\n }\n\n .metaskool-header h1 {\n position: relative;\n font-family: 'Montserrat', sans-serif;\n font-size: 2.8rem;\n font-weight: 700;\n color: var(--ukm-blue);\n margin-bottom: 2rem;\n padding-bottom: 1rem;\n text-shadow: 1px 1px 1px rgba(0,0,0,0.1);\n }\n\n .metaskool-header h1:after {\n content: '';\n position: absolute;\n bottom: 0;\n left: 50%;\n transform: translateX(-50%);\n width: 80px;\n height: 3px;\n background: linear-gradient(to right, var(--ukm-blue), var(--ukm-red));\n }\n\n .metaskool-worlds-grid {\n max-width: 1200px;\n margin: 0 auto;\n padding: 0 1rem;\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 2rem;\n }\n\n .metaskool-world-card {\n background: white;\n border-radius: 4px;\n overflow: hidden;\n box-shadow: 0 3px 10px rgba(0,0,0,0.1);\n transition: all 0.3s ease;\n border: 1px solid rgba(0,51,102,0.1);\n box-sizing: border-box;\n }\n\n .metaskool-world-card:hover {\n transform: translateY(-8px);\n box-shadow: 0 12px 20px rgba(0,0,0,0.15);\n background: var(--card-hover-bg);\n border-color: var(--ukm-red);\n }\n\n .metaskool-world-image {\n width: 100%;\n height: 250px;\n object-fit: cover;\n }\n\n .metaskool-world-content {\n padding: 1.5rem;\n display: flex;\n flex-direction: column;\n min-height: 300px;\n box-sizing: border-box;\n }\n\n .metaskool-world-title {\n font-family: 'Montserrat', sans-serif;\n font-size: 1.3rem;\n font-weight: 600;\n color: var(--ukm-blue);\n margin-bottom: 0.75rem;\n }\n\n .metaskool-world-creator {\n display: inline-block;\n background: var(--ukm-blue);\n color: white;\n font-size: clamp(0.7rem, 2.5vw, 0.9rem);\n padding: 0.5rem 1.2rem;\n border-radius: 50px;\n margin-bottom: 1rem;\n line-height: 1.4;\n max-width: 100%;\n white-space: normal;\n text-align: center;\n box-shadow: 0 2px 4px rgba(0, 51, 102, 0.1);\n }\n\n \/* Additional rule for very long creator names *\/\n .metaskool-world-creator:has(span) {\n font-size: 0.75rem;\n padding: 0.4rem 1rem;\n }\n\n .metaskool-world-description {\n color: var(--dark-gray);\n font-size: 0.95rem;\n line-height: 1.6;\n margin-bottom: 1.5rem;\n flex-grow: 1;\n }\n\n .metaskool-play-button {\n display: flex;\n align-items: center;\n justify-content: center;\n width: calc(100% - 0px);\n background: linear-gradient(45deg, var(--ukm-blue) 0%, var(--ukm-light-blue) 100%);\n color: white;\n text-decoration: none;\n padding: 0.75rem 1.5rem;\n border-radius: 50px;\n font-weight: 500;\n transition: all 0.3s ease;\n box-shadow: 0 2px 5px rgba(0, 51, 102, 0.2);\n border: none;\n cursor: pointer;\n gap: 0.5rem;\n margin-top: auto;\n flex-shrink: 0;\n box-sizing: border-box;\n max-width: 100%;\n }\n\n .metaskool-play-button:hover {\n background: linear-gradient(45deg, var(--ukm-light-blue) 0%, var(--ukm-blue) 100%);\n color: white;\n transform: translateY(-2px);\n box-shadow: 0 4px 10px rgba(0, 51, 102, 0.3);\n text-decoration: none;\n }\n\n .metaskool-featured-card {\n grid-column: 1 \/ -1;\n }\n\n .metaskool-featured-card .metaskool-world-content {\n background: linear-gradient(135deg, var(--ukm-blue) 0%, #004080 100%);\n border-radius: 0 0 4px 4px;\n }\n\n .metaskool-featured-card .metaskool-world-title {\n color: white;\n font-size: 1.8rem;\n }\n\n .metaskool-featured-card .metaskool-world-description {\n color: rgba(255, 255, 255, 0.9);\n }\n\n .metaskool-featured-card .metaskool-world-creator {\n background: rgba(255, 255, 255, 0.2);\n border: 1px solid rgba(255, 255, 255, 0.3);\n box-shadow: none;\n }\n\n .metaskool-featured-card .metaskool-play-button {\n background: rgba(255, 255, 255, 0.2);\n border: 2px solid rgba(255, 255, 255, 0.3);\n }\n\n .metaskool-featured-card .metaskool-play-button:hover {\n background: white;\n color: var(--ukm-blue);\n border-color: white;\n }\n\n \/* Video Button Styles *\/\n .metaskool-world-image-container {\n position: relative;\n }\n\n .metaskool-world-image-container .metaskool-video-btn {\n position: absolute;\n top: 10px;\n right: 10px;\n background: rgba(255, 255, 255, 0.9);\n color: var(--ukm-blue);\n border: none;\n border-radius: 50%;\n width: 40px;\n height: 40px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n font-size: 20px;\n z-index: 2;\n transition: all 0.3s ease;\n }\n\n .metaskool-world-image-container .metaskool-video-btn:hover {\n background: white;\n transform: scale(1.1);\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);\n }\n\n @media (max-width: 768px) {\n .metaskool-container {\n padding: 3rem 0;\n }\n\n .metaskool-header h1 {\n font-size: 2rem;\n }\n\n .metaskool-worlds-grid {\n grid-template-columns: 1fr;\n gap: 1.5rem;\n padding: 0 1rem;\n }\n\n .metaskool-world-image {\n height: 200px;\n }\n\n .metaskool-world-title {\n font-size: 1.2rem;\n }\n\n .metaskool-featured-card .metaskool-world-title {\n font-size: 1.5rem;\n }\n\n .metaskool-world-image-container .metaskool-video-btn {\n width: 36px;\n height: 36px;\n font-size: 18px;\n }\n }\n\n @media (max-width: 480px) {\n .metaskool-container {\n padding: 2rem 0;\n }\n\n .metaskool-header h1 {\n font-size: 1.8rem;\n }\n\n .metaskool-world-image {\n height: 180px;\n }\n\n .metaskool-world-title {\n font-size: 1.1rem;\n }\n\n .metaskool-featured-card .metaskool-world-title {\n font-size: 1.3rem;\n }\n\n .metaskool-play-button {\n padding: 0.6rem 1.2rem;\n font-size: 0.9rem;\n }\n }\n\n .metaskool-fade-in {\n animation: metaskoolFadeIn 0.6s ease-in;\n }\n\n @keyframes metaskoolFadeIn {\n from {\n opacity: 0;\n transform: translateY(20px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n \/* Modal Styles *\/\n .metaskool-modal {\n display: none;\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: rgba(0, 0, 0, 0.9);\n z-index: 1000;\n align-items: center;\n justify-content: center;\n }\n\n .metaskool-modal.active {\n display: flex;\n }\n\n .metaskool-modal-content {\n position: relative;\n width: 90%;\n max-width: 800px;\n background: black;\n border-radius: 10px;\n overflow: hidden;\n }\n\n .metaskool-modal-close {\n position: absolute;\n top: 10px;\n right: 10px;\n color: white;\n background: rgba(255, 255, 255, 0.2);\n border: none;\n border-radius: 50%;\n width: 30px;\n height: 30px;\n font-size: 20px;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1001;\n }\n\n .metaskool-video-container {\n position: relative;\n padding-bottom: 56.25%;\n height: 0;\n overflow: hidden;\n }\n\n .metaskool-video-container iframe {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n border: none;\n }\n <\/style>\n<\/head>\n<body>\n\n<div class=\"metaskool-container\">\n <header class=\"metaskool-header metaskool-fade-in\">\n <h1>Our Worlds<\/h1>\n <\/header>\n\n <div class=\"metaskool-worlds-grid\">\n \n <div class=\"metaskool-world-card metaskool-featured-card metaskool-fade-in\">\n <img decoding=\"async\" src=\"https:\/\/www.ukm.my\/metaskool\/wp-content\/uploads\/2024\/10\/Screenshot-2024-10-26-151719-1024x426.png\" \n alt=\"MetaSkool HQ\" class=\"metaskool-world-image\" onerror=\"this.style.display='none'; this.nextElementSibling.style.display='flex';\">\n <div class=\"metaskool-world-image-placeholder\" style=\"display: none;\">MetaSkool HQ<\/div>\n <div class=\"metaskool-world-content\">\n <div class=\"metaskool-world-header\">\n <h2 class=\"metaskool-world-title\">MetaSkool HQ<\/h2>\n <\/div>\n <p class=\"metaskool-world-description\">\n Welcome to MetaSkool HQ, the central hub connecting all metaverse worlds for pioneering teachers, where educators can explore, collaborate, and innovate in a shared virtual space designed to transform learning.\n <\/p>\n <a href=\"https:\/\/www.spatial.io\/s\/MetaSkool-HQ-66fc2acfa50c8816acd73355?share=761312548929560847\" target=\"_blank\" class=\"metaskool-play-button\">Access Metaverse<\/a>\n <\/div>\n <\/div>\n\n \n <div class=\"metaskool-world-card metaskool-fade-in\">\n <img decoding=\"async\" src=\"https:\/\/www.ukm.my\/metaskool\/wp-content\/uploads\/2024\/10\/Screenshot-2024-10-26-152004-1024x428.png\" \n alt=\"MetaSkool Dead Town\" class=\"metaskool-world-image\" onerror=\"this.style.display='none'; this.nextElementSibling.style.display='flex';\">\n <div class=\"metaskool-world-image-placeholder\" style=\"display: none;\">Dead Town: EcoCity Quest<\/div>\n <div class=\"metaskool-world-content\">\n <div class=\"metaskool-world-header\">\n <h2 class=\"metaskool-world-title\">MetaSkool Dead Town: EcoCity Quest<\/h2>\n <\/div>\n <p class=\"metaskool-world-description\">\n The Metaskool Dead Town Challenge is an immersive experience that combines gaming and philanthropy, inspired by UNICEF’s mission to support children in need. Participants navigate a virtual “dead town,” facing various obstacles and completing missions that highlight issues like health, education, and child protection.\n <\/p>\n <a href=\"https:\/\/www.spatial.io\/s\/MetaSkool-Dead-Town-EcoCity-Quest-669dde549e88bb61b713d8c6?share=6768952026164958946\" target=\"_blank\" class=\"metaskool-play-button\">Access Metaverse<\/a>\n <\/div>\n <\/div>\n\n \n <div class=\"metaskool-world-card metaskool-fade-in\">\n <img decoding=\"async\" src=\"https:\/\/www.ukm.my\/metaskool\/wp-content\/uploads\/2024\/10\/Screenshot-2024-10-26-153238-1024x426.png\" \n alt=\"MetaSkool Parameswara\" class=\"metaskool-world-image\" onerror=\"this.style.display='none'; this.nextElementSibling.style.display='flex';\">\n <div class=\"metaskool-world-image-placeholder\" style=\"display: none;\">MetaSkool Parameswara<\/div>\n <div class=\"metaskool-world-content\">\n <div class=\"metaskool-world-header\">\n <h2 class=\"metaskool-world-title\">MetaSkool Parameswara<\/h2>\n <\/div>\n <p class=\"metaskool-world-description\">\n Metaskool Parameswara World is a vibrant virtual environment that blends gaming with cultural exploration. Set in a richly designed landscape inspired by historical and mythical elements, players can engage in quests, challenges, and collaborative activities that celebrate diverse cultures and traditions.\n <\/p>\n <a href=\"https:\/\/www.spatial.io\/s\/Parameswara-Meta-China-66dbe416f6d74e9b56bec1f2?share=0\" target=\"_blank\" class=\"metaskool-play-button\">Access Metaverse<\/a>\n <\/div>\n <\/div>\n\n \n <div class=\"metaskool-world-card metaskool-fade-in\">\n <img decoding=\"async\" src=\"https:\/\/www.ukm.my\/metaskool\/wp-content\/uploads\/2025\/11\/image-2-1-scaled.png\" \n alt=\"MetaSkool DTABF\" class=\"metaskool-world-image\" onerror=\"this.style.display='none'; this.nextElementSibling.style.display='flex';\">\n <div class=\"metaskool-world-image-placeholder\" style=\"display: none;\">MetaSkool Parameswara<\/div>\n <div class=\"metaskool-world-content\">\n <div class=\"metaskool-world-header\">\n <h2 class=\"metaskool-world-title\">MetaSkool: Drive to A Better Future<\/h2>\n <\/div>\n <p class=\"metaskool-world-description\">\n MetaskoolL: Drive to A Better Future is an innovative virtual world that empowers players to explore sustainable practices and environmental stewardship. Through engaging gameplay and interactive challenges, players learn about climate change, conservation, and the importance of protecting our planet for future generations.\n <\/p>\n <a href=\"https:\/\/www.spatial.io\/s\/Drive-To-A-Better-Future-684b875b7096556e2726aa0f?share=883809180209292036\" target=\"_blank\" class=\"metaskool-play-button\">Access Metaverse<\/a>\n <\/div>\n <\/div>\n\n\n \n <div class=\"metaskool-world-card metaskool-fade-in\">\n <img decoding=\"async\" src=\"https:\/\/www.ukm.my\/metaskool\/wp-content\/uploads\/2025\/11\/image-3-scaled.png\" \n alt=\"MetaSkool France\" class=\"metaskool-world-image\" onerror=\"this.style.display='none'; this.nextElementSibling.style.display='flex';\">\n <div class=\"metaskool-world-image-placeholder\" style=\"display: none;\">MetaSkool France<\/div>\n <div class=\"metaskool-world-content\">\n <div class=\"metaskool-world-header\">\n <h2 class=\"metaskool-world-title\">MetaSkool:Le Monde De Paris<\/h2>\n <\/div>\n <p class=\"metaskool-world-description\">\n Step into the heart of Paris and learn French through immersive experiences. Explore iconic landmarks, interact with native-speaking NPCs, and practice essential phrases in real-world contexts, all while enjoying the sights and sounds of the City of Light.\n <\/p>\n <a href=\"https:\/\/www.spatial.io\/s\/Le-Monde-de-Paris-690ec0b084b580661372085f?share=5917075493221334771\" target=\"_blank\" class=\"metaskool-play-button\">Access Metaverse<\/a>\n <\/div>\n <\/div>\n\n\n \n <div class=\"metaskool-world-card metaskool-fade-in\">\n <img decoding=\"async\" src=\"https:\/\/www.ukm.my\/metaskool\/wp-content\/uploads\/2024\/10\/Screenshot-2024-10-26-152231-1024x390.png\" \n alt=\"SSTP Labuan HQ\" class=\"metaskool-world-image\" onerror=\"this.style.display='none'; this.nextElementSibling.style.display='flex';\">\n <div class=\"metaskool-world-image-placeholder\" style=\"display: none;\">SSTP Labuan HQ<\/div>\n <div class=\"metaskool-world-content\">\n <div class=\"metaskool-world-header\">\n <h2 class=\"metaskool-world-title\">JPN Labuan HQ<\/h2>\n <\/div>\n <p class=\"metaskool-world-description\">\n Step into the JPN Labuan HQ, a virtual home base designed by Labuan\u2019s own schools. Here, students and teachers can explore immersive worlds, join activities, and connect with others\u2014making learning fun, interactive, and limitless.\n <\/p>\n <a href=\"https:\/\/www.spatial.io\/s\/SSTP-WP-Labuan-66fd7d4366126938d7f1679c?share=5461215598753398082\" target=\"_blank\" class=\"metaskool-play-button\">Access Metaverse<\/a>\n <\/div>\n <\/div>\n\n \n <div class=\"metaskool-world-card metaskool-fade-in\">\n <img decoding=\"async\" src=\"https:\/\/www.ukm.my\/metaskool\/wp-content\/uploads\/2024\/11\/SSTP-Melaka-on-11-14-24-at-10.06-AM-1024x508.png\" \n alt=\"SSTP Melaka HQ\" class=\"metaskool-world-image\" onerror=\"this.style.display='none'; this.nextElementSibling.style.display='flex';\">\n <div class=\"metaskool-world-image-placeholder\" style=\"display: none;\">SSTP Melaka HQ<\/div>\n <div class=\"metaskool-world-content\">\n <div class=\"metaskool-world-header\">\n <h2 class=\"metaskool-world-title\">JPN Melaka HQ<\/h2>\n <\/div>\n <p class=\"metaskool-world-description\">\n The JPN Melaka HQ is a dedicated metaverse hub developed by schools in Melaka. It provides an interactive space where students and teachers can connect, explore immersive environments, and collaborate on creative and educational projects.\n <\/p>\n <a href=\"https:\/\/www.spatial.io\/s\/SSTP-Melaka-67204477eeb9742b2d512aa4?share=404033059719784998\" target=\"_blank\" class=\"metaskool-play-button\">Access Metaverse<\/a>\n <\/div>\n <\/div>\n\n \n <div class=\"metaskool-world-card metaskool-fade-in\">\n <img decoding=\"async\" src=\"https:\/\/www.ukm.my\/metaskool\/wp-content\/uploads\/2024\/11\/JPN-Sabah-on-11-14-24-at-11.31-AM-1024x517.png\" \n alt=\"JPN Sabah HQ\" class=\"metaskool-world-image\" onerror=\"this.style.display='none'; this.nextElementSibling.style.display='flex';\">\n <div class=\"metaskool-world-image-placeholder\" style=\"display: none;\">JPN Sabah HQ<\/div>\n <div class=\"metaskool-world-content\">\n <div class=\"metaskool-world-header\">\n <h2 class=\"metaskool-world-title\">JPN Sabah HQ<\/h2>\n <\/div>\n <p class=\"metaskool-world-description\">\n The JPN Sabah HQ serves as a central meeting point in the metaverse, designed by schools across Sabah. It provides opportunities for students and educators to collaborate, innovate, and engage with immersive educational experiences.\n <\/p>\n <a href=\"https:\/\/www.spatial.io\/s\/JPN-Sabah-671b34d09165370c3c76f800?share=8580535881550797116\" target=\"_blank\" class=\"metaskool-play-button\">Access Metaverse<\/a>\n <\/div>\n <\/div>\n\n \n <div class=\"metaskool-world-card metaskool-fade-in\">\n <img decoding=\"async\" src=\"https:\/\/www.ukm.my\/metaskool\/wp-content\/uploads\/2024\/11\/Screenshot-2024-11-19-195419-1024x498.png\" \n alt=\"SSTP Johor HQ\" class=\"metaskool-world-image\" onerror=\"this.style.display='none'; this.nextElementSibling.style.display='flex';\">\n <div class=\"metaskool-world-image-placeholder\" style=\"display: none;\">JPN Johor HQ<\/div>\n <div class=\"metaskool-world-content\">\n <div class=\"metaskool-world-header\">\n <h2 class=\"metaskool-world-title\">JPN Johor HQ<\/h2>\n <\/div>\n <p class=\"metaskool-world-description\">\n Built by selected schools in Johor, the Johor HQ stands as a hub in the metaverse where students and educators can discover new ways of learning, connect across digital spaces, and collaborate on creative ideas.\n <\/p>\n <a href=\"https:\/\/www.spatial.io\/s\/SSTP-Johor-6735ab360934a7f92febe13f?share=6382296245250470094\" target=\"_blank\" class=\"metaskool-play-button\">Access Metaverse<\/a>\n <\/div>\n <\/div>\n\n \n <div class=\"metaskool-world-card metaskool-fade-in\">\n <img decoding=\"async\" src=\"https:\/\/www.ukm.my\/metaskool\/wp-content\/uploads\/2024\/12\/Screenshot-2024-12-12-170839-1024x425.png\" \n alt=\"SSTP Kuala Lumpur HQ\" class=\"metaskool-world-image\" onerror=\"this.style.display='none'; this.nextElementSibling.style.display='flex';\">\n <div class=\"metaskool-world-image-placeholder\" style=\"display: none;\">JPN Kuala Lumpur HQ<\/div>\n <div class=\"metaskool-world-content\">\n <div class=\"metaskool-world-header\">\n <h2 class=\"metaskool-world-title\">JPN Kuala Lumpur HQ<\/h2>\n <\/div>\n <p class=\"metaskool-world-description\">\n As a gateway to digital learning, the JPN Kuala Lumpur HQ opens opportunities for students and teachers to connect, discover innovative worlds, and experience education without boundaries.\n <\/p>\n <a href=\"https:\/\/www.spatial.io\/s\/SSTP-WP-KUALA-LUMPUR-6757b2fc8053fbfabdd1ef34?share=742101832845980379\" target=\"_blank\" class=\"metaskool-play-button\">Access Metaverse<\/a>\n <\/div>\n <\/div>\n\n \n <div class=\"metaskool-world-card metaskool-fade-in\">\n <img decoding=\"async\" src=\"https:\/\/www.ukm.my\/metaskool\/wp-content\/uploads\/2024\/12\/Screenshot-2024-12-12-171011-1024x465.png\" \n alt=\"JPN Sarawak HQ\" class=\"metaskool-world-image\" onerror=\"this.style.display='none'; this.nextElementSibling.style.display='flex';\">\n <div class=\"metaskool-world-image-placeholder\" style=\"display: none;\">JPN Sarawak HQ<\/div>\n <div class=\"metaskool-world-content\">\n <div class=\"metaskool-world-header\">\n <h2 class=\"metaskool-world-title\">JPN Sarawak HQ<\/h2>\n <\/div>\n <p class=\"metaskool-world-description\">\n At the JPN Sarawak HQ, learning comes alive as students and educators collaborate on projects, explore immersive environments, and build meaningful connections across virtual communities.\n <\/p>\n <a href=\"https:\/\/www.spatial.io\/s\/JPN-SARAWAK-67451c5ee83d98deb2b115cb?share=8076304539953097247\" target=\"_blank\" class=\"metaskool-play-button\">Access Metaverse<\/a>\n <\/div>\n <\/div>\n\n \n <div class=\"metaskool-world-card metaskool-fade-in\">\n <div class=\"metaskool-world-image-container\">\n <img decoding=\"async\" src=\"https:\/\/www.ukm.my\/metaskool\/wp-content\/uploads\/2025\/05\/image-min-1024x524.png\" \n alt=\"SSTP Selangor HQ\" class=\"metaskool-world-image\">\n <button class=\"metaskool-video-btn\" onclick=\"openVideo('wn7XCsUtMHc')\" aria-label=\"Watch video\">\n <i class=\"fas fa-play\"><\/i>\n <\/button>\n <\/div>\n <div class=\"metaskool-world-content\">\n <div class=\"metaskool-world-header\">\n <h2 class=\"metaskool-world-title\"> JPN Selangor HQ<\/h2>\n <\/div>\n <p class=\"metaskool-world-description\">\n Created by schools in Selangor, the JPN Selangor HQ is a hub in the metaverse where students and teachers can explore immersive spaces, collaborate on ideas, and connect through future-ready learning experiences.\n <\/p>\n <a href=\"https:\/\/www.spatial.io\/s\/SSTP-Selangor-HQ-681da847a1cf93873ec096c2?share=5486330668586686436\" target=\"_blank\" class=\"metaskool-play-button\">\n Access Metaverse\n <\/a>\n <\/div>\n <\/div>\n\n \n <div class=\"metaskool-world-card metaskool-fade-in\">\n <div class=\"metaskool-world-image-container\">\n <img decoding=\"async\" src=\"https:\/\/www.ukm.my\/metaskool\/wp-content\/uploads\/2025\/06\/sstp-jpn-kedah-metaskool-1024x530.jpeg\" \n alt=\"SSTP JPN Kedah HQ\" class=\"metaskool-world-image\">\n <button class=\"metaskool-video-btn\" onclick=\"openVideo('PLpI9krcsTI')\" aria-label=\"Watch video\">\n <i class=\"fas fa-play\"><\/i>\n <\/button>\n <\/div>\n <div class=\"metaskool-world-content\">\n <div class=\"metaskool-world-header\">\n <h2 class=\"metaskool-world-title\"> JPN Kedah HQ<\/h2>\n <\/div>\n <p class=\"metaskool-world-description\">\n Highlighting Kedah\u2019s drive for digital innovation, the JPN Kedah HQ empowers students and educators to learn, create, and grow together in immersive virtual environments.\n <\/p>\n <a href=\"https:\/\/www.spatial.io\/s\/SSTP-JPN-Kedah-HQ-683fdd202b898296c78b4d73?share=3034533777109101659\" target=\"_blank\" class=\"metaskool-play-button\">\n Access Metaverse\n <\/a>\n <\/div>\n <\/div>\n \n <div class=\"metaskool-world-card metaskool-fade-in\">\n <div class=\"metaskool-world-image-container\">\n <img decoding=\"async\" src=\"https:\/\/www.ukm.my\/metaskool\/wp-content\/uploads\/2025\/07\/image-scaled.png\" \n alt=\"SSTP JPN Pahang HQ\" class=\"metaskool-world-image\">\n <button class=\"metaskool-video-btn\" onclick=\"openVideo('KyP5ZV-rzto')\" aria-label=\"Watch video\">\n <i class=\"fas fa-play\"><\/i>\n <\/button>\n <\/div>\n <div class=\"metaskool-world-content\">\n <div class=\"metaskool-world-header\">\n <h2 class=\"metaskool-world-title\">JPN Pahang HQ<\/h2>\n <\/div>\n <p class=\"metaskool-world-description\">\n At the JPN Pahang HQ, students and teachers explore immersive worlds, connect through shared projects, and collaborate in ways that transform traditional learning into interactive digital experiences.\n <\/p>\n <a href=\"https:\/\/www.spatial.io\/s\/SSTP-JPN-Pahang-HQ-687e4e174a7d6311bc852b16?share=8098598338045192662\" target=\"_blank\" class=\"metaskool-play-button\">\n Access Metaverse\n <\/a>\n <\/div>\n <\/div>\n\n \n <div class=\"metaskool-world-card metaskool-fade-in\">\n <div class=\"metaskool-world-image-container\">\n <img decoding=\"async\" src=\"https:\/\/www.ukm.my\/metaskool\/wp-content\/uploads\/2025\/07\/Screenshot-2025-07-25-at-4.43.36-PM-scaled.jpeg\" \n alt=\"SSTP JPN N9 HQ\" class=\"metaskool-world-image\">\n <button class=\"metaskool-video-btn\" onclick=\"openVideo('q618fHouT5Q')\" aria-label=\"Watch video\">\n <i class=\"fas fa-play\"><\/i>\n <\/button>\n <\/div>\n <div class=\"metaskool-world-content\">\n <div class=\"metaskool-world-header\">\n <h2 class=\"metaskool-world-title\">JPN Negeri Sembilan HQ<\/h2>\n <\/div>\n <p class=\"metaskool-world-description\">\n The JPN Negeri Sembilan HQ stands as a hub in the metaverse, designed during the MetaSkool ToT session. It reflects two days of hands-on exploration where educators and learners built confidence in digital collaboration and creativity.\n <\/p>\n <a href=\"https:\/\/www.spatial.io\/s\/SSTP-JPN-Negeri-Sembilan-HQ-68833c954a7d6311bc8f1029?share=4278144498048192798\" target=\"_blank\" class=\"metaskool-play-button\">\n Access Metaverse\n <\/a>\n <\/div>\n <\/div>\n\n\n<div class=\"metaskool-world-card metaskool-fade-in\">\n <div class=\"metaskool-world-image-container\">\n <img decoding=\"async\" src=\"https:\/\/www.ukm.my\/metaskool\/wp-content\/uploads\/2025\/08\/Screenshot-2025-08-04-at-4.40.44-PM-scaled.png\" \n alt=\"SSTP JPN Perak\" class=\"metaskool-world-image\">\n <button class=\"metaskool-video-btn\" onclick=\"openVideo('GQdW1iTAhwE')\" aria-label=\"Watch video\">\n <i class=\"fas fa-play\"><\/i>\n <\/button>\n <\/div>\n <div class=\"metaskool-world-content\">\n <div class=\"metaskool-world-header\">\n <h2 class=\"metaskool-world-title\">JPN Perak HQ<\/h2>\n <\/div>\n <p class=\"metaskool-world-description\">\n Built by 12 teachers and 24 students from 12 schools during the MetaSkool ToT, the JPN Perak HQ is a metaverse hub that showcases creativity, collaboration, and innovation in support of Malaysia\u2019s digital education vision.\n <\/p>\n <a href=\"https:\/\/www.spatial.io\/s\/SSTP-JPN-Perak-HQ-68902b30e54b7dbaf2234e1e?share=7113860272713157834\" target=\"_blank\" class=\"metaskool-play-button\">\n Access Metaverse\n <\/a>\n <\/div>\n<\/div>\n\n\n<div class=\"metaskool-world-card metaskool-fade-in\">\n <div class=\"metaskool-world-image-container\">\n <img decoding=\"async\" src=\"https:\/\/www.ukm.my\/metaskool\/wp-content\/uploads\/2025\/08\/totpenang-scaled.png\" \n alt=\"SSTP JPN Perak\" class=\"metaskool-world-image\">\n <button class=\"metaskool-video-btn\" onclick=\"openVideo('g7uWc-00uzw')\" aria-label=\"Watch video\">\n <i class=\"fas fa-play\"><\/i>\n <\/button>\n <\/div>\n <div class=\"metaskool-world-content\">\n <div class=\"metaskool-world-header\">\n <h2 class=\"metaskool-world-title\">JPN Pulau Pinang HQ<\/h2>\n <\/div>\n <p class=\"metaskool-world-description\">\n The JPN Pulau Pinang HQ was brought to life by students and teachers in the MetaSkool ToT session, showcasing their creativity and collaboration in building a hub that represents digital learning for the future.\n <\/p>\n <a href=\"https:\/\/www.spatial.io\/s\/SSTP-JPN-Pulau-Pinang-HQ-68a933940d41c996f752ba6e?share=78600161923911630\" target=\"_blank\" class=\"metaskool-play-button\">\n Access Metaverse\n <\/a>\n <\/div>\n<\/div>\n \n \n <\/div>\n<\/div>\n\n\n<div class=\"metaskool-modal\" id=\"videoModal\">\n <div class=\"metaskool-modal-content\">\n <button class=\"metaskool-modal-close\" onclick=\"closeVideo()\">×<\/button>\n <div class=\"metaskool-video-container\">\n <iframe id=\"videoFrame\" \n allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" \n allowfullscreen><\/iframe>\n <\/div>\n <\/div>\n<\/div>\n\n<script>\n \/\/ Add Font Awesome for the play icon\n if (!document.querySelector('link[href*=\"font-awesome\"]')) {\n const link = document.createElement('link');\n link.rel = 'stylesheet';\n link.href = 'https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/5.15.4\/css\/all.min.css';\n document.head.appendChild(link);\n }\n\n function openVideo(videoId) {\n const modal = document.getElementById('videoModal');\n const videoFrame = document.getElementById('videoFrame');\n videoFrame.src = `https:\/\/www.youtube.com\/embed\/${videoId}?autoplay=1`;\n modal.classList.add('active');\n document.body.style.overflow = 'hidden'; \/\/ Prevent scrolling\n }\n\n function closeVideo() {\n const modal = document.getElementById('videoModal');\n const videoFrame = document.getElementById('videoFrame');\n videoFrame.src = '';\n modal.classList.remove('active');\n document.body.style.overflow = ''; \/\/ Restore scrolling\n }\n\n \/\/ Close modal on background click\n document.getElementById('videoModal').addEventListener('click', function(e) {\n if (e.target === this) {\n closeVideo();\n }\n });\n\n \/\/ Close modal on escape key\n document.addEventListener('keydown', function(e) {\n if (e.key === 'Escape') {\n closeVideo();\n }\n });\n<\/script>\n<\/body>\n<\/html>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-4db4d81 e-flex e-con-boxed e-con e-parent\" data-id=\"4db4d81\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\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>Our Worlds | MetaSkool Our Worlds MetaSkool HQ MetaSkool HQ Welcome to MetaSkool HQ, the central hub connecting all metaverse worlds for pioneering teachers, where<a class=\"ut-readmore\" href=\"https:\/\/www.ukm.my\/metaskool\/our-worlds-2\/\"> …<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-298","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.ukm.my\/metaskool\/wp-json\/wp\/v2\/pages\/298","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ukm.my\/metaskool\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.ukm.my\/metaskool\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.ukm.my\/metaskool\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ukm.my\/metaskool\/wp-json\/wp\/v2\/comments?post=298"}],"version-history":[{"count":66,"href":"https:\/\/www.ukm.my\/metaskool\/wp-json\/wp\/v2\/pages\/298\/revisions"}],"predecessor-version":[{"id":864,"href":"https:\/\/www.ukm.my\/metaskool\/wp-json\/wp\/v2\/pages\/298\/revisions\/864"}],"wp:attachment":[{"href":"https:\/\/www.ukm.my\/metaskool\/wp-json\/wp\/v2\/media?parent=298"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}