Merge pull request #1749 from dpalou/MOBILE-2847

Mobile 2847

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;
         }
     }

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;
-        }
     }
 }

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;
     }
 

src/addon/qtype/shortanswer/component/addon-qtype-shortanswer.html

@@ -1,8 +1,8 @@
 <section ion-list *ngIf="question.text || question.text === ''">
-    <ion-item text-wrap>
-        <p><core-format-text [component]="component" [componentId]="componentId" [text]="question.text"></core-format-text></p>
+    <ion-item text-wrap class="addon-qtype-shortanswer-text">
+        <core-format-text [component]="component" [componentId]="componentId" [text]="question.text"></core-format-text>
     </ion-item>
-    <ion-item text-wrap ngClass="core-{{question.input.correctIconColor}}-item">
+    <ion-item *ngIf="!question.input.isInline" text-wrap ngClass="core-{{question.input.correctIconColor}}-item">
         <ion-label stacked>{{ 'addon.mod_quiz.answercolon' | translate }}</ion-label>
         <ion-input padding-left type="text" [placeholder]="question.input.readOnly ? '' : 'core.question.answer' | translate" [attr.name]="question.input.name" [value]="question.input.value" autocorrect="off" [disabled]="question.input.readOnly">
         </ion-input>

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;
+        }
+    }
+}

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;

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 = <HTMLElement> questionEl.querySelector('.qtext');
+
+                this.questionHelper.replaceCorrectnessClasses(content);
+                this.questionHelper.treatCorrectnessIcons(content);
+
+                this.question.text = content.innerHTML;
+            }
         }
 
         return questionEl;