Skip to content

Commit 9ae436a

Browse files
Aaron-Detrebreity
Aaron-Detre
and
breity
authored
feat(Match): Summary display (#2164)
Co-authored-by: Jonathan Lim-Breitbart <[email protected]>
1 parent 6cd5408 commit 9ae436a

File tree

14 files changed

+629
-35
lines changed

14 files changed

+629
-35
lines changed

‎src/app/services/summaryService.spec.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -110,7 +110,7 @@ function isResponsesSummaryAvailableForComponentType() {
110110
it('should check if component types can be used with response summary', () => {
111111
expectFunctionCall(
112112
'isResponsesSummaryAvailableForComponentType',
113-
['MultipleChoice', 'Table', 'DialogGuidance', 'OpenResponse'],
113+
['MultipleChoice', 'Table', 'DialogGuidance', 'OpenResponse', 'Match'],
114114
true
115115
);
116116
expectFunctionCall(
@@ -125,7 +125,6 @@ function isResponsesSummaryAvailableForComponentType() {
125125
'Graph',
126126
'HTML',
127127
'Label',
128-
'Match',
129128
'OutsideURL',
130129
'Summary'
131130
],

‎src/assets/wise5/classroomMonitor/classroomMonitorComponents/shared/node-info/node-info.component.html‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,14 @@ <h3 class="accent-1 mat-subtitle-2 gray-lightest-bg component-header">
7171
[componentType]="component.type"
7272
/>
7373
}
74+
@if (component.type === 'Match') {
75+
<match-summary-display
76+
[nodeId]="nodeId"
77+
[componentId]="component.id"
78+
[periodId]="periodId"
79+
[doRender]="true"
80+
/>
81+
}
7482
</div>
7583
}
7684
</mat-card-content>

‎src/assets/wise5/classroomMonitor/classroomMonitorComponents/shared/node-info/node-info.component.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,11 @@ import { Component, Input } from '@angular/core';
44
import { ComponentFactory } from '../../../../common/ComponentFactory';
55
import { ComponentServiceLookupService } from '../../../../services/componentServiceLookupService';
66
import { ComponentTypeService } from '../../../../services/componentTypeService';
7-
import { IdeasSummaryComponent } from '../../../../directives/teacher-summary-display/ideas-summary.component';
7+
import { IdeasSummaryComponent } from '../../../../directives/teacher-summary-display/ideas-summary-display/ideas-summary.component';
88
import { FlexLayoutModule } from '@angular/flex-layout';
99
import { isMatchingPeriods } from '../../../../common/period/period';
1010
import { MatCardModule } from '@angular/material/card';
11+
import { MatchSummaryDisplayComponent } from '../../../../directives/teacher-summary-display/match-summary-display/match-summary-display.component';
1112
import { MatDividerModule } from '@angular/material/divider';
1213
import { MatIconModule } from '@angular/material/icon';
1314
import { Node } from '../../../../common/Node';
@@ -23,6 +24,7 @@ import { TeacherSummaryDisplayComponent } from '../../../../directives/teacher-s
2324
FlexLayoutModule,
2425
IdeasSummaryComponent,
2526
MatCardModule,
27+
MatchSummaryDisplayComponent,
2628
MatIconModule,
2729
MatDividerModule,
2830
PreviewComponentComponent,

‎src/assets/wise5/components/summary/summaryService.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ export class SummaryService extends ComponentService {
2828
];
2929
this.componentsWithResponsesSummary = [
3030
'DialogGuidance',
31+
'Match',
3132
'MultipleChoice',
3233
'OpenResponse',
3334
'Table'

‎src/assets/wise5/directives/teacher-summary-display/ideas-summary.component.html‎ renamed to ‎src/assets/wise5/directives/teacher-summary-display/ideas-summary-display/ideas-summary.component.html‎

File renamed without changes.

‎src/assets/wise5/directives/teacher-summary-display/ideas-summary.component.spec.ts‎ renamed to ‎src/assets/wise5/directives/teacher-summary-display/ideas-summary-display/ideas-summary.component.spec.ts‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
1-
import { AnnotationService } from '../../services/annotationService';
1+
import { AnnotationService } from '../../../services/annotationService';
22
import { ComponentFixture } from '@angular/core/testing';
3-
import { ComponentState } from '../../../../app/domain/componentState';
4-
import { ConfigService } from '../../services/configService';
5-
import { CRaterIdea } from '../../components/common/cRater/CRaterIdea';
6-
import { CRaterRubric } from '../../components/common/cRater/CRaterRubric';
7-
import { CRaterService } from '../../services/cRaterService';
3+
import { ComponentState } from '../../../../../app/domain/componentState';
4+
import { ConfigService } from '../../../services/configService';
5+
import { CRaterIdea } from '../../../components/common/cRater/CRaterIdea';
6+
import { CRaterRubric } from '../../../components/common/cRater/CRaterRubric';
7+
import { CRaterService } from '../../../services/cRaterService';
88
import { IdeasSummaryComponent } from './ideas-summary.component';
99
import { MockProviders } from 'ng-mocks';
1010
import { Observable, of } from 'rxjs';
11-
import { SummaryService } from '../../components/summary/summaryService';
12-
import { TeacherDataService } from '../../services/teacherDataService';
13-
import { TeacherProjectService } from '../../services/teacherProjectService';
11+
import { SummaryService } from '../../../components/summary/summaryService';
12+
import { TeacherDataService } from '../../../services/teacherDataService';
13+
import { TeacherProjectService } from '../../../services/teacherProjectService';
1414
import { TestBed } from '@angular/core/testing';
15-
import { Annotation } from '../../common/Annotation';
15+
import { Annotation } from '../../../common/Annotation';
1616

1717
let component: IdeasSummaryComponent;
1818
let fixture: ComponentFixture<IdeasSummaryComponent>;

‎src/assets/wise5/directives/teacher-summary-display/ideas-summary.component.ts‎ renamed to ‎src/assets/wise5/directives/teacher-summary-display/ideas-summary-display/ideas-summary.component.ts‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,21 @@
1-
import { AnnotationService } from '../../services/annotationService';
1+
import { AnnotationService } from '../../../services/annotationService';
22
import { CommonModule } from '@angular/common';
33
import { Component, Input } from '@angular/core';
4-
import { ConfigService } from '../../services/configService';
5-
import { CRaterIdea } from '../../components/common/cRater/CRaterIdea';
6-
import { CRaterRubric } from '../../components/common/cRater/CRaterRubric';
7-
import { CRaterService } from '../../services/cRaterService';
8-
import { DialogGuidanceSummaryData } from './summary-data/DialogGuidanceSummaryData';
9-
import { IdeaData } from '../../components/common/cRater/IdeaData';
10-
import { IdeasSortingService } from '../../services/ideasSortingService';
11-
import { IdeasSummaryData } from './summary-data/IdeasSummaryData';
4+
import { ConfigService } from '../../../services/configService';
5+
import { CRaterIdea } from '../../../components/common/cRater/CRaterIdea';
6+
import { CRaterRubric } from '../../../components/common/cRater/CRaterRubric';
7+
import { CRaterService } from '../../../services/cRaterService';
8+
import { DialogGuidanceSummaryData } from '../summary-data/DialogGuidanceSummaryData';
9+
import { IdeaData } from '../../../components/common/cRater/IdeaData';
10+
import { IdeasSortingService } from '../../../services/ideasSortingService';
11+
import { IdeasSummaryData } from '../summary-data/IdeasSummaryData';
1212
import { MatCardModule } from '@angular/material/card';
1313
import { MatIconModule } from '@angular/material/icon';
14-
import { OpenResponseSummaryData } from './summary-data/OpenResponseSummaryData';
15-
import { SummaryService } from '../../components/summary/summaryService';
16-
import { TeacherDataService } from '../../services/teacherDataService';
17-
import { TeacherProjectService } from '../../services/teacherProjectService';
18-
import { TeacherSummaryDisplayComponent } from './teacher-summary-display.component';
14+
import { OpenResponseSummaryData } from '../summary-data/OpenResponseSummaryData';
15+
import { SummaryService } from '../../../components/summary/summaryService';
16+
import { TeacherDataService } from '../../../services/teacherDataService';
17+
import { TeacherProjectService } from '../../../services/teacherProjectService';
18+
import { TeacherSummaryDisplayComponent } from '../teacher-summary-display.component';
1919

2020
@Component({
2121
imports: [CommonModule, MatCardModule, MatIconModule],

‎src/assets/wise5/directives/teacher-summary-display/match-summary-display/match-summary-display.component.html‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
<ng-template #bucketTemplate let-bucket="bucket" let-first="first">
2+
<div class="bucket">
3+
<h3>
4+
{{ bucket.value }}
5+
@if (first) {
6+
(<span i18n>Source Bucket</span>)
7+
}
8+
</h3>
9+
<ul>
10+
@for (choice of bucket.choices; track $index) {
11+
@if ($index < 3 || getBucketShowMore(bucket.value) || first) {
12+
<li>
13+
<div class="choice">
14+
<div [innerHTML]="choice.getId()"></div>
15+
@if (!isChoiceReuseMatch || !first) {
16+
<div class="shrink-0">
17+
(<mat-icon class="mat-18">person</mat-icon>{{ choice.getCount() }})
18+
</div>
19+
}
20+
</div>
21+
</li>
22+
}
23+
}
24+
@if (bucket.choices.length > 3 && !first) {
25+
<a href="#" class="text-sm px-1" (click)="toggleBucketShowMore(bucket.value, $event)">
26+
@if (getBucketShowMore(bucket.value)) {
27+
<span i18n>Show less</span>
28+
} @else {
29+
<span i18n>Show more</span>
30+
}
31+
</a>
32+
}
33+
</ul>
34+
</div>
35+
</ng-template>
36+
37+
<mat-card appearance="outlined">
38+
<mat-card-content>
39+
<h2 class="mat-subhead-1" i18n>Choice Frequency</h2>
40+
@if (bucketData.length > 0) {
41+
<p i18n>
42+
This summary shows how many students moved each choice item into the different buckets
43+
(categories).
44+
</p>
45+
<div class="flex flex-col sm:flex-row gap-4">
46+
<div class="sm:w-1/2 md:w-1/3 lg:w-1/4">
47+
<ng-container
48+
[ngTemplateOutlet]="bucketTemplate"
49+
[ngTemplateOutletContext]="{ bucket: bucketData[0], first: true }"
50+
/>
51+
</div>
52+
<div class="grid md:grid-cols-2 lg:grid-cols-3 sm:w-1/2 md:w-2/3 lg:w-3/4 gap-4">
53+
@for (bucket of bucketData; track $index) {
54+
@if ($index > 0) {
55+
<div class="w-full">
56+
<ng-container
57+
[ngTemplateOutlet]="bucketTemplate"
58+
[ngTemplateOutletContext]="{ bucket: bucket, first: false }"
59+
/>
60+
</div>
61+
}
62+
}
63+
</div>
64+
</div>
65+
} @else {
66+
<div class="notice" i18n>
67+
Your students' choices will show up here when they complete the activity.
68+
</div>
69+
}
70+
</mat-card-content>
71+
</mat-card>

‎src/assets/wise5/directives/teacher-summary-display/match-summary-display/match-summary-display.component.scss‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
mat-icon {
2+
padding-top: 4px;
3+
}
4+
5+
.bucket {
6+
border: solid black 6px;
7+
width: 35%;
8+
display: inline-block;
9+
padding: 20px;
10+
margin: 20px;
11+
}
12+
13+
.match-item {
14+
border: solid black 4px;
15+
padding: 10px;
16+
margin: 5px;
17+
}
18+
19+
.right-align {
20+
float: right;
21+
}

0 commit comments

Comments
 (0)