|
| 1 | +<ion-header> |
| 2 | + <ion-navbar core-back-button> |
| 3 | + <ion-title><core-format-text *ngIf="h5pActivity" [text]="h5pActivity.name" contextLevel="module" [contextInstanceId]="h5pActivity.coursemodule" [courseId]="courseId"></core-format-text></ion-title> |
| 4 | + </ion-navbar> |
| 5 | +</ion-header> |
| 6 | +<ion-content> |
| 7 | + <ion-refresher [enabled]="loaded" (ionRefresh)="doRefresh($event)"> |
| 8 | + <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content> |
| 9 | + </ion-refresher> |
| 10 | + <core-loading [hideUntil]="loaded"> |
| 11 | + <ng-container *ngIf="attempt"> |
| 12 | + <!-- Attempt number and user that did the attempt. --> |
| 13 | + <a ion-item text-wrap *ngIf="user" core-user-link [userId]="user.id" [courseId]="courseId" [title]="user.fullname"> |
| 14 | + <ion-avatar core-user-avatar [user]="user" item-start></ion-avatar> |
| 15 | + <h2>{{ 'addon.mod_h5pactivity.attempt' | translate }} #{{attempt.attempt}}: {{user.fullname}}</h2> |
| 16 | + </a> |
| 17 | + <!-- Attempt number (if user not known). --> |
| 18 | + <ion-item text-wrap *ngIf="!user"> |
| 19 | + <h2>{{ 'addon.mod_h5pactivity.attempt' | translate }} #{{attempt.attempt}}</h2> |
| 20 | + </ion-item> |
| 21 | + |
| 22 | + <!-- Attempt summary. --> |
| 23 | + <ion-card class="addon-mod_h5pactivity-attempt-result-summary"> |
| 24 | + <ion-list> |
| 25 | + <ion-item text-wrap no-lines> |
| 26 | + <h2>{{ 'addon.mod_h5pactivity.startdate' | translate }}</h2> |
| 27 | + <p>{{ attempt.timecreated | coreFormatDate:'strftimedatetime' }}</p> |
| 28 | + </ion-item> |
| 29 | + <ion-item text-wrap no-lines> |
| 30 | + <h2>{{ 'addon.mod_h5pactivity.completion' | translate }}</h2> |
| 31 | + <p *ngIf="attempt.completion"> |
| 32 | + <img src="assets/img/completion/completion-auto-y.svg" role="presentation" alt=""> |
| 33 | + {{ 'addon.mod_h5pactivity.attempt_completion_yes' | translate }} |
| 34 | + </p> |
| 35 | + <p *ngIf="!attempt.completion"> |
| 36 | + <img src="assets/img/completion/completion-auto-n.svg" role="presentation" alt=""> |
| 37 | + {{ 'addon.mod_h5pactivity.attempt_completion_no' | translate }} |
| 38 | + </p> |
| 39 | + </ion-item> |
| 40 | + <ion-item text-wrap no-lines> |
| 41 | + <h2>{{ 'addon.mod_h5pactivity.duration' | translate }}</h2> |
| 42 | + <p>{{ attempt.durationReadable }}</p> |
| 43 | + </ion-item> |
| 44 | + <ion-item text-wrap no-lines> |
| 45 | + <h2>{{ 'addon.mod_h5pactivity.outcome' | translate }}</h2> |
| 46 | + <p *ngIf="attempt.success !== null && attempt.success" > |
| 47 | + <core-icon name="fa-check-circle"></core-icon> |
| 48 | + {{ 'addon.mod_h5pactivity.attempt_success_pass' | translate }} |
| 49 | + </p> |
| 50 | + <p *ngIf="attempt.success !== null && !attempt.success" > |
| 51 | + <core-icon name="fa-circle-o"></core-icon> |
| 52 | + {{ 'addon.mod_h5pactivity.attempt_success_fail' | translate }} |
| 53 | + </p> |
| 54 | + <p *ngIf="attempt.success === null" > |
| 55 | + {{ 'addon.mod_h5pactivity.attempt_success_unknown' | translate }} |
| 56 | + </p> |
| 57 | + </ion-item> |
| 58 | + <ion-item *ngIf="attempt.maxscore" text-wrap no-lines> |
| 59 | + <h2>{{ 'addon.mod_h5pactivity.totalscore' | translate }}</h2> |
| 60 | + <p>{{ 'addon.mod_h5pactivity.score_out_of' | translate:{$a: attempt} }}</p> |
| 61 | + </ion-item> |
| 62 | + </ion-list> |
| 63 | + </ion-card> |
| 64 | + |
| 65 | + <!-- Results. --> |
| 66 | + <ng-container *ngIf="attempt.results"> |
| 67 | + <ion-card *ngFor="let result of attempt.results"> |
| 68 | + <ion-card-header text-wrap> |
| 69 | + <core-format-text [text]="result.description" [component]="component" [componentId]="h5pActivity.cmid" contextLevel="module" [contextInstanceId]="h5pActivity.cmid" [courseId]="courseId"></core-format-text> |
| 70 | + </ion-card-header> |
| 71 | + <ion-item *ngIf="result.content" text-wrap> |
| 72 | + <core-format-text [text]="result.content" [component]="component" [componentId]="h5pActivity.cmid" contextLevel="module" [contextInstanceId]="h5pActivity.cmid" [courseId]="courseId"></core-format-text> |
| 73 | + </ion-item> |
| 74 | + |
| 75 | + <!-- Options. --> |
| 76 | + <ng-container *ngIf="result.options && result.options.length"> |
| 77 | + <ion-item text-wrap class="addon-mod_h5pactivity-result-table-header"> |
| 78 | + <ion-row align-items-center> |
| 79 | + <ion-col text-center>{{ result.optionslabel }}</ion-col> |
| 80 | + <ion-col text-center>{{ result.correctlabel }}</ion-col> |
| 81 | + <ion-col text-center>{{ result.answerlabel }}</ion-col> |
| 82 | + </ion-row> |
| 83 | + </ion-item> |
| 84 | + <ion-item text-wrap *ngFor="let option of result.options" class="addon-mod_h5pactivity-result-table-row"> |
| 85 | + <ion-row align-items-center> |
| 86 | + <ion-col text-center> |
| 87 | + <core-format-text [text]="option.description" [component]="component" [componentId]="h5pActivity.cmid" contextLevel="module" [contextInstanceId]="h5pActivity.cmid" [courseId]="courseId"></core-format-text> |
| 88 | + </ion-col> |
| 89 | + <ion-col text-center> |
| 90 | + <ng-container *ngIf="option.correctanswer"> |
| 91 | + <ng-container *ngTemplateOutlet="answerTemplate; context: {answer: option.correctanswer}"></ng-container> |
| 92 | + </ng-container> |
| 93 | + </ion-col> |
| 94 | + <ion-col text-center> |
| 95 | + <ng-container *ngIf="option.useranswer"> |
| 96 | + <ng-container *ngTemplateOutlet="answerTemplate; context: {answer: option.useranswer}"></ng-container> |
| 97 | + </ng-container> |
| 98 | + </ion-col> |
| 99 | + </ion-row> |
| 100 | + </ion-item> |
| 101 | + |
| 102 | + <!-- Result score. --> |
| 103 | + <ion-item *ngIf="result.maxscore" text-wrap text-end class="addon-mod_h5pactivity-result-score"> |
| 104 | + <p><strong>{{ 'addon.mod_h5pactivity.score' | translate }}: {{ 'addon.mod_h5pactivity.score_out_of' | translate:{$a: result} }}</strong></p> |
| 105 | + </ion-item> |
| 106 | + </ng-container> |
| 107 | + |
| 108 | + <!-- Result doesn't support tracking. --> |
| 109 | + <ion-item text-wrap class="core-warning-item" *ngIf="!result.track"> |
| 110 | + <ion-icon item-start name="warning" color="warning"></ion-icon> {{ 'addon.mod_h5pactivity.no_compatible_track' | translate:{$a: result.interactiontype} }} |
| 111 | + </ion-item> |
| 112 | + </ion-card> |
| 113 | + </ng-container> |
| 114 | + </ng-container> |
| 115 | + </core-loading> |
| 116 | +</ion-content> |
| 117 | + |
| 118 | +<!-- Template to render an answer. --> |
| 119 | +<ng-template #answerTemplate let-answer="answer"> |
| 120 | + <p *ngIf="answer.correct"> |
| 121 | + <core-icon name="fa-check" [label]="'addon.mod_h5pactivity.answer_correct' | translate" color="success"></core-icon> |
| 122 | + {{ answer.answer }} |
| 123 | + </p> |
| 124 | + <p *ngIf="answer.incorrect"> |
| 125 | + <core-icon name="fa-remove" [label]="'addon.mod_h5pactivity.answer_incorrect' | translate" color="danger"></core-icon> |
| 126 | + {{ answer.answer }} |
| 127 | + </p> |
| 128 | + <p *ngIf="answer.text"> |
| 129 | + {{ answer.answer }} |
| 130 | + </p> |
| 131 | + <p *ngIf="answer.checked"> |
| 132 | + <core-icon name="fa-check-circle" [label]="'addon.mod_h5pactivity.answer_checked' | translate"></core-icon> |
| 133 | + </p> |
| 134 | + <p *ngIf="answer.pass"> |
| 135 | + <core-icon name="fa-check" [label]="'addon.mod_h5pactivity.answer_pass' | translate" color="success"></core-icon> |
| 136 | + </p> |
| 137 | + <p *ngIf="answer.fail"> |
| 138 | + <core-icon name="fa-remove" [label]="'addon.mod_h5pactivity.answer_fail' | translate" color="danger"></core-icon> |
| 139 | + </p> |
| 140 | +</ng-template> |
0 commit comments