@mathscan/math-exercise-engine 1.0.12 → 1.0.13

package/dist/style.css

@@ -49,6 +49,8 @@
   --exercise-border: #ddd;
   --exercise-border-focus: var(--exercise-primary);
   --exercise-highlight-color: #aef59d;
+  --exercise-correct: #22c55e;
+  --exercise-incorrect: #ef4444;
 
   /* ========================================
      SPACING VARIABLES
@@ -181,7 +183,6 @@
   flex-wrap: wrap;
   align-items: center;
   justify-content: center;
-  align-items: baseline;
   gap: var(--exercise-element-margin);
   padding-bottom: calc(var(--exercise-line-gap) * 0.5);
 }
@@ -371,6 +372,30 @@ mark {
   border-color: var(--exercise-border-focus);
 }
 
+/* ========================================
+   VALIDATION STATUS
+   ======================================== */
+
+.inline-input.widget--correct {
+  border-color: var(--exercise-correct, #22c55e);
+  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.15);
+}
+
+.inline-input.widget--incorrect {
+  border-color: var(--exercise-incorrect, #ef4444);
+  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
+}
+
+.inline-input-chip.widget--correct {
+  border-color: var(--exercise-correct, #22c55e);
+  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.15);
+}
+
+.inline-input-chip.widget--incorrect {
+  border-color: var(--exercise-incorrect, #ef4444);
+  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
+}
+
 /**
  * Widget Styles
  *
@@ -479,6 +504,24 @@ button.drag-option {
   box-shadow: 0 2px 4px rgba(0, 122, 204, 0.2);
 }
 
+/* ========================================
+   VALIDATION STATUS
+   ======================================== */
+
+.radio-option.widget--correct {
+  background: var(--exercise-correct, #22c55e);
+  border-color: var(--exercise-correct, #22c55e);
+  color: white;
+  box-shadow: 0 2px 4px rgba(34, 197, 94, 0.25);
+}
+
+.radio-option.widget--incorrect {
+  background: var(--exercise-incorrect, #ef4444);
+  border-color: var(--exercise-incorrect, #ef4444);
+  color: white;
+  box-shadow: 0 2px 4px rgba(239, 68, 68, 0.25);
+}
+
 /* ========================================
    NUMERIC KEYPAD
    ======================================== */
@@ -567,6 +610,64 @@ td.exercise-table-cell, th.exercise-table-cell {
   border: 2px solid #7c6cf2;
 }
 
+/* ========================================
+   FRACTION WIDGET
+   ======================================== */
+
+.fraction {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  vertical-align: -0.15em;
+  margin: 0 0.2em;
+  line-height: 1;
+}
+
+.fraction-numerator {
+  margin-bottom: 3px;
+}
+
+.fraction-numerator,
+.fraction-denominator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 1.5em;
+  padding: 0.05em 0.1em;
+  line-height: 2.2;
+}
+
+.fraction-bar {
+  width: 100%;
+  min-width: 2em;
+  height: 3px;
+  background-color: var(--exercise-accent);
+  border-radius: 1px;
+  margin: 1px 0;
+}
+
+.fraction-fixed {
+  color: var(--exercise-text);
+  min-width: 1ch;
+  text-align: center;
+}
+
+.fraction-input {
+  width: 3.2em !important;
+  padding: 0.15em 0.2em;
+  font-size: 0.9em;
+  text-align: center;
+}
+
+.fraction-chip {
+  font-size: 0.9em;
+  padding: 0.1em 0.3em;
+}
+
+.fraction-slot-droppable {
+  display: inline-flex;
+}
+
 /**
  * Number Line Styles
  *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mathscan/math-exercise-engine",
-  "version": "1.0.12",
+  "version": "1.0.13",
   "description": "A DSL parser and validator for math exercises - transforms text-based exercise definitions into structured AST and JSON",
   "main": "dist/index.js",
   "module": "dist/index.mjs",