[BUG] Lors des rétroaction, l'affichage du feedback associé aux réponses pour MultipleChoice décale les boutons

Fixes #231

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

@@ -17,7 +17,6 @@ const MultipleChoiceQuestionDisplay: React.FC<Props> = (props) => {
     const { question, showAnswer, handleOnSubmitAnswer, passedAnswer } = props;
     const [answer, setAnswer] = useState<AnswerType>(passedAnswer || '');
 
-
     let disableButton = false;
     if(handleOnSubmitAnswer === undefined){
         disableButton = true;
@@ -29,6 +28,14 @@ const MultipleChoiceQuestionDisplay: React.FC<Props> = (props) => {
     }
     }, [passedAnswer]);
 
+    useEffect(() => {
+        const buttonWrapper = document.querySelector('.button-wrapper') as HTMLElement;
+        if (buttonWrapper) {
+            const buttonWrapperWidth = buttonWrapper.offsetWidth;
+            document.documentElement.style.setProperty('--button-wrapper-width', `${buttonWrapperWidth}px`);
+        }
+    }, [question.choices, answer, showAnswer]);
+
     const handleOnClickAnswer = (choice: string) => {
         setAnswer(choice);
     };
@@ -41,7 +48,6 @@ const MultipleChoiceQuestionDisplay: React.FC<Props> = (props) => {
                 <div dangerouslySetInnerHTML={{ __html: FormattedTextTemplate(question.formattedStem) }} />
             </div>
             <div className="choices-wrapper mb-1">
-                
                 {question.choices.map((choice, i) => {
                     const selected = answer === choice.formattedText.text ? 'selected' : '';
                     return (
@@ -50,15 +56,14 @@ const MultipleChoiceQuestionDisplay: React.FC<Props> = (props) => {
                                 variant="text"
                                 className="button-wrapper"
                                 disabled={disableButton}
-                                onClick={() => !showAnswer && handleOnClickAnswer(choice.formattedText.text)}>
+                                onClick={() => !showAnswer && handleOnClickAnswer(choice.formattedText.text)}>                                {showAnswer? (<div> {(choice.isCorrect ? '✅' : '❌')}</div>)
-                                {showAnswer? (<div> {(choice.isCorrect ? '✅' : '❌')}</div>)
                                 :``}
                                 <div className={`circle ${selected}`}>{alphabet[i]}</div>
                                 <div className={`answer-text ${selected}`}>
                                     <div dangerouslySetInnerHTML={{ __html: FormattedTextTemplate(choice.formattedText) }} />
                                 </div>
                                 {choice.formattedFeedback && showAnswer && (
-                                <div className="feedback-container mb-1 mt-1/2">
+                                <div className="feedback-container">
                                     <div dangerouslySetInnerHTML={{ __html: FormattedTextTemplate(choice.formattedFeedback) }} />
                                 </div>
                             )}
@@ -67,6 +72,7 @@ const MultipleChoiceQuestionDisplay: React.FC<Props> = (props) => {
                         </div>
                     );
                 })}
+                
             </div>
             {question.formattedGlobalFeedback && showAnswer && (
                 <div className="global-feedback mb-2">

client/src/components/QuestionsDisplay/questionStyle.css

@@ -31,7 +31,8 @@
 }
 
 .katex * {
-    font-family: 'KaTeX_Main'  /* to display characters like \neq properly */
+    font-family: 'KaTeX_Main'
+        /* to display characters like \neq properly */
 }
 
 .circle {
@@ -54,15 +55,6 @@
     color: white;
 }
 
-.button-wrapper {
-    border: 0;
-    display: flex;
-    column-gap: 0.5rem;
-    align-items: center;
-    background-color: transparent;
-    margin-bottom: 0.25rem;
-}
-
 .answer-text {
     border-width: 1px;
     border-style: solid;
@@ -97,15 +89,11 @@
 }
 
 .answer-positive-weight {
-    background-color: hsl(
+    background-color: hsl(120, 100%, 90%);
-        120, 100%, 90%
-    );
 }
 
 .answer-zero-or-less-weight {
-    background-color: hsl(
+    background-color: hsl(0, 100%, 90%);
-        0, 100%, 90%
-    );
 }
 
 .answer-text.selected {
@@ -113,22 +101,33 @@
     color: white;
 }
 
+.button-wrapper {
+    border: 0;
+    display: flex;
+    column-gap: 0.5rem;
+    background-color: transparent;
+    margin-bottom: 0.25rem;
+}
+
 .choice-container {
     display: flex;
     flex-direction: column;
+    align-items: center;
+    align-content: center;
 }
 
+
 .feedback-container {
-    display: inline-block !important; /* override the parent */
+    position: absolute;
-    align-items: center;
+    right: calc(-1 * var(--button-wrapper-width)); 
     margin-left: 1.1rem;
-    position: relative;
     padding: 0 0.5rem;
     background-color: hsl(43, 100%, 94%);
     color: hsl(43, 95%, 9%);
     border: hsl(36, 84%, 93%) 1px solid;
     border-radius: 6px;
     box-shadow: 0px 2px 5px hsl(0, 0%, 74%);
+    width: var(--button-wrapper-width);
 }
 
 .feedback-container img {
@@ -156,6 +155,7 @@
     border-radius: 6px;
     box-shadow: 0px 2px 5px hsl(0, 0%, 74%);
 }
+
 .false-feedback {
     position: relative;
     padding: 0 1rem;
@@ -168,4 +168,4 @@
 
 .choices-wrapper {
     width: 90%;
-}
+}