diff --git a/client/src/components/QuestionsDisplay/MultipleChoiceQuestionDisplay/MultipleChoiceQuestionDisplay.tsx b/client/src/components/QuestionsDisplay/MultipleChoiceQuestionDisplay/MultipleChoiceQuestionDisplay.tsx index 6b37089..ea07695 100644 --- a/client/src/components/QuestionsDisplay/MultipleChoiceQuestionDisplay/MultipleChoiceQuestionDisplay.tsx +++ b/client/src/components/QuestionsDisplay/MultipleChoiceQuestionDisplay/MultipleChoiceQuestionDisplay.tsx @@ -19,7 +19,7 @@ interface Props { const MultipleChoiceQuestionDisplay: React.FC = (props) => { const { question, showAnswer, handleOnSubmitAnswer, students, isDisplayOnly, passedAnswer } = props; const [answer, setAnswer] = useState(passedAnswer || ''); - const [pickRates, setPickRates] = useState([]); + const [pickRates, setPickRates] = useState<{ percentages: number[], counts: number[], totalCount: number }>({ percentages: [], counts: [], totalCount: 0 }); const [showCorrectAnswers, setShowCorrectAnswers] = useState(false); let disableButton = false; @@ -37,20 +37,26 @@ const MultipleChoiceQuestionDisplay: React.FC = (props) => { const calculatePickRates = () => { if (!students || students.length === 0) { - setPickRates(new Array(question.choices.length).fill(0)); // Fill with 0 for each choice + setPickRates({ percentages: new Array(question.choices.length).fill(0), counts: new Array(question.choices.length).fill(0), totalCount: 0 }); return; } - - const rates = question.choices.map(choice => { - const choiceAnswers = students.filter(student => + + const rates: number[] = []; + const counts: number[] = []; + let totalResponses = 0; + + question.choices.forEach(choice => { + const choiceCount = students.filter(student => student.answers.some(ans => ans.idQuestion === Number(question.id) && ans.answer === choice.formattedText.text ) ).length; - return (choiceAnswers / students.length) * 100; + totalResponses += choiceCount; + rates.push((choiceCount / students.length) * 100); + counts.push(choiceCount); }); - - setPickRates(rates); + + setPickRates({ percentages: rates, counts: counts, totalCount: totalResponses }); }; useEffect(() => { @@ -76,7 +82,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 ? 'royalblue' : 'orange'} ${pickRates[i]}%, transparent ${pickRates[i]}%)`, + backgroundImage: `linear-gradient(to right, ${choice.isCorrect ? 'lightgreen' : 'lightcoral'} ${pickRates.percentages[i]}%, transparent ${pickRates.percentages[i]}%)`, color: 'black' } : {}; return ( @@ -114,7 +120,7 @@ const MultipleChoiceQuestionDisplay: React.FC = (props) => {
)} - {showCorrectAnswers &&
{choice.isCorrect ? '✅' : '❌'} {pickRates[i].toFixed(1)}%
} + {showCorrectAnswers &&
{choice.isCorrect ? '✅' : '❌'} {`${pickRates.counts[i]}/${pickRates.totalCount} (${pickRates.percentages[i].toFixed(1)}%)`}
} ); diff --git a/client/src/components/QuestionsDisplay/ShortAnswerQuestionDisplay/ShortAnswerQuestionDisplay.tsx b/client/src/components/QuestionsDisplay/ShortAnswerQuestionDisplay/ShortAnswerQuestionDisplay.tsx index 044ffbf..2fd4a7d 100644 --- a/client/src/components/QuestionsDisplay/ShortAnswerQuestionDisplay/ShortAnswerQuestionDisplay.tsx +++ b/client/src/components/QuestionsDisplay/ShortAnswerQuestionDisplay/ShortAnswerQuestionDisplay.tsx @@ -63,87 +63,90 @@ const ShortAnswerQuestionDisplay: React.FC = (props) => { }; 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: - {isDisplayOnly && ( - <> -
- -
-
-
- Taux de réponse correcte: {submissionCounts.correctSubmissions}/{submissionCounts.totalSubmissions} -
-
-
-
- {correctAnswerRate.toFixed(1)}% + {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 && ( + <> +
+ + {showCorrectAnswers && ( +
+
+ Taux de réponse correcte: {submissionCounts.correctSubmissions}/{submissionCounts.totalSubmissions} +
+
+
+
+ {correctAnswerRate.toFixed(1)}% +
+
+
+ )}
-
- - )} -
+ + )} +
+
); }; diff --git a/client/src/components/QuestionsDisplay/TrueFalseQuestionDisplay/TrueFalseQuestionDisplay.tsx b/client/src/components/QuestionsDisplay/TrueFalseQuestionDisplay/TrueFalseQuestionDisplay.tsx index 62f41b4..1f77ef7 100644 --- a/client/src/components/QuestionsDisplay/TrueFalseQuestionDisplay/TrueFalseQuestionDisplay.tsx +++ b/client/src/components/QuestionsDisplay/TrueFalseQuestionDisplay/TrueFalseQuestionDisplay.tsx @@ -19,7 +19,13 @@ interface Props { const TrueFalseQuestionDisplay: React.FC = (props) => { const { question, showAnswer, handleOnSubmitAnswer, students, passedAnswer, isDisplayOnly } = props; const [answer, setAnswer] = useState(undefined); - const [pickRates, setPickRates] = useState<{ trueRate: number, falseRate: number }>({ trueRate: 0, falseRate: 0 }); + const [pickRates, setPickRates] = useState<{ trueRate: number, falseRate: number, trueCount: number, falseCount: number, totalCount: number }>({ + trueRate: 0, + falseRate: 0, + trueCount: 0, + falseCount: 0, + totalCount: 0 + }); const [showCorrectAnswers, setShowCorrectAnswers] = useState(false); let disableButton = false; @@ -54,36 +60,33 @@ const TrueFalseQuestionDisplay: React.FC = (props) => { // Calcul le pick rate de chaque réponse const calculatePickRates = () => { if (!students) { - setPickRates({ trueRate: 0, falseRate: 0 }); + setPickRates({ trueRate: 0, falseRate: 0, trueCount: 0, falseCount: 0, totalCount: 0 }); return; } const totalAnswers = students.length; - const trueAnswers = students.filter(student => student.answers.some(ans => ans.idQuestion === Number(question.id) && ans.answer === true )).length; - const falseAnswers = students.filter(student => student.answers.some(ans => ans.idQuestion === Number(question.id) && ans.answer === false )).length; - if (totalAnswers > 0) { - setPickRates({ - trueRate: (trueAnswers / totalAnswers) * 100, - falseRate: (falseAnswers / totalAnswers) * 100 - }); - } else { - setPickRates({ trueRate: 0, falseRate: 0 }); - } + setPickRates({ + trueRate: (trueAnswers / totalAnswers) * 100, + falseRate: (falseAnswers / totalAnswers) * 100, + trueCount: trueAnswers, + falseCount: falseAnswers, + totalCount: totalAnswers + }); }; return (
-
+
{showCorrectAnswers && ( <> -
{question.isTrue ? '✅' : '❌'} {pickRates.trueRate.toFixed(1)}%
+
{question.isTrue ? '✅' : '❌'} {pickRates.trueRate}/{pickRates.totalCount} ({pickRates.trueRate.toFixed(1)}%)
)} @@ -131,7 +134,7 @@ const TrueFalseQuestionDisplay: React.FC = (props) => { {showCorrectAnswers && ( <> -
{!question.isTrue ? '✅' : '❌'} {pickRates.falseRate.toFixed(1)}%
+
{!question.isTrue ? '✅' : '❌'} {pickRates.falseCount}/{pickRates.totalCount} ({pickRates.falseRate.toFixed(1)}%)
)} diff --git a/client/src/components/QuestionsDisplay/questionStyle.css b/client/src/components/QuestionsDisplay/questionStyle.css index 6df5d71..2babc91 100644 --- a/client/src/components/QuestionsDisplay/questionStyle.css +++ b/client/src/components/QuestionsDisplay/questionStyle.css @@ -198,6 +198,6 @@ .pick-rate{ color: rgba(0,0,0,1); - min-width: 70px; + min-width: 120px; }