From 108fd65aa04244748a500c86b27ae2f03836f722 Mon Sep 17 00:00:00 2001 From: Dani Palou Date: Thu, 31 Jan 2019 10:38:30 +0100 Subject: [PATCH 1/3] MOBILE-2847 shortanswer: Handle inline answer boxes --- src/addon/mod/quiz/pages/review/review.scss | 3 ++- .../component/addon-qtype-shortanswer.html | 4 ++-- .../qtype/shortanswer/component/shortanswer.scss | 11 +++++++++++ .../question/classes/base-question-component.ts | 13 ++++++++++++- 4 files changed, 27 insertions(+), 4 deletions(-) create mode 100644 src/addon/qtype/shortanswer/component/shortanswer.scss diff --git a/src/addon/mod/quiz/pages/review/review.scss b/src/addon/mod/quiz/pages/review/review.scss index e6b221d31..47b755a75 100644 --- a/src/addon/mod/quiz/pages/review/review.scss +++ b/src/addon/mod/quiz/pages/review/review.scss @@ -2,7 +2,8 @@ ion-app.app-root page-addon-mod-quiz-review { .item-radio-disabled, .item-checkbox-disabled, .item-select-disabled, - .item-input-disabled { + .item-input-disabled, + .text-input[disabled] { opacity: 0.8; .label, .radio, .checkbox, .select-disabled, .core-correct-icon { diff --git a/src/addon/qtype/shortanswer/component/addon-qtype-shortanswer.html b/src/addon/qtype/shortanswer/component/addon-qtype-shortanswer.html index 6f31a2d39..b73d8d7be 100644 --- a/src/addon/qtype/shortanswer/component/addon-qtype-shortanswer.html +++ b/src/addon/qtype/shortanswer/component/addon-qtype-shortanswer.html @@ -1,8 +1,8 @@
- +

- + {{ 'addon.mod_quiz.answercolon' | translate }} diff --git a/src/addon/qtype/shortanswer/component/shortanswer.scss b/src/addon/qtype/shortanswer/component/shortanswer.scss new file mode 100644 index 000000000..a49c2e2c3 --- /dev/null +++ b/src/addon/qtype/shortanswer/component/shortanswer.scss @@ -0,0 +1,11 @@ +addon-qtype-shortanswer { + .addon-qtype-shortanswer-text input { + display: inline-block; + border: 1px solid #ccc; + padding: 4px 6px; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; + margin-bottom: 10px; + } +} diff --git a/src/core/question/classes/base-question-component.ts b/src/core/question/classes/base-question-component.ts index 2e78a2dfe..1a1dfafa0 100644 --- a/src/core/question/classes/base-question-component.ts +++ b/src/core/question/classes/base-question-component.ts @@ -289,7 +289,8 @@ export class CoreQuestionBaseComponent { id: input.id, name: input.name, value: input.value, - readOnly: input.readOnly + readOnly: input.readOnly, + isInline: !!this.domUtils.closest(input, '.qtext') // The answer can be inside the question text. }; // Check if question is marked as correct. @@ -310,6 +311,16 @@ export class CoreQuestionBaseComponent { this.question.input.correctIcon = ''; this.question.input.correctIconColor = ''; } + + if (this.question.input.isInline) { + // Handle correct/incorrect classes and icons. + const content = questionEl.querySelector('.qtext'); + + this.questionHelper.replaceCorrectnessClasses(content); + this.questionHelper.treatCorrectnessIcons(content); + + this.question.text = content.innerHTML; + } } return questionEl; From 2e14b9bc8a1b9028b7137ea1d01b524917368a7c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= Date: Thu, 31 Jan 2019 12:27:50 +0100 Subject: [PATCH 2/3] MOBILE-2847 quiz: Review shortanswer question styles --- src/addon/mod/quiz/pages/review/review.scss | 2 +- .../component/addon-qtype-shortanswer.html | 2 +- .../shortanswer/component/shortanswer.scss | 23 ++++++++++++------- 3 files changed, 17 insertions(+), 10 deletions(-) diff --git a/src/addon/mod/quiz/pages/review/review.scss b/src/addon/mod/quiz/pages/review/review.scss index 47b755a75..ca5b7d400 100644 --- a/src/addon/mod/quiz/pages/review/review.scss +++ b/src/addon/mod/quiz/pages/review/review.scss @@ -6,7 +6,7 @@ ion-app.app-root page-addon-mod-quiz-review { .text-input[disabled] { opacity: 0.8; - .label, .radio, .checkbox, .select-disabled, .core-correct-icon { + .label, .radio, .checkbox, .select-disabled, .core-correct-icon, .text-input[disabled] { opacity: 1; } } diff --git a/src/addon/qtype/shortanswer/component/addon-qtype-shortanswer.html b/src/addon/qtype/shortanswer/component/addon-qtype-shortanswer.html index b73d8d7be..42febebf0 100644 --- a/src/addon/qtype/shortanswer/component/addon-qtype-shortanswer.html +++ b/src/addon/qtype/shortanswer/component/addon-qtype-shortanswer.html @@ -1,6 +1,6 @@
-

+ {{ 'addon.mod_quiz.answercolon' | translate }} diff --git a/src/addon/qtype/shortanswer/component/shortanswer.scss b/src/addon/qtype/shortanswer/component/shortanswer.scss index a49c2e2c3..02c8bd099 100644 --- a/src/addon/qtype/shortanswer/component/shortanswer.scss +++ b/src/addon/qtype/shortanswer/component/shortanswer.scss @@ -1,11 +1,18 @@ addon-qtype-shortanswer { - .addon-qtype-shortanswer-text input { - display: inline-block; - border: 1px solid #ccc; - padding: 4px 6px; - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; - margin-bottom: 10px; + .addon-qtype-shortanswer-text { + ion-label.label { + margin-bottom: 0; + } + + input { + @include placeholder($text-input-placeholder-color); + @include appearance(none); + @include border-radius(4px); + display: inline-block; + border: 1px solid $gray-dark; + padding: 6px 8px; + @include margin-horizontal(2px); + margin-bottom: 10px; + } } } From 5c2586b54fd8fb60ba0e7da9f37e0e7be881cabd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= Date: Thu, 31 Jan 2019 13:23:21 +0100 Subject: [PATCH 3/3] MOBILE-2847 quiz: Review multianswer question styles --- src/addon/mod/quiz/pages/review/review.scss | 5 +++-- .../qtype/gapselect/component/gapselect.scss | 6 ------ .../multianswer/component/multianswer.scss | 10 +++++----- src/app/app.scss | 18 ++++++++++++++++-- 4 files changed, 24 insertions(+), 15 deletions(-) diff --git a/src/addon/mod/quiz/pages/review/review.scss b/src/addon/mod/quiz/pages/review/review.scss index ca5b7d400..bb7509562 100644 --- a/src/addon/mod/quiz/pages/review/review.scss +++ b/src/addon/mod/quiz/pages/review/review.scss @@ -3,10 +3,11 @@ ion-app.app-root page-addon-mod-quiz-review { .item-checkbox-disabled, .item-select-disabled, .item-input-disabled, - .text-input[disabled] { + [disabled], + [readonly] { opacity: 0.8; - .label, .radio, .checkbox, .select-disabled, .core-correct-icon, .text-input[disabled] { + .label, .radio, .checkbox, .select-disabled, .core-correct-icon, [disabled], [readonly] { opacity: 1; } } diff --git a/src/addon/qtype/gapselect/component/gapselect.scss b/src/addon/qtype/gapselect/component/gapselect.scss index 5311db7c8..53ceeba30 100644 --- a/src/addon/qtype/gapselect/component/gapselect.scss +++ b/src/addon/qtype/gapselect/component/gapselect.scss @@ -15,11 +15,5 @@ ion-app.app-root addon-qtype-gapselect { border-radius: 4px; margin-bottom: 10px; background: $gray-lighter; - - &.core-question-answer-correct, - &.core-question-answer-incorrect { - background-color: $gray-lighter; - color: $text-color; - } } } diff --git a/src/addon/qtype/multianswer/component/multianswer.scss b/src/addon/qtype/multianswer/component/multianswer.scss index 5d116515e..f63e3e5ca 100644 --- a/src/addon/qtype/multianswer/component/multianswer.scss +++ b/src/addon/qtype/multianswer/component/multianswer.scss @@ -22,12 +22,12 @@ addon-qtype-multianswer { } input, select { + @include border-radius(4px); + display: inline-block; - border: 1px solid #ccc; - padding: 4px 6px; - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; + border: 1px solid $gray-dark; + padding: 6px 8px; + @include margin-horizontal(2px); margin-bottom: 10px; } diff --git a/src/app/app.scss b/src/app/app.scss index 902622a0c..04e9a7c77 100644 --- a/src/app/app.scss +++ b/src/app/app.scss @@ -477,7 +477,22 @@ ion-app.app-root { margin-bottom: 0; } - .core-question-answer-correct, + + .core-question-answer-correct { + color: $core-question-correct-color; + } + + .core-question-answer-incorrect { + color: $core-question-incorrect-color; + } + + input, select { + &.core-question-answer-correct, &.core-question-answer-incorrect { + background-color: $gray-lighter; + color: $text-color; + } + } + .core-question-correct, .core-question-comment { color: $core-question-correct-color; @@ -494,7 +509,6 @@ ion-app.app-root { } } - .core-question-answer-incorrect, .core-question-incorrect { color: $core-question-incorrect-color; background-color: $core-question-incorrect-color-bg;