multi-line support

Author: Brian Genisio

data/answer.md

@@ -9,7 +9,7 @@ __Summary__
 __Responses__
 
 1. **Question 1**
-   - Selected Answer: qq
+   - Selected Answer: No answer selected
    - Correct Answer: Holy Grail
    - Result: ✗ Incorrect
 
@@ -34,15 +34,15 @@ What is your quest?
 
 __Correct Answers__
 
-- Holy Grail [kind: string] [options: fuzzy=0.3]
+- Holy Grail [kind: string] [options: fuzzy=0.3,multiLine=true]
 
 __Practice Question__
 
 How many feet in a yard?
 
 __Correct Answers__
 
-- 3 [kind: numeric] [options: precision=0]
+- 3 [kind: string] [options: precision=0]
 
 __Practice Question__
 

data/question.md

@@ -8,15 +8,15 @@ What is your quest?
 
 __Correct Answers__
 
-- Holy Grail [kind: string] [options: fuzzy=0.3]
+- Holy Grail [kind: string] [options: fuzzy=0.3,multiLine=true]
 
 __Practice Question__
 
 How many feet in a yard?
 
 __Correct Answers__
 
-- 3 [kind: numeric] [options: precision=0]
+- 3 [kind: string] [options: precision=0]
 
 __Practice Question__
 

public/editor.js

@@ -426,6 +426,32 @@ function renderValidationOptions(container, question, index) {
     caseSensitiveDiv.appendChild(caseLabel);
     validationDiv.appendChild(caseSensitiveDiv);
 
+    // Multi-line option
+    const multiLineDiv = document.createElement('div');
+    multiLineDiv.className = 'validation-option';
+    const multiLineLabel = document.createElement('label');
+    multiLineLabel.className = 'input-checkbox';
+    const multiLineInput = document.createElement('input');
+    multiLineInput.type = 'checkbox';
+    multiLineInput.checked = options.multiLine === true;
+    multiLineInput.onchange = () => {
+      options.multiLine = multiLineInput.checked;
+      updateStructure();
+    };
+    const multiLineBox = document.createElement('span');
+    multiLineBox.className = 'input-checkbox-box';
+    const multiLineCheckmark = document.createElement('span');
+    multiLineCheckmark.className = 'input-checkbox-checkmark';
+    multiLineBox.appendChild(multiLineCheckmark);
+    const multiLineText = document.createElement('span');
+    multiLineText.className = 'input-checkbox-label';
+    multiLineText.textContent = 'Multi-line';
+    multiLineLabel.appendChild(multiLineInput);
+    multiLineLabel.appendChild(multiLineBox);
+    multiLineLabel.appendChild(multiLineText);
+    multiLineDiv.appendChild(multiLineLabel);
+    validationDiv.appendChild(multiLineDiv);
+
     // Fuzzy option
     const fuzzyDiv = document.createElement('div');
     fuzzyDiv.className = 'validation-option';

public/modules/text-input.css

@@ -180,6 +180,18 @@
   scroll-margin-bottom: 2rem;
 }
 
+/* Multi-line textarea styling */
+.text-input-field:is(textarea) {
+  display: block;
+  height: auto;
+  min-height: var(--UI-Input-md);
+  padding-top: var(--UI-Spacing-spacing-ms);
+  padding-bottom: var(--UI-Spacing-spacing-ms);
+  line-height: 1.5;
+  resize: vertical;
+  align-items: stretch;
+}
+
 .text-input-next-button-container {
   display: flex;
   justify-content: flex-start;

public/modules/text-input.js

@@ -433,17 +433,29 @@ 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;
 
-    // Create input wrapper for currency overlay
+    // 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)
     const inputWrapper = document.createElement('div');
     inputWrapper.className = 'text-input-field-wrapper';
-    if (isCurrency) {
+    if (isCurrency && !isMultiLine) {
       inputWrapper.classList.add('text-input-field-wrapper-currency');
       inputWrapper.setAttribute('data-currency', currencySymbol);
     }
 
-    // Create input field
-    const input = document.createElement('input');
-    input.type = 'text';
+    // 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';
+    } else {
+      // Set textarea-specific attributes
+      input.rows = 4;
+      input.style.resize = 'vertical';
+      input.style.minHeight = 'var(--UI-Input-md)';
+      input.style.height = 'auto';
+    }
     input.className = 'input text-input-field';
     input.id = `q${question.id}-input`;
     input.value = userAnswers[question.id] || '';