Restructure ChoicesEditor

leung018 · May 24, 2024 · 5014bd3 · 5014bd3
1 parent ecc3a53
commit 5014bd3
Showing 1 changed file with 93 additions and 95 deletions.
diff --git a/src/app/components/editor.tsx b/src/app/components/editor.tsx
@@ -303,45 +303,16 @@ function QuestionSetEditor({
                   }}
                 />
               </label>
-              <div className="form-group">
-                <h3 className="text-lg font-bold mb-2">Choices:</h3>
-                <table className="border-collapse border border-slate-400">
-                  <thead>
-                    <tr>
-                      <th className="border border-slate-300">Answer</th>
-                      <th className="border border-slate-300">Correct</th>
-                      <th className="border border-slate-300">
-                        Fixed Position
-                      </th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    <ChoicesEditor
-                      questionNumber={questionNumber}
-                      choices={question.choices}
-                      onChoicesUpdate={(choices) => {
-                        handleQuestionUpdate(question.id, (oldQuestion) => ({
-                          ...oldQuestion,
-                          choices,
-                        }))
-                      }}
-                    />
-                  </tbody>
-                </table>
-
-                <button
-                  type="button"
-                  className="bg-blue-500 text-white px-4 py-2 rounded"
-                  onClick={() => {
-                    handleQuestionUpdate(question.id, (oldQuestion) => ({
-                      ...oldQuestion,
-                      choices: [...oldQuestion.choices, newChoice()],
-                    }))
-                  }}
-                >
-                  Add Choice
-                </button>
-              </div>
+              <ChoicesEditor
+                questionNumber={questionNumber}
+                choices={question.choices}
+                onChoicesUpdate={(choices) => {
+                  handleQuestionUpdate(question.id, (oldQuestion) => ({
+                    ...oldQuestion,
+                    choices,
+                  }))
+                }}
+              />
             </div>
           )
         })}
@@ -413,60 +384,87 @@ function ChoicesEditor(props: {
     onChoicesUpdate(newChoices)
   }
 
-  const choiceEditors = []
-  for (let choiceIndex = 0; choiceIndex < choices.length; choiceIndex++) {
-    const choiceNumber = choiceIndex + 1
-    const choice = choices[choiceIndex]
-    choiceEditors.push(
-      <tr key={choice.id}>
-        <td className="border border-slate-300">
-          <input
-            type="text"
-            className="border border-gray-300 px-2 py-1"
-            onChange={(e) => {
-              handleInternalChoiceUpdate(choice.id, {
-                answer: e.target.value,
-              })
-            }}
-            aria-label={QuestionSetEditorAriaLabel.answerInput({
-              choiceNumber,
-              questionNumber,
-            })}
-          />
-        </td>
-        <td className="border border-slate-300">
-          <input
-            type="checkbox"
-            className="mr-1"
-            checked={choice.isCorrect}
-            onChange={(e) => {
-              handleInternalChoiceUpdate(choice.id, {
-                isCorrect: e.target.checked,
-              })
-            }}
-            aria-label={QuestionSetEditorAriaLabel.isCorrectAnswerCheckbox({
-              choiceNumber,
-              questionNumber,
-            })}
-          />
-        </td>
-        <td className="border border-slate-300">
-          <input
-            type="checkbox"
-            className="mr-1"
-            aria-label={QuestionSetEditorAriaLabel.isFixedPositionCheckbox({
-              choiceNumber,
-              questionNumber,
-            })}
-            onChange={(e) => {
-              handleInternalChoiceUpdate(choice.id, {
-                isFixedPosition: e.target.checked,
-              })
-            }}
-          />
-        </td>
-      </tr>,
-    )
-  }
-  return choiceEditors
+  return (
+    <div className="form-group">
+      <h3 className="text-lg font-bold mb-2">Choices:</h3>
+      <table className="border-collapse border border-slate-400">
+        <thead>
+          <tr>
+            <th className="border border-slate-300">Answer</th>
+            <th className="border border-slate-300">Correct</th>
+            <th className="border border-slate-300">Fixed Position</th>
+          </tr>
+        </thead>
+        <tbody>
+          {choices.map((choice, choiceIndex) => {
+            const choiceNumber = choiceIndex + 1
+            return (
+              <tr key={choice.id}>
+                <td className="border border-slate-300">
+                  <input
+                    type="text"
+                    className="border border-gray-300 px-2 py-1"
+                    onChange={(e) => {
+                      handleInternalChoiceUpdate(choice.id, {
+                        answer: e.target.value,
+                      })
+                    }}
+                    aria-label={QuestionSetEditorAriaLabel.answerInput({
+                      choiceNumber,
+                      questionNumber,
+                    })}
+                  />
+                </td>
+                <td className="border border-slate-300">
+                  <input
+                    type="checkbox"
+                    className="mr-1"
+                    checked={choice.isCorrect}
+                    onChange={(e) => {
+                      handleInternalChoiceUpdate(choice.id, {
+                        isCorrect: e.target.checked,
+                      })
+                    }}
+                    aria-label={QuestionSetEditorAriaLabel.isCorrectAnswerCheckbox(
+                      {
+                        choiceNumber,
+                        questionNumber,
+                      },
+                    )}
+                  />
+                </td>
+                <td className="border border-slate-300">
+                  <input
+                    type="checkbox"
+                    className="mr-1"
+                    aria-label={QuestionSetEditorAriaLabel.isFixedPositionCheckbox(
+                      {
+                        choiceNumber,
+                        questionNumber,
+                      },
+                    )}
+                    onChange={(e) => {
+                      handleInternalChoiceUpdate(choice.id, {
+                        isFixedPosition: e.target.checked,
+                      })
+                    }}
+                  />
+                </td>
+              </tr>
+            )
+          })}
+        </tbody>
+      </table>
+
+      <button
+        type="button"
+        className="bg-blue-500 text-white px-4 py-2 rounded"
+        onClick={() => {
+          onChoicesUpdate([...choices, newChoice()])
+        }}
+      >
+        Add Choice
+      </button>
+    </div>
+  )
 }