EvalueTonSavoir/client/src/components/LiveResults/LiveResults.tsx

75 lines
2.6 KiB
TypeScript
Raw Normal View History

2024-03-29 20:08:34 -04:00
// LiveResults.tsx
import React, { useState } from 'react';
2024-03-29 20:08:34 -04:00
import { Socket } from 'socket.io-client';
import { QuestionType } from '../../Types/QuestionType';
import './liveResult.css';
import {
FormControlLabel,
FormGroup,
Switch,
} from '@mui/material';
import { StudentType } from '../../Types/StudentType';
2024-03-29 20:08:34 -04:00
import LiveResultsTable from './LiveResultsTable/LiveResultsTable';
2024-03-29 20:08:34 -04:00
interface LiveResultsProps {
socket: Socket | null;
questions: QuestionType[];
showSelectedQuestion: (index: number) => void;
quizMode: 'teacher' | 'student';
students: StudentType[]
2024-03-29 20:08:34 -04:00
}
const LiveResults: React.FC<LiveResultsProps> = ({ questions, showSelectedQuestion, students }) => {
2024-03-29 20:08:34 -04:00
const [showUsernames, setShowUsernames] = useState<boolean>(false);
const [showCorrectAnswers, setShowCorrectAnswers] = useState<boolean>(false);
return (
2024-03-29 20:08:34 -04:00
<div>
<div className="action-bar mb-1">
<div className="text-2xl text-bold">Résultats du quiz</div>
<FormGroup row>
<FormControlLabel
label={<div className="text-sm">Afficher les noms</div>}
control={
<Switch
value={showUsernames}
onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
setShowUsernames(e.target.checked)
}
/>
}
/>
<FormControlLabel
label={<div className="text-sm">Afficher les réponses</div>}
control={
<Switch
value={showCorrectAnswers}
onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
setShowCorrectAnswers(e.target.checked)
}
/>
}
/>
</FormGroup>
</div>
<div className="table-container">
<LiveResultsTable
students={students}
questions={questions}
showCorrectAnswers={showCorrectAnswers}
showSelectedQuestion={showSelectedQuestion}
showUsernames={showUsernames}
/>
</div>
</div>
2024-03-29 20:08:34 -04:00
);
};
export default LiveResults;