small changes

package.json

@@ -20,7 +20,10 @@
     "@angular/platform-browser": "~11.0.0",
     "@angular/platform-browser-dynamic": "~11.0.0",
     "@angular/router": "~11.0.0",
+    "@fortawesome/angular-fontawesome": "^0.8.0",
     "@fortawesome/fontawesome-free": "^5.15.1",
+    "@fortawesome/fontawesome-svg-core": "^1.2.32",
+    "@fortawesome/free-solid-svg-icons": "^5.15.1",
     "bootstrap": "^4.5.3",
     "express": "^4.17.1",
     "font-awesome": "^4.7.0",

src/app/app.module.ts

@@ -19,6 +19,7 @@ import { QuizComponent } from './quiz/quiz.component';
 import {QuestionService} from '../services/question-service';
 import { MultipleChoiceQuestionComponent } from './multiple-choice-question/multiple-choice-question.component';
 import { TrueFalseQuestionComponent } from './true-false-question/true-false-question.component';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import {CommonModule} from '@angular/common';
 
 @NgModule({
@@ -39,6 +40,7 @@ import {CommonModule} from '@angular/common';
     BrowserModule,
     AppRoutingModule,
     FormsModule,
+    FontAwesomeModule
   ],
   providers: [
     CourseService,

src/app/multiple-choice-question/multiple-choice-question.component.html

@@ -5,7 +5,7 @@ <h4>{{question.question}}</h4>
       type="radio"
       name="{{question._id}}"
       value="{{choice}}"
-    [(ngModel)]="answer">
+    [(ngModel)]="answer"/>
   {{choice}}
 </div>
 
@@ -15,14 +15,18 @@ <h4>{{question.question}}</h4>
       name="{{question._id}}"
       value="{{choice}}"
       [disabled]=true
-    [ngClass]="{'checked': question}">
+    [ngClass]="{'checked': question}"/>
   <span [ngClass]="{'wbdv-color-red': (choice !== question.correct && answer !== question.correct),
   'wbdv-color-green': ((answer === question.correct) && answer === choice),
-'wbdv-color-dark-red': answer === choice}">{{choice}}</span>
+'wbdv-color-dark-red': answer === choice}"> {{choice}}</span>
 </div>
 <br/>
 <div [hidden]="grading===false">
-  Your answer: <span [ngClass]="{'wbdv-color-dark-red': answer !== question.correct, 'wbdv-color-green': answer === question.correct }">{{answer}} </span><br/>
+  Your answer: <span [hidden]="answer.length > 0"> N/A </span>
+  <span [ngClass]="{'wbdv-color-dark-red': answer !== question.correct, 'wbdv-color-green': answer === question.correct }">
+    {{answer}}
+  </span>
+  <br/>
 <div [hidden]="answer === question.correct">
   Correct Answer: <span class="wbdv-color-dark-green" > {{question.correct}}</span>
 </div>

src/app/true-false-question/true-false-question.component.html

@@ -20,24 +20,28 @@ <h4>{{question.question}}</h4>
            [(ngModel)]="answer"
            [disabled]=true
     />
-  <span [ngClass]="{'wbdv-color-green': answer == question.correct && answer == 'true',
-  'wbdv-color-dark-red': answer !== question.correct && answer == 'true'}"> true</span>
+  <span [ngClass]="{'wbdv-color-green': answer == question.correct && question.correct == 'true',
+  'wbdv-color-dark-red': answer.length > 0 && answer !== question.correct && question.correct !== 'true'}">
+    true
+  </span>
   <br/>
     <input type="radio"
            name="{{question._id}}"
            value="false"
            [(ngModel)]="answer"
            [disabled]=true
     />
-  <span [ngClass]="{'wbdv-color-green': answer == question.correct && answer == 'false',
-  'wbdv-color-dark-red': answer !== question.correct && answer == 'false'}"> false</span>
+  <span [ngClass]="{'wbdv-color-green': answer == question.correct && question.correct == 'false',
+  'wbdv-color-dark-red': answer.length > 0 && answer !== question.correct && question.correct !== 'false'}">
+    false
+  </span>
 </div>
 <!--<div [hidden]="answer < 1">-->
 <!--  Selected: {{answer}}-->
 <!--</div>-->
 
 <div [hidden]="grading === false">
-  Your answer:
+  Your answer: <span [hidden]="answer.length > 0"> N/A </span>
   <span [ngClass]="{'wbdv-color-green': answer == question.correct,
   'wbdv-color-dark-red': answer !== question.correct }"> {{answer}} </span>
   <br/>

src/app/true-false-question/true-false-question.component.ts

@@ -1,5 +1,5 @@
 import {Component, Input, OnInit} from '@angular/core';
-// import {faCheck, faTimes} from '@fortawesome/free-solid-svg-icons';
+import {faCheck, faTimes} from '@fortawesome/free-solid-svg-icons';
 
 
 @Component({
@@ -16,8 +16,9 @@ export class TrueFalseQuestionComponent implements OnInit {
   question = {_id: '', title: '', question: '', answer: '', correct: ''};
   grading = false;
   answer = '';
+  faCheck = faCheck;
+  faTimes = faTimes;
   grade = (b: boolean) => this.grading = b;
-  // faCheck = faCheck; faTimes = faTimes
 
 
   ngOnInit(): void {

src/index.html

@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
-  <title>Cs4550F20ClientAngularAaban</title>
+  <title>WhiteBoard</title>
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">