coursecode 0.1.0

package/framework/css/layouts/presentation.css

@@ -0,0 +1,191 @@
+/* ============================================================================
+   PRESENTATION LAYOUT - Full-screen slideshow
+   ============================================================================
+   
+   PURPOSE: Keynote/PowerPoint-style layout with:
+   - No header (completely hidden)
+   - No sidebar
+   - Content fills entire viewport
+   - Edge navigation arrows (left/right)
+   - No scroll (content must fit viewport)
+   
+   BEST FOR: Slideshow presentations, keynote replacements, visual content
+   
+   ============================================================================ */
+
+/* Hide header when sidebar disabled */
+[data-layout="presentation"]:not([data-sidebar-enabled="true"]) .course-header {
+    display: none !important;
+}
+
+/* When sidebar enabled, keep header in DOM but visually hide most of it
+   This allows the fixed-position toggle button to render */
+[data-layout="presentation"][data-sidebar-enabled="true"] .course-header {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 0;
+    height: 0;
+    overflow: visible;
+    background: transparent !important;
+    box-shadow: none !important;
+    border: none !important;
+}
+
+/* Hide all header content except the toggle */
+[data-layout="presentation"][data-sidebar-enabled="true"] .course-header>* {
+    visibility: hidden;
+}
+
+[data-layout="presentation"][data-sidebar-enabled="true"] .course-header #sidebar-toggle {
+    visibility: visible;
+}
+
+/* Sidebar visibility controlled by data attribute */
+/* Hide sidebar when disabled */
+[data-layout="presentation"]:not([data-sidebar-enabled="true"]) .sidebar {
+    display: none !important;
+}
+
+[data-layout="presentation"]:not([data-sidebar-enabled="true"]) #sidebar-backdrop {
+    display: none !important;
+}
+
+[data-layout="presentation"]:not([data-sidebar-enabled="true"]) #sidebar-toggle {
+    display: none !important;
+}
+
+/* FAB toggle button for presentation layout - top-left, transparent like nav arrows */
+[data-layout="presentation"][data-sidebar-enabled="true"] #sidebar-toggle {
+    --header-control-bg: var(--nav-edge-bg);
+    --header-control-bg-hover: var(--nav-edge-bg-hover);
+    --header-control-text: var(--text-primary);
+    --header-border: var(--nav-edge-border);
+    position: fixed;
+    top: calc(var(--space-4) + env(safe-area-inset-top, 0px));
+    left: calc(var(--space-4) + env(safe-area-inset-left, 0px));
+    z-index: var(--z-fixed);
+    width: var(--nav-edge-control-size);
+    height: var(--nav-edge-control-size);
+    border-radius: var(--radius-full);
+    background: var(--header-control-bg);
+    border: 1px solid var(--header-border);
+    box-shadow: var(--nav-edge-shadow);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: var(--nav-btn-edge-opacity);
+    transition: opacity var(--transition-fast), transform var(--transition-interactive), background var(--transition-fast), box-shadow var(--transition-interactive);
+    color: var(--header-control-text);
+}
+
+[data-layout="presentation"][data-sidebar-enabled="true"] #sidebar-toggle:hover {
+    opacity: 1;
+    transform: scale(var(--nav-edge-hover-scale));
+    background: var(--header-control-bg-hover);
+    box-shadow: var(--nav-edge-shadow-hover);
+}
+
+[data-layout="presentation"][data-sidebar-enabled="true"] #sidebar-toggle:active {
+    transform: scale(var(--nav-edge-active-scale));
+}
+
+[data-layout="presentation"][data-sidebar-enabled="true"] #sidebar-toggle[aria-expanded="true"] {
+    opacity: 1;
+}
+
+[data-layout="presentation"][data-sidebar-enabled="true"] #sidebar-toggle:focus-visible {
+    outline: 2px solid var(--focus-ring-color);
+    outline-offset: 2px;
+}
+
+/* App body fills full height */
+[data-layout="presentation"] .app-body {
+    height: 100vh;
+}
+
+/* Content fills viewport, no scroll */
+[data-layout="presentation"] main#content {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    padding: 0 var(--space-24);
+    height: 100%;
+    box-sizing: border-box;
+}
+
+[data-layout="presentation"] main#content>section {
+    border: none;
+    box-shadow: none;
+    background: transparent;
+    max-width: 100%;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--space-8);
+}
+
+/* Slide container fills space */
+[data-layout="presentation"] #slide-container {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+
+/* Footer and nav-controls styling moved to components/footer.css - DATA-LAYOUT VARIANTS section */
+
+/* Button styling moved to components/buttons.css - DATA-LAYOUT VARIANTS section */
+/* Engagement styling moved to components/engagement.css - DATA-LAYOUT VARIANTS section */
+
+/* Audio player styling moved to components/audio-player.css - DATA-LAYOUT VARIANTS section */
+
+/* Hide exit button */
+[data-layout="presentation"] .nav-exit-button {
+    display: none !important;
+}
+
+/* Breadcrumbs visibility now controlled by navigation.breadcrumbs.enabled config */
+[data-layout="presentation"] .breadcrumb-nav,
+[data-layout="presentation"] .breadcrumbs {
+    display: none !important;
+}
+
+/* Small viewport fallback — allow scrolling when content can't fit */
+@media (max-height: 500px), (max-width: 768px) {
+    [data-layout="presentation"] main#content {
+        overflow-y: auto;
+        align-items: flex-start;
+    }
+
+    [data-layout="presentation"] main#content>section {
+        align-items: flex-start;
+        height: auto;
+        min-height: 100%;
+    }
+
+    [data-layout="presentation"] #slide-container {
+        align-items: flex-start;
+        height: auto;
+        min-height: 100%;
+    }
+}
+
+/* Reduce motion */
+@media (prefers-reduced-motion: reduce) {
+
+    [data-layout="presentation"] #prevBtn,
+    [data-layout="presentation"] #nextBtn {
+        transition: none;
+    }
+
+    [data-layout="presentation"] #prevBtn:hover:not(:disabled),
+    [data-layout="presentation"] #nextBtn:hover:not(:disabled) {
+        transform: none;
+    }
+}

package/framework/css/layouts/traditional.css

@@ -0,0 +1,52 @@
+/* ============================================================================
+   TRADITIONAL LAYOUT - Classic LMS layout (default)
+   ============================================================================
+   
+   PURPOSE: The classic course player layout with:
+   - Full header with sidebar toggle and branding
+   - Slide-out navigation sidebar (overlay mode)
+   - Fixed footer with prev/next/exit buttons
+   
+   This is the default layout - uses existing styles from 02-layout.css,
+   sidebar.css, and footer.css without modification.
+   
+   ============================================================================ */
+
+/* Traditional layout uses default structure - explicit selector for clarity */
+[data-layout="traditional"] {
+    --layout-mode: traditional;
+    --header-bg: var(--color-primary);
+}
+
+/* Ensure all elements are visible in traditional layout */
+[data-layout="traditional"] .course-header {
+    display: flex;
+}
+
+[data-layout="traditional"] .sidebar-toggle {
+    display: flex;
+}
+
+[data-layout="traditional"] .sidebar {
+    display: flex;
+}
+
+[data-layout="traditional"] .app-footer {
+    display: flex;
+}
+
+/* Traditional: keep accessibility gear as ghost control in header */
+[data-layout="traditional"] #sidebar-toggle,
+[data-layout="traditional"] #accessibility-button {
+    background: transparent;
+}
+
+/* ============================================================================
+   MOBILE RESPONSIVE
+   ============================================================================
+   Mobile footer styling moved to components/footer.css - DATA-LAYOUT VARIANTS section.
+   Audio player tablet/mobile styling below.
+   ============================================================================ */
+
+
+/* Tablet audio player styling moved to components/audio-player.css - DATA-LAYOUT VARIANTS section */

package/framework/css/responsive.css

@@ -0,0 +1,439 @@
+/* ============================================================================
+   RESPONSIVE DESIGN - Breakpoint-driven adaptive layouts
+   ============================================================================
+   
+   PURPOSE: Responsive styles for all screen sizes driven by breakpoint classes
+   
+   INCLUDES:
+   - Large Desktop (1440px+) - bp-min-large-desktop
+   - Desktop (1200px-1439px) - bp-max-desktop
+   - Tablet Landscape (1024px-1199px) - bp-max-tablet-landscape
+   - Tablet Portrait (768px-1023px) - bp-max-tablet-portrait
+   - Mobile Landscape (480px-767px) - bp-max-mobile-landscape
+   - Mobile Portrait (320px-479px) - bp-max-mobile-portrait
+   
+   DEPENDENCIES:
+   - Requires: design-tokens.css (for breakpoint values and spacing tokens)
+   - Requires: js/utilities/breakpoint-manager.js (adds .bp-* classes to <html>)
+   
+   HOW IT WORKS:
+   The BreakpointManager (initialized in main.js) listens for window resize events
+   and dynamically applies breakpoint classes to <html>. Multiple classes cascade
+   (e.g., at 600px: .bp-max-desktop, .bp-max-tablet-landscape, .bp-max-tablet-portrait, 
+   .bp-max-mobile-landscape are all applied).
+   
+   LMS COMPATIBILITY:
+   Works reliably in iframe contexts (Litmos, Cornerstone, etc.) since it uses
+   standard DOM APIs (window.innerWidth, resize event).
+   
+   USED BY: All components - responsive behavior throughout the course
+   
+   AI DEBUGGING TIPS:
+   - Styles not applying? Check if correct .bp-max-* or .bp-min-* class is on <html>
+   - Classes missing? Verify breakpointManager.init() is called in main.js
+   - Layout breaking? Verify breakpoint order (min-width before max-width)
+   - Spacing too tight? Check if --content-padding override is applied
+   - Footer stacking incorrectly? Verify flexbox direction change
+   - Grid not collapsing? Check grid-template-columns overrides
+   
+   JS API (via SCORM_Framework.breakpointManager):
+   - getCurrentBreakpoint() - Returns current breakpoint name
+   - isMobile() / isTablet() / isDesktop() - Quick device checks
+   - isAtMost('tablet-portrait') - Check if at or below breakpoint
+   - onChange(callback) - Listen for breakpoint changes
+   
+   STRUCTURE:
+   1. Large Desktop (55-70)
+   2. Desktop (75-90)
+   3. Tablet Landscape (95-115)
+   4. Tablet Portrait (120-200)
+   5. Mobile Landscape (205-280)
+   6. Mobile Portrait (285-340)
+   
+   COMMON SELECTORS:
+   html.bp-min-large-desktop   - Large screens (1440px+)
+   html.bp-max-desktop          - Desktop and below
+   html.bp-max-tablet-landscape - Tablets and below (landscape)
+   html.bp-max-tablet-portrait  - Tablets and below (portrait)
+   html.bp-max-mobile-landscape - Mobile devices (landscape)
+   html.bp-max-mobile-portrait  - Mobile devices (portrait)
+   
+   LAST UPDATED: 2024-12-10
+   ============================================================================ */
+
+/* ============================================================================
+   LARGE DESKTOP (>= 1440px)
+   ============================================================================ */
+
+html.bp-min-large-desktop {
+  --content-padding: var(--space-10);
+  --section-padding: var(--space-8);
+  --header-padding-x: var(--space-8);
+  --header-padding-y: var(--space-2);
+  --header-height: 24px;
+  --footer-padding-x: var(--space-12);
+  --footer-padding-y: var(--space-3);
+}
+
+html.bp-min-large-desktop #app {
+  max-width: 1440px;
+  height: 100%;
+  margin: 0 auto;
+}
+
+/* ============================================================================
+   DESKTOP (<= 1439px)
+   ============================================================================ */
+
+html.bp-max-desktop {
+  --content-padding: var(--space-10);
+  --section-padding: var(--space-8);
+  --header-padding-x: var(--space-6);
+  --header-padding-y: var(--space-2);
+  --header-height: 24px;
+  --footer-padding-x: var(--space-10);
+  --footer-padding-y: var(--space-5);
+}
+
+html.bp-max-desktop #app {
+  margin: 0;
+  max-width: none;
+  height: 100%;
+}
+
+/* ============================================================================
+   TABLET LANDSCAPE (<= 1199px)
+   ============================================================================ */
+
+html.bp-max-tablet-landscape {
+  --content-padding: var(--space-8);
+  --section-padding: var(--space-6);
+  --header-padding-x: var(--space-5);
+  --header-padding-y: var(--space-2);
+  --header-height: 24px;
+  --footer-padding-x: var(--space-8);
+  --footer-padding-y: var(--space-4);
+  --nav-padding-x: var(--space-6);
+  --nav-padding-y: var(--space-2);
+}
+
+/* ============================================================================
+   TABLET PORTRAIT (<= 1023px)
+   ============================================================================ */
+
+html.bp-max-tablet-portrait {
+  --font-size-4xl: var(--font-size-3xl);
+  --font-size-3xl: var(--font-size-2xl);
+  --content-padding: var(--space-6);
+  --section-padding: var(--space-6);
+  --header-padding-x: var(--space-3);
+  --header-padding-y: var(--space-2);
+  --header-height: 24px;
+  --footer-padding-x: var(--space-6);
+  --footer-padding-y: var(--space-6);
+  --nav-padding-x: var(--space-4);
+  --nav-padding-y: var(--space-2);
+}
+
+html.bp-max-tablet-portrait #app {
+  margin: 0;
+  border-radius: 0;
+  height: 100%;
+}
+
+/* Header at tablet portrait: tighter spacing but keep row layout */
+html.bp-max-tablet-portrait header {
+  gap: var(--space-2);
+}
+
+html.bp-max-tablet-portrait #app>header h1 {
+  font-size: var(--font-size-lg);
+}
+
+html.bp-max-tablet-portrait #accessibility-menu {
+  right: var(--space-4);
+}
+
+/* Footer at tablet portrait: tighter gaps but keep row layout */
+html.bp-max-tablet-portrait .nav-controls {
+  gap: var(--space-2);
+}
+
+html.bp-max-tablet-portrait .stats-grid,
+html.bp-max-tablet-portrait .features-grid {
+  grid-template-columns: 1fr;
+  gap: var(--space-4);
+}
+
+html.bp-max-tablet-portrait .concept-cards {
+  grid-template-columns: 1fr;
+}
+
+html.bp-max-tablet-portrait .content-tabs,
+html.bp-max-tablet-portrait .assessment-tabs,
+html.bp-max-tablet-portrait .tab-list {
+  flex-direction: column;
+  gap: var(--space-3);
+}
+
+html.bp-max-tablet-portrait .tab-button,
+html.bp-max-tablet-portrait .assessment-tab {
+  width: 100%;
+  justify-content: center;
+}
+
+html.bp-max-tablet-portrait .final-actions {
+  flex-direction: column;
+  gap: var(--space-4);
+}
+
+html.bp-max-tablet-portrait .final-actions button {
+  width: 100%;
+  max-width: 320px;
+}
+
+/* ============================================================================
+   MOBILE LANDSCAPE (<= 767px)
+   ============================================================================ */
+
+html.bp-max-mobile-landscape {
+  --font-size-2xl: var(--font-size-xl);
+  --font-size-xl: var(--font-size-lg);
+  --content-padding: var(--space-5);
+  --section-padding: var(--space-5);
+  --header-padding-x: var(--space-3);
+  --header-padding-y: var(--space-4);
+  --header-height: 56px;
+  --footer-padding-x: var(--space-5);
+  --footer-padding-y: var(--space-5);
+  --nav-padding-x: var(--space-3);
+  --nav-padding-y: var(--space-2);
+}
+
+html.bp-max-mobile-landscape #app {
+  margin: 0;
+  border-radius: 0;
+  height: 100%;
+}
+
+/* Mobile header: compact single-row layout */
+html.bp-max-mobile-landscape header {
+  flex-wrap: nowrap;
+  justify-content: flex-start;
+  gap: var(--space-2);
+}
+
+html.bp-max-mobile-landscape #brand {
+  flex: 1 1 auto;
+  justify-content: flex-start;
+  min-width: 0;
+}
+
+html.bp-max-mobile-landscape #brand img.logo {
+  height: 36px;
+  padding: var(--space-1);
+  padding-left: 0;
+}
+
+html.bp-max-mobile-landscape #brand .brand-title {
+  font-size: var(--font-size-base);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+html.bp-max-mobile-landscape #app>header h1 {
+  font-size: var(--font-size-base);
+}
+
+/* Hide header progress on mobile to save space */
+html.bp-max-mobile-landscape .header-progress {
+  display: none !important;
+}
+
+/* Hide breadcrumbs on mobile */
+html.bp-max-mobile-landscape .breadcrumbs {
+  display: none !important;
+}
+
+/* Tabs: stack vertically on mobile */
+html.bp-max-mobile-landscape .content-tabs,
+html.bp-max-mobile-landscape .assessment-tabs,
+html.bp-max-mobile-landscape .tab-list {
+  flex-direction: column;
+  gap: 0;
+}
+
+html.bp-max-mobile-landscape .tab-button,
+html.bp-max-mobile-landscape .assessment-tab {
+  width: 100%;
+  justify-content: center;
+  padding: var(--space-2) var(--space-4);
+  font-size: var(--font-size-sm);
+}
+
+html.bp-max-mobile-landscape .feature-card,
+html.bp-max-mobile-landscape .concept-card,
+html.bp-max-mobile-landscape .stat-card {
+  padding: var(--space-5);
+}
+
+html.bp-max-mobile-landscape .interaction {
+  padding: var(--space-6);
+}
+
+html.bp-max-mobile-landscape .assessment-navigation {
+  flex-direction: column;
+  gap: var(--space-3);
+}
+
+html.bp-max-mobile-landscape .btn-nav {
+  width: 100%;
+  min-width: auto;
+}
+
+html.bp-max-mobile-landscape .assessment-nav-center {
+  order: -1;
+  margin-bottom: var(--space-2);
+}
+
+html.bp-max-mobile-landscape .nav-controls {
+  flex-direction: row;
+  flex-wrap: nowrap;
+  gap: var(--space-2);
+}
+
+/* Mobile footer: Previous/Next fill the row, Exit hidden (moved to sidebar) */
+html.bp-max-mobile-landscape .nav-nav-buttons {
+  display: flex;
+  gap: var(--space-2);
+  flex: 1;
+  width: auto;
+}
+
+html.bp-max-mobile-landscape .nav-nav-buttons button {
+  flex: 1;
+  width: auto;
+  padding: var(--space-2) var(--space-3);
+}
+
+html.bp-max-mobile-landscape .nav-exit-button {
+  display: none;
+}
+
+
+
+html.bp-max-mobile-landscape .app-footer button {
+  width: auto;
+}
+
+/* Mobile footer: stacked layout with audio on top */
+html.bp-max-mobile-landscape .app-footer {
+  flex-direction: column;
+  gap: var(--space-2);
+}
+
+html.bp-max-mobile-landscape .nav-controls {
+  width: 100%;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+
+/* Audio player: full width, above nav buttons, compact variant */
+html.bp-max-mobile-landscape #audio-player {
+  width: 100%;
+  order: -1;
+  margin-left: 0;
+}
+
+html.bp-max-mobile-landscape .audio-player-controls {
+  width: 100%;
+  justify-content: center;
+  /* Apply compact variant styles on mobile */
+  gap: var(--space-1);
+  background: var(--bg-surface);
+  border: var(--border-width-md) solid var(--border-default);
+}
+
+/* Hide progress bar and time on mobile (compact variant) */
+html.bp-max-mobile-landscape .audio-progress-container,
+html.bp-max-mobile-landscape .audio-time {
+  display: none;
+}
+
+/* Nav buttons: row layout filling width */
+html.bp-max-mobile-landscape .nav-nav-buttons {
+  width: 100%;
+  justify-content: center;
+}
+
+html.bp-max-mobile-landscape .review-actions {
+  flex-direction: column;
+}
+
+html.bp-max-mobile-landscape .review-actions button {
+  width: 100%;
+}
+
+/* ============================================================================
+   MOBILE PORTRAIT (<= 479px)
+   ============================================================================ */
+
+html.bp-max-mobile-portrait {
+  --space-8: var(--space-6);
+  --space-10: var(--space-8);
+  --space-12: var(--space-8);
+  --content-padding: var(--space-4);
+  --section-padding: var(--space-4);
+  --header-padding-x: var(--space-3);
+  --header-padding-y: var(--space-3);
+  --header-height: 52px;
+  --footer-padding-x: var(--space-4);
+  --footer-padding-y: var(--space-4);
+  --nav-padding-x: var(--space-3);
+  --nav-padding-y: var(--space-2);
+}
+
+html.bp-max-mobile-portrait #app {
+  margin: 0;
+  border-radius: 0;
+  height: 100%;
+}
+
+/* Mobile portrait: even tighter header */
+html.bp-max-mobile-portrait #brand img.logo {
+  height: 32px;
+  padding-left: 0;
+}
+
+html.bp-max-mobile-portrait #brand .brand-title {
+  font-size: var(--font-size-sm);
+}
+
+html.bp-max-mobile-portrait #app>header h1 {
+  font-size: var(--font-size-sm);
+}
+
+html.bp-max-mobile-portrait main#content>section {
+  margin-bottom: var(--space-6);
+}
+
+html.bp-max-mobile-portrait .feature-card,
+html.bp-max-mobile-portrait .concept-card,
+html.bp-max-mobile-portrait .stat-card {
+  padding: var(--space-4);
+}
+
+html.bp-max-mobile-portrait .interaction {
+  padding: var(--space-5);
+}
+
+html.bp-max-mobile-portrait .app-footer button {
+  padding: var(--space-3) var(--space-4);
+  font-size: var(--font-size-sm);
+}
+
+/* Keep traditional footer compact across breakpoints */
+html[data-layout="traditional"] {
+  --footer-padding-y: var(--space-3);
+}