+
-
+
diff --git a/src/assets/wise5/authoringTool/addNode/add-your-own-node/add-your-own-node.component.scss b/src/assets/wise5/authoringTool/addNode/add-your-own-node/add-your-own-node.component.scss
index fdddbcb451d..059c606309b 100644
--- a/src/assets/wise5/authoringTool/addNode/add-your-own-node/add-your-own-node.component.scss
+++ b/src/assets/wise5/authoringTool/addNode/add-your-own-node/add-your-own-node.component.scss
@@ -29,6 +29,7 @@ $transform: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}
.component-type {
+ width: 30%;
padding: 4px;
button {
@@ -54,3 +55,8 @@ $transform: transform 250ms cubic-bezier(0, 0, 0.2, 1);
.component-list.cdk-drop-list-dragging .component-list-item:not(.cdk-drag-placeholder) {
transition: $transform;
}
+
+.component-types {
+ overflow-y: scroll;
+ max-height: 50vh;
+}
\ No newline at end of file
diff --git a/src/assets/wise5/authoringTool/components/component-info-dialog/component-info-dialog.component.html b/src/assets/wise5/authoringTool/components/component-info-dialog/component-info-dialog.component.html
new file mode 100644
index 00000000000..1feb51a410d
--- /dev/null
+++ b/src/assets/wise5/authoringTool/components/component-info-dialog/component-info-dialog.component.html
@@ -0,0 +1,10 @@
+
{{ label }}
+
+ {{ description }}
+
+ Example
+
+
+
+
+
diff --git a/src/assets/wise5/authoringTool/components/component-info-dialog/component-info-dialog.component.scss b/src/assets/wise5/authoringTool/components/component-info-dialog/component-info-dialog.component.scss
new file mode 100644
index 00000000000..aff5b20d2ce
--- /dev/null
+++ b/src/assets/wise5/authoringTool/components/component-info-dialog/component-info-dialog.component.scss
@@ -0,0 +1,3 @@
+.example-label {
+ padding: 0 24px;
+}
\ No newline at end of file
diff --git a/src/assets/wise5/authoringTool/components/component-info-dialog/component-info-dialog.component.spec.ts b/src/assets/wise5/authoringTool/components/component-info-dialog/component-info-dialog.component.spec.ts
new file mode 100644
index 00000000000..f86f9e20d1b
--- /dev/null
+++ b/src/assets/wise5/authoringTool/components/component-info-dialog/component-info-dialog.component.spec.ts
@@ -0,0 +1,31 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentInfoDialogComponent } from './component-info-dialog.component';
+import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
+import { MatDividerModule } from '@angular/material/divider';
+import { PreviewComponentModule } from '../preview-component/preview-component.module';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { PreviewComponentComponent } from '../preview-component/preview-component.component';
+import { ProjectService } from '../../../services/projectService';
+import { ComponentInfoService } from '../../../services/componentInfoService';
+
+describe('ComponentInfoDialogComponent', () => {
+ let component: ComponentInfoDialogComponent;
+ let fixture: ComponentFixture
;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ declarations: [ComponentInfoDialogComponent, PreviewComponentComponent],
+ imports: [HttpClientTestingModule, MatDialogModule, MatDividerModule, PreviewComponentModule],
+ providers: [ComponentInfoService, { provide: MAT_DIALOG_DATA, useValue: 'OpenResponse' }]
+ }).compileComponents();
+ fixture = TestBed.createComponent(ComponentInfoDialogComponent);
+ const projectService = TestBed.inject(ProjectService);
+ projectService.project = {};
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/assets/wise5/authoringTool/components/component-info-dialog/component-info-dialog.component.ts b/src/assets/wise5/authoringTool/components/component-info-dialog/component-info-dialog.component.ts
new file mode 100644
index 00000000000..6a0e6d246c7
--- /dev/null
+++ b/src/assets/wise5/authoringTool/components/component-info-dialog/component-info-dialog.component.ts
@@ -0,0 +1,32 @@
+import { Component, Inject } from '@angular/core';
+import { MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { ComponentInfoService } from '../../../services/componentInfoService';
+import { ComponentInfo } from '../../../components/ComponentInfo';
+import { ComponentFactory } from '../../../common/ComponentFactory';
+
+@Component({
+ selector: 'component-info-dialog',
+ templateUrl: './component-info-dialog.component.html',
+ styleUrls: ['./component-info-dialog.component.scss']
+})
+export class ComponentInfoDialogComponent {
+ protected component: any;
+ private componentInfo: ComponentInfo;
+ protected description: string;
+ protected label: string;
+
+ constructor(
+ private componentInfoService: ComponentInfoService,
+ @Inject(MAT_DIALOG_DATA) private componentType: string
+ ) {}
+
+ ngOnInit(): void {
+ this.componentInfo = this.componentInfoService.getInfo(this.componentType);
+ this.label = this.componentInfo.getLabel();
+ this.description = this.componentInfo.getDescription();
+ this.component = new ComponentFactory().getComponent(
+ this.componentInfo.getPreviewContent(),
+ 'node1'
+ );
+ }
+}
diff --git a/src/assets/wise5/authoringTool/components/component-selector/component-selector.component.html b/src/assets/wise5/authoringTool/components/component-selector/component-selector.component.html
new file mode 100644
index 00000000000..f3e572b656f
--- /dev/null
+++ b/src/assets/wise5/authoringTool/components/component-selector/component-selector.component.html
@@ -0,0 +1,8 @@
+
+
+
+
+
+
diff --git a/src/assets/wise5/authoringTool/components/component-selector/component-selector.component.scss b/src/assets/wise5/authoringTool/components/component-selector/component-selector.component.scss
new file mode 100644
index 00000000000..74fdfff6a32
--- /dev/null
+++ b/src/assets/wise5/authoringTool/components/component-selector/component-selector.component.scss
@@ -0,0 +1,3 @@
+mat-card {
+ padding: 0 8px;
+}
diff --git a/src/assets/wise5/authoringTool/components/component-selector/component-selector.component.spec.ts b/src/assets/wise5/authoringTool/components/component-selector/component-selector.component.spec.ts
new file mode 100644
index 00000000000..9053a51cf7e
--- /dev/null
+++ b/src/assets/wise5/authoringTool/components/component-selector/component-selector.component.spec.ts
@@ -0,0 +1,36 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentSelectorComponent } from './component-selector.component';
+import { ComponentInfoService } from '../../../services/componentInfoService';
+import { ComponentServiceLookupService } from '../../../services/componentServiceLookupService';
+import { StudentTeacherCommonServicesModule } from '../../../../../app/student-teacher-common-services.module';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatIconModule } from '@angular/material/icon';
+import { MatCardModule } from '@angular/material/card';
+
+describe('ComponentSelectorComponent', () => {
+ let component: ComponentSelectorComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ declarations: [ComponentSelectorComponent],
+ imports: [
+ HttpClientTestingModule,
+ MatCardModule,
+ MatDialogModule,
+ MatIconModule,
+ StudentTeacherCommonServicesModule
+ ],
+ providers: [ComponentInfoService, ComponentServiceLookupService]
+ }).compileComponents();
+ fixture = TestBed.createComponent(ComponentSelectorComponent);
+ component = fixture.componentInstance;
+ component.componentType = 'OpenResponse';
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/assets/wise5/authoringTool/components/component-selector/component-selector.component.ts b/src/assets/wise5/authoringTool/components/component-selector/component-selector.component.ts
new file mode 100644
index 00000000000..259c79a17bc
--- /dev/null
+++ b/src/assets/wise5/authoringTool/components/component-selector/component-selector.component.ts
@@ -0,0 +1,34 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
+import { ComponentInfoService } from '../../../services/componentInfoService';
+import { ComponentInfoDialogComponent } from '../component-info-dialog/component-info-dialog.component';
+
+@Component({
+ selector: 'component-selector',
+ templateUrl: './component-selector.component.html',
+ styleUrls: ['./component-selector.component.scss']
+})
+export class ComponentSelectorComponent {
+ private componentInfo: any;
+ @Output() componentSelectedEvent: EventEmitter = new EventEmitter();
+ @Input() componentType: string;
+ protected label: string;
+
+ constructor(private componentInfoService: ComponentInfoService, private dialog: MatDialog) {}
+
+ ngOnInit(): void {
+ this.componentInfo = this.componentInfoService.getInfo(this.componentType);
+ this.label = this.componentInfo.getLabel();
+ }
+
+ protected preview(): void {
+ this.dialog.open(ComponentInfoDialogComponent, {
+ data: this.componentType,
+ panelClass: 'dialog-lg'
+ });
+ }
+
+ protected select(): void {
+ this.componentSelectedEvent.emit();
+ }
+}
diff --git a/src/assets/wise5/components/ComponentInfo.ts b/src/assets/wise5/components/ComponentInfo.ts
new file mode 100644
index 00000000000..62199ed3d48
--- /dev/null
+++ b/src/assets/wise5/components/ComponentInfo.ts
@@ -0,0 +1,17 @@
+export abstract class ComponentInfo {
+ protected abstract description: string;
+ protected abstract label: string;
+ protected abstract previewContent: any;
+
+ getDescription(): string {
+ return this.description;
+ }
+
+ getLabel(): string {
+ return this.label;
+ }
+
+ getPreviewContent(): any {
+ return this.previewContent;
+ }
+}
diff --git a/src/assets/wise5/components/animation/AnimationInfo.ts b/src/assets/wise5/components/animation/AnimationInfo.ts
new file mode 100644
index 00000000000..1a9bd925ac6
--- /dev/null
+++ b/src/assets/wise5/components/animation/AnimationInfo.ts
@@ -0,0 +1,96 @@
+import { ComponentInfo } from '../ComponentInfo';
+
+export class AnimationInfo extends ComponentInfo {
+ protected description: string = $localize`Students watch an animation.`;
+ protected label: string = $localize`Animation`;
+ protected previewContent: any = {
+ id: 'abcde12345',
+ type: 'Animation',
+ showSaveButton: false,
+ showSubmitButton: false,
+ widthInPixels: 740,
+ heightInPixels: 200,
+ widthInUnits: 53,
+ heightInUnits: 20,
+ dataXOriginInPixels: 0,
+ dataYOriginInPixels: 90,
+ coordinateSystem: 'screen',
+ objects: [
+ {
+ id: 'qnn0c2xgck',
+ type: 'image',
+ image: '/assets/img/component-preview/pool-background.png',
+ pixelX: 0,
+ pixelY: 90
+ },
+ {
+ id: '8p02z89200',
+ type: 'image',
+ image: '/assets/img/component-preview/Diving-board.png',
+ pixelX: 0,
+ pixelY: 25
+ },
+ {
+ id: 'y2yv5w078a',
+ type: 'text',
+ text: 'Diving board',
+ pixelX: 0,
+ pixelY: 0
+ },
+ {
+ id: 'kjlw72m46a',
+ type: 'text',
+ text: '0',
+ pixelX: 0,
+ pixelY: 60
+ },
+ {
+ id: '3med1wqhac',
+ type: 'text',
+ text: '25',
+ pixelX: 360,
+ pixelY: 60
+ },
+ {
+ id: 'k8hs2qlcxh',
+ type: 'text',
+ text: '50',
+ pixelX: 720,
+ pixelY: 60
+ },
+ {
+ id: 'g1m6j9iyur',
+ type: 'image',
+ image: '/assets/img/component-preview/Swimmer-correct.png',
+ dataX: 0,
+ dataY: 0,
+ data: [
+ {
+ t: 0,
+ x: 0
+ },
+ {
+ t: 20,
+ x: 50
+ },
+ {
+ t: 60,
+ x: 0
+ }
+ ],
+ imageMovingRight: '/assets/img/component-preview/Swimmer-correct.png',
+ imageMovingLeft: '/assets/img/component-preview/Swimmer-correct-reverse.png'
+ },
+ {
+ id: 'og4rulilwn',
+ type: 'image',
+ image: '/assets/img/component-preview/Swimmer.png',
+ dataX: 0,
+ dataY: 0,
+ imageMovingRight: '/assets/img/component-preview/Swimmer.png',
+ imageMovingLeft: '/assets/img/component-preview/Swimmer-reverse.png'
+ }
+ ],
+ constraints: []
+ };
+}
diff --git a/src/assets/wise5/components/audioOscillator/AudioOscillatorInfo.ts b/src/assets/wise5/components/audioOscillator/AudioOscillatorInfo.ts
new file mode 100644
index 00000000000..fc440bee4f7
--- /dev/null
+++ b/src/assets/wise5/components/audioOscillator/AudioOscillatorInfo.ts
@@ -0,0 +1,26 @@
+import { ComponentInfo } from '../ComponentInfo';
+
+export class AudioOscillatorInfo extends ComponentInfo {
+ protected description: string = $localize`Students change the frequency and amplitude of a sound wave. They listen to the resulting sounds and view graphs of the waves.`;
+ protected label: string = $localize`Audio Oscillator`;
+ protected previewContent: any = {
+ id: 'abcde12345',
+ type: 'AudioOscillator',
+ prompt:
+ 'Press play to listen to the sound wave and change the frequency to hear the difference.',
+ showSaveButton: false,
+ showSubmitButton: false,
+ oscillatorTypes: ['sine'],
+ startingAmplitude: 44,
+ startingFrequency: 440,
+ oscilloscopeWidth: 800,
+ oscilloscopeHeight: 400,
+ gridCellSize: 50,
+ stopAfterGoodDraw: true,
+ canStudentEditAmplitude: true,
+ canStudentEditFrequency: true,
+ canStudentViewAmplitudeInput: true,
+ canStudentViewFrequencyInput: true,
+ constraints: []
+ };
+}
diff --git a/src/assets/wise5/components/conceptMap/ConceptMapInfo.ts b/src/assets/wise5/components/conceptMap/ConceptMapInfo.ts
new file mode 100644
index 00000000000..f1f11b83a52
--- /dev/null
+++ b/src/assets/wise5/components/conceptMap/ConceptMapInfo.ts
@@ -0,0 +1,74 @@
+import { ComponentInfo } from '../ComponentInfo';
+
+export class ConceptMapInfo extends ComponentInfo {
+ protected description: string = $localize`Students add items to a canvas and connect the items with links.`;
+ protected label: string = $localize`Concept Map`;
+ protected previewContent: any = {
+ id: 'abcde12345',
+ type: 'ConceptMap',
+ prompt:
+ "How is the Earth warmed by energy from the Sun? It's your turn to show how energy moves between the Sun, the Earth, and Space. Drag the pictures to the canvas and add links between them make your diagram.",
+ showSaveButton: false,
+ showSubmitButton: false,
+ showAddToNotebookButton: false,
+ width: 800,
+ height: 600,
+ background: null,
+ stretchBackground: null,
+ nodes: [
+ {
+ fileName: '/assets/img/component-preview/sun2.png',
+ width: 100,
+ id: 'node1',
+ label: 'Sun',
+ height: 100
+ },
+ {
+ fileName: '/assets/img/component-preview/Space.png',
+ width: 100,
+ id: 'node2',
+ label: 'Space',
+ height: 100
+ },
+ {
+ fileName: '/assets/img/component-preview/Earth_surface.png',
+ width: 100,
+ id: 'node3',
+ label: "Earth's Surface",
+ height: 100
+ },
+ {
+ fileName: '/assets/img/component-preview/Earth_beneath.png',
+ width: 100,
+ id: 'node4',
+ label: 'Beneath Surface',
+ height: 100
+ }
+ ],
+ linksTitle: '',
+ links: [
+ {
+ color: '#DDD266',
+ id: 'link1',
+ label: 'Solar Radiation'
+ },
+ {
+ color: '#B62467',
+ id: 'link2',
+ label: 'Infrared Radiation'
+ },
+ {
+ color: '#DE2D26',
+ id: 'link3',
+ label: 'Heat'
+ }
+ ],
+ rules: [],
+ starterConceptMap: null,
+ customRuleEvaluator: '',
+ showAutoScore: false,
+ showAutoFeedback: false,
+ showNodeLabels: true,
+ constraints: []
+ };
+}
diff --git a/src/assets/wise5/components/dialogGuidance/DialogGuidanceInfo.ts b/src/assets/wise5/components/dialogGuidance/DialogGuidanceInfo.ts
new file mode 100644
index 00000000000..da7db0efd71
--- /dev/null
+++ b/src/assets/wise5/components/dialogGuidance/DialogGuidanceInfo.ts
@@ -0,0 +1,321 @@
+import { ComponentInfo } from '../ComponentInfo';
+
+export class DialogGuidanceInfo extends ComponentInfo {
+ protected description: string = $localize`Students chat with a computer avatar about a specific topic.`;
+ protected label: string = $localize`Dialog Guidance`;
+ protected previewContent: any = {
+ id: 'abcde12345',
+ type: 'DialogGuidance',
+ itemId: 'PhotoEnergyStory_score-ki_idea-ki_nonscore',
+ version: 2,
+ feedbackRules: [
+ {
+ id: '6encpml66s',
+ expression: 'isFinalSubmit',
+ feedback: [
+ 'Thanks for chatting with me! Now revise your response based on the ideas you shared in the chat.'
+ ]
+ },
+ {
+ id: 'ixvd0iaxh7',
+ expression: 'isSubmitNumber(2) && 13a',
+ feedback: [
+ 'I agree that animals get energy from sleeping and eating. Where does the energy in their food come from?'
+ ]
+ },
+ {
+ id: 'dculqoydzc',
+ expression: '13a',
+ feedback: [
+ 'I agree that animals need sleep! What other types of energy can animals get from the sun?'
+ ]
+ },
+ {
+ id: 'lm0odmyxre',
+ expression: 'isSubmitNumber(2) && 4a',
+ feedback: ['How do plants get energy from the sun, differently than animals?']
+ },
+ {
+ id: '1urvciu5sy',
+ expression: '4a',
+ feedback: [
+ 'Interesting Idea! Where does the energy originally come from? How is the energy transformed in the process?'
+ ]
+ },
+ {
+ id: 'jv23u1nmxj',
+ expression: 'isSubmitNumber(2) && 4b',
+ feedback: [
+ 'You are thinking like a scientist! Where does the energy come from? What type of energy is released in this process?'
+ ]
+ },
+ {
+ id: 'irhj6xhvft',
+ expression: '4b',
+ feedback: [
+ 'Interesting Idea! What is the glucose made from? What happened to the molecules? '
+ ]
+ },
+ {
+ id: 'uubc2szgcm',
+ expression: 'isSubmitNumber(2) && 6b',
+ feedback: [
+ 'Interesting idea. When the animal eats plants, how is the energy transferred from plants to animals?'
+ ]
+ },
+ {
+ id: '617hd0zsmt',
+ expression: '6b',
+ feedback: [
+ 'Nice thinking! Where does the plant-stored glucose go? What happened to the part of glucose that hasn’t been used for plant growth?'
+ ]
+ },
+ {
+ id: '6n643zmexn',
+ expression: 'isSubmitNumber(2) && 6c',
+ feedback: [
+ 'Interesting idea. How is the energy transformed from the plants to animals in this process?'
+ ]
+ },
+ {
+ id: 'gxoeeryzyw',
+ expression: '6c',
+ feedback: ['Nice thinking! What type of energy is released during cellular respiration?']
+ },
+ {
+ id: 'rjvjxzn8fi',
+ expression: 'isSubmitNumber(2) && 11a',
+ feedback: [
+ 'The sun helps animals in lots of ways! How do you think the sun helps animals get energy from food?'
+ ]
+ },
+ {
+ id: 'kl5zguma0m',
+ expression: '11a',
+ feedback: [
+ 'I agree that animals can directly use the sun’s energy. What are other sources of energy that animals can get from their food?'
+ ]
+ },
+ {
+ id: 'sf8ttj8pzf',
+ expression: 'isSubmitNumber(2) && 11b',
+ feedback: [
+ 'I agree that too much sun can be harmful. Imagine what would happen to plants if there were no sunlight. How do you think the sun helps animals get energy from food?'
+ ]
+ },
+ {
+ id: 'g056fzgmij',
+ expression: '11b',
+ feedback: [
+ 'Hmm, too much sun can be harmful. What other impacts does the sun’s energy have on animals?'
+ ]
+ },
+ {
+ id: 't1mhcn37qi',
+ expression: 'isSubmitNumber(2) && 9a',
+ feedback: [
+ 'I enjoy hearing your thoughts. Where does the energy in the plant come from and how does it get used by the animal?'
+ ]
+ },
+ {
+ id: 'm1hofcqj7a',
+ expression: '9a',
+ feedback: [
+ 'Nice thinking! How is the energy from the sun transformed so the animal can use it?'
+ ]
+ },
+ {
+ id: 'yfm6esxnde',
+ expression: 'isSubmitNumber(2) && 12b',
+ feedback: [
+ 'Interesting idea. When the animal eats plants, how does the animal get the energy it needs from the plant it ate - what is the process?'
+ ]
+ },
+ {
+ id: 'pwmhvfbdo5',
+ expression: '12b',
+ feedback: [
+ 'Nice thinking! Can you tell me more about the process that transfers energy from the plant to the animal?'
+ ]
+ },
+ {
+ id: 'xx1w3rs1cb',
+ expression: 'isSubmitNumber(2) && 6a',
+ feedback: [
+ 'Interesting idea. When the animal eats plants, what happens to the stored glucose?'
+ ]
+ },
+ {
+ id: '46duvz3re6',
+ expression: '6a',
+ feedback: ['Nice thinking! What is the stored glucose used for?']
+ },
+ {
+ id: 'cfp2kn3fxy',
+ expression: 'isSubmitNumber(2) && 3a',
+ feedback: [
+ 'I like hearing your thoughts. What do you think the plant does with the usable energy?'
+ ]
+ },
+ {
+ id: 'w43b2yu1p5',
+ expression: '3a',
+ feedback: [
+ 'Nice thinking about how plants convert light energy to usable energy. How does this energy go from the plant to the animal?'
+ ]
+ },
+ {
+ id: 'vcqortmk5q',
+ expression: 'isSubmitNumber(2) && 3b',
+ feedback: [
+ 'Interesting idea about photosynthesis! How does the energy from plants get to an animal?'
+ ]
+ },
+ {
+ id: '26uhwx54e2',
+ expression: '3b',
+ feedback: [
+ 'Nice thinking about photosynthesis. How are the products of photosynthesis useful for animals?'
+ ]
+ },
+ {
+ id: 'od5s1no0b4',
+ expression: 'isSubmitNumber(2) && 2',
+ feedback: [
+ 'I like hearing your thoughts. How do you think animals make use of the glucose or oxygen produced by plants during photosynthesis?'
+ ]
+ },
+ {
+ id: '62scpp3ndm',
+ expression: '2',
+ feedback: [
+ 'Interesting idea about the products of photosynthesis. How are the products useful for animals?'
+ ]
+ },
+ {
+ id: 'ac4nazjj8l',
+ expression: 'isSubmitNumber(2) && 1',
+ feedback: [
+ 'I like hearing your thoughts. How does photosynthesis help the animal get energy?'
+ ]
+ },
+ {
+ id: 'wi5dtcmlgu',
+ expression: '1',
+ feedback: [
+ 'Nice thinking. You mentioned the inputs of photosynthesis. Can you tell me more about what happens during photosynthesis?'
+ ]
+ },
+ {
+ id: 'sffk18map8',
+ expression: 'isSubmitNumber(2) && 4c',
+ feedback: [
+ 'I like your idea about energy conservation. Do you think energy is transformed into different types in the food chain? If so, how?'
+ ]
+ },
+ {
+ id: '581eophtvi',
+ expression: '4c',
+ feedback: [
+ 'I agree about energy conservation! How does energy get transferred in this process?'
+ ]
+ },
+ {
+ id: '8qo8p60wtg',
+ expression: 'isSubmitNumber(2) && 4d',
+ feedback: ['If energy starts with the sun, how does it move through the food chain? ']
+ },
+ {
+ id: 'wylrvpkf22',
+ expression: '4d',
+ feedback: [
+ 'Hmmm, I wonder how the energy decreases down the food chain. Tell me more about how energy moves through the food chain.'
+ ]
+ },
+ {
+ id: '2uqgi6lp0l',
+ expression: 'isSubmitNumber(2) && 9',
+ feedback: [
+ 'What happens when animals get the glucose from plants? How does the animal use the energy from glucose?'
+ ]
+ },
+ {
+ id: '6rvyqj6rnt',
+ expression: '9',
+ feedback: [
+ 'How does the animal get and use the glucose? What changes does the animal make to the glucose?'
+ ]
+ },
+ {
+ id: 'ffdkkanuae',
+ expression: 'isSubmitNumber(2) && 11',
+ feedback: ['How does energy from the sun get to animals to help them survive?']
+ },
+ {
+ id: 'ow60yaplo2',
+ expression: '11',
+ feedback: [
+ 'I see, you are saying that animals need the sun to survive. Can you give me an example of how the sun helps animals?'
+ ]
+ },
+ {
+ id: '2mupe6xoyy',
+ expression: 'isSubmitNumber(2) && 3',
+ feedback: [
+ 'What else do plants need to grow other than the sun? What happens inside plants for the sun to help them grow??'
+ ]
+ },
+ {
+ id: 'zbus61wnqy',
+ expression: '3',
+ feedback: ['Can you tell me more about how the Sun helps plants survive?']
+ },
+ {
+ id: 'uc4d6jj3zi',
+ expression: 'isSubmitNumber(2) && 12',
+ feedback: [
+ 'I enjoy hearing your thoughts. Can you tell me more about how the energy from the sun is transferred from plants to animals?'
+ ]
+ },
+ {
+ id: 'fm7wctlxpr',
+ expression: '12',
+ feedback: ['Interesting idea! What type of energy do animals get from plants?']
+ },
+ {
+ id: 'dzm7j60m0t',
+ expression: 'isDefault',
+ feedback: [
+ 'Can you tell me more about this idea or another one in your explanation? I am still learning about student ideas to become a better thought partner.',
+ 'How does the energy transfer from the sun to the plants and then to the animals?'
+ ]
+ }
+ ],
+ maxSubmitCount: 3,
+ showSubmitButton: false,
+ showSaveButton: false,
+ prompt: '',
+ computerAvatarSettings: {
+ ids: [
+ 'person1',
+ 'person2',
+ 'person3',
+ 'person4',
+ 'person5',
+ 'person6',
+ 'person7',
+ 'person8',
+ 'robot1',
+ 'robot2'
+ ],
+ label: 'Thought Buddy',
+ prompt:
+ 'Discuss with a thought buddy.
Your buddy will ask you to explain your thinking and compare your response to responses from other students around the country.
Then your buddy will ask you some questions.',
+ initialResponse:
+ 'Hi Preview User!
How do you think animals get and use energy from the sun to survive?',
+ useGlobalComputerAvatar: false
+ },
+ isComputerAvatarEnabled: true,
+ constraints: []
+ };
+}
diff --git a/src/assets/wise5/components/discussion/DiscussionInfo.ts b/src/assets/wise5/components/discussion/DiscussionInfo.ts
new file mode 100644
index 00000000000..0bc86a7793e
--- /dev/null
+++ b/src/assets/wise5/components/discussion/DiscussionInfo.ts
@@ -0,0 +1,17 @@
+import { ComponentInfo } from '../ComponentInfo';
+
+export class DiscussionInfo extends ComponentInfo {
+ protected description: string = $localize`Students post messages for the whole class to see and can reply to other students' posts.`;
+ protected label: string = $localize`Discussion`;
+ protected previewContent: any = {
+ id: 'abcde12345',
+ type: 'Discussion',
+ prompt:
+ 'Based on your findings, how does the color of the sand affect the population of fish? Post your ideas to share with the class.',
+ showSaveButton: false,
+ showSubmitButton: false,
+ isStudentAttachmentEnabled: true,
+ gateClassmateResponses: true,
+ constraints: []
+ };
+}
diff --git a/src/assets/wise5/components/draw/DrawInfo.ts b/src/assets/wise5/components/draw/DrawInfo.ts
new file mode 100644
index 00000000000..029727c3399
--- /dev/null
+++ b/src/assets/wise5/components/draw/DrawInfo.ts
@@ -0,0 +1,40 @@
+import { ComponentInfo } from '../ComponentInfo';
+
+export class DrawInfo extends ComponentInfo {
+ protected description: string = $localize`Students draw on a canvas using a variety of tools.`;
+ protected label: string = $localize`Draw`;
+ protected previewContent: any = {
+ id: 'abcde12345',
+ type: 'Draw',
+ prompt: `Draw the path of electrons in a METAL molecular structure. Make sure you distinguish this sketch from your sketch of the plastic and tire rubber in the previous activities.
+ - Use the STAMP tool to place 2 valence electrons on the metal structure.
- Use the stamp tool to shade the part of the atomic structure where each electron spends its time.
`,
+ showSaveButton: false,
+ showSubmitButton: false,
+ showAddToNotebookButton: false,
+ background: '/assets/img/component-preview/metal_draw.jpg',
+ stamps: {
+ Stamps: [
+ '/assets/img/component-preview/electron.png',
+ '/assets/img/component-preview/highlight.png'
+ ]
+ },
+ tools: {
+ select: true,
+ line: true,
+ shape: true,
+ freeHand: true,
+ text: true,
+ stamp: true,
+ strokeColor: true,
+ fillColor: true,
+ clone: true,
+ strokeWidth: true,
+ sendBack: true,
+ sendForward: true,
+ undo: true,
+ redo: true,
+ delete: true
+ },
+ constraints: []
+ };
+}
diff --git a/src/assets/wise5/components/embedded/EmbeddedInfo.ts b/src/assets/wise5/components/embedded/EmbeddedInfo.ts
new file mode 100644
index 00000000000..c99b8fe3553
--- /dev/null
+++ b/src/assets/wise5/components/embedded/EmbeddedInfo.ts
@@ -0,0 +1,18 @@
+import { ComponentInfo } from '../ComponentInfo';
+
+export class EmbeddedInfo extends ComponentInfo {
+ protected description: string = $localize`Students interact with a custom applicatio, such as a model or simulation.`;
+ protected label: string = $localize`Embedded (Custom)`;
+ protected previewContent: any = {
+ id: 'abcde12345',
+ type: 'Embedded',
+ prompt: 'Click the differnt boundary types to view them in action.',
+ showSaveButton: false,
+ showSubmitButton: false,
+ showAddToNotebookButton: false,
+ url:
+ 'https://wise.berkeley.edu/curriculum/shared/plate-tectonics-convection-explorer/v1/index.html?maxWidth=900',
+ height: 600,
+ constraints: []
+ };
+}
diff --git a/src/assets/wise5/components/graph/GraphInfo.ts b/src/assets/wise5/components/graph/GraphInfo.ts
new file mode 100644
index 00000000000..c4433cefdf5
--- /dev/null
+++ b/src/assets/wise5/components/graph/GraphInfo.ts
@@ -0,0 +1,71 @@
+import { ComponentInfo } from '../ComponentInfo';
+
+export class GraphInfo extends ComponentInfo {
+ protected description: string = $localize`Students view graph data or add points to a graph.`;
+ protected label: string = $localize`Graph`;
+ protected previewContent: any = {
+ id: 'abcde12345',
+ type: 'Graph',
+ prompt:
+ 'Draw a line that shows the position graph of a person that starts at position 0 meters and then takes 50 seconds to walk 50 meters and then comes back to their start position while moving at a constant speed.',
+ showSaveButton: false,
+ showSubmitButton: false,
+ showAddToNotebookButton: false,
+ title: '',
+ width: 800,
+ height: 500,
+ enableTrials: false,
+ canCreateNewTrials: false,
+ canDeleteTrials: false,
+ hideAllTrialsOnNewTrial: false,
+ canStudentHideSeriesOnLegendClick: false,
+ roundValuesTo: 'integer',
+ graphType: 'line',
+ xAxis: {
+ title: {
+ text: 'Time (seconds)',
+ useHTML: true
+ },
+ min: 0,
+ max: 100,
+ units: 's',
+ locked: true,
+ type: 'limits',
+ allowDecimals: false
+ },
+ yAxis: {
+ title: {
+ text: 'Position (meters)',
+ useHTML: true,
+ style: {
+ color: ''
+ }
+ },
+ labels: {
+ style: {
+ color: ''
+ }
+ },
+ min: 0,
+ max: 100,
+ units: 'm',
+ locked: true,
+ allowDecimals: false,
+ opposite: false
+ },
+ series: [
+ {
+ name: 'Prediction',
+ data: [],
+ color: 'blue',
+ dashStyle: 'Solid',
+ marker: {
+ symbol: 'circle'
+ },
+ canEdit: true,
+ type: 'line'
+ }
+ ],
+ constraints: []
+ };
+}
diff --git a/src/assets/wise5/components/html/HtmlInfo.ts b/src/assets/wise5/components/html/HtmlInfo.ts
new file mode 100644
index 00000000000..86658a4b9dd
--- /dev/null
+++ b/src/assets/wise5/components/html/HtmlInfo.ts
@@ -0,0 +1,23 @@
+import { ComponentInfo } from '../ComponentInfo';
+
+export class HtmlInfo extends ComponentInfo {
+ protected description: string = $localize`Students view rich text (HTML) content.`;
+ protected label: string = $localize`Rich Text (HTML)`;
+ protected previewContent: any = {
+ id: 'abcde12345',
+ type: 'HTML',
+ prompt: '',
+ showSaveButton: false,
+ showSubmitButton: false,
+ html: `How does the Sun warm the Earth?
+ 
+ You probably know that the Sun keeps us warm on Earth. But do you know how the Sun does that?
+ In this lesson, you'll explore the following questions:
+
+ - How does the Sun's energy travel to the Earth?
+ - What happens to the Sun's energy when it reaches the Earth?
+ - How does the Sun's energy warm the Earth?
+
`,
+ constraints: []
+ };
+}
diff --git a/src/assets/wise5/components/label/LabelInfo.ts b/src/assets/wise5/components/label/LabelInfo.ts
new file mode 100644
index 00000000000..022aed4f004
--- /dev/null
+++ b/src/assets/wise5/components/label/LabelInfo.ts
@@ -0,0 +1,75 @@
+import { ComponentInfo } from '../ComponentInfo';
+
+export class LabelInfo extends ComponentInfo {
+ protected description: string = $localize`Students add labels to a canvas.`;
+ protected label: string = $localize`Label`;
+ protected previewContent: any = {
+ id: 'abcde12345',
+ type: 'Label',
+ prompt: 'Label the layers of the Earth by moving the labels to the correct location.',
+ showSaveButton: false,
+ showSubmitButton: false,
+ showAddToNotebookButton: false,
+ backgroundImage: '/assets/img/component-preview/earth-layers.jpg',
+ canCreateLabels: true,
+ canEditLabels: true,
+ canDeleteLabels: true,
+ enableCircles: true,
+ width: 800,
+ height: 600,
+ pointSize: 5,
+ fontSize: 20,
+ labelWidth: 20,
+ labels: [
+ {
+ pointX: 453,
+ pointY: 50,
+ textX: 648,
+ textY: 50,
+ text: 'Crust',
+ color: 'black',
+ canEdit: false,
+ canDelete: false,
+ timestamp: 1697647088109,
+ isStarterLabel: true
+ },
+ {
+ pointX: 449,
+ pointY: 155,
+ textX: 644,
+ textY: 156,
+ text: 'Mantle',
+ color: 'black',
+ canEdit: false,
+ canDelete: false,
+ timestamp: 1697647088112,
+ isStarterLabel: true
+ },
+ {
+ pointX: 445,
+ pointY: 250,
+ textX: 646,
+ textY: 249,
+ text: 'Outer Core',
+ color: 'black',
+ canEdit: false,
+ canDelete: false,
+ timestamp: 1697647088114,
+ isStarterLabel: true
+ },
+ {
+ pointX: 443,
+ pointY: 344,
+ textX: 639,
+ textY: 344,
+ text: 'Inner Core',
+ color: 'black',
+ canEdit: false,
+ canDelete: false,
+ timestamp: 1697647088117,
+ isStarterLabel: true
+ }
+ ],
+ constraints: []
+ };
+}
diff --git a/src/assets/wise5/components/match/MatchInfo.ts b/src/assets/wise5/components/match/MatchInfo.ts
new file mode 100644
index 00000000000..6d9875c868a
--- /dev/null
+++ b/src/assets/wise5/components/match/MatchInfo.ts
@@ -0,0 +1,249 @@
+import { ComponentInfo } from '../ComponentInfo';
+
+export class MatchInfo extends ComponentInfo {
+ protected description: string = $localize`Students sort items into different buckets.`;
+ protected label: string = $localize`Match`;
+ protected previewContent: any = {
+ id: 'abcde12345',
+ type: 'Match',
+ prompt:
+ 'Sort the different environmental pressures that organisms can face into biotic and abiotic pressures.',
+ showSaveButton: false,
+ showSubmitButton: true,
+ choices: [
+ {
+ id: 'evhs07qtqu',
+ type: 'choice',
+ value: 'Predators'
+ },
+ {
+ id: 'sa5w70scaw',
+ type: 'choice',
+ value: 'Dangerous viruses'
+ },
+ {
+ id: 'ofm2mo5mgy',
+ type: 'choice',
+ value: 'High temperatures'
+ },
+ {
+ id: '3unza7haw1',
+ type: 'choice',
+ value: 'Lack of water'
+ },
+ {
+ id: '21noaztqyb',
+ type: 'choice',
+ value: 'Siblings competing for territory'
+ },
+ {
+ id: 'i5n25oq6qy',
+ type: 'choice',
+ value: 'Air pollution'
+ },
+ {
+ id: '6vbjwoo64q',
+ type: 'choice',
+ value: 'Not enough food (prey)'
+ },
+ {
+ id: 'b8lhey6tgp',
+ type: 'choice',
+ value: 'Strong sun light'
+ },
+ {
+ id: 'ocm53nhs1f',
+ type: 'choice',
+ value: 'Parasites'
+ },
+ {
+ id: 'rzas42rtvc',
+ type: 'choice',
+ value: 'Sand storms'
+ }
+ ],
+ choiceReuseEnabled: false,
+ buckets: [
+ {
+ id: 'k7zphrnrym',
+ type: 'bucket',
+ value: 'Biotic pressures'
+ },
+ {
+ id: 't7ij83fu78',
+ type: 'bucket',
+ value: 'Abiotic pressures'
+ }
+ ],
+ choicesLabel: 'Environmental pressures',
+ feedback: [
+ {
+ bucketId: '0',
+ choices: [
+ {
+ choiceId: 'evhs07qtqu',
+ feedback: '',
+ isCorrect: false
+ },
+ {
+ choiceId: 'sa5w70scaw',
+ feedback: '',
+ isCorrect: false
+ },
+ {
+ choiceId: 'ofm2mo5mgy',
+ feedback: '',
+ isCorrect: false
+ },
+ {
+ choiceId: '3unza7haw1',
+ feedback: '',
+ isCorrect: false
+ },
+ {
+ choiceId: '21noaztqyb',
+ feedback: '',
+ isCorrect: false
+ },
+ {
+ choiceId: 'i5n25oq6qy',
+ feedback: '',
+ isCorrect: false
+ },
+ {
+ choiceId: '6vbjwoo64q',
+ feedback: '',
+ isCorrect: false
+ },
+ {
+ choiceId: 'b8lhey6tgp',
+ feedback: '',
+ isCorrect: false
+ },
+ {
+ choiceId: 'ocm53nhs1f',
+ feedback: '',
+ isCorrect: false
+ },
+ {
+ choiceId: 'rzas42rtvc',
+ feedback: '',
+ isCorrect: false
+ }
+ ]
+ },
+ {
+ bucketId: 'k7zphrnrym',
+ choices: [
+ {
+ choiceId: 'evhs07qtqu',
+ feedback: '',
+ isCorrect: true
+ },
+ {
+ choiceId: 'sa5w70scaw',
+ feedback: '',
+ isCorrect: true
+ },
+ {
+ choiceId: 'ofm2mo5mgy',
+ feedback: '',
+ isCorrect: false
+ },
+ {
+ choiceId: '3unza7haw1',
+ feedback: '',
+ isCorrect: false
+ },
+ {
+ choiceId: '21noaztqyb',
+ feedback: '',
+ isCorrect: true
+ },
+ {
+ choiceId: 'i5n25oq6qy',
+ feedback: '',
+ isCorrect: false
+ },
+ {
+ choiceId: '6vbjwoo64q',
+ feedback: '',
+ isCorrect: true
+ },
+ {
+ choiceId: 'b8lhey6tgp',
+ feedback: '',
+ isCorrect: false
+ },
+ {
+ choiceId: 'ocm53nhs1f',
+ feedback: '',
+ isCorrect: true
+ },
+ {
+ choiceId: 'rzas42rtvc',
+ feedback: '',
+ isCorrect: false
+ }
+ ]
+ },
+ {
+ bucketId: 't7ij83fu78',
+ choices: [
+ {
+ choiceId: 'evhs07qtqu',
+ feedback: '',
+ isCorrect: false
+ },
+ {
+ choiceId: 'sa5w70scaw',
+ feedback: '',
+ isCorrect: false
+ },
+ {
+ choiceId: 'ofm2mo5mgy',
+ feedback: '',
+ isCorrect: true
+ },
+ {
+ choiceId: '3unza7haw1',
+ feedback: '',
+ isCorrect: true
+ },
+ {
+ choiceId: '21noaztqyb',
+ feedback: '',
+ isCorrect: false
+ },
+ {
+ choiceId: 'i5n25oq6qy',
+ feedback: '',
+ isCorrect: true
+ },
+ {
+ choiceId: '6vbjwoo64q',
+ feedback: 'Think - what do animals usually eat?',
+ isCorrect: false
+ },
+ {
+ choiceId: 'b8lhey6tgp',
+ feedback: '',
+ isCorrect: true
+ },
+ {
+ choiceId: 'ocm53nhs1f',
+ feedback: '',
+ isCorrect: false
+ },
+ {
+ choiceId: 'rzas42rtvc',
+ feedback: '',
+ isCorrect: true
+ }
+ ]
+ }
+ ],
+ ordered: false,
+ constraints: []
+ };
+}
diff --git a/src/assets/wise5/components/multipleChoice/MultipleChoiceInfo.ts b/src/assets/wise5/components/multipleChoice/MultipleChoiceInfo.ts
new file mode 100644
index 00000000000..c367a49cef8
--- /dev/null
+++ b/src/assets/wise5/components/multipleChoice/MultipleChoiceInfo.ts
@@ -0,0 +1,33 @@
+import { ComponentInfo } from '../ComponentInfo';
+
+export class MultipleChoiceInfo extends ComponentInfo {
+ protected description: string = $localize`Students select one or more choices.`;
+ protected label: string = $localize`Multiple Choice`;
+ protected previewContent: any = {
+ id: 'abcde12345',
+ type: 'MultipleChoice',
+ prompt: 'When touching a hot METAL bowl and a hot WOODEN bowl that have the same temperature:',
+ showSaveButton: false,
+ showSubmitButton: true,
+ choiceType: 'radio',
+ choices: [
+ {
+ feedback: '',
+ id: '1jmi01ht6t',
+ text: 'The metal bowl will feel hotter.'
+ },
+ {
+ feedback: '',
+ id: '46r96bhek5',
+ text: 'The wooden bowl will feel hotter.'
+ },
+ {
+ feedback: '',
+ id: 'xuikkjc99u',
+ text: 'The bowls will feel the same.'
+ }
+ ],
+ showFeedback: true,
+ constraints: []
+ };
+}
diff --git a/src/assets/wise5/components/openResponse/OpenResponseInfo.ts b/src/assets/wise5/components/openResponse/OpenResponseInfo.ts
new file mode 100644
index 00000000000..0979cc62be9
--- /dev/null
+++ b/src/assets/wise5/components/openResponse/OpenResponseInfo.ts
@@ -0,0 +1,17 @@
+import { ComponentInfo } from '../ComponentInfo';
+
+export class OpenResponseInfo extends ComponentInfo {
+ protected description: string = $localize`Students type a response to a question or prompt.`;
+ protected label: string = $localize`Open Response`;
+ protected previewContent: any = {
+ id: 'abcde12345',
+ type: 'OpenResponse',
+ prompt: 'In your own words, explain what an insulator does and what a conductor does.',
+ showSaveButton: false,
+ showSubmitButton: true,
+ showAddToNotebookButton: false,
+ starterSentence: null,
+ isStudentAttachmentEnabled: false,
+ constraints: []
+ };
+}
diff --git a/src/assets/wise5/components/outsideURL/OutsideUrlInfo.ts b/src/assets/wise5/components/outsideURL/OutsideUrlInfo.ts
new file mode 100644
index 00000000000..607d5b720c7
--- /dev/null
+++ b/src/assets/wise5/components/outsideURL/OutsideUrlInfo.ts
@@ -0,0 +1,18 @@
+import { ComponentInfo } from '../ComponentInfo';
+
+export class OutsideUrlInfo extends ComponentInfo {
+ protected description: string = $localize`Students view an external website.`;
+ protected label: string = $localize`Outside Resource`;
+ protected previewContent: any = {
+ id: 'abcde12345',
+ type: 'OutsideURL',
+ prompt: 'Play with the model.',
+ showSaveButton: false,
+ showSubmitButton: false,
+ url:
+ 'https://lab.concord.org/embeddable.html#interactives/air-pollution/air-pollution-master.json',
+ height: 600,
+ info: 'https://learn.concord.org/resources/855/air-pollution-model-cross-section',
+ constraints: []
+ };
+}
diff --git a/src/assets/wise5/components/peerChat/PeerChatInfo.ts b/src/assets/wise5/components/peerChat/PeerChatInfo.ts
new file mode 100644
index 00000000000..80c8a23cff1
--- /dev/null
+++ b/src/assets/wise5/components/peerChat/PeerChatInfo.ts
@@ -0,0 +1,43 @@
+import { ComponentInfo } from '../ComponentInfo';
+
+export class PeerChatInfo extends ComponentInfo {
+ protected description: string = $localize`Students are grouped with other students to discuss a topic.`;
+ protected label: string = $localize`Peer Chat`;
+ protected previewContent: any = {
+ id: 'abcde12345',
+ type: 'PeerChat',
+ prompt: `Hi! You've been paired with a classmate to improve your explanation to the question: "How do you think Mt. Hood formed?"
+ Discuss with your partner in this chat!
If you agree, you can describe what you agree on and try to elaborate. If you disagree, try to figure out why.
+ You can use questions from the Question Bank if you want help connecting your ideas.
`,
+ showSaveButton: false,
+ showSubmitButton: false,
+ peerGroupingTag: '',
+ questionBank: {
+ version: 2,
+ enabled: true,
+ maxQuestionsToShow: 3,
+ clickToUseEnabled: true,
+ rules: [
+ {
+ id: 'lt6a6dwpq3',
+ expression: 'true',
+ questions: [
+ {
+ text: 'How does convection affect plate movement where Mt. Hood is located?',
+ id: 'vwv7dnbm28'
+ },
+ {
+ text: 'How does density have an effect on how plates interact with one another? ',
+ id: 'vwv7dnbm29'
+ },
+ {
+ text: 'Do you agree or disagree with your partner? What would you add or build on?',
+ id: 'vwv7dnbm27'
+ }
+ ]
+ }
+ ]
+ },
+ constraints: []
+ };
+}
diff --git a/src/assets/wise5/components/showGroupWork/ShowGroupWorkInfo.ts b/src/assets/wise5/components/showGroupWork/ShowGroupWorkInfo.ts
new file mode 100644
index 00000000000..13935020d83
--- /dev/null
+++ b/src/assets/wise5/components/showGroupWork/ShowGroupWorkInfo.ts
@@ -0,0 +1,19 @@
+import { ComponentInfo } from '../ComponentInfo';
+
+export class ShowGroupWorkInfo extends ComponentInfo {
+ protected description: string = $localize`Students are shown work that everyone in their group submitted for a specific item.`;
+ protected label: string = $localize`Show Group Work`;
+ protected previewContent: any = {
+ id: 'abcde12345',
+ type: 'ShowGroupWork',
+ prompt: `Hi! You've been paired with a classmate to improve your explanation.
Here are your responses to the question "How do you think Mt. Hood formed?":`,
+ showSaveButton: false,
+ showSubmitButton: false,
+ showWorkNodeId: '',
+ showWorkComponentId: '',
+ peerGroupingTag: '',
+ isShowMyWork: true,
+ layout: 'column',
+ constraints: []
+ };
+}
diff --git a/src/assets/wise5/components/showMyWork/ShowMyWorkInfo.ts b/src/assets/wise5/components/showMyWork/ShowMyWorkInfo.ts
new file mode 100644
index 00000000000..00faa3cbe9f
--- /dev/null
+++ b/src/assets/wise5/components/showMyWork/ShowMyWorkInfo.ts
@@ -0,0 +1,16 @@
+import { ComponentInfo } from '../ComponentInfo';
+
+export class ShowMyWorkInfo extends ComponentInfo {
+ protected description: string = $localize`Students are shown work that they submitted for a specific item.`;
+ protected label: string = $localize`Show My Work`;
+ protected previewContent: any = {
+ id: 'abcde12345',
+ type: 'ShowMyWork',
+ prompt: 'Here is your previous answer to the question "How do you think Mt. Hood formed?":',
+ showSaveButton: false,
+ showSubmitButton: false,
+ showWorkNodeId: '',
+ showWorkComponentId: '',
+ constraints: []
+ };
+}
diff --git a/src/assets/wise5/components/summary/SummaryInfo.ts b/src/assets/wise5/components/summary/SummaryInfo.ts
new file mode 100644
index 00000000000..1d4b707acab
--- /dev/null
+++ b/src/assets/wise5/components/summary/SummaryInfo.ts
@@ -0,0 +1,22 @@
+import { ComponentInfo } from '../ComponentInfo';
+
+export class SummaryInfo extends ComponentInfo {
+ protected description: string = $localize`Students are shown an aggregate graph summarizing data from the class.`;
+ protected label: string = $localize`Summary`;
+ protected previewContent: any = {
+ id: 'abcde12345',
+ type: 'Summary',
+ prompt: 'This graph shows a summary of the data collected by you and your classmates:',
+ showSaveButton: false,
+ showSubmitButton: false,
+ summaryNodeId: null,
+ summaryComponentId: null,
+ source: 'period',
+ studentDataType: null,
+ chartType: 'column',
+ requirementToSeeSummary: 'submitWork',
+ highlightCorrectAnswer: false,
+ customLabelColors: [],
+ constraints: []
+ };
+}
diff --git a/src/assets/wise5/components/table/TableInfo.ts b/src/assets/wise5/components/table/TableInfo.ts
new file mode 100644
index 00000000000..29988543af7
--- /dev/null
+++ b/src/assets/wise5/components/table/TableInfo.ts
@@ -0,0 +1,141 @@
+import { ComponentInfo } from '../ComponentInfo';
+
+export class TableInfo extends ComponentInfo {
+ protected description: string = $localize`Students view and/or edit table data.`;
+ protected label: string = $localize`Table`;
+ protected previewContent: any = {
+ id: 'abcde12345',
+ type: 'Table',
+ prompt: `Document your findings!
+ Run at least 3 trials with the simulation: one with dark sand, one with medium colored sand, and one with light sand. Record the results in the table below.
`,
+ showSaveButton: false,
+ showSubmitButton: false,
+ showAddToNotebookButton: false,
+ globalCellSize: 9,
+ numRows: 4,
+ nuColumns: 8,
+ tableData: [
+ [
+ {
+ editable: false,
+ text: 'Trial'
+ },
+ {
+ editable: false,
+ text: 'Sand Color'
+ },
+ {
+ editable: false,
+ text: 'Initial number of fish'
+ },
+ {
+ editable: false,
+ text: 'Initial number of sharks'
+ },
+ {
+ editable: false,
+ text: 'Generations passed'
+ },
+ {
+ editable: false,
+ text: 'Resulting number of dark fish'
+ },
+ {
+ editable: false,
+ text: 'Resulting number of light fish'
+ }
+ ],
+ [
+ {
+ editable: false,
+ text: '1'
+ },
+ {
+ editable: true,
+ text: ''
+ },
+ {
+ editable: true,
+ text: ''
+ },
+ {
+ editable: true,
+ text: ''
+ },
+ {
+ editable: true,
+ text: ''
+ },
+ {
+ editable: true,
+ text: ''
+ },
+ {
+ editable: true,
+ text: ''
+ }
+ ],
+ [
+ {
+ editable: false,
+ text: '2'
+ },
+ {
+ editable: true,
+ text: ''
+ },
+ {
+ editable: true,
+ text: ''
+ },
+ {
+ editable: true,
+ text: ''
+ },
+ {
+ editable: true,
+ text: ''
+ },
+ {
+ editable: true,
+ text: ''
+ },
+ {
+ editable: true,
+ text: ''
+ }
+ ],
+ [
+ {
+ editable: false,
+ text: '3'
+ },
+ {
+ editable: true,
+ text: ''
+ },
+ {
+ editable: true,
+ text: ''
+ },
+ {
+ editable: true,
+ text: ''
+ },
+ {
+ editable: true,
+ text: ''
+ },
+ {
+ editable: true,
+ text: ''
+ },
+ {
+ editable: true,
+ text: ''
+ }
+ ]
+ ],
+ constraints: []
+ };
+}
diff --git a/src/assets/wise5/services/componentInfoService.ts b/src/assets/wise5/services/componentInfoService.ts
new file mode 100644
index 00000000000..ef48513d286
--- /dev/null
+++ b/src/assets/wise5/services/componentInfoService.ts
@@ -0,0 +1,50 @@
+import { Injectable } from '@angular/core';
+import { MultipleChoiceInfo } from '../components/multipleChoice/MultipleChoiceInfo';
+import { OpenResponseInfo } from '../components/openResponse/OpenResponseInfo';
+import { AnimationInfo } from '../components/animation/AnimationInfo';
+import { AudioOscillatorInfo } from '../components/audioOscillator/AudioOscillatorInfo';
+import { ConceptMapInfo } from '../components/conceptMap/ConceptMapInfo';
+import { DialogGuidanceInfo } from '../components/dialogGuidance/DialogGuidanceInfo';
+import { DiscussionInfo } from '../components/discussion/DiscussionInfo';
+import { DrawInfo } from '../components/draw/DrawInfo';
+import { EmbeddedInfo } from '../components/embedded/EmbeddedInfo';
+import { GraphInfo } from '../components/graph/GraphInfo';
+import { HtmlInfo } from '../components/html/HtmlInfo';
+import { LabelInfo } from '../components/label/LabelInfo';
+import { MatchInfo } from '../components/match/MatchInfo';
+import { OutsideUrlInfo } from '../components/outsideURL/OutsideUrlInfo';
+import { PeerChatInfo } from '../components/peerChat/PeerChatInfo';
+import { ShowGroupWorkInfo } from '../components/showGroupWork/ShowGroupWorkInfo';
+import { ShowMyWorkInfo } from '../components/showMyWork/ShowMyWorkInfo';
+import { SummaryInfo } from '../components/summary/SummaryInfo';
+import { TableInfo } from '../components/table/TableInfo';
+import { ComponentInfo } from '../components/ComponentInfo';
+
+@Injectable()
+export class ComponentInfoService {
+ private componentInfo = {
+ Animation: new AnimationInfo(),
+ AudioOscillator: new AudioOscillatorInfo(),
+ ConceptMap: new ConceptMapInfo(),
+ DialogGuidance: new DialogGuidanceInfo(),
+ Discussion: new DiscussionInfo(),
+ Draw: new DrawInfo(),
+ Embedded: new EmbeddedInfo(),
+ Graph: new GraphInfo(),
+ HTML: new HtmlInfo(),
+ Label: new LabelInfo(),
+ Match: new MatchInfo(),
+ MultipleChoice: new MultipleChoiceInfo(),
+ OpenResponse: new OpenResponseInfo(),
+ OutsideURL: new OutsideUrlInfo(),
+ PeerChat: new PeerChatInfo(),
+ ShowGroupWork: new ShowGroupWorkInfo(),
+ ShowMyWork: new ShowMyWorkInfo(),
+ Summary: new SummaryInfo(),
+ Table: new TableInfo()
+ };
+
+ getInfo(componentType: string): ComponentInfo {
+ return this.componentInfo[componentType];
+ }
+}
diff --git a/src/assets/wise5/vle/computer-avatar-selector/computer-avatar-selector.component.scss b/src/assets/wise5/vle/computer-avatar-selector/computer-avatar-selector.component.scss
index 881556f0c32..89417707c84 100644
--- a/src/assets/wise5/vle/computer-avatar-selector/computer-avatar-selector.component.scss
+++ b/src/assets/wise5/vle/computer-avatar-selector/computer-avatar-selector.component.scss
@@ -1,7 +1,6 @@
@import 'style/abstracts/variables', 'style/abstracts/functions';
.mat-mdc-card {
- padding: 12px;
margin-top: 16px;
max-width: breakpoint('sm.min');
diff --git a/src/messages.xlf b/src/messages.xlf
index ea0a8755628..7eec122f49b 100644
--- a/src/messages.xlf
+++ b/src/messages.xlf
@@ -293,6 +293,10 @@
src/app/teacher/share-run-code-dialog/share-run-code-dialog.component.html
61
+
+ src/assets/wise5/authoringTool/components/component-info-dialog/component-info-dialog.component.html
+ 9
+
src/assets/wise5/authoringTool/components/preview-component-dialog/preview-component-dialog.component.html
20
@@ -371,23 +375,25 @@
1
-
- Click the new component type you want to add, or import component(s) from other units
+
+ Select the component type you want to add or
+
+ src/app/authoring-tool/add-component/choose-new-component/choose-new-component.component.html
+ 4
+
+
+
+ import from another unit
src/app/authoring-tool/add-component/choose-new-component/choose-new-component.component.html
- 5,14
+ 5,7
Cancel
src/app/authoring-tool/add-component/choose-new-component/choose-new-component.component.html
- 34
+ 19
src/app/authoring-tool/import-step/choose-import-step-location/choose-import-step-location.component.html
@@ -447,7 +453,7 @@
src/assets/wise5/authoringTool/addNode/add-your-own-node/add-your-own-node.component.html
- 59
+ 60
src/assets/wise5/authoringTool/addNode/choose-new-node-location/choose-new-node-location.component.html
@@ -1497,7 +1503,7 @@ Click "Cancel" to keep the invalid JSON open so you can fix it.
src/assets/wise5/authoringTool/addNode/add-your-own-node/add-your-own-node.component.html
- 57
+ 58
src/assets/wise5/authoringTool/addNode/choose-automated-assessment/choose-automated-assessment.component.html
@@ -9223,7 +9229,7 @@ Click "Cancel" to keep the invalid JSON open so you can fix it.
src/assets/wise5/authoringTool/addNode/add-your-own-node/add-your-own-node.component.html
- 67,69
+ 68,70
@@ -9265,7 +9271,7 @@ Click "Cancel" to keep the invalid JSON open so you can fix it. *Note: You can always add or remove content later by editing the step.
src/assets/wise5/authoringTool/addNode/add-your-own-node/add-your-own-node.component.html
- 49,51
+ 50,52
@@ -9760,6 +9766,35 @@ Click "Cancel" to keep the invalid JSON open so you can fix it.97
+
+
+
+ src/assets/wise5/authoringTool/components/component-info-dialog/component-info-dialog.component.html
+ 1
+
+
+ src/assets/wise5/authoringTool/components/component-selector/component-selector.component.html
+ 3
+
+
+
+ Example
+
+ src/assets/wise5/authoringTool/components/component-info-dialog/component-info-dialog.component.html
+ 5
+
+
+ src/assets/wise5/components/common/feedbackRule/feedback-rule-help/feedback-rule-help.component.html
+ 184
+
+
+
+ Component type details
+
+ src/assets/wise5/authoringTool/components/component-selector/component-selector.component.html
+ 4
+
+
Preview Component
@@ -15010,6 +15045,24 @@ Are you sure you want to proceed?
58
+
+ Students watch an animation.
+
+ src/assets/wise5/components/animation/AnimationInfo.ts
+ 4
+
+
+
+ Animation
+
+ src/assets/wise5/components/animation/AnimationInfo.ts
+ 5
+
+
+ src/assets/wise5/components/animation/animationService.ts
+ 9
+
+
Width (Pixels)
@@ -15640,11 +15693,22 @@ Are you ready to receive feedback on this answer?
330
-
- Animation
+
+ Students change the frequency and amplitude of a sound wave. They listen to the resulting sounds and view graphs of the waves.
- src/assets/wise5/components/animation/animationService.ts
- 9
+ src/assets/wise5/components/audioOscillator/AudioOscillatorInfo.ts
+ 4
+
+
+
+ Audio Oscillator
+
+ src/assets/wise5/components/audioOscillator/AudioOscillatorInfo.ts
+ 5
+
+
+ src/assets/wise5/components/audioOscillator/audioOscillatorService.ts
+ 11
@@ -15900,13 +15964,6 @@ Are you ready to receive feedback on this answer?
284
-
- Audio Oscillator
-
- src/assets/wise5/components/audioOscillator/audioOscillatorService.ts
- 11
-
-
Thanks for submitting your response.
@@ -16201,13 +16258,6 @@ Are you ready to receive feedback on this answer?
181
-
- Example
-
- src/assets/wise5/components/common/feedbackRule/feedback-rule-help/feedback-rule-help.component.html
- 184
-
-
Evaluates to true if neither idea 4a nor idea 12 were found.
@@ -16236,6 +16286,24 @@ Are you ready to receive feedback on this answer?
2
+
+ Students add items to a canvas and connect the items with links.
+
+ src/assets/wise5/components/conceptMap/ConceptMapInfo.ts
+ 4
+
+
+
+ Concept Map
+
+ src/assets/wise5/components/conceptMap/ConceptMapInfo.ts
+ 5
+
+
+ src/assets/wise5/components/conceptMap/conceptMapService.ts
+ 22
+
+
Background Image (Optional)
@@ -16511,13 +16579,6 @@ Are you ready to receive feedback on this answer?
1413
-
- Concept Map
-
- src/assets/wise5/components/conceptMap/conceptMapService.ts
- 22
-
-
Show Auto Score
@@ -16753,6 +16814,24 @@ Category Name:
39
+
+ Students chat with a computer avatar about a specific topic.
+
+ src/assets/wise5/components/dialogGuidance/DialogGuidanceInfo.ts
+ 4
+
+
+
+ Dialog Guidance
+
+ src/assets/wise5/components/dialogGuidance/DialogGuidanceInfo.ts
+ 5
+
+
+ src/assets/wise5/components/dialogGuidance/dialogGuidanceService.ts
+ 12
+
+
Item ID
@@ -16803,13 +16882,6 @@ Category Name:
26
-
- Dialog Guidance
-
- src/assets/wise5/components/dialogGuidance/dialogGuidanceService.ts
- 12
-
-
Discuss your answer with a thought buddy!
@@ -16950,6 +17022,24 @@ Category Name:
99
+
+ Students post messages for the whole class to see and can reply to other students' posts.
+
+ src/assets/wise5/components/discussion/DiscussionInfo.ts
+ 4
+
+
+
+ Discussion
+
+ src/assets/wise5/components/discussion/DiscussionInfo.ts
+ 5
+
+
+ src/assets/wise5/components/discussion/discussionService.ts
+ 16
+
+
Post attachment
@@ -17109,11 +17199,22 @@ Category Name:
196
-
- Discussion
+
+ Students draw on a canvas using a variety of tools.
- src/assets/wise5/components/discussion/discussionService.ts
- 16
+ src/assets/wise5/components/draw/DrawInfo.ts
+ 4
+
+
+
+ Draw
+
+ src/assets/wise5/components/draw/DrawInfo.ts
+ 5
+
+
+ src/assets/wise5/components/draw/drawService.ts
+ 39
@@ -17325,13 +17426,6 @@ Category Name:
285
-
- Draw
-
- src/assets/wise5/components/draw/drawService.ts
- 39
-
-
Update On
@@ -17339,6 +17433,24 @@ Category Name:
20
+
+ Students interact with a custom applicatio, such as a model or simulation.
+
+ src/assets/wise5/components/embedded/EmbeddedInfo.ts
+ 4
+
+
+
+ Embedded (Custom)
+
+ src/assets/wise5/components/embedded/EmbeddedInfo.ts
+ 5
+
+
+ src/assets/wise5/components/embedded/embeddedService.ts
+ 30
+
+
Model Parameters
@@ -17403,11 +17515,22 @@ Category Name:
66
-
- Embedded (Custom)
+
+ Students view graph data or add points to a graph.
- src/assets/wise5/components/embedded/embeddedService.ts
- 30
+ src/assets/wise5/components/graph/GraphInfo.ts
+ 4
+
+
+
+ Graph
+
+ src/assets/wise5/components/graph/GraphInfo.ts
+ 5
+
+
+ src/assets/wise5/components/graph/graphService.ts
+ 25
@@ -18240,13 +18363,6 @@ Category Name:
2417
-
- Graph
-
- src/assets/wise5/components/graph/graphService.ts
- 25
-
-
Time (seconds)
@@ -18282,8 +18398,19 @@ Category Name:
78
+
+ Students view rich text (HTML) content.
+
+ src/assets/wise5/components/html/HtmlInfo.ts
+ 4
+
+
Rich Text (HTML)
+
+ src/assets/wise5/components/html/HtmlInfo.ts
+ 5
+
src/assets/wise5/components/html/htmlService.ts
7
@@ -18296,6 +18423,24 @@ Category Name:
13
+
+ Students add labels to a canvas.
+
+ src/assets/wise5/components/label/LabelInfo.ts
+ 4
+
+
+
+ Label
+
+ src/assets/wise5/components/label/LabelInfo.ts
+ 5
+
+
+ src/assets/wise5/components/label/labelService.ts
+ 24
+
+
Characters Per Line
@@ -18516,11 +18661,22 @@ Category Name:
906
-
- Label
+
+ Students sort items into different buckets.
- src/assets/wise5/components/label/labelService.ts
- 24
+ src/assets/wise5/components/match/MatchInfo.ts
+ 4
+
+
+
+ Match
+
+ src/assets/wise5/components/match/MatchInfo.ts
+ 5
+
+
+ src/assets/wise5/components/match/matchService.ts
+ 10
@@ -18855,10 +19011,21 @@ Warning: This will delete all existing choices and buckets in this component.690
-
- Match
+
+ Students select one or more choices.
- src/assets/wise5/components/match/matchService.ts
+ src/assets/wise5/components/multipleChoice/MultipleChoiceInfo.ts
+ 4
+
+
+
+ Multiple Choice
+
+ src/assets/wise5/components/multipleChoice/MultipleChoiceInfo.ts
+ 5
+
+
+ src/assets/wise5/components/multipleChoice/multipleChoiceService.ts
10
@@ -18960,11 +19127,22 @@ Warning: This will delete all existing choices in this component.
72,74
-
- Multiple Choice
+
+ Students type a response to a question or prompt.
- src/assets/wise5/components/multipleChoice/multipleChoiceService.ts
- 10
+ src/assets/wise5/components/openResponse/OpenResponseInfo.ts
+ 4
+
+
+
+ Open Response
+
+ src/assets/wise5/components/openResponse/OpenResponseInfo.ts
+ 5
+
+
+ src/assets/wise5/components/openResponse/openResponseService.ts
+ 14
@@ -19481,10 +19659,21 @@ If this problem continues, let your teacher know and move on to the next activit
320
-
- Open Response
+
+ Students view an external website.
- src/assets/wise5/components/openResponse/openResponseService.ts
+ src/assets/wise5/components/outsideURL/OutsideUrlInfo.ts
+ 4
+
+
+
+ Outside Resource
+
+ src/assets/wise5/components/outsideURL/OutsideUrlInfo.ts
+ 5
+
+
+ src/assets/wise5/components/outsideURL/outsideURLService.ts
14
@@ -19591,11 +19780,22 @@ If this problem continues, let your teacher know and move on to the next activit
6
-
- Outside Resource
+
+ Students are grouped with other students to discuss a topic.
- src/assets/wise5/components/outsideURL/outsideURLService.ts
- 14
+ src/assets/wise5/components/peerChat/PeerChatInfo.ts
+ 4
+
+
+
+ Peer Chat
+
+ src/assets/wise5/components/peerChat/PeerChatInfo.ts
+ 5
+
+
+ src/assets/wise5/components/peerChat/peerChatService.ts
+ 16
@@ -19697,13 +19897,6 @@ If this problem continues, let your teacher know and move on to the next activit
291
-
- Peer Chat
-
- src/assets/wise5/components/peerChat/peerChatService.ts
- 16
-
-
Teacher
@@ -19711,6 +19904,24 @@ If this problem continues, let your teacher know and move on to the next activit
65
+
+ Students are shown work that everyone in their group submitted for a specific item.
+
+ src/assets/wise5/components/showGroupWork/ShowGroupWorkInfo.ts
+ 4
+
+
+
+ Show Group Work
+
+ src/assets/wise5/components/showGroupWork/ShowGroupWorkInfo.ts
+ 5
+
+
+ src/assets/wise5/components/showGroupWork/showGroupWorkService.ts
+ 7
+
+
Show Work Step
@@ -19802,11 +20013,18 @@ If this problem continues, let your teacher know and move on to the next activit
21,23
-
- Show Group Work
+
+ Students are shown work that they submitted for a specific item.
- src/assets/wise5/components/showGroupWork/showGroupWorkService.ts
- 7
+ src/assets/wise5/components/showMyWork/ShowMyWorkInfo.ts
+ 4
+
+
+
+ Show My Work
+
+ src/assets/wise5/components/showMyWork/ShowMyWorkInfo.ts
+ 5
@@ -19823,6 +20041,24 @@ If this problem continues, let your teacher know and move on to the next activit
7
+
+ Students are shown an aggregate graph summarizing data from the class.
+
+ src/assets/wise5/components/summary/SummaryInfo.ts
+ 4
+
+
+
+ Summary
+
+ src/assets/wise5/components/summary/SummaryInfo.ts
+ 5
+
+
+ src/assets/wise5/components/summary/summaryService.ts
+ 33
+
+
Choose the step and component to show the summary data for:
@@ -20006,11 +20242,22 @@ If this problem continues, let your teacher know and move on to the next activit
147
-
- Summary
+
+ Students view and/or edit table data.
- src/assets/wise5/components/summary/summaryService.ts
- 33
+ src/assets/wise5/components/table/TableInfo.ts
+ 4
+
+
+
+ Table
+
+ src/assets/wise5/components/table/TableInfo.ts
+ 5
+
+
+ src/assets/wise5/components/table/tableService.ts
+ 16
@@ -20484,13 +20731,6 @@ If this problem continues, let your teacher know and move on to the next activit
151
-
- Table
-
- src/assets/wise5/components/table/tableService.ts
- 16
-
-
Save