diff --git a/client/src/components/QuestionsDisplay/MultipleChoiceQuestionDisplay/MultipleChoiceQuestionDisplay.tsx b/client/src/components/QuestionsDisplay/MultipleChoiceQuestionDisplay/MultipleChoiceQuestionDisplay.tsx index e5e7b6b..790848f 100644 --- a/client/src/components/QuestionsDisplay/MultipleChoiceQuestionDisplay/MultipleChoiceQuestionDisplay.tsx +++ b/client/src/components/QuestionsDisplay/MultipleChoiceQuestionDisplay/MultipleChoiceQuestionDisplay.tsx @@ -1,5 +1,5 @@ // MultipleChoiceQuestionDisplay.tsx -import React, { useEffect, useState } from 'react'; +import React, { useState } from 'react'; import '../questionStyle.css'; import { Button } from '@mui/material'; import { FormattedTextTemplate } from '../../GiftTemplate/templates/TextTypeTemplate'; @@ -7,22 +7,21 @@ import { MultipleChoiceQuestion } from 'gift-pegjs'; interface Props { question: MultipleChoiceQuestion; - handleOnSubmitAnswer?: (answer: string) => void; + handleOnSubmitAnswer?: (answer: string | number | boolean) => void; showAnswer?: boolean; + passedAnswer?: string | number | boolean; } const MultipleChoiceQuestionDisplay: React.FC = (props) => { - const { question, showAnswer, handleOnSubmitAnswer } = props; - const [answer, setAnswer] = useState(); + const { question, showAnswer, handleOnSubmitAnswer, passedAnswer } = props; + const [answer, setAnswer] = useState(passedAnswer || ''); - useEffect(() => { - setAnswer(undefined); - }, [question]); const handleOnClickAnswer = (choice: string) => { setAnswer(choice); }; + const alpha = Array.from(Array(26)).map((_e, i) => i + 65); const alphabet = alpha.map((x) => String.fromCharCode(x)); return ( @@ -67,9 +66,9 @@ const MultipleChoiceQuestionDisplay: React.FC = (props) => {