quiz gives feedback

android/app/capacitor.build.gradle

@@ -14,6 +14,7 @@ dependencies {
     implementation project(':capacitor-filesystem')
     implementation project(':capacitor-haptics')
     implementation project(':capacitor-keyboard')
+    implementation project(':capacitor-splash-screen')
     implementation project(':capacitor-status-bar')
     implementation project(':capacitor-storage')
 

android/app/src/main/assets/capacitor.config.json

@@ -2,5 +2,22 @@
 	"appId": "com.linnettchristopher.apneaelearning",
 	"appName": "ApneaElearning",
 	"webDir": "www",
-	"bundledWebRuntime": false
+	"bundledWebRuntime": false,
+	"plugins": {
+		"SplashScreen": {
+			"launchShowDuration": 3000,
+			"launchAutoHide": true,
+			"backgroundColor": "#ffffffff",
+			"androidSplashResourceName": "splash",
+			"androidScaleType": "CENTER_CROP",
+			"showSpinner": true,
+			"androidSpinnerStyle": "large",
+			"iosSpinnerStyle": "small",
+			"spinnerColor": "#999999",
+			"splashFullScreen": true,
+			"splashImmersive": true,
+			"layoutName": "launch_screen",
+			"useDialog": true
+		}
+	}
 }

android/app/src/main/assets/capacitor.plugins.json

@@ -19,6 +19,10 @@
 		"pkg": "@capacitor/keyboard",
 		"classpath": "com.capacitorjs.plugins.keyboard.KeyboardPlugin"
 	},
+	{
+		"pkg": "@capacitor/splash-screen",
+		"classpath": "com.capacitorjs.plugins.splashscreen.SplashScreenPlugin"
+	},
 	{
 		"pkg": "@capacitor/status-bar",
 		"classpath": "com.capacitorjs.plugins.statusbar.StatusBarPlugin"

android/capacitor.settings.gradle

@@ -17,6 +17,9 @@ project(':capacitor-haptics').projectDir = new File('../node_modules/@capacitor/
 include ':capacitor-keyboard'
 project(':capacitor-keyboard').projectDir = new File('../node_modules/@capacitor/keyboard/android')
 
+include ':capacitor-splash-screen'
+project(':capacitor-splash-screen').projectDir = new File('../node_modules/@capacitor/splash-screen/android')
+
 include ':capacitor-status-bar'
 project(':capacitor-status-bar').projectDir = new File('../node_modules/@capacitor/status-bar/android')
 

capacitor.config.ts

@@ -4,7 +4,24 @@ const config: CapacitorConfig = {
   appId: 'com.linnettchristopher.apneaelearning',
   appName: 'ApneaElearning',
   webDir: 'www',
-  bundledWebRuntime: false
+  bundledWebRuntime: false,
+  plugins: {
+    SplashScreen: {
+      launchShowDuration: 3000,
+      launchAutoHide: true,
+      backgroundColor: "#ffffffff",
+      androidSplashResourceName: "splash",
+      androidScaleType: "CENTER_CROP",
+      showSpinner: true,
+      androidSpinnerStyle: "large",
+      iosSpinnerStyle: "small",
+      spinnerColor: "#999999",
+      splashFullScreen: true,
+      splashImmersive: true,
+      layoutName: "launch_screen",
+      useDialog: true,
+    },
+  },
 };
 
 export default config;

ios/App/Podfile

@@ -9,13 +9,14 @@ install! 'cocoapods', :disable_input_output_paths => true
 def capacitor_pods
   pod 'Capacitor', :path => '../../node_modules/@capacitor/ios'
   pod 'CapacitorCordova', :path => '../../node_modules/@capacitor/ios'
-  pod 'CapacitorApp', :path => '../../node_modules/@capacitor/app'
-  pod 'CapacitorCamera', :path => '../../node_modules/@capacitor/camera'
-  pod 'CapacitorFilesystem', :path => '../../node_modules/@capacitor/filesystem'
-  pod 'CapacitorHaptics', :path => '../../node_modules/@capacitor/haptics'
-  pod 'CapacitorKeyboard', :path => '../../node_modules/@capacitor/keyboard'
-  pod 'CapacitorStatusBar', :path => '../../node_modules/@capacitor/status-bar'
-  pod 'CapacitorStorage', :path => '../../node_modules/@capacitor/storage'
+  pod 'CapacitorApp', :path => '..\..\node_modules\@capacitor\app'
+  pod 'CapacitorCamera', :path => '..\..\node_modules\@capacitor\camera'
+  pod 'CapacitorFilesystem', :path => '..\..\node_modules\@capacitor\filesystem'
+  pod 'CapacitorHaptics', :path => '..\..\node_modules\@capacitor\haptics'
+  pod 'CapacitorKeyboard', :path => '..\..\node_modules\@capacitor\keyboard'
+  pod 'CapacitorSplashScreen', :path => '..\..\node_modules\@capacitor\splash-screen'
+  pod 'CapacitorStatusBar', :path => '..\..\node_modules\@capacitor\status-bar'
+  pod 'CapacitorStorage', :path => '..\..\node_modules\@capacitor\storage'
 end
 
 target 'App' do

package.json

@@ -28,6 +28,7 @@
     "@capacitor/haptics": "1.1.4",
     "@capacitor/ios": "3.5.0",
     "@capacitor/keyboard": "1.2.2",
+    "@capacitor/splash-screen": "^1.2.2",
     "@capacitor/status-bar": "1.0.8",
     "@capacitor/storage": "^1.2.5",
     "@ionic/angular": "^6.0.0",

src/app/app-routing.module.ts

@@ -13,11 +13,6 @@ const routes: Routes = [
     loadChildren: () =>
       import('./users/login/login.module').then((m) => m.LoginPageModule),
   },
-  {
-    path: 'quizlanding',
-    loadChildren: () =>
-      import('./quiz/landing/landing.module').then((m) => m.LandingPageModule),
-  },
   {
     path: 'in-progress',
     loadChildren: () =>

src/app/app.component.ts

@@ -2,6 +2,8 @@ import { Component, OnChanges, OnInit, SimpleChanges } from '@angular/core';
 import { ModalController } from '@ionic/angular';
 import { LoginPage } from './users/login/login.page';
 import { UserService } from './users/user.service';
+import { SplashScreen } from '@capacitor/splash-screen';
+
 @Component({
   selector: 'app-root',
   templateUrl: 'app.component.html',
@@ -13,7 +15,10 @@ export class AppComponent implements OnInit {
     private userService: UserService
   ) {}
 
-  ngOnInit(): void {
-  }
+  async ngOnInit(): Promise<void> {
+    await SplashScreen.show({
+      autoHide: true
+    });
+}
 
 }

src/app/course-landing/course-landing.page.html

@@ -2,14 +2,9 @@
   <ion-toolbar>
     <ion-back-button slot="start" defaultHref=""></ion-back-button>
     <ion-title>{{thisCourse.title}} Course</ion-title>
-    <ion-button
-      (click)="showUserOptions()"
-      size="small"
-      color="dark"
-      fill="clear"
-      slot="end"
-      ><ion-icon slot="icon-only" name="ellipsis-vertical-outline"></ion-icon
-    ></ion-button>
+    <ion-button (click)="showUserOptions()" size="small" color="dark" fill="clear" slot="end">
+      <ion-icon slot="icon-only" name="ellipsis-vertical-outline"></ion-icon>
+    </ion-button>
   </ion-toolbar>
 </ion-header>
 <ion-content>
@@ -37,18 +32,35 @@
   <ion-accordion-group>
     <ion-accordion>
       <ion-item slot="header">
-        <ion-label>Chapter Selection</ion-label>
+        <ion-label>Review</ion-label>
       </ion-item>
-      <ion-list slot="content">
-        <ion-item  *ngFor="let chapter of thisAvailableChapters, index as i" (click)="launchModule(chapter)">
-          <ion-label>Chapter {{chapter+1}}</ion-label>
-        </ion-item>
-      </ion-list>
+      <div slot="content">
+        <ion-accordion-group>
+          <ion-accordion>
+            <ion-item slot="header">
+              <ion-label>Chapter Selection</ion-label>
+            </ion-item>
+            <ion-list slot="content">
+              <ion-item *ngFor="let chapter of thisAvailableChapters, index as i" (click)="launchModule(chapter)">
+                <ion-label>Chapter {{chapter+1}}</ion-label>
+              </ion-item>
+            </ion-list>
+          </ion-accordion>
+          <ion-accordion *ngIf="thisCourse.unlockedQuizzes.length>0">
+            <ion-item slot="header">
+              <ion-label>Available Quizzes</ion-label>
+            </ion-item>
+            <ion-list slot="content">
+              <ion-item *ngFor="let quizNo of thisCourse.unlockedQuizzes">
+                <ion-label (click)="launchModuleQuiz(quizNo)">Chapter {{quizNo + 1}} Quiz</ion-label>
+              </ion-item>
+            </ion-list>
+          </ion-accordion>
+        </ion-accordion-group>
+      </div>
     </ion-accordion>
   </ion-accordion-group>
-  <ion-button expand="block" (click)="launchModule(thisCourse.unlockedChapters.length-1)">{{thisCourse.unlockedChapters.length > 1 ? "Continue Course" : "Start Course"}}</ion-button>
 
-      <ion-col size="6" *ngIf="thisCourse.unlockedQuizzes.length>0">
-        <ion-button expand="block" (click)="launchQuiz()">Quiz</ion-button>
-      </ion-col>
-</ion-footer>
+  <ion-button expand="block" (click)="launchModule(thisCourse.unlockedChapters.length-1)">
+    {{thisCourse.unlockedChapters.length > 1 ? "Continue Course" : "Start Course"}}</ion-button>
+</ion-footer>

src/app/course-landing/course-landing.page.ts

@@ -27,6 +27,15 @@ export class CourseLandingPage implements OnInit {
     this.thisAvailableChapters = this.thisCourse.unlockedChapters
   }
 
+  async launchModuleQuiz(moduleNo){
+    this.currentModuleService.currentModuleIndex = moduleNo
+      const quizmodal = await this.modalController.create({
+        component: InProgressPage,
+        cssClass: 'my-custom-class'
+      });
+      return await quizmodal.present();
+    }
+
   ngOnInit() {
     console.log(this.thisCourse)
 
@@ -46,10 +55,6 @@ export class CourseLandingPage implements OnInit {
       modal.onDidDismiss().then(() => {});
       return modal.present();
     }
-
-  launchQuiz() {
-    this.router.navigate(['/app-landing']); //move to quiz in progress page
-  }
 
   async showUserOptions() {
     //logs out  user

src/app/quiz/in-progress/in-progress.page.ts

@@ -3,7 +3,7 @@ import { Answer, Question } from '../question';
 import SwiperCore, { EffectCoverflow } from 'swiper';
 import { ViewChild } from '@angular/core';
 import { SwiperComponent } from 'swiper/angular';
-import { IonRadioGroup, ModalController } from '@ionic/angular';
+import { AlertController, IonRadioGroup, ModalController } from '@ionic/angular';
 import { AfterContentChecked } from '@angular/core';
 import { CurrentModuleService } from "../../content/detail-content/current-module.service"
 import { CourseService } from 'src/app/course-landing/course.service';
@@ -34,7 +34,7 @@ export class InProgressPage implements OnInit{
    * created to keep track of the current module that the user is on.
    * @param {CourseService} courseService - This is a service that contains the course object.
    */
-  constructor(private modalController:ModalController ,private dataStorageService: DatastorageService, private currentModuleService: CurrentModuleService, private courseService:CourseService, private userService: UserService) {
+  constructor(private alertController: AlertController, private modalController:ModalController ,private dataStorageService: DatastorageService, private currentModuleService: CurrentModuleService, private courseService:CourseService, private userService: UserService) {
     this.chapterIndex = this.currentModuleService.currentModuleIndex
     this.course = courseService.getCourse()
   }
@@ -97,14 +97,32 @@ export class InProgressPage implements OnInit{
       }
     }
     if (userScore/correctAnswers.length > 0.75){
+      if (!this.userService.user.availableCourses[`${this.course.courseID}`].unlockedChapters.includes(this.chapterIndex+1)){
       this.userService.user.availableCourses[`${this.course.courseID}`].unlockedChapters.push(this.chapterIndex+1)
      var allUsers = await this.dataStorageService.lookup('users')
     allUsers[`${this.userService.user.email}`] = this.userService.user
     await this.dataStorageService.save('users',allUsers)
-    this.modalController.dismiss()
+      }
+      await this.finishedQuiz(true)
+    } else {
+      await this.finishedQuiz(false)
     }
+    this.modalController.dismiss()
+  }
+  async finishedQuiz(success: boolean) {
+    const alert = await this.alertController.create({
+      cssClass: 'my-custom-class',
+      header: 'Quiz Completed',
+      subHeader: success ? 'Nice Work' : 'sorry, that did not go as planned',
+      message: success ? 'You successfully completed the quiz, you have unlocked the next chapter' : 'Please review this chapter, and retry the quiz from there',
+      buttons: ['OK']
+    });
+
+    await alert.present();
 
   }
+
+
   /**
    * For each question in the quiz, if the question has been answered and the answer is correct, add an
    * object to the results array with a property of correct set to true. Otherwise, add an object to
@@ -119,7 +137,4 @@ export class InProgressPage implements OnInit{
     }
     this.allQuestionsAnswered = true
   }
-
-  ngAfterContentChanged() {
-  }
 }