Add error/success message customization

hobbyfarm · Apr 10, 2024 · 49b6f3c · 49b6f3c
1 parent 7fda2a5
commit 49b6f3c
Show file tree

Hide file tree

Showing 9 changed files with 30 additions and 6 deletions.
diff --git a/src/app/quiz/QuestionParams.ts b/src/app/quiz/QuestionParams.ts
@@ -3,6 +3,6 @@ export interface QuestionParams {
   helperText: string;
   questionType: string;
   validation: string;
-  successMsg?: string;
-  errorMsg?: string;
+  successMsg: string;
+  errorMsg: string;
 }
diff --git a/src/app/quiz/quiz-body.component.html b/src/app/quiz/quiz-body.component.html
@@ -7,7 +7,7 @@
     *ngIf="validationEnabled && isSubmitted && !isValid"
   >
     <clr-alert-item>
-      <span class="alert-text"> Incorrect Answer! </span>
+      <span class="alert-text">{{ errMsg }}</span>
     </clr-alert-item>
   </clr-alert>
   <clr-alert
@@ -17,7 +17,7 @@
     *ngIf="validationEnabled && isSubmitted && isValid"
   >
     <clr-alert-item>
-      <span class="alert-text"> Correct Answer! </span>
+      <span class="alert-text">{{ successMsg }}</span>
     </clr-alert-item>
   </clr-alert>
 </ng-container>
diff --git a/src/app/quiz/quiz-body.component.ts b/src/app/quiz/quiz-body.component.ts
@@ -15,4 +15,8 @@ export class QuizBodyComponent {
   public isSubmitted: boolean;
   @Input()
   public validationEnabled: boolean;
+  @Input()
+  public errMsg: string = 'Incorrect Answer!';
+  @Input()
+  public successMsg: string = 'Correct Answer!';
 }
diff --git a/src/app/quiz/quiz-checkbox.component.html b/src/app/quiz/quiz-checkbox.component.html
@@ -14,5 +14,7 @@
     [isValid]="validSubmission"
     [isSubmitted]="isSubmitted"
     [validationEnabled]="validationEnabled"
+    [errMsg]="errMsg"
+    [successMsg]="successMsg"
   ></quiz-body>
 </form>
diff --git a/src/app/quiz/quiz-checkbox.component.ts b/src/app/quiz/quiz-checkbox.component.ts
@@ -24,6 +24,10 @@ export class QuizCheckboxComponent implements OnInit {
   public title: string;
   @Input()
   public validation: string;
+  @Input()
+  public errMsg: string;
+  @Input()
+  public successMsg: string;
 
   @ViewChild(ClrForm, { static: true })
   clrForm: ClrForm;

diff --git a/src/app/quiz/quiz-radio.component.html b/src/app/quiz/quiz-radio.component.html
@@ -17,5 +17,7 @@
     [isValid]="validSubmission"
     [isSubmitted]="isSubmitted"
     [validationEnabled]="validationEnabled"
+    [errMsg]="errMsg"
+    [successMsg]="successMsg"
   ></quiz-body>
 </form>
diff --git a/src/app/quiz/quiz-radio.component.ts b/src/app/quiz/quiz-radio.component.ts
@@ -24,6 +24,10 @@ export class QuizRadioComponent implements OnInit {
   public title: string;
   @Input()
   public validation: string;
+  @Input()
+  public errMsg: string;
+  @Input()
+  public successMsg: string;
 
   @ViewChild(ClrForm, { static: true })
   clrForm: ClrForm;

diff --git a/src/app/quiz/quiz.component.html b/src/app/quiz/quiz.component.html
@@ -6,12 +6,16 @@ <h5 class="quiz-title">{{ quizTitle }}</h5>
             [helperText]="questionParams[i].helperText"
             [title]="questionParams[i].questionTitle"
             [validation]="questionParams[i].validation"
+            [errMsg]="questionParams[i].errorMsg"
+            [successMsg]="questionParams[i].successMsg"
         ></quiz-checkbox>
         <quiz-radio #quizRadio *ngIf="getQuestionType(question, questionParams[i].questionType) === 'radio'"
             [options]="getOptions(question)"
             [helperText]="questionParams[i].helperText"
             [title]="questionParams[i].questionTitle"
             [validation]="questionParams[i].validation"
+            [errMsg]="questionParams[i].errorMsg"
+            [successMsg]="questionParams[i].successMsg"
         ></quiz-radio>
     </ng-container>
     <button

diff --git a/src/app/quiz/quiz.component.ts b/src/app/quiz/quiz.component.ts
@@ -68,8 +68,8 @@ export class QuizComponent implements OnInit {
     let helperText: string;
     let questionType: string;
     let validation: string;
-    let successMsg: string | undefined;
-    let errorMsg: string | undefined;
+    let successMsg: string;
+    let errorMsg: string;
     if (/-\$1-:\s/.test(question)) {
       questionTitle =
         question
@@ -112,13 +112,17 @@ export class QuizComponent implements OnInit {
           .split('-$5-: ')
           .pop()
           ?.split(/(\n-\$\d-:\s)|(\n-\s)/)[0] ?? '';
+    } else {
+      successMsg = "Correct Answer!"
     }
     if (/-\$6-:\s/.test(question)) {
       errorMsg =
         question
           .split('-$6-: ')
           .pop()
           ?.split(/(\n-\$\d-:\s)|(\n-\s)/)[0] ?? '';
+    } else {
+      errorMsg = "Incorrect Answer!"
     }
 
     return {