{"id":30578,"date":"2025-10-14T12:34:47","date_gmt":"2025-10-14T04:34:47","guid":{"rendered":"https:\/\/www.hkmu.edu.hk\/oetools\/?page_id=30578"},"modified":"2025-11-26T16:40:27","modified_gmt":"2025-11-26T08:40:27","slug":"knowledge-commons","status":"publish","type":"page","link":"https:\/\/www.hkmu.edu.hk\/oetools\/knowledge-commons\/","title":{"rendered":"Resource Hub"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"30578\" class=\"elementor elementor-30578\" data-elementor-settings=\"[]\">\n\t\t\t\t\t\t\t<div class=\"elementor-section-wrap\">\n\t\t\t\t\t\t\t<section class=\"has_eae_slider wavo-column-gap-default elementor-section elementor-top-section elementor-element elementor-element-b959e0a elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"b959e0a\" data-element_type=\"section\" data-settings=\"{&quot;jet_parallax_layout_list&quot;:[]}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"has_eae_slider elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-2d25b95\" data-id=\"2d25b95\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-0a6e600 elementor-widget elementor-widget-html\" data-id=\"0a6e600\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\r\n    \/* ===== AGGRESSIVE CSS RESET FOR ELEMENTOR ===== *\/\r\n    .skill-widget * {\r\n        max-width:1800px;!important;\r\n        margin: 0 !important;\r\n        padding: 0 !important;\r\n        box-sizing: border-box !important;\r\n        border: none !important;\r\n        outline: none !important;\r\n    }\r\n    \r\n    .skill-widget {\r\n        all: initial !important;\r\n        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;\r\n        line-height: 1 !important;\r\n        width: 100% !important;\r\n        max-width: none !important;\r\n        margin: 0 !important;\r\n        padding: 0 !important;\r\n        position: relative !important;\r\n        display: block !important;\r\n    }\r\n\r\n    \/* ===== HEADER SECTION ===== *\/\r\n    .skill-widget .header {\r\n        background-image: url('https:\/\/www.hkmu.edu.hk\/oetools\/wp-content\/uploads\/sites\/86\/2025\/10\/Resources-Mainpage-Banner-Background-scaled-1.jpg') !important;\r\n        background-size: cover !important;\r\n        background-position: center !important;\r\n        background-repeat: no-repeat !important;\r\n        min-height: 50px !important;\r\n        height: 50vh !important;\r\n        display: flex !important;\r\n        flex-direction: column !important;\r\n        justify-content: center !important;\r\n        align-items: flex-start !important;\r\n        padding: 40px !important;\r\n        position: relative !important;\r\n        width: 100% !important;\r\n        margin: 0 !important;\r\n        max-height: 230px !important;\r\n    }\r\n\r\n    \/* Header Content *\/\r\n    .skill-widget .header-content {\r\n        margin-left: 60px !important;\r\n    }\r\n\r\n    .skill-widget .header-content h1 {\r\n        color: #ffffff !important;\r\n        font-size: 5rem !important;\r\n        font-weight: 900 !important;\r\n        letter-spacing: 0.2em !important;\r\n        margin-bottom: 20px !important;\r\n        line-height: 1 !important;\r\n        text-shadow: 0 2px 4px rgba(0,0,0,0.3) !important;\r\n        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;\r\n    }\r\n\r\n    .skill-widget .header-content p {\r\n        color: #ffffff !important;\r\n        font-size: 1.5rem !important;\r\n        font-weight: 300 !important;\r\n        line-height: 1.2 !important;\r\n        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;\r\n    }\r\n\r\n    \/* ===== MAIN CONTENT SECTION ===== *\/\r\n    .skill-widget .main-content {\r\n        background-color: #CFE2CF !important; \/* Updated theme background *\/\r\n        padding: 40px 40px !important;\r\n        min-height: 100vh !important;\r\n        width: 100% !important;\r\n        margin: 0 !important;\r\n    }\r\n\r\n    .skill-widget .container {\r\n        max-width: 1800px !important;\r\n        margin: 0 auto !important;\r\n        width: 100% !important;\r\n        padding: 0 !important;\r\n    }\r\n\r\n    \/* Content Header *\/\r\n    .skill-widget .content-header {\r\n        text-align: center !important;\r\n        margin-bottom: 60px !important;\r\n        width: 100% !important;\r\n        padding: 0 !important;\r\n    }\r\n\r\n    .skill-widget .content-header h2 {\r\n        color: #32744C !important; \/* was white *\/\r\n        font-size: 3rem !important;\r\n        font-weight: 700 !important;\r\n        margin-bottom: 20px !important;\r\n        line-height: 1.2 !important;\r\n        text-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;\r\n        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;\r\n    }\r\n\r\n    .skill-widget .content-header p {\r\n        color: #4C4F26 !important; \/* was white *\/\r\n        font-size: 1.2rem !important;\r\n        line-height: 1.6 !important;\r\n        max-width: 800px !important;\r\n        font-weight: 460 !important;\r\n        margin: 0 auto !important;\r\n        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;\r\n    }\r\n\r\n    \/* ===== ITEMS SECTION ===== *\/\r\n    .skill-widget .items-section {\r\n        width: 100% !important;\r\n        margin-left: calc(-50vw + 50%) !important;\r\n        position: relative !important;\r\n        margin: 0 !important;\r\n        padding: 0 !important;\r\n    }\r\n\r\n    .skill-widget .items-container {\r\n        max-width: 1500px !important;\r\n        margin: 0 auto !important;\r\n        width: 100% !important;\r\n        padding: 0 !important;\r\n    }\r\n\r\n    .skill-widget .items-grid {\r\n        display: grid !important;\r\n        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;\r\n        gap: 30px !important;\r\n        width: 100% !important;\r\n        margin: 0 !important;\r\n        padding: 20px !important; \r\n        box-sizing: border-box !important;\r\n    }\r\n\r\n    \/* ===== CARD COMPONENTS ===== *\/\r\n    .skill-widget .card {\r\n        background: #67a1ffc2 !important; \r\n        border-radius: 36px !important;\r\n        padding: 40px 30px !important;\r\n        transition: all 0.3s ease !important;\r\n        cursor: pointer !important;\r\n        text-decoration: none !important;\r\n        color: inherit !important;\r\n        display: flex !important;\r\n        flex-direction: column !important;\r\n        align-items: center !important;\r\n        justify-content: center !important;\r\n        min-height: 280px !important;\r\n        width: 100% !important;\r\n        margin: 0 !important;\r\n        position: relative !important;\r\n    }\r\n\r\n    \/* Cards with content *\/\r\n    .skill-widget .card.active {\r\n        border: 2px solid #3B82F6 !important; \/* updated border: blue *\/\r\n    }\r\n\r\n    \/* Coming Soon Cards*\/\r\n    .skill-widget .card.coming-soon {\r\n        border: 2px dashed #A78BFA !important; \/* updated border: violet *\/\r\n    }\r\n\r\n    \/* Card Hover Effects *\/\r\n    .skill-widget .card:hover {\r\n        transform: translateY(-5px) !important;\r\n        background: #1E40AF !important; \/* darker hover: indigo *\/\r\n    }\r\n\r\n    \/* Card Icon *\/\r\n    .skill-widget .card-icon {\r\n        margin-bottom: 20px !important;\r\n        width: 100% !important;\r\n        display: flex !important;\r\n        justify-content: center !important;\r\n        align-items: center !important;\r\n    }\r\n\r\n    .skill-widget .card-icon img {\r\n        height: 100px !important;\r\n        width: auto !important;\r\n        max-width: 100% !important;\r\n        margin: 0 !important;\r\n        padding: 0 !important;\r\n    }\r\n\r\n    \/* Plus Icon for Coming Soon Cards *\/\r\n    .skill-widget .plus-icon {\r\n        font-size: 3rem !important;\r\n        color: #32744C !important;\r\n        margin-bottom: 20px !important;\r\n        font-weight: 300 !important;\r\n        line-height: 1 !important;\r\n        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;\r\n    }\r\n\r\n    \/* Card Typography *\/\r\n    \/* Card Title *\/\r\n    .skill-widget .card h3 {\r\n        color: #FFFFFF !important; \r\n        text-align: center !important;\r\n        font-size: 1.75rem !important;\r\n        font-weight: 700 !important;\r\n        margin-bottom: 15px !important;\r\n        line-height: 1.2 !important;\r\n        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;\r\n    }\r\n    \/* Card Subtitle *\/\r\n    .skill-widget .card p {\r\n        color: #F8FAFC !important; \r\n        text-align: justify !important;\r\n        font-size: 1.1rem !important;\r\n        line-height: 1.5 !important;\r\n        font-weight: 500 !important;\r\n        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;\r\n    }\r\n\r\n    \/* ===== RESPONSIVE DESIGN ===== *\/\r\n    @media (max-width: 768px) {\r\n        \/* Header Mobile Styles *\/\r\n        .skill-widget .header {\r\n            padding: 20px !important;\r\n            height: 400px !important;\r\n        }\r\n\r\n        .skill-widget .header-content {\r\n            margin-left: 15px !important;\r\n        }\r\n\r\n        .skill-widget .header-content h1 {\r\n            font-size: 3rem !important;\r\n        }\r\n\r\n        .skill-widget .header-content p {\r\n            font-size: 1.2rem !important;\r\n        }\r\n\r\n        \/* Main Content Mobile Styles *\/\r\n        .skill-widget .main-content {\r\n            padding: 40px 20px !important;\r\n        }\r\n\r\n        .skill-widget .content-header h2 {\r\n            font-size: 2rem !important;\r\n        }\r\n\r\n        \/* Items Grid Mobile Styles *\/\r\n        .skill-widget .items-grid {\r\n            grid-template-columns: 1fr !important;\r\n            gap: 20px !important;\r\n        }\r\n\r\n        .skill-widget .card {\r\n            padding: 30px 20px !important;\r\n            min-height: 240px !important;\r\n        }\r\n    }\r\n\r\n    @media (max-width: 480px) {\r\n        \/* Extra small screens *\/\r\n        .skill-widget .header-content h1 {\r\n            font-size: 2.5rem !important;\r\n        }\r\n\r\n        .skill-widget .content-header h2 {\r\n            font-size: 1.8rem !important;\r\n        }\r\n\r\n        .skill-widget .card {\r\n            padding: 20px !important;\r\n        }\r\n    }\r\n<\/style>\r\n\r\n<!-- ===== WIDGET CONTAINER ===== -->\r\n<div class=\"skill-widget\">\r\n    <!-- ===== HEADER SECTION ===== -->\r\n    <div class=\"header\">\r\n        <!-- Navigation Menu Button -->\r\n        <button class=\"hamburger\" aria-label=\"Menu\">\r\n            <span><\/span>\r\n            <span><\/span>\r\n            <span><\/span>\r\n        <\/button>\r\n        \r\n        <!-- Header Content -->\r\n        <div class=\"header-content\">\r\n            <h1>SKILL<\/h1>\r\n            <p>Shared Knowledge for Inspiring Learning & Leverage<\/p>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- ===== MAIN CONTENT SECTION ===== -->\r\n    <div class=\"main-content\">\r\n        <div class=\"container\">\r\n            <!-- Content Header with Title and Description -->\r\n            <div class=\"content-header\">\r\n                <h2>Your Strategic Knowledge Vault<\/h2>\r\n                <p>Your platform for academic advantage. Explore a curated ecosystem of open resources\u2014from flashcards to expert podcasts\u2014and leverage the knowledge to accelerate your growth and unlock opportunities.<\/p>\r\n            <\/div>\r\n\r\n            <!-- Items Section -->\r\n            <div class=\"items-section\">\r\n                <div class=\"items-container\">\r\n                    <div class=\"items-grid\" id=\"itemsGrid\">\r\n                        <!-- Cards will be dynamically generated by JavaScript -->\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/div>\r\n\r\n<!-- ===== JAVASCRIPT ===== -->\r\n<script>\r\n    (function() {\r\n        \/\/ Wrap everything in an IIFE to avoid conflicts\r\n        \r\n        \/**\r\n         * Configuration object containing all card data\r\n         *\/\r\n        const cardData = {\r\n            activeItems: [\r\n                {\r\n                    id: 1, \r\n                    logo: '<img decoding=\"async\" src=\"https:\/\/www.hkmu.edu.hk\/oetools\/wp-content\/uploads\/sites\/86\/2025\/10\/Resource-1-Chinese-Card-Logo.png\" alt=\"Chinese Flash Cards\" style=\"height: 80px;\">', \r\n                    name: \"Chinese Flash Cards\", \r\n                    description: \"Learn Chinese characters with pronunciation and example sentences.\", \r\n                    url: \"https:\/\/www.hkmu.edu.hk\/oetools\/resource-1-chinese-flash-cards\/\"\r\n                },\r\n                {\r\n                    id: 2, \r\n                    logo: '<img decoding=\"async\" src=\"https:\/\/www.hkmu.edu.hk\/oetools\/wp-content\/uploads\/sites\/86\/2025\/10\/Resource-2-Chinese-Sentence-Search-Logo.png\" alt=\"Words in Articles\" style=\"height: 80px;\">', \r\n                    name: \"Words in Articles\", \r\n                    description: \"Search Mandarin reading articles for sentences containing your term, with audio playback when available.\", \r\n                    url: \"https:\/\/www.hkmu.edu.hk\/oetools\/resource-2-words-in-articles\/\"\r\n                },\r\n                {\r\n                    id: 3, \r\n                    logo: '<img decoding=\"async\" src=\"https:\/\/www.hkmu.edu.hk\/oetools\/wp-content\/uploads\/sites\/86\/2025\/11\/Resource-3-Digestive-System-Logo.png\" alt=\"Digestive System\" style=\"height: 80px;\">', \r\n                    name: \"Digestive System Visualisation\", \r\n                    description: \"Visualize the human digestive process with interactive organ models and animated food breakdown.\", \r\n                    url: \"https:\/\/www.hkmu.edu.hk\/oetools\/resource-3-digestive-system-visualisation\/\"\r\n                },\r\n            ],\r\n            comingSoonCount: 0\r\n        };\r\n\r\n        function createActiveCard(item) {\r\n            return `\r\n                <a href=\"${item.url}\" class=\"card active\" aria-label=\"Go to ${item.name}\">\r\n                    <div class=\"card-icon\">${item.logo}<\/div>\r\n                    <h3>${item.name}<\/h3>\r\n                    <p>${item.description}<\/p>\r\n                <\/a>\r\n            `;\r\n        }\r\n\r\n        function createComingSoonCard() {\r\n            return `\r\n                <div class=\"card coming-soon\">\r\n                    <div class=\"plus-icon\">+<\/div>\r\n                    <h3>Coming Soon<\/h3>\r\n                    <p>More resources will be available here<\/p>\r\n                <\/div>\r\n            `;\r\n        }\r\n\r\n        function generateAllCards() {\r\n            const itemsGrid = document.getElementById('itemsGrid');\r\n            if (!itemsGrid) return;\r\n            \r\n            let cardsHTML = '';\r\n\r\n            cardData.activeItems.forEach(item => {\r\n                cardsHTML += createActiveCard(item);\r\n            });\r\n\r\n            for (let i = 0; i < cardData.comingSoonCount; i++) {\r\n                cardsHTML += createComingSoonCard();\r\n            }\r\n\r\n            itemsGrid.innerHTML = cardsHTML;\r\n        }\r\n\r\n        \/\/ Initialize when DOM is ready\r\n        if (document.readyState === 'loading') {\r\n            document.addEventListener('DOMContentLoaded', generateAllCards);\r\n        } else {\r\n            generateAllCards();\r\n        }\r\n    })();\r\n<\/script>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>SKILL Shared Knowledge for Inspiring Learning &#038; Leverage Your Strategic Knowledge Vault Your platform for academic advantage. Explore a curated ecosystem of open resources\u2014from flashcards to expert podcasts\u2014and leverage the knowledge to accelerate your growth and unlock opportunities.<\/p>\n","protected":false},"author":748,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"redux-templates_canvas","meta":{"_expiration-date-status":"","_expiration-date":0,"_expiration-date-type":"","_expiration-date-categories":[],"_expiration-date-options":[]},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v17.3 (Yoast SEO v21.2) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Resource Hub - Hong Kong Metropolitan University<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hkmu.edu.hk\/oetools\/knowledge-commons\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Resource Hub\" \/>\n<meta property=\"og:description\" content=\"SKILL Shared Knowledge for Inspiring Learning &amp; Leverage Your Strategic Knowledge Vault Your platform for academic advantage. Explore a curated ecosystem\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hkmu.edu.hk\/oetools\/knowledge-commons\/\" \/>\n<meta property=\"og:site_name\" content=\"Hong Kong Metropolitan University\" \/>\n<meta property=\"article:modified_time\" content=\"2025-11-26T08:40:27+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Resource Hub - Hong Kong Metropolitan University","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hkmu.edu.hk\/oetools\/knowledge-commons\/","og_locale":"en_US","og_type":"article","og_title":"Resource Hub","og_description":"SKILL Shared Knowledge for Inspiring Learning & Leverage Your Strategic Knowledge Vault Your platform for academic advantage. Explore a curated ecosystem","og_url":"https:\/\/www.hkmu.edu.hk\/oetools\/knowledge-commons\/","og_site_name":"Hong Kong Metropolitan University","article_modified_time":"2025-11-26T08:40:27+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.hkmu.edu.hk\/oetools\/knowledge-commons\/","url":"https:\/\/www.hkmu.edu.hk\/oetools\/knowledge-commons\/","name":"Resource Hub - Hong Kong Metropolitan University","isPartOf":{"@id":"https:\/\/www.hkmu.edu.hk\/oetools\/#website"},"datePublished":"2025-10-14T04:34:47+00:00","dateModified":"2025-11-26T08:40:27+00:00","breadcrumb":{"@id":"https:\/\/www.hkmu.edu.hk\/oetools\/knowledge-commons\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hkmu.edu.hk\/oetools\/knowledge-commons\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.hkmu.edu.hk\/oetools\/knowledge-commons\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Open Educational Tools","item":"\/oetools\/"},{"@type":"ListItem","position":2,"name":"Resource Hub"}]},{"@type":"WebSite","@id":"https:\/\/www.hkmu.edu.hk\/oetools\/#website","url":"https:\/\/www.hkmu.edu.hk\/oetools\/","name":"Hong Kong Metropolitan University","description":"Open Educational Tools - Hong Kong Metropolitan University","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hkmu.edu.hk\/oetools\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/www.hkmu.edu.hk\/oetools\/wp-json\/wp\/v2\/pages\/30578"}],"collection":[{"href":"https:\/\/www.hkmu.edu.hk\/oetools\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.hkmu.edu.hk\/oetools\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.hkmu.edu.hk\/oetools\/wp-json\/wp\/v2\/users\/748"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hkmu.edu.hk\/oetools\/wp-json\/wp\/v2\/comments?post=30578"}],"version-history":[{"count":48,"href":"https:\/\/www.hkmu.edu.hk\/oetools\/wp-json\/wp\/v2\/pages\/30578\/revisions"}],"predecessor-version":[{"id":31338,"href":"https:\/\/www.hkmu.edu.hk\/oetools\/wp-json\/wp\/v2\/pages\/30578\/revisions\/31338"}],"wp:attachment":[{"href":"https:\/\/www.hkmu.edu.hk\/oetools\/wp-json\/wp\/v2\/media?parent=30578"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}