website

commit 23c8e8d757dac3cfa9822b3e11abfa32c35b95d4
parent 6f5042ccfc6f4d88749b6734715314e280164ff1
Author: hrryt <harry@mayesfield.uk>
Date:   Thu, 30 Jul 2026 19:56:42 +0100

Add question parameter form

Diffstat:
M
src/components/MultipleSelection.jsx
 | 
19
+++++++++++--------
M
src/components/QuestionWindow.jsx
 | 
45
++++++++++++++++++++++++++++++---------------
M
src/styles/main.css
 | 
4
++++

3 files changed, 45 insertions(+), 23 deletions(-)
diff --git a/src/components/MultipleSelection.jsx b/src/components/MultipleSelection.jsx
@@ -1,15 +1,18 @@
 import * as React from 'react';
 
-export default function MultipleSelection({ legend, values, labels = values, defaults = values.map(() => true) }) {
+export default function MultipleSelection({ id, legend, values, labels = values, defaults = values.map(() => true) }) {
   return (
-    <fieldset ref={ref}>
+    <fieldset key={id}>
       <legend>{legend}</legend>
-      {values.map((value, i) => (
-        <div className="field-row">
-          <input type="checkbox" name={value} defaultChecked={defaults[i]}></input>
-          <label for={value}>{labels[i]}</label>
-        </div>
-      ))}
+      {values.map((value, i) => {
+        const name = id + value;
+        return (
+          <div key={value} className="field-row">
+            <input type="checkbox" id={name} name={name} defaultChecked={defaults[i]} />
+            <label htmlFor={name}>{labels[i]}</label>
+          </div>
+        );
+      })}
     </fieldset>
   );
 }
diff --git a/src/components/QuestionWindow.jsx b/src/components/QuestionWindow.jsx
@@ -2,10 +2,19 @@ import * as React from 'react';
 import QuestionList from './QuestionList.jsx';
 import { getRandomInt, getRandomNumber } from '../scripts/utils.js';
 
+import MultipleSelection from './MultipleSelection';
+
 import AddingFractionsQuestion from './questions/AddingFractionsQuestion.jsx';
 import QuadraticEquationQuestion from './questions/QuadraticEquationQuestion.jsx';
 import Window from './Window.jsx';
 
+function chooseInputComponent(type) {
+  switch (type) {
+    case 'multiple-selection':
+      return MultipleSelection;
+  }
+}
+
 function chooseQuestionComponent(type) {
   switch (type) {
     case 'quadratic-equation':
@@ -51,27 +60,33 @@ export default function QuestionWindow({ data }) {
     return randomQuestionList;
   });
 
+  const fields = data.inputs.map(input => {
+    const { type: type, ...props } = input;
+    const InputComponent = chooseInputComponent(type);
+    return <InputComponent {...props} />;
+  });
+
   const formRef = React.useRef();
-  function submitForm() { formRef.current.submit(); }
+  function submitForm() { e.preventDefault(); formRef.current.submit(); }
   function handleSubmit(e) { e.preventDefault(); }
 
   return (
     <Window title="Questions">
       <form ref={formRef} onChange={submitForm} onSubmit={handleSubmit}>
-          <fieldset>
-            <legend>Options</legend>
-            <button onClick={revealAnswers}>
-              {showAnswers ? "Hide" : "Show"} Answers
-            </button>
-            <button onClick={triggerRefresh}>
-              Refresh Questions
-            </button>
-          </fieldset>
-        </form>
-        <br />
-        <div className="field-border question-field kern">
-          {questions}
-        </div>
+        {fields}
+        <fieldset>
+          <legend>Options</legend>
+          <button onClick={revealAnswers}>
+            {showAnswers ? "Hide" : "Show"} Answers
+          </button>
+          <button onClick={triggerRefresh}>
+            Refresh Questions
+          </button>
+        </fieldset>
+      </form>
+      <div className="field-border question-field kern">
+        {questions}
+      </div>
     </Window>
   );
 }
diff --git a/src/styles/main.css b/src/styles/main.css
@@ -2,6 +2,10 @@ body {
   background-color: #008080;
 }
 
+fieldset {
+  margin-bottom: 7px;
+}
+
 .window {
   width: min-content;
 }