mirror of
https://github.com/ets-cfuhrman-pfe/EvalueTonSavoir.git
synced 2025-08-11 21:23:54 -04:00
Fixed bootstrap format, added toggle button
This commit is contained in:
KenChanA
parent
198eb786fc
commit
b9d79fceac
6 changed files with 215 additions and 250 deletions
|
|
@ -14,18 +14,22 @@ interface Props {
|
|||
passedAnswer?: AnswerType;
|
||||
students?: StudentType[];
|
||||
isDisplayOnly?: boolean;
|
||||
showResults?: boolean;
|
||||
}
|
||||
|
||||
const MultipleChoiceQuestionDisplay: React.FC<Props> = (props) => {
|
||||
const { question, showAnswer, handleOnSubmitAnswer, students, isDisplayOnly, passedAnswer } = props;
|
||||
const { question, showAnswer, handleOnSubmitAnswer, students, showResults, passedAnswer } = props;
|
||||
const [answer, setAnswer] = useState<AnswerType>(() => {
|
||||
if (passedAnswer && passedAnswer.length > 0) {
|
||||
return passedAnswer;
|
||||
}
|
||||
return [];
|
||||
});
|
||||
const [pickRates, setPickRates] = useState<{ percentages: number[], counts: number[], totalCount: number }>({ percentages: [], counts: [], totalCount: 0 });
|
||||
const [showCorrectAnswers, setShowCorrectAnswers] = useState(false);
|
||||
const [pickRates, setPickRates] = useState<{ percentages: number[], counts: number[], totalCount: number }>({
|
||||
percentages: [],
|
||||
counts: [],
|
||||
totalCount: 0
|
||||
});
|
||||
|
||||
let disableButton = false;
|
||||
if (handleOnSubmitAnswer === undefined) {
|
||||
|
|
@ -52,10 +56,6 @@ const MultipleChoiceQuestionDisplay: React.FC<Props> = (props) => {
|
|||
}
|
||||
});
|
||||
};
|
||||
|
||||
const toggleShowCorrectAnswers = () => {
|
||||
setShowCorrectAnswers(!showCorrectAnswers);
|
||||
};
|
||||
|
||||
const calculatePickRates = () => {
|
||||
if (!students || students.length === 0) {
|
||||
|
|
@ -88,11 +88,12 @@ const MultipleChoiceQuestionDisplay: React.FC<Props> = (props) => {
|
|||
setAnswer([]);
|
||||
calculatePickRates();
|
||||
}
|
||||
}, [passedAnswer, students, question.id, showCorrectAnswers]);
|
||||
}, [passedAnswer, students, question.id]);
|
||||
|
||||
|
||||
const alpha = Array.from(Array(26)).map((_e, i) => i + 65);
|
||||
const alphabet = alpha.map((x) => String.fromCharCode(x));
|
||||
|
||||
return (
|
||||
<div className="container">
|
||||
<div className="row justify-content-center">
|
||||
|
|
@ -103,7 +104,7 @@ const MultipleChoiceQuestionDisplay: React.FC<Props> = (props) => {
|
|||
<div className="choices-wrapper mb-1">
|
||||
{question.choices.map((choice, i) => {
|
||||
const selected = answer.includes(choice.formattedText.text) ? 'selected' : '';
|
||||
const rateStyle = showCorrectAnswers ? {
|
||||
const rateStyle = showResults ? {
|
||||
backgroundImage: `linear-gradient(to right, ${choice.isCorrect ? 'lightgreen' : 'lightcoral'} ${pickRates.percentages[i]}%, transparent ${pickRates.percentages[i]}%)`,
|
||||
color: 'black'
|
||||
} : {};
|
||||
|
|
@ -134,7 +135,12 @@ const MultipleChoiceQuestionDisplay: React.FC<Props> = (props) => {
|
|||
/>
|
||||
</div>
|
||||
)}
|
||||
{showCorrectAnswers && <div className="pick-rate">{choice.isCorrect ? '✅' : '❌'} {`${pickRates.counts[i]}/${pickRates.totalCount} (${pickRates.percentages[i].toFixed(1)}%)`}</div>}
|
||||
{showResults && pickRates.percentages.length > i && (
|
||||
<div className="pick-rate">
|
||||
{choice.isCorrect ? '✅' : '❌'}
|
||||
{`${pickRates.counts[i]}/${pickRates.totalCount} (${pickRates.percentages[i].toFixed(1)}%)`}
|
||||
</div>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
|
|
@ -162,17 +168,6 @@ const MultipleChoiceQuestionDisplay: React.FC<Props> = (props) => {
|
|||
</Button>
|
||||
)}
|
||||
</div>
|
||||
{isDisplayOnly && (
|
||||
<div className="col-auto d-flex align-items-center justify-content-end">
|
||||
<Button
|
||||
variant="outlined"
|
||||
onClick={toggleShowCorrectAnswers}
|
||||
color="primary"
|
||||
>
|
||||
{showCorrectAnswers ? "Masquer les résultats" : "Afficher les résultats"}
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -14,35 +14,29 @@ interface Props {
|
|||
showAnswer?: boolean;
|
||||
passedAnswer?: AnswerType;
|
||||
students?: StudentType[];
|
||||
isDisplayOnly?: boolean;
|
||||
showResults?: boolean;
|
||||
}
|
||||
|
||||
const NumericalQuestionDisplay: React.FC<Props> = (props) => {
|
||||
const { question, showAnswer, handleOnSubmitAnswer, students, passedAnswer, isDisplayOnly } =
|
||||
const { question, showAnswer, handleOnSubmitAnswer, students, showResults, passedAnswer } =
|
||||
props;
|
||||
const [answer, setAnswer] = useState<AnswerType>(passedAnswer || []);
|
||||
const correctAnswers = question.choices;
|
||||
let correctAnswer = '';
|
||||
|
||||
const [showCorrectAnswers, setShowCorrectAnswers] = useState(false);
|
||||
const [correctAnswerRate, setCorrectAnswerRate] = useState<number>(0);
|
||||
const [submissionCounts, setSubmissionCounts] = useState({
|
||||
correctSubmissions: 0,
|
||||
totalSubmissions: 0
|
||||
});
|
||||
|
||||
const toggleShowCorrectAnswers = () => {
|
||||
setShowCorrectAnswers(!showCorrectAnswers);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (passedAnswer !== null && passedAnswer !== undefined) {
|
||||
setAnswer(passedAnswer);
|
||||
}
|
||||
if (showCorrectAnswers && students) {
|
||||
if (showResults && students) {
|
||||
calculateCorrectAnswerRate();
|
||||
}
|
||||
}, [passedAnswer, showCorrectAnswers, students]);
|
||||
}, [passedAnswer, showResults, students]);
|
||||
|
||||
const calculateCorrectAnswerRate = () => {
|
||||
if (!students || students.length === 0) {
|
||||
|
|
@ -82,85 +76,78 @@ const NumericalQuestionDisplay: React.FC<Props> = (props) => {
|
|||
}
|
||||
|
||||
return (
|
||||
<div className="question-wrapper">
|
||||
<div>
|
||||
<div dangerouslySetInnerHTML={{ __html: FormattedTextTemplate(question.formattedStem) }} />
|
||||
</div>
|
||||
{showAnswer ? (
|
||||
<>
|
||||
<div className="correct-answer-text mb-2">
|
||||
<strong>La bonne réponse est: </strong>
|
||||
{correctAnswer}</div>
|
||||
<span>
|
||||
<strong>Votre réponse est: </strong>{answer.toString()}
|
||||
</span>
|
||||
{question.formattedGlobalFeedback && <div className="global-feedback mb-2">
|
||||
<div dangerouslySetInnerHTML={{ __html: FormattedTextTemplate(question.formattedGlobalFeedback) }} />
|
||||
</div>}
|
||||
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<div className="answer-wrapper mb-1">
|
||||
<TextField
|
||||
type="number"
|
||||
id={question.formattedStem.text}
|
||||
name={question.formattedStem.text}
|
||||
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setAnswer([e.target.valueAsNumber]);
|
||||
}}
|
||||
inputProps={{ 'data-testid': 'number-input' }}
|
||||
/>
|
||||
</div>
|
||||
{question.formattedGlobalFeedback && showAnswer && (
|
||||
<div className="global-feedback mb-2">
|
||||
<div dangerouslySetInnerHTML={{ __html: FormattedTextTemplate(question.formattedGlobalFeedback) }} />
|
||||
</div>
|
||||
)}
|
||||
{handleOnSubmitAnswer && (
|
||||
<Button
|
||||
variant="contained"
|
||||
onClick={() =>
|
||||
answer !== undefined &&
|
||||
handleOnSubmitAnswer &&
|
||||
handleOnSubmitAnswer(answer)
|
||||
}
|
||||
disabled={answer === undefined || answer === null || isNaN(answer[0] as number)}
|
||||
>
|
||||
Répondre
|
||||
</Button>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
|
||||
{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 className="container question-wrapper">
|
||||
<div className="row justify-content-center">
|
||||
<div className="col-auto">
|
||||
<div>
|
||||
Taux de réponse correcte: {submissionCounts.correctSubmissions}/{submissionCounts.totalSubmissions}
|
||||
<div dangerouslySetInnerHTML={{ __html: FormattedTextTemplate(question.formattedStem) }} />
|
||||
</div>
|
||||
<div className="progress-bar-container">
|
||||
<div className="progress-bar-fill" style={{ width: `${correctAnswerRate}%` }}></div>
|
||||
<div className="progress-bar-text">
|
||||
{correctAnswerRate.toFixed(1)}%
|
||||
{showAnswer ? (
|
||||
<>
|
||||
<div className="correct-answer-text mb-2">
|
||||
<strong>La bonne réponse est: </strong>
|
||||
{correctAnswer}</div>
|
||||
<span>
|
||||
<strong>Votre réponse est: </strong>{answer.toString()}
|
||||
</span>
|
||||
{question.formattedGlobalFeedback && <div className="global-feedback mb-2">
|
||||
<div dangerouslySetInnerHTML={{ __html: FormattedTextTemplate(question.formattedGlobalFeedback) }} />
|
||||
</div>}
|
||||
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<div className="answer-wrapper mb-1">
|
||||
<TextField
|
||||
type="number"
|
||||
id={question.formattedStem.text}
|
||||
name={question.formattedStem.text}
|
||||
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setAnswer([e.target.valueAsNumber]);
|
||||
}}
|
||||
inputProps={{ 'data-testid': 'number-input' }}
|
||||
/>
|
||||
</div>
|
||||
{question.formattedGlobalFeedback && showAnswer && (
|
||||
<div className="global-feedback mb-2">
|
||||
<div dangerouslySetInnerHTML={{ __html: FormattedTextTemplate(question.formattedGlobalFeedback) }} />
|
||||
</div>
|
||||
)}
|
||||
{handleOnSubmitAnswer && (
|
||||
<div className="col-auto d-flex flex-column align-items-center">
|
||||
<Button
|
||||
variant="contained"
|
||||
onClick={() =>
|
||||
answer !== undefined &&
|
||||
handleOnSubmitAnswer &&
|
||||
handleOnSubmitAnswer(answer)
|
||||
}
|
||||
disabled={answer === undefined || answer === null || isNaN(answer[0] as number)}
|
||||
>
|
||||
Répondre
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
{showResults && (
|
||||
<div className="col-auto">
|
||||
<div>
|
||||
Taux de réponse correcte: {submissionCounts.correctSubmissions}/{submissionCounts.totalSubmissions}
|
||||
</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>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ interface QuestionProps {
|
|||
handleOnSubmitAnswer?: (answer: AnswerType) => void;
|
||||
showAnswer?: boolean;
|
||||
students?: StudentType[];
|
||||
isDisplayOnly?: boolean;
|
||||
showResults?: boolean;
|
||||
answer?: AnswerType;
|
||||
|
||||
}
|
||||
|
|
@ -24,7 +24,7 @@ const QuestionDisplay: React.FC<QuestionProps> = ({
|
|||
handleOnSubmitAnswer,
|
||||
showAnswer,
|
||||
students,
|
||||
isDisplayOnly = false,
|
||||
showResults,
|
||||
answer,
|
||||
}) => {
|
||||
// const isMobile = useCheckMobileScreen();
|
||||
|
|
@ -41,7 +41,7 @@ const QuestionDisplay: React.FC<QuestionProps> = ({
|
|||
handleOnSubmitAnswer={handleOnSubmitAnswer}
|
||||
showAnswer={showAnswer}
|
||||
students={students}
|
||||
isDisplayOnly={isDisplayOnly}
|
||||
showResults={showResults}
|
||||
passedAnswer={answer}
|
||||
/>
|
||||
);
|
||||
|
|
@ -54,7 +54,7 @@ const QuestionDisplay: React.FC<QuestionProps> = ({
|
|||
handleOnSubmitAnswer={handleOnSubmitAnswer}
|
||||
showAnswer={showAnswer}
|
||||
students={students}
|
||||
isDisplayOnly={isDisplayOnly}
|
||||
showResults={showResults}
|
||||
passedAnswer={answer}
|
||||
/>
|
||||
);
|
||||
|
|
@ -68,7 +68,7 @@ const QuestionDisplay: React.FC<QuestionProps> = ({
|
|||
showAnswer={showAnswer}
|
||||
passedAnswer={answer}
|
||||
students={students}
|
||||
isDisplayOnly={isDisplayOnly}
|
||||
showResults={showResults}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
@ -80,7 +80,7 @@ const QuestionDisplay: React.FC<QuestionProps> = ({
|
|||
handleOnSubmitAnswer={handleOnSubmitAnswer}
|
||||
showAnswer={showAnswer}
|
||||
students={students}
|
||||
isDisplayOnly={isDisplayOnly}
|
||||
showResults={showResults}
|
||||
passedAnswer={answer}
|
||||
/>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -12,33 +12,28 @@ interface Props {
|
|||
showAnswer?: boolean;
|
||||
passedAnswer?: AnswerType;
|
||||
students?: StudentType[];
|
||||
isDisplayOnly?: boolean;
|
||||
showResults?: boolean;
|
||||
}
|
||||
|
||||
const ShortAnswerQuestionDisplay: React.FC<Props> = (props) => {
|
||||
const { question, showAnswer, handleOnSubmitAnswer, students, passedAnswer, isDisplayOnly } = props;
|
||||
const { question, showAnswer, handleOnSubmitAnswer, students, showResults, passedAnswer } = 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);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (passedAnswer !== undefined) {
|
||||
setAnswer(passedAnswer);
|
||||
}
|
||||
|
||||
if (showCorrectAnswers && students) {
|
||||
if (showResults && students) {
|
||||
calculateCorrectAnswerRate();
|
||||
}
|
||||
|
||||
}, [passedAnswer, showCorrectAnswers, students, answer]);
|
||||
}, [passedAnswer, showResults, students, answer]);
|
||||
console.log("Answer", answer);
|
||||
|
||||
const calculateCorrectAnswerRate = () => {
|
||||
|
|
@ -67,7 +62,9 @@ const ShortAnswerQuestionDisplay: React.FC<Props> = (props) => {
|
|||
<div className="container question-wrapper">
|
||||
<div className="row justify-content-center">
|
||||
<div className="col-auto">
|
||||
<div dangerouslySetInnerHTML={{ __html: FormattedTextTemplate(question.formattedStem) }} />
|
||||
<div>
|
||||
<div dangerouslySetInnerHTML={{ __html: FormattedTextTemplate(question.formattedStem) }} />
|
||||
</div>
|
||||
{showAnswer ? (
|
||||
<>
|
||||
<div className="correct-answer-text mb-1">
|
||||
|
|
@ -104,7 +101,7 @@ const ShortAnswerQuestionDisplay: React.FC<Props> = (props) => {
|
|||
/>
|
||||
</div>
|
||||
{handleOnSubmitAnswer && (
|
||||
<div className="col-auto d-flex flex-column align-items-center">
|
||||
<div className="">
|
||||
<Button
|
||||
variant="contained"
|
||||
onClick={() =>
|
||||
|
|
@ -121,33 +118,19 @@ const ShortAnswerQuestionDisplay: React.FC<Props> = (props) => {
|
|||
</>
|
||||
)}
|
||||
</div>
|
||||
{isDisplayOnly && (
|
||||
<>
|
||||
<div className="col-auto d-flex flex-column align-items-center">
|
||||
<Button
|
||||
style={{ marginTop: '10px' }}
|
||||
variant="outlined"
|
||||
onClick={toggleShowCorrectAnswers}
|
||||
color="primary"
|
||||
>
|
||||
{showCorrectAnswers ? "Masquer les résultats" : "Afficher les résultats"}
|
||||
</Button>
|
||||
{showCorrectAnswers && (
|
||||
<div>
|
||||
<div>
|
||||
Taux de réponse correcte: {submissionCounts.correctSubmissions}/{submissionCounts.totalSubmissions}
|
||||
</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>
|
||||
)}
|
||||
{showResults && (
|
||||
<div className="col-auto">
|
||||
<div>
|
||||
Taux de réponse correcte: {submissionCounts.correctSubmissions}/{submissionCounts.totalSubmissions}
|
||||
</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>
|
||||
</div>
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -13,11 +13,11 @@ interface Props {
|
|||
showAnswer?: boolean;
|
||||
passedAnswer?: AnswerType;
|
||||
students?: StudentType[];
|
||||
isDisplayOnly?: boolean;
|
||||
showResults?: boolean;
|
||||
}
|
||||
|
||||
const TrueFalseQuestionDisplay: React.FC<Props> = (props) => {
|
||||
const { question, showAnswer, handleOnSubmitAnswer, students, passedAnswer, isDisplayOnly } = props;
|
||||
const { question, showAnswer, handleOnSubmitAnswer, students, passedAnswer, showResults } = props;
|
||||
const [pickRates, setPickRates] = useState<{ trueRate: number, falseRate: number, trueCount: number, falseCount: number, totalCount: number }>({
|
||||
trueRate: 0,
|
||||
falseRate: 0,
|
||||
|
|
@ -25,7 +25,6 @@ const TrueFalseQuestionDisplay: React.FC<Props> = (props) => {
|
|||
falseCount: 0,
|
||||
totalCount: 0
|
||||
});
|
||||
const [showCorrectAnswers, setShowCorrectAnswers] = useState(false);
|
||||
|
||||
const [answer, setAnswer] = useState<boolean | undefined>(() => {
|
||||
|
||||
|
|
@ -61,10 +60,6 @@ const TrueFalseQuestionDisplay: React.FC<Props> = (props) => {
|
|||
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) {
|
||||
|
|
@ -75,12 +70,14 @@ const TrueFalseQuestionDisplay: React.FC<Props> = (props) => {
|
|||
const totalAnswers = students.length;
|
||||
const trueAnswers = students.filter(student =>
|
||||
student.answers.some(ans =>
|
||||
ans.idQuestion === Number(question.id) && ans.answer === true
|
||||
)).length;
|
||||
ans.idQuestion === Number(question.id) && ans.answer.some(a => a === true)
|
||||
)
|
||||
).length;
|
||||
const falseAnswers = students.filter(student =>
|
||||
student.answers.some(ans =>
|
||||
ans.idQuestion === Number(question.id) && ans.answer === false
|
||||
)).length;
|
||||
ans.idQuestion === Number(question.id) && ans.answer.some(a => a === false)
|
||||
)
|
||||
).length;
|
||||
|
||||
setPickRates({
|
||||
trueRate: (trueAnswers / totalAnswers) * 100,
|
||||
|
|
@ -92,99 +89,91 @@ const TrueFalseQuestionDisplay: React.FC<Props> = (props) => {
|
|||
};
|
||||
|
||||
return (
|
||||
<div className="question-container">
|
||||
<div className="question content">
|
||||
<div dangerouslySetInnerHTML={{ __html: FormattedTextTemplate(question.formattedStem) }} />
|
||||
</div>
|
||||
<div className="choices-wrapper mb-1">
|
||||
<Button
|
||||
className="button-wrapper"
|
||||
onClick={() => !showAnswer && handleOnClickAnswer(true)}
|
||||
fullWidth
|
||||
disabled={disableButton}
|
||||
>
|
||||
{showAnswer ? (<div> {(question.isTrue ? '✅' : '❌')}</div>) : ``}
|
||||
<div className={`circle ${selectedTrue}`}>V</div>
|
||||
<div className={`answer-text ${selectedTrue}`}
|
||||
style={showCorrectAnswers ? {
|
||||
backgroundImage: `linear-gradient(to right, ${question.isTrue ? 'royalblue' : 'orange'} ${pickRates.trueRate}%, transparent ${pickRates.trueRate}%)`
|
||||
} : {}}
|
||||
>
|
||||
Vrai
|
||||
<div className="container">
|
||||
<div className="row justify-content-center">
|
||||
<div className="col-auto question-container">
|
||||
<div className="question content">
|
||||
<div dangerouslySetInnerHTML={{ __html: FormattedTextTemplate(question.formattedStem) }} />
|
||||
</div>
|
||||
{showCorrectAnswers && (
|
||||
<>
|
||||
<div className="pick-rate">{question.isTrue ? '✅' : '❌'} {pickRates.trueCount}/{pickRates.totalCount} ({pickRates.trueRate.toFixed(1)}%)</div>
|
||||
</>
|
||||
)}
|
||||
<div className="choices-wrapper mb-1">
|
||||
<Button
|
||||
className="button-wrapper"
|
||||
onClick={() => !showAnswer && handleOnClickAnswer(true)}
|
||||
fullWidth
|
||||
disabled={disableButton}
|
||||
>
|
||||
{showAnswer ? (<div> {(question.isTrue ? '✅' : '❌')}</div>) : ``}
|
||||
<div className={`circle ${selectedTrue}`}>V</div>
|
||||
<div className={`answer-text ${selectedTrue}`}
|
||||
style={showResults ? {
|
||||
backgroundImage: `linear-gradient(to right, ${question.isTrue ? 'lightgreen' : 'lightcoral'} ${pickRates.trueRate}%, transparent ${pickRates.trueRate}%)`
|
||||
} : {}}
|
||||
>
|
||||
Vrai
|
||||
</div>
|
||||
{showResults && (
|
||||
<>
|
||||
<div className="pick-rate">{question.isTrue ? '✅' : '❌'} {pickRates.trueCount}/{pickRates.totalCount} ({pickRates.trueRate.toFixed(1)}%)</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{showAnswer && answer && question.trueFormattedFeedback && (
|
||||
<div className="true-feedback mb-2">
|
||||
<div dangerouslySetInnerHTML={{ __html: FormattedTextTemplate(question.trueFormattedFeedback) }} />
|
||||
{showAnswer && answer && question.trueFormattedFeedback && (
|
||||
<div className="true-feedback mb-2">
|
||||
<div dangerouslySetInnerHTML={{ __html: FormattedTextTemplate(question.trueFormattedFeedback) }} />
|
||||
</div>
|
||||
)}
|
||||
</Button>
|
||||
<Button
|
||||
className={`button-wrapper ${selectedFalse}`}
|
||||
onClick={() => !showResults && handleOnClickAnswer(false)}
|
||||
fullWidth
|
||||
disabled={disableButton}
|
||||
|
||||
>
|
||||
{showAnswer ? (<div> {(!question.isTrue ? '✅' : '❌')}</div>) : ``}
|
||||
<div className={`circle ${selectedFalse}`}>F</div>
|
||||
<div
|
||||
className={`answer-text ${selectedFalse}`}
|
||||
style={showResults ? {
|
||||
backgroundImage: `linear-gradient(to right, ${!question.isTrue ? 'lightgreen' : 'lightcoral'} ${pickRates.falseRate}%, transparent ${pickRates.falseRate}%)`,
|
||||
} : {}}
|
||||
>
|
||||
Faux
|
||||
</div>
|
||||
|
||||
{showResults && (
|
||||
<>
|
||||
<div className="pick-rate">{!question.isTrue ? '✅' : '❌'} {pickRates.falseCount}/{pickRates.totalCount} ({pickRates.falseRate.toFixed(1)}%)</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{showAnswer && !answer && question.falseFormattedFeedback && (
|
||||
<div className="false-feedback mb-2">
|
||||
<div dangerouslySetInnerHTML={{ __html: FormattedTextTemplate(question.falseFormattedFeedback) }} />
|
||||
</div>
|
||||
)}
|
||||
</Button>
|
||||
|
||||
|
||||
</div>
|
||||
{question.formattedGlobalFeedback && showAnswer && (
|
||||
<div className="global-feedback mb-2">
|
||||
<div dangerouslySetInnerHTML={{ __html: FormattedTextTemplate(question.formattedGlobalFeedback) }} />
|
||||
</div>
|
||||
)}
|
||||
</Button>
|
||||
<Button
|
||||
className={`button-wrapper ${selectedFalse}`}
|
||||
onClick={() => !showCorrectAnswers && handleOnClickAnswer(false)}
|
||||
fullWidth
|
||||
disabled={disableButton}
|
||||
|
||||
>
|
||||
{showAnswer ? (<div> {(!question.isTrue ? '✅' : '❌')}</div>) : ``}
|
||||
<div className={`circle ${selectedFalse}`}>F</div>
|
||||
<div
|
||||
className={`answer-text ${selectedFalse}`}
|
||||
style={showCorrectAnswers ? {
|
||||
backgroundImage: `linear-gradient(to right, ${!question.isTrue ? 'royalblue' : 'orange'} ${pickRates.falseRate}%, transparent ${pickRates.falseRate}%)`,
|
||||
} : {}}
|
||||
>
|
||||
Faux
|
||||
</div>
|
||||
|
||||
{showCorrectAnswers && (
|
||||
<>
|
||||
<div className="pick-rate">{!question.isTrue ? '✅' : '❌'} {pickRates.falseCount}/{pickRates.totalCount} ({pickRates.falseRate.toFixed(1)}%)</div>
|
||||
</>
|
||||
{!showAnswer && handleOnSubmitAnswer && (
|
||||
<Button
|
||||
variant="contained"
|
||||
onClick={() =>
|
||||
answer !== undefined && handleOnSubmitAnswer && handleOnSubmitAnswer([answer])
|
||||
}
|
||||
disabled={answer === undefined}
|
||||
>
|
||||
Répondre
|
||||
</Button>
|
||||
)}
|
||||
|
||||
{showAnswer && !answer && question.falseFormattedFeedback && (
|
||||
<div className="false-feedback mb-2">
|
||||
<div dangerouslySetInnerHTML={{ __html: FormattedTextTemplate(question.falseFormattedFeedback) }} />
|
||||
</div>
|
||||
)}
|
||||
</Button>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
{question.formattedGlobalFeedback && showAnswer && (
|
||||
<div className="global-feedback mb-2">
|
||||
<div dangerouslySetInnerHTML={{ __html: FormattedTextTemplate(question.formattedGlobalFeedback) }} />
|
||||
</div>
|
||||
)}
|
||||
{!showAnswer && handleOnSubmitAnswer && (
|
||||
<Button
|
||||
variant="contained"
|
||||
onClick={() =>
|
||||
answer !== undefined && handleOnSubmitAnswer && handleOnSubmitAnswer([answer])
|
||||
}
|
||||
disabled={answer === undefined}
|
||||
>
|
||||
Répondre
|
||||
</Button>
|
||||
)}
|
||||
|
||||
{isDisplayOnly && (
|
||||
<div>
|
||||
<Button
|
||||
variant="outlined"
|
||||
onClick={toggleShowCorrectAnswers}
|
||||
color="primary"
|
||||
>
|
||||
{showCorrectAnswers ? "Masquer les résultats" : "Afficher les résultats"}
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ import DisconnectButton from 'src/components/DisconnectButton/DisconnectButton';
|
|||
import QuestionDisplay from 'src/components/QuestionsDisplay/QuestionDisplay';
|
||||
import ApiService from '../../../services/ApiService';
|
||||
import { QuestionType } from 'src/Types/QuestionType';
|
||||
import { Button } from '@mui/material';
|
||||
import { Button, FormControlLabel, Switch } from '@mui/material';
|
||||
import { checkIfIsCorrect } from './useRooms';
|
||||
|
||||
const ManageRoom: React.FC = () => {
|
||||
|
|
@ -34,6 +34,7 @@ const ManageRoom: React.FC = () => {
|
|||
const [quizStarted, setQuizStarted] = useState<boolean>(false);
|
||||
const [formattedRoomName, setFormattedRoomName] = useState("");
|
||||
const [newlyConnectedUser, setNewlyConnectedUser] = useState<StudentType | null>(null);
|
||||
const [showResults, setShowResults] = useState<boolean>(false);
|
||||
|
||||
// Handle the newly connected user in useEffect, because it needs state info
|
||||
// not available in the socket.on() callback
|
||||
|
|
@ -407,7 +408,17 @@ const ManageRoom: React.FC = () => {
|
|||
{quizQuestions?.length}
|
||||
</strong>
|
||||
)}
|
||||
|
||||
<FormControlLabel
|
||||
label={<div className="text-sm">Afficher les résultats</div>}
|
||||
control={
|
||||
<Switch
|
||||
value={showResults}
|
||||
onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
|
||||
setShowResults(e.target.checked)
|
||||
}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
{quizMode === 'teacher' && (
|
||||
<div className="mb-1">
|
||||
{/* <QuestionNavigation
|
||||
|
|
@ -426,7 +437,7 @@ const ManageRoom: React.FC = () => {
|
|||
showAnswer={false}
|
||||
question={currentQuestion?.question as Question}
|
||||
students={students}
|
||||
isDisplayOnly={true}
|
||||
showResults={showResults}
|
||||
/>
|
||||
)}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue