MOBILE-4550 quiz: Change how quiz result info is displayed
Dani Palou
parent
bc88cac82a
commit
ef6610e09a
|
|
@ -45,11 +45,64 @@
|
|||
</ion-card>
|
||||
|
||||
<!-- List of user attempts. -->
|
||||
<ion-card class="addon-mod_quiz-attempts-summary" *ngIf="quiz && attempts.length">
|
||||
@if (quiz && attempts.length) {
|
||||
<ion-card class="addon-mod_quiz-attempts-summary">
|
||||
<ion-card-header class="ion-text-wrap">
|
||||
<ion-card-title>{{ 'addon.mod_quiz.summaryofattempts' | translate }}</ion-card-title>
|
||||
</ion-card-header>
|
||||
|
||||
<!-- Quiz result info. -->
|
||||
@if (quiz && showResults && (gradeResult || gradeOverridden || gradebookFeedback || (quiz.showFeedback && overallFeedback))) {
|
||||
|
||||
@if (overallStats && gradeResult) {
|
||||
<ion-item class="ion-text-wrap addon-mod_quiz-grade-result">
|
||||
<ion-label>
|
||||
<div class="addon-mod_quiz-grade-result-grade">
|
||||
@if (moreAttempts) {
|
||||
<span>{{ gradeMethodReadable }}</span>
|
||||
<span>{{ gradeResult }}</span>
|
||||
} @else {
|
||||
<span>{{ 'addon.mod_quiz.yourfinalgradeis' | translate:{ $a: gradeResult } }}</span>
|
||||
}
|
||||
</div>
|
||||
|
||||
@if (gradeOverridden) {
|
||||
<p class="addon-mod_quiz-grade-overridden-notice">
|
||||
<ion-icon name="fas-circle-info" color="info" slot="start" aria-hidden="true" />
|
||||
{{ 'core.course.overriddennotice' | translate }}
|
||||
</p>
|
||||
}
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
}
|
||||
|
||||
@if (gradebookFeedback) {
|
||||
<ion-item class="ion-text-wrap addon-mod_quiz-gradebook-feedback">
|
||||
<ion-label>
|
||||
<p class="item-heading">{{ 'addon.mod_quiz.comment' | translate }}</p>
|
||||
<p>
|
||||
<core-format-text [component]="component" [componentId]="componentId" [text]="gradebookFeedback" contextLevel="module"
|
||||
[contextInstanceId]="module.id" [courseId]="courseId" />
|
||||
</p>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
}
|
||||
|
||||
@if (quiz.showFeedback && overallFeedback) {
|
||||
<hr>
|
||||
<ion-item class="ion-text-wrap addon-mod_quiz-overall-feedback">
|
||||
<ion-label>
|
||||
<p class="item-heading">{{ 'addon.mod_quiz.overallfeedback' | translate }}</p>
|
||||
<p>
|
||||
<core-format-text [component]="component" [componentId]="componentId" [text]="overallFeedback" contextLevel="module"
|
||||
[contextInstanceId]="module.id" [courseId]="courseId" />
|
||||
</p>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
<ion-accordion-group>
|
||||
@for (attempt of attempts; track attempt.id) {
|
||||
<ion-accordion [value]="attempt.id" toggleIconSlot="start">
|
||||
|
|
@ -108,37 +161,7 @@
|
|||
}
|
||||
</ion-accordion-group>
|
||||
</ion-card>
|
||||
|
||||
<!-- Result info. -->
|
||||
<ion-card *ngIf="quiz && showResults &&
|
||||
(gradeResult || gradeOverridden || gradebookFeedback || (quiz.showFeedback && overallFeedback))">
|
||||
<ion-list>
|
||||
<ion-item class="ion-text-wrap" *ngIf="gradeResult">
|
||||
<ion-label>{{ gradeResult }}</ion-label>
|
||||
</ion-item>
|
||||
<ion-item class="ion-text-wrap" *ngIf="gradeOverridden">
|
||||
<ion-label>{{ 'core.course.overriddennotice' | translate }}</ion-label>
|
||||
</ion-item>
|
||||
<ion-item class="ion-text-wrap" *ngIf="gradebookFeedback">
|
||||
<ion-label>
|
||||
<p class="item-heading">{{ 'addon.mod_quiz.comment' | translate }}</p>
|
||||
<p>
|
||||
<core-format-text [component]="component" [componentId]="componentId" [text]="gradebookFeedback"
|
||||
contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId" />
|
||||
</p>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
<ion-item class="ion-text-wrap" *ngIf="quiz.showFeedback && overallFeedback">
|
||||
<ion-label>
|
||||
<p class="item-heading">{{ 'addon.mod_quiz.overallfeedback' | translate }}</p>
|
||||
<p>
|
||||
<core-format-text [component]="component" [componentId]="componentId" [text]="overallFeedback" contextLevel="module"
|
||||
[contextInstanceId]="module.id" [courseId]="courseId" />
|
||||
</p>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
</ion-card>
|
||||
}
|
||||
|
||||
<!-- More data. -->
|
||||
<ng-container *ngIf="quiz">
|
||||
|
|
|
|||
|
|
@ -2,41 +2,73 @@
|
|||
|
||||
:host {
|
||||
|
||||
.addon-mod_quiz-attempt-title-info {
|
||||
text-align: end;
|
||||
padding-top: 8px;
|
||||
padding-bottom: 8px;
|
||||
|
||||
p {
|
||||
margin: 0px;
|
||||
margin-top: 4px;
|
||||
.addon-mod_quiz-attempts-summary {
|
||||
ion-card-header {
|
||||
border-bottom: 1px solid var(--stroke);
|
||||
}
|
||||
}
|
||||
|
||||
.accordion-expanded .addon-mod_quiz-attempt-title-info,
|
||||
.accordion-expanding .addon-mod_quiz-attempt-title-info {
|
||||
visibility: hidden;
|
||||
}
|
||||
.addon-mod_quiz-grade-result {
|
||||
margin-top: var(--mdl-spacing-2);
|
||||
|
||||
hr {
|
||||
background-color: var(--stroke);
|
||||
height: 1px;
|
||||
margin: 0px 16px;
|
||||
}
|
||||
|
||||
ion-accordion:nth-child(odd) {
|
||||
background-color: var(--core-table-odd-cell-background);
|
||||
.addon-mod_quiz-grade-overridden-notice {
|
||||
margin-top: var(--mdl-spacing-2);
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
::ng-deep ion-item {
|
||||
--background: var(--core-table-odd-cell-background);
|
||||
.addon-mod_quiz-grade-result-grade {
|
||||
display: flex;
|
||||
|
||||
span:first-child {
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ion-accordion:nth-child(even) {
|
||||
background-color: var(--core-table-even-cell-background);
|
||||
.addon-mod_quiz-attempt-title-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: end;
|
||||
justify-content: center;
|
||||
min-height: 60px;
|
||||
padding-top: var(--mdl-spacing-2);
|
||||
padding-bottom: var(--mdl-spacing-2);
|
||||
|
||||
::ng-deep ion-item {
|
||||
--background: var(--core-table-even-cell-background);
|
||||
p {
|
||||
margin: 0px;
|
||||
margin-top: var(--mdl-spacing-2);
|
||||
}
|
||||
}
|
||||
|
||||
ion-accordion-group {
|
||||
border-top: 1px solid var(--stroke);
|
||||
|
||||
.accordion-expanded .addon-mod_quiz-attempt-title-info,
|
||||
.accordion-expanding .addon-mod_quiz-attempt-title-info {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
hr {
|
||||
background-color: var(--stroke);
|
||||
height: 1px;
|
||||
margin: 0px var(-mdl-spacing-4);
|
||||
}
|
||||
|
||||
ion-accordion:nth-child(odd) {
|
||||
background-color: var(--core-table-odd-cell-background);
|
||||
|
||||
::ng-deep ion-item {
|
||||
--background: var(--core-table-odd-cell-background);
|
||||
}
|
||||
}
|
||||
|
||||
ion-accordion:nth-child(even) {
|
||||
background-color: var(--core-table-even-cell-background);
|
||||
|
||||
::ng-deep ion-item {
|
||||
--background: var(--core-table-even-cell-background);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -348,23 +348,10 @@ export class AddonModQuizIndexComponent extends CoreCourseModuleMainActivityComp
|
|||
gradeToShow = formattedBestGrade;
|
||||
}
|
||||
|
||||
if (this.overallStats) {
|
||||
// Show the quiz grade. The message shown is different if the quiz is finished.
|
||||
if (this.moreAttempts) {
|
||||
this.gradeResult = Translate.instant('addon.mod_quiz.gradesofar', { $a: {
|
||||
method: this.gradeMethodReadable,
|
||||
mygrade: gradeToShow,
|
||||
quizgrade: quiz.gradeFormatted,
|
||||
} });
|
||||
} else {
|
||||
const outOfShort = Translate.instant('addon.mod_quiz.outofshort', { $a: {
|
||||
grade: gradeToShow,
|
||||
maxgrade: quiz.gradeFormatted,
|
||||
} });
|
||||
|
||||
this.gradeResult = Translate.instant('addon.mod_quiz.yourfinalgradeis', { $a: outOfShort });
|
||||
}
|
||||
}
|
||||
this.gradeResult = Translate.instant('core.grades.gradelong', { $a: {
|
||||
grade: gradeToShow,
|
||||
max: quiz.gradeFormatted,
|
||||
} });
|
||||
|
||||
if (quiz.showFeedback) {
|
||||
// Get the quiz overall feedback.
|
||||
|
|
|
|||
Loading…
Reference in New Issue