Vmeda.Online/src/addons/mod/h5pactivity/pages/attempt-results/attempt-results.html

<ion-header>
    <ion-toolbar>
        <ion-buttons slot="start">
            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
        </ion-buttons>
        <ion-title>
            <h1>
                <core-format-text *ngIf="h5pActivity" [text]="h5pActivity.name" contextLevel="module"
                    [contextInstanceId]="h5pActivity.coursemodule" [courseId]="courseId">
                </core-format-text>
            </h1>
        </ion-title>
    </ion-toolbar>
</ion-header>
<ion-content>
    <ion-refresher slot="fixed" [disabled]="!loaded" (ionRefresh)="doRefresh($event.target)">
        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
    </ion-refresher>
    <core-loading [hideUntil]="loaded">
        <ng-container *ngIf="attempt">
            <!-- Attempt number and user that did the attempt. -->
            <ion-item class="ion-text-wrap" *ngIf="user" core-user-link [userId]="user.id" [courseId]="courseId"
                [attr.aria-label]="user.fullname">
                <core-user-avatar [user]="user" slot="start" [courseId]="courseId" [linkProfile]="false"></core-user-avatar>
                <ion-label>
                    <p class="item-heading">{{ 'addon.mod_h5pactivity.attempt' | translate }} #{{attempt.attempt}}: {{user.fullname}}</p>
                </ion-label>
            </ion-item>
            <!-- Attempt number (if user not known). -->
            <ion-item class="ion-text-wrap" *ngIf="!user">
                <ion-label>
                    <p class="item-heading">{{ 'addon.mod_h5pactivity.attempt' | translate }} #{{attempt.attempt}}</p>
                </ion-label>
            </ion-item>

            <!-- Attempt summary. -->
            <ion-card class="addon-mod_h5pactivity-attempt-result-summary">
                <ion-list>
                    <ion-item class="ion-text-wrap">
                        <ion-label>
                            <p class="item-heading">{{ 'addon.mod_h5pactivity.startdate' | translate }}</p>
                            <p>{{ attempt.timecreated | coreFormatDate:'strftimedatetime' }}</p>
                        </ion-label>
                    </ion-item>
                    <ion-item class="ion-text-wrap">
                        <ion-label>
                            <p class="item-heading">{{ 'addon.mod_h5pactivity.completion' | translate }}</p>
                            <p *ngIf="attempt.completion">
                                <img src="assets/img/completion/completion-auto-y.svg" role="presentation" alt="">
                                {{ 'addon.mod_h5pactivity.attempt_completion_yes' | translate }}
                            </p>
                            <p *ngIf="!attempt.completion">
                                <img src="assets/img/completion/completion-auto-n.svg" role="presentation" alt="">
                                {{ 'addon.mod_h5pactivity.attempt_completion_no' | translate }}
                            </p>
                        </ion-label>
                    </ion-item>
                    <ion-item class="ion-text-wrap">
                        <ion-label>
                            <p class="item-heading">{{ 'addon.mod_h5pactivity.duration' | translate }}</p>
                            <p>{{ attempt.durationReadable }}</p>
                        </ion-label>
                    </ion-item>
                    <ion-item class="ion-text-wrap">
                        <ion-label>
                            <p class="item-heading">{{ 'addon.mod_h5pactivity.outcome' | translate }}</p>
                            <p *ngIf="attempt.success !== null && attempt.success">
                                <ion-icon name="fas-circle-check" aria-hidden="true"></ion-icon>
                                {{ 'addon.mod_h5pactivity.attempt_success_pass' | translate }}
                            </p>
                            <p *ngIf="attempt.success !== null && !attempt.success">
                                <ion-icon name="far-circle" aria-hidden="true"></ion-icon>
                                {{ 'addon.mod_h5pactivity.attempt_success_fail' | translate }}
                            </p>
                            <p *ngIf="attempt.success === null">
                                {{ 'addon.mod_h5pactivity.attempt_success_unknown' | translate }}
                            </p>
                        </ion-label>
                    </ion-item>
                    <ion-item *ngIf="attempt.maxscore" class="ion-text-wrap">
                        <ion-label>
                            <p class="item-heading">{{ 'addon.mod_h5pactivity.totalscore' | translate }}</p>
                            <p>{{ 'addon.mod_h5pactivity.score_out_of' | translate:{$a: attempt} }}</p>
                        </ion-label>
                    </ion-item>
                </ion-list>
            </ion-card>

            <!-- Results. -->
            <ng-container *ngIf="attempt.results">
                <ion-card *ngFor="let result of attempt.results">
                    <ion-card-header class="ion-text-wrap">
                        <ion-card-title>
                            <core-format-text [text]="result.description" [component]="component" [componentId]="cmId" contextLevel="module"
                                [contextInstanceId]="cmId" [courseId]="courseId">
                            </core-format-text>
                        </ion-card-title>
                    </ion-card-header>
                    <ion-item *ngIf="result.content" class="ion-text-wrap">
                        <ion-label>
                            <core-format-text [text]="result.content" [component]="component" [componentId]="cmId" contextLevel="module"
                                [contextInstanceId]="cmId" [courseId]="courseId">
                            </core-format-text>
                        </ion-label>
                    </ion-item>

                    <!-- Options. -->
                    <ng-container *ngIf="result.options && result.options.length">
                        <ion-item class="ion-text-wrap addon-mod_h5pactivity-result-table-header">
                            <ion-label>
                                <ion-row class="ion-align-items-center">
                                    <ion-col class="ion-text-start">{{ result.optionslabel }}</ion-col>
                                    <ion-col class="ion-text-center">{{ result.correctlabel }}</ion-col>
                                    <ion-col class="ion-text-center">{{ result.answerlabel }}</ion-col>
                                </ion-row>
                            </ion-label>
                        </ion-item>
                        <ion-item *ngFor="let option of result.options" class="ion-text-wrap addon-mod_h5pactivity-result-table-row">
                            <ion-label>
                                <ion-row class="ion-align-items-center">
                                    <ion-col class="ion-text-start">
                                        <core-format-text [text]="option.description" [component]="component" [componentId]="cmId"
                                            contextLevel="module" [contextInstanceId]="cmId" [courseId]="courseId">
                                        </core-format-text>
                                    </ion-col>
                                    <ion-col class="ion-text-center">
                                        <ng-container *ngIf="option.correctanswer">
                                            <ng-container *ngTemplateOutlet="answerTemplate; context: {answer: option.correctanswer}">
                                            </ng-container>
                                        </ng-container>
                                    </ion-col>
                                    <ion-col class="ion-text-center">
                                        <ng-container *ngIf="option.useranswer">
                                            <ng-container *ngTemplateOutlet="answerTemplate; context: {answer: option.useranswer}">
                                            </ng-container>
                                        </ng-container>
                                    </ion-col>
                                </ion-row>
                            </ion-label>
                        </ion-item>

                        <!-- Result score. -->
                        <ion-item *ngIf="result.maxscore" class="ion-text-wrap ion-text-end addon-mod_h5pactivity-result-score">
                            <ion-label>
                                <p><strong>
                                        {{ 'addon.mod_h5pactivity.score' | translate }}:
                                        {{ 'addon.mod_h5pactivity.score_out_of' | translate:{$a: result} }}
                                    </strong></p>
                            </ion-label>
                        </ion-item>
                    </ng-container>

                    <!-- Result doesn't support tracking. -->
                    <ion-item class="ion-text-wrap core-warning-item" *ngIf="!result.track">
                        <ion-icon slot="start" name="fas-triangle-exclamation" color="warning" aria-hidden="true"></ion-icon>
                        <ion-label>
                            {{ 'addon.mod_h5pactivity.no_compatible_track' | translate:{$a: result.interactiontype} }}
                        </ion-label>
                    </ion-item>
                </ion-card>
            </ng-container>
        </ng-container>
    </core-loading>
</ion-content>

<!-- Template to render an answer. -->
<ng-template #answerTemplate let-answer="answer">
    <p *ngIf="answer.correct">
        <ion-icon name="fas-check" [attr.aria-label]="'addon.mod_h5pactivity.answer_correct' | translate" color="success">
        </ion-icon>
        {{ answer.answer }}
    </p>
    <p *ngIf="answer.incorrect">
        <ion-icon name="fas-xmark" [attr.aria-label]="'addon.mod_h5pactivity.answer_incorrect' | translate" color="danger">
        </ion-icon>
        {{ answer.answer }}
    </p>
    <p *ngIf="answer.text">
        {{ answer.answer }}
    </p>
    <p *ngIf="answer.checked">
        <ion-icon name="fas-circle-check" [attr.aria-label]="'addon.mod_h5pactivity.answer_checked' | translate">
        </ion-icon>
    </p>
    <p *ngIf="answer.pass">
        <ion-icon name="fas-check" [attr.aria-label]="'addon.mod_h5pactivity.answer_pass' | translate" color="success">
        </ion-icon>
    </p>
    <p *ngIf="answer.fail">
        <ion-icon name="fas-xmark" [attr.aria-label]="'addon.mod_h5pactivity.answer_fail' | translate" color="danger">
        </ion-icon>
    </p>
</ng-template>