Changed output of questions on EditQuiz page

src/components/question/Question.styles.ts

@@ -1,4 +1,5 @@
 import palette from '~/styles/app-theme/app.pallete'
+import { theme } from '~/styles/app-theme/custom-mui.styles'
 import { TypographyVariantEnum } from '~/types'
 
 const actionIconWrapper = {
@@ -78,6 +79,15 @@ export const styles = {
     justifyContent: 'space-between',
     alignItems: 'center'
   },
+  openAnswer: {
+    padding: theme.spacing(1, 0)
+  },
+  singleAnswer: {
+    padding: '9px 0px 9px 0px'
+  },
+  singleAnswers: {
+    ml: theme.spacing(3)
+  },
   moreIcon: {
     fontSize: '20px'
   },

src/components/question/Question.tsx

@@ -1,4 +1,3 @@
-import { Dispatch, FC, SetStateAction } from 'react'
 import { useTranslation } from 'react-i18next'
 import { MenuItem, SxProps } from '@mui/material'
 import Box from '@mui/material/Box'
@@ -17,31 +16,37 @@ import IconTitleDescription from '~/components/icon-title-description/IconTitleD
 import AppChip from '~/components/app-chip/AppChip'
 import DragHandle from '~/components/drag-handle/DragHandle'
 import { IconButton } from '~/design-system/components/icon-button/IconButton'
+import RadioButton from '~/design-system/components/radio-button/RadioButton'
 
 import {
   ColorEnum,
   Question as QuestionInterface,
+  QuestionTypesEnum,
   TableActionFunc
 } from '~/types'
 import { styles } from '~/components/question/Question.styles'
 import { spliceSx } from '~/utils/helper-functions'
+import { determineQuestionType } from '~/components/question-editor/QuestionEditor.constants'
 
 interface QuestionProps {
   question: QuestionInterface
-  setQuestions: Dispatch<SetStateAction<QuestionInterface[]>>
-  setEditableItemId: Dispatch<SetStateAction<string>>
+  setQuestions: React.Dispatch<React.SetStateAction<QuestionInterface[]>>
+  setEditableItemId: React.Dispatch<React.SetStateAction<string>>
+  type?: QuestionTypesEnum
   sx?: SxProps
 }
 
-const Question: FC<QuestionProps> = ({
+const Question: React.FC<QuestionProps> = ({
   question,
   setQuestions,
   setEditableItemId,
+  type = QuestionTypesEnum.MultipleChoice,
   sx = {}
 }) => {
   const { t } = useTranslation()
   const { openMenu, renderMenu, closeMenu } = useMenu()
-
+  const { isMultipleChoice, isSingleChoice, isOpenAnswer } =
+    determineQuestionType(type)
   const onAction = async (actionFunc: TableActionFunc) => {
     closeMenu()
     await actionFunc(question._id)
@@ -83,15 +88,24 @@ const Question: FC<QuestionProps> = ({
   ))
 
   const answersList = question.answers.map((answer) => (
-    <Box key={answer.text} sx={styles.answer}>
+    <Box
+      key={answer.text}
+      sx={[styles.answer, isSingleChoice && styles.singleAnswer]}
+    >
       <FormControlLabel
         checked={answer.isCorrect}
-        control={<Checkbox />}
+        control={isMultipleChoice ? <Checkbox /> : <RadioButton label='' />}
         label={answer.text}
       />
       {answer.isCorrect && <CheckIcon sx={styles.checkIcon} />}
     </Box>
   ))
+  const openAnswersList = question.answers.map((answer) => (
+    <Box key={answer.text} sx={spliceSx(styles.answer, styles.openAnswer)}>
+      <Typography>{answer.text}</Typography>
+      {answer.isCorrect && <CheckIcon sx={styles.checkIcon} />}
+    </Box>
+  ))
 
   return (
     <Box sx={spliceSx(styles.root, sx)}>
@@ -124,7 +138,15 @@ const Question: FC<QuestionProps> = ({
       <Divider sx={styles.divider} />
       <Box sx={styles.questionBody}>
         <Typography sx={styles.questionText}>{question.text}</Typography>
-        <Box sx={styles.answers}>{answersList}</Box>
+        <Box
+          sx={spliceSx(
+            styles.answers,
+            isSingleChoice ? styles.singleAnswers : undefined
+          )}
+        >
+          {!isOpenAnswer && answersList}
+          {isOpenAnswer && openAnswersList}
+        </Box>
       </Box>
     </Box>
   )

src/containers/questions-list/QuestionsList.tsx

@@ -48,6 +48,7 @@ const QuestionsList: FC<QuestionsListProps> = ({ items, setItems }) => {
           question={item}
           setEditableItemId={setEditableItemId}
           setQuestions={setItems}
+          type={item.type}
         />
       )
 

tests/unit/components/question/Question.spec.jsx

@@ -72,4 +72,16 @@ describe('Question', () => {
 
     expect(setQuestionsMock).toHaveBeenCalled()
   })
+  it('should check correct answer checkbox', () => {
+    const correctAnswer = mockedQuestion.answers.find((a) => a.isCorrect)
+    const checkbox = screen.getByLabelText(correctAnswer.text)
+
+    expect(checkbox).toBeChecked()
+  })
+  it('should not check incorrect answer checkbox', () => {
+    const incorrectAnswer = mockedQuestion.answers.find((a) => !a.isCorrect)
+    const checkbox = screen.getByLabelText(incorrectAnswer.text)
+
+    expect(checkbox).not.toBeChecked()
+  })
 })