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

Quick fix accordion header

Browse source
This commit is contained in:
KenChanA 2025-04-23 16:16:50 -04:00
parent 4ee0fd5b17
commit 377c363522
2 changed files with 14 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -26,14 +26,16 @@ 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 [isOpen, setIsOpen] = useState<boolean>(true); const [activeKey, setActiveKey] = useState<string | null>('0');
const toggleAccordion = () => {
setActiveKey(activeKey === '0' ? null : '0');
return ( return (
<Accordion defaultActiveKey="0" alwaysOpen> <Accordion activeKey={activeKey} onSelect={toggleAccordion}>
<Accordion.Item eventKey="0"> <Accordion.Item eventKey="0">
<Accordion.Header onClick={() => setIsOpen(!isOpen)}> <Accordion.Header>
<div className="text-2xl text-bold">{isOpen ? 'Résultats du quiz' : 'Masquer les résultats'}</div> <div className="text-2xl text-bold">{activeKey === '0' ? '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">

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

@ -36,8 +36,12 @@ const QuestionDisplay: React.FC<QuestionProps> = ({
// return isMobile ? '100%' : '20%'; // return isMobile ? '100%' : '20%';
// }, [isMobile]); // }, [isMobile]);
const [isOpen, setIsOpen] = useState<boolean>(true);
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) {
@ -96,10 +100,10 @@ const QuestionDisplay: React.FC<QuestionProps> = ({
return ( return (
<> <>
{showAnswerToggle ? ( {showAnswerToggle ? (
<Accordion defaultActiveKey="0" alwaysOpen> <Accordion activeKey={activeKey} onSelect={toggleAccordion}>
<Accordion.Item eventKey="0"> <Accordion.Item eventKey="0">
<Accordion.Header onClick={() => setIsOpen(!isOpen)}> <Accordion.Header>
{isOpen ? 'Afficher les questions' : 'Masquer les questions'} {activeKey === '0' ? 'Afficher les questions' : 'Masquer les questions'}
</Accordion.Header> </Accordion.Header>
<Accordion.Body> <Accordion.Body>
<FormControlLabel <FormControlLabel