GuzhavinAleksey/Vmeda.Online
1
0
Fork 0
forked from CIT/Vmeda.Online
Code Pull Requests Activity

MOBILE-3899 quiz: Fix multichoice display flex

Browse Source
This commit is contained in:
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. -->
<ion-item class="ion-text-wrap">
<ion-label>
<p><core-format-text [component]="component" [componentId]="componentId" [text]="multiQuestion.text"
[contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId">
</core-format-text></p>
<p>
<core-format-text [component]="component" [componentId]="componentId" [text]="multiQuestion.text"
[contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId">
</core-format-text>
</p>
<p *ngIf="multiQuestion.prompt">{{ multiQuestion.prompt }}</p>
</ion-label>
</ion-item>
@ -12,7 +14,8 @@
<!-- Checkbox for multiple choice. -->
<ng-container *ngIf="multiQuestion.multi">
<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"
[contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId">
</core-format-text>
@ -38,9 +41,10 @@
</ng-container>
<!-- 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-label class="flex">
<ion-label [class]="option.class">
<core-format-text [component]="component" [componentId]="componentId" [text]="option.text"
[contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId">
</core-format-text>

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

@ -6,7 +6,11 @@
padding: 0 .7em;
}
.flex {
.answer {
line-height: 2em;
}
.d-flex {
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 option: AddonModQuizQuestionRadioOption = {
id: radioEl.id,
class: '',
name: radioEl.name,
value: radioEl.value,
checked: radioEl.checked,
@ -621,6 +622,7 @@ export class CoreQuestionBaseComponent {
const element = options[i];
const option: AddonModQuizQuestionRadioOption = {
id: element.id,
class: '',
name: element.name,
value: element.value,
checked: element.checked,
@ -643,6 +645,7 @@ export class CoreQuestionBaseComponent {
// Not found, use the old format.
label = questionEl.querySelector('label[for="' + option.id + '"]');
}
option.class = label?.className || option.class;
// Check that we were able to successfully extract options required data.
if (!label || option.name === undefined || option.value === undefined) {
@ -736,6 +739,7 @@ export type AddonModQuizQuestionSelectOption = {
export type AddonModQuizQuestionRadioOption = {
id: string;
name: string;
class: string;
value: string;
disabled: 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 {
0% {
left: -45%;
@ -327,6 +319,10 @@ core-rich-text-editor .core-rte-editor {
}
}
sub, sup {
overflow: visible !important;
}
.badge {
position: initial !important;
}