gmatte/EvalueTonSavoir
1
0
Fork 0
mirror of https://github.com/ets-cfuhrman-pfe/EvalueTonSavoir.git synced 2025-08-11 21:23:54 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Affichage du tableau AVEC réponses longue devrait être adaptés

Browse source 
Fixes #228
This commit is contained in:
JubaAzul 2025-02-05 11:50:42 -05:00
parent cb069bebeb
commit 99f4f5c7c3
1 changed files with 90 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

93
client/src/components/LiveResults/LiveResults.tsx
View file

@ -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<LiveResultsProps> = ({ questions, showSelectedQuestion, students }) => {
const [showUsernames, setShowUsernames] = useState<boolean>(false);
const [showCorrectAnswers, setShowCorrectAnswers] = useState<boolean>(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 (
<>
<span>{shortAnswer}</span>
{answer.length > 20 && (
<button onClick={() => handleShowAnswer(answer)}
style={{
backgroundColor: '#D3D3D3', // Darker background color
color: '#fff',
border: 'none',
borderRadius: '4px',
padding: '0.1rem 0.4rem',
cursor: 'pointer',
marginLeft: '0.5rem'
}}>...</button>
)}
</>
);
};
// const [students, setStudents] = useState<StudentType[]>(initialStudents);
// const [studentResultsMap, setStudentResultsMap] = useState<Map<string, StudentResult>>(new Map());
@ -265,6 +296,8 @@ const LiveResults: React.FC<LiveResultsProps> = ({ questions, showSelectedQuesti
// }
return (
<div>
<div className="action-bar mb-1">
<div className="text-2xl text-bold">Résultats du quiz</div>
@ -304,6 +337,7 @@ const LiveResults: React.FC<LiveResultsProps> = ({ questions, showSelectedQuesti
</TableCell>
{Array.from({ length: maxQuestions }, (_, index) => (
<TableCell
key={index}
sx={{
textAlign: 'center',
@ -351,9 +385,9 @@ const LiveResults: React.FC<LiveResultsProps> = ({ questions, showSelectedQuesti
);
const answerText = answer ? answer.answer.toString() : '';
const isCorrect = answer ? answer.isCorrect : false;
return (
<TableCell
style={{ maxWidth: '65px'}}
key={index}
sx={{
textAlign: 'center',
@ -370,7 +404,7 @@ const LiveResults: React.FC<LiveResultsProps> = ({ questions, showSelectedQuesti
}
>
{showCorrectAnswers ? (
<div>{formatLatex(answerText)}</div>
<div>{renderAnswerCell(formatLatex(answerText))}</div>
) : isCorrect ? (
<FontAwesomeIcon icon={faCheck} />
) : (
@ -435,7 +469,60 @@ const LiveResults: React.FC<LiveResultsProps> = ({ questions, showSelectedQuesti
</TableFooter>
</Table>
</TableContainer>
</div>
</div>
{showFullAnswer && (
<div
onClick={() => setShowFullAnswer(false)}
style={{
position: 'fixed',
top: 0,
left: 0,
right: 0,
bottom: 0,
background: 'rgba(0,0,0,0.3)',
zIndex: 9999,}}>
<dialog
open
onClick={(e) => 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',
}}
>
<div
style={{
display: 'flex',
flexDirection: 'column',
gap: '1rem',
maxWidth: '600px',
wordWrap: 'break-word',
}}
>
<p style={{ margin: 0 }}>{selectedAnswer}</p>
<Button
variant="contained"
color="primary"
onClick={() => setShowFullAnswer(false)}
sx={{
position: 'absolute',
bottom: '1rem',
right: '1rem',
}}
>
Fermer
</Button>
</div>
</dialog>
</div>
)}
</div>
);
};