From 85cfc4f6ede17af3f322b35acaaf12d8126f130c Mon Sep 17 00:00:00 2001
From: Leung Cheng <monewckl@hotmail.com.hk>
Date: Thu, 7 Nov 2024 13:27:59 +0800
Subject: [PATCH 1/3] Add test catching bug

---
 src/app/components/quiz.test.tsx | 23 +++++++++++++++++++++++
 1 file changed, 23 insertions(+)

diff --git a/src/app/components/quiz.test.tsx b/src/app/components/quiz.test.tsx
index f092f5f..5ca8f20 100644
--- a/src/app/components/quiz.test.tsx
+++ b/src/app/components/quiz.test.tsx
@@ -260,6 +260,29 @@ describe('MultipleChoiceQuiz', () => {
     const choice2 = getByLabelText('Question 1 Choice 2')
     assertIsBefore(choice2, choice1)
   })
+
+  it('should score of playing swapped question set be calculated correctly', async () => {
+    const questionSet = new QuestionSetBuilderForTest()
+      .appendQuestion({
+        mc: new MultipleChoiceBuilder()
+          .setCorrectChoiceIndex(1)
+          .appendNonFixedChoice('Question 1 Choice 1')
+          .appendNonFixedChoice('Question 1 Choice 2 (Correct)')
+          .build(),
+      })
+      .build()
+
+    const {
+      renderResult: { getByText, getByLabelText, findByText },
+    } = renderMultipleChoicePage({
+      questionSet: questionSet.newSwappedChoicesQuestionSet(),
+    })
+
+    fireEvent.click(getByLabelText('Question 1 Choice 1'))
+    fireEvent.click(getByText('Submit'))
+
+    expect(await findByText('Your score: 0/1')).toBeVisible()
+  })
 })
 
 function renderMultipleChoicePage({

From d7f57f17a366da916498ab60a4ac3a792d3a4113 Mon Sep 17 00:00:00 2001
From: Leung Cheng <monewckl@hotmail.com.hk>
Date: Thu, 7 Nov 2024 13:29:23 +0800
Subject: [PATCH 2/3] Fix the bug

---
 src/app/components/quiz.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/components/quiz.tsx b/src/app/components/quiz.tsx
index b8ebd1a..5f55866 100644
--- a/src/app/components/quiz.tsx
+++ b/src/app/components/quiz.tsx
@@ -106,7 +106,7 @@ function MultipleChoiceQuiz({
 
   const calculateScore = () => {
     let score = 0
-    questionSet.questions.forEach((question, questionIndex) => {
+    questionSet.getCurrentPlayQuestions().forEach((question, questionIndex) => {
       if (
         question.mc.correctChoiceIndex ===
         questionToCheckedChoiceMap.get(questionIndex)

From 4e15ddd196c5b517530e62462eff107815802273 Mon Sep 17 00:00:00 2001
From: Leung Cheng <monewckl@hotmail.com.hk>
Date: Thu, 7 Nov 2024 13:43:48 +0800
Subject: [PATCH 3/3] Refactor for not to pass whole questionSet

---
 src/app/components/quiz.tsx | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/app/components/quiz.tsx b/src/app/components/quiz.tsx
index 5f55866..56fa2b6 100644
--- a/src/app/components/quiz.tsx
+++ b/src/app/components/quiz.tsx
@@ -64,7 +64,8 @@ export class MultipleChoiceQuizUIService {
           }
           return (
             <MultipleChoiceQuiz
-              questionSet={questionSet}
+              questionSetName={questionSet.name}
+              questions={questionSet.getCurrentPlayQuestions()}
               onSubmit={() => {
                 this.questionSetRepo.upsertQuestionSet(
                   questionSet.newSwappedChoicesQuestionSet(),
@@ -79,10 +80,12 @@ export class MultipleChoiceQuizUIService {
 }
 
 function MultipleChoiceQuiz({
-  questionSet,
+  questionSetName,
+  questions,
   onSubmit,
 }: {
-  questionSet: QuestionSet
+  questionSetName: string
+  questions: ReadonlyArray<Question>
   onSubmit: () => void
 }) {
   const [score, setScore] = useState<number | null>(null)
@@ -106,7 +109,7 @@ function MultipleChoiceQuiz({
 
   const calculateScore = () => {
     let score = 0
-    questionSet.getCurrentPlayQuestions().forEach((question, questionIndex) => {
+    questions.forEach((question, questionIndex) => {
       if (
         question.mc.correctChoiceIndex ===
         questionToCheckedChoiceMap.get(questionIndex)
@@ -119,8 +122,8 @@ function MultipleChoiceQuiz({
 
   return (
     <div className="p-4">
-      <h1 className="text-xl font-semibold mb-6">{questionSet.name}</h1>
-      {questionSet.getCurrentPlayQuestions().map((question, questionIndex) => (
+      <h1 className="text-xl font-semibold mb-6">{questionSetName}</h1>
+      {questions.map((question, questionIndex) => (
         <QuestionForm
           key={questionIndex}
           question={question}
@@ -143,7 +146,7 @@ function MultipleChoiceQuiz({
       {isSubmitted() && (
         <div className="mt-4">
           <p className="font-bold">
-            Your score: {score}/{questionSet.questions.length}
+            Your score: {score}/{questions.length}
           </p>
         </div>
       )}