feat(DialogGuidance): Allow authors specify text for ideas

src/app/authoring-tool/edit-component-advanced/edit-component-advanced.component.html

@@ -46,6 +46,7 @@ <h2 mat-dialog-title i18n>Advanced Settings</h2>
       *ngSwitchCase="'DialogGuidance'"
       [nodeId]="component.nodeId"
       [componentId]="component.id"
+      [ideaDescriptions]="component.content.cRaterRubric.ideas"
     ></edit-dialog-guidance-advanced>
     <edit-html-advanced
       *ngSwitchCase="'HTML'"

src/app/teacher/component-authoring.module.ts

@@ -3,6 +3,7 @@ import { AnimationAuthoring } from '../../assets/wise5/components/animation/anim
 import { AudioOscillatorAuthoring } from '../../assets/wise5/components/audioOscillator/audio-oscillator-authoring/audio-oscillator-authoring.component';
 import { ConceptMapAuthoring } from '../../assets/wise5/components/conceptMap/concept-map-authoring/concept-map-authoring.component';
 import { DialogGuidanceAuthoringComponent } from '../../assets/wise5/components/dialogGuidance/dialog-guidance-authoring/dialog-guidance-authoring.component';
+import { EditCRaterIdeaDescriptionsComponent } from '../../assets/wise5/components/common/cRater/edit-crater-idea-descriptions/edit-crater-idea-descriptions.component';
 import { EditFeedbackRulesComponent } from '../../assets/wise5/components/common/feedbackRule/edit-feedback-rules/edit-feedback-rules.component';
 import { DiscussionAuthoring } from '../../assets/wise5/components/discussion/discussion-authoring/discussion-authoring.component';
 import { DrawAuthoring } from '../../assets/wise5/components/draw/draw-authoring/draw-authoring.component';
@@ -172,6 +173,7 @@ import { RequiredErrorLabelComponent } from '../../assets/wise5/authoringTool/no
     EditComponentConstraintsComponent,
     EditComponentPrompt,
     EditComponentWidthComponent,
+    EditCRaterIdeaDescriptionsComponent,
     MatchAuthoringComponent,
     MultipleChoiceAuthoring,
     OpenResponseAuthoringComponent,
@@ -219,6 +221,7 @@ import { RequiredErrorLabelComponent } from '../../assets/wise5/authoringTool/no
     EditConnectedComponentsWithBackgroundComponent,
     EditConnectedComponentDeleteButtonComponent,
     EditConnectedComponentTypeSelectComponent,
+    EditCRaterIdeaDescriptionsComponent,
     EditDialogGuidanceAdvancedComponent,
     EditDiscussionAdvancedComponent,
     EditDiscussionConnectedComponentsComponent,

src/assets/wise5/components/common/cRater/edit-crater-idea-descriptions/edit-crater-idea-descriptions.component.html

@@ -0,0 +1,76 @@
+<div class="idea-descriptions notice-bg-bg">
+  <h5 class="flex flex-row items-center gap-1 !text-xl">
+    <span i18n>Idea Names</span>
+    <button
+      mat-icon-button
+      color="primary"
+      matTooltip="Add a new idea name"
+      i18n-matTooltip
+      matTooltipPosition="after"
+      (click)="addNewIdeaDescription(true)"
+    >
+      <mat-icon>add_circle</mat-icon>
+    </button>
+    <span class="flex-1"></span>
+  </h5>
+  <ul>
+    @for (
+      idea of ideaDescriptions;
+      track $index;
+      let ideaIndex = $index, first = $first, last = $last
+    ) {
+      <li class="idea">
+        <mat-card appearance="outlined" class="idea-content">
+          <div class="flex flex-row flex-wrap gap-2">
+            <div class="text-secondary flex flex-col items-center">
+              <span class="mat-subtitle-1">{{ ideaIndex + 1 }}</span>
+            </div>
+            <div class="flex flex-col items-start gap-2 flex-1">
+              <mat-form-field class="idea-input form-field-no-hint" appearance="fill">
+                <mat-label i18n>Idea ID</mat-label>
+                <input
+                  matInput
+                  [(ngModel)]="idea.name"
+                  (ngModelChange)="inputChanged.next($event)"
+                />
+              </mat-form-field>
+              <mat-form-field class="idea-input form-field-no-hint" appearance="fill">
+                <mat-label i18n>User-Friendly Name</mat-label>
+                <textarea
+                  matInput
+                  [(ngModel)]="idea.text"
+                  (ngModelChange)="inputChanged.next($event)"
+                  cdkTextareaAutosize
+                >
+                </textarea>
+              </mat-form-field>
+            </div>
+            <div class="flex flex-col items-center">
+              <button
+                mat-icon-button
+                i18n-matTooltip
+                matTooltip="Delete idea description"
+                matTooltipPosition="before"
+                (click)="deleteIdeaDescription(ideaIndex)"
+              >
+                <mat-icon>clear</mat-icon>
+              </button>
+            </div>
+          </div>
+        </mat-card>
+      </li>
+    }
+  </ul>
+  <div id="add-new-idea-description-bottom-button" [hidden]="getNumIdeaDescriptions() === 0">
+    <button
+      mat-icon-button
+      color="primary"
+      matTooltip="Add a new idea description"
+      i18n-matTooltip
+      matTooltipPosition="above"
+      (click)="addNewIdeaDescription(false)"
+    >
+      <mat-icon>add_circle</mat-icon>
+    </button>
+  </div>
+</div>

src/assets/wise5/components/common/cRater/edit-crater-idea-descriptions/edit-crater-idea-descriptions.component.scss

@@ -0,0 +1,37 @@
+@import 'style/abstracts/variables';
+
+.idea-descriptions {
+  padding: 16px;
+  border-radius: $card-border-radius;
+}
+
+h5 {
+  margin-top: 0;
+}
+
+ul {
+  margin: 16px 0 0 0;
+  padding: 0 0 16px;
+}
+
+li {
+  list-style-type: none;
+}
+
+.idea {
+  position: relative;
+}
+
+.idea-content {
+  width: 100%;
+  padding: 8px;
+  margin-bottom: 8px;
+}
+
+.idea-input {
+  width: 100%;
+}
+
+.mat-subtitle-1 {
+  margin: 0;
+}

src/assets/wise5/components/common/cRater/edit-crater-idea-descriptions/edit-crater-idea-descriptions.component.ts

@@ -0,0 +1,92 @@
+import { CdkTextareaAutosize } from '@angular/cdk/text-field';
+import { Component, Input, OnInit } from '@angular/core';
+import { ComponentContent } from '../../../../common/ComponentContent';
+import { CRaterIdea } from '../CRaterIdea';
+import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
+import { FlexLayoutModule } from '@angular/flex-layout';
+import { MatCardModule } from '@angular/material/card';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { FormsModule } from '@angular/forms';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { Subject, Subscription } from 'rxjs';
+import { TeacherProjectService } from '../../../../services/teacherProjectService';
+import { MatButtonModule } from '@angular/material/button';
+
+@Component({
+  imports: [
+    CdkTextareaAutosize,
+    FlexLayoutModule,
+    FormsModule,
+    MatCardModule,
+    MatInputModule,
+    MatFormFieldModule,
+    MatButtonModule,
+    MatIconModule,
+    MatTooltipModule
+  ],
+  selector: 'edit-crater-idea-descriptions',
+  standalone: true,
+  templateUrl: './edit-crater-idea-descriptions.component.html',
+  styleUrl: './edit-crater-idea-descriptions.component.scss'
+})
+export class EditCRaterIdeaDescriptionsComponent implements OnInit {
+  @Input() componentContent: ComponentContent;
+  @Input() ideaDescriptions: CRaterIdea[] = [];
+  protected inputChanged: Subject<string> = new Subject<string>();
+  private subscriptions: Subscription = new Subscription();
+
+  constructor(protected projectService: TeacherProjectService) {}
+
+  ngOnInit(): void {
+    this.subscriptions.add(
+      this.inputChanged.pipe(debounceTime(1000), distinctUntilChanged()).subscribe(() => {
+        this.projectService.nodeChanged();
+      })
+    );
+  }
+
+  ngOnDestroy(): void {
+    this.subscriptions.unsubscribe();
+  }
+
+  protected addNewIdeaDescription(addToTop: boolean): void {
+    const newIdeaDescription = this.createNewIdea();
+    this.ideaDescriptions.splice(
+      addToTop ? 0 : this.getNumIdeaDescriptions(),
+      0,
+      newIdeaDescription
+    );
+    this.projectService.nodeChanged();
+    if (!addToTop) {
+      this.scrollToBottomOfList();
+    }
+  }
+
+  private createNewIdea(): CRaterIdea {
+    const idea = new CRaterIdea('', null);
+    idea.text = '';
+    return idea;
+  }
+
+  protected getNumIdeaDescriptions(): number {
+    return this.ideaDescriptions.length;
+  }
+
+  private scrollToBottomOfList(): void {
+    setTimeout(() => {
+      const button = document.getElementById('add-new-idea-description-bottom-button');
+      if (button) {
+        button.scrollIntoView();
+      }
+    }, 0);
+  }
+
+  protected deleteIdeaDescription(ideaIndex: number): void {
+    if (confirm($localize`Are you sure you want to delete this idea name?`)) {
+      this.ideaDescriptions.splice(ideaIndex, 1);
+      this.projectService.nodeChanged();
+    }
+  }
+}

src/assets/wise5/components/common/feedbackRule/edit-feedback-rules/edit-feedback-rules.component.ts

@@ -19,7 +19,10 @@ export class EditFeedbackRulesComponent implements OnInit {
   subscriptions: Subscription = new Subscription();
   @Input() version: number = 2;
 
-  constructor(protected dialog: MatDialog, protected projectService: TeacherProjectService) {}
+  constructor(
+    protected dialog: MatDialog,
+    protected projectService: TeacherProjectService
+  ) {}
 
   ngOnInit(): void {
     this.subscriptions.add(

src/assets/wise5/components/dialogGuidance/dialog-guidance-authoring/dialog-guidance-authoring.component.ts

@@ -5,6 +5,7 @@ import { ProjectAssetService } from '../../../../../app/services/projectAssetSer
 import { TeacherProjectService } from '../../../services/teacherProjectService';
 import { TeacherNodeService } from '../../../services/teacherNodeService';
 import { ComputerAvatarService } from '../../../services/computerAvatarService';
+import { CRaterRubric } from '../../common/cRater/CRaterRubric';
 
 @Component({
   selector: 'dialog-guidance-authoring',
@@ -25,7 +26,9 @@ export class DialogGuidanceAuthoringComponent extends AbstractComponentAuthoring
   ngOnInit() {
     super.ngOnInit();
     if (this.componentContent.computerAvatarSettings == null) {
-      this.componentContent.computerAvatarSettings = this.computerAvatarService.getDefaultComputerAvatarSettings();
+      this.componentContent.computerAvatarSettings =
+        this.computerAvatarService.getDefaultComputerAvatarSettings();
     }
+    this.componentContent.cRaterRubric = this.componentContent.cRaterRubric || new CRaterRubric();
   }
 }

src/assets/wise5/components/dialogGuidance/dialogGuidanceService.ts

@@ -18,8 +18,10 @@ export class DialogGuidanceService extends ComponentService {
     component.itemId = '';
     component.feedbackRules = [];
     component.isComputerAvatarEnabled = false;
-    component.computerAvatarSettings = this.computerAvatarService.getDefaultComputerAvatarSettings();
+    component.computerAvatarSettings =
+      this.computerAvatarService.getDefaultComputerAvatarSettings();
     component.version = 2;
+    component.cRaterRubric = { ideas: [] };
     return component;
   }
 

src/assets/wise5/components/dialogGuidance/edit-dialog-guidance-advanced/edit-dialog-guidance-advanced.component.html

@@ -1,2 +1,3 @@
 <edit-component-constraints [componentContent]="component.content" />
 <edit-component-json [component]="component"></edit-component-json>
+<edit-crater-idea-descriptions [ideaDescriptions]="ideaDescriptions" />

src/assets/wise5/components/dialogGuidance/edit-dialog-guidance-advanced/edit-dialog-guidance-advanced.component.ts

@@ -1,8 +1,11 @@
-import { Component } from '@angular/core';
+import { Component, Input } from '@angular/core';
+import { CRaterIdea } from '../../common/cRater/CRaterIdea';
 import { EditAdvancedComponentComponent } from '../../../../../app/authoring-tool/edit-advanced-component/edit-advanced-component.component';
 
 @Component({
   selector: 'edit-dialog-guidance-advanced',
   templateUrl: 'edit-dialog-guidance-advanced.component.html'
 })
-export class EditDialogGuidanceAdvancedComponent extends EditAdvancedComponentComponent {}
+export class EditDialogGuidanceAdvancedComponent extends EditAdvancedComponentComponent {
+  @Input() ideaDescriptions: CRaterIdea[] = [];
+}

src/messages.xlf

@@ -816,7 +816,7 @@
         <source> Close </source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/authoring-tool/edit-component-advanced/edit-component-advanced.component.html</context>
-          <context context-type="linenumber">109,111</context>
+          <context context-type="linenumber">110,112</context>
         </context-group>
       </trans-unit>
       <trans-unit id="b1fa4e5073c0229ba88f70784a0aa77615380bec" datatype="html">
@@ -16555,6 +16555,55 @@ Are you ready to receive feedback on this answer?</source>
           <context context-type="linenumber">284</context>
         </context-group>
       </trans-unit>
+      <trans-unit id="c92bbbb092016ebd6979696276584c747b1e783a" datatype="html">
+        <source>Idea Names</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/assets/wise5/components/common/cRater/edit-crater-idea-descriptions/edit-crater-idea-descriptions.component.html</context>
+          <context context-type="linenumber">3</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="43212a5b92071b738c8bbb58a3cf4fb72bbeca54" datatype="html">
+        <source>Add a new idea name</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/assets/wise5/components/common/cRater/edit-crater-idea-descriptions/edit-crater-idea-descriptions.component.html</context>
+          <context context-type="linenumber">7</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="672eecf8a642d581669798f480109acd8d6d81c7" datatype="html">
+        <source>Idea ID</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/assets/wise5/components/common/cRater/edit-crater-idea-descriptions/edit-crater-idea-descriptions.component.html</context>
+          <context context-type="linenumber">30</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="d9fbeb79d29910e52d4c95efc110f2b88790794b" datatype="html">
+        <source>User-Friendly Name</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/assets/wise5/components/common/cRater/edit-crater-idea-descriptions/edit-crater-idea-descriptions.component.html</context>
+          <context context-type="linenumber">38</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="026e727ae1397d28d4945cdb3f1ce6f743e222c5" datatype="html">
+        <source>Delete idea description</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/assets/wise5/components/common/cRater/edit-crater-idea-descriptions/edit-crater-idea-descriptions.component.html</context>
+          <context context-type="linenumber">52</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="402675d4fcc4e288214237ba9744bec97c3262a3" datatype="html">
+        <source>Add a new idea description</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/assets/wise5/components/common/cRater/edit-crater-idea-descriptions/edit-crater-idea-descriptions.component.html</context>
+          <context context-type="linenumber">68</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="7862038253187581980" datatype="html">
+        <source>Are you sure you want to delete this idea name?</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/assets/wise5/components/common/cRater/edit-crater-idea-descriptions/edit-crater-idea-descriptions.component.ts</context>
+          <context context-type="linenumber">87</context>
+        </context-group>
+      </trans-unit>
       <trans-unit id="5596810972110629301" datatype="html">
         <source>Thanks for submitting your response.</source>
         <context-group purpose="location">
@@ -16601,14 +16650,14 @@ Are you ready to receive feedback on this answer?</source>
         <source>Are you sure you want to delete this feedback?</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/components/common/feedbackRule/edit-feedback-rules/edit-feedback-rules.component.ts</context>
-          <context context-type="linenumber">73</context>
+          <context context-type="linenumber">76</context>
         </context-group>
       </trans-unit>
       <trans-unit id="7484685939884481783" datatype="html">
         <source>Are you sure you want to delete this feedback rule?</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/components/common/feedbackRule/edit-feedback-rules/edit-feedback-rules.component.ts</context>
-          <context context-type="linenumber">80</context>
+          <context context-type="linenumber">83</context>
         </context-group>
       </trans-unit>
       <trans-unit id="82efdf880fe90640388310171d05401a6fc62663" datatype="html">