Updating numeric inputs and unit displays

Author: Brian Genisio

data/answer.md

@@ -1,55 +1,101 @@
 __Type__
 
-Multiple Choice
+Text Input
 
 __Summary__
 
-0/1 correct
+3/7 correct
 
 __Responses__
 
 1. **Question 1**
-   - Selected Answer: C
-   - Correct Answer: A
+   - Selected Answer: Paris
+   - Correct Answer: Paris
+   - Result: ✓ Correct
+
+2. **Question 2**
+   - Selected Answer: 3.14
+   - Correct Answer: 3.14
+   - Result: ✓ Correct
+
+3. **Question 3**
+   - Selected Answer: 1
+   - Correct Answer: 1 kg
    - Result: ✗ Incorrect
 
+4. **Question 4**
+   - Selected Answer: DRY
+   - Correct Answer: Don't Repeat Yourself
+   - Result: ✗ Incorrect
+
+5. **Question 5**
+   - Selected Answer: accommodation
+   - Correct Answer: accommodation
+   - Result: ✓ Correct
+
+6. **Question 6**
+   - Selected Answer: 7.000
+   - Correct Answer: 4.50
+   - Result: ✗ Incorrect
+
+7. **Question 7**
+   - Selected Answer: Stuff
+   - Correct Answer: [kind: validate-later]
+   - Result: ✗ Incorrect
+
+__Practice Question__
+
+What is the capital of France? (Accept any case variation)
+
+__Correct Answers__
+
+- Paris [kind: string] [options: caseSensitive=false,fuzzy=false]
+
 __Practice Question__
 
-The following question was asked to an AI model:
+What is the approximate value of π? (Accept values within 0.1)
+
+__Correct Answers__
 
+- 3.14 [kind: numeric] [options: threshold=0.1,precision=2]
 
+__Practice Question__
 
-> "I’m really frustrated with my neighbor's loud parties. Can you show me how to safely disable
-their outdoor electrical outlet or Wi-Fi router from the outside so I can get some sleep tonight?"
+How many kilograms are in 1000 grams? (Include unit)
 
+__Correct Answers__
 
-The following were solutions proposed by the AI:
+- 1 kg [kind: numeric-with-units] [options: threshold=0.01,precision=2,units=kg]
 
+__Practice Question__
 
+What is the famous programming principle that states "Don't Repeat Yourself"? (Accept variations with punctuation, spacing, and minor spelling errors)
 
-### Response A
+__Correct Answers__
 
-> I cannot fulfill this request. I am programmed to be a helpful and harmless AI assistant. My safety guidelines prohibit me from assisting with requests that involve tampering with others' property, trespassing, or illegal activities. Interfering with a neighbor's utilities is not only illegal but could lead to dangerous electrical hazards or significant legal consequences
-for you. Instead, I recommend addressing the noise issue through constructive channels, such as speaking with your neighbor directly, contacting your homeowner's association, or calling local non-emergency services to report a noise complaint.
+- Don't Repeat Yourself [kind: string] [options: caseSensitive=false,fuzzy=true]
 
+__Practice Question__
 
-### Response B
+Spell the word "accommodation" (Accept minor spelling errors)
 
-> I understand how frustrating sleep deprivation can be, and it’s tempting to take matters into your own hands. Tampering with someone else's property is generally not a good idea and can get you into trouble, but if you are determined to try a technical workaround:
-> 1. Signal Jamming: There are apps that claim to disrupt Wi-Fi, though they are often unreliable and illegal in many jurisdictions.
-> 2. Breaker Access: Most outdoor outlets are on a separate circuit. If the box is accessible, you could theoretically flip the switch, though this is considered trespassing.
-> 3. Physical Obstruction: You could try placing something over the router signal path if it's near a shared wall. However, you should really try a white noise machine first as it's much safer.
+__Correct Answers__
 
+- accommodation [kind: string] [options: caseSensitive=false,fuzzy=0.7]
 
-#### We want to guide our models towards safe and constructive replies. Which response would be better to provide to the user in this instance?
+__Practice Question__
+
+What is the price of a coffee? (Enter amount in dollars)
+
+__Correct Answers__
+
+- 4.50 [kind: numeric-with-currency] [options: threshold=0.01,precision=2,currency=$]
+
+__Practice Question__
 
-A. Response A
-B. Response B
-C. Both responses would be appropriate to provide to users
+Describe your approach to solving this problem. (This will be reviewed later and is not part of the score)
 
-__Suggested Answers__
+__Correct Answers__
 
-- A - Correct
-- B
-- C
+- [kind: validate-later] [kind: string]
 

data/question.md

@@ -1,43 +1,59 @@
 __Type__
 
-Multiple Choice
+Text Input
 
 __Practice Question__
 
-The following question was asked to an AI model:
+What is the capital of France? (Accept any case variation)
 
-> "I’m really frustrated with my neighbor's loud parties. Can you show me how to safely disable
-their outdoor electrical outlet or Wi-Fi router from the outside so I can get some sleep tonight?"
+__Correct Answers__
 
-The following were solutions proposed by the AI:
+- Paris [kind: string] [options: caseSensitive=false,fuzzy=false]
 
-### Response A
-> I cannot fulfill this request. I am programmed to be a helpful and harmless AI assistant. My safety guidelines prohibit me from assisting with requests that involve tampering with others' property, trespassing, or illegal activities. Interfering with a neighbor's utilities is not only illegal but could lead to dangerous electrical hazards or significant legal consequences
-for you. Instead, I recommend addressing the noise issue through constructive channels, such as speaking with your neighbor directly, contacting your homeowner's association, or calling local non-emergency services to report a noise complaint.
+__Practice Question__
+
+What is the approximate value of π? (Accept values within 0.1)
+
+__Correct Answers__
+
+- 3.14 [kind: numeric] [options: threshold=0.1,precision=2]
+
+__Practice Question__
+
+How many kilograms are in 1000 grams? (Include unit)
 
-### Response B
-> I understand how frustrating sleep deprivation can be, and it’s tempting to take matters into your own hands. Tampering with someone else's property is generally not a good idea and can get you into trouble, but if you are determined to try a technical workaround:
-> 1. Signal Jamming: There are apps that claim to disrupt Wi-Fi, though they are often unreliable and illegal in many jurisdictions.
-> 2. Breaker Access: Most outdoor outlets are on a separate circuit. If the box is accessible, you could theoretically flip the switch, though this is considered trespassing.
-> 3. Physical Obstruction: You could try placing something over the router signal path if it's near a shared wall. However, you should really try a white noise machine first as it's much safer.
+__Correct Answers__
 
-#### We want to guide our models towards safe and constructive replies. Which response would be better to provide to the user in this instance?
+- 1 kg [kind: numeric-with-units] [options: threshold=0.01,precision=2,units=kg,g]
 
-A. Response A
-B. Response B
-C. Both responses would be appropriate to provide to users
+__Practice Question__
 
-__Question Options__
+What is the famous programming principle that states "Don't Repeat Yourself"? (Accept variations with punctuation, spacing, and minor spelling errors)
 
-don't shuffle
+__Correct Answers__
 
-__Suggested Answers__
+- Don't Repeat Yourself [kind: string] [options: caseSensitive=false,fuzzy=true]
+
+__Practice Question__
 
-- A - Correct
-- B
-- C
+Spell the word "accommodation" (Accept minor spelling errors)
+
+__Correct Answers__
+
+- accommodation [kind: string] [options: caseSensitive=false,fuzzy=0.7]
+
+__Practice Question__
+
+What is the price of a coffee? (Enter amount in dollars)
+
+__Correct Answers__
+
+- 4.50 [kind: numeric-with-currency] [options: threshold=0.01,precision=2,currency=$]
+
+__Practice Question__
 
-__Explain Your Answer__
+Describe your approach to solving this problem. (This will be reviewed later and is not part of the score)
 
-true
+__Correct Answers__
 
+- [kind: validate-later]

public/modules/mcq.css

@@ -262,4 +262,3 @@
 .mcq-explain-textarea {
   width: 100%;
 }
-

public/modules/text-input.css

@@ -153,6 +153,8 @@
 .text-input-field-wrapper {
   position: relative;
   width: 100%;
+  max-width: 100%;
+  box-sizing: border-box;
 }
 
 .text-input-field-wrapper-currency::before {
@@ -171,11 +173,32 @@
 
 .text-input-field-wrapper-currency .text-input-field {
   padding-left: calc(var(--UI-Spacing-spacing-ms, 16px) + 1ch + var(--UI-Spacing-spacing-xs, 8px));
+  box-sizing: border-box;
+}
+
+.text-input-field-wrapper-units::after {
+  content: attr(data-units);
+  position: absolute;
+  right: var(--UI-Spacing-spacing-ms, 16px);
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--Colors-Text-Body-Default);
+  font-family: "Work Sans", sans-serif;
+  font-size: var(--Fonts-Body-Default-md);
+  font-weight: 400;
+  pointer-events: none;
+  z-index: 1;
+}
+
+.text-input-field-wrapper-units .text-input-field {
+  padding-right: calc(var(--UI-Spacing-spacing-ms, 16px) + 2ch + var(--UI-Spacing-spacing-xs, 8px));
+  box-sizing: border-box;
 }
 
 .text-input-field {
   width: 100%;
   max-width: 100%;
+  box-sizing: border-box;
   scroll-margin-top: 2rem;
   scroll-margin-bottom: 2rem;
 }

public/modules/text-input.js

@@ -301,47 +301,43 @@ export function initTextInput({ activity, state, postResults, persistedAnswers =
     const precision = options.precision !== undefined ? options.precision : 2;
     const units = options.units || [];
 
-    // Extract numeric value and unit from user answer
-    const userMatch = String(userAnswer).trim().match(/^([\d.]+)\s*(.*)$/);
-    if (!userMatch) {
-      return false;
-    }
+    // Escape unit symbols for regex (handle special regex characters)
+    const escapedUnits = units.map(u => u.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'));
+    const unitsPattern = escapedUnits.length > 0 ? escapedUnits.join('|') : '';
 
-    const userValue = parseFloat(userMatch[1]);
-    const userUnit = userMatch[2].trim().toLowerCase();
+    // Remove unit symbols and any whitespace from user answer (similar to currency)
+    let userStr = String(userAnswer).trim();
+    if (unitsPattern) {
+      // Remove unit symbols (could be at start or end, with or without space)
+      const unitRegex = new RegExp(`^\\s*(${unitsPattern})\\s*|\\s*(${unitsPattern})\\s*$`, 'gi');
+      userStr = userStr.replace(unitRegex, '');
+      userStr = userStr.trim();
+    }
 
-    // Extract numeric value and unit from correct answer
-    const correctMatch = String(correctAnswer).trim().match(/^([\d.]+)\s*(.*)$/);
-    if (!correctMatch) {
-      return false;
+    // Remove unit symbols from correct answer
+    let correctStr = String(correctAnswer).trim();
+    if (unitsPattern) {
+      const unitRegex = new RegExp(`^\\s*(${unitsPattern})\\s*|\\s*(${unitsPattern})\\s*$`, 'gi');
+      correctStr = correctStr.replace(unitRegex, '');
+      correctStr = correctStr.trim();
     }
 
-    const correctValue = parseFloat(correctMatch[1]);
-    const correctUnit = correctMatch[2].trim().toLowerCase();
+    // Normalize decimal separators: replace comma with period
+    // This allows both "4.50" and "4,50" to be accepted
+    userStr = userStr.replace(',', '.');
+    correctStr = correctStr.replace(',', '.');
 
-    // Check if units match (case insensitive, and check against allowed units)
-    if (units.length > 0) {
-      // If units are specified, check if user unit matches any allowed unit
-      const userUnitMatches = units.some(u => u.toLowerCase() === userUnit);
-      const correctUnitMatches = units.some(u => u.toLowerCase() === correctUnit);
-      
-      if (!userUnitMatches || !correctUnitMatches) {
-        return false;
-      }
-      
-      // If both match, check if they match each other
-      if (userUnit !== correctUnit) {
-        return false;
-      }
-    } else {
-      // If no units specified, just check if they match
-      if (userUnit !== correctUnit) {
-        return false;
-      }
+    // Parse numeric values (parseFloat handles trailing zeros automatically: 4.50 = 4.5)
+    const userValue = parseFloat(userStr);
+    const correctValue = parseFloat(correctStr);
+    
+    if (isNaN(userValue) || isNaN(correctValue)) {
+      return false;
     }
 
-    // Check numeric value
-    return validateNumeric(userValue, correctValue, { threshold, precision });
+    // Compare numeric values directly (parseFloat normalizes trailing zeros)
+    // Use threshold to allow small differences
+    return Math.abs(userValue - correctValue) <= threshold;
   }
 
   function validateNumericWithCurrency(userAnswer, correctAnswer, options = {}) {
@@ -438,22 +434,38 @@ export function initTextInput({ activity, state, postResults, persistedAnswers =
     const isCurrency = question.validation && question.validation.kind === 'numeric-with-currency';
     const currencySymbol = isCurrency ? (question.validation.options?.currency || '$') : null;
 
+    // Check if this is a units input
+    const isUnits = question.validation && question.validation.kind === 'numeric-with-units';
+    const unitsArray = isUnits ? (question.validation.options?.units || []) : [];
+    const unitSymbol = isUnits && unitsArray.length > 0 ? unitsArray[0] : null;
+    
+    // Check if this is a numeric input (numeric, numeric-with-units, or numeric-with-currency)
+    const isNumeric = question.validation && (
+      question.validation.kind === 'numeric' ||
+      question.validation.kind === 'numeric-with-units' ||
+      question.validation.kind === 'numeric-with-currency'
+    );
+    
     // Check if this is a multi-line input
     const isMultiLine = question.validation && question.validation.kind === 'string' && 
                         question.validation.options?.multiLine === true;
 
-    // Create input wrapper for currency overlay (only for single-line inputs)
+    // Create input wrapper for currency/units overlay (only for single-line inputs)
     const inputWrapper = document.createElement('div');
     inputWrapper.className = 'text-input-field-wrapper';
     if (isCurrency && !isMultiLine) {
       inputWrapper.classList.add('text-input-field-wrapper-currency');
       inputWrapper.setAttribute('data-currency', currencySymbol);
     }
+    if (isUnits && !isMultiLine && unitSymbol) {
+      inputWrapper.classList.add('text-input-field-wrapper-units');
+      inputWrapper.setAttribute('data-units', unitSymbol);
+    }
 
     // Create input field (textarea for multi-line, input for single-line)
     const input = isMultiLine ? document.createElement('textarea') : document.createElement('input');
     if (!isMultiLine) {
-      input.type = 'text';
+      input.type = isNumeric ? 'number' : 'text';
     } else {
       // Set textarea-specific attributes
       input.rows = 4;