coursecode 0.1.0

package/framework/css/components/assessments.css

@@ -0,0 +1,520 @@
+/* ============================================================================
+   ASSESSMENTS - Quiz and assessment components
+   ============================================================================
+   
+   PURPOSE: Complete assessment system with navigation, progress, and review
+   
+   INCLUDES:
+   - Assessment info boxes
+   - Progress bars
+   - Navigation bars
+   - Review grids and items
+   - Submit sections
+   - Result cards and response boxes
+   - Badge status indicators
+   - List groups
+   
+   DEPENDENCIES:
+   - Requires: design-tokens.css (for CSS variables)
+   - Requires: components/buttons.css (for submit buttons)
+   - Requires: components/tabs.css (for assessment tabs)
+   
+   USED BY:
+   - Final exams
+   - Knowledge checks
+   - Practice quizzes
+   - Assessment review slides
+   
+   AI DEBUGGING TIPS:
+   - Progress not updating? Check .assessment-progress-bar-fill width style
+   - Review items not clickable? Verify .review-item-edit button exists
+   - Submit button disabled? Check :disabled attribute and validation
+   - Badge color wrong? Ensure correct variant class (.badge-success, etc.)
+   - Grid not responsive? Check min-width in repeat(auto-fit, minmax())
+   
+   STRUCTURE:
+   1. Assessment info boxes (50-90)
+   2. Progress bars (95-130)
+   3. Navigation bars (135-155)
+   4. Review section (160-280)
+   5. Submit section (285-315)
+   6. Result cards (320-360)
+   7. Response boxes (365-395)
+   8. Badges (400-450)
+   9. Assessment lists (455-540)
+   
+   COMMON CLASSES:
+   .info-box                    - Info container
+   .assessment-progress-bar     - Progress bar container
+   .nav-bar                     - Navigation bar
+   .review-grid                 - Grid of review items
+   .review-item                 - Individual review card
+   .assessment-submit-section   - Submit area
+   .result-card                 - Question result display
+   .response-box                - Answer display box
+   .badge                       - Status badge
+   .assessment-list             - Structured data list (assessment-only, NOT generic utility)
+   .assessment-list-item        - Assessment data list item
+   .assessment-list-flush       - Borderless assessment list variant
+
+   LAST UPDATED: 2024-11-17
+   ============================================================================ */
+
+/* ============================================================================
+   ASSESSMENT INFO BOXES
+   ============================================================================ */
+
+.info-box {
+  background: var(--color-secondary-alpha-05);
+  border: var(--border-width-thin) solid var(--color-secondary-alpha-20);
+  border-radius: var(--radius-lg);
+  padding: var(--space-5);
+  margin: var(--space-6) 0;
+}
+
+.info-box h3 {
+  color: var(--color-secondary);
+  margin: 0 0 var(--space-4);
+  font-size: var(--font-size-lg);
+  font-weight: var(--font-weight-semibold);
+}
+
+.info-box ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: var(--space-3);
+}
+
+.info-box li {
+  color: var(--text-body);
+  font-size: var(--font-size-sm);
+  margin: 0;
+}
+
+.info-box strong {
+  color: var(--color-secondary);
+  font-weight: var(--font-weight-semibold);
+}
+
+/* ============================================================================
+   ASSESSMENT PROGRESS BAR
+   ============================================================================ */
+
+.assessment-progress-bar {
+  position: relative;
+  height: 32px;
+  background: var(--bg-muted);
+  border-radius: var(--radius-md);
+  margin-bottom: var(--space-6);
+  overflow: hidden;
+  border: 1px solid var(--color-gray-200);
+}
+
+.assessment-progress-bar-fill {
+  height: 100%;
+  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-secondary) 100%);
+  transition: width 0.4s ease;
+  border-radius: var(--radius-md);
+}
+
+.assessment-progress-bar-text {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: var(--text-body);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+  z-index: 1;
+  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
+}
+
+/* ============================================================================
+   NAVIGATION BAR
+   ============================================================================ */
+
+.nav-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--space-4);
+  padding: var(--space-5);
+  background: var(--bg-subtle);
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--color-gray-200);
+  margin-bottom: var(--space-6);
+}
+
+/* ============================================================================
+   REVIEW SECTION
+   ============================================================================ */
+
+.assessment-review-section {
+  margin-bottom: var(--space-6);
+}
+
+.assessment-review-section h3 {
+  color: var(--color-secondary);
+  margin: 0 0 var(--space-5) 0;
+  font-size: var(--font-size-xl);
+  font-weight: var(--font-weight-semibold);
+}
+
+.review-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: var(--space-4);
+  margin-bottom: var(--space-6);
+}
+
+.review-item {
+  background: var(--bg-surface);
+  border: 2px solid var(--color-gray-200);
+  border-radius: var(--radius-lg);
+  padding: var(--space-5);
+  transition: border-color var(--transition-normal), background-color var(--transition-normal), box-shadow var(--transition-normal), transform var(--transition-normal);
+}
+
+.review-item.completed {
+  border-color: var(--color-success-alpha-30);
+  background: var(--color-success-alpha-05);
+}
+
+.review-item.incomplete {
+  border-color: var(--color-warning-alpha-30);
+  background: var(--color-warning-alpha-05);
+}
+
+.review-item:hover {
+  box-shadow: var(--shadow-md);
+  transform: translateY(-2px);
+}
+
+.review-item-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: var(--space-3);
+  padding-bottom: var(--space-3);
+  border-bottom: 1px solid var(--color-gray-200);
+}
+
+.review-item-number {
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-secondary);
+  font-size: var(--font-size-base);
+}
+
+.review-item-status {
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+}
+
+.review-item.completed .review-item-status {
+  color: var(--color-success);
+}
+
+.review-item.incomplete .review-item-status {
+  color: var(--color-warning);
+}
+
+.review-item-prompt {
+  color: var(--text-body);
+  font-size: var(--font-size-sm);
+  margin-bottom: var(--space-4);
+  line-height: var(--line-height-relaxed);
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.review-item-edit {
+  background: transparent;
+  border: none;
+  color: var(--color-primary);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  cursor: pointer;
+  padding: 0;
+  text-decoration: underline;
+  transition: color var(--transition-fast);
+}
+
+.review-item-edit:hover {
+  color: var(--color-secondary);
+}
+
+.review-actions {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--space-4);
+  padding: var(--space-5);
+  background: var(--bg-subtle);
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--color-gray-200);
+}
+
+/* ============================================================================
+   SUBMIT SECTION
+   ============================================================================ */
+
+.assessment-submit-section {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--space-3);
+  padding: var(--space-6);
+  background: var(--bg-subtle);
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--color-gray-200);
+  margin-bottom: var(--space-6);
+}
+
+.btn-submit.btn-lg {
+  padding: var(--space-4) var(--space-8);
+  font-size: var(--font-size-lg);
+  box-shadow: var(--shadow-md);
+}
+
+.btn-submit.btn-lg:hover:not(:disabled) {
+  box-shadow: var(--shadow-lg);
+}
+
+.submit-help {
+  color: var(--text-muted);
+  font-size: var(--font-size-sm);
+  margin: 0;
+  text-align: center;
+}
+
+/* ============================================================================
+   RESULT CARDS
+   ============================================================================ */
+
+.result-card {
+  background: var(--bg-surface);
+  border: 2px solid var(--color-gray-200);
+  border-radius: var(--radius-md);
+  padding: var(--space-4);
+  transition: border-color 0.2s ease;
+}
+
+.result-card.correct {
+  border-color: var(--color-success);
+  background: var(--color-success-alpha-05);
+}
+
+.result-card.incorrect {
+  border-color: var(--color-danger);
+  background: var(--color-danger-alpha-05);
+}
+
+/* ============================================================================
+   RESPONSE BOXES
+   ============================================================================ */
+
+/* ============================================================================
+   RESULT ITEMS - Assessment Results Display
+   ============================================================================ */
+
+.results-list .assessment-list-item {
+  flex-direction: column;
+  align-items: stretch;
+}
+
+.result-item-content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+  width: 100%;
+}
+
+.response-box {
+  margin-top: var(--space-3);
+  padding: var(--space-3);
+  border-radius: var(--radius-lg);
+  background: var(--bg-subtle);
+}
+
+.response-box > p:first-child {
+  margin-top: 0;
+  margin-bottom: var(--space-2);
+  font-weight: var(--font-weight-semibold);
+  font-size: var(--font-size-sm);
+  color: var(--color-text-secondary);
+}
+
+.response-box.correct {
+  background: var(--color-success-alpha-05);
+  border: 1px solid var(--color-success-alpha-20);
+}
+
+.response-item,
+.correct-item {
+  margin: var(--space-1) 0;
+  padding-left: var(--space-2);
+  line-height: var(--line-height-relaxed);
+  color: var(--color-gray-900);
+}
+
+.response-item:first-of-type,
+.correct-item:first-of-type {
+  margin-top: 0;
+}
+
+.response-item:last-of-type,
+.correct-item:last-of-type {
+  margin-bottom: 0;
+}
+
+/* ============================================================================
+   ASSESSMENT STATUS BADGES
+   Extensions to base .badge component for assessment-specific states
+   ============================================================================ */
+
+.badge.status-answered {
+  background: var(--color-success-light);
+  color: var(--color-success);
+}
+
+.badge.status-unanswered {
+  background: var(--color-warning-light);
+  color: var(--color-warning);
+}
+
+/* ============================================================================
+   ASSESSMENT SECTION HEADERS
+   ============================================================================ */
+
+.assessment-section-header {
+  margin-bottom: var(--space-6);
+  padding-bottom: var(--space-4);
+  border-bottom: 1px solid var(--color-gray-200);
+}
+
+.assessment-section-header h3 {
+  color: var(--color-secondary);
+  margin: 0 0 var(--space-3) 0;
+  font-size: var(--font-size-xl);
+}
+
+.assessment-instructions {
+  color: var(--text-muted);
+  margin: 0;
+  font-size: var(--font-size-base);
+  line-height: var(--line-height-relaxed);
+}
+
+.question-container {
+  margin-top: var(--space-4);
+}
+
+.assessment-controls {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--space-5);
+  background: var(--bg-subtle);
+  border-radius: var(--radius-lg);
+  margin-top: var(--space-6);
+  border: 1px solid var(--color-gray-200);
+}
+
+/* ============================================================================
+   RESPONSIVE DESIGN
+   ============================================================================ */
+
+/* ============================================================================
+   ASSESSMENT LIST - Structured data list for questions, results, etc.
+   ============================================================================
+   
+   PURPOSE: Assessment-specific list container for structured data presentation
+   (NOT a generic utility - only use in assessment contexts)
+   
+   CLASSES:
+   .assessment-list       - Container for assessment data items
+   .assessment-list-item  - Individual item in assessment list
+   .assessment-list-flush - Borderless variant for streamlined look
+   
+   USAGE:
+   <ul class="assessment-list">
+     <li class="assessment-list-item">Question 1 with metadata</li>
+     <li class="assessment-list-item">Question 2 with metadata</li>
+   </ul>
+   
+   USED FOR:
+   - Question review before submission
+   - Assessment results display
+   - Answer verification display
+   
+   ============================================================================ */
+
+.assessment-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  border-radius: var(--radius-lg);
+}
+
+.assessment-list-item {
+  padding: var(--space-4);
+  background: var(--bg-surface);
+  border: 1px solid var(--color-gray-300);
+  border-top-width: 0;
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+}
+
+.assessment-list-item:first-child {
+  border-top-width: 1px;
+  border-top-left-radius: var(--radius-lg);
+  border-top-right-radius: var(--radius-lg);
+}
+
+.assessment-list-item:last-child {
+  border-bottom-left-radius: var(--radius-lg);
+  border-bottom-right-radius: var(--radius-lg);
+}
+
+.assessment-list-flush {
+  border-radius: 0;
+}
+
+.assessment-list-flush .assessment-list-item {
+  border-left: 0;
+  border-right: 0;
+  border-radius: 0;
+}
+
+.assessment-list-flush .assessment-list-item:first-child {
+  border-top: 0;
+}
+
+.assessment-list-flush .assessment-list-item:last-child {
+  border-bottom: 0;
+}
+
+@media (max-width: 768px) {
+  .review-grid {
+    grid-template-columns: 1fr;
+  }
+  
+  .review-actions {
+    flex-direction: column;
+  }
+
+  .review-actions button {
+    width: 100%;
+  }
+  
+  .info-box ul {
+    grid-template-columns: 1fr;
+  }
+}