Quest Network Mapping: Comprehensive Learning Path Visualization
By Amr
Demonstration of the enhanced quest hierarchy system with complete mapping examples and mermaid diagrams
Estimated reading time: 17 minutes
Table of Contents
Quest Network Mapping Examples
This document demonstrates the comprehensive quest hierarchy system with practical examples of how main quests, side quests, bonus quests, and epic quests interconnect to create cohesive learning experiences.
Complete Quest Line Example: Foundation Path
Terminal Mastery Path Series
graph TB
subgraph "Prerequisites"
HelloNoob[🌱 Hello n00b<br/>Entry Point]
ComputerLit[🏰 Computer Literacy<br/>Main Quest]
end
subgraph "Terminal Mastery Path"
TerminalNav[🏰 Terminal Navigation<br/>Main Quest]
OhMyZsh[⚔️ Oh-My-Zsh Setup<br/>Side Quest]
NerdFonts[⚔️ Nerd Font Enchantment<br/>Side Quest]
ProductivityHacks[🎁 Terminal Productivity<br/>Bonus Quest]
ShellScript[🏰 Shell Scripting<br/>Main Quest]
TerminalEpic[👑 Terminal Automation<br/>Epic Quest]
end
subgraph "Unlocked Adventures"
GitMastery[🏰 Git Version Control<br/>Main Quest]
VSCodeMastery[🏰 VS Code Mastery<br/>Main Quest]
DevEnv[🏰 Dev Environment<br/>Main Quest]
end
HelloNoob --> ComputerLit
ComputerLit --> TerminalNav
TerminalNav --> OhMyZsh
TerminalNav --> NerdFonts
TerminalNav --> ProductivityHacks
OhMyZsh --> ShellScript
NerdFonts --> ShellScript
ShellScript --> TerminalEpic
TerminalNav --> GitMastery
TerminalNav --> VSCodeMastery
TerminalNav --> DevEnv
style TerminalNav fill:#87ceeb
style ShellScript fill:#87ceeb
style OhMyZsh fill:#ffd700
style NerdFonts fill:#ffd700
style ProductivityHacks fill:#ff69b4
style TerminalEpic fill:#9370db
Multi-Path Learning Network
Character Class Integration
graph TD
subgraph "Character Classes"
SoftwareDev[💻 Software Developer]
SystemEng[🏗️ System Engineer]
DataSci[📊 Data Scientist]
Security[🛡️ Security Specialist]
end
subgraph "Foundation Skills"
Terminal[🏰 Terminal Mastery]
Git[🏰 Version Control]
Editor[🏰 Text Editor Mastery]
end
subgraph "Specialization Paths"
Frontend[🎨 Frontend Development]
Backend[⚙️ Backend Systems]
DevOps[🔧 DevOps Automation]
SecOps[🛡️ Security Operations]
DataPipe[📊 Data Pipelines]
end
subgraph "Advanced Integration"
FullStack[👑 Full-Stack Epic]
CloudArch[👑 Cloud Architecture Epic]
AIIntegration[👑 AI Development Epic]
end
SoftwareDev --> Terminal
SystemEng --> Terminal
DataSci --> Terminal
Security --> Terminal
Terminal --> Git
Terminal --> Editor
Git --> Frontend
Git --> Backend
Editor --> Frontend
Editor --> Backend
Terminal --> DevOps
Terminal --> SecOps
Terminal --> DataPipe
Frontend --> FullStack
Backend --> FullStack
DevOps --> CloudArch
SecOps --> CloudArch
DataPipe --> AIIntegration
Quest Type Integration Example
Complete Learning Campaign: Web Development Mastery
timeline
title Web Development Mastery Campaign
section Foundation (Levels 0000-0111)
Init World : 🌱 Hello n00b (Entry)
: 🏰 Computer Literacy (Main)
: 🏰 Terminal Navigation (Main)
: ⚔️ Oh-My-Zsh Setup (Side)
: ⚔️ Nerd Fonts (Side)
Development : 🏰 HTML/CSS Fundamentals (Main)
: ⚔️ Bootstrap Integration (Side)
: 🏰 JavaScript Basics (Main)
: 🎁 ES6+ Features (Bonus)
section Intermediate (Levels 1000-1111)
Frontend : 🏰 React Fundamentals (Main)
: ⚔️ Component Libraries (Side)
: 🏰 State Management (Main)
: 🎁 Performance Optimization (Bonus)
Backend : 🏰 Node.js & Express (Main)
: ⚔️ API Documentation (Side)
: 🏰 Database Integration (Main)
: 🎁 Caching Strategies (Bonus)
section Advanced (Levels 10000+)
Integration : 🏰 Full-Stack Architecture (Main)
: ⚔️ Testing Strategies (Side)
: 👑 Portfolio Website Epic (Epic)
: 🎁 AI Integration (Bonus)
Production : 🏰 Deployment Automation (Main)
: ⚔️ Monitoring Setup (Side)
: 👑 E-commerce Platform Epic (Epic)
: 🎁 Microservices Migration (Bonus)
Dependency Chain Visualization
Complex Prerequisite Network
graph TB
subgraph "Entry Level"
A[🌱 Hello n00b]
end
subgraph "Foundation Layer"
B[🏰 Computer Literacy]
C[🏰 Terminal Navigation]
D[🏰 Text Editor Mastery]
end
subgraph "Development Fundamentals"
E[🏰 HTML/CSS Fundamentals]
F[🏰 JavaScript Basics]
G[🏰 Version Control with Git]
end
subgraph "Enhancement Layer"
H[⚔️ Oh-My-Zsh Setup]
I[⚔️ Bootstrap Integration]
J[⚔️ Git Workflow Optimization]
K[🎁 Advanced CSS Techniques]
L[🎁 JavaScript ES6+ Features]
end
subgraph "Intermediate Skills"
M[🏰 Frontend Framework Mastery]
N[🏰 Backend Development]
O[🏰 Database Design]
end
subgraph "Advanced Integration"
P[👑 Full-Stack Portfolio Epic]
Q[👑 E-commerce Platform Epic]
end
A --> B
B --> C
B --> D
C --> E
C --> F
C --> G
D --> E
D --> F
C --> H
E --> I
G --> J
E --> K
F --> L
E --> M
F --> M
F --> N
G --> N
M --> O
N --> O
M --> P
N --> P
O --> P
P --> Q
style A fill:#90EE90
style B fill:#87ceeb
style C fill:#87ceeb
style D fill:#87ceeb
style E fill:#87ceeb
style F fill:#87ceeb
style G fill:#87ceeb
style H fill:#ffd700
style I fill:#ffd700
style J fill:#ffd700
style K fill:#ff69b4
style L fill:#ff69b4
style M fill:#87ceeb
style N fill:#87ceeb
style O fill:#87ceeb
style P fill:#9370db
style Q fill:#9370db
Learning Path Customization
Different Character Class Journeys
graph TD
subgraph "Common Foundation"
Start[🌱 Hello n00b]
Terminal[🏰 Terminal Navigation]
Git[🏰 Version Control]
end
subgraph "Software Developer Path"
DevHTML[🏰 HTML/CSS Fundamentals]
DevJS[🏰 JavaScript Mastery]
DevFramework[🏰 Frontend Framework]
DevBackend[🏰 Backend Development]
DevEpic[👑 Full-Stack Portfolio Epic]
end
subgraph "System Engineer Path"
SysLinux[🏰 Linux Administration]
SysNetwork[🏰 Network Configuration]
SysDocker[🏰 Container Management]
SysCloud[🏰 Cloud Platform Mastery]
SysEpic[👑 Infrastructure Automation Epic]
end
subgraph "Data Scientist Path"
DataPython[🏰 Python Programming]
DataAnalysis[🏰 Data Analysis]
DataML[🏰 Machine Learning]
DataViz[🏰 Data Visualization]
DataEpic[👑 ML Pipeline Epic]
end
Start --> Terminal
Terminal --> Git
Git --> DevHTML
DevHTML --> DevJS
DevJS --> DevFramework
DevFramework --> DevBackend
DevBackend --> DevEpic
Git --> SysLinux
SysLinux --> SysNetwork
SysNetwork --> SysDocker
SysDocker --> SysCloud
SysCloud --> SysEpic
Git --> DataPython
DataPython --> DataAnalysis
DataAnalysis --> DataML
DataML --> DataViz
DataViz --> DataEpic
style Start fill:#90EE90
style Terminal fill:#87ceeb
style Git fill:#87ceeb
style DevEpic fill:#9370db
style SysEpic fill:#9370db
style DataEpic fill:#9370db
Quest Progress Tracking System
Individual Quest Progress
graph LR
subgraph "Quest Status Indicators"
NotStarted[⚪ Not Started]
InProgress[🟡 In Progress]
Completed[✅ Completed]
Mastered[🏆 Mastered]
end
subgraph "Quest Dependencies"
Locked[🔒 Locked]
Available[🟢 Available]
Recommended[🔵 Recommended]
end
subgraph "Quest Types"
Main[🏰 Main Quest]
Side[⚔️ Side Quest]
Bonus[🎁 Bonus Quest]
Epic[👑 Epic Quest]
end
Learning Path Progress Dashboard
graph TD
subgraph "Foundation Path Progress"
F1[✅ Hello n00b - Completed]
F2[✅ Terminal Navigation - Completed]
F3[🟡 Shell Scripting - In Progress]
F4[⚪ Version Control - Not Started]
F5[🔒 Advanced Automation - Locked]
end
subgraph "Side Quest Completion"
S1[✅ Oh-My-Zsh Setup - Completed]
S2[✅ Nerd Fonts - Completed]
S3[🟡 Productivity Hacks - In Progress]
end
subgraph "Available Next Steps"
N1[🟢 Git Fundamentals - Available]
N2[🟢 VS Code Mastery - Available]
N3[🔵 Development Environment - Recommended]
end
F2 --> S1
F2 --> S2
F3 --> N1
S1 --> N2
S2 --> N2
Implementation Guidelines
Quest Creator Workflow
graph TD
Idea[💡 Quest Idea] --> Analysis{Analyze Scope}
Analysis -->|60+ min, Multi-skill| EpicPath[👑 Epic Quest]
Analysis -->|60+ min, Single-skill| MainPath[🏰 Main Quest]
Analysis -->|15-60 min, Enhancement| SidePath[⚔️ Side Quest]
Analysis -->|Variable, Experimental| BonusPath[🎁 Bonus Quest]
EpicPath --> EpicTemplate[Use Epic Template]
MainPath --> MainTemplate[Use Main Template]
SidePath --> SideTemplate[Use Side Template]
BonusPath --> BonusTemplate[Use Bonus Template]
EpicTemplate --> Dependencies{Map Dependencies}
MainTemplate --> Dependencies
SideTemplate --> Dependencies
BonusTemplate --> Dependencies
Dependencies --> Network[Create Network Diagram]
Network --> Validate[Validate Quest Network]
Validate --> Publish[Publish Quest]
Automated Quest Map Generation
graph TB
subgraph "Data Sources"
Frontmatter[📄 Quest Frontmatter]
Registry[💾 Quest Registry]
UserProgress[📊 User Progress Data]
end
subgraph "Processing Engine"
Parser[🔍 YAML Parser]
Validator[✅ Dependency Validator]
MapGenerator[🗺️ Map Generator]
end
subgraph "Output Formats"
StaticMap[📄 Static Mermaid Diagrams]
InteractiveMap[🎮 Interactive Web Map]
ProgressDash[📊 Progress Dashboard]
RecommendEngine[🤖 Recommendation Engine]
end
Frontmatter --> Parser
Registry --> Parser
UserProgress --> Parser
Parser --> Validator
Validator --> MapGenerator
MapGenerator --> StaticMap
MapGenerator --> InteractiveMap
MapGenerator --> ProgressDash
MapGenerator --> RecommendEngine
Practical Implementation Examples
Jekyll Collection Integration
<!-- _layouts/quest.html - Enhanced quest layout -->
<article class="quest side_quest">
<header class="quest-header">
<h1>Quest Network Mapping: Comprehensive Learning Path Visualization</h1>
<div class="quest-metadata">
<span class="quest-type side_quest">
⚔️ Side Quest
</span>
<span class="difficulty">🟢 Easy</span>
<span class="time">Variable</span>
</div>
</header>
<!-- Quest Network Visualization -->
<!-- Main quest content -->
<main class="quest-content">
<!--
===================================================================
DEFAULT LAYOUT - Standard content layout with sidebars
===================================================================
File: default.html
Path: _layouts/default.html
Inherits: root.html
Purpose: Primary content layout with sidebar navigation and table of contents
Template Logic:
- Creates a responsive three-column layout using Bootstrap grid
- Left sidebar: Site navigation and content outline (collapsible on mobile)
- Center: Main content area with page title and body content
- Right sidebar: Table of contents and page shortcuts (hidden on mobile)
- Implements scroll spy for navigation highlighting
- Responsive design that stacks vertically on mobile devices
Layout Structure:
1. Container wrapper with Bootstrap responsive classes
2. Left sidebar (bd-sidebar) - Navigation and outline
3. Main content area (bd-main) with:
- Intro section (page title, metadata)
- Right sidebar (bd-toc) - Table of contents
- Content area (bd-content) - Main page content
Dependencies:
- sidebar-left.html: Site navigation and content outline
- intro.html: Page title, breadcrumbs, and metadata
- sidebar-right.html: Table of contents and page shortcuts
Bootstrap Classes Used:
- container-xxl: Extra large responsive container
- bd-gutter: Custom Bootstrap spacing
- bd-layout: Custom layout utility class
- bd-sidebar: Custom sidebar styling
- bd-main: Main content area
- bd-toc: Table of contents styling
- bd-content: Content area styling
===================================================================
-->
<!-- ================================================ -->
<!-- MAIN LAYOUT CONTAINER -->
<!-- Bootstrap responsive container with custom grid -->
<!-- ================================================ -->
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
<!-- ================================ -->
<!-- LEFT SIDEBAR - Navigation -->
<!-- ================================ -->
<!-- Site navigation, content outline, and offcanvas menu for mobile -->
<aside class="bd-sidebar">
<!--
===================================================================
SIDEBAR LEFT - Dynamic Navigation Sidebar
===================================================================
File: sidebar-left.html
Path: _includes/navigation/sidebar-left.html
Purpose: Left sidebar navigation with three standardized content modes
Template Logic:
- Responsive offcanvas sidebar for mobile devices
- Three navigation modes based on page.sidebar.nav:
* "auto": Auto-generated folder structure from collection documents
* "tree": YAML-defined hierarchical navigation from _data/navigation/
* "categories": Category-based navigation from site categories
Dependencies:
- sidebar-folders.html: Dynamic folder structure generation (auto mode)
- sidebar-categories.html: Category-based navigation (categories mode)
- nav-tree.html: YAML-based hierarchical tree (tree mode)
- Bootstrap 5 offcanvas component
Navigation Modes:
1. auto: Scans collection documents to build folder structure
2. tree: Uses predefined YAML navigation from _data/navigation/*.yml
3. categories: Groups content by Jekyll categories
===================================================================
-->
<!-- ================================ -->
<!-- SIDEBAR NAVIGATION CONTAINER -->
<!-- ================================ -->
<!-- Responsive offcanvas sidebar - full-width on mobile, fixed on desktop -->
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
<!-- ========================== -->
<!-- SIDEBAR HEADER -->
<!-- ========================== -->
<!-- Mobile-only header with close button -->
<div class="offcanvas-header border-bottom">
<h5 class="offcanvas-title" id="bdSidebarOffcanvasLabel">Browse docs</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close" data-bs-target="#bdSidebar"></button>
</div>
<!-- ========================== -->
<!-- SIDEBAR CONTENT AREA -->
<!-- ========================== -->
<!-- Scrollable content area with dynamic navigation options -->
<div class="offcanvas-body overflow-auto">
<!-- ========================== -->
<!-- AUTO MODE: Collection Docs -->
<!-- ========================== -->
<!-- Auto-generates folder structure from collection documents -->
<nav class="w-100 nav-tree" data-nav-tree>
<!--
===================================================================
NAV TREE - Flat YAML Navigation Renderer
===================================================================
File: nav-tree.html
Path: _includes/navigation/nav-tree.html
Purpose: Render hierarchical navigation from YAML data files
Parameters:
- nav: Name of navigation file in _data/navigation/ (e.g., "docs", "main")
Data Schema (expected in _data/navigation/*.yml):
- title: string (required) - Display text
- url: string (optional) - Link URL
- icon: string (optional) - Bootstrap Icons class (e.g., "bi-folder")
- expanded: boolean (optional) - Default expanded state (default: false)
- children: array (optional) - Nested navigation items (max 2 levels)
Note: This implementation supports 2 levels of nesting to avoid Jekyll's
include depth limit. For deeper nesting, consider a plugin approach.
Dependencies:
- site.data.navigation[nav]: Navigation YAML data
- Bootstrap 5 collapse component
- Bootstrap Icons for visual indicators
Usage:
include navigation/nav-tree.html nav="docs"
===================================================================
-->
<ul class="list-unstyled fw-normal pb-2 small nav-tree-root">
<li class="mb-1 nav-tree-item" data-depth="0">
<!-- Root level leaf item -->
<a href="/quests/home/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<i class="map me-2"></i>
<span>Quest Hub</span>
</a>
</li>
<li class="mb-1 nav-tree-item" data-depth="0">
<!-- Root level leaf item -->
<a href="/quests/0000/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<i class="seedling me-2"></i>
<span>Level 0000 - Foundation</span>
</a>
</li>
<li class="mb-1 nav-tree-item" data-depth="0">
<!-- Root level leaf item -->
<a href="/quests/0001/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<i class="leaf me-2"></i>
<span>Level 0001 - Beginner</span>
</a>
</li>
<li class="mb-1 nav-tree-item" data-depth="0">
<!-- Root level leaf item -->
<a href="/quests/0010/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<i class="tree me-2"></i>
<span>Level 0010 - Intermediate</span>
</a>
</li>
<li class="mb-1 nav-tree-item" data-depth="0">
<!-- Root level leaf item -->
<a href="/quests/0011/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<i class="mountain me-2"></i>
<span>Level 0011 - Advanced</span>
</a>
</li>
<li class="mb-1 nav-tree-item" data-depth="0">
<!-- Root level leaf item -->
<a href="/quests/0100/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<i class="box me-2"></i>
<span>Level 0100 - Container</span>
</a>
</li>
<li class="mb-1 nav-tree-item" data-depth="0">
<!-- Root level leaf item -->
<a href="/quests/0101/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<i class="rocket me-2"></i>
<span>Level 0101 - CI/CD</span>
</a>
</li>
<li class="mb-1 nav-tree-item" data-depth="0">
<!-- Root level leaf item -->
<span class="nav-tree-text d-inline-flex align-items-center py-1 px-2 text-muted">
<i class="book me-2"></i>
<span>Resources</span>
</span>
</li>
</ul>
</nav>
</div>
</div>
</aside>
<!-- ================================ -->
<!-- MAIN CONTENT AREA -->
<!-- ================================ -->
<!-- Primary content section with scroll spy for table of contents navigation -->
<main class="bd-main order-1" data-bs-spy="scroll" data-bs-target="#TableOfContents" data-bs-offset="100" data-bs-smooth-scroll="true">
<!-- Page introduction: title, breadcrumbs, metadata -->
<!--
file: _includes/intro.html
description: Enhanced intro section with improved share functionality and better button alignment
path: _includes/intro.html
features:
- Responsive share dropdown with multiple social platforms
- Properly aligned action buttons at bottom right
- Improved accessibility with icons and labels
- Clean button grouping with consistent spacing
-->
<!-- Intro Section -->
<div class="bd-intro pt-5 ps-lg-2 position-relative" style="
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('/assetsimages/previews/glossary.png') no-repeat center center / cover;
color: #fff;">
<br>
<h1>Glossary </h1>
<p>By Amr</p>
<p></p>
<p>Estimated reading time: 0 minutes</p>
<!-- Action Buttons Group -->
<div class="position-absolute bottom-0 end-0 m-3 d-flex gap-2">
<!-- Share Button -->
<div class="dropdown">
<button class="btn btn-info dropdown-toggle" type="button" id="shareDropdownBottom" data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-share"></i>
<span class="d-none d-sm-inline ms-1">Share</span>
</button>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="shareDropdownBottom">
<li>
<a class="dropdown-item" href="https://reddit.com/submit?url=https%3A%2F%2Fit-journey.dev%2Fquests%2Flevel-codex%2Fglossary%2F&title=Glossary+" target="_blank">
<i class="bi bi-reddit me-2"></i>Share on Reddit
</a>
</li>
<li>
<a class="dropdown-item" href="https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fit-journey.dev%2Fquests%2Flevel-codex%2Fglossary%2F" target="_blank">
<i class="bi bi-linkedin me-2"></i>Share on LinkedIn
</a>
</li>
<li>
<a class="dropdown-item" href="https://twitter.com/intent/tweet?url=https%3A%2F%2Fit-journey.dev%2Fquests%2Flevel-codex%2Fglossary%2F&text=Glossary+" target="_blank">
<i class="bi bi-twitter me-2"></i>Share on Twitter
</a>
</li>
<li><hr class="dropdown-divider"></li>
<li>
<button class="dropdown-item" onclick='navigator.clipboard.writeText("https://it-journey.dev/quests/level-codex/glossary/"); alert("Link copied to clipboard!");'>
<i class="bi bi-clipboard me-2"></i>Copy Link
</button>
</li>
</ul>
</div>
<!-- Edit on Github Button -->
<a href="https://github.com/bamr87/it-journey/blob/master/pages/_quests/codex/glossary.md" class="btn btn-dark">
<i class="bi bi-github"></i>
<span class="d-none d-sm-inline ms-1">Edit on GitHub</span>
</a>
</div>
</div>
<!-- =============================== -->
<!-- RIGHT SIDEBAR - Table of Contents -->
<!-- =============================== -->
<!-- Page outline, shortcuts, and related links (hidden on mobile) -->
<div class="bd-toc text-body-secondary">
<!--
file: sidebar-right.html
path: _includes/sidebar-right.html
includes: nav_list.html, content/toc.html
-->
<!-- TOC button in mobile view - Floating Action Button pattern -->
<!-- Positioned above back-to-top button to prevent overlap -->
<div class="d-lg-none position-fixed bd-toc-fab" style="bottom: 90px; right: 20px; z-index: 1030;">
<button class="btn btn-primary rounded-circle shadow-lg bd-toc-toggle"
type="button"
data-bs-toggle="offcanvas"
data-bs-target="#tocContents"
aria-controls="tocContents"
aria-label="Toggle Table of Contents"
style="width: 56px; height: 56px;">
<i class="bi bi-list-ul fs-5"></i>
</button>
</div>
<!-- Right sidebar container -->
<div class="offcanvas-lg offcanvas-end" tabindex="-1" id="tocContents" aria-labelledby="tocLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="tocLabel">Table of Contents</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close" data-bs-target="#tocContents"></button>
</div>
<div class="offcanvas-body">
<!-- Table of contents -->
<nav id="TableOfContents" role="navigation" aria-label="Table of Contents">
<!-- TOC title -->
<div class="mb-3">
<strong class="d-flex align-items-center">
<i class="bi bi-file-text me-2"></i>
On this page
</strong>
</div>
<!-- TOC list -->
<!-- TOC list -->
</nav>
</div>
</div>
</div>
<!-- =============================== -->
<!-- MAIN CONTENT BODY -->
<!-- =============================== -->
<!-- Where the actual page content is rendered -->
<div class="bd-content ps-lg-2">
<p>Enterprise</p>
<p>Spells - Scripts</p>
<p>Ship - Browser</p>
<p>Equipment -</p>
<p>Crafting station - IDE’s</p>
<p>Castle -</p>
<p>Market - Github</p>
<p>Farm -</p>
<p>Factory -</p>
<p>Research</p>
<p>Journal</p>
<p>Log</p>
<p>Mini games</p>
<p>Fortress</p>
<p>Governance</p>
<p>Diplomacy</p>
<p>Alliances</p>
<p>Lores</p>
<p>Items - apps,</p>
<p>Funds - Computing power</p>
<p>Class</p>
<p>Karma - contributions</p>
<p>Map - System arch</p>
<p>Languages</p>
<p>Worlds - OS</p>
</div>
</main>
</div>
</main>
</article>
Quest Discovery and Recommendation System
// quest-engine.js - Quest recommendation and mapping system
class QuestEngine {
constructor(questData) {
this.quests = questData;
this.questMap = this.buildQuestMap();
}
buildQuestMap() {
const map = new Map();
this.quests.forEach(quest => {
map.set(quest.permalink, {
...quest,
prerequisites: this.resolveQuestReferences(quest.quest_dependencies?.required_quests || []),
unlocks: this.resolveQuestReferences(quest.quest_dependencies?.unlocks_quests || []),
children: this.resolveQuestReferences(quest.quest_relationships?.child_quests || []),
parent: quest.quest_relationships?.parent_quest || null
});
});
return map;
}
getAvailableQuests(completedQuests) {
return Array.from(this.questMap.values()).filter(quest => {
// Check if all prerequisites are completed
const prerequisitesMet = quest.prerequisites.every(prereq =>
completedQuests.includes(prereq.permalink)
);
// Not already completed
const notCompleted = !completedQuests.includes(quest.permalink);
return prerequisitesMet && notCompleted;
});
}
getRecommendedNextQuests(currentQuest, completedQuests) {
const quest = this.questMap.get(currentQuest);
if (!quest) return [];
// Get unlocked quests that are available
return quest.unlocks.filter(unlock => {
const unlockQuest = this.questMap.get(unlock.permalink);
return this.isQuestAvailable(unlockQuest, completedQuests);
});
}
generateQuestPath(startQuest, targetQuest) {
// Implement pathfinding algorithm to find learning path
// between any two quests in the network
}
validateQuestNetwork() {
// Check for circular dependencies, orphaned quests, etc.
const issues = [];
this.questMap.forEach((quest, permalink) => {
// Check for circular dependencies
if (this.hasCircularDependency(permalink)) {
issues.push(`Circular dependency detected for ${permalink}`);
}
// Check for broken references
quest.prerequisites.forEach(prereq => {
if (!this.questMap.has(prereq.permalink)) {
issues.push(`Broken prerequisite reference: ${prereq.permalink} in ${permalink}`);
}
});
});
return issues;
}
}
// Usage example
const questEngine = new QuestEngine(questData);
const availableQuests = questEngine.getAvailableQuests(userCompletedQuests);
const recommendations = questEngine.getRecommendedNextQuests(currentQuest, userCompletedQuests);
const networkIssues = questEngine.validateQuestNetwork();
CSS Styling for Quest Types
/* quest-styles.css - Visual styling for different quest types */
.quest {
border-radius: 8px;
padding: 1.5rem;
margin: 1rem 0;
border-left: 4px solid;
}
.quest.main_quest {
border-left-color: #87ceeb;
background: linear-gradient(135deg, #f0f8ff 0%, #e6f3ff 100%);
}
.quest.side_quest {
border-left-color: #ffd700;
background: linear-gradient(135deg, #fffacd 0%, #fff8dc 100%);
}
.quest.bonus_quest {
border-left-color: #ff69b4;
background: linear-gradient(135deg, #ffe4e1 0%, #ffc0cb 100%);
}
.quest.epic_quest {
border-left-color: #9370db;
background: linear-gradient(135deg, #f8f8ff 0%, #e6e6fa 100%);
box-shadow: 0 4px 8px rgba(147, 112, 219, 0.3);
}
.quest-network {
background: #f9f9f9;
padding: 1rem;
border-radius: 6px;
margin: 1rem 0;
}
.quest-metadata {
display: flex;
gap: 1rem;
align-items: center;
margin: 0.5rem 0;
}
.quest-type {
padding: 0.25rem 0.5rem;
border-radius: 4px;
font-weight: bold;
font-size: 0.9rem;
}
.quest-type.main_quest {
background: #87ceeb;
color: white;
}
.quest-type.side_quest {
background: #ffd700;
color: #333;
}
.quest-type.bonus_quest {
background: #ff69b4;
color: white;
}
.quest-type.epic_quest {
background: #9370db;
color: white;
}
This comprehensive example demonstrates how the enhanced quest hierarchy system creates a sophisticated, interconnected learning ecosystem that guides learners through structured progression while maintaining flexibility for different learning styles and goals. The combination of clear quest types, dependency mapping, and visual network diagrams transforms the IT-Journey platform into a truly gamified educational adventure.