website

commit 7da7192b3db02bb98461b7116c7dacbebc5c2e20
parent 23c8e8d757dac3cfa9822b3e11abfa32c35b95d4
Author: hrryt <harry@mayesfield.uk>
Date:   Fri, 31 Jul 2026 17:51:44 +0100

Add question parameter form update mechanism

Diffstat:
M
src/components/MultipleSelection.jsx
 | 
2
+-
M
src/components/QuestionWindow.jsx
 | 
32
++++++++++++++++++--------------

2 files changed, 19 insertions(+), 15 deletions(-)
diff --git a/src/components/MultipleSelection.jsx b/src/components/MultipleSelection.jsx
@@ -5,7 +5,7 @@ export default function MultipleSelection({ id, legend, values, labels = values,
     <fieldset key={id}>
       <legend>{legend}</legend>
       {values.map((value, i) => {
-        const name = id + value;
+        const name = `${id}:${value}`;
         return (
           <div key={value} className="field-row">
             <input type="checkbox" id={name} name={name} defaultChecked={defaults[i]} />
diff --git a/src/components/QuestionWindow.jsx b/src/components/QuestionWindow.jsx
@@ -27,7 +27,7 @@ function chooseQuestionComponent(type) {
 function renderQuestion(seed, showAnswer) {
   return (question, i) => {
     const QuestionComponent = chooseQuestionComponent(question.type);
-    return <QuestionComponent key={i} seed={seed+i} showAnswer={showAnswer} parameters={question.lockedParameters || {}} />;
+    return <QuestionComponent key={i} seed={seed+i} showAnswer={showAnswer} parameters={question.lockedParameters || { }} />;
   };
 }
 
@@ -47,6 +47,7 @@ function shuffleArray(arr, n, seed) {
 export default function QuestionWindow({ data }) {
   const [showAnswers, setShowAnswers] = React.useState(false);
   const [seed       , setSeed       ] = React.useState(Math.random());
+  const [formData   , setFormData   ] = React.useState({ });
 
   function revealAnswers() { setShowAnswers(!showAnswers); }
   function triggerRefresh() { setSeed(getRandomNumber(seed)); }
@@ -66,24 +67,27 @@ export default function QuestionWindow({ data }) {
     return <InputComponent {...props} />;
   });
 
-  const formRef = React.useRef();
-  function submitForm() { e.preventDefault(); formRef.current.submit(); }
-  function handleSubmit(e) { e.preventDefault(); }
+  function updateFormData(e) {
+    const newFormData = new FormData(e.currentTarget);
+    setFormData(Object.fromEntries(newFormData.entries()));
+  }
+
+  console.log(formData);
 
   return (
     <Window title="Questions">
-      <form ref={formRef} onChange={submitForm} onSubmit={handleSubmit}>
+      <form onChange={updateFormData}>
         {fields}
-        <fieldset>
-          <legend>Options</legend>
-          <button onClick={revealAnswers}>
-            {showAnswers ? "Hide" : "Show"} Answers
-          </button>
-          <button onClick={triggerRefresh}>
-            Refresh Questions
-          </button>
-        </fieldset>
       </form>
+      <fieldset>
+        <legend>Options</legend>
+        <button onClick={revealAnswers}>
+          {showAnswers ? "Hide" : "Show"} Answers
+        </button>
+        <button onClick={triggerRefresh}>
+          Refresh Questions
+        </button>
+      </fieldset>
       <div className="field-border question-field kern">
         {questions}
       </div>