{"id":464,"date":"2026-10-12T17:29:50","date_gmt":"2026-10-12T15:29:50","guid":{"rendered":"https:\/\/safeweb.um.si\/?page_id=464"},"modified":"2026-10-12T17:37:31","modified_gmt":"2026-10-12T15:37:31","slug":"wp2-rwd-e-learning-platform-and-cybersecurity-game","status":"publish","type":"page","link":"https:\/\/safeweb.um.si\/?page_id=464","title":{"rendered":"WP2 \u2013 RWD E-learning Platform and Cybersecurity Game"},"content":{"rendered":"\n<style data-wp-block-html=\"css\">\n\/* SafeWeb Theme Stylesheet *\/\n:root {\n  --primary-color: #0789DB;    \/* Dark Corporate Blue *\/\n  --secondary-color: #0789DB;  \/* Tech Teal \/ Cyan *\/\n  --accent-color: #003362;     \/* Soft Warm Accent *\/\n  --bg-light: #F8F9FA;         \/* Light Grey Background *\/\n  --text-dark: #2B2D42;        \/* Dark Charcoal Body Text *\/\n  --white: #FFFFFF;\n}\n\nbody {\n  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;\n  color: var(--text-dark);\n  background-color: var(--bg-light);\n  line-height: 1.6;\n}\n\n\/* Header & Hero Section *\/\n.hero-section {\n  background: linear-gradient(135deg, var(--primary-color) 0%, #001F3F 100%);\n  color: var(--white);\n  padding: 80px 20px;\n  text-align: center;\n}\n\n.hero-section h1 {\n  font-size: 2.8rem;\n  font-weight: 700;\n  margin-bottom: 20px;\n  color: #FFFFFF;\n}\n\n.hero-section p {\n  font-size: 1.25rem;\n  max-width: 800px;\n  margin: 0 auto 30px auto;\n  opacity: 0.9;\n}\n\n\/* Container & Cards *\/\n.container {\n  max-width: 1140px;\n  margin: 0 auto;\n  padding: 40px 20px;\n}\n\n.section-title {\n  color: var(--primary-color);\n  font-size: 2rem;\n  border-bottom: 3px solid var(--secondary-color);\n  display: inline-block;\n  padding-bottom: 8px;\n  margin-bottom: 30px;\n}\n\n.card-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));\n  gap: 20px;\n  margin-top: 20px;\n}\n\n.wp-card {\n  background: var(--white);\n  border-radius: 8px;\n  padding: 25px;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);\n  border-left: 5px solid var(--secondary-color);\n  transition: transform 0.2s ease, box-shadow 0.2s ease;\n}\n\n.wp-card:hover {\n  transform: translateY(-4px);\n  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);\n}\n\n.wp-card h3 {\n  color: var(--primary-color);\n  margin-top: 0;\n}\n\n.badge {\n  background-color: var(--secondary-color);\n  color: var(--white);\n  padding: 4px 10px;\n  font-size: 0.85rem;\n  border-radius: 4px;\n  font-weight: 600;\n}\n\n.partners-grid-detailed {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));\n  gap: 20px;\n  margin-top: 30px;\n}\n\n.partner-detailed-card {\n  background: #ffffff;\n  border: 1px solid #0789DB;\n  border-top: 5px solid #003362;\n  border-radius: 12px;\n  padding: 20px;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);\n  transition: transform 0.3s ease, box-shadow 0.3s ease;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n}\n\n.partner-detailed-card:hover {\n  transform: translateY(-5px);\n  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);\n  border-top-color: #0789DB;\n}\n\n.partner-header h3 {\n  color: #003362;\n  margin: 0 0 10px 0;\n  font-size: 1.1rem;\n  line-height: 1.3;\n}\n\n.partner-tag {\n  display: inline-block;\n  background-color: #0789DB;\n  color: #ffffff;\n  font-size: 0.7rem;\n  font-weight: 700;\n  padding: 3px 10px;\n  border-radius: 20px;\n  text-transform: uppercase;\n  margin-right: 5px;\n}\n\n.partner-role-badge {\n  display: inline-block;\n  background-color: #f1f5f9;\n  color: #334155;\n  font-size: 0.75rem;\n  font-weight: 600;\n  padding: 3px 8px;\n  border-radius: 6px;\n  margin-top: 6px;\n}\n<\/style>\n\n<!-- HERO SECTION -->\n<div class=\"hero-section\">\n  <h1>WP2 \u2013 RWD E-learning Platform and Cybersecurity Game<\/h1>\n  <p>Creation of a Responsive Web Design (RWD) e-learning platform and an interactive cybersecurity game to deliver digital safety modules and gamified scenarios tailored for VET learners.<\/p>\n<\/div>\n\n<div class=\"container\">\n\n  <!-- SECTION 1: OVERVIEW & KEY FACTS -->\n  <section id=\"wp2-overview\" style=\"margin-bottom: 60px;\">\n    <h2 class=\"section-title\">Work Package Overview<\/h2>\n    <p>Work Package 2 focuses on developing a centralized, responsive digital hub and an engaging cybersecurity game. Led by <strong>Euro Lider (Poland)<\/strong>, this WP ensures that all project outputs (including courses, teaching guides, and simulation scenarios) are fully accessible across desktop, mobile, and handheld devices in multiple languages.<\/p>\n    \n          <div class=\"wp-card\" style=\"border-left-color: var(--primary-color);\">\n        <h3>Core Deliverables<\/h3>\n        <ul>\n          <li><strong>RWD Platform:<\/strong> Fully responsive e-learning hub hosting all project courses, guides, and tools.<\/li>\n          <li><strong>Cyber-champion Game:<\/strong> Interactive online cybersecurity game testing knowledge acquired during the training.<\/li>\n          <li><strong>Virtual Game Launch Event:<\/strong> 24-hour competitive launch event featuring teams from all partner countries.<\/li>\n        <\/ul>\n      <\/div>\n    <\/section><\/div>\n \n\n  <!-- SECTION 2: WORK PACKAGE 2 ACTIVITIES -->\n  <section id=\"wp2-activities\" style=\"margin-bottom: 60px;\">\n    <h2 class=\"section-title\">WP2 Core Activities<\/h2>\n    <p>Work Package 2 is structured into 15 detailed implementation activities, ranging from architectural planning and platform programming to game scripting and virtual testing.<\/p>\n\n    <div class=\"card-grid\">\n      \n      <!-- A1 -->\n      <div class=\"wp-card\">\n        <span class=\"badge\">Activity A1<\/span>\n        <h3>Strategy &amp; Architecture Plan<\/h3>\n        <p>Creation of the platform strategy, technical specifications, and system architecture plan led by Euro Lider.<\/p>\n      <\/div>\n\n      <!-- A2 -->\n      <div class=\"wp-card\">\n        <span class=\"badge\">Activity A2<\/span>\n        <h3>Kick-Off Meeting (TPM1)<\/h3>\n        <p>In-person coordination meeting hosted by M\u00e4lardalen University in V\u00e4ster\u00e5s, Sweden, attended by all partners.<\/p>\n      <\/div>\n\n      <!-- A3 -->\n      <div class=\"wp-card\">\n        <span class=\"badge\">Activity A3<\/span>\n        <h3>Platform Programming<\/h3>\n        <p>Development of frontend, backend, database structures, and UI\/UX interface for the e-learning platform by Euro Lider.<\/p>\n      <\/div>\n\n      <!-- A4 -->\n      <div class=\"wp-card\">\n        <span class=\"badge\">Activity A4<\/span>\n        <h3>External Technical Testing<\/h3>\n        <p>Execution of test trails involving 35 testers (5 per country) to verify layout, login systems, and algorithm efficiency.<\/p>\n      <\/div>\n\n      <!-- A5 -->\n      <div class=\"wp-card\">\n        <span class=\"badge\">Activity A5<\/span>\n        <h3>Platform Environment Translation<\/h3>\n        <p>Translation of buttons, navigation menus, and interface elements into all 8 consortium languages.<\/p>\n      <\/div>\n\n      <!-- A6 -->\n      <div class=\"wp-card\">\n        <span class=\"badge\">Activity A6<\/span>\n        <h3>Final Platform Version &amp; Transfer<\/h3>\n        <p>Integration of final adjustments based on testing results and uploading of initial project materials.<\/p>\n      <\/div>\n\n      <!-- A7 -->\n      <div class=\"wp-card\">\n        <span class=\"badge\">Activity A7<\/span>\n        <h3>Continuous Development &amp; Adaptation<\/h3>\n        <p>Ongoing maintenance, optimization, and adaptation of the platform to host newly developed project creations.<\/p>\n      <\/div>\n\n      <!-- A8 -->\n      <div class=\"wp-card\">\n        <span class=\"badge\">Activity A8<\/span>\n        <h3>Game Structure &amp; Visualization Plan<\/h3>\n        <p>Outlining the conceptual layout, rules, and specifications for the &#8220;Cyber-champion&#8221; educational game.<\/p>\n      <\/div>\n\n      <!-- A9 -->\n      <div class=\"wp-card\">\n        <span class=\"badge\">Activity A9<\/span>\n        <h3>First Version of Game Script<\/h3>\n        <p>Drafting task contents, rules, and functional mechanics for the cybersecurity game in English.<\/p>\n      <\/div>\n\n      <!-- A10 -->\n      <div class=\"wp-card\">\n        <span class=\"badge\">Activity A10<\/span>\n        <h3>Game Script Evaluation<\/h3>\n        <p>Internal and external evaluation of the game script through specialized questionnaires completed by partners and external experts.<\/p>\n      <\/div>\n\n      <!-- A11 -->\n      <div class=\"wp-card\">\n        <span class=\"badge\">Activity A11<\/span>\n        <h3>Visual Adaptation &amp; Programming<\/h3>\n        <p>Designing the visual setting, graphics, and underlying algorithms for the cybersecurity game functionality.<\/p>\n      <\/div>\n\n      <!-- A12 -->\n      <div class=\"wp-card\">\n        <span class=\"badge\">Activity A12<\/span>\n        <h3>Game Functionality Testing<\/h3>\n        <p>Rigorous internal testing of game mechanics and features conducted by partners across all participating countries.<\/p>\n      <\/div>\n\n      <!-- A13 -->\n      <div class=\"wp-card\">\n        <span class=\"badge\">Activity A13<\/span>\n        <h3>Game Translation<\/h3>\n        <p>Translating game content, challenges, and instructions into all national consortium languages.<\/p>\n      <\/div>\n\n      <!-- A14 -->\n      <div class=\"wp-card\">\n        <span class=\"badge\">Activity A14<\/span>\n        <h3>Platform Implementation<\/h3>\n        <p>Deploying the final multilingual versions of the cybersecurity game directly onto the RWD e-learning platform.<\/p>\n      <\/div>\n\n      <!-- A15 -->\n      <div class=\"wp-card\">\n        <span class=\"badge\">Activity A15<\/span>\n        <h3>Virtual Public Game Event<\/h3>\n        <p>Organizing a 24-hour virtual competition event where partner teams compete in completing game levels before public release.<\/p>\n      <\/div>\n\n    <\/div>\n  <\/section>\n","protected":false},"excerpt":{"rendered":"<p>WP2 \u2013 RWD E-learning Platform and Cybersecurity Game Creation of a Responsive Web Design (RWD) e-learning platform and an interactive cybersecurity game to deliver digital safety modules and gamified scenarios tailored for VET learners. Work Package Overview Work Package 2 focuses on developing a centralized, responsive digital hub and an engaging cybersecurity game. Led by [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":426,"menu_order":2,"comment_status":"closed","ping_status":"closed","template":"page-no-title","meta":{"footnotes":""},"class_list":["post-464","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/safeweb.um.si\/index.php?rest_route=\/wp\/v2\/pages\/464","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/safeweb.um.si\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/safeweb.um.si\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/safeweb.um.si\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/safeweb.um.si\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=464"}],"version-history":[{"count":1,"href":"https:\/\/safeweb.um.si\/index.php?rest_route=\/wp\/v2\/pages\/464\/revisions"}],"predecessor-version":[{"id":465,"href":"https:\/\/safeweb.um.si\/index.php?rest_route=\/wp\/v2\/pages\/464\/revisions\/465"}],"up":[{"embeddable":true,"href":"https:\/\/safeweb.um.si\/index.php?rest_route=\/wp\/v2\/pages\/426"}],"wp:attachment":[{"href":"https:\/\/safeweb.um.si\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=464"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}