feat: added FE implementation for multiple quiz type

frontend/src/api.ts

@@ -10,3 +10,13 @@ export const getQuestion = async (questionId: number) =>
 
 export const isAnswerCorrect = async (questionId: number, answerIdx: number) =>
     await fetchJson<boolean>(`/api/quiz-question/${questionId}/answer/${answerIdx}`)
+
+export const isMultipleAnswersCorrect = async (questionId: number, answersList: number[]) => {
+    return await fetchJson<boolean>(`/api/quiz-question/${questionId}/answer`, {
+        method: 'POST',
+        body: JSON.stringify(answersList),
+        headers: {
+            'Content-Type': 'application/json',
+        },
+    })
+}

frontend/src/quiz.tsx

@@ -6,15 +6,19 @@ import { useParams } from '@solidjs/router'
 import type { QuizQuestion } from 'model/quiz-question.ts'
 import * as api from 'api.ts'
 import { preventDefault } from 'helpers.ts'
+import { transformObjectToArray } from './utils/transformObjectToArray.ts'
 
 const Feedback = (correct: boolean) => <p class="feedback">{correct ? 'Correct!' : 'Incorrect!'}</p>
 
 const Question = ({ id, question, answers, quizType }: QuizQuestion) => {
     const [selectedAnswer, setSelectedAnswer] = createSignal<number | null>(null)
+    const [selectedAnswers, setSelectedAnswers] = createSignal<{ [key: string]: boolean } | Record<string, boolean>>({})
     const [isAnswerCorrect, setIsAnswerCorrect] = createSignal(false)
 
     const [submitted, setSubmitted] = createSignal(false)
 
+    const isMultiple = quizType === 'MULTIPLE'
+
     const submit = preventDefault(async () => {
         const selectedAnswerIdx = selectedAnswer()
         if (selectedAnswerIdx === null) return
@@ -24,20 +28,40 @@ const Question = ({ id, question, answers, quizType }: QuizQuestion) => {
         })
     })
 
+    const submitMultiple = preventDefault(async () => {
+        if (Object.keys(selectedAnswers()).length === 0) return
+
+        const payload = transformObjectToArray(selectedAnswers())
+
+        api.isMultipleAnswersCorrect(id, payload).then(isCorrect => {
+            setSubmitted(true)
+            setIsAnswerCorrect(isCorrect)
+        })
+    })
+
     const selectAnswer = (answerIdx: number) => () => setSelectedAnswer(answerIdx)
 
+    const handleCheckboxChange = (event: InputEvent) => {
+        const { name, checked } = event.target as HTMLInputElement
+        setSelectedAnswers(prevState => ({
+            ...prevState,
+            [name]: checked,
+        }))
+    }
+
     const Answer = (answer: string, idx: Accessor<number>) => {
-        const answerId = `answer-${idx()}`
+        const answerId: string = `answer-${idx()}`
 
-        if (quizType === 'MULTIPLE') {
+        if (isMultiple) {
             return (
                 <li>
                     <input
                         type={'checkbox'}
-                        name={'answer'}
+                        name={`${idx()}`}
                         id={answerId}
                         value={answer}
-                        onClick={selectAnswer(idx())}
+                        checked={selectedAnswers()?.[idx()]}
+                        onInput={handleCheckboxChange}
                     />
                     <label for={answerId}>{answer}</label>
                 </li>
@@ -53,7 +77,7 @@ const Question = ({ id, question, answers, quizType }: QuizQuestion) => {
     }
 
     return (
-        <form onSubmit={submit}>
+        <form onSubmit={isMultiple ? submitMultiple : submit}>
             <h1>{question}</h1>
             <ul>
                 <For each={answers} children={Answer} />

frontend/src/utils/transformObjectToArray.ts

@@ -0,0 +1,5 @@
+export function transformObjectToArray(obj: Record<number, boolean>): number[] {
+    return Object.keys(obj)
+        .filter(key => obj[+key]) // Filter keys where the value is true
+        .map(Number) // Convert keys from string to number
+}