added quiz components

package.json

@@ -23,7 +23,9 @@
     "@angular/platform-browser": "~11.0.0",
     "@angular/platform-browser-dynamic": "~11.0.0",
     "@angular/router": "~11.0.0",
+    "@fortawesome/fontawesome-free": "^5.15.1",
     "bootstrap": "^4.5.3",
+    "font-awesome": "^4.7.0",
     "rxjs": "~6.6.0",
     "tslib": "^2.0.0",
     "zone.js": "~0.10.2"

src/app/app-routing.module.ts

@@ -1,6 +1,8 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 import {CourseViewerComponent} from './course-viewer/course-viewer.component';
+import {QuizzesListComponent} from './quizzes-list/quizzes-list.component';
+import {QuizComponent} from './quiz/quiz.component';
 
 
 const routes: Routes = [
@@ -9,6 +11,9 @@ const routes: Routes = [
   {path: 'courses/:courseId/modules/:moduleId/lessons', component: CourseViewerComponent},
   {path: 'courses/:courseId/modules/:moduleId/lessons/:lessonId/topics', component: CourseViewerComponent},
   {path: 'courses/:courseId/modules/:moduleId/lessons/:lessonId/topics/:topicId/widgets', component: CourseViewerComponent},
+  {path: 'courses/:courseId/quizzes', component: QuizzesListComponent},
+  { path: 'courses/:courseId/quizzes/:quizId', component: QuizComponent },
+
 ];
 
 @NgModule({

src/app/app.module.ts

@@ -13,6 +13,12 @@ import { LessonTabsComponent } from './lesson-tabs/lesson-tabs.component';
 import { TopicPilssComponent } from './topic-pills/topic-pilss.component';
 import { WidgetListComponent } from './widget-list/widget-list.component';
 import {LessonService} from '../services/lesson-service';
+import { QuizzesListComponent } from './quizzes-list/quizzes-list.component';
+import {QuizzesService} from '../services/quizzes-service';
+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';
 
 @NgModule({
   declarations: [
@@ -22,7 +28,11 @@ import {LessonService} from '../services/lesson-service';
     ModuleListComponent,
     LessonTabsComponent,
     TopicPilssComponent,
-    WidgetListComponent
+    WidgetListComponent,
+    QuizzesListComponent,
+    QuizComponent,
+    MultipleChoiceQuestionComponent,
+    TrueFalseQuestionComponent,
   ],
   imports: [
     BrowserModule,
@@ -32,7 +42,9 @@ import {LessonService} from '../services/lesson-service';
   providers: [
     CourseService,
     ModuleService,
-    LessonService
+    LessonService,
+    QuizzesService,
+    QuestionService,
   ],
   bootstrap: [AppComponent]
 })

src/app/course-viewer/course-viewer.component.html

@@ -6,9 +6,14 @@ <h1>Course Viewer</h1>
       <li class="list-group-item active">Courses</li>
       <li [ngClass]="{'list-group-item-success': course._id === this.courseId}"
         class="list-group-item" *ngFor="let course of courses">
+        <span>
         <a routerLink="/courses/{{course._id}}/modules">
-          <div>{{course.title}}</div>
+          {{course.title}}
         </a>
+        <a class="float-right" routerLink="/courses/{{course._id}}/quizzes">
+          Quizzes
+        </a>
+          </span>
       </li>
     </ul>
   </div>

src/app/course-viewer/course-viewer.component.ts

@@ -25,5 +25,5 @@ export class CourseViewerComponent implements OnInit {
 
     this.service.findAllCourses()
       .then(courses => this.courses = courses);
-}
+  }
 }

src/app/module-list/module-list.component.html

@@ -1,3 +1,4 @@
+
 <ul class="list-group">
   <li [hidden]="courseId === undefined" class="list-group-item list-group-item-dark">Modules</li>
   <li class="list-group-item" [ngClass]="{'list-group-item-success': module._id === this.moduleId}" *ngFor="let module of modules">

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

@@ -0,0 +1,3 @@
+
+<p>multiple-choice-question works!</p>
+

src/app/multiple-choice-question/multiple-choice-question.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MultipleChoiceQuestionComponent } from './multiple-choice-question.component';
+
+describe('MultipleChoiceQuestionComponent', () => {
+  let component: MultipleChoiceQuestionComponent;
+  let fixture: ComponentFixture<MultipleChoiceQuestionComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ MultipleChoiceQuestionComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MultipleChoiceQuestionComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,25 @@
+import {Component, Input, OnInit} from '@angular/core';
+// import {faCheck, faTimes} from '@fortawesome/free-solid-svg-icons';
+
+
+@Component({
+  selector: 'app-multiple-choice-question',
+  templateUrl: './multiple-choice-question.component.html',
+  styleUrls: ['./multiple-choice-question.component.css']
+})
+export class MultipleChoiceQuestionComponent implements OnInit {
+
+  @Input()
+  question = {_id: '', title: '', question: '', choices: [], correct: '', answer: '' };
+  grading = false;
+  // faCheck = faCheck; faTimes = faTimes;
+
+  grade = () => { this.grading = true; };
+
+  constructor() { }
+
+  ngOnInit(): void {
+
+  }
+
+}

src/app/quiz/quiz.component.html

@@ -0,0 +1,13 @@
+<p>quiz works!</p>
+<ul class="list-group">
+  <li *ngFor="let question of questions" class="list-group-item">
+    <div [ngSwitch]="question.type">
+      <app-multiple-choice-question
+        [question]="question"
+        *ngSwitchCase="'MULTIPLE_CHOICE'"></app-multiple-choice-question>
+      <app-true-false-question
+        [question]="question"
+        *ngSwitchCase="'TRUE_FALSE'"></app-true-false-question>
+    </div>
+  </li>
+</ul>

src/app/quiz/quiz.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { QuizComponent } from './quiz.component';
+
+describe('QuizComponent', () => {
+  let component: QuizComponent;
+  let fixture: ComponentFixture<QuizComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ QuizComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(QuizComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/quiz/quiz.component.ts

@@ -0,0 +1,27 @@
+import { Component, OnInit } from '@angular/core';
+import {ActivatedRoute} from '@angular/router';
+import {QuestionService} from '../../services/question-service';
+
+@Component({
+  selector: 'app-quiz',
+  templateUrl: './quiz.component.html',
+  styleUrls: ['./quiz.component.css']
+})
+export class QuizComponent implements OnInit {
+  questions = [];
+  quizId = '';
+  constructor(private svc: QuestionService,
+              private route: ActivatedRoute
+  ) { }
+
+  ngOnInit(): void {
+    this.route.params.subscribe(ps => {
+      console.log('ps', ps);
+      this.quizId = ps.quizId;
+      this.svc.findQuestionsForQuiz(this.quizId)
+      .then(qs => this.questions = qs);
+    });
+
+  }
+
+}

src/app/quizzes-list/quizzes-list.component.html

@@ -0,0 +1,13 @@
+
+<h2>Quizzes</h2>
+<ul class="list-group">
+  <li *ngFor="let quiz of quizzes" class="list-group-item">
+    <a routerLink="/courses/{{courseId}}/quizzes/{{quiz._id}}">
+      {{quiz.title}}
+    </a>
+    <a class="btn btn-primary float-right"
+       routerLink="/courses/{{courseId}}/quizzes/{{quiz._id}}">
+      Start
+    </a>
+  </li>
+</ul>

src/app/quizzes-list/quizzes-list.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { QuizzesListComponent } from './quizzes-list.component';
+
+describe('QuizzesListComponent', () => {
+  let component: QuizzesListComponent;
+  let fixture: ComponentFixture<QuizzesListComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ QuizzesListComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(QuizzesListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/quizzes-list/quizzes-list.component.ts

@@ -0,0 +1,28 @@
+import { Component, OnInit } from '@angular/core';
+import {ActivatedRoute} from '@angular/router';
+import {QuizzesService} from '../../services/quizzes-service';
+
+@Component({
+  selector: 'app-quizzes-list',
+  templateUrl: './quizzes-list.component.html',
+  styleUrls: ['./quizzes-list.component.css']
+})
+export class QuizzesListComponent implements OnInit {
+
+  constructor(private service: QuizzesService,
+              private route: ActivatedRoute) { }
+
+  courseId = '';
+  quizzes = [];
+
+  ngOnInit(): void {
+    this.route.params.subscribe(params => {
+      console.log('quizParams', params);
+      this.courseId = params.courseId;
+      this.service.findAllQuizzes()
+      .then(quizzes => this.quizzes = quizzes);
+    });
+
+  }
+
+}

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

@@ -0,0 +1 @@
+<p>true-false-question works!</p>

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

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TrueFalseQuestionComponent } from './true-false-question.component';
+
+describe('TrueFalseQuestionComponent', () => {
+  let component: TrueFalseQuestionComponent;
+  let fixture: ComponentFixture<TrueFalseQuestionComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ TrueFalseQuestionComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TrueFalseQuestionComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-true-false-question',
+  templateUrl: './true-false-question.component.html',
+  styleUrls: ['./true-false-question.component.css']
+})
+export class TrueFalseQuestionComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/services/question-service.ts

@@ -0,0 +1,9 @@
+import {Injectable} from '@angular/core';
+
+@Injectable()
+export class QuestionService {
+  findQuestionsForQuiz = (qid: any) =>
+    fetch(`http://localhost:3008/api/quizzes/${qid}/questions`)
+    .then(response => response.json())
+}
+

src/services/quizzes-service.ts

@@ -0,0 +1,15 @@
+import {Injectable} from '@angular/core';
+
+@Injectable()
+export class QuizzesService {
+  findAllQuizzes = () =>
+    fetch('http://localhost:3008/api/quizzes')
+    .then(response => response.json())
+  findQuizForCourse = (qid: any) =>
+    fetch(`http://localhost:3008/api/quizzes/${qid}`)
+    .then(response => response.json())
+  findQuestionsForQuiz = (qid: any) =>
+    fetch(`http://localhost:3008/api/quizzes/${qid}/questions`)
+    .then(response => response.json())
+}
+