#33/#9

src/app/homepage/exercise-view-widget/exercise-view-widget.component.html

@@ -6,14 +6,14 @@ <h4>{{exerciseData?.description | limitString}}</h4>
         <div class="bottom-pane">
             @if (exerciseData?.difficulty) {
                 <div class="flex-row difficulty">
-                    <div *ngIf="exerciseData!.difficulty=='easy'" class="flex-row">
+                    <div *ngIf="exerciseData!.difficulty==DifficultyType.easy" class="flex-row">
                         <mat-icon>stars</mat-icon>
                     </div>
-                    <div *ngIf="exerciseData!.difficulty=='intermediate'" class="flex-row">
+                    <div *ngIf="exerciseData!.difficulty==DifficultyType.intermediate" class="flex-row">
                         <mat-icon>stars</mat-icon>
                         <mat-icon>stars</mat-icon>
                     </div>
-                    <div *ngIf="exerciseData!.difficulty=='hard'" class="flex-row">
+                    <div *ngIf="exerciseData!.difficulty==DifficultyType.hard" class="flex-row">
                         <mat-icon>stars</mat-icon>
                         <mat-icon>stars</mat-icon>
                         <mat-icon>stars</mat-icon>

src/app/homepage/exercise-view-widget/exercise-view-widget.component.ts

@@ -2,7 +2,7 @@ import { Component, Input, OnInit } from '@angular/core';
 import { NgIf } from '@angular/common';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
-import { DebuggingExercise } from '../../services/debugging-exercise.model';
+import { DebuggingExercise, Difficulty } from '../../services/debugging-exercise.model';
 import { Router } from '@angular/router';
 import { LimitStringPipe  } from '../../pipes/limit-string.pipe';
 
@@ -17,6 +17,8 @@ export class ExerciseViewWidgetComponent {
 
   @Input() exerciseData: DebuggingExercise | null = null;
 
+  DifficultyType = Difficulty; //To allow reference to enum types in interpolation
+
   constructor(private router: Router) { };
 
   loadExercise() {

src/app/primm-debug-view/primm-debug-view.component.html

@@ -189,7 +189,12 @@ <h4>What would you like to do next?</h4>
                             <mat-icon>edit</mat-icon>
                             <h2>Modify</h2>
                         </div>
-                        <h4>Now change the program so that it does something different. Write down what you've changed.</h4>
+                        @if (exercise.modifyText) {
+                            <h4>{{exercise.modifyText}} Write down what you've changed.</h4>
+                        }
+                        @else {
+                            <h4>Now change the program so that it does something different. Write down what you've changed.</h4>
+                        }
                     </div>
                 }
 

src/app/primm-debug-view/primm-debug-view.component.ts

@@ -29,12 +29,11 @@ import { HintDisplayComponent } from "./hint-display/hint-display.component";
 
 import dedent from 'dedent';
 import { environment } from '../../environments/environment.development';
-import { StudentIdDialogComponent } from '../student-id-dialog/student-id-dialog.component';
 
 @Component({
   selector: 'app-primm-debug-view',
   standalone: true,
-  imports: [NgIf, NgxConfettiExplosionComponent, MatButtonModule, MatInputModule, MatFormFieldModule, MatIconModule, FormsModule, MatRadioModule, MatToolbarModule, MatDividerModule, MatSelectModule, CodeEditorComponent, TestCaseDisplayComponent, HintDisplayComponent],
+  imports: [NgxConfettiExplosionComponent, MatButtonModule, MatInputModule, MatFormFieldModule, MatIconModule, FormsModule, MatRadioModule, MatToolbarModule, MatDividerModule, MatSelectModule, CodeEditorComponent, TestCaseDisplayComponent, HintDisplayComponent],
   templateUrl: './primm-debug-view.component.html',
   styleUrl: './primm-debug-view.component.sass',
   animations: [

src/app/services/debugging-exercise.model.ts

@@ -7,10 +7,17 @@ export interface DebuggingExercise {
     program: string,
     testCases?: TestCase[],
     multipleChoiceOptions?: Map<DebuggingStage,string[]>,
-    difficulty?: string, //This should be an enum
+    difficulty?: Difficulty, //This should be an enum
     language?: string,
     lineContainingError?: number,
-    hints?: Map<DebuggingStage, string[]>
+    hints?: Map<DebuggingStage, string[]>,
+    modifyText?: string
+}
+
+export enum Difficulty {
+    easy = "easy",
+    intermediate = "intermediate",
+    hard = "hard"
 }
 
 export interface TestCase {

src/app/services/firestore.service.ts

@@ -3,7 +3,7 @@ import { Firestore, collection, collectionData, doc, getDoc, where} from '@angul
 import { Observable } from 'rxjs';
 import dedent from 'dedent';
 
-import { DebuggingExercise, TestCase } from './debugging-exercise.model';
+import { DebuggingExercise, Difficulty, TestCase } from './debugging-exercise.model';
 import { DebuggingStage } from '../types/types';
 import { CollectionReference, DocumentReference, DocumentSnapshot, orderBy, query, updateDoc } from 'firebase/firestore';
 import { WhitespacePreserverPipe } from '../pipes/whitespace-preserver.pipe';
@@ -88,16 +88,16 @@ export class FirestoreService {
     return multipleChoiceOptions.size > 0 ? multipleChoiceOptions : null; 
   }
 
-  parseDifficulty(exercise: any): string | null {
+  parseDifficulty(exercise: any): Difficulty | null {
     if (exercise["difficulty"]) {
       const difficulty: number = exercise["difficulty"];
       switch (difficulty) {
         case 1:
-          return "easy";
+          return Difficulty.easy;
         case 2:
-          return "intermediate";
+          return Difficulty.intermediate;
         case 3:
-          return "hard";
+          return Difficulty.hard;
       }
     }
     return null;
@@ -165,6 +165,10 @@ export class FirestoreService {
     }
     return null;
   }
+
+  parseModifyText(exercise: any): string | null {
+    return exercise["modify_text"] ? exercise["modify_text"] : null;
+  }
 
   /**
    * Checks whether debugging exercises contain the necessary information required for a valid debugging exercise.
@@ -178,11 +182,12 @@ export class FirestoreService {
   parseDebuggingExercise(unparsedExercise: any): DebuggingExercise | null {
     if (this.exerciseContainsNecessaryData(unparsedExercise)) {
       const multiChoiceOptions: Map<DebuggingStage, string[]> | null = this.parseMultipleChoiceOptions(unparsedExercise);
-      const difficulty: string | null = this.parseDifficulty(unparsedExercise);
+      const difficulty: Difficulty | null = this.parseDifficulty(unparsedExercise);
       const testCases: TestCase[] | null = this.parseTestCases(unparsedExercise);
       const language: string | null = this.parseLanguage(unparsedExercise);
       const lineContainingError: number | null = this.parseLineContainingError(unparsedExercise);
       const hints: Map<DebuggingStage, string[]> | null = this.parseHints(unparsedExercise);
+      const modifyText: string | null = this.parseModifyText(unparsedExercise);
       const parsedExercise: DebuggingExercise = {
         id: unparsedExercise["id"],
         title: unparsedExercise["title"],
@@ -207,6 +212,10 @@ export class FirestoreService {
       if (hints) {
         parsedExercise.hints = hints;
       }
+      if (modifyText) {
+        console.log(modifyText);
+        parsedExercise.modifyText = modifyText;
+      }
       return parsedExercise;
     }
     return null;