From d2fc0ed4200be16862bf7c6210508d5747093463 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Mon, 28 Jan 2019 11:10:33 +0100
Subject: [PATCH 1/2] MOBILE-2812 ux: Imrpove module icons sizes

---
 src/app/app.scss                       | 2 ++
 src/core/grades/pages/grade/grade.html | 4 ++--
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/app/app.scss b/src/app/app.scss
index 17b534f24..b8b9ec993 100644
--- a/src/app/app.scss
+++ b/src/app/app.scss
@@ -134,6 +134,8 @@ ion-app.app-root {
 
   .core-module-icon {
     width: auto;
+    max-width: 24px;
+    max-height: 24px;
   }
 
   .core-button-spinner {
diff --git a/src/core/grades/pages/grade/grade.html b/src/core/grades/pages/grade/grade.html
index 232f3a302..7bb1b117d 100644
--- a/src/core/grades/pages/grade/grade.html
+++ b/src/core/grades/pages/grade/grade.html
@@ -13,13 +13,13 @@
         <ion-list *ngIf="grade">
             <a ion-item *ngIf="grade.itemname && grade.link" text-wrap detail-push [href]="grade.link" core-link capture="true">
                 <ion-icon *ngIf="grade.icon" name="{{grade.icon}}" item-start></ion-icon>
-                <img *ngIf="grade.image" [src]="grade.image" item-start/>
+                <img *ngIf="grade.image" [src]="grade.image" item-start class="core-module-icon"/>
                 <h2><core-format-text [text]="grade.itemname"></core-format-text></h2>
             </a>
 
             <ion-item *ngIf="grade.itemname && !grade.link" text-wrap >
                 <ion-icon *ngIf="grade.icon" name="{{grade.icon}}" item-start></ion-icon>
-                <img *ngIf="grade.image" [src]="grade.image" item-start/>
+                <img *ngIf="grade.image" [src]="grade.image" item-start class="core-module-icon"/>
                 <h2><core-format-text [text]="grade.itemname"></core-format-text></h2>
             </ion-item>
 

From 9d320b5914a912ebd3c407af4168e63bfb6fed89 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Mon, 28 Jan 2019 17:42:50 +0100
Subject: [PATCH 2/2] MOBILE-2812 quiz: Update styles to match web version

---
 .../index/addon-mod-quiz-index.html           |  4 +-
 src/addon/mod/quiz/lang/en.json               |  1 +
 src/addon/mod/quiz/pages/attempt/attempt.html | 20 ++++----
 .../navigation-modal/navigation-modal.html    |  4 ++
 .../navigation-modal.module.ts                |  2 +
 .../navigation-modal/navigation-modal.scss    | 46 ++++++++++++++++---
 src/addon/mod/quiz/pages/player/player.scss   |  5 ++
 src/addon/mod/quiz/pages/review/review.html   | 34 +++++++-------
 src/addon/mod/quiz/pages/review/review.scss   | 11 +++--
 .../qtype/calculated/calculated.module.ts     |  2 +
 .../component/addon-qtype-calculated.html     | 12 +++--
 .../calculated/component/calculated.scss      |  5 ++
 .../component/ddimageortext.scss              | 30 +++---------
 src/addon/qtype/ddmarker/classes/ddmarker.ts  | 18 ++------
 .../qtype/ddmarker/component/ddmarker.scss    |  2 +-
 src/addon/qtype/ddwtos/component/ddwtos.scss  | 30 +++---------
 .../qtype/gapselect/component/gapselect.scss  |  8 +++-
 .../match/component/addon-qtype-match.html    | 13 ++++--
 src/addon/qtype/match/component/match.scss    | 10 ++++
 src/addon/qtype/match/match.module.ts         |  2 +
 .../component/addon-qtype-multianswer.html    |  2 +-
 .../component/addon-qtype-multichoice.html    | 22 +++++----
 .../multichoice/component/multichoice.scss    | 13 ++++++
 .../qtype/multichoice/multichoice.module.ts   |  2 +
 .../component/addon-qtype-shortanswer.html    |  8 +++-
 .../qtype/shortanswer/shortanswer.module.ts   |  2 +
 src/app/app.scss                              | 26 ++++++++++-
 src/assets/lang/en.json                       |  1 +
 .../classes/base-question-component.ts        | 14 +++++-
 src/theme/variables.scss                      |  4 ++
 30 files changed, 225 insertions(+), 128 deletions(-)
 create mode 100644 src/addon/qtype/calculated/component/calculated.scss
 create mode 100644 src/addon/qtype/match/component/match.scss
 create mode 100644 src/addon/qtype/multichoice/component/multichoice.scss

diff --git a/src/addon/mod/quiz/components/index/addon-mod-quiz-index.html b/src/addon/mod/quiz/components/index/addon-mod-quiz-index.html
index 5304251e7..6316b64cc 100644
--- a/src/addon/mod/quiz/components/index/addon-mod-quiz-index.html
+++ b/src/addon/mod/quiz/components/index/addon-mod-quiz-index.html
@@ -22,11 +22,11 @@
                 <p>{{ rule }}</p>
             </ion-item>
             <ion-item text-wrap *ngIf="quiz && quiz.gradeMethodReadable">
-                <p class="item-heading">{{ 'addon.mod_quiz.grademethod' | translate }}</p>
+                <h2>{{ 'addon.mod_quiz.grademethod' | translate }}</h2>
                 <p>{{ quiz.gradeMethodReadable }}</p>
             </ion-item>
             <ion-item text-wrap *ngIf="syncTime">
-                <p class="item-heading">{{ 'core.lastsync' | translate }}</p>
+                <h2>{{ 'core.lastsync' | translate }}</h2>
                 <p>{{ syncTime }}</p>
             </ion-item>
         </ion-list>
diff --git a/src/addon/mod/quiz/lang/en.json b/src/addon/mod/quiz/lang/en.json
index 99887b291..18a699dda 100644
--- a/src/addon/mod/quiz/lang/en.json
+++ b/src/addon/mod/quiz/lang/en.json
@@ -1,4 +1,5 @@
 {
+    "answercolon": "Answer:",
     "attemptfirst": "First attempt",
     "attemptlast": "Last attempt",
     "attemptnumber": "Attempt",
diff --git a/src/addon/mod/quiz/pages/attempt/attempt.html b/src/addon/mod/quiz/pages/attempt/attempt.html
index bc95ab867..aa4dc3b5f 100644
--- a/src/addon/mod/quiz/pages/attempt/attempt.html
+++ b/src/addon/mod/quiz/pages/attempt/attempt.html
@@ -9,25 +9,25 @@
     </ion-refresher>
     <core-loading [hideUntil]="loaded">
         <ion-list *ngIf="attempt">
-            <ion-item text-wrap>
-                <p class="item-heading">{{ 'addon.mod_quiz.attemptnumber' | translate }}</p>
+            <ion-item text-wrap no-lines>
+                <h2>{{ 'addon.mod_quiz.attemptnumber' | translate }}</h2>
                 <p *ngIf="attempt.preview">{{ 'addon.mod_quiz.preview' | translate }}</p>
                 <p *ngIf="!attempt.preview">{{ attempt.attempt }}</p>
             </ion-item>
-            <ion-item text-wrap>
-                <p class="item-heading">{{ 'addon.mod_quiz.attemptstate' | translate }}</p>
+            <ion-item text-wrap no-lines>
+                <h2>{{ 'addon.mod_quiz.attemptstate' | translate }}</h2>
                 <p *ngFor="let sentence of attempt.readableState">{{ sentence }}</p>
             </ion-item>
-            <ion-item text-wrap *ngIf="quiz.showMarkColumn && attempt.readableMark !== ''">
-                <p class="item-heading">{{ 'addon.mod_quiz.marks' | translate }} / {{ quiz.sumGradesFormatted }}</p>
+            <ion-item text-wrap no-lines *ngIf="quiz.showMarkColumn && attempt.readableMark !== ''">
+                <h2>{{ 'addon.mod_quiz.marks' | translate }} / {{ quiz.sumGradesFormatted }}</h2>
                 <p>{{ attempt.readableMark }}</p>
             </ion-item>
-            <ion-item text-wrap *ngIf="quiz.showGradeColumn && attempt.readableGrade !== ''">
-                <p class="item-heading">{{ 'addon.mod_quiz.grade' | translate }} / {{ quiz.gradeFormatted }}</p>
+            <ion-item text-wrap no-lines *ngIf="quiz.showGradeColumn && attempt.readableGrade !== ''">
+                <h2>{{ 'addon.mod_quiz.grade' | translate }} / {{ quiz.gradeFormatted }}</h2>
                 <p>{{ attempt.readableGrade }}</p>
             </ion-item>
-            <ion-item text-wrap *ngIf="quiz.showFeedbackColumn && attempt.feedback">
-                <p class="item-heading">{{ 'addon.mod_quiz.feedback' | translate }}</p>
+            <ion-item text-wrap no-lines *ngIf="quiz.showFeedbackColumn && attempt.feedback">
+                <h2>{{ 'addon.mod_quiz.feedback' | translate }}</h2>
                 <p><core-format-text [component]="component" [componentId]="componentId" [text]="attempt.feedback"></core-format-text></p>
             </ion-item>
             <ion-item *ngIf="quiz.showReviewColumn && attempt.finished">
diff --git a/src/addon/mod/quiz/pages/navigation-modal/navigation-modal.html b/src/addon/mod/quiz/pages/navigation-modal/navigation-modal.html
index 7c90fd6f1..ded960206 100644
--- a/src/addon/mod/quiz/pages/navigation-modal/navigation-modal.html
+++ b/src/addon/mod/quiz/pages/navigation-modal/navigation-modal.html
@@ -24,6 +24,10 @@
             <a ion-item text-wrap *ngFor="let question of pageInstance.navigation" class="{{question.stateClass}}" [ngClass]='{"addon-mod_quiz-selected": !pageInstance.showSummary && pageInstance.attempt.currentpage == question.page}' (click)="loadPage(question.page, question.slot)">
                 <span *ngIf="question.number">{{ 'core.question.questionno' | translate:{$a: question.number} }}</span>
                 <span *ngIf="!question.number">{{ 'core.question.information' | translate }}</span>
+                <core-icon item-content *ngIf="!question.number" name="information-circle" color="info"></core-icon>
+                <core-icon item-content *ngIf="question.stateClass == 'core-question-correct'" name="fa-check" color="success"></core-icon>
+                <core-icon item-content *ngIf="question.stateClass == 'core-question-partiallycorrect'" name="fa-check-square" color="warning"></core-icon>
+                <core-icon item-content *ngIf="question.stateClass == 'core-question-incorrect' || question.stateClass == 'core-question-notanswered'" name="fa-remove" color="danger"></core-icon>
             </a>
 
             <!-- In player, show button to finish attempt. -->
diff --git a/src/addon/mod/quiz/pages/navigation-modal/navigation-modal.module.ts b/src/addon/mod/quiz/pages/navigation-modal/navigation-modal.module.ts
index 04ed4ca98..1152efb6f 100644
--- a/src/addon/mod/quiz/pages/navigation-modal/navigation-modal.module.ts
+++ b/src/addon/mod/quiz/pages/navigation-modal/navigation-modal.module.ts
@@ -16,6 +16,7 @@ import { NgModule } from '@angular/core';
 import { IonicPageModule } from 'ionic-angular';
 import { AddonModQuizNavigationModalPage } from './navigation-modal';
 import { TranslateModule } from '@ngx-translate/core';
+import { CoreComponentsModule } from '@components/components.module';
 import { CoreDirectivesModule } from '@directives/directives.module';
 
 @NgModule({
@@ -24,6 +25,7 @@ import { CoreDirectivesModule } from '@directives/directives.module';
     ],
     imports: [
         CoreDirectivesModule,
+        CoreComponentsModule,
         IonicPageModule.forChild(AddonModQuizNavigationModalPage),
         TranslateModule.forChild()
     ]
diff --git a/src/addon/mod/quiz/pages/navigation-modal/navigation-modal.scss b/src/addon/mod/quiz/pages/navigation-modal/navigation-modal.scss
index a7b609f48..f732e2949 100644
--- a/src/addon/mod/quiz/pages/navigation-modal/navigation-modal.scss
+++ b/src/addon/mod/quiz/pages/navigation-modal/navigation-modal.scss
@@ -14,15 +14,49 @@ ion-app.app-root page-addon-mod-quiz-navigation-modal {
         }
     }
 
-    .item.core-question-correct .item-inner {
-        @include push-arrow-color($core-question-correct-color);
+    .item.core-question-correct {
+        &.addon-mod_quiz-selected {
+            @include border-start(5px, solid, $core-question-correct-color);
+        }
+
+        .item-inner {
+            @include push-arrow-color($core-question-correct-color);
+            border-bottom-color: $core-question-correct-color;
+        }
     }
 
-    .item.core-question-incorrect .item-inner {
-        @include push-arrow-color($core-question-incorrect-color);
+    .item.core-question-incorrect,
+    .item.core-question-notanswered {
+        &.addon-mod_quiz-selected {
+            @include border-start(5px, solid, $core-question-incorrect-color);
+        }
+
+        .item-inner {
+            @include push-arrow-color($core-question-incorrect-color);
+            border-bottom-color: $core-question-incorrect-color;
+        }
     }
 
-    .item.core-question-answersaved .item-inner {
-        @include push-arrow-color($text-color);
+    .item.core-question-partiallycorrect {
+        &.addon-mod_quiz-selected {
+            @include border-start(5px, solid, $core-question-state-partial-text);
+        }
+
+        .item-inner {
+            @include push-arrow-color($core-question-state-partial-text);
+            border-bottom-color: $core-question-state-partial-text;
+        }
+    }
+
+    .item.core-question-requiresgrading,
+    .item.core-question-answersaved {
+        &.addon-mod_quiz-selected {
+            @include border-start(5px, solid, $text-color);
+        }
+
+        .item-inner {
+            @include push-arrow-color($text-color);
+            border-bottom-color: $text-color;
+        }
     }
 }
diff --git a/src/addon/mod/quiz/pages/player/player.scss b/src/addon/mod/quiz/pages/player/player.scss
index 5766ea400..d7febf8dd 100644
--- a/src/addon/mod/quiz/pages/player/player.scss
+++ b/src/addon/mod/quiz/pages/player/player.scss
@@ -11,4 +11,9 @@ ion-app.app-root page-addon-mod-quiz-player {
     .toolbar-ios .bar-buttons-ios .bar-button {
         @include padding-horizontal($content-padding);
     }
+
+    .core-question-container {
+        display: block;
+        padding-bottom: $content-padding;
+    }
 }
\ No newline at end of file
diff --git a/src/addon/mod/quiz/pages/review/review.html b/src/addon/mod/quiz/pages/review/review.html
index be085af08..f7682f1b2 100644
--- a/src/addon/mod/quiz/pages/review/review.html
+++ b/src/addon/mod/quiz/pages/review/review.html
@@ -22,36 +22,36 @@
                 <h2 *ngIf="!attempt.preview">{{ 'addon.mod_quiz.reviewofattempt' | translate:{$a: attempt.attempt} }}</h2>
             </ion-card-header>
             <ion-list>
-                <ion-item text-wrap>
-                    <p class="item-heading">{{ 'addon.mod_quiz.startedon' | translate }}</p>
+                <ion-item text-wrap no-lines>
+                    <h2>{{ 'addon.mod_quiz.startedon' | translate }}</h2>
                     <p>{{ attempt.timestart * 1000 | coreFormatDate }}</p>
                 </ion-item>
-                <ion-item text-wrap>
-                    <p class="item-heading">{{ 'addon.mod_quiz.attemptstate' | translate }}</p>
+                <ion-item text-wrap no-lines>
+                    <h2>{{ 'addon.mod_quiz.attemptstate' | translate }}</h2>
                     <p>{{ attempt.readableState }}</p>
                 </ion-item>
-                <ion-item text-wrap *ngIf="showCompleted">
-                    <p class="item-heading">{{ 'addon.mod_quiz.completedon' | translate }}</p>
+                <ion-item text-wrap no-lines *ngIf="showCompleted">
+                    <h2>{{ 'addon.mod_quiz.completedon' | translate }}</h2>
                     <p>{{ attempt.timefinish * 1000 | coreFormatDate }}</p>
                 </ion-item>
-                <ion-item text-wrap *ngIf="attempt.timeTaken">
-                    <p class="item-heading">{{ 'addon.mod_quiz.timetaken' | translate }}</p>
+                <ion-item text-wrap no-lines *ngIf="attempt.timeTaken">
+                    <h2>{{ 'addon.mod_quiz.timetaken' | translate }}</h2>
                     <p>{{ attempt.timeTaken }}</p>
                 </ion-item>
-                <ion-item text-wrap *ngIf="attempt.overTime">
-                    <p class="item-heading">{{ 'addon.mod_quiz.overdue' | translate }}</p>
+                <ion-item text-wrap no-lines *ngIf="attempt.overTime">
+                    <h2>{{ 'addon.mod_quiz.overdue' | translate }}</h2>
                     <p>{{ attempt.overTime }}</p>
                 </ion-item>
-                <ion-item text-wrap *ngIf="attempt.readableMark">
-                    <p class="item-heading">{{ 'addon.mod_quiz.marks' | translate }}</p>
+                <ion-item text-wrap no-lines *ngIf="attempt.readableMark">
+                    <h2>{{ 'addon.mod_quiz.marks' | translate }}</h2>
                     <p><core-format-text [text]="attempt.readableMark"></core-format-text></p>
                 </ion-item>
-                <ion-item text-wrap *ngIf="attempt.readableGrade">
-                    <p class="item-heading">{{ 'addon.mod_quiz.grade' | translate }}</p>
+                <ion-item text-wrap no-lines *ngIf="attempt.readableGrade">
+                    <h2>{{ 'addon.mod_quiz.grade' | translate }}</h2>
                     <p>{{ attempt.readableGrade }}</p>
                 </ion-item>
-                <ion-item text-wrap *ngFor="let data of additionalData">
-                    <p class="item-heading">{{ data.title }}</p>
+                <ion-item text-wrap no-lines *ngFor="let data of additionalData">
+                    <h2>{{ data.title }}</h2>
                     <core-format-text [component]="component" [componentId]="componentId" [text]="data.content"></core-format-text>
                 </ion-item>
             </ion-list>
@@ -70,7 +70,7 @@
                         <h2 *ngIf="question.number" class="inline">{{ 'core.question.questionno' | translate:{$a: question.number} }}</h2>
                         <h2 *ngIf="!question.number" class="inline">{{ 'core.question.information' | translate }}</h2>
                         <ion-note text-wrap item-end *ngIf="question.status || question.readableMark">
-                            <p *ngIf="question.status" class="block">{{question.status}}</p>
+                            <p *ngIf="question.status">{{question.status}}</p>
                             <p *ngIf="question.readableMark"><core-format-text [text]="question.readableMark"></core-format-text></p>
                         </ion-note>
                     </ion-item-divider>
diff --git a/src/addon/mod/quiz/pages/review/review.scss b/src/addon/mod/quiz/pages/review/review.scss
index 48a0f092d..e6b221d31 100644
--- a/src/addon/mod/quiz/pages/review/review.scss
+++ b/src/addon/mod/quiz/pages/review/review.scss
@@ -1,11 +1,12 @@
 ion-app.app-root page-addon-mod-quiz-review {
     .item-radio-disabled,
     .item-checkbox-disabled,
-    .text-input[disabled] {
-      opacity: 1;
+    .item-select-disabled,
+    .item-input-disabled {
+        opacity: 0.8;
 
-      .label, .radio, .checkbox {
-        opacity: 1;
-      }
+        .label, .radio, .checkbox, .select-disabled, .core-correct-icon {
+            opacity: 1;
+        }
     }
 }
diff --git a/src/addon/qtype/calculated/calculated.module.ts b/src/addon/qtype/calculated/calculated.module.ts
index fed580b35..a819b755e 100644
--- a/src/addon/qtype/calculated/calculated.module.ts
+++ b/src/addon/qtype/calculated/calculated.module.ts
@@ -16,6 +16,7 @@ import { NgModule } from '@angular/core';
 import { IonicModule } from 'ionic-angular';
 import { TranslateModule } from '@ngx-translate/core';
 import { CoreQuestionDelegate } from '@core/question/providers/delegate';
+import { CoreComponentsModule } from '@components/components.module';
 import { CoreDirectivesModule } from '@directives/directives.module';
 import { AddonQtypeCalculatedHandler } from './providers/handler';
 import { AddonQtypeCalculatedComponent } from './component/calculated';
@@ -27,6 +28,7 @@ import { AddonQtypeCalculatedComponent } from './component/calculated';
     imports: [
         IonicModule,
         TranslateModule.forChild(),
+        CoreComponentsModule,
         CoreDirectivesModule
     ],
     providers: [
diff --git a/src/addon/qtype/calculated/component/addon-qtype-calculated.html b/src/addon/qtype/calculated/component/addon-qtype-calculated.html
index 144d02c03..e2ea63c89 100644
--- a/src/addon/qtype/calculated/component/addon-qtype-calculated.html
+++ b/src/addon/qtype/calculated/component/addon-qtype-calculated.html
@@ -8,8 +8,9 @@
         <ng-container *ngTemplateOutlet="radioUnits"></ng-container>
     </ng-container>
 
-    <ion-item text-wrap ion-grid>
-        <ion-grid item-content>
+    <ion-item text-wrap ion-grid ngClass="core-{{question.input.correctIconColor}}-item">
+        <ion-label stacked>{{ 'addon.mod_quiz.answercolon' | translate }}</ion-label>
+        <ion-grid item-content no-padding>
             <ion-row>
                 <!-- Display unit select before the answer input. -->
                 <ng-container *ngIf="question.select && question.selectFirst">
@@ -18,7 +19,7 @@
 
                 <!-- Input to enter the answer. -->
                 <ion-col>
-                    <ion-input padding-left type="text" placeholder="{{ 'core.question.answer' | translate }}" [attr.name]="question.input.name" [value]="question.input.value" [disabled]="question.input.readOnly" [ngClass]="[question.input.correctClass]" autocorrect="off">
+                    <ion-input padding-left type="text" [placeholder]="question.input.readOnly ? '' : 'core.question.answer' | translate" [attr.name]="question.input.name" [value]="question.input.value" [disabled]="question.input.readOnly" autocorrect="off">
                     </ion-input>
                 </ion-col>
 
@@ -27,6 +28,7 @@
                     <ng-container *ngTemplateOutlet="selectUnits"></ng-container>
                 </ng-container>
             </ion-row>
+            <core-icon *ngIf="question.input.correctIcon" class="core-correct-icon" item-content item-end [name]="question.input.correctIcon" [color]="[question.input.correctIconColor]"></core-icon>
         </ion-grid>
     </ion-item>
 
@@ -54,9 +56,9 @@
     <div radio-group [(ngModel)]="question.unit" [name]="question.optionsName">
         <ion-item text-wrap *ngFor="let option of question.options">
             <ion-label>
-                <p>{{option.text}}</p>
+                <core-format-text [component]="component" [componentId]="componentId" [text]="option.text"></core-format-text>
             </ion-label>
-            <ion-radio [value]="option.value" [disabled]="option.disabled || question.input.readOnly"></ion-radio>
+            <ion-radio [value]="option.value" [disabled]="option.disabled || question.input.readOnly" [color]="question.input.correctIconColor"></ion-radio>
         </ion-item>
 
         <!-- ion-radio doesn't use an input. Create a hidden input to hold the selected value. -->
diff --git a/src/addon/qtype/calculated/component/calculated.scss b/src/addon/qtype/calculated/component/calculated.scss
new file mode 100644
index 000000000..eb53fdb3d
--- /dev/null
+++ b/src/addon/qtype/calculated/component/calculated.scss
@@ -0,0 +1,5 @@
+ion-app.app-root addon-qtype-calculated {
+    ion-col .select-disabled {
+        @include margin(0, 20px, 0, 0);
+    }
+}
\ No newline at end of file
diff --git a/src/addon/qtype/ddimageortext/component/ddimageortext.scss b/src/addon/qtype/ddimageortext/component/ddimageortext.scss
index 48c69d82e..57681ec2e 100644
--- a/src/addon/qtype/ddimageortext/component/ddimageortext.scss
+++ b/src/addon/qtype/ddimageortext/component/ddimageortext.scss
@@ -29,30 +29,12 @@ addon-qtype-ddimageortext {
         zoom: 1;
     }
 
-    .group1 {
-        background-color: $white;
-    }
-    .group2 {
-        background-color: $blue-light;
-    }
-    .group3 {
-        background-color: #DCDCDC;
-    }
-    .group4 {
-        background-color: #D8BFD8;
-    }
-    .group5 {
-        background-color: #87CEFA;
-    }
-    .group6 {
-        background-color: #DAA520;
-    }
-    .group7 {
-        background-color: #FFD700;
-    }
-    .group8 {
-        background-color: #F0E68C;
+    @for $i from 0 to length($core-dd-question-colors) {
+        .group#{$i + 1} {
+            background: nth($core-dd-question-colors, $i + 1);
+        }
     }
+
     .drag {
         border: 1px solid $gray-darker;
         cursor: pointer;
@@ -96,6 +78,6 @@ addon-qtype-ddimageortext {
     }
     .drag.beingdragged {
         z-index: 3;
-        box-shadow: 3px 3px 4px $gray-darker;
+        box-shadow: $core-dd-question-selected-shadow;
     }
 }
diff --git a/src/addon/qtype/ddmarker/classes/ddmarker.ts b/src/addon/qtype/ddmarker/classes/ddmarker.ts
index 46cb4909f..f303d5c1b 100644
--- a/src/addon/qtype/ddmarker/classes/ddmarker.ts
+++ b/src/addon/qtype/ddmarker/classes/ddmarker.ts
@@ -290,18 +290,13 @@ export class AddonQtypeDdMarkerQuestion {
      * @param {string} shape Name of the shape of the drop zone (circle, rectangle, polygon).
      * @param {string} coords Coordinates of the shape.
      * @param {string} colour Colour of the shape.
-     * @param {boolean} link Whether the marker should have a link in it.
      */
-    drawDropZone(dropZoneNo: number, markerText: string, shape: string, coords: string, colour: string, link: boolean): void {
+    drawDropZone(dropZoneNo: number, markerText: string, shape: string, coords: string, colour: string): void {
         let existingMarkerText: HTMLElement;
 
         const markerTexts = this.doc.markerTexts();
         // Check if there is already a marker text for this drop zone.
-        if (link) {
-            existingMarkerText = <HTMLElement> markerTexts.querySelector('span.markertext' + dropZoneNo + ' a');
-        } else {
-            existingMarkerText = <HTMLElement> markerTexts.querySelector('span.markertext' + dropZoneNo);
-        }
+        existingMarkerText = <HTMLElement> markerTexts.querySelector('span.markertext' + dropZoneNo);
 
         if (existingMarkerText) {
             // Marker text already exists. Update it or remove it if empty.
@@ -316,12 +311,7 @@ export class AddonQtypeDdMarkerQuestion {
                 span = document.createElement('span');
 
             span.className = classNames;
-
-            if (link) {
-                span.innerHTML = '<a href="#">' + markerText + '</a>';
-            } else {
-                span.innerHTML = markerText;
-            }
+            span.innerHTML = markerText;
 
             markerTexts.appendChild(span);
         }
@@ -802,7 +792,7 @@ export class AddonQtypeDdMarkerQuestion {
                     dropZone = this.dropZones[dropZoneNo],
                     dzNo = Number(dropZoneNo);
 
-                this.drawDropZone(dzNo, dropZone.markertext, dropZone.shape, dropZone.coords, colourForDropZone, true);
+                this.drawDropZone(dzNo, dropZone.markertext, dropZone.shape, dropZone.coords, colourForDropZone);
             }
         }
     }
diff --git a/src/addon/qtype/ddmarker/component/ddmarker.scss b/src/addon/qtype/ddmarker/component/ddmarker.scss
index e53f1baec..d9197d122 100644
--- a/src/addon/qtype/ddmarker/component/ddmarker.scss
+++ b/src/addon/qtype/ddmarker/component/ddmarker.scss
@@ -33,7 +33,7 @@ addon-qtype-ddmarker {
 
     .dragitem.beingdragged .markertext {
         z-index: 5;
-        box-shadow: 3px 3px 4px $gray-darker;
+        box-shadow: $core-dd-question-selected-shadow;
     }
     .dragitems .draghome {
         margin: 10px;
diff --git a/src/addon/qtype/ddwtos/component/ddwtos.scss b/src/addon/qtype/ddwtos/component/ddwtos.scss
index 47ae4151e..a594f55fa 100644
--- a/src/addon/qtype/ddwtos/component/ddwtos.scss
+++ b/src/addon/qtype/ddwtos/component/ddwtos.scss
@@ -40,10 +40,11 @@ addon-qtype-ddwtos {
     .drag {
         z-index: 2;
         border-radius: 5px;
+        line-height: 25px;
     }
     .drag.selected {
         z-index: 3;
-        box-shadow: 3px 3px 4px $gray-darker;
+        box-shadow: $core-dd-question-selected-shadow;
     }
 
     .drop.selected {
@@ -73,29 +74,10 @@ addon-qtype-ddwtos {
         background-color: $green-light;
     }
 
-    .group1 {
-        background-color: $white;
-    }
-    .group2 {
-        background-color: #DCDCDC;
-    }
-    .group3 {
-        background-color: $blue-light;
-    }
-    .group4 {
-        background-color: #D8BFD8;
-    }
-    .group5 {
-        background-color: #87CEFA;
-    }
-    .group6 {
-        background-color: #DAA520;
-    }
-    .group7 {
-        background-color: #FFD700;
-    }
-    .group8 {
-        background-color: #F0E68C;
+    @for $i from 0 to length($core-dd-question-colors) {
+        .group#{$i + 1} {
+            background: nth($core-dd-question-colors, $i + 1);
+        }
     }
 
     sub, sup {
diff --git a/src/addon/qtype/gapselect/component/gapselect.scss b/src/addon/qtype/gapselect/component/gapselect.scss
index b467d9351..5311db7c8 100644
--- a/src/addon/qtype/gapselect/component/gapselect.scss
+++ b/src/addon/qtype/gapselect/component/gapselect.scss
@@ -1,5 +1,5 @@
 // Style gapselect content a bit. All these styles are copied from Moodle.
-addon-qtype-gapselect {
+ion-app.app-root addon-qtype-gapselect {
     p {
         margin: 0 0 .5em;
     }
@@ -15,5 +15,11 @@ 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/match/component/addon-qtype-match.html b/src/addon/qtype/match/component/addon-qtype-match.html
index d905fade1..95bed5ddc 100644
--- a/src/addon/qtype/match/component/addon-qtype-match.html
+++ b/src/addon/qtype/match/component/addon-qtype-match.html
@@ -1,19 +1,22 @@
 <section ion-list class="addon-qtype-match-container" *ngIf="question.loaded">
     <ion-item text-wrap>
-        <p><core-format-text [component]="component" [componentId]="componentId" [text]="question.text"></core-format-text></p>
+        <core-format-text [component]="component" [componentId]="componentId" [text]="question.text"></core-format-text>
     </ion-item>
     <ion-item text-wrap *ngFor="let row of question.rows">
-        <ion-grid item-content>
-            <ion-row>
+        <ion-grid item-content no-margin no-padding>
+            <ion-row no-margin>
                 <ion-col>
                     <p><core-format-text id="addon-qtype-match-question-{{row.id}}" [component]="component" [componentId]="componentId" [text]="row.text"></core-format-text></p>
                 </ion-col>
-                <ion-col [ngClass]='{"core-question-answer-correct": row.isCorrect === 1, "core-question-answer-incorrect": row.isCorrect === 0}'>
+                <ion-col>
                     <label class="accesshide" for="{{row.id}}" *ngIf="row.accessibilityLabel">{{ row.accessibilityLabel }}</label>
-                    <ion-select id="{{row.id}}" [name]="row.name" [attr.aria-labelledby]="'addon-qtype-match-question-' + row.id" [(ngModel)]="row.selected" interface="action-sheet" [disabled]="row.disabled">
+                    <ion-select id="{{row.id}}" [name]="row.name" [attr.aria-labelledby]="'addon-qtype-match-question-' + row.id" [(ngModel)]="row.selected" interface="action-sheet" [disabled]="row.disabled" [color]='(row.isCorrect === 1 ? "success": "") +  (row.isCorrect === 0 ? "danger": "")'>
                         <ion-option *ngFor="let option of row.options" [value]="option.value">{{option.label}}</ion-option>
                     </ion-select>
 
+                    <core-icon *ngIf="row.isCorrect === 1" class="core-correct-icon" name="fa-check" color="success"></core-icon>
+                    <core-icon *ngIf="row.isCorrect === 0" class="core-correct-icon" name="fa-remove" color="danger"></core-icon>
+
                     <!-- ion-select doesn't use a select. Create a hidden input to hold the selected value. -->
                     <input type="hidden" [ngModel]="row.selected" [attr.name]="row.name">
                 </ion-col>
diff --git a/src/addon/qtype/match/component/match.scss b/src/addon/qtype/match/component/match.scss
new file mode 100644
index 000000000..89e49a50b
--- /dev/null
+++ b/src/addon/qtype/match/component/match.scss
@@ -0,0 +1,10 @@
+ion-app.app-root addon-qtype-match {
+    ion-col .select-disabled {
+        @include margin(0, 20px, 0, 0);
+    }
+
+    .core-correct-icon {
+        bottom: 50%;
+        margin-bottom: -7px;
+    }
+}
diff --git a/src/addon/qtype/match/match.module.ts b/src/addon/qtype/match/match.module.ts
index b4b56f334..f140418a4 100644
--- a/src/addon/qtype/match/match.module.ts
+++ b/src/addon/qtype/match/match.module.ts
@@ -16,6 +16,7 @@ import { NgModule } from '@angular/core';
 import { IonicModule } from 'ionic-angular';
 import { TranslateModule } from '@ngx-translate/core';
 import { CoreQuestionDelegate } from '@core/question/providers/delegate';
+import { CoreComponentsModule } from '@components/components.module';
 import { CoreDirectivesModule } from '@directives/directives.module';
 import { AddonQtypeMatchHandler } from './providers/handler';
 import { AddonQtypeMatchComponent } from './component/match';
@@ -27,6 +28,7 @@ import { AddonQtypeMatchComponent } from './component/match';
     imports: [
         IonicModule,
         TranslateModule.forChild(),
+        CoreComponentsModule,
         CoreDirectivesModule
     ],
     providers: [
diff --git a/src/addon/qtype/multianswer/component/addon-qtype-multianswer.html b/src/addon/qtype/multianswer/component/addon-qtype-multianswer.html
index 899f1c34e..74bc91da4 100644
--- a/src/addon/qtype/multianswer/component/addon-qtype-multianswer.html
+++ b/src/addon/qtype/multianswer/component/addon-qtype-multianswer.html
@@ -1,5 +1,5 @@
 <section ion-list class="addon-qtype-multianswer-container" *ngIf="question.text || question.text === ''">
     <ion-item text-wrap>
-        <p><core-format-text [component]="component" [componentId]="componentId" [text]="question.text" (afterRender)="questionRendered()"></core-format-text></p>
+        <core-format-text [component]="component" [componentId]="componentId" [text]="question.text" (afterRender)="questionRendered()"></core-format-text>
     </ion-item>
 </section>
diff --git a/src/addon/qtype/multichoice/component/addon-qtype-multichoice.html b/src/addon/qtype/multichoice/component/addon-qtype-multichoice.html
index a39aaaa2e..c41b376b9 100644
--- a/src/addon/qtype/multichoice/component/addon-qtype-multichoice.html
+++ b/src/addon/qtype/multichoice/component/addon-qtype-multichoice.html
@@ -1,18 +1,20 @@
 <section ion-list *ngIf="question.text || question.text === ''">
     <!-- Question text first. -->
     <ion-item text-wrap>
-        <p><core-format-text [component]="component" [componentId]="componentId" [text]="question.text"></core-format-text></p>
-        <p *ngIf="question.prompt"><core-format-text [component]="component" [componentId]="componentId" [text]="question.prompt"></core-format-text></p>
+        <core-format-text [component]="component" [componentId]="componentId" [text]="question.text"></core-format-text>
+        <core-format-text [component]="component" [componentId]="componentId" [text]="question.prompt" *ngIf="question.prompt"></core-format-text>
     </ion-item>
 
     <!-- Checkbox for multiple choice. -->
     <ng-container *ngIf="question.multi">
-        <ion-item text-wrap *ngFor="let option of question.options" [ngClass]="{'core-question-answer-correct': option.isCorrect === 1, 'core-question-answer-incorrect': option.isCorrect === 0}">
-            <ion-label>
+        <ion-item text-wrap *ngFor="let option of question.options">
+            <ion-label [color]='(option.isCorrect === 1 ? "success": "") +  (option.isCorrect === 0 ? "danger": "")'>
                 <core-format-text [component]="component" [componentId]="componentId" [text]="option.text"></core-format-text>
-                <p *ngIf="option.feedback" class="core-question-feedback-container"><core-format-text [component]="component" [componentId]="componentId" [text]="option.feedback"></core-format-text></p>
+                <div *ngIf="option.feedback" class="specificfeedback"><core-format-text [component]="component" [componentId]="componentId" [text]="option.feedback"></core-format-text></div>
             </ion-label>
-            <ion-checkbox [attr.name]="option.name" [(ngModel)]="option.checked" [disabled]="option.disabled" item-end></ion-checkbox>
+            <ion-checkbox [attr.name]="option.name" [(ngModel)]="option.checked" [disabled]="option.disabled" item-end [color]='(option.isCorrect === 1 ? "success": "") +  (option.isCorrect === 0 ? "danger": "")'></ion-checkbox>
+            <core-icon item-content *ngIf="option.isCorrect === 1" class="core-correct-icon" name="fa-check" color="success"></core-icon>
+            <core-icon item-content *ngIf="option.isCorrect === 0" class="core-correct-icon" name="fa-remove" color="danger"></core-icon>
 
             <!-- ion-checkbox doesn't use an input. Create a hidden input to hold the value. -->
             <input item-content type="hidden" [ngModel]="option.checked" [attr.name]="option.name">
@@ -21,12 +23,14 @@
 
     <!-- Radio buttons for single choice. -->
     <div *ngIf="!question.multi" radio-group [(ngModel)]="question.singleChoiceModel" [name]="question.optionsName">
-        <ion-item text-wrap *ngFor="let option of question.options" [ngClass]='{"core-question-answer-correct": option.isCorrect === 1, "core-question-answer-incorrect": option.isCorrect === 0}'>
+        <ion-item text-wrap *ngFor="let option of question.options">
             <ion-label>
                 <core-format-text [component]="component" [componentId]="componentId" [text]="option.text"></core-format-text>
-                <p *ngIf="option.feedback" class="core-question-feedback-container"><core-format-text [component]="component" [componentId]="componentId" [text]="option.feedback"></core-format-text></p>
+                <div *ngIf="option.feedback" class="specificfeedback"><core-format-text [component]="component" [componentId]="componentId" [text]="option.feedback"></core-format-text></div>
             </ion-label>
-            <ion-radio [value]="option.value" [disabled]="option.disabled"></ion-radio>
+            <ion-radio [value]="option.value" [disabled]="option.disabled" [color]='(option.isCorrect === 1 ? "success": "") +  (option.isCorrect === 0 ? "danger": "")'></ion-radio>
+            <core-icon item-content *ngIf="option.isCorrect === 1" class="core-correct-icon" name="fa-check" color="success"></core-icon>
+            <core-icon item-content *ngIf="option.isCorrect === 0" class="core-correct-icon" name="fa-remove" color="danger"></core-icon>
         </ion-item>
 
         <!-- ion-radio doesn't use an input. Create a hidden input to hold the selected value. -->
diff --git a/src/addon/qtype/multichoice/component/multichoice.scss b/src/addon/qtype/multichoice/component/multichoice.scss
new file mode 100644
index 000000000..6312d0e50
--- /dev/null
+++ b/src/addon/qtype/multichoice/component/multichoice.scss
@@ -0,0 +1,13 @@
+ion-app.app-root addon-qtype-multichoice {
+    .core-correct-icon {
+        bottom: 50%;
+        margin-bottom: -7px;
+    }
+
+    .specificfeedback {
+        background-color: $core-question-feedback-color-bg;
+        color: $core-question-feedback-color;
+        display: inline;
+        padding: 0 .7em;
+    }
+}
diff --git a/src/addon/qtype/multichoice/multichoice.module.ts b/src/addon/qtype/multichoice/multichoice.module.ts
index c3d591ba7..a0e36e755 100644
--- a/src/addon/qtype/multichoice/multichoice.module.ts
+++ b/src/addon/qtype/multichoice/multichoice.module.ts
@@ -17,6 +17,7 @@ import { IonicModule } from 'ionic-angular';
 import { TranslateModule } from '@ngx-translate/core';
 import { CoreQuestionDelegate } from '@core/question/providers/delegate';
 import { CoreDirectivesModule } from '@directives/directives.module';
+import { CoreComponentsModule } from '@components/components.module';
 import { AddonQtypeMultichoiceHandler } from './providers/handler';
 import { AddonQtypeMultichoiceComponent } from './component/multichoice';
 
@@ -27,6 +28,7 @@ import { AddonQtypeMultichoiceComponent } from './component/multichoice';
     imports: [
         IonicModule,
         TranslateModule.forChild(),
+        CoreComponentsModule,
         CoreDirectivesModule
     ],
     providers: [
diff --git a/src/addon/qtype/shortanswer/component/addon-qtype-shortanswer.html b/src/addon/qtype/shortanswer/component/addon-qtype-shortanswer.html
index 550e65863..6f31a2d39 100644
--- a/src/addon/qtype/shortanswer/component/addon-qtype-shortanswer.html
+++ b/src/addon/qtype/shortanswer/component/addon-qtype-shortanswer.html
@@ -2,6 +2,10 @@
     <ion-item text-wrap>
         <p><core-format-text [component]="component" [componentId]="componentId" [text]="question.text"></core-format-text></p>
     </ion-item>
-    <ion-input padding-left type="text" placeholder="{{ 'core.question.answer' | translate }}" [attr.name]="question.input.name" [value]="question.input.value" autocorrect="off" [disabled]="question.input.readOnly" [ngClass]="[question.input.correctClass]">
-    </ion-input>
+    <ion-item 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>
+        <core-icon *ngIf="question.input.correctIcon" class="core-correct-icon" item-content item-end [name]="question.input.correctIcon" [color]="[question.input.correctIconColor]"></core-icon>
+</ion-item>
 </section>
diff --git a/src/addon/qtype/shortanswer/shortanswer.module.ts b/src/addon/qtype/shortanswer/shortanswer.module.ts
index 58497545d..313a23b75 100644
--- a/src/addon/qtype/shortanswer/shortanswer.module.ts
+++ b/src/addon/qtype/shortanswer/shortanswer.module.ts
@@ -16,6 +16,7 @@ import { NgModule } from '@angular/core';
 import { IonicModule } from 'ionic-angular';
 import { TranslateModule } from '@ngx-translate/core';
 import { CoreQuestionDelegate } from '@core/question/providers/delegate';
+import { CoreComponentsModule } from '@components/components.module';
 import { CoreDirectivesModule } from '@directives/directives.module';
 import { AddonQtypeShortAnswerHandler } from './providers/handler';
 import { AddonQtypeShortAnswerComponent } from './component/shortanswer';
@@ -27,6 +28,7 @@ import { AddonQtypeShortAnswerComponent } from './component/shortanswer';
     imports: [
         IonicModule,
         TranslateModule.forChild(),
+        CoreComponentsModule,
         CoreDirectivesModule
     ],
     providers: [
diff --git a/src/app/app.scss b/src/app/app.scss
index b8b9ec993..902622a0c 100644
--- a/src/app/app.scss
+++ b/src/app/app.scss
@@ -378,6 +378,21 @@ ion-app.app-root {
     .select-icon .select-icon-inner {
       color: $core-select-placeholder-color;
     }
+
+    &.select-disabled, .select-icon .select-icon-inner {
+        color: $text-color;
+    }
+    @each $color-name, $color-base, $color-contrast in get-colors($colors) {
+      &.select-md-#{$color-name},
+      &.select-ios-#{$color-name},
+      &.select-wp-#{$color-name} {
+         color: $color-base;
+
+        .select-icon .select-icon-inner {
+          color: $color-base;
+        }
+      }
+    }
   }
 
   ion-select.core-button-select,
@@ -454,8 +469,16 @@ ion-app.app-root {
 
   // Question.
   // -------------------------
+  .core-correct-icon {
+    padding: 0 ($content-padding / 2);
+    position: absolute;
+    @include position(null, 0, $content-padding / 2, null);
+    margin-top: 0;
+    margin-bottom: 0;
+  }
 
   .core-question-answer-correct,
+  .core-question-correct,
   .core-question-comment {
     color: $core-question-correct-color;
     background-color: $core-question-correct-color-bg;
@@ -533,7 +556,8 @@ ion-app.app-root {
   .core-question-incorrect {
     background-color: $core-question-state-incorrect-color;
   }
-  .core-question-answersaved {
+  .core-question-answersaved,
+  .core-question-requiresgrading {
     color: $text-color;
     background-color: $core-question-saved-color-bg;
   }
diff --git a/src/assets/lang/en.json b/src/assets/lang/en.json
index 58ab6beb3..47566d043 100644
--- a/src/assets/lang/en.json
+++ b/src/assets/lang/en.json
@@ -602,6 +602,7 @@
     "addon.mod_lti.modulenameplural": "External tools",
     "addon.mod_page.errorwhileloadingthepage": "Error while loading the page content.",
     "addon.mod_page.modulenameplural": "Pages",
+    "addon.mod_quiz.answercolon": "Answer:",
     "addon.mod_quiz.attemptfirst": "First attempt",
     "addon.mod_quiz.attemptlast": "Last attempt",
     "addon.mod_quiz.attemptnumber": "Attempt",
diff --git a/src/core/question/classes/base-question-component.ts b/src/core/question/classes/base-question-component.ts
index 771502142..2e78a2dfe 100644
--- a/src/core/question/classes/base-question-component.ts
+++ b/src/core/question/classes/base-question-component.ts
@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { Input, Output, EventEmitter, Injector } from '@angular/core';
+import { Input, Output, EventEmitter, Injector, ElementRef } from '@angular/core';
 import { CoreLoggerProvider } from '@providers/logger';
 import { CoreDomUtilsProvider } from '@providers/utils/dom';
 import { CoreTextUtilsProvider } from '@providers/utils/text';
@@ -34,6 +34,7 @@ export class CoreQuestionBaseComponent {
     protected questionHelper: CoreQuestionHelperProvider;
     protected domUtils: CoreDomUtilsProvider;
     protected textUtils: CoreTextUtilsProvider;
+    protected realElement: HTMLElement;
 
     constructor(logger: CoreLoggerProvider, logName: string, protected injector: Injector) {
         this.logger = logger.getInstance(logName);
@@ -42,6 +43,7 @@ export class CoreQuestionBaseComponent {
         this.questionHelper = injector.get(CoreQuestionHelperProvider);
         this.domUtils = injector.get(CoreDomUtilsProvider);
         this.textUtils = injector.get(CoreTextUtilsProvider);
+        this.realElement = injector.get(ElementRef).nativeElement;
     }
 
     /**
@@ -172,6 +174,8 @@ export class CoreQuestionBaseComponent {
             return this.questionHelper.showComponentError(this.onAbort);
         }
 
+        this.realElement.classList.add('core-question-container');
+
         const element = this.domUtils.convertToElement(this.question.html);
 
         // Extract question text.
@@ -291,12 +295,20 @@ export class CoreQuestionBaseComponent {
             // Check if question is marked as correct.
             if (input.classList.contains('incorrect')) {
                 this.question.input.correctClass = 'core-question-incorrect';
+                this.question.input.correctIcon = 'fa-remove';
+                this.question.input.correctIconColor = 'danger';
             } else if (input.classList.contains('correct')) {
                 this.question.input.correctClass = 'core-question-correct';
+                this.question.input.correctIcon = 'fa-check';
+                this.question.input.correctIconColor = 'success';
             } else if (input.classList.contains('partiallycorrect')) {
                 this.question.input.correctClass = 'core-question-partiallycorrect';
+                this.question.input.correctIcon = 'fa-check-square';
+                this.question.input.correctIconColor = 'warning';
             } else {
                 this.question.input.correctClass = '';
+                this.question.input.correctIcon = '';
+                this.question.input.correctIconColor = '';
             }
         }
 
diff --git a/src/theme/variables.scss b/src/theme/variables.scss
index f3fbdfd3e..da912fa66 100644
--- a/src/theme/variables.scss
+++ b/src/theme/variables.scss
@@ -279,8 +279,12 @@ $core-question-saved-color-bg:        $gray-light !default;
 
 $core-question-state-correct-color:   $green-light !default;
 $core-question-state-partial-color:   $yellow-light !default;
+$core-question-state-partial-text:    $yellow !default;
 $core-question-state-incorrect-color: $red-light !default;
 
+$core-dd-question-selected-shadow: 2px 2px 4px $gray-dark !default;
+$core-dd-question-colors: $white, $blue-light, #DCDCDC, #D8BFD8, #87CEFA, #DAA520, #FFD700, #F0E68C !default;
+
 // Mixins
 // -------------------------
 @mixin core-transition($where: all, $time: 500ms) {