Changed questions display

client/package-lock.json

@@ -19,6 +19,7 @@
                 "@mui/material": "^6.4.6",
                 "@types/uuid": "^9.0.7",
                 "axios": "^1.8.1",
+                "bootstrap": "^5.3.3",
                 "dompurify": "^3.2.3",
                 "esbuild": "^0.25.0",
                 "gift-pegjs": "^2.0.0-beta.1",
@@ -5536,6 +5537,24 @@
             "devOptional": true,
             "license": "MIT"
         },
+        "node_modules/bootstrap": {
+            "version": "5.3.3",
+            "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.3.tgz",
+            "integrity": "sha512-8HLCdWgyoMguSO9o+aH+iuZ+aht+mzW0u3HIMzVu7Srrpv7EBBxTnrFlSCskwdY1+EOFQSm7uMJhNQHkdPcmjg==",
+            "funding": [
+                {
+                    "type": "github",
+                    "url": "https://github.com/sponsors/twbs"
+                },
+                {
+                    "type": "opencollective",
+                    "url": "https://opencollective.com/bootstrap"
+                }
+            ],
+            "peerDependencies": {
+                "@popperjs/core": "^2.11.8"
+            }
+        },
         "node_modules/brace-expansion": {
             "version": "2.0.1",
             "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",

client/package.json

@@ -23,6 +23,7 @@
         "@mui/material": "^6.4.6",
         "@types/uuid": "^9.0.7",
         "axios": "^1.8.1",
+        "bootstrap": "^5.3.3",
         "dompurify": "^3.2.3",
         "esbuild": "^0.25.0",
         "gift-pegjs": "^2.0.0-beta.1",

client/src/components/LiveResults/LiveResultsTable/TableComponents/LiveResultsTableHeader.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import { TableCell, TableHead, TableRow } from "@mui/material";
 
 interface LiveResultsHeaderProps {
@@ -10,6 +10,12 @@ const LiveResultsTableHeader: React.FC<LiveResultsHeaderProps> = ({
     maxQuestions,
     showSelectedQuestion,
 }) => {
+    const [selectedQuestionIndex, setSelectedQuestionIndex] = useState<number | null>(null);
+
+    const handleQuestionClick = (index: number) => {
+        setSelectedQuestionIndex(index);
+        showSelectedQuestion(index);
+    };
 
     return (
         <TableHead>
@@ -25,9 +31,10 @@ const LiveResultsTableHeader: React.FC<LiveResultsHeaderProps> = ({
                             cursor: 'pointer',
                             borderStyle: 'solid',
                             borderWidth: 1,
-                            borderColor: 'rgba(224, 224, 224, 1)'
+                            borderColor: 'rgba(224, 224, 224, 1)',
+                            backgroundColor: selectedQuestionIndex === index ? '#dedede' : 'transparent'
                         }}
-                        onClick={() => showSelectedQuestion(index)}
+                        onClick={() => handleQuestionClick(index)}
                     >
                         <div className="text-base text-bold blue">{`Q${index + 1}`}</div>
                     </TableCell>

client/src/components/QuestionsDisplay/MultipleChoiceQuestionDisplay/MultipleChoiceQuestionDisplay.tsx

@@ -67,7 +67,7 @@ const MultipleChoiceQuestionDisplay: React.FC<Props> = (props) => {
     const alphabet = alpha.map((x) => String.fromCharCode(x));
     return (
 
-        <div className="question-container">
+        <div className="question-container" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
             <div className="question content">
                 <div dangerouslySetInnerHTML={{ __html: FormattedTextTemplate(question.formattedStem) }} />
             </div>
@@ -76,7 +76,7 @@ const MultipleChoiceQuestionDisplay: React.FC<Props> = (props) => {
                 {question.choices.map((choice, i) => {
                     const selected = answer === choice.formattedText.text ? 'selected' : '';
                     const rateStyle = showCorrectAnswers ? {
-                        backgroundImage: `linear-gradient(to right, ${choice.isCorrect ? 'lightgreen' : 'lightcoral'} ${pickRates[i]}%, transparent ${pickRates[i]}%)`,
+                        backgroundImage: `linear-gradient(to right, ${choice.isCorrect ? 'royalblue' : 'orange'} ${pickRates[i]}%, transparent ${pickRates[i]}%)`,
                         color: 'black'
                     } : {};
                     return (
@@ -114,12 +114,7 @@ const MultipleChoiceQuestionDisplay: React.FC<Props> = (props) => {
                                         <div dangerouslySetInnerHTML={{ __html: FormattedTextTemplate(choice.formattedFeedback) }} />
                                     </div>
                                 )}
-                                {showCorrectAnswers && <div>{choice.isCorrect ? '✅' : '❌'}</div>}
+                                {showCorrectAnswers && <div className="pick-rate">{choice.isCorrect ? '✅' : '❌'} {pickRates[i].toFixed(1)}%</div>}
-                                {showCorrectAnswers && (
-                                    <div className="pick-rate">
-                                        {pickRates[i].toFixed(1)}%
-                                    </div>
-                                )}
                             </Button>
                         </div>
                     );

client/src/components/QuestionsDisplay/NumericalQuestionDisplay/NumericalQuestionDisplay.tsx

@@ -26,6 +26,10 @@ const NumericalQuestionDisplay: React.FC<Props> = (props) => {
 
     const [showCorrectAnswers, setShowCorrectAnswers] = useState(false);
     const [correctAnswerRate, setCorrectAnswerRate] = useState<number>(0);
+    const [submissionCounts, setSubmissionCounts] = useState({
+        correctSubmissions: 0,
+        totalSubmissions: 0
+    });
 
     const toggleShowCorrectAnswers = () => {
         setShowCorrectAnswers(!showCorrectAnswers);
@@ -42,7 +46,7 @@ const NumericalQuestionDisplay: React.FC<Props> = (props) => {
 
     const calculateCorrectAnswerRate = () => {
         if (!students || students.length === 0) {
-            setCorrectAnswerRate(0); // Safeguard against undefined or empty student array
+            setSubmissionCounts({ correctSubmissions: 0, totalSubmissions: 0 });
             return;
         }
 
@@ -52,6 +56,12 @@ const NumericalQuestionDisplay: React.FC<Props> = (props) => {
                 ans.idQuestion === Number(question.id) && ans.isCorrect
             )
         ).length;
+        
+        setSubmissionCounts({
+            correctSubmissions,
+            totalSubmissions
+        });
+
         setCorrectAnswerRate((correctSubmissions / totalSubmissions) * 100);
     };
 
@@ -139,7 +149,7 @@ const NumericalQuestionDisplay: React.FC<Props> = (props) => {
                         visibility: showCorrectAnswers ? 'visible' : 'hidden'
                     }}>
                         <div>
-                            Taux de réponse correcte:
+                            Taux de réponse correcte: {submissionCounts.correctSubmissions}/{submissionCounts.totalSubmissions}
                         </div>
                         <div className="progress-bar-container">
                             <div className="progress-bar-fill" style={{ width: `${correctAnswerRate}%` }}></div>

client/src/components/QuestionsDisplay/QuestionDisplay.tsx

@@ -24,7 +24,7 @@ const QuestionDisplay: React.FC<QuestionProps> = ({
     handleOnSubmitAnswer,
     showAnswer,
     students,
-    isDisplayOnly = false
+    isDisplayOnly = false,
     answer,
 }) => {
     // const isMobile = useCheckMobileScreen();

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

@@ -20,6 +20,10 @@ const ShortAnswerQuestionDisplay: React.FC<Props> = (props) => {
     const [answer, setAnswer] = useState<AnswerType>(passedAnswer || '');
     const [showCorrectAnswers, setShowCorrectAnswers] = useState(false);
     const [correctAnswerRate, setCorrectAnswerRate] = useState<number>(0);
+    const [submissionCounts, setSubmissionCounts] = useState({
+        correctSubmissions: 0,
+        totalSubmissions: 0
+    });
 
     const toggleShowCorrectAnswers = () => {
         setShowCorrectAnswers(!showCorrectAnswers);
@@ -39,7 +43,7 @@ const ShortAnswerQuestionDisplay: React.FC<Props> = (props) => {
 
     const calculateCorrectAnswerRate = () => {
         if (!students || students.length === 0) {
-            setCorrectAnswerRate(0); // Safeguard against undefined or empty student array
+            setSubmissionCounts({ correctSubmissions: 0, totalSubmissions: 0 });
             return;
         }
 
@@ -49,12 +53,18 @@ const ShortAnswerQuestionDisplay: React.FC<Props> = (props) => {
                 ans.idQuestion === Number(question.id) && ans.isCorrect
             )
         ).length;
+
+        setSubmissionCounts({
+            correctSubmissions,
+            totalSubmissions
+        });
+
         setCorrectAnswerRate((correctSubmissions / totalSubmissions) * 100);
     };
 
     return (
             <div className="question-wrapper">
-            <div className="question content">
+                <div>
                     <div dangerouslySetInnerHTML={{ __html: FormattedTextTemplate(question.formattedStem) }} />
                 </div>
                 {showAnswer ? (
@@ -122,7 +132,7 @@ const ShortAnswerQuestionDisplay: React.FC<Props> = (props) => {
                         visibility: showCorrectAnswers ? 'visible' : 'hidden'
                     }}>
                         <div>
-                            Taux de réponse correcte:
+                            Taux de réponse correcte: {submissionCounts.correctSubmissions}/{submissionCounts.totalSubmissions}
                         </div>
                         <div className="progress-bar-container">
                             <div className="progress-bar-fill" style={{ width: `${correctAnswerRate}%` }}></div>

client/src/components/QuestionsDisplay/TrueFalseQuestionDisplay/TrueFalseQuestionDisplay.tsx

@@ -32,7 +32,6 @@ const TrueFalseQuestionDisplay: React.FC<Props> = (props) => {
     };
 
     useEffect(() => {
-        console.log("passedAnswer", passedAnswer);
         if (passedAnswer === true || passedAnswer === false) {
             setAnswer(passedAnswer);
         } else {
@@ -96,15 +95,14 @@ const TrueFalseQuestionDisplay: React.FC<Props> = (props) => {
                     <div className={`circle ${selectedTrue}`}>V</div>
                     <div className={`answer-text ${selectedTrue}`}
                         style={showCorrectAnswers ? {
-                            backgroundImage: `linear-gradient(to right, ${question.isTrue ? 'lightgreen' : 'lightcoral'} ${pickRates.trueRate}%, transparent ${pickRates.trueRate}%)`
+                            backgroundImage: `linear-gradient(to right, ${question.isTrue ? 'royalblue' : 'orange'} ${pickRates.trueRate}%, transparent ${pickRates.trueRate}%)`
                         } : {}}
                     >
                         Vrai
                     </div>
                     {showCorrectAnswers && (
                         <>
-                            <div>{question.isTrue ? '✅' : '❌'}</div>
+                            <div className="pick-rate">{question.isTrue ? '✅' : '❌'} {pickRates.trueRate.toFixed(1)}%</div>
-                            <div className="pick-rate">{pickRates.trueRate.toFixed(1)}%</div>
                         </>
                     )}
 
@@ -125,7 +123,7 @@ const TrueFalseQuestionDisplay: React.FC<Props> = (props) => {
                     <div
                         className={`answer-text ${selectedFalse}`}
                         style={showCorrectAnswers ? {
-                            backgroundImage: `linear-gradient(to right, ${!question.isTrue ? 'lightgreen' : 'lightcoral'} ${pickRates.falseRate}%, transparent ${pickRates.falseRate}%)`,
+                            backgroundImage: `linear-gradient(to right, ${!question.isTrue ? 'royalblue' : 'orange'} ${pickRates.falseRate}%, transparent ${pickRates.falseRate}%)`,
                         } : {}}
                     >
                         Faux
@@ -133,8 +131,7 @@ const TrueFalseQuestionDisplay: React.FC<Props> = (props) => {
 
                     {showCorrectAnswers && (
                         <>
-                            <div>{!question.isTrue ? '✅' : '❌'}</div>
+                            <div className="pick-rate">{!question.isTrue ? '✅' : '❌'} {pickRates.falseRate.toFixed(1)}%</div>
-                            <div className="pick-rate">{pickRates.falseRate.toFixed(1)}%</div>
                         </>
                     )}
 

client/src/components/QuestionsDisplay/questionStyle.css

@@ -182,7 +182,7 @@
 
 .progress-bar-fill {
     height: 100%;
-    background-color: lightgreen;
+    background-color: royalblue;
     width: 0%;
     transition: width 0.6s ease;
 }
@@ -196,3 +196,8 @@
     color: Black;
 }
 
+.pick-rate{
+    color: rgba(0,0,0,1);
+    min-width: 70px;
+}
+

client/src/main.tsx

@@ -6,6 +6,7 @@ import { BrowserRouter } from 'react-router-dom';
 
 import { ThemeProvider, createTheme } from '@mui/material';
 import '@fortawesome/fontawesome-free/css/all.min.css';
+import 'bootstrap/dist/css/bootstrap.min.css';
 
 import './cssReset.css';
 import './index.css';