MOBILE-2847 shortanswer: Handle inline answer boxes

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 {

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>
+    <ion-item text-wrap class="addon-qtype-shortanswer-text">
         <p><core-format-text [component]="component" [componentId]="componentId" [text]="question.text"></core-format-text></p>
     </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,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;
+    }
+}

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;