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

Modification affichage latex et titres

Browse source
This commit is contained in:
Melanie St-Hilaire 2024-04-08 21:37:11 -04:00
parent 73f87c9a9e
commit 459f561d36
6 changed files with 47 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
client/src/components/Questions/MultipleChoiceQuestion/MultipleChoiceQuestion.tsx
View file

@ -12,7 +12,8 @@ type Choices = {
}; };
interface Props { interface Props {
questionTitle: string; questionTitle: string | null;
questionContent: string;
choices: Choices[]; choices: Choices[];
globalFeedback?: string | undefined; globalFeedback?: string | undefined;
handleOnSubmitAnswer?: (answer: string) => void; handleOnSubmitAnswer?: (answer: string) => void;
@ -20,7 +21,7 @@ interface Props {
} }
const MultipleChoiceQuestion: React.FC<Props> = (props) => { const MultipleChoiceQuestion: React.FC<Props> = (props) => {
const { questionTitle, choices, showAnswer, handleOnSubmitAnswer, globalFeedback } = props; const { questionTitle, questionContent, choices, showAnswer, handleOnSubmitAnswer, globalFeedback } = props;
const [answer, setAnswer] = useState<string>(); const [answer, setAnswer] = useState<string>();
const handleOnClickAnswer = (choice: string) => { const handleOnClickAnswer = (choice: string) => {
@ -32,7 +33,10 @@ const MultipleChoiceQuestion: React.FC<Props> = (props) => {
return ( return (
<div className="question-container"> <div className="question-container">
<div className="title mb-1 text-center align-h-center"> <div className="title mb-1 text-center align-h-center">
<Latex>{questionTitle}</Latex> {questionTitle}
</div>
<div className="question content">
<Latex>{questionContent}</Latex>
</div> </div>
<div className="choices-wrapper mb-1"> <div className="choices-wrapper mb-1">
{choices.map((choice, i) => { {choices.map((choice, i) => {

14
client/src/components/Questions/NumericalQuestion/NumericalQuestion.tsx
View file

@ -12,7 +12,8 @@ type CorrectAnswer = {
}; };
interface Props { interface Props {
questionTitle: string; questionTitle: string | null;
questionContent: string;
correctAnswers: CorrectAnswer; correctAnswers: CorrectAnswer;
globalFeedback?: string | undefined; globalFeedback?: string | undefined;
handleOnSubmitAnswer?: (answer: number) => void; handleOnSubmitAnswer?: (answer: number) => void;
@ -20,7 +21,7 @@ interface Props {
} }
const NumericalQuestion: React.FC<Props> = (props) => { const NumericalQuestion: React.FC<Props> = (props) => {
const { questionTitle, correctAnswers, showAnswer, handleOnSubmitAnswer, globalFeedback } = const { questionTitle, questionContent, correctAnswers, showAnswer, handleOnSubmitAnswer, globalFeedback } =
props; props;
const [answer, setAnswer] = useState<number>(); const [answer, setAnswer] = useState<number>();
@ -33,7 +34,10 @@ const NumericalQuestion: React.FC<Props> = (props) => {
return ( return (
<div className="question-wrapper"> <div className="question-wrapper">
<div className="title mb-1 text-center center-h-align"> <div className="title mb-1 text-center center-h-align">
<Latex>{questionTitle}</Latex> {questionTitle}
</div>
<div>
<Latex>{questionContent}</Latex>
</div> </div>
{showAnswer ? ( {showAnswer ? (
<> <>
@ -45,8 +49,8 @@ const NumericalQuestion: React.FC<Props> = (props) => {
<div className="answer-wrapper mb-1"> <div className="answer-wrapper mb-1">
<TextField <TextField
type="number" type="number"
id={questionTitle} id={questionContent}
name={questionTitle} name={questionContent}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => { onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
setAnswer(e.target.valueAsNumber); setAnswer(e.target.valueAsNumber);
}} }}

15
client/src/components/Questions/Question.tsx
View file

@ -30,7 +30,8 @@ const Question: React.FC<QuestionProps> = ({
case 'TF': case 'TF':
questionTypeComponent = ( questionTypeComponent = (
<TrueFalseQuestion <TrueFalseQuestion
questionTitle={question.stem.text} questionTitle={question.title}
questionContent={question.stem.text}
correctAnswer={question.isTrue} correctAnswer={question.isTrue}
handleOnSubmitAnswer={handleOnSubmitAnswer} handleOnSubmitAnswer={handleOnSubmitAnswer}
showAnswer={showAnswer} showAnswer={showAnswer}
@ -41,7 +42,8 @@ const Question: React.FC<QuestionProps> = ({
case 'MC': case 'MC':
questionTypeComponent = ( questionTypeComponent = (
<MultipleChoiceQuestion <MultipleChoiceQuestion
questionTitle={question.stem.text} questionTitle={question.title}
questionContent={question.stem.text}
choices={question.choices} choices={question.choices}
handleOnSubmitAnswer={handleOnSubmitAnswer} handleOnSubmitAnswer={handleOnSubmitAnswer}
showAnswer={showAnswer} showAnswer={showAnswer}
@ -54,7 +56,8 @@ const Question: React.FC<QuestionProps> = ({
if (!Array.isArray(question.choices)) { if (!Array.isArray(question.choices)) {
questionTypeComponent = ( questionTypeComponent = (
<NumericalQuestion <NumericalQuestion
questionTitle={question.stem.text} questionTitle={question.title}
questionContent={question.stem.text}
correctAnswers={question.choices} correctAnswers={question.choices}
handleOnSubmitAnswer={handleOnSubmitAnswer} handleOnSubmitAnswer={handleOnSubmitAnswer}
showAnswer={showAnswer} showAnswer={showAnswer}
@ -64,7 +67,8 @@ const Question: React.FC<QuestionProps> = ({
} else { } else {
questionTypeComponent = ( questionTypeComponent = (
<NumericalQuestion <NumericalQuestion
questionTitle={question.stem.text} questionTitle={question.title}
questionContent={question.stem.text}
correctAnswers={question.choices[0].text} correctAnswers={question.choices[0].text}
handleOnSubmitAnswer={handleOnSubmitAnswer} handleOnSubmitAnswer={handleOnSubmitAnswer}
showAnswer={showAnswer} showAnswer={showAnswer}
@ -77,7 +81,8 @@ const Question: React.FC<QuestionProps> = ({
case 'Short': case 'Short':
questionTypeComponent = ( questionTypeComponent = (
<ShortAnswerQuestion <ShortAnswerQuestion
questionTitle={question.stem.text} questionTitle={question.title}
questionContent={question.stem.text}
choices={question.choices} choices={question.choices}
handleOnSubmitAnswer={handleOnSubmitAnswer} handleOnSubmitAnswer={handleOnSubmitAnswer}
showAnswer={showAnswer} showAnswer={showAnswer}

14
client/src/components/Questions/ShortAnswerQuestion/ShortAnswerQuestion.tsx
View file

@ -12,7 +12,8 @@ type Choices = {
}; };
interface Props { interface Props {
questionTitle: string; questionTitle: string | null;
questionContent: string;
choices: Choices[]; choices: Choices[];
globalFeedback?: string | undefined; globalFeedback?: string | undefined;
handleOnSubmitAnswer?: (answer: string) => void; handleOnSubmitAnswer?: (answer: string) => void;
@ -20,13 +21,16 @@ interface Props {
} }
const ShortAnswerQuestion: React.FC<Props> = (props) => { const ShortAnswerQuestion: React.FC<Props> = (props) => {
const { questionTitle, choices, showAnswer, handleOnSubmitAnswer, globalFeedback } = props; const { questionTitle, questionContent, choices, showAnswer, handleOnSubmitAnswer, globalFeedback } = props;
const [answer, setAnswer] = useState<string>(); const [answer, setAnswer] = useState<string>();
return ( return (
<div className="question-wrapper"> <div className="question-wrapper">
<div className="title mb-1 text-center center-h-align"> <div className="title mb-1 text-center center-h-align">
<Latex>{questionTitle}</Latex> {questionTitle}
</div>
<div className="question content">
<Latex>{questionContent}</Latex>
</div> </div>
{showAnswer ? ( {showAnswer ? (
<> <>
@ -42,8 +46,8 @@ const ShortAnswerQuestion: React.FC<Props> = (props) => {
<div className="answer-wrapper mb-1"> <div className="answer-wrapper mb-1">
<TextField <TextField
type="text" type="text"
id={questionTitle} id={questionContent}
name={questionTitle} name={questionContent}
onChange={(e) => { onChange={(e) => {
setAnswer(e.target.value); setAnswer(e.target.value);
}} }}

10
client/src/components/Questions/TrueFalseQuestion/TrueFalseQuestion.tsx
View file

@ -5,7 +5,8 @@ import '../questionStyle.css';
import { Button } from '@mui/material'; import { Button } from '@mui/material';
interface Props { interface Props {
questionTitle: string; questionTitle: string | null;
questionContent: string;
correctAnswer: boolean; correctAnswer: boolean;
globalFeedback?: string | undefined; globalFeedback?: string | undefined;
handleOnSubmitAnswer?: (answer: boolean) => void; handleOnSubmitAnswer?: (answer: boolean) => void;
@ -13,7 +14,7 @@ interface Props {
} }
const TrueFalseQuestion: React.FC<Props> = (props) => { const TrueFalseQuestion: React.FC<Props> = (props) => {
const { questionTitle, correctAnswer, showAnswer, handleOnSubmitAnswer, globalFeedback } = const { questionTitle, questionContent, correctAnswer, showAnswer, handleOnSubmitAnswer, globalFeedback } =
props; props;
const [answer, setAnswer] = useState<boolean | undefined>(undefined); const [answer, setAnswer] = useState<boolean | undefined>(undefined);
@ -26,7 +27,10 @@ const TrueFalseQuestion: React.FC<Props> = (props) => {
return ( return (
<div className="question-container"> <div className="question-container">
<div className="title mb-1"> <div className="title mb-1">
<Latex>{questionTitle}</Latex> {questionTitle}
</div>
<div className="question content">
<Latex>{questionContent}</Latex>
</div> </div>
<div className="choices-wrapper mb-1"> <div className="choices-wrapper mb-1">
<Button <Button

5
client/src/components/Questions/questionStyle.css
View file

@ -26,6 +26,11 @@
justify-content: center; justify-content: center;
} }
.question-wrapper .katex {
display: block;
text-align: center;
}
.circle { .circle {
height: 2.3rem; height: 2.3rem;
width: 2.3rem; width: 2.3rem;