Vmeda.Online/src/addon/mod/lesson/pages/player/player.html

<ion-header>
    <ion-navbar>
        <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>