coursecode 0.1.0

package/framework/css/interactions/fill-in-the-blank.css

@@ -0,0 +1,236 @@
+/* ============================================================================
+   FILL-IN-THE-BLANK - Inline text input interaction styles
+   ============================================================================
+   
+   PURPOSE: Styles for fill-in-the-blank text input questions with inline inputs
+   
+   INCLUDES:
+   - Inline input styling within flowing text
+   - Correct/incorrect states
+   - Focus states
+   - Responsive sizing
+   
+   DEPENDENCIES:
+   - Requires: design-tokens.css (for CSS variables)
+   - Requires: base.css (for .interaction container)
+   
+   USED BY:
+   - Fill-in-the-blank questions with inline inputs
+   - Cloze-style exercises
+   - Sentence completion activities
+   
+   AI DEBUGGING TIPS:
+   - Input not inline? Check .fill-in-inline class on container
+   - Inputs too narrow? Adjust min-width in JS or CSS
+   - Focus state not showing? Verify :focus pseudo-class is applied
+   - Correct/incorrect colors not showing? Check .correct/.incorrect classes
+   
+   COMMON CLASSES:
+   .fill-in-inline       - Container for inline fill-in (flowing text)
+   .fill-in-template     - The template text wrapper
+   .fill-in-inline-input - Individual inline input element
+   
+   LAST UPDATED: 2024-02-04
+   ============================================================================ */
+
+/* Inline mode container */
+.fill-in-inline {
+  line-height: 2.2;
+}
+
+.fill-in-template {
+  font-size: var(--font-size-lg);
+  color: var(--text-body);
+}
+
+/* Inline input styling */
+.fill-in-inline-input {
+  display: inline-block;
+  width: auto;
+  min-width: 80px;
+  max-width: 250px;
+  padding: var(--space-1) var(--space-2);
+  margin: 0 var(--space-1);
+  border: var(--border-width-md) solid var(--color-secondary-alpha-30);
+  border-radius: var(--radius-md);
+  font-size: var(--font-size-base);
+  font-family: inherit;
+  vertical-align: baseline;
+  background: var(--bg-surface);
+  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
+}
+
+.fill-in-inline-input::placeholder {
+  color: var(--text-muted);
+  font-style: italic;
+}
+
+.fill-in-inline-input:focus {
+  outline: none;
+  border-color: var(--color-secondary);
+  box-shadow: 0 0 0 3px var(--color-secondary-alpha-10);
+}
+
+.fill-in-inline-input.correct {
+  border-color: var(--color-success);
+  background: var(--color-success-light);
+}
+
+.fill-in-inline-input.incorrect {
+  border-color: var(--color-danger);
+  background: var(--color-danger-light);
+}
+
+/* Hide empty feedback containers */
+.fill-in-inline .overall-feedback:empty {
+  display: none;
+}
+
+.fill-in-inline .feedback {
+  padding: var(--space-2) var(--space-3);
+  border-radius: var(--radius-md);
+  font-size: var(--font-size-sm);
+}
+
+.fill-in-inline .feedback.correct {
+  background: var(--color-success-light);
+  color: var(--color-success-text);
+}
+
+.fill-in-inline .feedback.incorrect {
+  background: var(--color-danger-light);
+  color: var(--color-danger-text);
+}
+
+.fill-in-inline .hint {
+  padding: var(--space-2) var(--space-3);
+  background: var(--color-info-light);
+  color: var(--color-info-text);
+  border-radius: var(--radius-md);
+  font-size: var(--font-size-sm);
+}
+
+/* Responsive adjustments */
+@media (max-width: 640px) {
+  .fill-in-template {
+    font-size: var(--font-size-base);
+    line-height: 2.4;
+  }
+
+  .fill-in-inline-input {
+    min-width: 60px;
+    max-width: 150px;
+    font-size: var(--font-size-sm);
+  }
+}
+
+/* ============================================================================
+   STACKED MODE - Question prompt followed by labeled input fields
+   ============================================================================ */
+
+.fill-in-stacked .fill-in-container {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+}
+
+.fill-in-stacked .fill-in-item {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+
+.fill-in-stacked .fill-in-item label {
+  font-weight: var(--font-weight-medium);
+  color: var(--text-body);
+}
+
+.fill-in-stacked-input {
+  width: 100%;
+  max-width: 400px;
+  padding: var(--space-2) var(--space-3);
+  border: var(--border-width-md) solid var(--color-secondary-alpha-30);
+  border-radius: var(--radius-md);
+  font-size: var(--font-size-base);
+  font-family: inherit;
+  background: var(--bg-surface);
+  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
+}
+
+.fill-in-stacked-input::placeholder {
+  color: var(--text-muted);
+  font-style: italic;
+}
+
+.fill-in-stacked-input:focus {
+  outline: none;
+  border-color: var(--color-secondary);
+  box-shadow: 0 0 0 3px var(--color-secondary-alpha-10);
+}
+
+.fill-in-stacked-input.correct {
+  border-color: var(--color-success);
+  background: var(--color-success-light);
+}
+
+.fill-in-stacked-input.incorrect {
+  border-color: var(--color-danger);
+  background: var(--color-danger-light);
+}
+
+/* Stacked mode feedback */
+.fill-in-stacked .feedback {
+  font-size: var(--font-size-sm);
+  padding: var(--space-1) 0;
+}
+
+.fill-in-stacked .feedback.correct {
+  color: var(--color-success-text);
+}
+
+.fill-in-stacked .feedback.incorrect {
+  color: var(--color-danger-text);
+}
+
+.fill-in-stacked .overall-feedback:empty {
+  display: none;
+}
+
+.fill-in-stacked .hint {
+  padding: var(--space-2) var(--space-3);
+  background: var(--color-info-light);
+  color: var(--color-info-text);
+  border-radius: var(--radius-md);
+  font-size: var(--font-size-sm);
+}
+
+/* ============================================================================
+   NUMERIC INPUT - Specific styles for number inputs with units
+   ============================================================================ */
+
+.numeric-input-wrapper {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+
+.numeric-input-wrapper .fill-in-stacked-input {
+  max-width: 200px;
+}
+
+.numeric-input-wrapper .units {
+  color: var(--text-muted);
+  font-size: var(--font-size-base);
+}
+
+/* Remove number input spinner for cleaner look */
+.fill-in-stacked-input[type="number"]::-webkit-inner-spin-button,
+.fill-in-stacked-input[type="number"]::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+.fill-in-stacked-input[type="number"] {
+  -moz-appearance: textfield;
+  appearance: textfield;
+}

package/framework/css/interactions/hotspots.css

@@ -0,0 +1,69 @@
+/* ============================================================================
+   HOTSPOTS - Image hotspot interaction styles
+   ============================================================================
+   
+   PURPOSE: Styles for hotspot/click-region interactions on images
+   
+   INCLUDES:
+   - Hotspot container positioning
+   - Hotspot area styling
+   - Hover and focus states
+   - Selected state styling
+   
+   DEPENDENCIES:
+   - Requires: design-tokens.css (for CSS variables)
+   - Requires: base.css (for .interaction container)
+   
+   USED BY:
+   - Image-based hotspot activities
+   - Anatomy diagrams with clickable regions
+   - Interactive image mapping
+   
+   AI DEBUGGING TIPS:
+   - Hotspots not appearing? Verify .hotspot-container has position: relative
+   - Hotspot areas not clickable? Check if positioned with top/left/right/bottom
+   - Hotspot circles too small? Increase min-width/min-height from btn-min-height
+   - Selection state not showing? Ensure .selected class applied to .hotspot-area
+   - Positioning off on mobile? Hotspots use absolute positioning - test responsive behavior
+   
+   COMMON CLASSES:
+   .hotspot-container   - Container for the image and hotspot areas
+   .hotspot-area        - Individual clickable hotspot region
+   .selected            - Hotspot has been selected/clicked
+   
+   LAST UPDATED: 2024-11-18
+   ============================================================================ */
+
+.hotspot-container {
+  position: relative;
+  display: inline-block;
+  margin: var(--space-3) 0;
+}
+
+.hotspot-area {
+  position: absolute;
+  background: var(--color-danger-alpha-30, rgba(243, 91, 4, 0.3));
+  border: var(--border-width-md) solid var(--color-danger);
+  border-radius: 50%;
+  cursor: pointer;
+  transition: background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast), opacity var(--transition-fast);
+  min-width: var(--btn-min-height);
+  min-height: var(--btn-min-height);
+}
+
+.hotspot-area:hover {
+  background: var(--color-danger-alpha-50, rgba(243, 91, 4, 0.5));
+  transform: scale(1.1);
+  box-shadow: var(--shadow-md);
+}
+
+.hotspot-area:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 2px;
+}
+
+.hotspot-area.selected {
+  border-width: var(--border-width-thick);
+  background: var(--color-success-alpha-30);
+  border-color: var(--color-success);
+}

package/framework/css/interactions/index.css

@@ -0,0 +1,45 @@
+/* ============================================================================
+   INTERACTIONS - Index/Orchestrator
+   ============================================================================
+   
+   PURPOSE: Central import file for all interaction CSS modules
+   
+   STRUCTURE:
+   1. Base interaction container (base.css)
+   2. Question types (fill-in-the-blank, drag-drop, hotspots, numeric-input, matching, true-false)
+   3. Accessibility enhancements (accessibility.css)
+   
+   NOTE: Button layout now uses utility classes (.flex, .justify-center, .gap-3)
+         All button styling delegated to components/buttons.css
+   
+   DEPENDENCIES:
+   - Requires: design-tokens.css (for CSS variables)
+   - Requires: components/buttons.css (for button base styles)
+   - Requires: utilities/flexbox.css (for layout)
+   
+   USED BY:
+   - All interactive slides
+   - Practice activities
+   - Knowledge checks
+   - Skill assessments
+   - Quiz questions
+   
+   LAST UPDATED: 2024-11-18
+   ============================================================================ */
+
+/* Base styles */
+@import './base.css';
+
+/* Question types (alphabetical) */
+@import './drag-drop.css';
+@import './fill-in-the-blank.css';
+@import './hotspots.css';
+@import './likert.css';
+@import './matching.css';
+@import './numeric-input.css';
+@import './sequencing.css';
+@import './true-false.css';
+@import './interactive-image.css';
+
+/* Accessibility (last) */
+@import './accessibility.css';