221 lines
14 KiB
HTML
221 lines
14 KiB
HTML
<ion-header>
|
|
<ion-navbar core-back-button>
|
|
<ion-title><core-format-text [text]="title"></core-format-text></ion-title>
|
|
|
|
<ion-buttons end>
|
|
<button *ngIf="displayMenu || mediaFile" ion-button icon-only [attr.aria-label]="'addon.mod_lesson.lessonmenu' | translate" (click)="menuModal.present()">
|
|
<ion-icon name="bookmark"></ion-icon>
|
|
</button>
|
|
</ion-buttons>
|
|
</ion-navbar>
|
|
</ion-header>
|
|
<ion-content>
|
|
<core-loading [hideUntil]="loaded">
|
|
<!-- Info messages. Only show the first one. -->
|
|
<div class="core-info-card" icon-start *ngIf="lesson && messages && messages.length">
|
|
<ion-icon name="information-circle"></ion-icon>
|
|
<core-format-text [component]="component" [componentId]="lesson.coursemodule" [text]="messages[0].message"></core-format-text>
|
|
</div>
|
|
|
|
<div *ngIf="lesson" [ngClass]='{"addon-mod_lesson-slideshow": lesson.slideshow}' [ngStyle]="{'width': lessonWidth, 'height': lessonHeight}">
|
|
|
|
<core-timer *ngIf="endTime" [endTime]="endTime" (finished)="timeUp()" [timerText]="'addon.mod_lesson.timeremaining' | translate"></core-timer>
|
|
|
|
<!-- Retake and ongoing score. -->
|
|
<ion-item text-wrap *ngIf="showRetake && !eolData && !processData">
|
|
<p>{{ 'addon.mod_lesson.attempt' | translate:{$a: retake} }}</p>
|
|
</ion-item>
|
|
<ion-item text-wrap *ngIf="pageData && pageData.ongoingscore && !eolData && !processData" class="addon-mod_lesson-ongoingscore">
|
|
<core-format-text [component]="component" [componentId]="lesson.coursemodule" [text]="pageData.ongoingscore"></core-format-text>
|
|
</ion-item>
|
|
|
|
<!-- Page content. -->
|
|
<ion-card *ngIf="!eolData && !processData">
|
|
<!-- Content page. -->
|
|
<ion-item text-wrap *ngIf="!question">
|
|
<core-format-text [component]="component" [componentId]="lesson.coursemodule" [text]="pageContent"></core-format-text>
|
|
</ion-item>
|
|
|
|
<!-- Question page. -->
|
|
<form *ngIf="question" ion-list [formGroup]="questionForm">
|
|
<ion-item-divider text-wrap color="light">
|
|
<core-format-text [component]="component" [componentId]="lesson.coursemodule" [text]="pageContent"></core-format-text>
|
|
</ion-item-divider>
|
|
|
|
<input *ngFor="let input of question.hiddenInputs" type="hidden" [name]="input.name" [value]="input.value" />
|
|
|
|
<!-- Render a different input depending on the type of the question. -->
|
|
<ng-container [ngSwitch]="question.template">
|
|
|
|
<!-- Short answer. -->
|
|
<ng-container *ngSwitchCase="'shortanswer'">
|
|
<ion-input padding-left [type]="question.input.type" placeholder="{{ 'addon.mod_lesson.youranswer' | translate }}" [id]="question.input.id" [formControlName]="question.input.name" autocorrect="off" [maxlength]="question.input.maxlength">
|
|
</ion-input>
|
|
</ng-container>
|
|
|
|
<!-- Essay. -->
|
|
<ng-container *ngSwitchCase="'essay'">
|
|
<ion-item *ngIf="question.textarea">
|
|
<core-rich-text-editor item-content placeholder="{{ 'addon.mod_lesson.youranswer' | translate }}" [control]="question.control" [component]="component" [componentId]="lesson.coursemodule"></core-rich-text-editor>
|
|
</ion-item>
|
|
<ion-item text-wrap *ngIf="!question.textarea && question.useranswer">
|
|
<p class="item-heading">{{ 'addon.mod_lesson.youranswer' | translate }}</p>
|
|
<p><core-format-text [component]="component" [componentId]="lesson.coursemodule" [text]="question.useranswer"></core-format-text></p>
|
|
</ion-item>
|
|
</ng-container>
|
|
|
|
<!-- Multichoice. -->
|
|
<ng-container *ngSwitchCase="'multichoice'">
|
|
<!-- Single choice. -->
|
|
<div *ngIf="!question.multi" radio-group [formControlName]="question.controlName">
|
|
<ion-item text-wrap *ngFor="let option of question.options">
|
|
<ion-label>
|
|
<core-format-text [component]="component" [componentId]="lesson.coursemodule" [text]="option.text"></core-format-text>
|
|
</ion-label>
|
|
<ion-radio [id]="option.id" [value]="option.value" [disabled]="option.disabled"></ion-radio>
|
|
</ion-item>
|
|
</div>
|
|
|
|
<!-- Multiple choice. -->
|
|
<ng-container *ngIf="question.multi">
|
|
<ion-item text-wrap *ngFor="let option of question.options">
|
|
<ion-label>
|
|
<core-format-text [component]="component" [componentId]="lesson.coursemodule" [text]="option.text"></core-format-text>
|
|
</ion-label>
|
|
<ion-checkbox [id]="option.id" [formControlName]="option.name" item-end></ion-checkbox>
|
|
</ion-item>
|
|
</ng-container>
|
|
</ng-container>
|
|
|
|
<!-- Matching. -->
|
|
<ng-container *ngSwitchCase="'matching'">
|
|
<ion-item text-wrap *ngFor="let row of question.rows">
|
|
<ion-grid item-content>
|
|
<ion-row>
|
|
<ion-col>
|
|
<p><core-format-text id="addon-mod_lesson-matching-{{row.id}}" [component]="component" [componentId]="lesson.coursemodule" [text]="row.text"></core-format-text></p>
|
|
</ion-col>
|
|
<ion-col>
|
|
<ion-select [id]="row.id" [formControlName]="row.name" [attr.aria-labelledby]="'addon-mod_lesson-matching-' + row.id" interface="popover">
|
|
<ion-option *ngFor="let option of row.options" [value]="option.value">{{option.label}}</ion-option>
|
|
</ion-select>
|
|
</ion-col>
|
|
</ion-row>
|
|
</ion-grid>
|
|
</ion-item>
|
|
</ng-container>
|
|
</ng-container>
|
|
|
|
<ion-item>
|
|
<button ion-button block (click)="submitQuestion()" class="button-no-uppercase">{{ question.submitLabel }}</button>
|
|
</ion-item>
|
|
</form>
|
|
</ion-card>
|
|
|
|
<!-- Page buttons and progress. -->
|
|
<ion-list *ngIf="!eolData && !processData">
|
|
<ion-grid text-wrap *ngIf="pageButtons && pageButtons.length" class="addon-mod_lesson-pagebuttons">
|
|
<ion-row align-items-center>
|
|
<ion-col *ngFor="let button of pageButtons" col-12 col-md-6 col-lg-3 col-xl>
|
|
<a ion-button block outline text-wrap [id]="button.id" (click)="buttonClicked(button.data)" class="button-no-uppercase">{{ button.content }}</a>
|
|
</ion-col>
|
|
</ion-row>
|
|
</ion-grid>
|
|
<ion-item text-wrap *ngIf="lesson && lesson.progressbar && !canManage && pageData">
|
|
<p>{{ 'addon.mod_lesson.progresscompleted' | translate:{$a: pageData.progress} }}</p>
|
|
<core-progress-bar [progress]="pageData.progress"></core-progress-bar>
|
|
</ion-item>
|
|
<div class="core-info-card" icon-start *ngIf="lesson && lesson.progressbar && canManage">
|
|
<ion-icon name="information-circle"></ion-icon>
|
|
{{ 'addon.mod_lesson.progressbarteacherwarning2' | translate }}
|
|
</div>
|
|
</ion-list>
|
|
|
|
<!-- End of lesson reached. -->
|
|
<ion-card *ngIf="eolData && !processData">
|
|
<div class="core-warning-card" icon-start *ngIf="eolData.offline && eolData.offline.value">
|
|
<ion-icon name="warning"></ion-icon>
|
|
{{ 'addon.mod_lesson.finishretakeoffline' | translate }}
|
|
</div>
|
|
|
|
<h3 padding *ngIf="eolData.gradelesson">{{ 'addon.mod_lesson.congratulations' | translate }}</h3>
|
|
<ion-item text-wrap *ngIf="eolData.notenoughtimespent">
|
|
<core-format-text [text]="eolData.notenoughtimespent.message"></core-format-text>
|
|
</ion-item>
|
|
<ion-item text-wrap *ngIf="eolData.numberofpagesviewed">
|
|
<core-format-text [text]="eolData.numberofpagesviewed.message"></core-format-text>
|
|
</ion-item>
|
|
<ion-item text-wrap *ngIf="eolData.youshouldview">
|
|
<core-format-text [text]="eolData.youshouldview.message"></core-format-text>
|
|
</ion-item>
|
|
<ion-item text-wrap *ngIf="eolData.numberofcorrectanswers">
|
|
<core-format-text [text]="eolData.numberofcorrectanswers.message"></core-format-text>
|
|
</ion-item>
|
|
<ion-item text-wrap *ngIf="eolData.displayscorewithessays">
|
|
<core-format-text [text]="eolData.displayscorewithessays.message"></core-format-text>
|
|
</ion-item>
|
|
<ion-item text-wrap *ngIf="!eolData.displayscorewithessays && eolData.displayscorewithoutessays">
|
|
<core-format-text [text]="eolData.displayscorewithoutessays.message"></core-format-text>
|
|
</ion-item>
|
|
<ion-item text-wrap *ngIf="eolData.yourcurrentgradeisoutof">
|
|
<core-format-text [text]="eolData.yourcurrentgradeisoutof.message"></core-format-text>
|
|
</ion-item>
|
|
<ion-item text-wrap *ngIf="eolData.eolstudentoutoftimenoanswers">
|
|
<core-format-text [text]="eolData.eolstudentoutoftimenoanswers.message"></core-format-text>
|
|
</ion-item>
|
|
<ion-item text-wrap *ngIf="eolData.welldone">
|
|
<core-format-text [text]="eolData.welldone.message"></core-format-text>
|
|
</ion-item>
|
|
<ion-item text-wrap *ngIf="lesson.progressbar && eolData.progresscompleted">
|
|
<p>{{ 'addon.mod_lesson.progresscompleted' | translate:{$a: eolData.progresscompleted.value} }}</p>
|
|
<core-progress-bar [progress]="eolData.progresscompleted.value"></core-progress-bar>
|
|
</ion-item>
|
|
<ion-item text-wrap *ngIf="eolData.displayofgrade">
|
|
<core-format-text [text]="eolData.displayofgrade.message"></core-format-text>
|
|
</ion-item>
|
|
<ion-item text-wrap *ngIf="eolData.reviewlesson">
|
|
<a ion-button block (click)="reviewLesson(eolData.reviewlesson.pageid)" class="button-no-uppercase">
|
|
<core-format-text [text]="'addon.mod_lesson.reviewlesson' | translate"></core-format-text>
|
|
</a>
|
|
</ion-item>
|
|
<ion-item text-wrap *ngIf="eolData.modattemptsnoteacher">
|
|
<core-format-text [text]="eolData.modattemptsnoteacher.message"></core-format-text>
|
|
</ion-item>
|
|
<ion-item text-wrap *ngIf="eolData.activitylink && eolData.activitylink.value">
|
|
<ng-container *ngIf="eolData.activitylink.value.formatted">
|
|
<!-- Activity link was successfully formatted, render the button. -->
|
|
<a ion-button block color="light" [href]="eolData.activitylink.value.href" core-link [capture]="true" class="button-no-uppercase">
|
|
<core-format-text [text]="eolData.activitylink.value.label"></core-format-text>
|
|
</a>
|
|
</ng-container>
|
|
<ng-container *ngIf="!eolData.activitylink.value.formatted">
|
|
<!-- Activity link wasn't formatted, render the original link. -->
|
|
<core-format-text [text]="eolData.activitylink.value.label"></core-format-text>
|
|
</ng-container>
|
|
</ion-item>
|
|
</ion-card>
|
|
|
|
<!-- Feedback returned when processing an action. -->
|
|
<ion-list *ngIf="processData">
|
|
<ion-item text-wrap *ngIf="processData.ongoingscore && !processData.reviewmode" >
|
|
<core-format-text class="addon-mod_lesson-ongoingscore" [text]="processData.ongoingscore"></core-format-text>
|
|
</ion-item>
|
|
<ion-item text-wrap *ngIf="!processData.reviewmode || review">
|
|
<p *ngIf="!processData.reviewmode">
|
|
<core-format-text [component]="component" [componentId]="lesson.coursemodule" [text]="processData.feedback"></core-format-text>
|
|
</p>
|
|
<div *ngIf="review">
|
|
<p>{{ 'addon.mod_lesson.gotoendoflesson' | translate }}</p>
|
|
<p>{{ 'addon.mod_lesson.or' | translate }}</p>
|
|
<p>{{ 'addon.mod_lesson.continuetonextpage' | translate }}</p>
|
|
</div>
|
|
</ion-item>
|
|
<ion-item text-wrap *ngIf="review || (processData.buttons && processData.buttons.length)">
|
|
<a ion-button block color="light" *ngIf="review" (click)="changePage(LESSON_EOL)">{{ 'addon.mod_lesson.finish' | translate }}</a>
|
|
<a ion-button block color="light" *ngFor="let button of processData.buttons" (click)="changePage(button.pageId, true)">{{ button.label | translate }}</a>
|
|
</ion-item>
|
|
</ion-list>
|
|
</div>
|
|
</core-loading>
|
|
</ion-content>
|