ajout des indices

.gitignore

@@ -129,3 +129,19 @@ dist
 .yarn/install-state.gz
 .pnp.*
 db-backup/
+
+
+.V5/
+.EvaluateTonSavoir/
+config/
+applicationhost.config
+FileContentIndex/
+*.vsidx
+v17/
+.WSuO/
+DocumentLayout.backup.json
+DocumentLayout.json
+ProjectSettings.json
+slnx.sqlite
+slnx.sqlite-journal
+VSWorkspaceState.json

client/src/components/GIFTCheatSheet/GiftCheatSheet.tsx

@@ -19,13 +19,74 @@ const GiftCheatSheet: React.FC = () => {
                 console.error('Erreur lors de la copie dans le presse-papiers : ', error);
             });
     };
-    
 
-    const QuestionVraiFaux = "2+2 \\= 4 ? {T}\n// Utilisez les valeurs {T}, {F}, {TRUE} \net {FALSE}.";
+
-    const QuestionChoixMul = "Quelle ville est la capitale du Canada? {\n~ Toronto\n~ Montréal\n= Ottawa #Bonne réponse!\n}\n// La bonne réponse est Ottawa";
+    const QuestionVraiFaux = `Le soleil se lève à l'ouest. 
-    const QuestionChoixMulMany = "Quelles villes trouve-t-on au Canada? { \n~ %33.3% Montréal \n ~ %33.3% Ottawa \n ~ %33.3% Vancouver \n ~ %-100% New York \n ~ %-100% Paris \n#### La bonne réponse est Montréal, Ottawa et Vancouver \n}\n// Utilisez tilde (signe de vague) pour toutes les réponses.\n// On doit indiquer le pourcentage de chaque réponse.";
+<details>
-    const QuestionCourte ="Avec quoi ouvre-t-on une porte? { \n= clé \n= clef \n}\n// Permet de fournir plusieurs bonnes réponses.\n// Note: La casse n'est pas prise en compte.";
+  <summary>Indice</summary>
-    const QuestionNum ="// Question de plage mathématique. \n Quel est un nombre de 1 à 5 ? {\n#3:2\n}\n \n// Plage mathématique spécifiée avec des points de fin d'intervalle. \n Quel est un nombre de 1 à 5 ? {\n#1..5\n} \n\n// Réponses numériques multiples avec crédit partiel et commentaires.\nQuand est né Ulysses S. Grant ? {\n# =1822:0 # Correct ! Crédit complet. \n=%50%1822:2 # Il est né en 1822. Demi-crédit pour être proche.\n}";
+  <p>La réponse est faux!</p>
+</details>
+{FALSE}
+`;
+
+    const QuestionChoixMul = `<details>
+  <summary>Indice</summary>
+  <p>La capitale du Canada est située au sud de l'Ontario.</p>
+</details>
+Quelle ville est la capitale du Canada ? {
+~ Toronto
+~ Montréal
+= Ottawa #Bonne réponse !
+}`;
+    const QuestionChoixMulMany = `<details>
+  <summary>Indice</summary>
+  <p>Les villes du Canada sont toutes situées dans des provinces du pays.</p>
+</details>
+Quelles villes trouve-t-on au Canada? { 
+~ %33.3% Montréal 
+~ %33.3% Ottawa 
+~ %33.3% Vancouver 
+~ %-100% New York 
+~ %-100% Paris 
+#### La bonne réponse est Montréal, Ottawa et Vancouver
+}`;
+    const QuestionCourte = `<details>
+  <summary>Indice</summary>
+  <p>Une clé ou une clef permet d'ouvrir une porte.</p>
+</details>
+Avec quoi ouvre-t-on une porte? { 
+= clé 
+= clef 
+}
+`;
+    const QuestionNum = `// Question de plage mathématique.
+<details>
+  <summary>Indice</summary>
+  <p>Le nombre doit être compris entre 1 et 5.</p>
+</details>
+Quel est un nombre de 1 à 5 ? {
+#3:2
+}
+
+// Plage mathématique spécifiée avec des points de fin d'intervalle.
+<details>
+  <summary>Indice</summary>
+  <p>Tout nombre entre 1 et 5 est correct.</p>
+</details>
+Quel est un nombre de 1 à 5 ? {
+#1..5
+}
+
+// Réponses numériques multiples avec crédit partiel et commentaires.
+<details>
+  <summary>Indice</summary>
+  <p>Il est né au 19ᵉ siècle.</p>
+</details>
+Quand est né Ulysses S. Grant ? {
+# =1822:0 # Correct ! Crédit complet. 
+=%50%1822:2 # Il est né en 1822. Demi-crédit pour être proche.
+}
+`;
     return (
         <div className="gift-cheat-sheet">
             <h2 className="subtitle">Informations pratiques sur l&apos;éditeur</h2>
@@ -85,7 +146,7 @@ const GiftCheatSheet: React.FC = () => {
                         {
                             QuestionNum
                         }
-                    </code>                    
+                    </code>
                 </pre>
                 <button onClick={() => copyToClipboard(QuestionNum)}>Copier</button>
             </div>
@@ -185,7 +246,7 @@ const GiftCheatSheet: React.FC = () => {
                     Attention: l&apos;ancienne fonctionnalité avec les balises <code>{'<img>'}</code> n&apos;est plus
                     supportée.
                 </p>
-                </div>
+            </div>
             <div className="question-type">
                 <h4> 10. Informations supplémentaires </h4>
                 <p>
@@ -199,6 +260,6 @@ const GiftCheatSheet: React.FC = () => {
             </div>
         </div>
     );
-};  
+};
 
 export default GiftCheatSheet;

client/src/components/QuestionsDisplay/MultipleChoiceQuestionDisplay/MultipleChoiceQuestionDisplay.tsx

@@ -9,11 +9,23 @@ interface Props {
     question: MultipleChoiceQuestion;
     handleOnSubmitAnswer?: (answer: string) => void;
     showAnswer?: boolean;
+    isTeacher?: boolean;
 }
 
 const MultipleChoiceQuestionDisplay: React.FC<Props> = (props) => {
-    const { question, showAnswer, handleOnSubmitAnswer } = props;
+    const { question, showAnswer, handleOnSubmitAnswer, isTeacher } = props;
     const [answer, setAnswer] = useState<string>();
+
+    const cleanHtml = (html: string): string => {
+        if (isTeacher) {
+            return html.replace(/<details>.*?<\/details>/gs, '');
+        }
+        return html;
+    };
+    const getCleanStem = (): string => {
+        const rawHtml = FormattedTextTemplate(question.formattedStem);
+        return cleanHtml(rawHtml);
+    };
     
     useEffect(() => {
         setAnswer(undefined);
@@ -28,7 +40,7 @@ const MultipleChoiceQuestionDisplay: React.FC<Props> = (props) => {
     return (
         <div className="question-container">
             <div className="question content">
-                <div dangerouslySetInnerHTML={{ __html: FormattedTextTemplate(question.formattedStem) }} />
+                <div dangerouslySetInnerHTML={{ __html: getCleanStem() }} />
             </div>
             <div className="choices-wrapper mb-1">
                 {question.choices.map((choice, i) => {

client/src/components/QuestionsDisplay/NumericalQuestionDisplay/NumericalQuestionDisplay.tsx

@@ -10,10 +10,11 @@ interface Props {
     question: NumericalQuestion;
     handleOnSubmitAnswer?: (answer: number) => void;
     showAnswer?: boolean;
+    isTeacher?: boolean;
 }
 
 const NumericalQuestionDisplay: React.FC<Props> = (props) => {
-    const { question, showAnswer, handleOnSubmitAnswer } =
+    const { question, showAnswer, handleOnSubmitAnswer, isTeacher } =
         props;
 
     const [answer, setAnswer] = useState<number>();
@@ -21,6 +22,17 @@ const NumericalQuestionDisplay: React.FC<Props> = (props) => {
     const correctAnswers = question.choices;
     let correctAnswer = '';
 
+    const cleanHtml = (html: string): string => {
+        if (isTeacher) {
+            return html.replace(/<details>.*?<\/details>/gs, '');
+        }
+        return html;
+    };
+    const getCleanStem = (): string => {
+        const rawHtml = FormattedTextTemplate(question.formattedStem);
+        return cleanHtml(rawHtml);
+    };
+
     //const isSingleAnswer = correctAnswers.length === 1;
 
     if (isSimpleNumericalAnswer(correctAnswers[0])) {
@@ -40,7 +52,7 @@ const NumericalQuestionDisplay: React.FC<Props> = (props) => {
     return (
         <div className="question-wrapper">
             <div>
-                <div dangerouslySetInnerHTML={{ __html: FormattedTextTemplate(question.formattedStem) }} />
+                <div dangerouslySetInnerHTML={{ __html: getCleanStem() }} />
             </div>
             {showAnswer ? (
                 <>

client/src/components/QuestionsDisplay/QuestionDisplay.tsx

@@ -11,11 +11,13 @@ interface QuestionProps {
     question: Question;
     handleOnSubmitAnswer?: (answer: string | number | boolean) => void;
     showAnswer?: boolean;
+    isTeacher?: boolean;
 }
 const QuestionDisplay: React.FC<QuestionProps> = ({
     question,
     handleOnSubmitAnswer,
     showAnswer,
+    isTeacher
 }) => {
     // const isMobile = useCheckMobileScreen();
     // const imgWidth = useMemo(() => {
@@ -30,6 +32,7 @@ const QuestionDisplay: React.FC<QuestionProps> = ({
                     question={question}
                     handleOnSubmitAnswer={handleOnSubmitAnswer}
                     showAnswer={showAnswer}
+                    isTeacher={isTeacher} 
                 />
             );
             break;
@@ -39,6 +42,7 @@ const QuestionDisplay: React.FC<QuestionProps> = ({
                     question={question}
                     handleOnSubmitAnswer={handleOnSubmitAnswer}
                     showAnswer={showAnswer}
+                    isTeacher={isTeacher} 
                 />
             );
             break;
@@ -50,6 +54,7 @@ const QuestionDisplay: React.FC<QuestionProps> = ({
                             question={question}
                             handleOnSubmitAnswer={handleOnSubmitAnswer}
                             showAnswer={showAnswer}
+                            isTeacher={isTeacher} 
                         />
                     );
                 } else {
@@ -58,6 +63,7 @@ const QuestionDisplay: React.FC<QuestionProps> = ({
                             question={question}
                             handleOnSubmitAnswer={handleOnSubmitAnswer}
                             showAnswer={showAnswer}
+                            isTeacher={isTeacher} 
                         />
                     );
                 }
@@ -69,6 +75,7 @@ const QuestionDisplay: React.FC<QuestionProps> = ({
                     question={question}
                     handleOnSubmitAnswer={handleOnSubmitAnswer}
                     showAnswer={showAnswer}
+                    isTeacher={isTeacher} 
                 />
             );
             break;

client/src/components/QuestionsDisplay/ShortAnswerQuestionDisplay/ShortAnswerQuestionDisplay.tsx

@@ -8,16 +8,27 @@ interface Props {
     question: ShortAnswerQuestion;
     handleOnSubmitAnswer?: (answer: string) => void;
     showAnswer?: boolean;
+    isTeacher?: boolean;
 }
 
 const ShortAnswerQuestionDisplay: React.FC<Props> = (props) => {
-    const { question, showAnswer, handleOnSubmitAnswer } = props;
+    const { question, showAnswer, handleOnSubmitAnswer, isTeacher} = props;
     const [answer, setAnswer] = useState<string>();
 
+    const cleanHtml = (html: string): string => {
+        if (isTeacher) {
+            return html.replace(/<details>.*?<\/details>/gs, '');
+        }
+        return html;
+    };
+    const getCleanStem = (): string => {
+        const rawHtml = FormattedTextTemplate(question.formattedStem);
+        return cleanHtml(rawHtml);
+    };
     return (
         <div className="question-wrapper">
             <div className="question content">
-                <div dangerouslySetInnerHTML={{ __html: FormattedTextTemplate(question.formattedStem) }} />
+                <div dangerouslySetInnerHTML={{ __html: getCleanStem() }} />
             </div>
             {showAnswer ? (
                 <>

client/src/components/QuestionsDisplay/TrueFalseQuestionDisplay/TrueFalseQuestionDisplay.tsx

@@ -9,13 +9,24 @@ interface Props {
     question: TrueFalseQuestion;
     handleOnSubmitAnswer?: (answer: boolean) => void;
     showAnswer?: boolean;
+    isTeacher?: boolean;
 }
 
 const TrueFalseQuestionDisplay: React.FC<Props> = (props) => {
-    const { question, showAnswer, handleOnSubmitAnswer } =
+    const { question, showAnswer, handleOnSubmitAnswer, isTeacher } =
         props;
     const [answer, setAnswer] = useState<boolean | undefined>(undefined);
 
+    const cleanHtml = (html: string): string => {
+        if (isTeacher) {
+            return html.replace(/<details>.*?<\/details>/gs, '');
+        }
+        return html;
+    };
+    const getCleanStem = (): string => {
+        const rawHtml = FormattedTextTemplate(question.formattedStem);
+        return cleanHtml(rawHtml);
+    };
     useEffect(() => {
         setAnswer(undefined);
     }, [question]);
@@ -25,7 +36,7 @@ const TrueFalseQuestionDisplay: React.FC<Props> = (props) => {
     return (
         <div className="question-container">
             <div className="question content">
-            <div dangerouslySetInnerHTML={{ __html: FormattedTextTemplate(question.formattedStem) }} />
+                <div dangerouslySetInnerHTML={{ __html: getCleanStem() }} />
             </div>
             <div className="choices-wrapper mb-1">
                 <Button

client/src/components/StudentModeQuiz/StudentModeQuiz.tsx

@@ -66,6 +66,7 @@ const StudentModeQuiz: React.FC<StudentModeQuizProps> = ({
                     handleOnSubmitAnswer={handleOnSubmitAnswer}
                     question={questionInfos.question as Question}
                     showAnswer={isAnswerSubmitted}
+                    isTeacher={false}
                     />
                 <div className="center-h-align mt-1/2">
                     <div className="w-12">

client/src/components/TeacherModeQuiz/TeacherModeQuiz.tsx

@@ -65,6 +65,7 @@ const TeacherModeQuiz: React.FC<TeacherModeQuizProps> = ({
                 <QuestionComponent
                     handleOnSubmitAnswer={handleOnSubmitAnswer}
                     question={questionInfos.question as Question}
+                    isTeacher={true}
                 />
             )}
 
@@ -79,6 +80,7 @@ const TeacherModeQuiz: React.FC<TeacherModeQuizProps> = ({
                     handleOnSubmitAnswer={handleOnSubmitAnswer}
                     question={questionInfos.question as Question}
                     showAnswer={true}
+                    isTeacher={true} 
                     />
                 </DialogContent>
                 <DialogActions>

package-lock.json

@@ -0,0 +1,6 @@
+{
+  "name": "EvalueTonSavoir",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {}
+}