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

MOBILE-3523 essay: Fix essay text not displayed in review

main
Dani Palou 2020-11-24 10:42:37 +01:00
parent 95a16d6259
commit 8098acd526
6 changed files with 144 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/addon/mod/quiz/pages/player/player.html
View File

@ -58,7 +58,7 @@
</ion-note> </ion-note>
</ion-item-divider> </ion-item-divider>
<!-- Body of the question. --> <!-- Body of the question. -->
<core-question text-wrap [question]="question" [component]="component" [componentId]="quiz.coursemodule" [attemptId]="attempt.id" [usageId]="attempt.uniqueid" [offlineEnabled]="offline" contextLevel="module" [contextInstanceId]="quiz.coursemodule" [courseId]="courseId" (onAbort)="abortQuiz()" (buttonClicked)="behaviourButtonClicked($event)"></core-question> <core-question text-wrap [question]="question" [component]="component" [componentId]="quiz.coursemodule" [attemptId]="attempt.id" [usageId]="attempt.uniqueid" [offlineEnabled]="offline" contextLevel="module" [contextInstanceId]="quiz.coursemodule" [courseId]="courseId" [review]="false" (onAbort)="abortQuiz()" (buttonClicked)="behaviourButtonClicked($event)"></core-question>
</ion-card> </ion-card>
</div> </div>
</form> </form>

2
src/addon/mod/quiz/pages/review/review.html
View File

@ -77,7 +77,7 @@
</ion-note> </ion-note>
</ion-item-divider> </ion-item-divider>
<!-- Body of the question. --> <!-- Body of the question. -->
<core-question text-wrap [question]="question" [component]="component" [componentId]="componentId" [attemptId]="attempt.id" [usageId]="attempt.uniqueid" [offlineEnabled]="false" contextLevel="module" [contextInstanceId]="quiz.coursemodule" [courseId]="courseId"></core-question> <core-question text-wrap [question]="question" [component]="component" [componentId]="componentId" [attemptId]="attempt.id" [usageId]="attempt.uniqueid" [offlineEnabled]="false" contextLevel="module" [contextInstanceId]="quiz.coursemodule" [courseId]="courseId" [review]="true"></core-question>
</ion-card> </ion-card>
</div> </div>

81
src/addon/qtype/essay/component/addon-qtype-essay.html
View File

@ -4,49 +4,50 @@
<p><core-format-text [component]="component" [componentId]="componentId" [text]="question.text" [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId"></core-format-text></p> <p><core-format-text [component]="component" [componentId]="componentId" [text]="question.text" [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId"></core-format-text></p>
</ion-item> </ion-item>
<!-- Textarea. --> <!-- Editing the question. -->
<ion-item *ngIf="question.textarea && (!question.hasDraftFiles || uploadFilesSupported)"> <ng-container *ngIf="!review">
<!-- "Format" and draftid hidden inputs --> <!-- Textarea. -->
<input item-content *ngIf="question.formatInput" type="hidden" [name]="question.formatInput.name" [value]="question.formatInput.value" > <ion-item *ngIf="question.textarea && (!question.hasDraftFiles || uploadFilesSupported)">
<input item-content *ngIf="question.answerDraftIdInput" type="hidden" [name]="question.answerDraftIdInput.name" [value]="question.answerDraftIdInput.value" > <!-- "Format" and draftid hidden inputs -->
<!-- Plain text textarea. --> <input item-content *ngIf="question.formatInput" type="hidden" [name]="question.formatInput.name" [value]="question.formatInput.value" >
<ion-textarea *ngIf="question.isPlainText" class="core-question-textarea" [ngClass]='{"core-monospaced": question.isMonospaced}' placeholder="{{ 'core.question.answer' | translate }}" [attr.name]="question.textarea.name" aria-multiline="true" [ngModel]="question.textarea.text"></ion-textarea> <input item-content *ngIf="question.answerDraftIdInput" type="hidden" [name]="question.answerDraftIdInput.name" [value]="question.answerDraftIdInput.value" >
<!-- Rich text editor. --> <!-- Plain text textarea. -->
<core-rich-text-editor item-content *ngIf="!question.isPlainText" placeholder="{{ 'core.question.answer' | translate }}" [control]="formControl" [name]="question.textarea.name" [component]="component" [componentId]="componentId" [autoSave]="false"></core-rich-text-editor> <ion-textarea *ngIf="question.isPlainText" class="core-question-textarea" [ngClass]='{"core-monospaced": question.isMonospaced}' placeholder="{{ 'core.question.answer' | translate }}" [attr.name]="question.textarea.name" aria-multiline="true" [ngModel]="question.textarea.text"></ion-textarea>
</ion-item> <!-- Rich text editor. -->
<core-rich-text-editor item-content *ngIf="!question.isPlainText" placeholder="{{ 'core.question.answer' | translate }}" [control]="formControl" [name]="question.textarea.name" [component]="component" [componentId]="componentId" [autoSave]="false"></core-rich-text-editor>
</ion-item>
<!-- Draft files not supported. --> <!-- Draft files not supported. -->
<ng-container *ngIf="question.textarea && question.hasDraftFiles && !uploadFilesSupported"> <ng-container *ngIf="question.textarea && question.hasDraftFiles && !uploadFilesSupported">
<ion-item text-wrap class="core-danger-item"> <ion-item text-wrap class="core-danger-item">
<p class="core-question-warning">{{ 'core.question.errorembeddedfilesnotsupportedinsite' | translate }}</p> <p class="core-question-warning">{{ 'core.question.errorembeddedfilesnotsupportedinsite' | translate }}</p>
</ion-item> </ion-item>
<ion-item text-wrap> <ion-item text-wrap>
<p><core-format-text [component]="component" [componentId]="componentId" [text]="question.textarea.text" [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId"></core-format-text></p> <p><core-format-text [component]="component" [componentId]="componentId" [text]="question.textarea.text" [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId"></core-format-text></p>
</ion-item> </ion-item>
</ng-container>
<!-- Attachments. -->
<ng-container *ngIf="question.allowsAttachments">
<core-attachments *ngIf="uploadFilesSupported && question.attachmentsDraftIdInput" [files]="attachments" [component]="component" [componentId]="componentId" [maxSize]="question.attachmentsMaxBytes" [maxSubmissions]="question.attachmentsMaxFiles" [allowOffline]="offlineEnabled" [acceptedTypes]="question.attachmentsAcceptedTypes"></core-attachments>
<input item-content *ngIf="question.attachmentsDraftIdInput" type="hidden" [name]="question.attachmentsDraftIdInput.name" [value]="question.attachmentsDraftIdInput.value" >
<!-- Attachments not supported in this site. -->
<ion-item text-wrap *ngIf="!uploadFilesSupported" class="core-danger-item">
<p class="core-question-warning">{{ 'core.question.errorattachmentsnotsupportedinsite' | translate }}</p>
</ion-item>
</ng-container>
</ng-container> </ng-container>
<!-- Attachments. --> <!-- Reviewing the question. -->
<ng-container *ngIf="question.allowsAttachments"> <ng-container *ngIf="review">
<core-attachments *ngIf="uploadFilesSupported && question.attachmentsDraftIdInput" [files]="attachments" [component]="component" [componentId]="componentId" [maxSize]="question.attachmentsMaxBytes" [maxSubmissions]="question.attachmentsMaxFiles" [allowOffline]="offlineEnabled" [acceptedTypes]="question.attachmentsAcceptedTypes"></core-attachments> <!-- Answer to the question and attachments (reviewing). -->
<ion-item text-wrap *ngIf="question.answer || question.answer == ''">
<core-files *ngIf="uploadFilesSupported && !question.attachmentsDraftIdInput" [files]="attachments" [component]="component" [componentId]="componentId"></core-files> <p><core-format-text [ngClass]='{"core-monospaced": question.isMonospaced}' [component]="component" [componentId]="componentId" [text]="question.answer" [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId"></core-format-text></p>
<input item-content *ngIf="question.attachmentsDraftIdInput" type="hidden" [name]="question.attachmentsDraftIdInput.name" [value]="question.attachmentsDraftIdInput.value" >
<!-- Attachments not supported in this site. -->
<ion-item text-wrap *ngIf="!uploadFilesSupported" class="core-danger-item">
<p class="core-question-warning">{{ 'core.question.errorattachmentsnotsupportedinsite' | translate }}</p>
</ion-item> </ion-item>
<!-- List of attachments when reviewing. -->
<core-files *ngIf="question.attachments" [files]="question.attachments" [component]="component" [componentId]="componentId"></core-files>
</ng-container> </ng-container>
<!-- Answer to the question and attachments (reviewing). -->
<ion-item text-wrap *ngIf="!question.textarea && (question.answer || question.answer == '')">
<p><core-format-text [ngClass]='{"core-monospaced": question.isMonospaced}' [component]="component" [componentId]="componentId" [text]="question.answer" [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId"></core-format-text></p>
</ion-item>
<ion-item *ngIf="!question.textarea && question.attachments && question.attachments.length">
<div no-lines>
<core-file *ngFor="let attachment of question.attachments" [file]="attachment" [component]="component" [componentId]="componentId"></core-file>
</div>
</ion-item>
</section> </section>

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

@ -44,11 +44,11 @@ export class AddonQtypeEssayComponent extends CoreQuestionBaseComponent implemen
*/ */
ngOnInit(): void { ngOnInit(): void {
this.uploadFilesSupported = typeof this.question.responsefileareas != 'undefined'; this.uploadFilesSupported = typeof this.question.responsefileareas != 'undefined';
this.initEssayComponent(); this.initEssayComponent(this.review);
this.formControl = this.fb.control(this.question.textarea && this.question.textarea.text); this.formControl = this.fb.control(this.question.textarea && this.question.textarea.text);
if (this.question.allowsAttachments && this.uploadFilesSupported) { if (this.question.allowsAttachments && this.uploadFilesSupported && !this.review) {
this.loadAttachments(); this.loadAttachments();
} }
} }

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

@ -32,6 +32,7 @@ export class CoreQuestionBaseComponent {
@Input() contextLevel?: string; // The context level. @Input() contextLevel?: string; // The context level.
@Input() contextInstanceId?: number; // The instance ID related to the context. @Input() contextInstanceId?: number; // The instance ID related to the context.
@Input() courseId?: number; // The course the question belongs to (if any). @Input() courseId?: number; // The course the question belongs to (if any).
@Input() review?: boolean; // Whether the user is in review mode.
@Output() buttonClicked: EventEmitter<any>; // Should emit an event when a behaviour button is clicked. @Output() buttonClicked: EventEmitter<any>; // Should emit an event when a behaviour button is clicked.
@Output() onAbort: EventEmitter<void>; // Should emit an event if the question should be aborted. @Output() onAbort: EventEmitter<void>; // Should emit an event if the question should be aborted.
@ -207,99 +208,118 @@ export class CoreQuestionBaseComponent {
/** /**
* Initialize a question component of type essay. * Initialize a question component of type essay.
* *
* @param review Whether we're in review mode.
* @return Element containing the question HTML, void if the data is not valid. * @return Element containing the question HTML, void if the data is not valid.
*/ */
initEssayComponent(): void | HTMLElement { initEssayComponent(review?: boolean): void | HTMLElement {
const questionEl = this.initComponent(); const questionEl = this.initComponent();
if (questionEl) { if (!questionEl) {
const textarea = <HTMLTextAreaElement> questionEl.querySelector('textarea[name*=_answer]'); return;
const answerDraftIdInput = <HTMLInputElement> questionEl.querySelector('input[name*="_answer:itemid"]'); }
const answerDraftIdInput = <HTMLInputElement> questionEl.querySelector('input[name*="_answer:itemid"]');
if (this.question.settings) {
this.question.allowsAttachments = this.question.settings.attachments != '0';
this.question.allowsAnswerFiles = this.question.settings.responseformat == 'editorfilepicker';
this.question.isMonospaced = this.question.settings.responseformat == 'monospaced';
this.question.isPlainText = this.question.isMonospaced || this.question.settings.responseformat == 'plain';
this.question.hasInlineText = this.question.settings.responseformat != 'noinline';
} else {
this.question.allowsAttachments = !!questionEl.querySelector('div[id*=filemanager]');
this.question.allowsAnswerFiles = !!answerDraftIdInput;
this.question.isMonospaced = !!questionEl.querySelector('.qtype_essay_monospaced');
this.question.isPlainText = this.question.isMonospaced || !!questionEl.querySelector('.qtype_essay_plain');
}
if (review) {
// Search the answer and the attachments.
this.question.answer = this.domUtils.getContentsOfElement(questionEl, '.qtype_essay_response');
if (this.question.settings) { if (this.question.settings) {
this.question.allowsAttachments = this.question.settings.attachments != '0'; this.question.attachments = Array.from(this.questionHelper.getResponseFileAreaFiles(this.question, 'attachments'));
this.question.allowsAnswerFiles = this.question.settings.responseformat == 'editorfilepicker';
this.question.isMonospaced = this.question.settings.responseformat == 'monospaced';
this.question.isPlainText = this.question.isMonospaced || this.question.settings.responseformat == 'plain';
} else { } else {
this.question.allowsAttachments = !!questionEl.querySelector('div[id*=filemanager]');
this.question.allowsAnswerFiles = !!answerDraftIdInput;
this.question.isMonospaced = !!questionEl.querySelector('.qtype_essay_monospaced');
this.question.isPlainText = this.question.isMonospaced || !!questionEl.querySelector('.qtype_essay_plain');
}
this.question.hasDraftFiles = this.question.allowsAnswerFiles &&
this.questionHelper.hasDraftFileUrls(questionEl.innerHTML);
if (!textarea && !this.question.allowsAttachments) {
// Textarea and filemanager not found, we might be in review. Search the answer and the attachments.
this.question.answer = this.domUtils.getContentsOfElement(questionEl, '.qtype_essay_response');
this.question.attachments = this.questionHelper.getQuestionAttachmentsFromHtml( this.question.attachments = this.questionHelper.getQuestionAttachmentsFromHtml(
this.domUtils.getContentsOfElement(questionEl, '.attachments')); this.domUtils.getContentsOfElement(questionEl, '.attachments'));
return questionEl;
} }
if (textarea) { return;
const input = <HTMLInputElement> questionEl.querySelector('input[type="hidden"][name*=answerformat]'); }
let content = this.textUtils.decodeHTML(textarea.innerHTML || '');
if (this.question.hasDraftFiles && this.question.responsefileareas) { const textarea = <HTMLTextAreaElement> questionEl.querySelector('textarea[name*=_answer]');
content = this.textUtils.replaceDraftfileUrls(CoreSites.instance.getCurrentSite().getURL(), content,
this.questionHelper.getResponseFileAreaFiles(this.question, 'answer')).text;
}
this.question.textarea = { this.question.hasDraftFiles = this.question.allowsAnswerFiles &&
id: textarea.id, this.questionHelper.hasDraftFileUrls(questionEl.innerHTML);
name: textarea.name,
text: content,
};
if (input) { if (!textarea && (this.question.hasInlineText || !this.question.allowsAttachments)) {
this.question.formatInput = { // Textarea not found, we might be in review. Search the answer and the attachments.
name: input.name, this.question.answer = this.domUtils.getContentsOfElement(questionEl, '.qtype_essay_response');
value: input.value this.question.attachments = this.questionHelper.getQuestionAttachmentsFromHtml(
}; this.domUtils.getContentsOfElement(questionEl, '.attachments'));
}
}
if (answerDraftIdInput) {
this.question.answerDraftIdInput = {
name: answerDraftIdInput.name,
value: Number(answerDraftIdInput.value),
};
}
if (this.question.allowsAttachments) {
const attachmentsInput = <HTMLInputElement> questionEl.querySelector('.attachments input[name*=_attachments]');
const objectElement = <HTMLObjectElement> questionEl.querySelector('.attachments object');
const fileManagerUrl = objectElement && objectElement.data;
if (attachmentsInput) {
this.question.attachmentsDraftIdInput = {
name: attachmentsInput.name,
value: Number(attachmentsInput.value),
};
}
if (this.question.settings) {
this.question.attachmentsMaxFiles = Number(this.question.settings.attachments);
this.question.attachmentsAcceptedTypes = this.question.settings.filetypeslist &&
this.question.settings.filetypeslist.join(',');
}
if (fileManagerUrl) {
const params = CoreUrlUtils.instance.extractUrlParams(fileManagerUrl);
const maxBytes = Number(params.maxbytes);
const areaMaxBytes = Number(params.areamaxbytes);
this.question.attachmentsMaxBytes = maxBytes === -1 || areaMaxBytes === -1 ?
Math.max(maxBytes, areaMaxBytes) : Math.min(maxBytes, areaMaxBytes);
}
}
return questionEl; return questionEl;
} }
if (textarea) {
const input = <HTMLInputElement> questionEl.querySelector('input[type="hidden"][name*=answerformat]');
let content = this.textUtils.decodeHTML(textarea.innerHTML || '');
if (this.question.hasDraftFiles && this.question.responsefileareas) {
content = this.textUtils.replaceDraftfileUrls(CoreSites.instance.getCurrentSite().getURL(), content,
this.questionHelper.getResponseFileAreaFiles(this.question, 'answer')).text;
}
this.question.textarea = {
id: textarea.id,
name: textarea.name,
text: content,
};
if (input) {
this.question.formatInput = {
name: input.name,
value: input.value
};
}
}
if (answerDraftIdInput) {
this.question.answerDraftIdInput = {
name: answerDraftIdInput.name,
value: Number(answerDraftIdInput.value),
};
}
if (this.question.allowsAttachments) {
const attachmentsInput = <HTMLInputElement> questionEl.querySelector('.attachments input[name*=_attachments]');
const objectElement = <HTMLObjectElement> questionEl.querySelector('.attachments object');
const fileManagerUrl = objectElement && objectElement.data;
if (attachmentsInput) {
this.question.attachmentsDraftIdInput = {
name: attachmentsInput.name,
value: Number(attachmentsInput.value),
};
}
if (this.question.settings) {
this.question.attachmentsMaxFiles = Number(this.question.settings.attachments);
this.question.attachmentsAcceptedTypes = this.question.settings.filetypeslist &&
this.question.settings.filetypeslist.join(',');
}
if (fileManagerUrl) {
const params = CoreUrlUtils.instance.extractUrlParams(fileManagerUrl);
const maxBytes = Number(params.maxbytes);
const areaMaxBytes = Number(params.areamaxbytes);
this.question.attachmentsMaxBytes = maxBytes === -1 || areaMaxBytes === -1 ?
Math.max(maxBytes, areaMaxBytes) : Math.min(maxBytes, areaMaxBytes);
}
}
return questionEl;
} }
/** /**

4
src/core/question/components/question/question.ts
View File

@ -39,6 +39,7 @@ export class CoreQuestionComponent implements OnInit {
@Input() contextLevel?: string; // The context level. @Input() contextLevel?: string; // The context level.
@Input() contextInstanceId?: number; // The instance ID related to the context. @Input() contextInstanceId?: number; // The instance ID related to the context.
@Input() courseId?: number; // Course ID the question belongs to (if any). It can be used to improve performance with filters. @Input() courseId?: number; // Course ID the question belongs to (if any). It can be used to improve performance with filters.
@Input() review?: boolean; // Whether the user is in review mode.
@Output() buttonClicked: EventEmitter<any>; // Will emit an event when a behaviour button is clicked. @Output() buttonClicked: EventEmitter<any>; // Will emit an event when a behaviour button is clicked.
@Output() onAbort: EventEmitter<void>; // Will emit an event if the question should be aborted. @Output() onAbort: EventEmitter<void>; // Will emit an event if the question should be aborted.
@ -88,8 +89,9 @@ export class CoreQuestionComponent implements OnInit {
contextLevel: this.contextLevel, contextLevel: this.contextLevel,
contextInstanceId: this.contextInstanceId, contextInstanceId: this.contextInstanceId,
courseId: this.courseId, courseId: this.courseId,
review: this.review,
buttonClicked: this.buttonClicked, buttonClicked: this.buttonClicked,
onAbort: this.onAbort onAbort: this.onAbort,
}; };
// Treat the question. // Treat the question.