Fixed question display during quiz

This commit is contained in:
KenChanA 2025-04-05 23:10:46 -04:00
parent 0f23620513
commit 7abd8b8019
3 changed files with 46 additions and 29 deletions

View file

@ -33,7 +33,7 @@ const LiveResults: React.FC<LiveResultsProps> = ({ questions, showSelectedQuesti
<Accordion defaultActiveKey="0" alwaysOpen> <Accordion defaultActiveKey="0" alwaysOpen>
<Accordion.Item eventKey="0"> <Accordion.Item eventKey="0">
<Accordion.Header onClick={() => setIsOpen(!isOpen)}> <Accordion.Header onClick={() => setIsOpen(!isOpen)}>
<div className="text-2xl text-bold">Résultats du quiz</div> <div className="text-2xl text-bold">{isOpen ? 'Résultats du quiz' : 'Masquer les résultats'}</div>
</Accordion.Header> </Accordion.Header>
<Accordion.Body> <Accordion.Body>
<div className="action-bar mb-1"> <div className="action-bar mb-1">

View file

@ -19,6 +19,7 @@ interface QuestionProps {
showAnswer?: boolean; showAnswer?: boolean;
students?: StudentType[]; students?: StudentType[];
showResults?: boolean; showResults?: boolean;
showAnswerToggle?: boolean;
answer?: AnswerType; answer?: AnswerType;
} }
@ -26,6 +27,7 @@ const QuestionDisplay: React.FC<QuestionProps> = ({
question, question,
handleOnSubmitAnswer, handleOnSubmitAnswer,
showAnswer, showAnswer,
showAnswerToggle = false,
students, students,
answer, answer,
}) => { }) => {
@ -92,35 +94,49 @@ const QuestionDisplay: React.FC<QuestionProps> = ({
break; break;
} }
return ( return (
<Accordion defaultActiveKey="0" alwaysOpen> <>
<Accordion.Item eventKey="0"> {showAnswerToggle ? (
<Accordion.Header onClick={() => setIsOpen(!isOpen)}> <Accordion defaultActiveKey="0" alwaysOpen>
{isOpen ? 'Masquer les questions' : 'Afficher les questions'} <Accordion.Item eventKey="0">
</Accordion.Header> <Accordion.Header onClick={() => setIsOpen(!isOpen)}>
<Accordion.Body> {isOpen ? 'Afficher les questions' : 'Masquer les questions'}
<FormControlLabel </Accordion.Header>
label={<div className="text-sm">Afficher les résultats</div>} <Accordion.Body>
control={ <FormControlLabel
<Switch label={<div className="text-sm">Afficher les résultats</div>}
value={showResults} control={
onChange={(e: React.ChangeEvent<HTMLInputElement>) => <Switch
setShowResults(e.target.checked) value={showResults}
} onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
setShowResults(e.target.checked)
}
/>
}
/> />
} <div className="question-container">
/> {questionTypeComponent ? (
<div className="question-container"> <>
{questionTypeComponent ? ( {questionTypeComponent}
<> </>
{questionTypeComponent} ) : (
</> <div>Question de type inconnue</div>
) : ( )}
<div>Question de type inconnue</div> </div>
)} </Accordion.Body>
</div> </Accordion.Item>
</Accordion.Body> </Accordion>
</Accordion.Item> ) : (
</Accordion> <div className="question-container">
{questionTypeComponent ? (
<>
{questionTypeComponent}
</>
) : (
<div>Question de type inconnue</div>
)}
</div>
)}
</>
); );
}; };

View file

@ -423,6 +423,7 @@ const ManageRoom: React.FC = () => {
{currentQuestion && ( {currentQuestion && (
<QuestionDisplay <QuestionDisplay
showAnswer={false} showAnswer={false}
showAnswerToggle={true}
question={currentQuestion?.question as Question} question={currentQuestion?.question as Question}
students={students} students={students}
/> />