From 264b5625b2b5f37ae776b450332bba631ff0ae02 Mon Sep 17 00:00:00 2001
From: Ivan Romakh <ivanrouman@gmail.com>
Date: Wed, 22 Feb 2023 10:00:08 +0200
Subject: [PATCH] #4826 fix for missing word

---
 .../missingWord/MissingWord.scss              | 70 +++++++++++++++++--
 .../questionTypes/missingWord/MissingWord.tsx | 23 ++++--
 2 files changed, 85 insertions(+), 8 deletions(-)

diff --git a/src/components/play/questionTypes/missingWord/MissingWord.scss b/src/components/play/questionTypes/missingWord/MissingWord.scss
index fb6931c7f5..cd51d3b4b1 100644
--- a/src/components/play/questionTypes/missingWord/MissingWord.scss
+++ b/src/components/play/questionTypes/missingWord/MissingWord.scss
@@ -17,6 +17,10 @@
     color: var(--theme-dark-blue);
     font-size: 1.25vw;
 
+    > div {
+      font-size: 0;
+    }
+
     div {
       display: inline;
     }
@@ -38,10 +42,6 @@
       font-family: $font-family-regular;
       font-size: 1.25vw;
       color: var(--theme-dark-blue);
-
-      .MuiSelect-root {
-        line-height: 1;
-      }
     }
 
     .question-hint.correct {
@@ -91,4 +91,66 @@
 .MuiListItem-root {
   color: var(--theme-dark-blue) !important;
   font-family: $font-family-regular !important;
+}
+
+.play-preview-pages .sorted-row .brick-row-container
+.brick-container .introduction-page .missing-word-choice {
+  .MuiSelect-icon {
+    top: unset !important;
+    right: -0.4vw;
+    bottom: -0.3vw;
+  }
+  
+  .MuiSelect-selectMenu {
+    padding-left: 0;
+    padding-right: 0;
+    height: 1.8vw;
+  }
+
+  .MuiInput-underline:before,
+  .MuiInput-underline:after {
+    bottom: -0.5vw;
+  }
+
+  .MuiSelect-root {
+    position: absolute;
+    bottom: -0.5vw;
+  }
+
+  .missing-select {
+    &.correct {
+      .MuiSelect-root {
+        padding-left: 0.5vw !important;
+        background: var(--theme-green);
+      }
+
+      svg {
+        display: none;
+      }
+      &.Mui-disabled:before {
+        border-bottom-style: none !important;
+      }
+    }
+
+    &.wrong {
+      .MuiSelect-root {
+        padding-left: 0.2vw;
+        padding-right: 0.2vw;
+        background: var(--theme-orange);
+      }
+      svg {
+        color: var(--white);
+      }
+      &.MuiInput-underline:before {
+        content: none;
+        border-bottom: none !important;
+      }
+
+      color: var(--white);
+
+      p {
+        color: var(--white);
+      }
+    }
+  }
 }
\ No newline at end of file
diff --git a/src/components/play/questionTypes/missingWord/MissingWord.tsx b/src/components/play/questionTypes/missingWord/MissingWord.tsx
index 461d469ba7..b112762c76 100644
--- a/src/components/play/questionTypes/missingWord/MissingWord.tsx
+++ b/src/components/play/questionTypes/missingWord/MissingWord.tsx
@@ -19,6 +19,7 @@ interface MissingComponent {
 
 interface MissingAttemptAnswer {
   value: number | string;
+  updated?: boolean;
 }
 
 interface MissingWordProps extends CompQuestionProps {
@@ -49,7 +50,10 @@ class MissingWord extends CompComponent<MissingWordProps, MissingWordState> {
     if (props.answers && props.answers.length > 0) {
       userAnswers = props.answers;
     } else if (props.attempt?.answer?.length > 0) {
-      props.attempt.answer.forEach(a => userAnswers.push(a));
+      props.attempt.answer.forEach(a => {
+        a.updated = false;
+        userAnswers.push(a);
+      });
     } else {
       props.component.choices.forEach(() => userAnswers.push({ value: -1 }));
     }
@@ -80,8 +84,11 @@ class MissingWord extends CompComponent<MissingWordProps, MissingWordState> {
 
   setUserAnswer(e: any, index: number) {
     let userAnswers = this.state.userAnswers;
-    userAnswers[index].value = e.target.value as number;
+    let userAnswer = userAnswers[index];
+    userAnswer.value = e.target.value as number;
+    userAnswer.updated = true;
     this.setState({ userAnswers });
+
     if (this.props.onAttempted) {
       this.props.onAttempted();
     }
@@ -115,7 +122,7 @@ class MissingWord extends CompComponent<MissingWordProps, MissingWordState> {
     if (!this.state.userAnswers[index]) {
       return <PageLoader content="...Loading..." />;
     }
-    let { value } = this.state.userAnswers[index];
+    let { value, updated } = this.state.userAnswers[index];
     if (value === -1) value = '';
 
 
@@ -124,10 +131,18 @@ class MissingWord extends CompComponent<MissingWordProps, MissingWordState> {
       disabled = this.isAnswerCorrect(index);
     }
 
+    const isCorrect = disabled;
+    let isWrong = false;
+    if (this.props.isReview && (this.props.attempt === this.props.liveAttempt || (this.props.liveAttempt && this.props.liveAttempt.correct === true))) {
+      if (!updated) {
+        isWrong = !isCorrect;
+      }
+    }
+
     return (
       <Select
         disabled={disabled}
-        className="missing-select"
+        className={`missing-select ${isCorrect ? 'correct' : ''} ${isWrong ? 'wrong' : ''}`}
         value={value}
         IconComponent={ExpandMoreIcon}
         onChange={e => this.setUserAnswer(e, index)}