diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 9d5f80f..9c4e26e 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -9,6 +9,7 @@ import { CalendarComponent } from './calendar/calendar.component'; import { AttendanceComponent } from './tabs/more/attendance/attendance.component'; import { ForumPageComponent } from './tabs/more/forum-page/forum-page.component'; import { ChapterNotesComponent } from './tabs/courses/chapter-notes/chapter-notes.component'; +import { QuizComponent } from './tabs/courses/quiz/quiz.component'; const routes: Routes = [ { path: '', pathMatch: 'full', redirectTo: 'welcome' }, @@ -19,6 +20,7 @@ const routes: Routes = [ { component: ChapterNotesComponent, path: 'chapter-notes/:heading' }, { component: VideoChapterComponent, path: 'video-chapter/:heading' }, { component: VideoNotesComponent, path: 'video-notes/:heading' }, + { component: QuizComponent, path: 'quiz' }, { component: CalendarComponent, path: 'calendar' }, { component: AttendanceComponent, path: 'attendance'}, { component: ForumPageComponent, path: 'forum'}, diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 3497cea..ee2a3bd 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -24,6 +24,7 @@ import { ConfirmationPopupComponent } from './reusable-components/confirmation-p import { VideoNotesComponent } from './tabs/courses/video-chapter/video-notes/video-notes.component'; import { ChapterNotesComponent } from './tabs/courses/chapter-notes/chapter-notes.component'; import { CourseDetailsComponent } from './tabs/courses/course-details/course-details.component'; +import { QuizComponent } from './tabs/courses/quiz/quiz.component'; @NgModule({ declarations: [ @@ -43,6 +44,7 @@ import { CourseDetailsComponent } from './tabs/courses/course-details/course-det VideoNotesComponent, ChapterNotesComponent, CourseDetailsComponent, + QuizComponent, ], imports: [ BrowserModule, diff --git a/src/app/tabs/courses/course-details/course-details.component.html b/src/app/tabs/courses/course-details/course-details.component.html index 01424f8..6d07015 100644 --- a/src/app/tabs/courses/course-details/course-details.component.html +++ b/src/app/tabs/courses/course-details/course-details.component.html @@ -32,7 +32,7 @@

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem ab vel reiciendis. Repudiandae nobis pariatur laboriosam, natus quidem quos architecto provident similique officiis vero at cum excepturi eius, eligendi aperiam.

- + diff --git a/src/app/tabs/courses/quiz/quiz.component.html b/src/app/tabs/courses/quiz/quiz.component.html new file mode 100644 index 0000000..b13fd13 --- /dev/null +++ b/src/app/tabs/courses/quiz/quiz.component.html @@ -0,0 +1,164 @@ +
+
+ +
+ + Quiz +
+
+ +
+
+ + + + +
+
+ + + + +
+
+ + + + +
+
+ + + + +
+
+ + + + +
+
+ + + + +
+
+ + + + +
+ +
+ + + + +
+ +
+ + + + +
+ +
+ + + + +
+
+ + + +

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto obcaecati perferendis suscipit consequuntur labore voluptatibus vitae totam minima, tempore excepturi, cum at qui voluptas rerum nostrum odio minus, voluptatem dolores. ? +

+ +
+
+ 00:60 + + + + +
+
+ + + +
    +
  1. + +
    + +
    +
    2. +
  2. + +
    + +
    +
    3. +
  3. + +
    + +
    +
    4. +
  4. + +
    + +
    +
    5. +
+ + + + +

+ dis suscipit consequuntur labore voluptatibus vitae totam minima, tempore excepturi, cum at qui voluptas rerum nostrum odio minus, voluptatem dolores. ? +

+ +
+
+ 00:40 + + + + +
+
+ + + +
    +
  1. + +
    + +
    +
    2. +
  2. + +
    + +
    +
    3. +
+ + + + + + +
diff --git a/src/app/tabs/courses/quiz/quiz.component.scss b/src/app/tabs/courses/quiz/quiz.component.scss new file mode 100644 index 0000000..fbde56b --- /dev/null +++ b/src/app/tabs/courses/quiz/quiz.component.scss @@ -0,0 +1,281 @@ +.page { + background-color: var(--black); + height: 100vh; + overflow: auto; +} + +.nav-header { + background-color: var(--ash-black); + display: flex; + align-items: center; + padding: 0 5%; + height: 60px; + position: sticky; + position: -webkit-sticky; + top: 0; + z-index: 1; + box-shadow: 0px 0px 5px var(--black); + + .close-button { + border: 0px; + background-color: transparent; + .icon { + width: 16px; + height: 16px; + fill: var(--light-grey); + } + } + + h5 { + font-size: 16px; + color: white; + font-weight: 400; + margin-left: 20px; + letter-spacing: 1px; + + .icon { + width: 15px; + height: 15px; + fill: white; + margin-right: 3px; + vertical-align: middle; + position: relative; + top: -1px; + } + } +} + +.question-status { + background-color: var(--ash-black); + padding: 10px 5% 5px; + display: inline-block; + white-space: nowrap; + width: 100%; + overflow: auto; + margin-bottom: -10px; + + .question-number { + width: 20px; + height: 20px; + background-color: var(--dark-grey); + color: white; + align-items: center; + justify-content: center; + display: inline-block; + margin-right: 15px; + border-radius: 50%; + overflow: hidden; + border: 1px solid var(--dark-grey); + box-sizing: content-box; + + span { + display: flex; + width: 100%; + height: 100%; + align-items: center; + justify-content: center; + } + + label { + font-size: 10px; + } + + .icon { + width: 100%; + height: 100%; + fill: white; + display: none; + } + + &.correct { + border-color: var(--green); + background-color: white; + + label { + display: none; + } + + .icon { + fill: var(--green); + display: block; + } + } + + &.wrong { + border-color: var(--danger-dark); + background-color: var(--danger-dark); + + label { + display: none; + } + + .icon { + fill: white; + width: 10px; + height: 10px; + display: block; + } + } + + &.current { + border-color: var(--light-grey); + } + } +} + +ngx-siema-slide { + display: block; + + .question { + line-height: 1.6; + color: white; + font-size: 14px; + background-color: var(--ash-black); + padding: 15px 5%; + } + + .timer-holder { + background-color: var(--black); + height: 70px; + display: flex; + align-items: flex-end; + justify-content: center; + overflow: hidden; + position: relative; + + &::before { + content: ''; + width: 200vw; + height: 100vw; + border-radius: 50%; + position: absolute; + bottom: 25px; + background-color: var(--ash-black); + } + + .timer { + width: 60px; + height: 60px; + border-radius: 50%; + background-color: white; + display: flex; + align-items: center; + justify-content: center; + font-size: 12px; + font-weight: 600; + position: relative; + color: var(--ash-black); + + svg { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + transform: rotate(-90deg); + + #progress { + stroke: var(--green); + } + } + } + } +} + + +.option-list { + width: 90%; + margin: 20px auto; + list-style: none; + + li { + display: flex; + width: 100%; + border: 1px solid var(--light-grey); + color: white; + border-radius: 15px; + align-items: center; + min-height: 50px; + margin: 20px auto; + justify-content: space-between; + padding: 0 15px; + + label { + font-size: 14px; + } + + .icon-holder { + width: 23px; + height: 23px; + border: 1px solid var(--light-grey); + border-radius: 50%; + overflow: hidden; + display: flex; + align-items: center; + justify-content: center; + + .icon { + width: 100%; + height: 100%; + fill: white; + display: none; + } + } + + &.correct { + box-shadow: 0px 0px 5px var(--green); + border-color: var(--green); + + label { + color: var(--green); + } + + .icon-holder { + border-color: var(--green); + background-color: white; + + .icon { + fill: var(--green); + display: block; + } + } + } + + &.wrong { + box-shadow: 0px 0px 5px var(--danger-dark); + border-color: var(--danger-dark); + + label { + color: var(--danger-dark); + } + + .icon-holder { + border-color: var(--danger-dark); + background-color: var(--danger-dark); + + .icon { + fill: white; + width: 10px; + height: 10px; + display: block; + } + } + } + } +} + +.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); +} diff --git a/src/app/tabs/courses/quiz/quiz.component.spec.ts b/src/app/tabs/courses/quiz/quiz.component.spec.ts new file mode 100644 index 0000000..631871d --- /dev/null +++ b/src/app/tabs/courses/quiz/quiz.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { QuizComponent } from './quiz.component'; + +describe('QuizComponent', () => { + let component: QuizComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ QuizComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(QuizComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/tabs/courses/quiz/quiz.component.ts b/src/app/tabs/courses/quiz/quiz.component.ts new file mode 100644 index 0000000..35be0f5 --- /dev/null +++ b/src/app/tabs/courses/quiz/quiz.component.ts @@ -0,0 +1,44 @@ +import { Component, OnInit } from '@angular/core'; +import { Location } from '@angular/common'; +import { NgxSiemaOptions, NgxSiemaService } from 'ngx-siema'; + +@Component({ + selector: 'app-quiz', + templateUrl: './quiz.component.html', + styleUrls: ['./quiz.component.scss'] +}) +export class QuizComponent implements OnInit { + options: NgxSiemaOptions = { + selector: '.siema', + duration: 300, + easing: 'ease-out', + perPage: 1, + startIndex: 0, + draggable: false, + threshold: 20, + loop: false, + onInit: () => { + // runs immediately after first initialization + }, + onChange: () => { + // runs after slide change + }, + }; + + constructor( + private location: Location, + private ngxSiemaService: NgxSiemaService + ) { } + + ngOnInit(): void { + } + + next() { + this.ngxSiemaService.next(1); + } + + back() { + this.location.back(); + } + +} diff --git a/src/app/tabs/courses/video-chapter/video-notes/video-notes.component.ts b/src/app/tabs/courses/video-chapter/video-notes/video-notes.component.ts index 21f0610..1225042 100644 --- a/src/app/tabs/courses/video-chapter/video-notes/video-notes.component.ts +++ b/src/app/tabs/courses/video-chapter/video-notes/video-notes.component.ts @@ -45,7 +45,7 @@ export class VideoNotesComponent implements OnInit { } next() { - this.ngxSiemaService.next(1).subscribe((data: any) => console.log(data)); + this.ngxSiemaService.next(1); } ngOnDestroy() { diff --git a/src/styles.scss b/src/styles.scss index dc15303..9bffd04 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -19,6 +19,7 @@ --green: #8cc63f; --teal-green: #08c17e; --danger: #ea8b8b; + --danger-dark: #d65f5f; } .confirmation-popup {