Skip to content

Commit 71a04e9

Browse files
hirokiterashimahirokiterashima
authored
Merge pull request #2894 from WISE-Community/issue-2893-upgrade-match-authoring-to-angular
Upgrade Match authoring to Angular component
2 parents 3a886f7 + f8e9233 commit 71a04e9

8 files changed

Lines changed: 829 additions & 733 deletions

File tree

‎src/main/webapp/site/src/app/teacher-hybrid-angular.module.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,7 @@ import { OutsideUrlAuthoring } from '../../../wise5/components/outsideURL/outsid
5050
import { MultipleChoiceAuthoring } from '../../../wise5/components/multipleChoice/multiple-choice-authoring/multiple-choice-authoring.component';
5151
import { ConceptMapAuthoring } from '../../../wise5/components/conceptMap/concept-map-authoring/concept-map-authoring.component';
5252
import { DrawAuthoring } from '../../../wise5/components/draw/draw-authoring/draw-authoring.component';
53+
import { MatchAuthoring } from '../../../wise5/components/match/match-authoring/match-authoring.component';
5354

5455
@NgModule({
5556
declarations: [
@@ -72,6 +73,7 @@ import { DrawAuthoring } from '../../../wise5/components/draw/draw-authoring/dra
7273
EditOutsideUrlAdvancedComponent,
7374
HtmlAuthoring,
7475
ManageStudentsComponent,
76+
MatchAuthoring,
7577
MilestonesComponent,
7678
MilestoneReportDataComponent,
7779
MultipleChoiceAuthoring,

‎src/main/webapp/site/src/messages.xlf‎

Lines changed: 217 additions & 7 deletions
Large diffs are not rendered by default.

‎src/main/webapp/wise5/components/match/authoring.html‎

Lines changed: 0 additions & 327 deletions
This file was deleted.

‎src/main/webapp/wise5/components/match/match-authoring/match-authoring.component.html‎

Lines changed: 221 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,221 @@
1+
<mat-form-field class="prompt">
2+
<mat-label i18n>Prompt</mat-label>
3+
<textarea matInput
4+
[ngModel]="authoringComponentContent.prompt"
5+
(ngModelChange)="promptChanged($event)"
6+
placeholder="Enter Prompt Here"
7+
i18n-placeholder
8+
cdkTextareaAutosize>
9+
</textarea>
10+
</mat-form-field>
11+
<div class="section">
12+
<span i18n>Choices</span>
13+
<button mat-raised-button
14+
color="primary"
15+
class="authoring-button add-button"
16+
(click)="addChoice()"
17+
matTooltip="Add Choice"
18+
matTooltipPosition="above"
19+
i18n-matTooltip
20+
aria-label="Add"
21+
i18n-aria-label>
22+
<mat-icon>add</mat-icon>
23+
</button>
24+
<div *ngIf="authoringComponentContent.choices.length === 0" i18n>
25+
There are no choices. Click the "Add Choice" button to add a choice.
26+
</div>
27+
<div *ngFor="let choice of authoringComponentContent.choices; index as choiceIndex; first as isFirst; last as isLast"
28+
fxLayout="row" fxLayoutAlign="start center">
29+
<mat-form-field class="name">
30+
<mat-label i18n>Choice Name</mat-label>
31+
<input matInput
32+
[(ngModel)]="choice.value"
33+
(ngModelChange)="inputChange.next($event)"
34+
placeholder="Type text or choose an image"
35+
i18n-placeholder/>
36+
</mat-form-field>
37+
<button mat-raised-button
38+
color="primary"
39+
class="authoring-button"
40+
(click)="chooseChoiceAsset(choice)"
41+
matTooltip="Choose an Image"
42+
matTooltipPosition="above"
43+
i18n-matTooltip
44+
aria-label="Choose an Image"
45+
i18n-aria-label>
46+
<mat-icon>insert_photo</mat-icon>
47+
</button>
48+
<button mat-raised-button
49+
color="primary"
50+
class="authoring-button"
51+
[disabled]="isFirst"
52+
(click)="moveChoiceUp(choiceIndex)"
53+
matTooltip="Move Up"
54+
matTooltipPosition="above"
55+
i18n-matTooltip
56+
aria-label="Up"
57+
i18n-aria-label>
58+
<mat-icon>arrow_upward</mat-icon>
59+
</button>
60+
<button mat-raised-button
61+
color="primary"
62+
class="authoring-button"
63+
[disabled]="isLast"
64+
(click)="moveChoiceDown(choiceIndex)"
65+
matTooltip="Move Down"
66+
matTooltipPosition="above"
67+
i18n-matTooltip
68+
aria-label="Down"
69+
i18n-aria-label>
70+
<mat-icon>arrow_downward</mat-icon>
71+
</button>
72+
<button mat-raised-button
73+
color="primary"
74+
class="authoring-button"
75+
(click)="deleteChoice(choiceIndex)"
76+
matTooltip="Delete Choice"
77+
matTooltipPosition="above"
78+
i18n-matTooltip
79+
aria-label="Delete"
80+
i18n-aria-label>
81+
<mat-icon>delete</mat-icon>
82+
</button>
83+
</div>
84+
</div>
85+
<div class="section">
86+
<mat-form-field class="name">
87+
<mat-label i18n>Source Bucket Name</mat-label>
88+
<input matInput
89+
[(ngModel)]="authoringComponentContent.choicesLabel"
90+
(ngModelChange)="inputChange.next($event)"/>
91+
</mat-form-field>
92+
<br/>
93+
<span i18n>Target Buckets</span>
94+
<button mat-raised-button
95+
color="primary"
96+
class="authoring-button add-button"
97+
(click)="addBucket()"
98+
matTooltip="Add Target Bucket"
99+
matTooltipPosition="above"
100+
i18n-matTooltip
101+
aria-label="Add"
102+
i18n-aria-label>
103+
<mat-icon>add</mat-icon>
104+
</button>
105+
<div *ngIf="authoringComponentContent.buckets.length === 0" i18n>
106+
There are no target buckets. Click the "Add Target Bucket" button to add a bucket.
107+
</div>
108+
<div *ngFor="let bucket of authoringComponentContent.buckets; index as bucketIndex; first as isFirst; last as isLast"
109+
fxLayout="row" fxLayoutAlign="start center">
110+
<mat-form-field class="name">
111+
<mat-label i18n>Target Bucket Name</mat-label>
112+
<input matInput
113+
[(ngModel)]="bucket.value"
114+
(ngModelChange)="inputChange.next($event)"
115+
placeholder="Type text or choose an image"
116+
i18n-placeholder/>
117+
</mat-form-field>
118+
<button mat-raised-button
119+
color="primary"
120+
class="authoring-button"
121+
(click)="chooseBucketAsset(bucket)"
122+
matTooltip="Choose an Image"
123+
matTooltipPosition="above"
124+
i18n-matTooltip
125+
aria-label="Choose an Image"
126+
i18n-aria-label>
127+
<mat-icon>insert_photo</mat-icon>
128+
</button>
129+
<button mat-raised-button
130+
color="primary"
131+
class="authoring-button"
132+
[disabled]="isFirst"
133+
(click)="moveBucketUp(bucketIndex)"
134+
matTooltip="Move Up"
135+
matTooltipPosition="above"
136+
i18n-matTooltip
137+
aria-label="Up"
138+
i18n-aria-label>
139+
<mat-icon>arrow_upward</mat-icon>
140+
</button>
141+
<button mat-raised-button
142+
color="primary"
143+
class="authoring-button"
144+
[disabled]="isLast"
145+
(click)="moveBucketDown(bucketIndex)"
146+
matTooltip="Move Down"
147+
matTooltipPosition="above"
148+
i18n-matTooltip
149+
aria-label="Down"
150+
i18n-aria-label>
151+
<mat-icon>arrow_downward</mat-icon>
152+
</button>
153+
<button mat-raised-button
154+
color="primary"
155+
class="authoring-button"
156+
(click)="deleteBucket(bucketIndex)"
157+
matTooltip="Delete Bucket"
158+
matTooltipPosition="above"
159+
i18n-matTooltip
160+
aria-label="Delete"
161+
i18n-aria-label>
162+
<mat-icon>delete</mat-icon>
163+
</button>
164+
</div>
165+
</div>
166+
<div class="section">
167+
<div class="choice-ordered-checkbox">
168+
<p i18n>Feedback</p>
169+
<mat-checkbox
170+
color="primary"
171+
[(ngModel)]="authoringComponentContent.ordered"
172+
(ngModelChange)="componentChanged()"
173+
i18n>
174+
Choices need to be ordered within buckets
175+
</mat-checkbox>
176+
</div>
177+
<div *ngFor="let bucketFeedback of authoringComponentContent.feedback"
178+
class="section">
179+
<p i18n>
180+
Bucket Name: {{getBucketNameById(bucketFeedback.bucketId)}}
181+
</p>
182+
<div *ngFor="let choiceFeedback of bucketFeedback.choices"
183+
class="choice-feedback-container">
184+
<span i18n>
185+
Choice: {{getChoiceTextById(choiceFeedback.choiceId)}}
186+
</span>
187+
<div layout="row">
188+
<mat-form-field class="feedback">
189+
<mat-label i18n>Feedback</mat-label>
190+
<input matInput
191+
color="primary"
192+
[(ngModel)]="choiceFeedback.feedback"
193+
(ngModelChange)="feedbackChange.next($event)"/>
194+
</mat-form-field>
195+
<mat-checkbox
196+
color="primary"
197+
[(ngModel)]="choiceFeedback.isCorrect"
198+
(ngModelChange)="isCorrectClicked(choiceFeedback)"
199+
layout="row"
200+
i18n>
201+
Is Correct
202+
</mat-checkbox>
203+
</div>
204+
<div *ngIf="authoringComponentContent.ordered && choiceFeedback.isCorrect" fxLayout="row">
205+
<mat-form-field class="position">
206+
<mat-label i18n>Position</mat-label>
207+
<input matInput
208+
type="number"
209+
[(ngModel)]="choiceFeedback.position"
210+
(ngModelChange)="feedbackChange.next($event)"/>
211+
</mat-form-field>
212+
<mat-form-field class="incorrect-position-feedback">
213+
<mat-label i18n>Incorrect Position Feedback</mat-label>
214+
<input matInput
215+
[(ngModel)]="choiceFeedback.incorrectPositionFeedback"
216+
(ngModelChange)="feedbackChange.next($event)"/>
217+
</mat-form-field>
218+
</div>
219+
</div>
220+
</div>
221+
</div>

‎src/main/webapp/wise5/components/match/match-authoring/match-authoring.component.scss‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
@import '~style/abstracts/variables', '~style/themes/default';
2+
3+
$notice-bg: map-get($default-colors, notice-bg);
4+
5+
.prompt {
6+
width: 100%;
7+
}
8+
9+
.section {
10+
border: 2px solid #dddddd;
11+
border-radius: 5px;
12+
margin-bottom: 10px;
13+
padding: 20px 20px 10px 20px;
14+
}
15+
16+
.authoring-button {
17+
margin-left: 10px;
18+
margin-right: 10px;
19+
}
20+
21+
.add-button {
22+
margin-bottom: 10px;
23+
}
24+
25+
.name {
26+
width: 60%;
27+
margin-right: 10px;
28+
}
29+
30+
.choice-ordered-checkbox {
31+
margin-bottom: 10px;
32+
}
33+
34+
.choice-feedback-container {
35+
background: $notice-bg;
36+
border: 1px solid #dddddd;
37+
border-radius: 5px;
38+
padding: 20px;
39+
margin: 10px;
40+
}
41+
42+
.feedback {
43+
width: 80%;
44+
margin-right: 20px;
45+
}
46+
47+
.position {
48+
width: 10%;
49+
margin-right: 20px;
50+
}
51+
52+
.incorrect-position-feedback {
53+
width: 80%;
54+
margin-right: 20px;
55+
}

0 commit comments

Comments
 (0)