diff --git a/src/assets/wise5/authoringTool/components/translatable-asset-chooser/translatable-asset-chooser.component.html b/src/assets/wise5/authoringTool/components/translatable-asset-chooser/translatable-asset-chooser.component.html index 4fd2401a8ac..c2f4225535e 100644 --- a/src/assets/wise5/authoringTool/components/translatable-asset-chooser/translatable-asset-chooser.component.html +++ b/src/assets/wise5/authoringTool/components/translatable-asset-chooser/translatable-asset-chooser.component.html @@ -1,6 +1,6 @@ + diff --git a/src/assets/wise5/components/multipleChoice/add-mc-choice/add-mc-choice.component.scss b/src/assets/wise5/components/multipleChoice/add-mc-choice/add-mc-choice.component.scss new file mode 100644 index 00000000000..acbff0be900 --- /dev/null +++ b/src/assets/wise5/components/multipleChoice/add-mc-choice/add-mc-choice.component.scss @@ -0,0 +1,26 @@ +.choice-divider { + width: 100%; + position: relative; + + &:after { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + border-bottom-style: solid; + content: ""; + border-bottom-width: var(--mdc-filled-text-field-focus-active-indicator-height); + border-bottom-color: var(--mdc-filled-text-field-focus-active-indicator-color); + transform: scaleX(0); + transform-origin: 100%; + transition: transform 360ms cubic-bezier(0.4, 0, 0.2, 1),opacity 360ms cubic-bezier(0.4, 0, 0.2, 1); + opacity: 0; + } + + &.active { + &:after { + transform: scaleX(1); + opacity: 1; + } + } +} \ No newline at end of file diff --git a/src/assets/wise5/components/multipleChoice/add-mc-choice/add-mc-choice.component.ts b/src/assets/wise5/components/multipleChoice/add-mc-choice/add-mc-choice.component.ts new file mode 100644 index 00000000000..ad438bfbd9e --- /dev/null +++ b/src/assets/wise5/components/multipleChoice/add-mc-choice/add-mc-choice.component.ts @@ -0,0 +1,17 @@ +import { CommonModule } from '@angular/common'; +import { Component, EventEmitter, Output } from '@angular/core'; +import { MatButtonModule } from '@angular/material/button'; +import { MatDividerModule } from '@angular/material/divider'; +import { MatIconModule } from '@angular/material/icon'; +import { MatTooltipModule } from '@angular/material/tooltip'; + +@Component({ + imports: [CommonModule, MatButtonModule, MatDividerModule, MatIconModule, MatTooltipModule], + selector: 'add-mc-choice', + styleUrl: 'add-mc-choice.component.scss', + templateUrl: 'add-mc-choice.component.html' +}) +export class AddMCChoiceComponent { + protected focus: boolean; + @Output() newChoiceEvent: EventEmitter = new EventEmitter(); +} diff --git a/src/assets/wise5/components/multipleChoice/multiple-choice-authoring/multiple-choice-authoring.component.html b/src/assets/wise5/components/multipleChoice/multiple-choice-authoring/multiple-choice-authoring.component.html index 7fbc93ae133..7744932be3e 100644 --- a/src/assets/wise5/components/multipleChoice/multiple-choice-authoring/multiple-choice-authoring.component.html +++ b/src/assets/wise5/components/multipleChoice/multiple-choice-authoring/multiple-choice-authoring.component.html @@ -13,101 +13,97 @@ Multiple Answer

-Choices - +

Choices

+ @if (componentContent.choices == null || componentContent.choices.length === 0) {
- There are no choices. Click the "Add Choice" button to add a choice. + There are no choices. Click the "Add choice" button to add a choice.
} -@for (choice of componentContent.choices; track choice.id; let last = $last; let first = $first) { -
-
- - -
- - Is Correct - +@for (choice of componentContent.choices; track choice.id; let last = $last; let i = $index) { +
+
+
+
+ + +
+
+ + Is Correct + + +
+
+
+
-
- - - - +
+ @if (i > 0) { + + } + @if (!last) { + + }
+ } diff --git a/src/assets/wise5/components/multipleChoice/multiple-choice-authoring/multiple-choice-authoring.component.scss b/src/assets/wise5/components/multipleChoice/multiple-choice-authoring/multiple-choice-authoring.component.scss index d2d12f4843f..e8fd848914e 100644 --- a/src/assets/wise5/components/multipleChoice/multiple-choice-authoring/multiple-choice-authoring.component.scss +++ b/src/assets/wise5/components/multipleChoice/multiple-choice-authoring/multiple-choice-authoring.component.scss @@ -1,56 +1,20 @@ @use 'style/abstracts/variables'; -/* TODO(mdc-migration): The following rule targets internal classes of radio that may no longer apply for the MDC version. */ -mat-radio-button { - margin-right: 24px; -} - -label.mat-radio-label { - display: inline-flex; -} - -.choices-label { - margin-right: 10px; -} - -.add-choice-button { - margin-top: 20px; - margin-bottom: 20px; -} - .choice-container { border: 2px solid #dddddd; border-radius: variables.$card-border-radius; - margin-bottom: 20px; - padding: 20px 20px 10px 20px; + padding: 16px 16px 0; } .info-block { - margin-bottom: 20px; text-align: center; font-weight: 500; } -.choice-authoring-button { - margin-left: 10px; - margin-right: 10px; -} - -.mat-mdc-checkbox { - margin-left: 5px; -} - -.choice-text-input-container, .choice-feedback-input-container { - width: 70%; +.choice-input-container { + flex: 1; + mat-form-field { width: 100%; } } - -.reload-preview-container { - margin-bottom: 10px; -} - -.mat-icon { - margin: 0px; -} diff --git a/src/assets/wise5/components/multipleChoice/multiple-choice-authoring/multiple-choice-authoring.component.ts b/src/assets/wise5/components/multipleChoice/multiple-choice-authoring/multiple-choice-authoring.component.ts index 6bc4e51546c..6147a085893 100644 --- a/src/assets/wise5/components/multipleChoice/multiple-choice-authoring/multiple-choice-authoring.component.ts +++ b/src/assets/wise5/components/multipleChoice/multiple-choice-authoring/multiple-choice-authoring.component.ts @@ -14,9 +14,11 @@ import { EditComponentPrompt } from '../../../../../app/authoring-tool/edit-comp import { TranslatableAssetChooserComponent } from '../../../authoringTool/components/translatable-asset-chooser/translatable-asset-chooser.component'; import { TranslatableInputComponent } from '../../../authoringTool/components/translatable-input/translatable-input.component'; import { Choice } from '../Choice'; +import { AddMCChoiceComponent } from '../add-mc-choice/add-mc-choice.component'; @Component({ imports: [ + AddMCChoiceComponent, FormsModule, MatButtonModule, MatCheckboxModule, @@ -67,8 +69,12 @@ export class MultipleChoiceAuthoring extends AbstractComponentAuthoring { return false; } - protected addChoice(): void { - this.componentContent.choices.push(new Choice(generateRandomKey(), '', false, '')); + protected addChoice(position: number): void { + this.componentContent.choices.splice( + position, + 0, + new Choice(generateRandomKey(), '', false, '') + ); this.componentChanged(); } diff --git a/src/assets/wise5/components/multipleChoice/multiple-choice-authoring/multiple-choice-authoring.harness.ts b/src/assets/wise5/components/multipleChoice/multiple-choice-authoring/multiple-choice-authoring.harness.ts index 79fc10dd469..41900bdab04 100644 --- a/src/assets/wise5/components/multipleChoice/multiple-choice-authoring/multiple-choice-authoring.harness.ts +++ b/src/assets/wise5/components/multipleChoice/multiple-choice-authoring/multiple-choice-authoring.harness.ts @@ -4,16 +4,18 @@ import { MatRadioButtonHarness } from '@angular/material/radio/testing'; export class MultipleChoiceAuthoringHarness extends ComponentHarness { static hostSelector = 'multiple-choice-authoring'; - getAddChoiceButton = this.locatorFor(MatButtonHarness.with({ selector: '.add-choice-button' })); + getAddChoiceButton = this.locatorFor( + MatButtonHarness.with({ selector: '[mattooltip="Add choice"]' }) + ); getChoices = this.locatorForAll('.choice-container'); getDeleteChoiceButtons = this.locatorForAll( - MatButtonHarness.with({ selector: '[mattooltip="Delete"]' }) + MatButtonHarness.with({ selector: '[mattooltip="Delete choice"]' }) ); getMoveDownButtons = this.locatorForAll( - MatButtonHarness.with({ selector: '[mattooltip="Move Down"]' }) + MatButtonHarness.with({ selector: '[mattooltip="Move down"]' }) ); getMoveUpButtons = this.locatorForAll( - MatButtonHarness.with({ selector: '[mattooltip="Move Up"]' }) + MatButtonHarness.with({ selector: '[mattooltip="Move up"]' }) ); getMultipleAnswerRadioChoice = this.locatorFor( MatRadioButtonHarness.with({ label: 'Multiple Answer' }) diff --git a/src/assets/wise5/components/multipleChoice/multiple-choice-authoring/multiple-choice-authoring.spec.ts b/src/assets/wise5/components/multipleChoice/multiple-choice-authoring/multiple-choice-authoring.spec.ts index 238542141dc..3bb049078ba 100644 --- a/src/assets/wise5/components/multipleChoice/multiple-choice-authoring/multiple-choice-authoring.spec.ts +++ b/src/assets/wise5/components/multipleChoice/multiple-choice-authoring/multiple-choice-authoring.spec.ts @@ -120,7 +120,7 @@ function moveChoice() { }); describe('move choice up is clicked on the second choice', () => { it('moves the choice up', async () => { - await (await multipleChoiceAuthoringHarness.getMoveChoiceUpButton(1)).click(); + await (await multipleChoiceAuthoringHarness.getMoveChoiceUpButton(0)).click(); expectChoiceOrder(['choice2', 'choice1']); }); }); diff --git a/src/messages.xlf b/src/messages.xlf index 48c96855a13..f357bcc72ba 100644 --- a/src/messages.xlf +++ b/src/messages.xlf @@ -647,10 +647,6 @@ src/assets/wise5/components/graph/graph-authoring/graph-authoring.component.html 561,563 - - src/assets/wise5/components/multipleChoice/multiple-choice-authoring/multiple-choice-authoring.component.html - 84,86 - src/assets/wise5/components/summary/summary-authoring/summary-authoring.component.html 169,171 @@ -698,10 +694,6 @@ src/assets/wise5/components/graph/graph-authoring/graph-authoring.component.html 574,577 - - src/assets/wise5/components/multipleChoice/multiple-choice-authoring/multiple-choice-authoring.component.html - 95,98 - src/assets/wise5/components/summary/summary-authoring/summary-authoring.component.html 182,185 @@ -801,10 +793,6 @@ src/assets/wise5/components/label/label-student/label-student.component.html 43,46 - - src/assets/wise5/components/multipleChoice/multiple-choice-authoring/multiple-choice-authoring.component.html - 107,109 - src/assets/wise5/components/summary/summary-authoring/summary-authoring.component.html 196,198 @@ -1306,6 +1294,10 @@ src/assets/wise5/components/match/match-authoring/match-authoring.component.html 170,173 + + src/assets/wise5/components/multipleChoice/multiple-choice-authoring/multiple-choice-authoring.component.html + 89,91 + Move down @@ -1337,6 +1329,10 @@ src/assets/wise5/components/match/match-authoring/match-authoring.component.html 181,185 + + src/assets/wise5/components/multipleChoice/multiple-choice-authoring/multiple-choice-authoring.component.html + 100,103 + Add a new rule at the end @@ -10607,7 +10603,7 @@ src/assets/wise5/components/multipleChoice/multiple-choice-authoring/multiple-choice-authoring.component.html - 69,72 + 72,75 src/assets/wise5/directives/componentAnnotations/component-annotations.component.ts @@ -11672,7 +11668,7 @@ Click "Cancel" to keep the invalid JSON open so you can fix it. src/assets/wise5/components/multipleChoice/multiple-choice-authoring/multiple-choice-authoring.component.html - 16,20 + 16,18 @@ -11683,7 +11679,7 @@ Click "Cancel" to keep the invalid JSON open so you can fix it. src/assets/wise5/components/multipleChoice/multiple-choice-authoring/multiple-choice-authoring.component.html - 58,63 + 51,55 @@ -21104,6 +21100,10 @@ Warning: This will delete all existing choices and buckets in this activity.src/assets/wise5/components/match/match-authoring/match-authoring.component.html 45,49 + + src/assets/wise5/components/multipleChoice/add-mc-choice/add-mc-choice.component.html + 12,16 + There are no choices. Click the "Add choice" button to add a choice. @@ -21131,7 +21131,7 @@ Warning: This will delete all existing choices and buckets in this activity. src/assets/wise5/components/multipleChoice/multiple-choice-authoring/multiple-choice-authoring.component.html - 41,43 + 33,35 @@ -21140,6 +21140,10 @@ Warning: This will delete all existing choices and buckets in this activity.src/assets/wise5/components/match/match-authoring/match-authoring.component.html 105,109 + + src/assets/wise5/components/multipleChoice/multiple-choice-authoring/multiple-choice-authoring.component.html + 61,64 + Source bucket name @@ -21233,7 +21237,7 @@ Warning: This will delete all existing choices and buckets in this activity. src/assets/wise5/components/multipleChoice/multiple-choice-authoring/multiple-choice-authoring.component.ts - 76 + 82 @@ -21414,32 +21418,32 @@ Warning: This will delete all existing choices in this activity. 36 - - There are no choices. Click the "Add Choice" button to add a choice. + + There are no choices. Click the "Add choice" button to add a choice. src/assets/wise5/components/multipleChoice/multiple-choice-authoring/multiple-choice-authoring.component.html - 30,33 + 20,23 Choice Text src/assets/wise5/components/multipleChoice/multiple-choice-authoring/multiple-choice-authoring.component.html - 39,42 + 31,33 Is Correct src/assets/wise5/components/multipleChoice/multiple-choice-authoring/multiple-choice-authoring.component.html - 61,65 + 54,57 Optional src/assets/wise5/components/multipleChoice/multiple-choice-authoring/multiple-choice-authoring.component.html - 71,73 + 74,76