PUNKT-61

Dodanie koła ratunkowego - frontend

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

@@ -5,7 +5,7 @@
   </div>
   <div *ngSwitchCase="'single-choice'">
     <small>Pytanie jednokrotnego wyboru</small>
-    <app-single-choice [question]="question" (emitNextQuestionRequest)="handleEmitNextQuestionRequest($event)"></app-single-choice>
+    <app-single-choice [question]="question" [activeFifty]='activeFifty' (emitNextQuestionRequest)="handleEmitNextQuestionRequest($event)" (lifebuoy)="LifebuoyFifty($event)"></app-single-choice>
   </div>
   <div *ngSwitchCase="'multiple-choice'">
     <small>Pytanie wielokrotnego wyboru</small>
@@ -23,4 +23,4 @@
     <small>Pytanie typu łączenie w pary</small>
     <app-pairs [question]="question" (emitNextQuestionRequest)="handleEmitNextQuestionRequest($event)"></app-pairs>
   </div>
-</div>
+</div>

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

@@ -10,7 +10,10 @@ export class QuestionViewComponent implements OnInit {
   question;
   @Input()
   private questionIndex;
+  @Input() activeFifty;
   @Output() emitNextQuestionRequest = new EventEmitter();
+  @Output() lifebuoyTest = new EventEmitter<boolean>();
+
 
   constructor() { }
 
@@ -22,6 +25,10 @@ export class QuestionViewComponent implements OnInit {
     this.nextQuestion(e);
   }
 
+  LifebuoyFifty(y) {
+    this.lifebuoyTest.emit(y);
+  }
+
   ngOnInit() {
   }
 

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

@@ -1,16 +1,23 @@
 <form #f="ngForm" (ngSubmit)="nextQuestion(f)" novalidate>
   <div class="alert alert-grey question">
     Pytanie za {{question.points}}pkt. <br /><span *ngIf="timeLeft > 0">Czas: {{ timeLeft }} sek. </span><span *ngIf="question.time === 0">Czas: bez limitu</span>
-   <div *ngIf="question.help" class="fifty"><img src="./././././assets/50-50.png" width="80px" height="50px"></div>
+   <div *ngIf="(question.help && activeFifty)" class="fifty" (click)="fiftyFifty()"><img src="./././././assets/50-50.png" width="80px" height="50px"></div>
     <div class="pytanie">{{question.question}} </div>
-    <div class="answers">
+    <div *ngIf="!fifty" class="answers">
       <div *ngFor="let item of question.answers" >
 
         <input type="radio" name="answer" class="radio-answer" id="{{item.content}}" [value]="item.content" ngModel ><label for="{{item.content}}">{{item.content}}</label>
 
       </div>
     </div>
+    <div *ngIf="(fifty)" class="answers">
+      <div *ngFor="let item of question.answers_help" >
+
+        <input type="radio" name="answer" class="radio-answer" id="{{item.content}}" [value]="item.content" ngModel ><label for="{{item.content}}">{{item.content}}</label>
+
+      </div>
+    </div>
   </div>
 
-  <button class="btn btn-study-cave" type="submit"><i class="fas fa-arrow-right"></i> Dalej</button>
+  <button class="btn btn-study-cave" type="submit" (click)="noHelp()"><i class="fas fa-arrow-right"></i> Dalej</button>
 </form>

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

@@ -14,12 +14,16 @@ export class SingleChoiceComponent implements OnInit, OnDestroy {
   private _question;
   private answer;
   @Output() emitNextQuestionRequest = new EventEmitter();
+  @Output() lifebuoy = new EventEmitter<boolean>();
+  @Input() activeFifty;
   private id;
   private verifyAnswerSubscription: ISubscription;
   interval: any;
   public timeLeft = 0;
+  public fifty: Boolean = false;
   @ViewChild('f') public form: NgForm;
 
+
   constructor(private route: ActivatedRoute, private testsService: TestsService) { }
 
   nextQuestion(f) {
@@ -35,6 +39,15 @@ export class SingleChoiceComponent implements OnInit, OnDestroy {
     });
   }
 
+  fiftyFifty() {
+    this.fifty = true;
+    this.lifebuoy.emit(false);
+  }
+
+  noHelp() {
+    this.fifty = false;
+  }
+
   startTimer() {
     this.interval = setInterval(() => {
       if (this.timeLeft > 0) {

FrontEnd/src/app/tests/test-details/test-details.component.html

@@ -38,7 +38,7 @@
 
 
         <div class="question-view">
-          <app-question-view [question]="test.body[currentQuestionIndex]" [questionIndex]="currentQuestionIndex" (emitNextQuestionRequest)="handleEmitNextQuestionRequest($event)"></app-question-view>
+          <app-question-view [question]="test.body[currentQuestionIndex]" [questionIndex]="currentQuestionIndex" [activeFifty]='lifebuoyTest' (emitNextQuestionRequest)="handleEmitNextQuestionRequest($event)" (lifebuoyTest)="LifebuoyFifty($event)" ></app-question-view>
         </div>
 
 

FrontEnd/src/app/tests/test-details/test-details.component.ts

@@ -19,6 +19,7 @@ export class TestDetailsComponent implements OnInit, OnDestroy {
   currentQuestionIndex = 0;
   isEnded = false;
   points = 0;
+  public lifebuoyTest: Boolean = true;
   maxPoints = 0;
   prevMaxResult = 0;
   prevAnswerResultBool;
@@ -78,6 +79,10 @@ export class TestDetailsComponent implements OnInit, OnDestroy {
     );
   }
 
+  LifebuoyFifty(y) {
+    this.lifebuoyTest = y;
+  }
+
   getMaxResult() {
     if (this.currentUser) {
       this.getResultSubscription = this.testService.getResult(this.test.id, this.currentUser.username).subscribe(d => {