Skip to content

Commit

Permalink
Merge pull request #124 from Clean-CaDET/development
Browse files Browse the repository at this point in the history 
Monitoring UX improvements
  • Loading branch information
@Luburic
Luburic authored Nov 7, 2024
2 parents efc4f80 + f252fd0 commit 61025d1
Show file tree
Hide file tree
Showing 6 changed files with 36 additions and 28 deletions.
8 changes: 4 additions & 4 deletions src/app/modules/learning/unit/unit-progress-rating/unit-progress-rating.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
<div class="label-group">
<small *ngFor="let label of options.learnerProgress" class="option-label">{{label}}</small>
</div>
<mat-slider [min]="1" [max]="5" [step]="1">
<mat-slider [min]="1" [max]="4" [step]="1">
<input formControlName="learnerProgress" matSliderThumb>
</mat-slider>
</section>
Expand All @@ -20,7 +20,7 @@
<div class="label-group">
<small *ngFor="let label of options.instructionClarity" class="option-label">{{label}}</small>
</div>
<mat-slider [min]="1" [max]="5" [step]="1">
<mat-slider [min]="1" [max]="4" [step]="1">
<input formControlName="instructionClarity" matSliderThumb>
</mat-slider>
<mat-label><b>
Expand All @@ -29,7 +29,7 @@
<div class="label-group">
<small *ngFor="let label of options.assessmentClarity" class="option-label">{{label}}</small>
</div>
<mat-slider [min]="1" [max]="5" [step]="1">
<mat-slider [min]="1" [max]="4" [step]="1">
<input formControlName="assessmentClarity" matSliderThumb>
</mat-slider>
</section>
Expand All @@ -40,7 +40,7 @@
<div class="label-group">
<small *ngFor="let label of options.taskChallenge" class="option-label">{{label}}</small>
</div>
<mat-slider [min]="-2" [max]="2" [step]="1">
<mat-slider [min]="-1" [max]="1" [step]="1">
<input formControlName="taskChallenge" matSliderThumb>
</mat-slider>
</section>
Expand Down
6 changes: 3 additions & 3 deletions src/app/modules/learning/unit/unit-progress-rating/unit-progress-rating.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,9 +50,9 @@ export class UnitProgressRatingComponent {

private createForm() {
this.options = {
learnerProgress: ['Slab', 'Umeren', 'Jak'],
instructionClarity: ['Nije', 'Ok', 'Veoma'],
assessmentClarity: ['Nisu', 'Ok', 'Veoma'],
learnerProgress: ['Nikakav', 'Slab', 'Korektan', 'Jak'],
instructionClarity: ['Nimalo', 'Slabo', 'Korektno', 'Veoma'],
assessmentClarity: ['Nimalo', 'Slabo', 'Korektno', 'Veoma'],
taskChallenge: ['Teški su', 'Taman', 'Laki su']
};
this.ratingForm = this.builder.group({
Expand Down
4 changes: 2 additions & 2 deletions src/app/modules/monitoring/course-monitoring/course-monitoring.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,12 +32,12 @@ <h3>{{g.name}}</h3>
</td>
<td>
<mat-icon *ngIf="f.averageSatisfaction" [matTooltip]="f.averageSatisfaction"
[color]="f.averageSatisfaction < 2.33 ? 'warn' : f.averageSatisfaction > 3.67 ? 'primary' : 'accent'">circle</mat-icon>
[color]="f.averageSatisfaction < 2 ? 'warn' : f.averageSatisfaction >= 2.6 ? 'primary' : 'accent'">circle</mat-icon>
<mat-icon *ngIf="!f.averageSatisfaction">radio_button_unchecked</mat-icon>
</td>
<td>
<mat-icon *ngIf="f.achievedPercentage != -1" [matTooltip]="f.achievedPercentage+'%'"
[color]="f.achievedPercentage < 33 ? 'warn' : f.achievedPercentage > 67 ? 'primary' : 'accent'">circle</mat-icon>
[color]="f.achievedPercentage < 34 ? 'warn' : f.achievedPercentage > 67 ? 'primary' : 'accent'">circle</mat-icon>
<mat-icon *ngIf="f.achievedPercentage == -1">radio_button_unchecked</mat-icon>
</td>
</tr>
Expand Down
4 changes: 3 additions & 1 deletion src/app/modules/monitoring/weekly-progress/model/weekly-summary.model.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ export interface WeeklyProgressStatistics {
learnerGradedTaskCount: number;
totalMaxPoints: number;
totalLearnerPoints: number;
percentPoints: number;
avgGroupPoints: number;

negativePatterns: {
Expand Down Expand Up @@ -67,6 +68,7 @@ export function calculateWeeklyProgressStatistics(units: UnitHeader[]): WeeklyPr
learnerGradedTaskCount,
totalMaxPoints,
totalLearnerPoints,
percentPoints: +(100 * totalLearnerPoints / totalMaxPoints).toFixed(0), // Course monitoring doubles this calculation and it should be centralized on the backend
avgGroupPoints,
negativePatterns
};
Expand Down Expand Up @@ -111,7 +113,7 @@ export function calculateWeeklySatisfactionStatistics(ratings: UnitProgressRatin
avgTotalSatisfaction: calculateAverage(totalSatisfactionGrades),
learnerSatisfactionCount: learnerSatisfactionGrades.length,
groupSatisfactionCount: groupSatisfactionGrades.length,
totalSatisfactionCount: groupSatisfactionGrades.length,
totalSatisfactionCount: totalSatisfactionGrades.length,
comments: comments
};
}
Expand Down
38 changes: 20 additions & 18 deletions src/app/modules/monitoring/weekly-progress/weekly-progress.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,25 +13,25 @@
Student nije imao nove lekcije u protekloj nedelji.
</div>
<div class="flex-col gap tutor-panel" *ngIf="units?.length">
<mat-card appearance="outlined">
<mat-card appearance="outlined" style="margin-bottom: 20px;">
<div class="theme-highlight-primary">
<h2 class="mat-h2 flex-row gap" style="margin: 0px; align-items: center; padding: 5px;">
<mat-icon>bar_chart</mat-icon>
Sumarni utisak za nedelju
</h2>
</div>
<div style="padding: 10px;">
<div style="padding: 10px;" class="flex-col gap">
<b><mat-icon>record_voice_over</mat-icon> Prosečno zadovoljstvo napretkom</b>
<ul *ngIf="weeklyRatings">
<li>
<span>
<b>Student: {{weeklyRatings.avgLearnerSatisfaction}} / 5 ({{weeklyRatings.learnerSatisfactionCount}} ocena)</b>;
<li *ngIf="weeklyRatings.learnerSatisfactionCount">
<span [ngClass]="{ 'theme-warn': weeklyRatings.avgLearnerSatisfaction < 2, 'theme-accent': weeklyRatings.avgLearnerSatisfaction >= 2 && weeklyRatings.avgLearnerSatisfaction < 2.6}">
<b>Student: {{weeklyRatings.avgLearnerSatisfaction}} / 4 ({{weeklyRatings.learnerSatisfactionCount}} ocena)</b>;
</span>
<span>
Grupa: {{weeklyRatings.avgGroupSatisfaction}} / 5 ({{weeklyRatings.groupSatisfactionCount}} ocena);
Grupa: {{weeklyRatings.avgGroupSatisfaction}} / 4 ({{weeklyRatings.groupSatisfactionCount}} ocena);
</span>
<span>
Sve grupe: {{weeklyRatings.avgTotalSatisfaction}} / 5 ({{weeklyRatings.totalSatisfactionCount}} ocena)
Svi: {{weeklyRatings.avgTotalSatisfaction}} / 4 ({{weeklyRatings.totalSatisfactionCount}} ocena)
</span>
</li>
<li *ngIf="weeklyRatings.comments?.length">
Expand All @@ -45,18 +45,20 @@ <h2 class="mat-h2 flex-row gap" style="margin: 0px; align-items: center; padding
</ul>
<b><mat-icon>checklist_rtl</mat-icon>Postignuti rezultati</b>
<ul *ngIf="weeklyResults">
<li>
<li *ngIf="weeklyResults.totalKcCount"
[ngClass]="{ 'theme-warn': weeklyResults.totalKcCount - weeklyResults.learnerSatisfiedKcCount > 0}">
{{weeklyResults.learnerSatisfiedKcCount}} / {{weeklyResults.totalKcCount}} savladanih komponenti znanja
</li>
<li>
<li *ngIf="weeklyResults.totalTaskCount">
{{weeklyResults.learnerGradedTaskCount}} / {{weeklyResults.totalTaskCount}} ocenjenih zadataka
</li>
<li>
<b>{{weeklyResults.totalLearnerPoints}} / {{weeklyResults.totalMaxPoints}} osvojenih poena (prosek grupe {{weeklyResults.avgGroupPoints}} / {{weeklyResults.totalMaxPoints}})</b>
<li *ngIf="weeklyResults.totalMaxPoints"
[ngClass]="{ 'theme-warn': weeklyResults.percentPoints < 34, 'theme-accent': weeklyResults.percentPoints >= 34 && weeklyResults.percentPoints < 67}">
<b>{{weeklyResults.percentPoints}}% osvojenih poena (prosek grupe {{(100*weeklyResults.avgGroupPoints / weeklyResults.totalMaxPoints).toFixed(0)}}%)</b>
</li>
</ul>
<div *ngIf="weeklyResults?.negativePatterns?.length">
<b><mat-icon color="warn">warning</mat-icon> Negativni šabloni interakcije</b>
<b><mat-icon color="warn">warning</mat-icon> Sumirani negativni šabloni interakcije</b>
<ul>
<li *ngFor="let p of weeklyResults.negativePatterns"><b>{{p.count}}x</b> {{p.name}}</li>
</ul>
Expand All @@ -77,7 +79,7 @@ <h2 class="mat-h2 flex-row gap" style="margin: 0px; align-items: center;">
<span>Najbolje do: {{unit.bestBefore | date:'dd.MM.yyyy.'}}</span>
</small>
</div>
<div class="flex-col" style="padding: 10px; gap: 10px">
<div class="flex-col gap" style="padding: 10px">
<div *ngFor="let i of unit.timelineItems">
<div *ngIf="i.type === 'kc'" class="flex-col gap">
<div class="flex-row">
Expand All @@ -88,7 +90,7 @@ <h3 class="mat-h3">
<small>Rešeno: {{i.time | date:'dd.MM. u HH:mm'}}</small>
</div>
<div *ngIf="i.item.statistics.negativePatterns?.length">
<b><mat-icon color="warn">warning</mat-icon> Negativni šabloni interakcije</b>
<b><mat-icon>warning</mat-icon> Negativni šabloni interakcije</b>
<ul>
<li *ngFor="let p of i.item.statistics.negativePatterns">{{p}}</li>
</ul>
Expand All @@ -106,7 +108,7 @@ <h3 class="mat-h3">
<mat-icon>checklist_rtl</mat-icon> Osvojeno {{i.item.statistics.wonPoints}} / {{i.item.maxPoints}} poena
</div>
<div *ngIf="i.item.statistics.negativePatterns?.length">
<b><mat-icon color="warn">warning</mat-icon> Negativni šabloni interakcije</b>
<b><mat-icon>warning</mat-icon> Negativni šabloni interakcije</b>
<ul>
<li *ngFor="let p of i.item.statistics.negativePatterns">{{p}}</li>
</ul>
Expand All @@ -121,14 +123,14 @@ <h3 class="mat-h3">
<small>Kreirano: {{i.time | date:'dd.MM. u HH:mm'}}</small>
</div>
<div *ngIf="i.item.feedback.learnerProgress">
Ističe {{i.item.feedback.learnerProgress}} / 5 zadovoljstvo svojim napretkom.
Ističe {{i.item.feedback.learnerProgress}} / 4 zadovoljstvo svojim napretkom.
</div>
<div *ngIf="i.item.completedKcNames?.length">
Za komponente znanja:
<ul>
<li *ngFor="let name of i.item.completedKcNames">{{name}}</li>
</ul>
Ističe {{i.item.feedback.instructionClarity}} / 5 jasnoću gradiva i {{i.item.feedback.assessmentClarity}} / 5 jasnoću pitanja.
Ističe {{i.item.feedback.instructionClarity}} / 4 jasnoću gradiva i {{i.item.feedback.assessmentClarity}} / 4 jasnoću pitanja.
</div>
<div *ngIf="i.item.completedTaskNames?.length">
Za zadatke:
Expand All @@ -144,7 +146,7 @@ <h3 class="mat-h3">
</ul></small>
</div>
</div>
<mat-divider></mat-divider>
<mat-divider style="border-width: 2px; margin: 0 -10px;"></mat-divider>
</div>
</div>
</mat-card>
Expand Down
4 changes: 4 additions & 0 deletions src/cc-primary-theme.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -100,6 +100,10 @@ $cc-theme: mat.m2-define-light-theme(
color: mat.m2-get-color-from-palette(map-get($color-config, 'warn'));
}

.theme-accent {
color: mat.m2-get-color-from-palette(map-get($color-config, 'accent'));
}

.mat-mdc-dialog-content {
color: if($is-dark, #fffd, #000b) !important;
}
Expand Down

0 comments on commit 61025d1

Please sign in to comment.