From 2daeb6756abce4ae18c9179a349c4d49dd1939c3 Mon Sep 17 00:00:00 2001 From: Jacob Peterson Date: Tue, 1 Jun 2021 14:11:20 -0400 Subject: [PATCH 1/3] restricts input box size and vertically centers elements --- .../numeric-input-more-info-button.scss | 3 ++- .../obojobo-chunks-numeric-assessment/viewer-component.scss | 2 ++ 2 files changed, 4 insertions(+), 1 deletion(-) 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 index 272c463591..8394d6671b 100644 --- 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,8 @@ display: inline-block; position: absolute; left: 0.8em; - top: 1.1em; + top: 50%; + transform: translateY(-50%); .container { font-family: $font-default; diff --git a/packages/obonode/obojobo-chunks-numeric-assessment/viewer-component.scss b/packages/obonode/obojobo-chunks-numeric-assessment/viewer-component.scss index a9aac6bba6..3d59be4f51 100644 --- a/packages/obonode/obojobo-chunks-numeric-assessment/viewer-component.scss +++ b/packages/obonode/obojobo-chunks-numeric-assessment/viewer-component.scss @@ -18,6 +18,8 @@ @include text-input(); width: 11.3em; + height: 1.5em; + align-self: center; &:disabled { background: transparentize($color-bg, 0.3); From 733f910c38523ea3668c7b89490b192c034040c5 Mon Sep 17 00:00:00 2001 From: Jacob Peterson Date: Wed, 2 Jun 2021 15:04:54 -0400 Subject: [PATCH 2/3] vertically centers checkmark and X icons --- .../viewer-component.scss | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/obonode/obojobo-chunks-numeric-assessment/viewer-component.scss b/packages/obonode/obojobo-chunks-numeric-assessment/viewer-component.scss index 3d59be4f51..63f6f76f03 100644 --- a/packages/obonode/obojobo-chunks-numeric-assessment/viewer-component.scss +++ b/packages/obonode/obojobo-chunks-numeric-assessment/viewer-component.scss @@ -114,11 +114,11 @@ &.is-mode-practice::before { content: '✔'; position: absolute; - top: 0.75em; //0.65em; + top: 50%; display: block; color: $color-correct; font-size: 2.5em; - transform: translate(-50%, -50%); + transform: translate(-50%, -55%); left: 0.6em; animation: obojobo-draft--animation--fadein $duration-animation-default * 2; @@ -142,11 +142,11 @@ &.is-mode-practice::before { content: '✖'; position: absolute; - top: 0.75em; //0.65em; + top: 50%; display: block; color: $color-incorrect; font-size: 2.5em; - transform: translate(-50%, -50%); + transform: translate(-50%, -55%); left: 0.6em; animation: obojobo-draft--animation--fadein 0.4s; From 95439a54a4510b85d08498f09896749943c78223 Mon Sep 17 00:00:00 2001 From: Jacob Peterson Date: Mon, 28 Jun 2021 14:49:15 -0400 Subject: [PATCH 3/3] aligns result symbols and review flag when feedback is present --- .../viewer-component.test.js.snap | 87 +++++++----- .../numeric-input-more-info-button.scss | 10 ++ .../viewer-component.js | 19 ++- .../viewer-component.scss | 125 ++++++++++-------- 4 files changed, 155 insertions(+), 86 deletions(-) diff --git a/packages/obonode/obojobo-chunks-numeric-assessment/__snapshots__/viewer-component.test.js.snap b/packages/obonode/obojobo-chunks-numeric-assessment/__snapshots__/viewer-component.test.js.snap index 8115b7d0d4..c660369790 100644 --- a/packages/obonode/obojobo-chunks-numeric-assessment/__snapshots__/viewer-component.test.js.snap +++ b/packages/obonode/obojobo-chunks-numeric-assessment/__snapshots__/viewer-component.test.js.snap @@ -86,6 +86,9 @@ exports[`NumericAssessment NumericAssessment renders a correct response 1`] = `
+
+
+
+

+ Your Answer (Correct) +

+
+
-
-

- Your Answer (Correct) -

-
-
+ />
`; @@ -209,6 +215,9 @@ exports[`NumericAssessment NumericAssessment renders a response correct within t
+
+
+
+
+

+ Your Answer (Incorrect) +

+
+
-
-

- Your Answer (Incorrect) -

-
@@ -428,6 +444,17 @@ exports[`NumericAssessment NumericAssessment renders an incorrect response in re
+
+
+

+ Your Answer (Incorrect) +

+
+
-
-

- Your Answer (Incorrect) -

-
@@ -501,6 +521,17 @@ exports[`NumericAssessment NumericAssessment renders an incorrect response in re
+
+
+

+ Your Answer (Incorrect) +

+
+
-
-

- Your Answer (Incorrect) -

-
@@ -584,6 +608,9 @@ exports[`NumericAssessment NumericAssessment still renders when NumericAnswerEva
+
+ +
+ ) + } else { + return
+ } + } + render() { const score = this.props.score const scoreClass = this.props.scoreClass @@ -508,7 +520,11 @@ export default class NumericAssessment extends OboQuestionAssessmentComponent { >
- {!isScored ? : null} + {!isScored ? ( + + ) : ( + this.renderScoreInfo(score, isReview, isSurvey) + )} - {score !== 'no-score' && score !== 100 ? (
{this.renderCorrectAnswerList(correctRules)}
) : null} diff --git a/packages/obonode/obojobo-chunks-numeric-assessment/viewer-component.scss b/packages/obonode/obojobo-chunks-numeric-assessment/viewer-component.scss index 63f6f76f03..7a4798aebb 100644 --- a/packages/obonode/obojobo-chunks-numeric-assessment/viewer-component.scss +++ b/packages/obonode/obojobo-chunks-numeric-assessment/viewer-component.scss @@ -13,13 +13,13 @@ > .input-section { > .input-container { display: flex; + align-items: center; > .numeric-assessment--input { @include text-input(); width: 11.3em; height: 1.5em; - align-self: center; &:disabled { background: transparentize($color-bg, 0.3); @@ -27,6 +27,30 @@ } } + > .result-symbol { + width: 0; + position: relative; + } + + > .review-flag { + width: 0; + z-index: $z-index-above-content; + + > .obojobo-draft--components--flag { + position: relative; + left: -9.5em; + + @include mq($until: desktop) { + top: -2em; + left: -9em; + } + + @include mq($until: tablet) { + left: -7em; + } + } + } + > .units { display: inline-block; white-space: pre; @@ -77,17 +101,6 @@ margin-top: 1em; display: inline-block; } - - > .obojobo-draft--components--flag { - position: absolute; - left: -5.3em; - top: 1.1em; - - &.is-size-small { - left: -1.9em; - top: 0.3em; - } - } } } @@ -111,27 +124,29 @@ &.is-correct { background: transparentize($color-correct, 0.9); - &.is-mode-practice::before { - content: '✔'; - position: absolute; - top: 50%; - display: block; - color: $color-correct; - font-size: 2.5em; - transform: translate(-50%, -55%); - left: 0.6em; - animation: obojobo-draft--animation--fadein $duration-animation-default * 2; - - @include mq($until: desktop) { - font-size: 1.5em; - top: 1.3em; - left: 0.8em; - } - - @include mq($until: tablet) { - font-size: 1.2em; - top: 0.6em; - left: 0.7em; + &.is-mode-practice { + .input-container { + .result-symbol::before { + content: '✔'; + position: relative; + display: block; + color: $color-correct; + font-size: 2.5em; + left: -1em; + animation: obojobo-draft--animation--fadein $duration-animation-default * 2; + + @include mq($until: desktop) { + font-size: 1.5em; + left: -1.1em; + } + + @include mq($until: tablet) { + font-size: 1.2em; + position: relative; + left: -0.5em; + transform: translateY(-110%); + } + } } } } @@ -139,27 +154,29 @@ &.is-not-correct { background: transparentize($color-incorrect, 0.9); - &.is-mode-practice::before { - content: '✖'; - position: absolute; - top: 50%; - display: block; - color: $color-incorrect; - font-size: 2.5em; - transform: translate(-50%, -55%); - left: 0.6em; - animation: obojobo-draft--animation--fadein 0.4s; - - @include mq($until: desktop) { - font-size: 1.5em; - top: 1.3em; - left: 0.75em; - } - - @include mq($until: tablet) { - font-size: 1.2em; - top: 0.5em; - left: 0.5em; + &.is-mode-practice { + .input-container { + .result-symbol::before { + content: '✖'; + position: relative; + display: block; + color: $color-incorrect; + font-size: 2.5em; + left: -1em; + animation: obojobo-draft--animation--fadein 0.4s; + + @include mq($until: desktop) { + font-size: 1.5em; + left: -1.1em; + } + + @include mq($until: tablet) { + font-size: 1.2em; + position: relative; + left: -0.5em; + transform: translateY(-110%); + } + } } } }