- {{option.text}}
+
-
+
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 =
markerTexts.querySelector('span.markertext' + dropZoneNo + ' a');
- } else {
- existingMarkerText = markerTexts.querySelector('span.markertext' + dropZoneNo);
- }
+ existingMarkerText = 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 = '' + markerText + '';
- } 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 @@
-
+
-
-
+
+
-
+
-
+
{{option.label}}
+
+
+
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 @@
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 @@
-
-
+
+
-
-
+
+
-
+
-
+
+
+
@@ -21,12 +23,14 @@
-
+
-
+
-
+
+
+
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 @@
-
-
+
+ {{ 'addon.mod_quiz.answercolon' | translate }}
+
+
+
+
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) {