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;