Merge pull request #7 from nitrotap/juxsarmo-patch-2

Add files via upload - quiz page

client/src/app/quiz/quiz-routing.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { QuizPage } from './quiz.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: QuizPage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class QuizPageRoutingModule {}

client/src/app/quiz/quiz.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { QuizPageRoutingModule } from './quiz-routing.module';
+
+import { QuizPage } from './quiz.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    QuizPageRoutingModule
+  ],
+  declarations: [QuizPage]
+})
+export class QuizPageModule {}

client/src/app/quiz/quiz.page.html

@@ -0,0 +1,34 @@
+<ion-header [translucent]="true">
+  <ion-toolbar>
+    <ion-title>Quiz</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true">
+
+
+  <ion-card>
+    <ion-card-header>
+      <ion-card-title>*QUESTION TYPE / QUESTION TIME*</ion-card-title>
+    </ion-card-header>
+
+    <ion-card-content>
+      *GENERATED QUESTION TYPE*
+    </ion-card-content>
+  </ion-card>
+
+  <ion-range
+
+  aria-label="Custom range"
+  [min]="0"
+  [max]="10"
+  [value]="5"
+  [pin]="true"
+  [ticks]="true"
+  [snaps]="true"
+
+></ion-range>
+
+
+
+</ion-content>

client/src/app/quiz/quiz.page.scss

@@ -0,0 +1,46 @@
+ion-range {
+    // Styles for the range component here
+
+    ion-range::part(tick) {
+        background: #a2d2ff;
+
+      }
+
+      ion-range::part(tick-active) {
+        background: #bde0fe;
+      }
+
+      ion-range::part(pin) {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+
+        background: #ffafcc;
+        color: #fff;
+
+        border-radius: 50%;
+        transform: scale(1.01);
+
+        top: -20px;
+
+        min-width: 28px;
+        height: 28px;
+        transition: transform 120ms ease, background 120ms ease;
+      }
+
+      ion-range::part(pin)::before {
+        content: none;
+      }
+
+      ion-range::part(knob) {
+        background: #ffc8dd;
+      }
+
+      ion-range::part(bar) {
+        background: #a2d2ff;
+      }
+
+      ion-range::part(bar-active) {
+        background: #bde0fe;
+      }
+  }

client/src/app/quiz/quiz.page.spec.ts

@@ -0,0 +1,17 @@
+import { ComponentFixture, TestBed, async } from '@angular/core/testing';
+import { QuizPage } from './quiz.page';
+
+describe('QuizPage', () => {
+  let component: QuizPage;
+  let fixture: ComponentFixture<QuizPage>;
+
+  beforeEach(async(() => {
+    fixture = TestBed.createComponent(QuizPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

client/src/app/quiz/quiz.page.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-quiz',
+  templateUrl: './quiz.page.html',
+  styleUrls: ['./quiz.page.scss'],
+})
+export class QuizPage implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}