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

Display percentage feature in manageRooms

Browse source 
Added the percentage display for the following question types:
TrueFalse, MultipleChoice, Numerical and ShortAnswer

Modified the signature of each question types to optionally receive students in order to display their pickrate for each option
This commit is contained in:
KenChanA 2025-03-06 03:29:49 -05:00
parent 8240de0a44
commit 3f16a758d8
7 changed files with 323 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

82
client/src/components/QuestionsDisplay/MultipleChoiceQuestionDisplay/MultipleChoiceQuestionDisplay.tsx
View file

@ -1,28 +1,57 @@
// MultipleChoiceQuestionDisplay.tsx
import React, { useEffect, useState } from 'react';
import React, { useState, useEffect } from 'react';
import '../questionStyle.css';
import { Button } from '@mui/material';
import { FormattedTextTemplate } from '../../GiftTemplate/templates/TextTypeTemplate';
import { MultipleChoiceQuestion } from 'gift-pegjs';
import { StudentType } from 'src/Types/StudentType';
interface Props {
question: MultipleChoiceQuestion;
handleOnSubmitAnswer?: (answer: string) => void;
showAnswer?: boolean;
students?: StudentType[];
isDisplayOnly?: boolean;
}
const MultipleChoiceQuestionDisplay: React.FC<Props> = (props) => {
const { question, showAnswer, handleOnSubmitAnswer } = props;
const { question, showAnswer, handleOnSubmitAnswer, students, isDisplayOnly } = props;
const [answer, setAnswer] = useState<string>();
useEffect(() => {
setAnswer(undefined);
}, [question]);
const [pickRates, setPickRates] = useState<number[]>([]);
const [showCorrectAnswers, setShowCorrectAnswers] = useState(false);
const handleOnClickAnswer = (choice: string) => {
setAnswer(choice);
};
const toggleShowCorrectAnswers = () => {
setShowCorrectAnswers(!showCorrectAnswers);
};
const calculatePickRates = () => {
if (!students || students.length === 0) {
setPickRates(new Array(question.choices.length).fill(0)); // Fill with 0 for each choice
return;
}
const rates = question.choices.map(choice => {
const choiceAnswers = students.filter(student =>
student.answers.some(ans =>
ans.idQuestion === Number(question.id) && ans.answer === choice.formattedText.text
)
).length;
return (choiceAnswers / students.length) * 100;
});
setPickRates(rates);
};
useEffect(() => {
setAnswer(undefined);
calculatePickRates();
}, [students, question, showCorrectAnswers]);
const alpha = Array.from(Array(26)).map((_e, i) => i + 65);
const alphabet = alpha.map((x) => String.fromCharCode(x));
return (
@ -33,9 +62,13 @@ const MultipleChoiceQuestionDisplay: React.FC<Props> = (props) => {
<div className="choices-wrapper mb-1">
{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]}%)`,
color: 'black'
} : {};
return (
<div key={choice.formattedText.text + i} className="choice-container">
<Button
{/* <Button
variant="text"
className="button-wrapper"
onClick={() => !showAnswer && handleOnClickAnswer(choice.formattedText.text)}>
@ -50,8 +83,29 @@ const MultipleChoiceQuestionDisplay: React.FC<Props> = (props) => {
<div dangerouslySetInnerHTML={{ __html: FormattedTextTemplate(choice.formattedFeedback) }} />
</div>
)}
</Button> */}
<Button
variant="text"
className={`button-wrapper ${selected}`}
onClick={() => !showAnswer && handleOnClickAnswer(choice.formattedText.text)}
>
<div className={`circle ${selected}`}>{alphabet[i]}</div>
<div className={`answer-text ${selected}`}
style={rateStyle}>
<div dangerouslySetInnerHTML={{ __html: FormattedTextTemplate(choice.formattedText) }} />
</div>
{choice.formattedFeedback && showAnswer && (
<div className="feedback-container mb-1 mt-1/2">
<div dangerouslySetInnerHTML={{ __html: FormattedTextTemplate(choice.formattedFeedback) }} />
</div>
)}
{showCorrectAnswers && <div>{choice.isCorrect ? '✅' : '❌'}</div>}
{showCorrectAnswers && (
<div className="pick-rate">
{pickRates[i].toFixed(1)}%
</div>
)}
</Button>
</div>
);
})}
@ -75,6 +129,18 @@ const MultipleChoiceQuestionDisplay: React.FC<Props> = (props) => {
</Button>
)}
{isDisplayOnly && (
<div>
<Button
variant="outlined"
onClick={toggleShowCorrectAnswers}
color="primary"
>
{showCorrectAnswers ? "Masquer les résultats" : "Afficher les résultats"}
</Button>
</div>
)}
</div>
);
};

63
client/src/components/QuestionsDisplay/NumericalQuestionDisplay/NumericalQuestionDisplay.tsx
View file

@ -1,19 +1,22 @@
// NumericalQuestion.tsx
import React, { useState } from 'react';
import React, { useState, useEffect } from 'react';
import '../questionStyle.css';
import { Button, TextField } from '@mui/material';
import { FormattedTextTemplate } from '../../GiftTemplate/templates/TextTypeTemplate';
import { NumericalQuestion, SimpleNumericalAnswer, RangeNumericalAnswer, HighLowNumericalAnswer } from 'gift-pegjs';
import { isSimpleNumericalAnswer, isRangeNumericalAnswer, isHighLowNumericalAnswer, isMultipleNumericalAnswer } from 'gift-pegjs/typeGuards';
import { StudentType } from 'src/Types/StudentType';
interface Props {
question: NumericalQuestion;
handleOnSubmitAnswer?: (answer: number) => void;
showAnswer?: boolean;
students?: StudentType[];
isDisplayOnly?: boolean;
}
const NumericalQuestionDisplay: React.FC<Props> = (props) => {
const { question, showAnswer, handleOnSubmitAnswer } =
const { question, showAnswer, handleOnSubmitAnswer, students, isDisplayOnly } =
props;
const [answer, setAnswer] = useState<number>();
@ -21,6 +24,34 @@ const NumericalQuestionDisplay: React.FC<Props> = (props) => {
const correctAnswers = question.choices;
let correctAnswer = '';
const [showCorrectAnswers, setShowCorrectAnswers] = useState(false);
const [correctAnswerRate, setCorrectAnswerRate] = useState<number>(0);
const toggleShowCorrectAnswers = () => {
setShowCorrectAnswers(!showCorrectAnswers);
};
useEffect(() => {
if (showCorrectAnswers && students) {
calculateCorrectAnswerRate();
}
}, [showCorrectAnswers, students]);
const calculateCorrectAnswerRate = () => {
if (!students || students.length === 0) {
setCorrectAnswerRate(0); // Safeguard against undefined or empty student array
return;
}
const totalSubmissions = students.length;
const correctSubmissions = students.filter(student =>
student.answers.some(ans =>
ans.idQuestion === Number(question.id) && ans.isCorrect
)
).length;
setCorrectAnswerRate((correctSubmissions / totalSubmissions) * 100);
};
//const isSingleAnswer = correctAnswers.length === 1;
if (isSimpleNumericalAnswer(correctAnswers[0])) {
@ -82,6 +113,34 @@ const NumericalQuestionDisplay: React.FC<Props> = (props) => {
)}
</>
)}
{isDisplayOnly && (
<>
<div style={{ marginTop: '10px' }}>
<Button
variant="outlined"
onClick={toggleShowCorrectAnswers}
color="primary"
>
{showCorrectAnswers ? "Masquer les résultats" : "Afficher les résultats"}
</Button>
</div>
<div style={{
visibility: showCorrectAnswers ? 'visible' : 'hidden'
}}>
<div>
Taux de réponse correcte:
</div>
<div className="progress-bar-container">
<div className="progress-bar-fill" style={{ width: `${correctAnswerRate}%` }}></div>
<div className="progress-bar-text">
{correctAnswerRate.toFixed(1)}%
</div>
</div>
</div>
</>
)}
</div>
);
};

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

@ -7,15 +7,21 @@ import NumericalQuestionDisplay from './NumericalQuestionDisplay/NumericalQuesti
import ShortAnswerQuestionDisplay from './ShortAnswerQuestionDisplay/ShortAnswerQuestionDisplay';
// import useCheckMobileScreen from '../../services/useCheckMobileScreen';
import { StudentType } from '../../Types/StudentType';
interface QuestionProps {
question: Question;
handleOnSubmitAnswer?: (answer: string | number | boolean) => void;
showAnswer?: boolean;
students?: StudentType[];
isDisplayOnly?: boolean;
}
const QuestionDisplay: React.FC<QuestionProps> = ({
question,
handleOnSubmitAnswer,
showAnswer,
students,
isDisplayOnly = false
}) => {
// const isMobile = useCheckMobileScreen();
// const imgWidth = useMemo(() => {
@ -30,6 +36,8 @@ const QuestionDisplay: React.FC<QuestionProps> = ({
question={question}
handleOnSubmitAnswer={handleOnSubmitAnswer}
showAnswer={showAnswer}
students={students}
isDisplayOnly={isDisplayOnly}
/>
);
break;
@ -39,6 +47,8 @@ const QuestionDisplay: React.FC<QuestionProps> = ({
question={question}
handleOnSubmitAnswer={handleOnSubmitAnswer}
showAnswer={showAnswer}
students={students}
isDisplayOnly={isDisplayOnly}
/>
);
break;
@ -50,6 +60,8 @@ const QuestionDisplay: React.FC<QuestionProps> = ({
question={question}
handleOnSubmitAnswer={handleOnSubmitAnswer}
showAnswer={showAnswer}
students={students}
isDisplayOnly={isDisplayOnly}
/>
);
} else {
@ -58,6 +70,8 @@ const QuestionDisplay: React.FC<QuestionProps> = ({
question={question}
handleOnSubmitAnswer={handleOnSubmitAnswer}
showAnswer={showAnswer}
students={students}
isDisplayOnly={isDisplayOnly}
/>
);
}
@ -69,6 +83,8 @@ const QuestionDisplay: React.FC<QuestionProps> = ({
question={question}
handleOnSubmitAnswer={handleOnSubmitAnswer}
showAnswer={showAnswer}
students={students}
isDisplayOnly={isDisplayOnly}
/>
);
break;

61
client/src/components/QuestionsDisplay/ShortAnswerQuestionDisplay/ShortAnswerQuestionDisplay.tsx
View file

@ -1,18 +1,48 @@
import React, { useState } from 'react';
import React, { useState, useEffect } from 'react';
import '../questionStyle.css';
import { Button, TextField } from '@mui/material';
import { FormattedTextTemplate } from '../../GiftTemplate/templates/TextTypeTemplate';
import { ShortAnswerQuestion } from 'gift-pegjs';
import { StudentType } from 'src/Types/StudentType';
interface Props {
question: ShortAnswerQuestion;
handleOnSubmitAnswer?: (answer: string) => void;
showAnswer?: boolean;
students?: StudentType[];
isDisplayOnly?: boolean;
}
const ShortAnswerQuestionDisplay: React.FC<Props> = (props) => {
const { question, showAnswer, handleOnSubmitAnswer } = props;
const { question, showAnswer, handleOnSubmitAnswer, students, isDisplayOnly } = props;
const [answer, setAnswer] = useState<string>();
const [showCorrectAnswers, setShowCorrectAnswers] = useState(false);
const [correctAnswerRate, setCorrectAnswerRate] = useState<number>(0);
const toggleShowCorrectAnswers = () => {
setShowCorrectAnswers(!showCorrectAnswers);
};
useEffect(() => {
if (showCorrectAnswers && students) {
calculateCorrectAnswerRate();
}
}, [showCorrectAnswers, students]);
const calculateCorrectAnswerRate = () => {
if (!students || students.length === 0) {
setCorrectAnswerRate(0); // Safeguard against undefined or empty student array
return;
}
const totalSubmissions = students.length;
const correctSubmissions = students.filter(student =>
student.answers.some(ans =>
ans.idQuestion === Number(question.id) && ans.isCorrect
)
).length;
setCorrectAnswerRate((correctSubmissions / totalSubmissions) * 100);
};
return (
<div className="question-wrapper">
@ -61,6 +91,33 @@ const ShortAnswerQuestionDisplay: React.FC<Props> = (props) => {
)}
</>
)}
{isDisplayOnly && (
<>
<div style={{ marginTop: '10px' }}>
<Button
variant="outlined"
onClick={toggleShowCorrectAnswers}
color="primary"
>
{showCorrectAnswers ? "Masquer les résultats" : "Afficher les résultats"}
</Button>
</div>
<div style={{
visibility: showCorrectAnswers ? 'visible' : 'hidden'
}}>
<div>
Taux de réponse correcte:
</div>
<div className="progress-bar-container">
<div className="progress-bar-fill" style={{ width: `${correctAnswerRate}%` }}></div>
<div className="progress-bar-text">
{correctAnswerRate.toFixed(1)}%
</div>
</div>
</div>
</>
)}
</div>
);
};

95
client/src/components/QuestionsDisplay/TrueFalseQuestionDisplay/TrueFalseQuestionDisplay.tsx
View file

@ -4,24 +4,63 @@ import '../questionStyle.css';
import { Button } from '@mui/material';
import { TrueFalseQuestion } from 'gift-pegjs';
import { FormattedTextTemplate } from 'src/components/GiftTemplate/templates/TextTypeTemplate';
import { StudentType } from 'src/Types/StudentType';
interface Props {
question: TrueFalseQuestion;
handleOnSubmitAnswer?: (answer: boolean) => void;
showAnswer?: boolean;
students?: StudentType[];
isDisplayOnly?: boolean;
}
const TrueFalseQuestionDisplay: React.FC<Props> = (props) => {
const { question, showAnswer, handleOnSubmitAnswer } =
props;
const { question, showAnswer, handleOnSubmitAnswer, students, isDisplayOnly } = props;
const [answer, setAnswer] = useState<boolean | undefined>(undefined);
const [pickRates, setPickRates] = useState<{ trueRate: number, falseRate: number }>({ trueRate: 0, falseRate: 0 });
const [showCorrectAnswers, setShowCorrectAnswers] = useState(false);
useEffect(() => {
setAnswer(undefined);
}, [question]);
calculatePickRates();
}, [question, students]);
const selectedTrue = answer ? 'selected' : '';
const selectedFalse = answer !== undefined && !answer ? 'selected' : '';
const toggleShowCorrectAnswers = () => {
setShowCorrectAnswers(!showCorrectAnswers);
};
// Calcul le pick rate de chaque réponse
const calculatePickRates = () => {
if (!students) {
setPickRates({ trueRate: 0, falseRate: 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 });
}
};
return (
<div className="question-container">
<div className="question content">
@ -29,23 +68,45 @@ const TrueFalseQuestionDisplay: React.FC<Props> = (props) => {
</div>
<div className="choices-wrapper mb-1">
<Button
className="button-wrapper"
onClick={() => !showAnswer && setAnswer(true)}
className={`button-wrapper ${selectedTrue}`}
onClick={() => !showCorrectAnswers && setAnswer(true)}
fullWidth
>
{showAnswer? (<div> {(question.isTrue ? '✅' : '❌')}</div>):``}
<div className={`circle ${selectedTrue}`}>V</div>
<div className={`answer-text ${selectedTrue}`}>Vrai</div>
<div
className={`answer-text ${selectedTrue}`}
style={showCorrectAnswers ? {
backgroundImage: `linear-gradient(to right, ${question.isTrue ? 'lightgreen' : 'lightcoral'} ${pickRates.trueRate}%, transparent ${pickRates.trueRate}%)`
} : {}}
>
Vrai
</div>
{showCorrectAnswers && <div>{question.isTrue ? '✅' : '❌'}</div>}
{showCorrectAnswers && (
<div className="pick-rate">{pickRates.trueRate.toFixed(1)}%</div>
)}
</Button>
<Button
className="button-wrapper"
onClick={() => !showAnswer && setAnswer(false)}
className={`button-wrapper ${selectedFalse}`}
onClick={() => !showCorrectAnswers && setAnswer(false)}
fullWidth
>
{showAnswer? (<div> {(!question.isTrue ? '✅' : '❌')}</div>):``}
<div className={`circle ${selectedFalse}`}>F</div>
<div className={`answer-text ${selectedFalse}`}>Faux</div>
<div
className={`answer-text ${selectedFalse}`}
style={showCorrectAnswers ? {
backgroundImage: `linear-gradient(to right, ${!question.isTrue ? 'lightgreen' : 'lightcoral'} ${pickRates.falseRate}%, transparent ${pickRates.falseRate}%)`,
} : {}}
>
Faux
</div>
{showCorrectAnswers && <div>{!question.isTrue ? '✅' : '❌'}</div>}
{showCorrectAnswers && (
<div className="pick-rate">{pickRates.falseRate.toFixed(1)}%</div>
)}
</Button>
</div>
{/* selected TRUE, show True feedback if it exists */}
{showAnswer && answer && question.trueFormattedFeedback && (
@ -75,6 +136,18 @@ const TrueFalseQuestionDisplay: React.FC<Props> = (props) => {
Répondre
</Button>
)}
{isDisplayOnly && (
<div>
<Button
variant="outlined"
onClick={toggleShowCorrectAnswers}
color="primary"
>
{showCorrectAnswers ? "Masquer les résultats" : "Afficher les résultats"}
</Button>
</div>
)}
</div>
);
};

27
client/src/components/QuestionsDisplay/questionStyle.css
View file

@ -150,3 +150,30 @@
.choices-wrapper {
width: 90%;
}
.progress-bar-container {
position: relative;
width: 100%;
height: 20px;
background-color: #FEFEFE;
border-radius: 8px;
overflow: hidden;
border: 1px solid black;
}
.progress-bar-fill {
height: 100%;
background-color: lightgreen;
width: 0%;
transition: width 0.6s ease;
}
.progress-bar-text {
position: absolute;
width: 100%;
text-align: center;
top: 0;
line-height: 20px;
color: Black;
}

2
client/src/pages/Teacher/ManageRoom/ManageRoom.tsx
View file

@ -485,6 +485,8 @@ const ManageRoom: React.FC = () => {
<QuestionDisplay
showAnswer={false}
question={currentQuestion?.question as Question}
students={students}
isDisplayOnly={true}
/>
)}