refactor(MultipleChoiceComponents): Split MCStudentComponent to MCRad…

…ioStudentComponent and MCCheckoxStudentComponent (#1989)
WISE-Community · Nov 13, 2024 · 220c359 · 220c359
1 parent 7f5ad05
commit 220c359
Show file tree

Hide file tree

Showing 7 changed files with 116 additions and 72 deletions.
diff --git a/...leChoice/multiple-choice-checkbox-student/multiple-choice-checkbox-student.component.html b/...leChoice/multiple-choice-checkbox-student/multiple-choice-checkbox-student.component.html
@@ -0,0 +1,23 @@
+@for (choice of choices; track choice.id) {
+  <div>
+    <mat-checkbox
+      [(ngModel)]="choice.isChecked"
+      (change)="updateStudentChoices.emit(choice.id)"
+      [disabled]="isDisabled"
+      [attr.aria-label]="choice.text"
+      color="primary"
+    >
+      <span [innerHTML]="choice.text"></span>&nbsp;
+      @if (choice.showFeedback) {
+        <span
+          [ngClass]="{
+            success: componentHasCorrectAnswer && choice.isCorrect,
+            warn: componentHasCorrectAnswer && !choice.isCorrect,
+            info: !componentHasCorrectAnswer
+          }"
+          >{{ choice.feedbackToShow }}</span
+        >
+      }
+    </mat-checkbox>
+  </div>
+}
diff --git a/...ipleChoice/multiple-choice-checkbox-student/multiple-choice-checkbox-student.component.ts b/...ipleChoice/multiple-choice-checkbox-student/multiple-choice-checkbox-student.component.ts
@@ -0,0 +1,19 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+
+@Component({
+  imports: [CommonModule, FormsModule, MatCheckboxModule],
+  selector: 'multiple-choice-checkbox-student',
+  standalone: true,
+  templateUrl: './multiple-choice-checkbox-student.component.html'
+})
+export class MultipleChoiceCheckboxStudentComponent {
+  @Input() choices: any[];
+  @Input() studentChoices: string[];
+  @Input() isDisabled: boolean;
+  @Input() showFeedback: boolean;
+  @Input() componentHasCorrectAnswer: boolean;
+  @Output() updateStudentChoices = new EventEmitter<string>();
+}
diff --git a/...multipleChoice/multiple-choice-radio-student/multiple-choice-radio-student.component.html b/...multipleChoice/multiple-choice-radio-student/multiple-choice-radio-student.component.html
@@ -0,0 +1,24 @@
+<mat-radio-group [(ngModel)]="studentChoices" (ngModelChange)="studentChoicesChange.emit($event)">
+  @for (choice of choices; track choice.id) {
+    <div>
+      <mat-radio-button
+        [attr.aria-label]="choice.text"
+        color="primary"
+        [value]="choice.id"
+        [disabled]="isDisabled"
+      >
+        <span [innerHTML]="choice.text"></span>&nbsp;
+        @if (showFeedback && choice.showFeedback) {
+          <span
+            [ngClass]="{
+              success: componentHasCorrectAnswer && choice.isCorrect,
+              warn: componentHasCorrectAnswer && !choice.isCorrect,
+              info: !componentHasCorrectAnswer
+            }"
+            >{{ choice.feedbackToShow }}</span
+          >
+        }
+      </mat-radio-button>
+    </div>
+  }
+</mat-radio-group>
diff --git a/...s/multipleChoice/multiple-choice-radio-student/multiple-choice-radio-student.component.ts b/...s/multipleChoice/multiple-choice-radio-student/multiple-choice-radio-student.component.ts
@@ -0,0 +1,19 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { MatRadioModule } from '@angular/material/radio';
+
+@Component({
+  imports: [CommonModule, FormsModule, MatRadioModule],
+  selector: 'multiple-choice-radio-student',
+  standalone: true,
+  templateUrl: './multiple-choice-radio-student.component.html'
+})
+export class MultipleChoiceRadioStudentComponent {
+  @Input() choices: any[];
+  @Input() studentChoices: string;
+  @Input() isDisabled: boolean;
+  @Input() showFeedback: boolean;
+  @Input() componentHasCorrectAnswer: boolean;
+  @Output() studentChoicesChange = new EventEmitter<string>();
+}
diff --git a/.../components/multipleChoice/multiple-choice-student/multiple-choice-student.component.html b/.../components/multipleChoice/multiple-choice-student/multiple-choice-student.component.html
@@ -2,54 +2,23 @@
   <component-header [component]="component" />
 
   @if (choiceType === 'radio') {
-    <mat-radio-group [(ngModel)]="studentChoices" (ngModelChange)="studentDataChanged()">
-      @for (choice of choices; track choice.id) {
-        <div>
-          <mat-radio-button
-            [attr.aria-label]="choice.text"
-            color="primary"
-            [value]="choice.id"
-            [disabled]="isDisabled"
-          >
-            <span [innerHTML]="choice.text"></span>&nbsp;
-            @if (showFeedback && choice.showFeedback) {
-              <span
-                [ngClass]="{
-                  success: componentHasCorrectAnswer && choice.isCorrect,
-                  warn: componentHasCorrectAnswer && !choice.isCorrect,
-                  info: !componentHasCorrectAnswer
-                }"
-                >{{ choice.feedbackToShow }}</span
-              >
-            }
-          </mat-radio-button>
-        </div>
-      }
-    </mat-radio-group>
+    <multiple-choice-radio-student
+      [choices]="choices"
+      [(studentChoices)]="studentChoices"
+      [isDisabled]="isDisabled"
+      [showFeedback]="showFeedback"
+      [componentHasCorrectAnswer]="componentHasCorrectAnswer"
+      (studentChoicesChange)="studentDataChanged()"
+    />
   } @else if (choiceType === 'checkbox') {
-    @for (choice of choices; track choice.id) {
-      <div>
-        <mat-checkbox
-          [(ngModel)]="choice.isChecked"
-          (change)="updateStudentChoices(choice.id)"
-          [disabled]="isDisabled"
-          [attr.aria-label]="choice.text"
-          color="primary"
-        >
-          <span [innerHTML]="choice.text"></span>&nbsp;
-          @if (choice.showFeedback) {
-            <span
-              [ngClass]="{
-                success: componentHasCorrectAnswer && choice.isCorrect,
-                warn: componentHasCorrectAnswer && !choice.isCorrect,
-                info: !componentHasCorrectAnswer
-              }"
-              >{{ choice.feedbackToShow }}</span
-            >
-          }
-        </mat-checkbox>
-      </div>
-    }
+    <multiple-choice-checkbox-student
+      [choices]="choices"
+      [studentChoices]="studentChoices"
+      [isDisabled]="isDisabled"
+      [showFeedback]="showFeedback"
+      [componentHasCorrectAnswer]="componentHasCorrectAnswer"
+      (updateStudentChoices)="updateStudentChoices($event)"
+    />
   }
 
   @if (componentHasCorrectAnswer && componentContent.maxSubmitCount != null) {

diff --git a/...e5/components/multipleChoice/multiple-choice-student/multiple-choice-student.component.ts b/...e5/components/multipleChoice/multiple-choice-student/multiple-choice-student.component.ts
@@ -1,8 +1,5 @@
 import { Component } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
-import { MatRadioModule } from '@angular/material/radio';
-import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatDialog } from '@angular/material/dialog';
 import { AnnotationService } from '../../../services/annotationService';
 import { ConfigService } from '../../../services/configService';
@@ -20,16 +17,17 @@ import { copy } from '../../../common/object/object';
 import { ComponentAnnotationsComponent } from '../../../directives/componentAnnotations/component-annotations.component';
 import { ComponentHeaderComponent } from '../../../directives/component-header/component-header.component';
 import { ComponentSaveSubmitButtonsComponent } from '../../../directives/component-save-submit-buttons/component-save-submit-buttons.component';
+import { MultipleChoiceRadioStudentComponent } from '../multiple-choice-radio-student/multiple-choice-radio-student.component';
+import { MultipleChoiceCheckboxStudentComponent } from '../multiple-choice-checkbox-student/multiple-choice-checkbox-student.component';
 
 @Component({
   imports: [
     CommonModule,
     ComponentAnnotationsComponent,
     ComponentHeaderComponent,
     ComponentSaveSubmitButtonsComponent,
-    FormsModule,
-    MatCheckboxModule,
-    MatRadioModule
+    MultipleChoiceRadioStudentComponent,
+    MultipleChoiceCheckboxStudentComponent
   ],
   selector: 'multiple-choice-student',
   standalone: true,
@@ -150,13 +148,13 @@ export class MultipleChoiceStudent extends ComponentStudent {
     }
   }
 
-  setIsCheckedOnStudentChoices(studentChoices: string[]): void {
+  private setIsCheckedOnStudentChoices(studentChoices: string[]): void {
     for (const choice of this.choices) {
       choice.isChecked = studentChoices.includes(choice.id);
     }
   }
 
-  showFeedbackForChoiceIds(choiceIds: string[]): void {
+  private showFeedbackForChoiceIds(choiceIds: string[]): void {
     for (const choice of this.choices) {
       if (choiceIds.includes(choice.id)) {
         choice.showFeedback = true;
@@ -165,23 +163,15 @@ export class MultipleChoiceStudent extends ComponentStudent {
     }
   }
 
-  isChecked(choiceId: string): boolean {
+  private isChecked(choiceId: string): boolean {
     const studentChoices = this.studentChoices;
-    if (studentChoices != null) {
-      if (this.component.isRadio()) {
-        if (choiceId === studentChoices) {
-          return true;
-        }
-      } else if (this.component.isCheckbox()) {
-        if (studentChoices.indexOf(choiceId) != -1) {
-          return true;
-        }
-      }
-    }
-    return false;
+    if (studentChoices == null) return false;
+    return this.component.isRadio()
+      ? studentChoices === choiceId
+      : (studentChoices as string[]).indexOf(choiceId) != -1;
   }
 
-  getChoiceIdsFromStudentData(studentData: any): string[] {
+  private getChoiceIdsFromStudentData(studentData: any): string[] {
     const choiceIds = [];
     if (studentData != null && studentData.studentChoices != null) {
       const studentChoices = studentData.studentChoices;

diff --git a/src/messages.xlf b/src/messages.xlf
@@ -19631,7 +19631,7 @@ Warning: This will delete all existing choices and buckets in this component.</s
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/components/multipleChoice/multiple-choice-student/multiple-choice-student.component.html</context>
-          <context context-type="linenumber">70</context>
+          <context context-type="linenumber">39</context>
         </context-group>
       </trans-unit>
       <trans-unit id="8b42d54000704393a3c06e5f8b668880014f6986" datatype="html">
@@ -19646,7 +19646,7 @@ Warning: This will delete all existing choices and buckets in this component.</s
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/components/multipleChoice/multiple-choice-student/multiple-choice-student.component.html</context>
-          <context context-type="linenumber">72</context>
+          <context context-type="linenumber">41</context>
         </context-group>
       </trans-unit>
       <trans-unit id="0f72a164f5a5d10d1fbdeeb84ac80a63c04b7e1b" datatype="html">
@@ -19842,7 +19842,7 @@ Warning: This will delete all existing choices in this component.</source>
         <source> You have used <x id="INTERPOLATION" equiv-text="{{ submitCounter }}"/> of <x id="INTERPOLATION_1" equiv-text="{{ componentContent.maxSubmitCount }}"/> <x id="INTERPOLATION_2" equiv-text="{{ componentContent.maxSubmitCount === 1 ? &apos;attempt&apos; : &apos;attempts&apos; }}"/> </source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/components/multipleChoice/multiple-choice-student/multiple-choice-student.component.html</context>
-          <context context-type="linenumber">56,59</context>
+          <context context-type="linenumber">25,28</context>
         </context-group>
       </trans-unit>
       <trans-unit id="7864549548500976713" datatype="html">