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

Changed questions display

Browse source
This commit is contained in:
KenChanA 2025-03-16 21:25:21 -04:00
parent 99c6432105
commit 8db658e7a0
10 changed files with 122 additions and 77 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
client/package-lock.json generated
View file

@ -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",

1
client/package.json
View file

@ -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",

13
client/src/components/LiveResults/LiveResultsTable/TableComponents/LiveResultsTableHeader.tsx
View file

@ -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>

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

@ -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">
{pickRates[i].toFixed(1)}%
</div>
)}
{showCorrectAnswers && <div className="pick-rate">{choice.isCorrect ? '✅' : '❌'} {pickRates[i].toFixed(1)}%</div>}
</Button>
</div>
);

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

@ -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>

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

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

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

@ -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,63 +53,69 @@ 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 dangerouslySetInnerHTML={{ __html: FormattedTextTemplate(question.formattedStem) }} />
</div>
{showAnswer ? (
<>
<div className="correct-answer-text mb-1">
<span>
<strong>La bonne réponse est: </strong>
{question.choices.map((choice) => (
<div key={choice.text} className="mb-1">
{choice.text}
</div>
))}
</span>
<span>
<strong>Votre réponse est: </strong>{answer}
</span>
</div>
{question.formattedGlobalFeedback && <div className="global-feedback mb-2">
<div dangerouslySetInnerHTML={{ __html: FormattedTextTemplate(question.formattedGlobalFeedback) }} />
</div>}
</>
) : (
<>
<div className="answer-wrapper mb-1">
<TextField
type="text"
id={question.formattedStem.text}
name={question.formattedStem.text}
onChange={(e) => {
setAnswer(e.target.value);
}}
disabled={showAnswer}
aria-label="short-answer-input"
/>
</div>
{handleOnSubmitAnswer && (
<Button
variant="contained"
onClick={() =>
answer !== undefined &&
handleOnSubmitAnswer &&
handleOnSubmitAnswer(answer)
}
disabled={answer === null || answer === ''}
>
Répondre
</Button>
)}
</>
)}
<div className="question-wrapper">
<div>
<div dangerouslySetInnerHTML={{ __html: FormattedTextTemplate(question.formattedStem) }} />
</div>
{showAnswer ? (
<>
<div className="correct-answer-text mb-1">
<span>
<strong>La bonne réponse est: </strong>
{question.choices.map((choice) => (
<div key={choice.text} className="mb-1">
{choice.text}
</div>
))}
</span>
<span>
<strong>Votre réponse est: </strong>{answer}
</span>
</div>
{question.formattedGlobalFeedback && <div className="global-feedback mb-2">
<div dangerouslySetInnerHTML={{ __html: FormattedTextTemplate(question.formattedGlobalFeedback) }} />
</div>}
</>
) : (
<>
<div className="answer-wrapper mb-1">
<TextField
type="text"
id={question.formattedStem.text}
name={question.formattedStem.text}
onChange={(e) => {
setAnswer(e.target.value);
}}
disabled={showAnswer}
aria-label="short-answer-input"
/>
</div>
{handleOnSubmitAnswer && (
<Button
variant="contained"
onClick={() =>
answer !== undefined &&
handleOnSubmitAnswer &&
handleOnSubmitAnswer(answer)
}
disabled={answer === null || answer === ''}
>
Répondre
</Button>
)}
</>
)}
{isDisplayOnly && (
<>
@ -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>

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

@ -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">{pickRates.trueRate.toFixed(1)}%</div>
<div className="pick-rate">{question.isTrue ? '✅' : '❌'} {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">{pickRates.falseRate.toFixed(1)}%</div>
<div className="pick-rate">{!question.isTrue ? '✅' : '❌'} {pickRates.falseRate.toFixed(1)}%</div>
</>
)}

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

@ -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;
}

1
client/src/main.tsx
View file

@ -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';