Added accordions for LiveResult and QuestionDisplay

client/package-lock.json

@@ -19,7 +19,7 @@
                 "@mui/material": "^6.4.6",
                 "@types/uuid": "^9.0.7",
                 "axios": "^1.8.1",
-                "bootstrap": "^5.3.3",
+                "bootstrap": "^5.3.4",
                 "dompurify": "^3.2.3",
                 "esbuild": "^0.25.0",
                 "gift-pegjs": "^2.0.0-beta.1",
@@ -29,6 +29,7 @@
                 "marked": "^14.1.2",
                 "nanoid": "^5.1.2",
                 "react": "^18.3.1",
+                "react-bootstrap": "^2.10.9",
                 "react-dom": "^18.3.1",
                 "react-modal": "^3.16.3",
                 "react-router-dom": "^6.26.2",
@@ -3845,6 +3846,20 @@
                 "url": "https://opencollective.com/popperjs"
             }
         },
+        "node_modules/@react-aria/ssr": {
+            "version": "3.9.7",
+            "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.9.7.tgz",
+            "integrity": "sha512-GQygZaGlmYjmYM+tiNBA5C6acmiDWF52Nqd40bBp0Znk4M4hP+LTmI0lpI1BuKMw45T8RIhrAsICIfKwZvi2Gg==",
+            "dependencies": {
+                "@swc/helpers": "^0.5.0"
+            },
+            "engines": {
+                "node": ">= 12"
+            },
+            "peerDependencies": {
+                "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+            }
+        },
         "node_modules/@remix-run/router": {
             "version": "1.23.0",
             "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.23.0.tgz",
@@ -3854,6 +3869,56 @@
                 "node": ">=14.0.0"
             }
         },
+        "node_modules/@restart/hooks": {
+            "version": "0.4.16",
+            "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.4.16.tgz",
+            "integrity": "sha512-f7aCv7c+nU/3mF7NWLtVVr0Ra80RqsO89hO72r+Y/nvQr5+q0UFGkocElTH6MJApvReVh6JHUFYn2cw1WdHF3w==",
+            "dependencies": {
+                "dequal": "^2.0.3"
+            },
+            "peerDependencies": {
+                "react": ">=16.8.0"
+            }
+        },
+        "node_modules/@restart/ui": {
+            "version": "1.9.4",
+            "resolved": "https://registry.npmjs.org/@restart/ui/-/ui-1.9.4.tgz",
+            "integrity": "sha512-N4C7haUc3vn4LTwVUPlkJN8Ach/+yIMvRuTVIhjilNHqegY60SGLrzud6errOMNJwSnmYFnt1J0H/k8FE3A4KA==",
+            "dependencies": {
+                "@babel/runtime": "^7.26.0",
+                "@popperjs/core": "^2.11.8",
+                "@react-aria/ssr": "^3.5.0",
+                "@restart/hooks": "^0.5.0",
+                "@types/warning": "^3.0.3",
+                "dequal": "^2.0.3",
+                "dom-helpers": "^5.2.0",
+                "uncontrollable": "^8.0.4",
+                "warning": "^4.0.3"
+            },
+            "peerDependencies": {
+                "react": ">=16.14.0",
+                "react-dom": ">=16.14.0"
+            }
+        },
+        "node_modules/@restart/ui/node_modules/@restart/hooks": {
+            "version": "0.5.1",
+            "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.5.1.tgz",
+            "integrity": "sha512-EMoH04NHS1pbn07iLTjIjgttuqb7qu4+/EyhAx27MHpoENcB2ZdSsLTNxmKD+WEPnZigo62Qc8zjGnNxoSE/5Q==",
+            "dependencies": {
+                "dequal": "^2.0.3"
+            },
+            "peerDependencies": {
+                "react": ">=16.8.0"
+            }
+        },
+        "node_modules/@restart/ui/node_modules/uncontrollable": {
+            "version": "8.0.4",
+            "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-8.0.4.tgz",
+            "integrity": "sha512-ulRWYWHvscPFc0QQXvyJjY6LIXU56f0h8pQFvhxiKk5V1fcI8gp9Ht9leVAhrVjzqMw0BgjspBINx9r6oyJUvQ==",
+            "peerDependencies": {
+                "react": ">=16.14.0"
+            }
+        },
         "node_modules/@rollup/rollup-android-arm-eabi": {
             "version": "4.34.8",
             "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.34.8.tgz",
@@ -4337,6 +4402,14 @@
             "devOptional": true,
             "license": "Apache-2.0"
         },
+        "node_modules/@swc/helpers": {
+            "version": "0.5.15",
+            "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.15.tgz",
+            "integrity": "sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==",
+            "dependencies": {
+                "tslib": "^2.8.0"
+            }
+        },
         "node_modules/@swc/types": {
             "version": "0.1.19",
             "resolved": "https://registry.npmjs.org/@swc/types/-/types-0.1.19.tgz",
@@ -4756,6 +4829,11 @@
             "integrity": "sha512-jg+97EGIcY9AGHJJRaaPVgetKDsrTgbRjQ5Msgjh/DQKEFl0DtyRr/VCOyD1T2R1MNeWPK/u7JoGhlDZnKBAfA==",
             "license": "MIT"
         },
+        "node_modules/@types/warning": {
+            "version": "3.0.3",
+            "resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.3.tgz",
+            "integrity": "sha512-D1XC7WK8K+zZEveUPY+cf4+kgauk8N4eHr/XIHXGlGYkHLud6hK9lYfZk1ry1TNh798cZUCgb6MqGEG8DkJt6Q=="
+        },
         "node_modules/@types/yargs": {
             "version": "17.0.33",
             "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.33.tgz",
@@ -5538,9 +5616,9 @@
             "license": "MIT"
         },
         "node_modules/bootstrap": {
-            "version": "5.3.3",
+            "version": "5.3.4",
-            "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.3.tgz",
+            "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.4.tgz",
-            "integrity": "sha512-8HLCdWgyoMguSO9o+aH+iuZ+aht+mzW0u3HIMzVu7Srrpv7EBBxTnrFlSCskwdY1+EOFQSm7uMJhNQHkdPcmjg==",
+            "integrity": "sha512-q2oK3ZPDTa5I44FTyY3H76+SDTJREvOBxtX1HNLHcxMni50jMvUtOh+dgFdgpsAHtJ9bfNAWr6d6VezJHJ/7tg==",
             "funding": [
                 {
                     "type": "github",
@@ -5802,6 +5880,11 @@
             "dev": true,
             "license": "MIT"
         },
+        "node_modules/classnames": {
+            "version": "2.5.1",
+            "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
+            "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow=="
+        },
         "node_modules/cliui": {
             "version": "8.0.1",
             "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz",
@@ -7969,6 +8052,14 @@
                 "node": ">= 0.4"
             }
         },
+        "node_modules/invariant": {
+            "version": "2.2.4",
+            "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
+            "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
+            "dependencies": {
+                "loose-envify": "^1.0.0"
+            }
+        },
         "node_modules/is-array-buffer": {
             "version": "3.0.5",
             "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.5.tgz",
@@ -11130,6 +11221,23 @@
                 "react-is": "^16.13.1"
             }
         },
+        "node_modules/prop-types-extra": {
+            "version": "1.1.1",
+            "resolved": "https://registry.npmjs.org/prop-types-extra/-/prop-types-extra-1.1.1.tgz",
+            "integrity": "sha512-59+AHNnHYCdiC+vMwY52WmvP5dM3QLeoumYuEyceQDi9aEhtwN9zIQ2ZNo25sMyXnbh32h+P1ezDsUpUH3JAew==",
+            "dependencies": {
+                "react-is": "^16.3.2",
+                "warning": "^4.0.0"
+            },
+            "peerDependencies": {
+                "react": ">=0.14.0"
+            }
+        },
+        "node_modules/prop-types-extra/node_modules/react-is": {
+            "version": "16.13.1",
+            "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+            "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+        },
         "node_modules/prop-types/node_modules/react-is": {
             "version": "16.13.1",
             "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -11219,6 +11327,36 @@
                 "node": ">=0.10.0"
             }
         },
+        "node_modules/react-bootstrap": {
+            "version": "2.10.9",
+            "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-2.10.9.tgz",
+            "integrity": "sha512-TJUCuHcxdgYpOqeWmRApM/Dy0+hVsxNRFvq2aRFQuxhNi/+ivOxC5OdWIeHS3agxvzJ4Ev4nDw2ZdBl9ymd/JQ==",
+            "dependencies": {
+                "@babel/runtime": "^7.24.7",
+                "@restart/hooks": "^0.4.9",
+                "@restart/ui": "^1.9.4",
+                "@types/prop-types": "^15.7.12",
+                "@types/react-transition-group": "^4.4.6",
+                "classnames": "^2.3.2",
+                "dom-helpers": "^5.2.1",
+                "invariant": "^2.2.4",
+                "prop-types": "^15.8.1",
+                "prop-types-extra": "^1.1.0",
+                "react-transition-group": "^4.4.5",
+                "uncontrollable": "^7.2.1",
+                "warning": "^4.0.3"
+            },
+            "peerDependencies": {
+                "@types/react": ">=16.14.8",
+                "react": ">=16.14.0",
+                "react-dom": ">=16.14.0"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
         "node_modules/react-dom": {
             "version": "18.3.1",
             "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
@@ -12482,6 +12620,11 @@
                 }
             }
         },
+        "node_modules/tslib": {
+            "version": "2.8.1",
+            "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+            "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="
+        },
         "node_modules/type-check": {
             "version": "0.4.0",
             "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
@@ -12650,6 +12793,20 @@
                 "url": "https://github.com/sponsors/ljharb"
             }
         },
+        "node_modules/uncontrollable": {
+            "version": "7.2.1",
+            "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-7.2.1.tgz",
+            "integrity": "sha512-svtcfoTADIB0nT9nltgjujTi7BzVmwjZClOmskKu/E8FW9BXzg9os8OLr4f8Dlnk0rYWJIWr4wv9eKUXiQvQwQ==",
+            "dependencies": {
+                "@babel/runtime": "^7.6.3",
+                "@types/react": ">=16.9.11",
+                "invariant": "^2.2.4",
+                "react-lifecycles-compat": "^3.0.4"
+            },
+            "peerDependencies": {
+                "react": ">=15.0.0"
+            }
+        },
         "node_modules/undici-types": {
             "version": "6.20.0",
             "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.20.0.tgz",

client/package.json

@@ -23,7 +23,7 @@
         "@mui/material": "^6.4.6",
         "@types/uuid": "^9.0.7",
         "axios": "^1.8.1",
-        "bootstrap": "^5.3.3",
+        "bootstrap": "^5.3.4",
         "dompurify": "^3.2.3",
         "esbuild": "^0.25.0",
         "gift-pegjs": "^2.0.0-beta.1",
@@ -33,6 +33,7 @@
         "marked": "^14.1.2",
         "nanoid": "^5.1.2",
         "react": "^18.3.1",
+        "react-bootstrap": "^2.10.9",
         "react-dom": "^18.3.1",
         "react-modal": "^3.16.3",
         "react-router-dom": "^6.26.2",

client/src/components/LiveResults/LiveResults.tsx

@@ -1,5 +1,7 @@
 // LiveResults.tsx
 import React, { useState } from 'react';
+
+import { Accordion } from 'react-bootstrap';
 import { Socket } from 'socket.io-client';
 import { QuestionType } from '../../Types/QuestionType';
 import './liveResult.css';
@@ -24,50 +26,56 @@ interface LiveResultsProps {
 const LiveResults: React.FC<LiveResultsProps> = ({ questions, showSelectedQuestion, students }) => {
     const [showUsernames, setShowUsernames] = useState<boolean>(false);
     const [showCorrectAnswers, setShowCorrectAnswers] = useState<boolean>(false);
+    const [isOpen, setIsOpen] = useState<boolean>(true);
+
 
     return (
+        <Accordion defaultActiveKey="0" alwaysOpen>
+            <Accordion.Item eventKey="0">
+                <Accordion.Header onClick={() => setIsOpen(!isOpen)}>
+                    <div className="text-2xl text-bold">Résultats du quiz</div>
+                </Accordion.Header>
+                <Accordion.Body>
+                        <div className="action-bar mb-1">
+                            <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">
 
-        <div>
+                            <LiveResultsTable
-            <div className="action-bar mb-1">
+                                students={students}
-                <div className="text-2xl text-bold">Résultats du quiz</div>
+                                questions={questions}
-                <FormGroup row>
+                                showCorrectAnswers={showCorrectAnswers}
-                    <FormControlLabel
+                                showSelectedQuestion={showSelectedQuestion}
-                        label={<div className="text-sm">Afficher les noms</div>}
+                                showUsernames={showUsernames}
-                        control={
-                            <Switch
-                                value={showUsernames}
-                                onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-                                    setShowUsernames(e.target.checked)
-                                }
                             />
-                        }
+                        </div>
-                    />
+                </Accordion.Body>
-                    <FormControlLabel
+            </Accordion.Item>
-                        label={<div className="text-sm">Afficher les réponses</div>}
+        </Accordion>
-                        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>
     );
 };
 

client/src/components/QuestionsDisplay/QuestionDisplay.tsx

@@ -1,6 +1,9 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Question } from 'gift-pegjs';
 
+import { Accordion } from 'react-bootstrap';
+import { FormControlLabel, Switch } from '@mui/material';
+
 import TrueFalseQuestionDisplay from './TrueFalseQuestionDisplay/TrueFalseQuestionDisplay';
 import MultipleChoiceQuestionDisplay from './MultipleChoiceQuestionDisplay/MultipleChoiceQuestionDisplay';
 import NumericalQuestionDisplay from './NumericalQuestionDisplay/NumericalQuestionDisplay';
@@ -24,7 +27,6 @@ const QuestionDisplay: React.FC<QuestionProps> = ({
     handleOnSubmitAnswer,
     showAnswer,
     students,
-    showResults,
     answer,
 }) => {
     // const isMobile = useCheckMobileScreen();
@@ -32,6 +34,9 @@ const QuestionDisplay: React.FC<QuestionProps> = ({
     //     return isMobile ? '100%' : '20%';
     // }, [isMobile]);
     
+    const [isOpen, setIsOpen] = useState<boolean>(true);
+    const [showResults, setShowResults] = useState<boolean>(false);
+
     let questionTypeComponent = null;
     switch (question?.type) {
         case 'TF':
@@ -87,15 +92,35 @@ const QuestionDisplay: React.FC<QuestionProps> = ({
             break;
     }
     return (
-        <div className="question-container">
+        <Accordion defaultActiveKey="0" alwaysOpen>
-            {questionTypeComponent ? (
+            <Accordion.Item eventKey="0">
-                <>
+                <Accordion.Header onClick={() => setIsOpen(!isOpen)}>
-                    {questionTypeComponent}
+                    {isOpen ? 'Masquer les questions' : 'Afficher les questions'}
-                </>
+                </Accordion.Header>
-            ) : (
+                <Accordion.Body>
-                <div>Question de type inconnue</div>
+                    <FormControlLabel
-            )}
+                    label={<div className="text-sm">Afficher les résultats</div>}
-        </div>
+                    control={
+                        <Switch
+                            value={showResults}
+                            onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                                setShowResults(e.target.checked)
+                            }
+                            />
+                        }
+                    />
+                    <div className="question-container">
+                        {questionTypeComponent ? (
+                            <>
+                                {questionTypeComponent}
+                            </>
+                        ) : (
+                            <div>Question de type inconnue</div>
+                        )}
+                    </div>
+                </Accordion.Body>
+            </Accordion.Item>
+        </Accordion>
     );
 };
 

client/src/components/QuestionsDisplay/ShortAnswerQuestionDisplay/ShortAnswerQuestionDisplay.tsx

@@ -101,7 +101,7 @@ const ShortAnswerQuestionDisplay: React.FC<Props> = (props) => {
                                     />
                                 </div>
                                 {handleOnSubmitAnswer && (
-                                    <div className="">
+                                    <div className="col-auto d-flex flex-column align-items-center">
                                         <Button
                                             variant="contained"
                                             onClick={() =>

client/src/pages/Teacher/ManageRoom/ManageRoom.tsx

@@ -18,7 +18,7 @@ import DisconnectButton from 'src/components/DisconnectButton/DisconnectButton';
 import QuestionDisplay from 'src/components/QuestionsDisplay/QuestionDisplay';
 import ApiService from '../../../services/ApiService';
 import { QuestionType } from 'src/Types/QuestionType';
-import { Button, FormControlLabel, Switch } from '@mui/material';
+import { Button } from '@mui/material';
 import { checkIfIsCorrect } from './useRooms';
 
 const ManageRoom: React.FC = () => {
@@ -34,7 +34,6 @@ const ManageRoom: React.FC = () => {
     const [quizStarted, setQuizStarted] = useState<boolean>(false);
     const [formattedRoomName, setFormattedRoomName] = useState("");
     const [newlyConnectedUser, setNewlyConnectedUser] = useState<StudentType | null>(null);
-    const [showResults, setShowResults] = useState<boolean>(false);
 
     // Handle the newly connected user in useEffect, because it needs state info 
     // not available in the socket.on() callback
@@ -408,17 +407,6 @@ const ManageRoom: React.FC = () => {
                                 {quizQuestions?.length}
                             </strong>
                         )}
-                        <FormControlLabel
-                        label={<div className="text-sm">Afficher les résultats</div>}
-                        control={
-                            <Switch
-                                value={showResults}
-                                onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-                                    setShowResults(e.target.checked)
-                                }
-                                />
-                            }
-                        />
                         {quizMode === 'teacher' && (
                             <div className="mb-1">
                                 {/* <QuestionNavigation
@@ -437,7 +425,6 @@ const ManageRoom: React.FC = () => {
                                         showAnswer={false}
                                         question={currentQuestion?.question as Question}
                                         students={students}
-                                        showResults={showResults}
                                     />
                                 )}