diff --git a/packages/frontend/src/app/dto/index.ts b/packages/frontend/src/app/dto/index.ts index 9513d47..9943093 100644 --- a/packages/frontend/src/app/dto/index.ts +++ b/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 = { - getAllQuestions: '/v1/questions', - postAnswer: '/v1/answer/:questionId', - getResults: '/v1/results' + getAllQuestions: '/v1/quiz/questions', + postAnswers: '/v1/quiz/answers', + getResults: '/v1/quiz/results' }; \ No newline at end of file diff --git a/packages/frontend/src/app/quiz/quiz.component.html b/packages/frontend/src/app/quiz/quiz.component.html index 9dba187..a222c64 100644 --- a/packages/frontend/src/app/quiz/quiz.component.html +++ b/packages/frontend/src/app/quiz/quiz.component.html @@ -3,7 +3,7 @@
- Question {{currentQuestion + 1}} of {{questions.length}} + Pytanie {{currentQuestion + 1}} z 10
{{questions[currentQuestion].description}}
@@ -27,20 +27,13 @@
{{questions[currentQuestion].description}}
{{questions[currentQuestion].answers[3].description}}
- + (click)="onPreviousQuestionClick()">Poprzednie
diff --git a/packages/frontend/src/app/quiz/quiz.component.scss b/packages/frontend/src/app/quiz/quiz.component.scss index e1dd87d..e4797e4 100644 --- a/packages/frontend/src/app/quiz/quiz.component.scss +++ b/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; } } \ No newline at end of file diff --git a/packages/frontend/src/app/quiz/quiz.component.ts b/packages/frontend/src/app/quiz/quiz.component.ts index b628b87..dddc2cb 100644 --- a/packages/frontend/src/app/quiz/quiz.component.ts +++ b/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() { diff --git a/packages/frontend/src/app/quiz/quiz.service.ts b/packages/frontend/src/app/quiz/quiz.service.ts index 05f910b..b72e609 100644 --- a/packages/frontend/src/app/quiz/quiz.service.ts +++ b/packages/frontend/src/app/quiz/quiz.service.ts @@ -1,7 +1,7 @@ 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'}) @@ -9,33 +9,52 @@ 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{ - return this.http.get(`${this.apiPath}/questions`); - return of([ + return this.http.get(`${this.apiPath}questions`) + .pipe( + map(result => result.questions), + tap((questions: []) => {this.questions = questions}) + ); + } + + fetchQuestion(questionId: number): Observable { + 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(`${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 { - return of([]); + return of({}); } } \ No newline at end of file diff --git a/packages/frontend/src/app/result/result.component.html b/packages/frontend/src/app/result/result.component.html index 72a896f..c3635ca 100644 --- a/packages/frontend/src/app/result/result.component.html +++ b/packages/frontend/src/app/result/result.component.html @@ -1,18 +1,16 @@
- -

{{jobTitle}}

- +
-
- +
+ {{jobDescription}}
\ No newline at end of file diff --git a/packages/frontend/src/app/result/result.component.scss b/packages/frontend/src/app/result/result.component.scss index 6d56375..cbd83cc 100644 --- a/packages/frontend/src/app/result/result.component.scss +++ b/packages/frontend/src/app/result/result.component.scss @@ -44,3 +44,6 @@ color: black; } +.job-descr-container { + padding: 1rem; +} \ No newline at end of file diff --git a/packages/frontend/src/app/result/result.component.ts b/packages/frontend/src/app/result/result.component.ts index 0d4d363..00e290e 100644 --- a/packages/frontend/src/app/result/result.component.ts +++ b/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) {