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

MOBILE-2847 shortanswer: Handle inline answer boxes

main
Dani Palou 2019-01-31 10:38:30 +01:00
parent 9d320b5914
commit 108fd65aa0
4 changed files with 27 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/addon/mod/quiz/pages/review/review.scss
View File

@ -2,7 +2,8 @@ ion-app.app-root page-addon-mod-quiz-review {
.item-radio-disabled,
.item-checkbox-disabled,
.item-select-disabled,
.item-input-disabled {
.item-input-disabled,
.text-input[disabled] {
opacity: 0.8;
.label, .radio, .checkbox, .select-disabled, .core-correct-icon {

4
src/addon/qtype/shortanswer/component/addon-qtype-shortanswer.html
View File

@ -1,8 +1,8 @@
<section ion-list *ngIf="question.text || question.text === ''">
<ion-item text-wrap>
<ion-item text-wrap class="addon-qtype-shortanswer-text">
<p><core-format-text [component]="component" [componentId]="componentId" [text]="question.text"></core-format-text></p>
</ion-item>
<ion-item text-wrap ngClass="core-{{question.input.correctIconColor}}-item">
<ion-item *ngIf="!question.input.isInline" text-wrap ngClass="core-{{question.input.correctIconColor}}-item">
<ion-label stacked>{{ 'addon.mod_quiz.answercolon' | translate }}</ion-label>
<ion-input padding-left type="text" [placeholder]="question.input.readOnly ? '' : 'core.question.answer' | translate" [attr.name]="question.input.name" [value]="question.input.value" autocorrect="off" [disabled]="question.input.readOnly">
</ion-input>

11
src/addon/qtype/shortanswer/component/shortanswer.scss 100644
View File

@ -0,0 +1,11 @@
addon-qtype-shortanswer {
.addon-qtype-shortanswer-text input {
display: inline-block;
border: 1px solid #ccc;
padding: 4px 6px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
margin-bottom: 10px;
}
}

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

@ -289,7 +289,8 @@ export class CoreQuestionBaseComponent {
id: input.id,
name: input.name,
value: input.value,
readOnly: input.readOnly
readOnly: input.readOnly,
isInline: !!this.domUtils.closest(input, '.qtext') // The answer can be inside the question text.
};
// Check if question is marked as correct.
@ -310,6 +311,16 @@ export class CoreQuestionBaseComponent {
this.question.input.correctIcon = '';
this.question.input.correctIconColor = '';
}
if (this.question.input.isInline) {
// Handle correct/incorrect classes and icons.
const content = <HTMLElement> questionEl.querySelector('.qtext');
this.questionHelper.replaceCorrectnessClasses(content);
this.questionHelper.treatCorrectnessIcons(content);
this.question.text = content.innerHTML;
}
}
return questionEl;