From ebcd6c9a6a596a2e9898d0800b8b6677686ece7f Mon Sep 17 00:00:00 2001 From: Dani Palou Date: Wed, 11 Apr 2018 16:13:13 +0200 Subject: [PATCH] MOBILE-2348 quiz: Fix correctness icons clicks --- .../mod/quiz/components/index/index.html | 2 +- .../mod/quiz/components/index/index.scss | 8 +++--- src/addon/qtype/ddwtos/component/ddwtos.ts | 4 ++- .../qtype/gapselect/component/gapselect.html | 2 +- .../qtype/gapselect/component/gapselect.ts | 15 +++++++++-- .../multianswer/component/multianswer.html | 2 +- .../multianswer/component/multianswer.ts | 15 +++++++++-- .../classes/base-question-component.ts | 2 +- src/core/question/providers/helper.ts | 26 ++++++++++++++++--- 9 files changed, 60 insertions(+), 16 deletions(-) diff --git a/src/addon/mod/quiz/components/index/index.html b/src/addon/mod/quiz/components/index/index.html index fefe2dea4..04a3b504b 100644 --- a/src/addon/mod/quiz/components/index/index.html +++ b/src/addon/mod/quiz/components/index/index.html @@ -39,7 +39,7 @@ - + {{ 'addon.mod_quiz.attemptnumber' | translate }} # diff --git a/src/addon/mod/quiz/components/index/index.scss b/src/addon/mod/quiz/components/index/index.scss index 93f7c55a4..279d948b5 100644 --- a/src/addon/mod/quiz/components/index/index.scss +++ b/src/addon/mod/quiz/components/index/index.scss @@ -2,12 +2,12 @@ addon-mod-quiz-index { .addon-mod_quiz-table { .addon-mod_quiz-table-header .item-inner { + background-image: none; font-size: 0.9em; - padding-right: 0; - ion-label { - margin-right: 0; - } + } + .item-inner ion-label { + margin-right: 0; } .item { diff --git a/src/addon/qtype/ddwtos/component/ddwtos.ts b/src/addon/qtype/ddwtos/component/ddwtos.ts index 3241e435d..2c5e22b69 100644 --- a/src/addon/qtype/ddwtos/component/ddwtos.ts +++ b/src/addon/qtype/ddwtos/component/ddwtos.ts @@ -55,7 +55,7 @@ export class AddonQtypeDdwtosComponent extends CoreQuestionBaseComponent impleme this.questionHelper.replaceFeedbackClasses(div); // Treat the correct/incorrect icons. - this.questionHelper.treatCorrectnessIcons(div, this.component, this.componentId); + this.questionHelper.treatCorrectnessIcons(div); const answerContainer = div.querySelector('.answercontainer'); if (!answerContainer) { @@ -91,6 +91,8 @@ export class AddonQtypeDdwtosComponent extends CoreQuestionBaseComponent impleme // Create the instance. this.questionInstance = new AddonQtypeDdwtosQuestion(this.loggerProvider, this.domUtils, this.element, this.question, this.question.readOnly, this.inputIds); + + this.questionHelper.treatCorrectnessIconsClicks(this.element, this.component, this.componentId); } } diff --git a/src/addon/qtype/gapselect/component/gapselect.html b/src/addon/qtype/gapselect/component/gapselect.html index eaeb68661..70efb95b7 100644 --- a/src/addon/qtype/gapselect/component/gapselect.html +++ b/src/addon/qtype/gapselect/component/gapselect.html @@ -1,5 +1,5 @@
-

+

diff --git a/src/addon/qtype/gapselect/component/gapselect.ts b/src/addon/qtype/gapselect/component/gapselect.ts index 70a4622cf..9bd21aafd 100644 --- a/src/addon/qtype/gapselect/component/gapselect.ts +++ b/src/addon/qtype/gapselect/component/gapselect.ts @@ -12,7 +12,7 @@ // See the License for the specific language governing permissions and // limitations under the License. -import { Component, OnInit, Injector } from '@angular/core'; +import { Component, OnInit, Injector, ElementRef } from '@angular/core'; import { CoreLoggerProvider } from '@providers/logger'; import { CoreQuestionBaseComponent } from '@core/question/classes/base-question-component'; @@ -25,8 +25,12 @@ import { CoreQuestionBaseComponent } from '@core/question/classes/base-question- }) export class AddonQtypeGapSelectComponent extends CoreQuestionBaseComponent implements OnInit { - constructor(logger: CoreLoggerProvider, injector: Injector) { + protected element: HTMLElement; + + constructor(logger: CoreLoggerProvider, injector: Injector, element: ElementRef) { super(logger, 'AddonQtypeGapSelectComponent', injector); + + this.element = element.nativeElement; } /** @@ -35,4 +39,11 @@ export class AddonQtypeGapSelectComponent extends CoreQuestionBaseComponent impl ngOnInit(): void { this.initOriginalTextComponent('.qtext'); } + + /** + * The question has been rendered. + */ + questionRendered(): void { + this.questionHelper.treatCorrectnessIconsClicks(this.element, this.component, this.componentId); + } } diff --git a/src/addon/qtype/multianswer/component/multianswer.html b/src/addon/qtype/multianswer/component/multianswer.html index ae07a5f43..899f1c34e 100644 --- a/src/addon/qtype/multianswer/component/multianswer.html +++ b/src/addon/qtype/multianswer/component/multianswer.html @@ -1,5 +1,5 @@
-

+

diff --git a/src/addon/qtype/multianswer/component/multianswer.ts b/src/addon/qtype/multianswer/component/multianswer.ts index 79cdba492..8e1ca2068 100644 --- a/src/addon/qtype/multianswer/component/multianswer.ts +++ b/src/addon/qtype/multianswer/component/multianswer.ts @@ -12,7 +12,7 @@ // See the License for the specific language governing permissions and // limitations under the License. -import { Component, OnInit, Injector } from '@angular/core'; +import { Component, OnInit, Injector, ElementRef } from '@angular/core'; import { CoreLoggerProvider } from '@providers/logger'; import { CoreQuestionBaseComponent } from '@core/question/classes/base-question-component'; @@ -25,8 +25,12 @@ import { CoreQuestionBaseComponent } from '@core/question/classes/base-question- }) export class AddonQtypeMultiAnswerComponent extends CoreQuestionBaseComponent implements OnInit { - constructor(logger: CoreLoggerProvider, injector: Injector) { + protected element: HTMLElement; + + constructor(logger: CoreLoggerProvider, injector: Injector, element: ElementRef) { super(logger, 'AddonQtypeMultiAnswerComponent', injector); + + this.element = element.nativeElement; } /** @@ -35,4 +39,11 @@ export class AddonQtypeMultiAnswerComponent extends CoreQuestionBaseComponent im ngOnInit(): void { this.initOriginalTextComponent('.formulation'); } + + /** + * The question has been rendered. + */ + questionRendered(): void { + this.questionHelper.treatCorrectnessIconsClicks(this.element, this.component, this.componentId); + } } diff --git a/src/core/question/classes/base-question-component.ts b/src/core/question/classes/base-question-component.ts index 53af54d5b..c86b7abe4 100644 --- a/src/core/question/classes/base-question-component.ts +++ b/src/core/question/classes/base-question-component.ts @@ -261,7 +261,7 @@ export class CoreQuestionBaseComponent { this.questionHelper.replaceFeedbackClasses(div); // Treat the correct/incorrect icons. - this.questionHelper.treatCorrectnessIcons(div, this.component, this.componentId); + this.questionHelper.treatCorrectnessIcons(div); // Set the question text. this.question.text = content.innerHTML; diff --git a/src/core/question/providers/helper.ts b/src/core/question/providers/helper.ts index d4ae2ed44..b73dd9823 100644 --- a/src/core/question/providers/helper.ts +++ b/src/core/question/providers/helper.ts @@ -615,7 +615,7 @@ export class CoreQuestionHelperProvider { * * @param {HTMLElement} element DOM element. */ - treatCorrectnessIcons(element: HTMLElement, component?: string, componentId?: number): void { + treatCorrectnessIcons(element: HTMLElement): void { const icons = Array.from(element.querySelectorAll('img.icon, img.questioncorrectnessicon')); icons.forEach((icon) => { @@ -652,11 +652,31 @@ export class CoreQuestionHelperProvider { icon.classList.add('questioncorrectnessicon'); if (span.innerHTML) { + // There's a hidden feedback. Mark the icon as tappable. + // The click listener is only added if treatCorrectnessIconsClicks is called. icon.setAttribute('tappable', ''); - // @TODO: addEventListener not working. + } + }); + } + + /** + * Add click listeners to all tappable correctness icons. + * + * @param {HTMLElement} element DOM element. + * @param {string} [component] The component to use when viewing the feedback. + * @param {string|number} [componentId] An ID to use in conjunction with the component. + */ + treatCorrectnessIconsClicks(element: HTMLElement, component?: string, componentId?: number): void { + const icons = Array.from(element.querySelectorAll('i.icon.questioncorrectnessicon[tappable]')), + title = this.translate.instant('core.question.feedback'); + + icons.forEach((icon) => { + // Search the feedback for the icon. + const span = icon.parentElement.querySelector('.feedbackspan.accesshide'); + + if (span) { // There's a hidden feedback, show it when the icon is clicked. icon.addEventListener('click', (event) => { - const title = this.translate.instant('core.question.feedback'); this.textUtils.expandText(title, span.innerHTML, component, componentId); }); }