diff --git a/client/src/components/LiveResults/LiveResults.tsx b/client/src/components/LiveResults/LiveResults.tsx index 6bcd7ce..4731aa8 100644 --- a/client/src/components/LiveResults/LiveResults.tsx +++ b/client/src/components/LiveResults/LiveResults.tsx @@ -7,6 +7,7 @@ import { QuestionType } from '../../Types/QuestionType'; import './liveResult.css'; import { + Button, FormControlLabel, FormGroup, Paper, @@ -45,6 +46,36 @@ interface LiveResultsProps { const LiveResults: React.FC = ({ questions, showSelectedQuestion, students }) => { const [showUsernames, setShowUsernames] = useState(false); const [showCorrectAnswers, setShowCorrectAnswers] = useState(false); + const [showFullAnswer, setShowFullAnswer] = useState(false); + const [selectedAnswer, setSelectedAnswer] = useState(''); + + const handleShowAnswer = (answer: string) => { + setSelectedAnswer(answer); + setShowFullAnswer(true); + }; + + const renderAnswerCell = (answer: string) => { + if (!answer) return null; + const shortAnswer = answer.length > 20 ? answer.slice(0, 20) : answer; + + return ( + <> + {shortAnswer} + {answer.length > 20 && ( + + )} + + ); + }; // const [students, setStudents] = useState(initialStudents); // const [studentResultsMap, setStudentResultsMap] = useState>(new Map()); @@ -265,6 +296,8 @@ const LiveResults: React.FC = ({ questions, showSelectedQuesti // } return ( + +
Résultats du quiz
@@ -304,6 +337,7 @@ const LiveResults: React.FC = ({ questions, showSelectedQuesti {Array.from({ length: maxQuestions }, (_, index) => ( = ({ questions, showSelectedQuesti ); const answerText = answer ? answer.answer.toString() : ''; const isCorrect = answer ? answer.isCorrect : false; - return ( = ({ questions, showSelectedQuesti } > {showCorrectAnswers ? ( -
{formatLatex(answerText)}
+
{renderAnswerCell(formatLatex(answerText))}
) : isCorrect ? ( ) : ( @@ -435,7 +469,60 @@ const LiveResults: React.FC = ({ questions, showSelectedQuesti -
+
+ {showFullAnswer && ( +
setShowFullAnswer(false)} + style={{ + position: 'fixed', + top: 0, + left: 0, + right: 0, + bottom: 0, + background: 'rgba(0,0,0,0.3)', + zIndex: 9999,}}> + e.stopPropagation()} + style={{ + position: 'fixed', + top: '50%', + left: '50%', + transform: 'translate(-50%, -50%)', + border: 'none', + padding: '1rem', + background: '#fff', + boxShadow: '0 2px 10px rgba(0, 0, 0, 0.3)', + minWidth: '300px', + minHeight: '200px', + }} + > +
+

{selectedAnswer}

+ +
+
+
+)} ); };