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

MOBILE-3899 quiz: Fix multichoice display flex

main
Pau Ferrer Ocaña 2021-10-26 16:23:09 +02:00
parent d4b7de321c
commit 3feee9e831
4 changed files with 23 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/addons/qtype/multichoice/component/addon-qtype-multichoice.html
View File

@ -2,9 +2,11 @@
<!-- Question text first. --> <!-- Question text first. -->
<ion-item class="ion-text-wrap"> <ion-item class="ion-text-wrap">
<ion-label> <ion-label>
<p><core-format-text [component]="component" [componentId]="componentId" [text]="multiQuestion.text" <p>
[contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId"> <core-format-text [component]="component" [componentId]="componentId" [text]="multiQuestion.text"
</core-format-text></p> [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId">
</core-format-text>
</p>
<p *ngIf="multiQuestion.prompt">{{ multiQuestion.prompt }}</p> <p *ngIf="multiQuestion.prompt">{{ multiQuestion.prompt }}</p>
</ion-label> </ion-label>
</ion-item> </ion-item>
@ -12,7 +14,8 @@
<!-- Checkbox for multiple choice. --> <!-- Checkbox for multiple choice. -->
<ng-container *ngIf="multiQuestion.multi"> <ng-container *ngIf="multiQuestion.multi">
<ion-item class="ion-text-wrap answer" *ngFor="let option of multiQuestion.options"> <ion-item class="ion-text-wrap answer" *ngFor="let option of multiQuestion.options">
<ion-label [color]='(option.isCorrect === 1 ? "success": "") + (option.isCorrect === 0 ? "danger": "")' class="flex"> <ion-label [color]='(option.isCorrect === 1 ? "success": "") + (option.isCorrect === 0 ? "danger": "")'
[class]="option.class">
<core-format-text [component]="component" [componentId]="componentId" [text]="option.text" <core-format-text [component]="component" [componentId]="componentId" [text]="option.text"
[contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId"> [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId">
</core-format-text> </core-format-text>
@ -38,9 +41,10 @@
</ng-container> </ng-container>
<!-- Radio buttons for single choice. --> <!-- Radio buttons for single choice. -->
<ion-radio-group *ngIf="!multiQuestion.multi" [(ngModel)]="multiQuestion.singleChoiceModel" [name]="multiQuestion.optionsName"> <ion-radio-group *ngIf="!multiQuestion.multi" [(ngModel)]="multiQuestion.singleChoiceModel"
[name]="multiQuestion.optionsName">
<ion-item class="ion-text-wrap answer" *ngFor="let option of multiQuestion.options"> <ion-item class="ion-text-wrap answer" *ngFor="let option of multiQuestion.options">
<ion-label class="flex"> <ion-label [class]="option.class">
<core-format-text [component]="component" [componentId]="componentId" [text]="option.text" <core-format-text [component]="component" [componentId]="componentId" [text]="option.text"
[contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId"> [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId">
</core-format-text> </core-format-text>

6
src/addons/qtype/multichoice/component/multichoice.scss
View File

@ -6,7 +6,11 @@
padding: 0 .7em; padding: 0 .7em;
} }
.flex { .answer {
line-height: 2em;
}
.d-flex {
display: flex !important; display: flex !important;
} }

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

@ -97,6 +97,7 @@ export class CoreQuestionBaseComponent {
const radioEl = radios[i]; const radioEl = radios[i];
const option: AddonModQuizQuestionRadioOption = { const option: AddonModQuizQuestionRadioOption = {
id: radioEl.id, id: radioEl.id,
class: '',
name: radioEl.name, name: radioEl.name,
value: radioEl.value, value: radioEl.value,
checked: radioEl.checked, checked: radioEl.checked,
@ -621,6 +622,7 @@ export class CoreQuestionBaseComponent {
const element = options[i]; const element = options[i];
const option: AddonModQuizQuestionRadioOption = { const option: AddonModQuizQuestionRadioOption = {
id: element.id, id: element.id,
class: '',
name: element.name, name: element.name,
value: element.value, value: element.value,
checked: element.checked, checked: element.checked,
@ -643,6 +645,7 @@ export class CoreQuestionBaseComponent {
// Not found, use the old format. // Not found, use the old format.
label = questionEl.querySelector('label[for="' + option.id + '"]'); label = questionEl.querySelector('label[for="' + option.id + '"]');
} }
option.class = label?.className || option.class;
// Check that we were able to successfully extract options required data. // Check that we were able to successfully extract options required data.
if (!label || option.name === undefined || option.value === undefined) { if (!label || option.name === undefined || option.value === undefined) {
@ -736,6 +739,7 @@ export type AddonModQuizQuestionSelectOption = {
export type AddonModQuizQuestionRadioOption = { export type AddonModQuizQuestionRadioOption = {
id: string; id: string;
name: string; name: string;
class: string;
value: string; value: string;
disabled: boolean; disabled: boolean;
checked: boolean; checked: boolean;

12
src/theme/components/format-text.scss
View File

@ -201,14 +201,6 @@ core-format-text {
} }
} }
// Erase if core-format-text display is contents again.
.flex > core-format-text {
display: flex;
}
.core-course-title > p.item-heading > core-format-text {
display: inline;
}
@keyframes loading { @keyframes loading {
0% { 0% {
left: -45%; left: -45%;
@ -327,6 +319,10 @@ core-rich-text-editor .core-rte-editor {
} }
} }
sub, sup {
overflow: visible !important;
}
.badge { .badge {
position: initial !important; position: initial !important;
} }