PUNKT-20 Czas na odpowiedź w teście

FrontEnd/src/app/tests/test-details/question-view/gaps/gaps.component.html

@@ -1,6 +1,6 @@
 <form #f="ngForm" (ngSubmit)="nextQuestion(f)" novalidate>
   <div class="alert alert-grey question">
-    {{question.question}} ({{question.points}}pkt.)
+    {{question.question}} ({{question.points}}pkt.) <span *ngIf="timeLeft > 0">Czas: {{ timeLeft }} </span>
     <div class="answers">
       <div *ngFor="let item of question.answers">
         <span *ngIf="!item.is_gap">{{item.content}}</span>

FrontEnd/src/app/tests/test-details/question-view/gaps/gaps.component.ts

@@ -1,8 +1,9 @@
-import { Component, OnInit, Input, Output, EventEmitter, OnDestroy } from '@angular/core';
+import { Component, OnInit, Input, Output, EventEmitter, OnDestroy, ViewChild } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { TestsService } from '../../../tests.service';
 import * as $ from 'jquery';
 import { ISubscription } from 'rxjs/Subscription';
+import { NgForm } from '@angular/forms';
 
 @Component({
   selector: 'app-gaps',
@@ -15,6 +16,9 @@ export class GapsComponent implements OnInit, OnDestroy {
   @Output() emitNextQuestionRequest = new EventEmitter();
   private id;
   private verifyAnswerSubscription: ISubscription;
+  interval: any;
+  public timeLeft = 0;
+  @ViewChild('f') public form: NgForm;
 
   constructor(private route: ActivatedRoute, private testsService: TestsService) { }
 
@@ -34,10 +38,24 @@ export class GapsComponent implements OnInit, OnDestroy {
     });
   }
 
+  startTimer() {
+    this.interval = setInterval(() => {
+      if (this.timeLeft > 0) {
+        this.timeLeft--;
+      } else {
+        this.nextQuestion(this.form);
+      }
+    }, 1000);
+  }
+
   ngOnInit() {
+    if (this.timeLeft > 0) {
+      this.startTimer();
+    }
   }
 
   ngOnDestroy() {
+    clearInterval(this.interval);
     if (this.verifyAnswerSubscription) {
       this.verifyAnswerSubscription.unsubscribe();
     }

FrontEnd/src/app/tests/test-details/question-view/multiple-choice/multiple-choice.component.html

@@ -1,6 +1,6 @@
 <form #f="ngForm" (ngSubmit)="nextQuestion(f)" novalidate>
   <div class="alert alert-grey question">
-    {{question.question}} ({{question.points}}pkt.)
+    {{question.question}} ({{question.points}}pkt.) <span *ngIf="timeLeft > 0">Czas: {{ timeLeft }} </span>
     <div class="answers">
       <div *ngFor="let item of question.answers">
         <input type="checkbox" [name]="item.id" [value]="item" ngModel />  {{item.content}}

FrontEnd/src/app/tests/test-details/question-view/multiple-choice/multiple-choice.component.ts

@@ -1,8 +1,9 @@
-import { Component, OnInit, Input, Output, EventEmitter, OnDestroy } from '@angular/core';
+import { Component, OnInit, Input, Output, EventEmitter, OnDestroy, ViewChild } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { TestsService } from '../../../tests.service';
 import * as $ from 'jquery';
 import { ISubscription } from 'rxjs/Subscription';
+import { NgForm } from '@angular/forms';
 
 @Component({
   selector: 'app-multiple-choice',
@@ -15,6 +16,9 @@ export class MultipleChoiceComponent implements OnInit, OnDestroy{
   @Output() emitNextQuestionRequest = new EventEmitter();
   private id;
   private verifyAnswerSubscription: ISubscription;
+  interval: any;
+  public timeLeft = 0;
+  @ViewChild('f') public form: NgForm;
 
   constructor(private route: ActivatedRoute, private testsService: TestsService) { }
 
@@ -31,10 +35,24 @@ export class MultipleChoiceComponent implements OnInit, OnDestroy{
     });
   }
 
+  startTimer() {
+    this.interval = setInterval(() => {
+      if (this.timeLeft > 0) {
+        this.timeLeft--;
+      } else {
+        this.nextQuestion(this.form);
+      }
+    }, 1000);
+  }
+
   ngOnInit() {
+    if (this.timeLeft > 0) {
+      this.startTimer();
+    }
   }
 
   ngOnDestroy() {
+    clearInterval(this.interval);
     if (this.verifyAnswerSubscription) {
       this.verifyAnswerSubscription.unsubscribe();
     }

FrontEnd/src/app/tests/test-details/question-view/pairs/pairs.component.html

@@ -1,5 +1,5 @@
 <div>
-  {{question.question}} ({{question.points}}pkt.)
+  {{question.question}} ({{question.points}}pkt.) <span *ngIf="timeLeft > 0">Czas: {{ timeLeft }} </span>
   <h3>Dostępne lewe strony:</h3>
   <div class="puzzles-container">
     <div class='puzzle' *ngFor="let item of leftSides; let i = index" (click)="leftSideClick(item,i)" [ngClass]="{'active': (selectedLeftSide.leftSideText === item && selectedLeftSide.indexOfLeftSide === i && selectedLeftSide.from === 'leftSides'), 'empty': (item === undefined || item === '')}">

FrontEnd/src/app/tests/test-details/question-view/pairs/pairs.component.ts

@@ -19,6 +19,8 @@ export class PairsComponent implements OnInit, OnChanges, OnDestroy {
   rightSides = [];
   leftSidesToSend = [];
   selectedLeftSide = { indexOfLeftSide: Number, leftSideText: String, from: '' };
+  interval: any;
+  public timeLeft = 0;
 
   constructor(private route: ActivatedRoute, private testsService: TestsService) { }
 
@@ -41,6 +43,16 @@ export class PairsComponent implements OnInit, OnChanges, OnDestroy {
     });
   }
 
+  startTimer() {
+    this.interval = setInterval(() => {
+      if (this.timeLeft > 0) {
+        this.timeLeft--;
+      } else {
+        this.nextQuestion();
+      }
+    }, 1000);
+  }
+
   leftSideClick(item, i) {
     if (item !== '' && item !== undefined) {
       if (this.selectedLeftSide.from === 'leftSides') {
@@ -81,6 +93,9 @@ export class PairsComponent implements OnInit, OnChanges, OnDestroy {
 
   ngOnInit() {
     this.prepareLists();
+    if (this.timeLeft > 0) {
+      this.startTimer();
+    }
   }
 
   ngOnChanges() {
@@ -88,6 +103,7 @@ export class PairsComponent implements OnInit, OnChanges, OnDestroy {
   }
 
   ngOnDestroy() {
+    clearInterval(this.interval);
     if (this.verifyAnswerSubscription) {
       this.verifyAnswerSubscription.unsubscribe();
     }

FrontEnd/src/app/tests/test-details/question-view/puzzle/puzzle.component.html

@@ -1,5 +1,5 @@
 <div>
-   {{question.question}} ({{question.points}}pkt.)
+   {{question.question}} ({{question.points}}pkt.) <span *ngIf="timeLeft > 0">Czas: {{ timeLeft }} </span>
   <h3>Dostępne elementy rozsypanki:</h3>
   <div class="puzzles-container">
     <div class='puzzle' *ngFor="let item of puzzles; let i = index" (click)="puzzleClick(item,i)" [ngClass]="{'active': (selectedPuzzle.puzzleText === item && selectedPuzzle.indexOfPuzzle === i && selectedPuzzle.from === 'puzzles'), 'empty': (item === undefined || item === '')}">

FrontEnd/src/app/tests/test-details/question-view/puzzle/puzzle.component.ts

@@ -18,6 +18,8 @@ export class PuzzleComponent implements OnInit, OnChanges, OnDestroy {
   puzzles = [];
   puzzlesToSend = [];
   private selectedPuzzle = { indexOfPuzzle: Number, puzzleText: String, from: '' };
+  interval: any;
+  public timeLeft = 0;
 
   constructor(private route: ActivatedRoute, private testsService: TestsService) { }
 
@@ -30,6 +32,16 @@ export class PuzzleComponent implements OnInit, OnChanges, OnDestroy {
     });
   }
 
+  startTimer() {
+    this.interval = setInterval(() => {
+      if (this.timeLeft > 0) {
+        this.timeLeft--;
+      } else {
+        this.nextQuestion();
+      }
+    }, 1000);
+  }
+
   puzzleClick(item, i) {
     if (item !== '' && item !== undefined) {
       if (this.selectedPuzzle.from === 'puzzles') {
@@ -68,6 +80,9 @@ export class PuzzleComponent implements OnInit, OnChanges, OnDestroy {
 
   ngOnInit() {
     this.prepareLists();
+    if (this.timeLeft > 0) {
+      this.startTimer();
+    }
   }
 
   ngOnChanges() {
@@ -75,6 +90,7 @@ export class PuzzleComponent implements OnInit, OnChanges, OnDestroy {
   }
 
   ngOnDestroy() {
+    clearInterval(this.interval);
     if (this.verifyAnswerSubscription) {
       this.verifyAnswerSubscription.unsubscribe();
     }

FrontEnd/src/app/tests/test-details/question-view/single-choice/single-choice.component.html

@@ -1,6 +1,6 @@
 <form #f="ngForm" (ngSubmit)="nextQuestion(f)" novalidate>
   <div class="alert alert-grey question">
-    {{question.question}} ({{question.points}}pkt.)
+    {{question.question}} ({{question.points}}pkt.) <span *ngIf="timeLeft > 0">Czas: {{ timeLeft }} </span>
     <div class="answers">
       <div *ngFor="let item of question.answers">
         <input type="radio" name="answer" [value]="item.content" ngModel> {{item.content}}

FrontEnd/src/app/tests/test-details/question-view/single-choice/single-choice.component.ts

@@ -1,8 +1,9 @@
-import { Component, OnInit, Input, Output, EventEmitter, OnDestroy } from '@angular/core';
+import { Component, OnInit, Input, Output, EventEmitter, OnDestroy, ViewChild } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { TestsService } from '../../../tests.service';
 import * as $ from 'jquery';
 import { ISubscription } from 'rxjs/Subscription';
+import { NgForm } from '@angular/forms';
 
 @Component({
   selector: 'app-single-choice',
@@ -16,6 +17,9 @@ export class SingleChoiceComponent implements OnInit, OnDestroy {
   @Output() emitNextQuestionRequest = new EventEmitter();
   private id;
   private verifyAnswerSubscription: ISubscription;
+  interval: any;
+  public timeLeft = 0;
+  @ViewChild('f') public form: NgForm;
 
   constructor(private route: ActivatedRoute, private testsService: TestsService) { }
 
@@ -32,10 +36,24 @@ export class SingleChoiceComponent implements OnInit, OnDestroy {
     });
   }
 
+  startTimer() {
+    this.interval = setInterval(() => {
+      if (this.timeLeft > 0) {
+        this.timeLeft--;
+      } else {
+        this.nextQuestion(this.form);
+      }
+    }, 1000);
+  }
+
   ngOnInit() {
+    if (this.timeLeft > 0) {
+      this.startTimer();
+    }
   }
 
   ngOnDestroy() {
+    clearInterval(this.interval);
     if (this.verifyAnswerSubscription) {
       this.verifyAnswerSubscription.unsubscribe();
     }

FrontEnd/src/app/tests/test-details/question-view/true-false/true-false.component.html

@@ -1,5 +1,5 @@
 <div class="alert alert-grey question">
-  {{question.question}} ({{question.points}}pkt.)
+  {{question.question}} ({{question.points}}pkt.) <span *ngIf="timeLeft > 0">Czas: {{ timeLeft }} </span>
 
   <div class="btn-group btn-group-toggle" data-toggle="buttons">
     <label class="btn btn-study-cave mr-2" (click)="chooseAnswer('Prawda')">

FrontEnd/src/app/tests/test-details/question-view/true-false/true-false.component.ts

@@ -2,7 +2,7 @@ import { Component, OnInit, Input, Output, EventEmitter, OnDestroy } from '@angu
 import { ActivatedRoute } from '@angular/router';
 import { TestsService } from '../../../tests.service';
 import * as $ from 'jquery';
-import { ISubscription } from 'rxjs/Subscription';
+import { ISubscription, Subscription } from 'rxjs/Subscription';
 
 @Component({
   selector: 'app-true-false',
@@ -16,6 +16,8 @@ export class TrueFalseComponent implements OnInit, OnDestroy {
   @Output() emitNextQuestionRequest = new EventEmitter();
   private id;
   private verifyAnswerSubscription: ISubscription;
+  interval: any;
+  public timeLeft = 0;
 
   constructor(private route: ActivatedRoute, private testsService: TestsService) { }
 
@@ -33,14 +35,28 @@ export class TrueFalseComponent implements OnInit, OnDestroy {
     });
   }
 
+  startTimer() {
+    this.interval = setInterval(() => {
+      if (this.timeLeft > 0) {
+        this.timeLeft--;
+      } else {
+        this.nextQuestion();
+      }
+    }, 1000);
+  }
+
   chooseAnswer(answer: any) {
     this.answer = answer;
   }
 
   ngOnInit() {
+    if (this.timeLeft > 0) {
+      this.startTimer();
+    }
   }
 
   ngOnDestroy() {
+    clearInterval(this.interval);
     if (this.verifyAnswerSubscription) {
       this.verifyAnswerSubscription.unsubscribe();
     }