coursecode 0.1.0

package/framework/css/interactions/sequencing.css

@@ -0,0 +1,378 @@
+/* ============================================================================
+   SEQUENCING - Sequencing interaction styles
+   ============================================================================
+   
+   PURPOSE: Styles for sequencing/ordering learning activities
+   
+   INCLUDES:
+   - Sequence track with configurable labels (e.g., "First" → "Last")
+   - Clean, spaced drag items
+   - Subtle drag handle styling
+   - Smooth drag-over states with insertion indicators
+   - Keyboard focus and selection states
+   - Correct/incorrect feedback states
+   
+   DEPENDENCIES:
+   - Requires: design-tokens.css (for CSS variables)
+   - Requires: base.css (for .interaction container)
+   
+   USED BY:
+   - Process ordering activities
+   - Step-by-step procedure checks
+   - Timeline arrangement
+   
+   CONFIGURATION:
+   - sequenceLabels: Array of 2+ strings (e.g., ["First", "Last"] or ["Earlier", "Middle", "Later"])
+   
+   AI DEBUGGING TIPS:
+   - Items not reordering? Check dragstart/dragover/drop event listeners
+   - Drag handle missing? Verify .drag-handle span exists
+   - Drop indicators not showing? Check .drag-over-top and .drag-over-bottom classes
+   - Keyboard reordering failing? Ensure tabindex="0" on items and keydown listener
+   - Sequence track not showing? Ensure sequenceLabels config has 2+ items
+   
+   COMMON CLASSES:
+   .sequence-track        - Visual track showing sequence direction
+   .sequence-track-line   - The arrow/line indicating direction
+   .sequence-track-labels - Container for start/end labels
+   .sequence-label        - Individual label (First, Last, etc.)
+   .sequencing-list       - Main container for sortable items
+   .sequence-item         - Individual sortable item
+   .drag-handle           - Visual handle for dragging
+   .item-text             - Text content of item
+   .dragging              - Item currently being dragged
+   .drag-over-top         - Drop indicator above item
+   .drag-over-bottom      - Drop indicator below item
+   .keyboard-selected     - Item selected via keyboard
+   
+   LAST UPDATED: 2024-12-11
+   ============================================================================ */
+
+/* ============================================================================
+   SEQUENCE TRACK - Visual indicator of sequence direction
+   ============================================================================ */
+
+.sequencing-layout {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: var(--space-5);
+  align-items: stretch;
+  margin: var(--space-4) 0;
+  max-width: 90%;
+  padding: var(--space-5);
+}
+
+.sequence-track {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  width: 100%;
+  height: 100%;
+  min-height: 100%;
+  gap: var(--space-2);
+  padding-right: var(--space-5);
+}
+
+.sequence-track-line {
+  position: relative;
+  width: 4px;
+  flex: 1;
+  min-height: 80px;
+  background: linear-gradient(180deg, var(--color-primary), var(--color-secondary));
+  border-radius: var(--radius-full);
+}
+
+/* Arrow pointing down (direction indicator) */
+.sequence-track-line::after {
+  content: '';
+  position: absolute;
+  left: 50%;
+  bottom: -6px;
+  transform: translateX(-50%);
+  width: 0;
+  height: 0;
+  border-top: 10px solid var(--color-secondary);
+  border-left: 6px solid transparent;
+  border-right: 6px solid transparent;
+}
+
+.sequence-label {
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-gray-600);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  text-align: center;
+  flex-shrink: 0;
+}
+
+.sequence-label-start {
+  color: var(--color-primary);
+}
+
+.sequence-label-end {
+  color: var(--color-secondary);
+  padding-top: var(--space-2);
+}
+
+/* ============================================================================
+   CONTAINER
+   ============================================================================ */
+
+.sequencing-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-6);
+  margin: 0;
+  padding: 0;
+  background: transparent;
+  border: none;
+}
+
+/* ============================================================================
+   SEQUENCE ITEMS
+   ============================================================================ */
+
+.sequence-item {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  padding: var(--space-3) var(--space-4);
+  background: var(--color-secondary);
+  color: var(--color-gray-900);
+  border: var(--border-width-md) solid transparent;
+  border-radius: var(--radius-2xl);
+  cursor: grab;
+  transition: 
+    transform 0.2s ease-out,
+    box-shadow 0.15s ease-out,
+    opacity 0.15s ease-out;
+  position: relative;
+  user-select: none;
+  box-shadow: var(--shadow-sm);
+  min-height: var(--size-touch-target);
+}
+
+.sequence-item:hover {
+  box-shadow: var(--shadow-md);
+  transform: translateY(-1px);
+}
+
+.sequence-item:active {
+  cursor: grabbing;
+  transform: translateY(0);
+  box-shadow: var(--shadow-sm);
+}
+
+.sequence-item:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 2px;
+  z-index: 2;
+}
+
+/* ============================================================================
+   DRAG HANDLE (not used visually for sequencing)
+   ============================================================================ */
+
+.drag-handle {
+  display: none;
+}
+
+/* ============================================================================
+   ITEM TEXT
+   ============================================================================ */
+
+.item-text {
+  flex: 1;
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-normal);
+  color: inherit;
+  line-height: 1.5;
+  min-height: var(--size-touch-target);
+  display: flex;
+  align-items: center;
+}
+
+/* ============================================================================
+   DRAG STATES
+   ============================================================================ */
+
+.sequence-item.dragging {
+  opacity: 0.5;
+  cursor: grabbing;
+  box-shadow: var(--shadow-lg);
+  z-index: 100;
+  transform: scale(1.02);
+  transition: opacity 0.15s ease-out, box-shadow 0.15s ease-out;
+}
+
+/* Animate items settling into new position */
+.sequence-item.settling {
+  animation: settle 0.25s ease-out;
+}
+
+@keyframes settle {
+  0% {
+    transform: scale(0.95);
+    opacity: 0.7;
+  }
+  50% {
+    transform: scale(1.02);
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+/* Drop indicator - a clear insertion marker between items (doesn't affect layout) */
+.sequence-item.drag-over-top::before,
+.sequence-item.drag-over-bottom::after {
+  content: '';
+  position: absolute;
+  left: var(--space-4);
+  right: var(--space-4);
+  height: 4px;
+  background: var(--color-primary);
+  border-radius: var(--radius-full);
+  box-shadow: 0 0 0 3px var(--color-primary-alpha-20);
+}
+
+.sequence-item.drag-over-top::before {
+  top: calc(-1 * var(--space-6) / 2 - 2px);
+}
+
+.sequence-item.drag-over-bottom::after {
+  bottom: calc(-1 * var(--space-6) / 2 - 2px);
+}
+
+/* ============================================================================
+   KEYBOARD SELECTION
+   ============================================================================ */
+
+.sequence-item.keyboard-selected {
+  outline: 2px solid var(--color-info);
+  outline-offset: 2px;
+  z-index: 2;
+}
+
+/* ============================================================================
+   FEEDBACK STATES
+   ============================================================================ */
+
+/* Correct sequence feedback */
+.correct-sequence .sequence-item,
+.sequence-item.correct {
+  border-color: var(--color-success);
+  background: var(--color-success-alpha-05);
+}
+
+.correct-sequence .sequence-item .drag-handle,
+.sequence-item.correct .drag-handle {
+  color: var(--color-success);
+  background: var(--color-success-alpha-10);
+  border-color: var(--color-success-alpha-20);
+}
+
+/* Incorrect sequence feedback */
+.incorrect-sequence .sequence-item,
+.sequence-item.incorrect {
+  border-color: var(--color-danger);
+  background: var(--color-danger-alpha-05);
+}
+
+.incorrect-sequence .sequence-item .drag-handle,
+.sequence-item.incorrect .drag-handle {
+  color: var(--color-danger);
+  background: var(--color-danger-alpha-10);
+  border-color: var(--color-danger-alpha-20);
+}
+
+/* Response display (non-interactive feedback view) */
+.response-sequence .sequence-item {
+  cursor: default;
+  pointer-events: none;
+}
+
+.response-sequence .sequence-item:hover {
+  background: var(--bg-surface);
+  transform: none;
+  box-shadow: var(--shadow-sm);
+}
+
+.response-sequence .drag-handle {
+  display: none;
+}
+
+/* ============================================================================
+   DISABLED STATE
+   ============================================================================ */
+
+.sequencing-list.disabled .sequence-item,
+.sequence-item.disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+  pointer-events: none;
+}
+
+.sequencing-list.disabled .sequence-item:hover,
+.sequence-item.disabled:hover {
+  background: var(--bg-surface);
+  transform: none;
+  box-shadow: var(--shadow-sm);
+}
+
+/* ============================================================================
+   RESPONSIVE
+   ============================================================================ */
+
+@media (max-width: 767px) {
+  .sequencing-layout {
+    grid-template-columns: 1fr;
+    gap: var(--space-3);
+  }
+
+  .sequence-track {
+    flex-direction: row;
+    height: auto;
+    gap: var(--space-3);
+  }
+
+  .sequence-track-line {
+    width: 100%;
+    height: 3px;
+    min-height: 0;
+    flex: 1;
+    background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
+  }
+
+  .sequence-track-line::after {
+    left: auto;
+    right: -6px;
+    bottom: auto;
+    top: 50%;
+    transform: translateY(-50%);
+    border-top: 6px solid transparent;
+    border-bottom: 6px solid transparent;
+    border-left: 10px solid var(--color-secondary);
+    border-right: 0;
+  }
+
+  .sequence-label {
+    font-size: var(--font-size-xs);
+  }
+
+  .sequence-label-end {
+    padding-top: 0;
+  }
+
+  .sequencing-list {
+    gap: var(--space-5);
+  }
+
+  .item-text {
+    font-size: var(--font-size-sm);
+    min-height: var(--size-touch-target);
+  }
+}

package/framework/css/interactions/true-false.css

@@ -0,0 +1,177 @@
+/* ============================================================================
+   TRUE/FALSE INTERACTION - Two-choice boolean question styles
+   ============================================================================
+   
+   PURPOSE: Styles for true/false questions
+   
+   INCLUDES:
+   - Full-button option styling
+   - Selected state with checkmark badge
+   - Correct/incorrect feedback states
+   - Checkmark animation
+   
+   DEPENDENCIES:
+   - Requires: design-tokens.css (for CSS variables)
+   - Requires: base.css (for .interaction container)
+   
+   USED BY:
+   - True/false questions
+   - Yes/no questions
+   - Boolean choice activities
+   - Quick knowledge checks
+   
+   AI DEBUGGING TIPS:
+   - Radio buttons showing? They're hidden with position: absolute, opacity: 0
+   - Checkmark not animating? Verify @keyframes checkmarkPop defined and animation applied
+   - State colors not changing? Check .answer-correct and .answer-incorrect classes applied to labels
+   - Touch targets too small? Labels have min-height set - increase padding on mobile
+   
+   COMMON CLASSES:
+   .true-false-options    - Grid container (2 columns)
+   .answer-correct        - Label with correct answer selected
+   .answer-incorrect      - Label with incorrect answer selected
+   
+   HTML STRUCTURE:
+   <div class="true-false-options">
+     <label>
+       <input type="radio" name="question-id" value="true">
+       <span class="tf-label">True</span>
+     </label>
+     <label class="answer-correct">
+       <input type="radio" name="question-id" value="false">
+       <span class="tf-label">False</span>
+     </label>
+   </div>
+   
+   LAST UPDATED: 2024-12-11
+   ============================================================================ */
+
+.true-false-options {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--space-4);
+  width: 100%;
+  max-width: 500px;
+  margin: 0 auto;
+}
+
+.true-false-options label {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-3) var(--space-4);
+  border: 2px solid var(--color-gray-300);
+  border-radius: var(--radius-lg);
+  cursor: pointer;
+  transition: border-color var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
+  background: var(--bg-surface);
+  position: relative;
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-gray-700);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.true-false-options label:hover {
+  border-color: var(--color-secondary);
+  background: var(--bg-subtle);
+  box-shadow: var(--shadow-sm);
+}
+
+.true-false-options label:active {
+  transform: scale(0.98);
+}
+
+/* Hide the native radio input */
+.true-false-options input[type="radio"] {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+/* Focus state for accessibility */
+.true-false-options label:has(input[type="radio"]:focus-visible) {
+  outline: 3px solid var(--color-primary);
+  outline-offset: 2px;
+}
+
+/* Checked state */
+.true-false-options label:has(input[type="radio"]:checked) {
+  border-color: var(--color-secondary);
+  background: var(--color-secondary-alpha-05);
+  color: var(--color-secondary);
+  box-shadow: 0 0 0 3px var(--color-secondary-alpha-10);
+}
+
+/* Checkmark badge for selected state */
+.true-false-options label:has(input[type="radio"]:checked)::after {
+  content: '✓';
+  position: absolute;
+  top: var(--space-2);
+  right: var(--space-2);
+  width: 24px;
+  height: 24px;
+  background: var(--color-secondary);
+  color: var(--color-gray-900);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--font-size-sm);
+  font-weight: bold;
+  animation: checkmarkPop 0.25s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+}
+
+@keyframes checkmarkPop {
+  0% {
+    transform: scale(0);
+  }
+
+  50% {
+    transform: scale(1.2);
+  }
+
+  100% {
+    transform: scale(1);
+  }
+}
+
+/* Correct answer state - green */
+.true-false-options label.answer-correct:has(input[type="radio"]:checked) {
+  border-color: var(--color-success);
+  background: var(--color-success-alpha-05);
+  color: var(--color-success);
+  box-shadow: 0 0 0 3px var(--color-success-alpha-10);
+}
+
+.true-false-options label.answer-correct:has(input[type="radio"]:checked)::after {
+  background: var(--color-success);
+}
+
+/* Incorrect answer state - red */
+.true-false-options label.answer-incorrect:has(input[type="radio"]:checked) {
+  border-color: var(--color-danger);
+  background: var(--color-danger-alpha-05);
+  color: var(--color-danger);
+  box-shadow: 0 0 0 3px var(--color-danger-alpha-10);
+}
+
+.true-false-options label.answer-incorrect:has(input[type="radio"]:checked)::after {
+  content: '✗';
+  background: var(--color-danger);
+}
+
+/* Label text styling */
+.tf-label {
+  color: inherit;
+}
+
+/* Responsive: Stack vertically on very small screens */
+@media (max-width: 400px) {
+  .true-false-options {
+    grid-template-columns: 1fr;
+    max-width: none;
+  }
+}