diff --git a/src/app/tabs/courses/quiz/quiz.component.html b/src/app/tabs/courses/quiz/quiz.component.html index e8d8c83..e4a06a8 100644 --- a/src/app/tabs/courses/quiz/quiz.component.html +++ b/src/app/tabs/courses/quiz/quiz.component.html @@ -1,4 +1,4 @@ -
+
diff --git a/src/app/tabs/courses/quiz/quiz.component.scss b/src/app/tabs/courses/quiz/quiz.component.scss index ed2233f..f87287d 100644 --- a/src/app/tabs/courses/quiz/quiz.component.scss +++ b/src/app/tabs/courses/quiz/quiz.component.scss @@ -2,6 +2,7 @@ background-color: var(--black); height: 100vh; overflow: auto; + padding-bottom: 60px; } .nav-header { @@ -311,18 +312,36 @@ ngx-siema-slide { } } -.next-button { - width: 100px; - height: 50px; - border-radius: 30px; - background-color: var(--teal-green); - color: white; - font-size: 14px; - border: 0px; - display: block; - position: sticky; - position: -webkit-sticky; - bottom: 20px; - margin: 10px auto 40px; - box-shadow: 0px 0px 10px var(--teal-green); +.action-buttons { + display: flex; + width: 100%; + position: fixed; + align-items: stretch; + bottom: 0; + z-index: 1; + background-color: var(--ash-black); + padding: 10px; + border-top-left-radius: 7px; + border-top-right-radius: 7px; + overflow: hidden; + + button { + width: 48%; + display: block; + border-radius: 7px; + border: 0px; + height: 40px; + background-color: transparent; + + &.next-button { + background-color: var(--teal); + color: white; + margin-left: auto; + } + + &.prev-button { + border: 2px solid var(--teal); + color: var(--teal); + } + } } diff --git a/src/app/tabs/courses/quiz/quiz.component.ts b/src/app/tabs/courses/quiz/quiz.component.ts index 46392af..bffd4b9 100644 --- a/src/app/tabs/courses/quiz/quiz.component.ts +++ b/src/app/tabs/courses/quiz/quiz.component.ts @@ -25,7 +25,7 @@ export class QuizComponent implements OnInit { }, }; - selectedQuestionId: number; + selectedQuestion: any; questionList = [{ id: 1, @@ -101,19 +101,27 @@ export class QuizComponent implements OnInit { }] }]; + constructor( private location: Location, private ngxSiemaService: NgxSiemaService ) { } ngOnInit(): void { - this.selectedQuestionId = this.questionList[0].id; + this.selectedQuestion = this.questionList[0]; } next() { this.ngxSiemaService.next(1); this.ngxSiemaService.currentSlide().subscribe((index) => { - this.selectedQuestionId = this.questionList[index.currentSlide].id; + this.selectedQuestion = this.questionList[index.currentSlide]; + }).unsubscribe(); + } + + prev() { + this.ngxSiemaService.prev(1); + this.ngxSiemaService.currentSlide().subscribe((index) => { + this.selectedQuestion = this.questionList[index.currentSlide]; }).unsubscribe(); }