diff --git a/client/package-lock.json b/client/package-lock.json index e2c6890..a5e49d7 100644 --- a/client/package-lock.json +++ b/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", diff --git a/client/package.json b/client/package.json index b6d62e4..a09f051 100644 --- a/client/package.json +++ b/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", diff --git a/client/src/components/LiveResults/LiveResultsTable/TableComponents/LiveResultsTableHeader.tsx b/client/src/components/LiveResults/LiveResultsTable/TableComponents/LiveResultsTableHeader.tsx index d8d4159..732dd13 100644 --- a/client/src/components/LiveResults/LiveResultsTable/TableComponents/LiveResultsTableHeader.tsx +++ b/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 = ({ maxQuestions, showSelectedQuestion, }) => { + const [selectedQuestionIndex, setSelectedQuestionIndex] = useState(null); + + const handleQuestionClick = (index: number) => { + setSelectedQuestionIndex(index); + showSelectedQuestion(index); + }; return ( @@ -25,9 +31,10 @@ const LiveResultsTableHeader: React.FC = ({ 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)} >
{`Q${index + 1}`}
diff --git a/client/src/components/QuestionsDisplay/MultipleChoiceQuestionDisplay/MultipleChoiceQuestionDisplay.tsx b/client/src/components/QuestionsDisplay/MultipleChoiceQuestionDisplay/MultipleChoiceQuestionDisplay.tsx index a34d244..6b37089 100644 --- a/client/src/components/QuestionsDisplay/MultipleChoiceQuestionDisplay/MultipleChoiceQuestionDisplay.tsx +++ b/client/src/components/QuestionsDisplay/MultipleChoiceQuestionDisplay/MultipleChoiceQuestionDisplay.tsx @@ -67,7 +67,7 @@ const MultipleChoiceQuestionDisplay: React.FC = (props) => { const alphabet = alpha.map((x) => String.fromCharCode(x)); return ( -
+
@@ -76,7 +76,7 @@ const MultipleChoiceQuestionDisplay: React.FC = (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) => {
)} - {showCorrectAnswers &&
{choice.isCorrect ? '✅' : '❌'}
} - {showCorrectAnswers && ( -
- {pickRates[i].toFixed(1)}% -
- )} + {showCorrectAnswers &&
{choice.isCorrect ? '✅' : '❌'} {pickRates[i].toFixed(1)}%
}
); diff --git a/client/src/components/QuestionsDisplay/NumericalQuestionDisplay/NumericalQuestionDisplay.tsx b/client/src/components/QuestionsDisplay/NumericalQuestionDisplay/NumericalQuestionDisplay.tsx index bd7b19e..959d561 100644 --- a/client/src/components/QuestionsDisplay/NumericalQuestionDisplay/NumericalQuestionDisplay.tsx +++ b/client/src/components/QuestionsDisplay/NumericalQuestionDisplay/NumericalQuestionDisplay.tsx @@ -26,6 +26,10 @@ const NumericalQuestionDisplay: React.FC = (props) => { const [showCorrectAnswers, setShowCorrectAnswers] = useState(false); const [correctAnswerRate, setCorrectAnswerRate] = useState(0); + const [submissionCounts, setSubmissionCounts] = useState({ + correctSubmissions: 0, + totalSubmissions: 0 + }); const toggleShowCorrectAnswers = () => { setShowCorrectAnswers(!showCorrectAnswers); @@ -42,7 +46,7 @@ const NumericalQuestionDisplay: React.FC = (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) => { ans.idQuestion === Number(question.id) && ans.isCorrect ) ).length; + + setSubmissionCounts({ + correctSubmissions, + totalSubmissions + }); + setCorrectAnswerRate((correctSubmissions / totalSubmissions) * 100); }; @@ -139,7 +149,7 @@ const NumericalQuestionDisplay: React.FC = (props) => { visibility: showCorrectAnswers ? 'visible' : 'hidden' }}>
- Taux de réponse correcte: + Taux de réponse correcte: {submissionCounts.correctSubmissions}/{submissionCounts.totalSubmissions}
diff --git a/client/src/components/QuestionsDisplay/QuestionDisplay.tsx b/client/src/components/QuestionsDisplay/QuestionDisplay.tsx index 6036124..8ace5fd 100644 --- a/client/src/components/QuestionsDisplay/QuestionDisplay.tsx +++ b/client/src/components/QuestionsDisplay/QuestionDisplay.tsx @@ -24,7 +24,7 @@ const QuestionDisplay: React.FC = ({ handleOnSubmitAnswer, showAnswer, students, - isDisplayOnly = false + isDisplayOnly = false, answer, }) => { // const isMobile = useCheckMobileScreen(); diff --git a/client/src/components/QuestionsDisplay/ShortAnswerQuestionDisplay/ShortAnswerQuestionDisplay.tsx b/client/src/components/QuestionsDisplay/ShortAnswerQuestionDisplay/ShortAnswerQuestionDisplay.tsx index 7d5b091..044ffbf 100644 --- a/client/src/components/QuestionsDisplay/ShortAnswerQuestionDisplay/ShortAnswerQuestionDisplay.tsx +++ b/client/src/components/QuestionsDisplay/ShortAnswerQuestionDisplay/ShortAnswerQuestionDisplay.tsx @@ -20,6 +20,10 @@ const ShortAnswerQuestionDisplay: React.FC = (props) => { const [answer, setAnswer] = useState(passedAnswer || ''); const [showCorrectAnswers, setShowCorrectAnswers] = useState(false); const [correctAnswerRate, setCorrectAnswerRate] = useState(0); + const [submissionCounts, setSubmissionCounts] = useState({ + correctSubmissions: 0, + totalSubmissions: 0 + }); const toggleShowCorrectAnswers = () => { setShowCorrectAnswers(!showCorrectAnswers); @@ -39,7 +43,7 @@ const ShortAnswerQuestionDisplay: React.FC = (props) => { const calculateCorrectAnswerRate = () => { if (!students || students.length === 0) { - setCorrectAnswerRate(0); // Safeguard against undefined or empty student array + setSubmissionCounts({ correctSubmissions: 0, totalSubmissions: 0 }); return; } @@ -49,63 +53,69 @@ const ShortAnswerQuestionDisplay: React.FC = (props) => { ans.idQuestion === Number(question.id) && ans.isCorrect ) ).length; + + setSubmissionCounts({ + correctSubmissions, + totalSubmissions + }); + setCorrectAnswerRate((correctSubmissions / totalSubmissions) * 100); }; return ( -
-
-
-
- {showAnswer ? ( - <> -
- - La bonne réponse est: - - {question.choices.map((choice) => ( -
- {choice.text} -
- ))} - - - Votre réponse est: {answer} - -
- {question.formattedGlobalFeedback &&
-
-
} - - ) : ( - <> -
- { - setAnswer(e.target.value); - }} - disabled={showAnswer} - aria-label="short-answer-input" - /> -
- {handleOnSubmitAnswer && ( - - )} - - )} +
+
+
+
+ {showAnswer ? ( + <> +
+ + La bonne réponse est: + + {question.choices.map((choice) => ( +
+ {choice.text} +
+ ))} + + + Votre réponse est: {answer} + +
+ {question.formattedGlobalFeedback &&
+
+
} + + ) : ( + <> +
+ { + setAnswer(e.target.value); + }} + disabled={showAnswer} + aria-label="short-answer-input" + /> +
+ {handleOnSubmitAnswer && ( + + )} + + )} {isDisplayOnly && ( <> @@ -122,7 +132,7 @@ const ShortAnswerQuestionDisplay: React.FC = (props) => { visibility: showCorrectAnswers ? 'visible' : 'hidden' }}>
- Taux de réponse correcte: + Taux de réponse correcte: {submissionCounts.correctSubmissions}/{submissionCounts.totalSubmissions}
diff --git a/client/src/components/QuestionsDisplay/TrueFalseQuestionDisplay/TrueFalseQuestionDisplay.tsx b/client/src/components/QuestionsDisplay/TrueFalseQuestionDisplay/TrueFalseQuestionDisplay.tsx index 6e2d1ef..62f41b4 100644 --- a/client/src/components/QuestionsDisplay/TrueFalseQuestionDisplay/TrueFalseQuestionDisplay.tsx +++ b/client/src/components/QuestionsDisplay/TrueFalseQuestionDisplay/TrueFalseQuestionDisplay.tsx @@ -32,7 +32,6 @@ const TrueFalseQuestionDisplay: React.FC = (props) => { }; useEffect(() => { - console.log("passedAnswer", passedAnswer); if (passedAnswer === true || passedAnswer === false) { setAnswer(passedAnswer); } else { @@ -96,15 +95,14 @@ const TrueFalseQuestionDisplay: React.FC = (props) => {
V
Vrai
{showCorrectAnswers && ( <> -
{question.isTrue ? '✅' : '❌'}
-
{pickRates.trueRate.toFixed(1)}%
+
{question.isTrue ? '✅' : '❌'} {pickRates.trueRate.toFixed(1)}%
)} @@ -125,7 +123,7 @@ const TrueFalseQuestionDisplay: React.FC = (props) => {
Faux @@ -133,8 +131,7 @@ const TrueFalseQuestionDisplay: React.FC = (props) => { {showCorrectAnswers && ( <> -
{!question.isTrue ? '✅' : '❌'}
-
{pickRates.falseRate.toFixed(1)}%
+
{!question.isTrue ? '✅' : '❌'} {pickRates.falseRate.toFixed(1)}%
)} diff --git a/client/src/components/QuestionsDisplay/questionStyle.css b/client/src/components/QuestionsDisplay/questionStyle.css index 87e983e..6df5d71 100644 --- a/client/src/components/QuestionsDisplay/questionStyle.css +++ b/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; +} + diff --git a/client/src/main.tsx b/client/src/main.tsx index e73c979..a04f569 100644 --- a/client/src/main.tsx +++ b/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';