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

Removed accordion and updated versions

Browse source
This commit is contained in:
KenChanA 2025-04-23 21:41:06 -04:00
parent b1221f0c56
commit 22dc7a5399
4 changed files with 87 additions and 93 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,7 +1,6 @@
// LiveResults.tsx // LiveResults.tsx
import React, { useState } from 'react'; import React, { useState } from 'react';
import { Accordion } from 'react-bootstrap';
import { Socket } from 'socket.io-client'; import { Socket } from 'socket.io-client';
import { QuestionType } from '../../Types/QuestionType'; import { QuestionType } from '../../Types/QuestionType';
import './liveResult.css'; import './liveResult.css';
@ -26,59 +25,47 @@ interface LiveResultsProps {
const LiveResults: React.FC<LiveResultsProps> = ({ questions, showSelectedQuestion, students }) => { const LiveResults: React.FC<LiveResultsProps> = ({ questions, showSelectedQuestion, students }) => {
const [showUsernames, setShowUsernames] = useState<boolean>(false); const [showUsernames, setShowUsernames] = useState<boolean>(false);
const [showCorrectAnswers, setShowCorrectAnswers] = useState<boolean>(false); const [showCorrectAnswers, setShowCorrectAnswers] = useState<boolean>(false);
const [activeKey, setActiveKey] = useState<string | null>('0');
const toggleAccordion = () => {
setActiveKey(activeKey === '0' ? null : '0');
};
return ( return (
<Accordion activeKey={activeKey} onSelect={toggleAccordion}> <div>
<Accordion.Item eventKey="0"> <div className="action-bar mb-1">
<Accordion.Header> <FormGroup row>
<div className="text-2xl text-bold">{activeKey === '0' ? 'Résultats du quiz' : 'Masquer les résultats'}</div> <FormControlLabel
</Accordion.Header> label={<div className="text-sm">Afficher les noms</div>}
<Accordion.Body> control={
<div className="action-bar mb-1"> <Switch
<FormGroup row> value={showUsernames}
<FormControlLabel onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
label={<div className="text-sm">Afficher les noms</div>} setShowUsernames(e.target.checked)
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> }
</Accordion.Body> />
</Accordion.Item> <FormControlLabel
</Accordion> 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>
); );
}; };

56
client/src/components/QuestionsDisplay/QuestionDisplay.tsx
View file

@ -1,7 +1,6 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import { Question } from 'gift-pegjs'; import { Question } from 'gift-pegjs';
import { Accordion } from 'react-bootstrap';
import { FormControlLabel, Switch } from '@mui/material'; import { FormControlLabel, Switch } from '@mui/material';
import TrueFalseQuestionDisplay from './TrueFalseQuestionDisplay/TrueFalseQuestionDisplay'; import TrueFalseQuestionDisplay from './TrueFalseQuestionDisplay/TrueFalseQuestionDisplay';
@ -37,11 +36,6 @@ const QuestionDisplay: React.FC<QuestionProps> = ({
// }, [isMobile]); // }, [isMobile]);
const [showResults, setShowResults] = useState<boolean>(false); const [showResults, setShowResults] = useState<boolean>(false);
const [activeKey, setActiveKey] = useState<string | null>('0');
const toggleAccordion = () => {
setActiveKey(activeKey === '0' ? null : '0');
};
let questionTypeComponent = null; let questionTypeComponent = null;
switch (question?.type) { switch (question?.type) {
@ -99,38 +93,21 @@ const QuestionDisplay: React.FC<QuestionProps> = ({
} }
return ( return (
<> <>
{showAnswerToggle ? ( {showAnswerToggle && (
<Accordion activeKey={activeKey} onSelect={toggleAccordion}> <FormControlLabel
<Accordion.Item eventKey="0"> label={<div className="text-sm">Afficher les résultats</div>}
<Accordion.Header> control={
{activeKey === '0' ? 'Afficher les questions' : 'Masquer les questions'} <Switch
</Accordion.Header> value={showResults}
<Accordion.Body> onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
<FormControlLabel setShowResults(e.target.checked)
label={<div className="text-sm">Afficher les résultats</div>} }
control={ />
<Switch }
value={showResults} />
onChange={(e: React.ChangeEvent<HTMLInputElement>) => )}
setShowResults(e.target.checked)
} <div className="question-container">
/>
}
/>
<div className="question-container">
{questionTypeComponent ? (
<>
{questionTypeComponent}
</>
) : (
<div>Question de type inconnue</div>
)}
</div>
</Accordion.Body>
</Accordion.Item>
</Accordion>
) : (
<div className="question-container">
{questionTypeComponent ? ( {questionTypeComponent ? (
<> <>
{questionTypeComponent} {questionTypeComponent}
@ -138,8 +115,7 @@ const QuestionDisplay: React.FC<QuestionProps> = ({
) : ( ) : (
<div>Question de type inconnue</div> <div>Question de type inconnue</div>
)} )}
</div> </div>
)}
</> </>
); );
}; };

31
package-lock.json generated
View file

@ -5,7 +5,18 @@
"packages": { "packages": {
"": { "": {
"dependencies": { "dependencies": {
"axios-mock-adapter": "^2.1.0" "@popperjs/core": "^2.11.8",
"axios-mock-adapter": "^2.1.0",
"bootstrap": "^5.3.5"
}
},
"node_modules/@popperjs/core": {
"version": "2.11.8",
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
"integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/popperjs"
} }
}, },
"node_modules/asynckit": { "node_modules/asynckit": {
@ -37,6 +48,24 @@
"axios": ">= 0.17.0" "axios": ">= 0.17.0"
} }
}, },
"node_modules/bootstrap": {
"version": "5.3.5",
"resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.5.tgz",
"integrity": "sha512-ct1CHKtiobRimyGzmsSldEtM03E8fcEX4Tb3dGXz1V8faRwM50+vfHwTzOxB3IlKO7m+9vTH3s/3C6T2EAPeTA==",
"funding": [
{
"type": "github",
"url": "https://github.com/sponsors/twbs"
},
{
"type": "opencollective",
"url": "https://opencollective.com/bootstrap"
}
],
"peerDependencies": {
"@popperjs/core": "^2.11.8"
}
},
"node_modules/call-bind-apply-helpers": { "node_modules/call-bind-apply-helpers": {
"version": "1.0.2", "version": "1.0.2",
"resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz", "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",

4
package.json
View file

@ -1,5 +1,7 @@
{ {
"dependencies": { "dependencies": {
"axios-mock-adapter": "^2.1.0" "@popperjs/core": "^2.11.8",
"axios-mock-adapter": "^2.1.0",
"bootstrap": "^5.3.5"
} }
} }