EVOgeek
/
Vmeda.Online
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

MOBILE-2348 quiz: Fix correctness icons clicks

main
Dani Palou 2018-04-11 16:13:13 +02:00
parent f69051cc1e
commit ebcd6c9a6a
9 changed files with 60 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/addon/mod/quiz/components/index/index.html
View File

@ -39,7 +39,7 @@
</ion-card-header>
<ion-list>
<!-- "Header" of the table -->
<ion-item text-wrap class="addon-mod_quiz-table-header">
<ion-item text-wrap class="addon-mod_quiz-table-header" detail-push>
<ion-row align-items-center>
<ion-col text-center class="hidden-phone" *ngIf="quiz.showAttemptColumn"><b>{{ 'addon.mod_quiz.attemptnumber' | translate }}</b></ion-col>
<ion-col text-center class="hidden-tablet" *ngIf="quiz.showAttemptColumn"><b>#</b></ion-col>

8
src/addon/mod/quiz/components/index/index.scss
View File

@ -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 {

4
src/addon/qtype/ddwtos/component/ddwtos.ts
View File

@ -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);
}
}

2
src/addon/qtype/gapselect/component/gapselect.html
View File

@ -1,5 +1,5 @@
<section ion-list class="addon-qtype-gapselect-container" *ngIf="question.text || question.text === ''">
<ion-item text-wrap>
<p><core-format-text [component]="component" [componentId]="componentId" [text]="question.text"></core-format-text></p>
<p><core-format-text [component]="component" [componentId]="componentId" [text]="question.text" (afterRender)="questionRendered()"></core-format-text></p>
</ion-item>
</section>

15
src/addon/qtype/gapselect/component/gapselect.ts
View File

@ -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);
}
}

2
src/addon/qtype/multianswer/component/multianswer.html
View File

@ -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"></core-format-text></p>
<p><core-format-text [component]="component" [componentId]="componentId" [text]="question.text" (afterRender)="questionRendered()"></core-format-text></p>
</ion-item>
</section>

15
src/addon/qtype/multianswer/component/multianswer.ts
View File

@ -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);
}
}

2
src/core/question/classes/base-question-component.ts
View File

@ -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;

26
src/core/question/providers/helper.ts
View File

@ -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 = <HTMLImageElement[]> 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 = <HTMLElement[]> 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 = <HTMLElement> 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);
});
}