Front

packages/frontend/src/app/dto/index.ts

@@ -3,26 +3,28 @@ export interface GetAllQuestionsDTO {
     size: number;
 }
 
-export interface AnswerDTO {
-    questionId: string; // the same as param
+export interface SubmitAnswerDTO {
+    questionId: string;
     answerId: string;
 }
 
+export interface Answer {
+    answerId: string;
+    description: string;
+}
+
+
 export interface Question {
     questionId: number;
     description: string;
     answers: Answer[];
-}
+} 
 
-export interface Answer {
-    answerId: string;
-    description: string;
-}
 
-export type Endpoint = 'getAllQuestions' | 'postAnswer' | 'getResults';
+export type Endpoint = 'getAllQuestions' | 'postAnswers' | 'getResults';
 
 export const ENDPOINTS: Record<Endpoint, string> = {
-    getAllQuestions: '/v1/questions',
-    postAnswer: '/v1/answer/:questionId',
-    getResults: '/v1/results'
+    getAllQuestions: '/v1/quiz/questions',
+    postAnswers: '/v1/quiz/answers',
+    getResults: '/v1/quiz/results'
 };

packages/frontend/src/app/quiz/quiz.component.html

@@ -3,7 +3,7 @@
         <div class="card" *ngIf="!showFunFuct()">
 
             <div class="card-header">
-              Question {{currentQuestion + 1}} of {{questions.length}}
+              Pytanie {{currentQuestion + 1}} z 10
             </div>
             <div class="card-body">
               <h5 class="card-title">{{questions[currentQuestion].description}}</h5>
@@ -27,20 +27,13 @@ <h5 class="card-title">{{questions[currentQuestion].description}}</h5>
                   <span>{{questions[currentQuestion].answers[3].description}}</span>
                 </div>
               </div>
-                <!-- <div class="form-check" *ngFor="let answer of questions[currentQuestion].answers; index as i">
 
-                    <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1"
-                    (click)="onAnswerClick(i)">
-                    <label class="form-check-label" for="flexRadioDefault1">
-                        {{answer.description}}
-                    </label>
-                </div> -->
               <button 
                 href="#" 
                 class="btn btn-secondary btn-previous" 
                 style="margin-top: 1rem;"
                 [disabled]="isPreviousButtonDisabled()"
-                (click)="onPreviousQuestionClick()">Previous</button>
+                (click)="onPreviousQuestionClick()">Poprzednie</button>
             </div>
         </div>
         <div *ngIf="showFunFuct()">

packages/frontend/src/app/quiz/quiz.component.scss

@@ -40,8 +40,10 @@
         position: absolute;
         top: 50%;
         left: 50%;
+        width: 100%;
         transform: translateX(-50%) translateY(-50%);
         color: white;
+        padding: 0.5rem;
     }
 
 }

packages/frontend/src/app/quiz/quiz.component.ts

@@ -14,7 +14,6 @@ export class QuizComponent implements OnInit{
   currentQuestion = 0;
   questions: Question[] = [];
 
-  userAnswers = [-1, -1, -1, -1, -1]
   userCurrentAnswer = -1;
 
   funFacts = [
@@ -32,15 +31,6 @@ export class QuizComponent implements OnInit{
     });
   }
 
-  isNextButtonDisabled() {
-    if(this.userAnswers[this.currentQuestion] === -1) 
-      return true;
-    if(this.isFinalQuestion()) {
-      return false
-    }
-    return this.currentQuestion >= this.questions.length-1;
-  }
-
   isPreviousButtonDisabled() {
     return this.currentQuestion === 0;
   }
@@ -49,32 +39,29 @@ export class QuizComponent implements OnInit{
     this.currentQuestion -= 1;
   }
 
-  onNextQuestionClick() {
-    if(this.isFinalQuestion()){
-      this.submitAnswers();
-    }
-    else {
-      this.currentQuestion += 1;
-    }
+  goToNextQuestion() {
+    this.currentQuestion += 1;
+    this.quizService.fetchQuestion(this.currentQuestion).subscribe (
+      (question: Question) => {
+        this.questions.push(question);
+      }
+    );
   }
 
   onAnswerClick(index: number) {
-    this.userAnswers[this.currentQuestion] = index;
-    this.onNextQuestionClick();
+    this.quizService.submitAnswer(this.currentQuestion, index).subscribe({
+      next: () => {
+        if(!this.isFinalQuestion())
+          this.goToNextQuestion();
+        else {
+          this.router.navigate(['result']);
+        }
+      }
+    });
   }
 
   isFinalQuestion() {
-    return this.currentQuestion === this.questions.length - 1;
-  }
-
-  submitAnswers() {
-    this.quizService.submitAnswers(this.userAnswers).subscribe(
-      {
-        next: () => {
-          this.router.navigate(['./result']);
-        }
-      }
-    );
+    return this.currentQuestion === 9;
   }
 
   showFunFuct() {

packages/frontend/src/app/quiz/quiz.service.ts

@@ -1,41 +1,60 @@
 import { Injectable } from "@angular/core";
-import { Observable, of, tap } from "rxjs";
+import { Observable, map, of, tap } from "rxjs";
 
-import { Question } from "../dto";
+import { Question, SubmitAnswerDTO } from "../dto";
 import { HttpClient } from "@angular/common/http";
 
 @Injectable({providedIn: 'root'})
 export class QuizService {
 
     private questions: Question[];
 
-    private apiPath = 'localhost:3000/v1/quiz/';
+    private apiPath = 'https://tabesco.serveo.net/v1/quiz/';
 
     constructor(private http: HttpClient) {}
+
     fetchQuestions(): Observable<Question[]>{
-        return this.http.get<Question[]>(`${this.apiPath}/questions`);
-        return of([
+        return this.http.get<any>(`${this.apiPath}questions`)
+            .pipe(
+                map(result => result.questions),
+                tap((questions: []) => {this.questions = questions})
+            );
+    }
+
+    fetchQuestion(questionId: number): Observable<Question> {
+        return of({questionId: 0,
+        answers: [
+            {
+                answerId: '0',
+                description: "#0:I will never loose any money bro :)"
+            },
+            {
+                answerId: '1',
+                description: "#1:I will never loose any money bro :)"
+            },
             {
-                answers: [
-                    {description: 'Jabłkiem', answerId: '0'}, 
-                    {description: 'Parówką', answerId: '1'},
-                    {description: 'Sokiem', answerId: '2'},
-                    {description: 'Żwirkiem', answerId: '3'}
-                ], 
-
-                description: 'Jakim warzywem chciałbyś być ?', 
-                questionId: 0
+                answerId: '2',
+                description: "#2:I will never loose any money bro :)"
             },
             {
-                answers: [{description: 'Jabłkiem', answerId: '0'}, {description: 'Parówką', answerId: '1'}], 
-                description: 'Jakim zwierzęciem chciałbyś być ?', 
-                questionId: 1
+                answerId: '3',
+                description: "#3:I will never loose any money bro :)"
             }
-        ]).pipe(tap((questions: []) => {this.questions = questions}));
+        ], description: ''});
+        return this.http.get<any>(`${this.apiPath}question`);
+    }
 
+    submitAnswer(questionId: number, answerId: number) {
+        let submitAnswerDTO: SubmitAnswerDTO = {
+            questionId: questionId.toString(),
+            answerId: answerId.toString()
+        };
+        console.log(`Question ${questionId}, answer: ${answerId}`);
+        return of({});
+        return this.http.post(`${this.apiPath}answer`, submitAnswerDTO);
     }
 
     submitAnswers(answers: number[]): Observable<any> {
-        return of([]);
+        return of({});
     }
 }

packages/frontend/src/app/result/result.component.html

@@ -1,18 +1,16 @@
 <div class="result-container">
     <div class="page-container">
         <div class="job-title-container">
-            <label>Najbardziej dopasowaną rolą dla ciebie jest</label>
-            <h4>{{jobTitle}}</h4>
-            <label>{{jobDescription}}</label>
+            <label>Najbardziej dopasowanymie zawodami dla ciebie są</label>
         </div>
         <div class="menu-container">
-            <span *ngFor="let item of menuItems; index as i" 
+            <span *ngFor="let item of roles; index as i" 
                 (click)="setItem(i)"
                 [ngClass]="{'item-active': menuIndex === i}"
-                class="item">{{menuItems[i]}}</span>
+                class="item">{{roles[i]}}</span>
         </div>
-        <div>
-            <router-outlet></router-outlet>
+        <div class="job-descr-container">
+            {{jobDescription}}
         </div>
     </div>
 </div>

packages/frontend/src/app/result/result.component.scss

@@ -44,3 +44,6 @@
   color: black;
 }
 
+.job-descr-container {
+  padding: 1rem;
+}

packages/frontend/src/app/result/result.component.ts

@@ -9,8 +9,7 @@ export class ResultComponent {
   jobTitle = 'Pełnomocniczka ds. osób z niepełnosprawnościami';
   jobDescription = 'Działam na rzecz poprawy jakości życia osób z niepełnosprawnościami i na rzecz ich pełniejszego uczestnictwa w życiu społeczeństwa.';
 
-  menuItems = ['Opis zawodu', 'Specyfika pracy', 'Wymagania i umiejętności', 'Przedmioty szkolne'];
-
+  roles = ['Weterynaria', 'Medycyna', 'Kapłaństwo'];
   menuIndex = 0;
 
   setItem(index: number) {