From 9d2f5950d41e22f2181c08bf4d8fa819b05c07c9 Mon Sep 17 00:00:00 2001 From: Dani Palou Date: Thu, 16 Aug 2018 12:50:57 +0200 Subject: [PATCH 1/2] MOBILE-2417 quiz: Show question status while attempting quiz --- .../navigation-modal/navigation-modal.scss | 25 ++++++++++- src/addon/mod/quiz/pages/player/player.html | 2 +- src/addon/mod/quiz/pages/player/player.ts | 42 ++++++++++++++++++- src/app/app.scss | 3 ++ src/theme/variables.scss | 1 + 5 files changed, 69 insertions(+), 4 deletions(-) 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 5abb5c103..de533283d 100644 --- a/src/addon/mod/quiz/pages/navigation-modal/navigation-modal.scss +++ b/src/addon/mod/quiz/pages/navigation-modal/navigation-modal.scss @@ -1,5 +1,28 @@ page-addon-mod-quiz-navigation-modal { .addon-mod_quiz-selected, .item.addon-mod_quiz-selected { - background: $blue-light; + border-left: 5px solid $core-splitview-selected; + font-weight: bold; + + &.item-md { + padding-left: $item-md-padding-start - 5px; + } + &.item-ios { + padding-left: $item-ios-padding-start - 5px; + } + &.item-wp { + padding-left: $item-wp-padding-start - 5px; + } + } + + .item.core-question-correct .item-inner { + background-image: url("data:image/svg+xml;charset=utf-8,") !important; + } + + .item.core-question-incorrect .item-inner { + background-image: url("data:image/svg+xml;charset=utf-8,") !important; + } + + .item.core-question-answersaved .item-inner { + background-image: url("data:image/svg+xml;charset=utf-8,") !important; } } diff --git a/src/addon/mod/quiz/pages/player/player.html b/src/addon/mod/quiz/pages/player/player.html index 162749598..d3d07b9be 100644 --- a/src/addon/mod/quiz/pages/player/player.html +++ b/src/addon/mod/quiz/pages/player/player.html @@ -6,7 +6,7 @@ - diff --git a/src/addon/mod/quiz/pages/player/player.ts b/src/addon/mod/quiz/pages/player/player.ts index fddcbfa3f..e6c36a6df 100644 --- a/src/addon/mod/quiz/pages/player/player.ts +++ b/src/addon/mod/quiz/pages/player/player.ts @@ -70,6 +70,7 @@ export class AddonModQuizPlayerPage implements OnInit, OnDestroy { protected autoSave: AddonModQuizAutoSave; // Class to auto-save answers every certain time. protected autoSaveErrorSubscription: Subscription; // To be notified when an error happens in auto-save. protected forceLeave = false; // If true, don't perform any check when leaving the view. + protected reloadNavigaton = false; // Whether navigation needs to be reloaded because some data was sent to server. constructor(navParams: NavParams, logger: CoreLoggerProvider, protected translate: TranslateService, protected eventsProvider: CoreEventsProvider, protected sitesProvider: CoreSitesProvider, @@ -173,6 +174,8 @@ export class AddonModQuizPlayerPage implements OnInit, OnDestroy { // Behaviour checks are always in online. return this.quizProvider.processAttempt(this.quiz, this.attempt, answers, this.preflightData).then(() => { + this.reloadNavigaton = true; // Data sent to server, navigation should be reloaded. + // Reload the current page. const scrollElement = this.content.getScrollElement(), scrollTop = scrollElement.scrollTop || 0, @@ -224,7 +227,9 @@ export class AddonModQuizPlayerPage implements OnInit, OnDestroy { // First try to save the attempt data. We only save it if we're not seeing the summary. const promise = this.showSummary ? Promise.resolve() : this.processAttempt(false, false); promise.then(() => { - // Attempt data successfully saved, load the page or summary. + if (!this.showSummary) { + this.reloadNavigaton = true; // Data sent to server, navigation should be reloaded. + } // Attempt data successfully saved, load the page or summary. let subPromise; @@ -460,11 +465,44 @@ export class AddonModQuizPlayerPage implements OnInit, OnDestroy { */ protected loadNavigation(): Promise { // We use the attempt summary to build the navigation because it contains all the questions. - return this.quizProvider.getAttemptSummary(this.attempt.id, this.preflightData, this.offline).then((questions) => { + return this.quizProvider.getAttemptSummary(this.attempt.id, this.preflightData, this.offline, true, true) + .then((questions) => { + + questions.forEach((question) => { + question.stateClass = this.questionHelper.getQuestionStateClass(question.state); + }); + this.navigation = questions; }); } + /** + * Open the navigation modal. + * + * @return {Promise} Promise resolved when done. + */ + openNavigation(): Promise { + let promise; + + if (this.reloadNavigaton) { + // Some data has changed, reload the navigation. + const modal = this.domUtils.showModalLoading(); + + promise = this.loadNavigation().catch(() => { + // Ignore errors. + }).then(() => { + modal.dismiss(); + this.reloadNavigaton = false; + }); + } else { + promise = Promise.resolve(); + } + + return promise.finally(() => { + this.navigationModal.present(); + }); + } + // Prepare the answers to be sent for the attempt. protected prepareAnswers(): Promise { return this.questionHelper.prepareAnswers(this.questions, this.getAnswers(), this.offline); diff --git a/src/app/app.scss b/src/app/app.scss index 4158092ab..a0a5cd0e8 100644 --- a/src/app/app.scss +++ b/src/app/app.scss @@ -474,6 +474,9 @@ ion-col ion-select { .core-question-incorrect { background-color: $core-question-state-incorrect-color; } +.core-question-answersaved { + background-color: $core-question-saved-color-bg; +} .core-question-warning { color: $core-question-warning-color; diff --git a/src/theme/variables.scss b/src/theme/variables.scss index e08b10369..1faf3f57d 100644 --- a/src/theme/variables.scss +++ b/src/theme/variables.scss @@ -234,6 +234,7 @@ $core-question-incorrect-color-bg: $red-light !default; $core-question-feedback-color: $yellow-dark !default; $core-question-feedback-color-bg: $yellow-light !default; $core-question-warning-color: $red !default; +$core-question-saved-color-bg: $gray-light !default; $core-question-state-correct-color: $green-light !default; $core-question-state-partial-color: $yellow-light !default; From c0f01083aa1be77bc8d57831dac234d5950722df Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= Date: Thu, 16 Aug 2018 17:24:42 +0200 Subject: [PATCH 2/2] MOBILE-2417 quiz: Add push arrow svg mixin --- .../mod/quiz/pages/navigation-modal/navigation-modal.scss | 6 +++--- src/app/app.scss | 4 ++-- src/theme/variables.scss | 4 ++++ 3 files changed, 9 insertions(+), 5 deletions(-) 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 de533283d..38bf67187 100644 --- a/src/addon/mod/quiz/pages/navigation-modal/navigation-modal.scss +++ b/src/addon/mod/quiz/pages/navigation-modal/navigation-modal.scss @@ -15,14 +15,14 @@ page-addon-mod-quiz-navigation-modal { } .item.core-question-correct .item-inner { - background-image: url("data:image/svg+xml;charset=utf-8,") !important; + @include push-arrow-color($core-question-correct-color); } .item.core-question-incorrect .item-inner { - background-image: url("data:image/svg+xml;charset=utf-8,") !important; + @include push-arrow-color($core-question-incorrect-color); } .item.core-question-answersaved .item-inner { - background-image: url("data:image/svg+xml;charset=utf-8,") !important; + @include push-arrow-color($text-color); } } diff --git a/src/app/app.scss b/src/app/app.scss index a0a5cd0e8..9642143e8 100644 --- a/src/app/app.scss +++ b/src/app/app.scss @@ -69,7 +69,6 @@ } } - // Define an alternative way to set a heading in an item without using a heading tag. // This is done for accessibility reasons when a heading is semantically incorrect. .item .item-heading { @@ -475,6 +474,7 @@ ion-col ion-select { background-color: $core-question-state-incorrect-color; } .core-question-answersaved { + color: $text-color; background-color: $core-question-saved-color-bg; } @@ -671,7 +671,7 @@ canvas[core-chart] { .core-white-push-arrow .item-inner{ - background-image: url("data:image/svg+xml;charset=utf-8,") !important; + @include push-arrow-color($white); } // For list where some items have detail icon and some others don't. diff --git a/src/theme/variables.scss b/src/theme/variables.scss index 1faf3f57d..0ec8c8555 100644 --- a/src/theme/variables.scss +++ b/src/theme/variables.scss @@ -250,6 +250,10 @@ $core-question-state-incorrect-color: $red-light !default; transition: $where $time ease-in-out; } +@mixin push-arrow-color($color) { + background-image: url("data:image/svg+xml;charset=utf-8,") !important; +} + // Font Awesome $fa-font-path: $font-path; @import "font-awesome";