diff --git a/src/addon/mod/quiz/pages/review/review.scss b/src/addon/mod/quiz/pages/review/review.scss index e6b221d31..bb7509562 100644 --- a/src/addon/mod/quiz/pages/review/review.scss +++ b/src/addon/mod/quiz/pages/review/review.scss @@ -2,10 +2,12 @@ ion-app.app-root page-addon-mod-quiz-review { .item-radio-disabled, .item-checkbox-disabled, .item-select-disabled, - .item-input-disabled { + .item-input-disabled, + [disabled], + [readonly] { opacity: 0.8; - .label, .radio, .checkbox, .select-disabled, .core-correct-icon { + .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/addon/qtype/shortanswer/component/addon-qtype-shortanswer.html b/src/addon/qtype/shortanswer/component/addon-qtype-shortanswer.html index 6f31a2d39..42febebf0 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..02c8bd099 --- /dev/null +++ b/src/addon/qtype/shortanswer/component/shortanswer.scss @@ -0,0 +1,18 @@ +addon-qtype-shortanswer { + .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; + } + } +} 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; 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;