Merge pull request #1843 from jpeterson976/issue/1826-numeric-input-b…

…ox-weird-with-large-units Fixes input box weirdness for numeric questions w/ large units text
ucfopen · Jul 19, 2021 · 80db90e · 80db90e
2 parents ea64eee + 95439a5
commit 80db90e
Show file tree

Hide file tree

Showing 4 changed files with 158 additions and 86 deletions.
diff --git a/...ges/obonode/obojobo-chunks-numeric-assessment/__snapshots__/viewer-component.test.js.snap b/...ges/obonode/obojobo-chunks-numeric-assessment/__snapshots__/viewer-component.test.js.snap
@@ -86,6 +86,9 @@ exports[`NumericAssessment NumericAssessment renders a correct response 1`] = `
     <div
       className="input-container"
     >
+      <div
+        className="result-symbol"
+      />
       <input
         aria-labelledby="obojobo-draft--chunks--numeric-assessment--answer-input--mock-id"
         autoComplete="off"
@@ -142,6 +145,17 @@ exports[`NumericAssessment NumericAssessment renders a correct response in revie
     <div
       className="input-container"
     >
+      <div
+        className="review-flag"
+      >
+        <div
+          className="obojobo-draft--components--flag is-type-chosen-correctly"
+        >
+          <p>
+            Your Answer (Correct)
+          </p>
+        </div>
+      </div>
       <input
         aria-labelledby="obojobo-draft--chunks--numeric-assessment--answer-input--mock-id"
         autoComplete="off"
@@ -180,15 +194,7 @@ exports[`NumericAssessment NumericAssessment renders a correct response in revie
     </div>
     <div
       className="review"
-    >
-      <div
-        className="obojobo-draft--components--flag is-type-chosen-correctly"
-      >
-        <p>
-          Your Answer (Correct)
-        </p>
-      </div>
-    </div>
+    />
   </div>
 </div>
 `;
@@ -209,6 +215,9 @@ exports[`NumericAssessment NumericAssessment renders a response correct within t
     <div
       className="input-container"
     >
+      <div
+        className="result-symbol"
+      />
       <input
         aria-labelledby="obojobo-draft--chunks--numeric-assessment--answer-input--mock-id"
         autoComplete="off"
@@ -278,6 +287,9 @@ exports[`NumericAssessment NumericAssessment renders an incorrect response 1`] =
     <div
       className="input-container"
     >
+      <div
+        className="result-symbol"
+      />
       <input
         aria-labelledby="obojobo-draft--chunks--numeric-assessment--answer-input--mock-id"
         autoComplete="off"
@@ -331,6 +343,17 @@ exports[`NumericAssessment NumericAssessment renders an incorrect response in re
     <div
       className="input-container"
     >
+      <div
+        className="review-flag"
+      >
+        <div
+          className="obojobo-draft--components--flag is-type-should-not-have-chosen"
+        >
+          <p>
+            Your Answer (Incorrect)
+          </p>
+        </div>
+      </div>
       <input
         aria-labelledby="obojobo-draft--chunks--numeric-assessment--answer-input--mock-id"
         autoComplete="off"
@@ -367,13 +390,6 @@ exports[`NumericAssessment NumericAssessment renders an incorrect response in re
     <div
       className="review"
     >
-      <div
-        className="obojobo-draft--components--flag is-type-should-not-have-chosen"
-      >
-        <p>
-          Your Answer (Incorrect)
-        </p>
-      </div>
       <div
         className="correct-answers"
       >
@@ -428,6 +444,17 @@ exports[`NumericAssessment NumericAssessment renders an incorrect response in re
     <div
       className="input-container"
     >
+      <div
+        className="review-flag"
+      >
+        <div
+          className="obojobo-draft--components--flag is-type-should-not-have-chosen"
+        >
+          <p>
+            Your Answer (Incorrect)
+          </p>
+        </div>
+      </div>
       <input
         aria-labelledby="obojobo-draft--chunks--numeric-assessment--answer-input--mock-id"
         autoComplete="off"
@@ -464,13 +491,6 @@ exports[`NumericAssessment NumericAssessment renders an incorrect response in re
     <div
       className="review"
     >
-      <div
-        className="obojobo-draft--components--flag is-type-should-not-have-chosen"
-      >
-        <p>
-          Your Answer (Incorrect)
-        </p>
-      </div>
       <div
         className="correct-answers"
       >
@@ -501,6 +521,17 @@ exports[`NumericAssessment NumericAssessment renders an incorrect response in re
     <div
       className="input-container"
     >
+      <div
+        className="review-flag"
+      >
+        <div
+          className="obojobo-draft--components--flag is-type-should-not-have-chosen"
+        >
+          <p>
+            Your Answer (Incorrect)
+          </p>
+        </div>
+      </div>
       <input
         aria-labelledby="obojobo-draft--chunks--numeric-assessment--answer-input--mock-id"
         autoComplete="off"
@@ -537,13 +568,6 @@ exports[`NumericAssessment NumericAssessment renders an incorrect response in re
     <div
       className="review"
     >
-      <div
-        className="obojobo-draft--components--flag is-type-should-not-have-chosen"
-      >
-        <p>
-          Your Answer (Incorrect)
-        </p>
-      </div>
       <div
         className="correct-answers"
       >
@@ -584,6 +608,9 @@ exports[`NumericAssessment NumericAssessment still renders when NumericAnswerEva
     <div
       className="input-container"
     >
+      <div
+        className="result-symbol"
+      />
       <input
         aria-labelledby="obojobo-draft--chunks--numeric-assessment--answer-input--mock-id"
         autoComplete="off"

diff --git a/packages/obonode/obojobo-chunks-numeric-assessment/numeric-input-more-info-button.scss b/packages/obonode/obojobo-chunks-numeric-assessment/numeric-input-more-info-button.scss
@@ -4,7 +4,9 @@
 	display: inline-block;
 	position: absolute;
 	left: 0.8em;
-	top: 1.1em;
+	top: 50%;
+	transform: translateY(-50%);
+	z-index: $z-index-above-all;
 
 	.container {
 		font-family: $font-default;
@@ -45,4 +47,13 @@
 			}
 		}
 	}
+
+	@include mq($until: desktop) {
+		left: 0.4em;
+	}
+
+	@include mq($until: tablet) {
+		left: 0.1em;
+		transform: translateY(-165%);
+	}
 }
diff --git a/packages/obonode/obojobo-chunks-numeric-assessment/viewer-component.js b/packages/obonode/obojobo-chunks-numeric-assessment/viewer-component.js
@@ -448,6 +448,18 @@ export default class NumericAssessment extends OboQuestionAssessmentComponent {
 		}
 	}
 
+	renderScoreInfo(score, isReview, isSurvey) {
+		if (isReview) {
+			return (
+				<div className="review-flag">
+					<Flag type={Flag.getType(score === 100, score === 100, true, isSurvey)} />
+				</div>
+			)
+		} else {
+			return <div className="result-symbol" />
+		}
+	}
+
 	render() {
 		const score = this.props.score
 		const scoreClass = this.props.scoreClass
@@ -508,7 +520,11 @@ export default class NumericAssessment extends OboQuestionAssessmentComponent {
 			>
 				<div className="input-section pad">
 					<div className="input-container">
-						{!isScored ? <NumericInputMoreInfoButton /> : null}
+						{!isScored ? (
+							<NumericInputMoreInfoButton />
+						) : (
+							this.renderScoreInfo(score, isReview, isSurvey)
+						)}
 						<input
 							ref={this.inputRef}
 							autoComplete="off"
@@ -550,7 +566,6 @@ export default class NumericAssessment extends OboQuestionAssessmentComponent {
 					) : null}
 					{isReview ? (
 						<div className="review">
-							<Flag type={Flag.getType(score === 100, score === 100, true, isSurvey)} />
 							{score !== 'no-score' && score !== 100 ? (
 								<div className="correct-answers">{this.renderCorrectAnswerList(correctRules)}</div>
 							) : null}