@sparkle-learning/core 0.0.53 → 0.0.54

package/dist/cjs/sparkle-quiz.cjs.entry.js

@@ -3,35 +3,26 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-51e8292e.js');
+const assets_service = require('./assets.service-bfa75092.js');
+const environmentConfig_service = require('./environment-config.service-c8ff1f3d.js');
 
-const sparkleQuizCss = "sparkle-quiz{display:block;font-family:var(--font-family);--sparkle-quiz-question-container-padding:10px 0px;--sparkle-quiz-question-container-margin:0px;--sparkle-quiz-question-text-padding:10px 0px;--sparkle-quiz-option-border:2px solid var(--line-rule-color);--sparkle-quiz-selected-option-border:2px solid var(--text-color--dark);--sparkle-quiz-option-border-radius:4px;--sparkle-quiz-option-padding:5px 10px;--sparkle-quiz-option-width:100%;--sparkle-quiz-error-bg-color:#fbaeae;--sparkle-quiz-success-bg-color:#fbaeae;padding:var(--sparkle-quiz-question-container-padding);margin:var(--sparkle-quiz-question-container-margin)}.question-text{padding:var(--sparkle-quiz-question-text-padding)}.option{padding:5px 0px}.number{padding:0px 14px;border:1px solid #ebebeb;border-radius:4px;margin-right:10px;font-size:14px;width:14px;display:inline-flex;justify-content:center}.feedback-container{padding:10px;border-radius:4px}.incorrect .feedback-container{background-color:var(--sparkle-quiz-error-bg-color, #fbaeae)}.correct .feedback-container{background-color:var(--sparkle-quiz-success-bg-color, #fbaeae)}";
+const sparkleQuizCss = "sparkle-quiz-v1{display:block;font-family:var(--font-family);--sparkle-quiz-question-container-padding:10px 0px;--sparkle-quiz-question-container-margin:0px;--sparkle-quiz-question-text-padding:10px 0px;--sparkle-quiz-option-border:2px solid var(--line-rule-color);--sparkle-quiz-selected-option-border:2px solid var(--text-color--dark);--sparkle-quiz-option-border-radius:4px;--sparkle-quiz-option-padding:5px 10px;--sparkle-quiz-option-width:100%;--sparkle-quiz-error-bg-color:#fbaeae;--sparkle-quiz-success-bg-color:#fbaeae;padding:var(--sparkle-quiz-question-container-padding);margin:var(--sparkle-quiz-question-container-margin)}.question-text{padding:var(--sparkle-quiz-question-text-padding)}.option{padding:5px 0px}.number{padding:0px 14px;border:1px solid #ebebeb;border-radius:4px;margin-right:10px;font-size:14px;width:14px;display:inline-flex;justify-content:center}.feedback-container{padding:10px;border-radius:4px}.incorrect .feedback-container{background-color:var(--sparkle-quiz-error-bg-color, #fbaeae)}.correct .feedback-container{background-color:var(--sparkle-quiz-success-bg-color, #fbaeae)}";
 
 const SparkleQuiz = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.quizAnswerChanged = index.createEvent(this, "quizAnswerChanged", 7);
-    this.type = 'TEXT';
-    this.scale = 'FIVE-POINTS';
-    this.options = [];
   }
-  //   private pageInfo: any;
-  //   @Watch('questionId')
-  //   async loadQuestion() {
-  //     if (this.quizData) {
-  //       this.question = this.quizData[+this.questionId];
-  //     }
-  //   }
-  //@State() question: SparkleQuizQuestion;
-  //@State() quizData: { [key: string]: SparkleQuizQuestion };
+  async loadQuestion() {
+    if (this.quizData) {
+      this.question = this.quizData[+this.questionId];
+    }
+  }
   async componentWillLoad() { }
   async componentDidLoad() {
-    this.options = [];
-    if (this.el.querySelector("[slot='options']")) {
-      Array.from(this.el.querySelector("[slot='options']").querySelectorAll('option')).forEach(el => {
-        this.options = [...this.options, { option: el.innerText }];
-      });
-      console.log(this.questionText, this.options);
-    }
+    const config = environmentConfig_service.EnvironmentConfigService.getInstance().get('sparkle');
+    this.quizData = await assets_service.AssetsService.getInstance().loadJsonFile(config.quizPath);
+    await this.loadQuestion();
     this.quizAnswerChanged.emit({
       question: null,
       answer: '1',
@@ -62,58 +53,50 @@ const SparkleQuiz = class {
     });
   }
   getQuestionFeedback() {
-    if (this.type == 'MULTIPLE-CHOICE') {
-      //   const feedbacks = this.question.options.filter(x => x.correct == true).map(x => x.feedback);
-      //   return feedbacks.length > 0 && feedbacks.map(feedback => <small>{feedback}</small>);
-      return index.h("small", null);
+    if (this.question.questionType == 'MULTIPLE-CHOICE') {
+      const feedbacks = this.question.options.filter(x => x.correct == true).map(x => x.feedback);
+      return feedbacks.length > 0 && feedbacks.map(feedback => index.h("small", null, feedback));
     }
-    else if (this.type == 'FEEDBACK' || this.type == 'TEXT') {
-      return this.feedback && index.h("small", null, " ", this.feedback);
+    else if (this.question.questionType == 'FEEDBACK' || this.question.questionType == 'TEXT') {
+      return this.question.feedback && index.h("small", null, " ", this.question.feedback);
     }
   }
   showAnswerStatus() {
     return index.h("div", null, this.correct ? index.h("strong", null, "Good job!") : index.h("strong", null, "Incorrect answer, please try again."));
   }
   renderQuestion() {
-    var question = {
-      questionId: this.questionId,
-      questionText: this.questionText,
-      questionType: this.type,
-      scale: this.scale,
-      showOptionNumber: this.showOptionNumber,
-      options: this.options,
-      //options: Array<SparkleQuizQuestionOption>;
-      feedback: this.feedback,
-    };
-    if (this.type == 'MULTIPLE-CHOICE') {
-      return index.h("sparkle-quiz-select", { question: question, allowMultiple: true });
+    if (this.question.questionType == 'MULTIPLE-CHOICE') {
+      return index.h("sparkle-quiz-select", { question: this.question, allowMultiple: true });
     }
-    else if (this.type == 'FEEDBACK') {
-      return index.h("sparkle-quiz-feedback", { question: question });
+    else if (this.question.questionType == 'FEEDBACK') {
+      return index.h("sparkle-quiz-feedback", { question: this.question });
     }
-    else if (this.type == 'TEXT') {
-      return index.h("sparkle-quiz-input", { question: question });
+    else if (this.question.questionType == 'TEXT') {
+      return index.h("sparkle-quiz-input", { question: this.question });
     }
-    else if (this.type == 'OPINION') {
-      return index.h("sparkle-quiz-opinion", { question: question });
+    else if (this.question.questionType == 'OPINION') {
+      return index.h("sparkle-quiz-opinion", { question: this.question });
     }
-    else if (this.type == 'POLL') {
-      return index.h("sparkle-quiz-poll", { question: question });
+    else if (this.question.questionType == 'POLL') {
+      return index.h("sparkle-quiz-poll", { question: this.question });
     }
   }
   render() {
-    if (this.questionText) {
+    if (this.question) {
       let classes = {
         correct: this.submitted && this.correct,
         incorrect: this.submitted && !this.correct,
       };
-      return (index.h("div", { class: classes, ref: el => (this.containerRef = el) }, index.h("div", { hidden: true }, index.h("slot", null)), this.renderQuestion(), this.submitted && this.showInstantResult && index.h("div", { class: "feedback-container" }, [this.showAnswerStatus(), this.getQuestionFeedback()])));
+      return (index.h("div", { class: classes }, this.renderQuestion(), this.submitted && this.showInstantResult && index.h("div", { class: "feedback-container" }, [this.showAnswerStatus(), this.getQuestionFeedback()])));
     }
     else {
       return index.h("p", null, "No question found.");
     }
   }
   get el() { return index.getElement(this); }
+  static get watchers() { return {
+    "questionId": ["loadQuestion"]
+  }; }
 };
 SparkleQuiz.style = sparkleQuizCss;
 

package/dist/cjs/{student.service-2e58f237.js → student.service-d8ec2551.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-const httpService = require('./httpService-7211d93b.js');
+const httpService = require('./httpService-d8a5b474.js');
 const auth_store = require('./auth.store-1e630a7d.js');
 
 const { state, onChange, reset } = auth_store.createStore({

package/dist/cjs/token.service-bfb0089b.js

@@ -0,0 +1,86 @@
+'use strict';
+
+const auth_store = require('./auth.store-1e630a7d.js');
+const localstorage_service = require('./localstorage.service-6346a41d.js');
+
+const AppConsts = {
+  AUTH_USER_LOCALSTORAGE: "CurrentUser",
+  userManagement: {
+    defaultAdminUserName: 'admin',
+  },
+  localization: {
+    defaultLocalizationSourceName: 'Test',
+  },
+  authorization: {
+    encrptedAuthTokenName: 'enc_auth_token',
+  }
+};
+
+class TokenService {
+  static getInstance() {
+    if (!TokenService.instance) {
+      TokenService.instance = new TokenService();
+    }
+    return TokenService.instance;
+  }
+  async getToken() {
+    let authUser = await localstorage_service.get(AppConsts.AUTH_USER_LOCALSTORAGE);
+    if (authUser && authUser.JWToken) {
+      if (new Date(authUser.ExpiresOn).getTime() > new Date().getTime()) {
+        return authUser.JWToken;
+      }
+    }
+    return null;
+  }
+  async getAuthUser() {
+    let authUser = await localstorage_service.get(AppConsts.AUTH_USER_LOCALSTORAGE);
+    if (authUser && authUser.JWToken) {
+      if (new Date(authUser.ExpiresOn).getTime() > new Date().getTime()) {
+        return authUser;
+      }
+    }
+    return null;
+  }
+  getAuthUserSync() {
+    let authUser = JSON.parse(localStorage.getItem(AppConsts.AUTH_USER_LOCALSTORAGE));
+    if (authUser && authUser.JWToken) {
+      if (new Date(authUser.ExpiresOn).getTime() > new Date().getTime()) {
+        return authUser;
+      }
+    }
+    return null;
+  }
+  getTokenSync() {
+    let authUser = JSON.parse(localStorage.getItem(AppConsts.AUTH_USER_LOCALSTORAGE));
+    if (authUser && authUser.JWToken) {
+      if (new Date(authUser.ExpiresOn).getTime() > new Date().getTime()) {
+        return authUser.JWToken;
+      }
+    }
+    return null;
+  }
+  async getTokenExpiry() {
+    let authUser = await localstorage_service.get(AppConsts.AUTH_USER_LOCALSTORAGE);
+    if (!authUser) {
+      return 0;
+    }
+    let timeDiff = 0;
+    if (authUser.ExpiresOn) {
+      timeDiff = new Date(authUser.ExpiresOn).getTime() - new Date().getTime();
+    }
+    return Math.max(0, timeDiff);
+  }
+  async saveAuthUser(authUser) {
+    auth_store.AuthStore.state.authUser = Object.assign({}, authUser);
+    auth_store.AuthStore.state.isAuthenticated = true;
+    await localstorage_service.set(AppConsts.AUTH_USER_LOCALSTORAGE, authUser);
+  }
+  async removeAuthUser() {
+    auth_store.AuthStore.state.authUser = null;
+    auth_store.AuthStore.state.isAuthenticated = false;
+    await localstorage_service.remove(AppConsts.AUTH_USER_LOCALSTORAGE);
+  }
+}
+
+exports.AppConsts = AppConsts;
+exports.TokenService = TokenService;

package/dist/cjs/{util-d383acb8.js → util-47e320b2.js}

@@ -2419,7 +2419,7 @@ function GetGoalAppData(title, description, category, percentage, goalText) {
     Description: description,
     Category: category,
     Percentage: percentage,
-    GoalText: goalText
+    GoalText: goalText,
   };
 }
 function MyMoodTemplate(feeling, intensity, location) {
@@ -2445,7 +2445,7 @@ class SparkleGlobal {
 SparkleGlobal.MY_GOALS_APP_ID = 1;
 SparkleGlobal.MY_HEALTH_APP_ID = 2;
 SparkleGlobal.MY_MOOD_APP_ID = 3;
-SparkleGlobal.LOCALSTORAGE_CLASSROOM_MODE = "SPARKLE_CLASSROOM_MODE";
+SparkleGlobal.LOCALSTORAGE_CLASSROOM_MODE = 'SPARKLE_CLASSROOM_MODE';
 function date(date) {
   return format(new Date(date), 'DD MMM YYYY');
 }

package/dist/collection/PrivateRoute.js

@@ -17,9 +17,9 @@ const Route = (_a) => {
   const Component = component;
   return (h("stencil-route", Object.assign({}, props, { routeRender: (props) => {
       if (!AuthStore.state.isAuthenticated)
-        return (h("stencil-router-redirect", { url: "/login" }));
+        return h("stencil-router-redirect", { url: "/login" });
       if (permission && !isGranted(permission)) {
-        return (h("stencil-router-redirect", { url: "/unauthorized" }));
+        return h("stencil-router-redirect", { url: "/unauthorized" });
       }
       return Component ? h(Component, Object.assign({}, props, props.componentProps)) : render(props);
     } })));

package/dist/collection/collection-manifest.json

@@ -21,6 +21,7 @@
     "./components/mini-apps/sparkle-mood/sparkle-mood.js",
     "./components/modal-image/modal-image.js",
     "./components/sparkle-animation-player/sparkle-animation-player.js",
+    "./components/sparkle-assignment/sparkle-assignment.js",
     "./components/sparkle-character-intro/sparkle-character-intro.js",
     "./components/sparkle-compass/sparkle-compass.js",
     "./components/sparkle-compass/sparkle-compass-post/sparkle-compass-post.js",
@@ -35,10 +36,10 @@
     "./components/sparkle-intro/sparkle-intro.js",
     "./components/sparkle-login/sparkle-login.js",
     "./components/sparkle-poll/sparkle-poll.js",
-    "./components/sparkle-quiz/sparkle-quiz-v1.js",
-    "./components/sparkle-quiz/sparkle-quiz/sparkle-quiz.js",
+    "./components/sparkle-quiz/sparkle-quiz.js",
     "./components/sparkle-quiz/sparkle-quiz-feedback/sparkle-quiz-feedback.js",
     "./components/sparkle-quiz/sparkle-quiz-input/sparkle-quiz-input.js",
+    "./components/sparkle-quiz/sparkle-quiz-old/sparkle-quiz-old.js",
     "./components/sparkle-quiz/sparkle-quiz-opinion/sparkle-quiz-opinion.js",
     "./components/sparkle-quiz/sparkle-quiz-poll/sparkle-quiz-poll.js",
     "./components/sparkle-quiz/sparkle-quiz-select/sparkle-quiz-select.js",

package/dist/collection/components/layout/facilitator/facilitator-page.js

@@ -71,7 +71,7 @@ export class FacilitatorPage {
     }
     path = /^\/docs\/pages\/[a-z]{2}\.json$/.test(path) ? path.replace('.json', '/index.json') : path;
     let lessonPath = this.getLessonPath(path);
-    console.log(lessonPath);
+    console.log("lessonPath", lessonPath);
     return fetch(path).then(this.validateFetch).then(this.handleNotesPage).catch(this.handleBadFetch) &&
       fetch(lessonPath).then(this.validateFetch).then(this.handleLessonNotesPage).catch(this.handleLessonNotesBadFetch);
   }
@@ -84,7 +84,7 @@ export class FacilitatorPage {
     if (path === null || path === oldPath) {
       return;
     }
-    if (SignalRService.getInstance().connection.connectionState == "Connected") {
+    if (SignalRService.getInstance().connection._connectionState == "Connected") {
       SignalRService.getInstance().callSignalR("NavigateFacilitatorPresentationCourseTo", { url: this.path.replace(".json", "") });
     }
     path = /^\/docs\/pages\/[a-z]{2}\.json$/.test(path) ? path.replace('.json', '/index.json') : path;
@@ -185,7 +185,6 @@ export class FacilitatorPage {
     return h(Template, { page: notesPage });
   }
   render() {
-    console.log(facilitatorStore.state.classes);
     const { page } = this;
     const content = this.renderTabs();
     return h("div", { class: "container" },

package/dist/collection/components/layout/page/page.css

@@ -177,3 +177,7 @@ sparkle-page .controls {
   display: flex;
   justify-content: flex-end;
 }
+
+.controls ion-button ion-icon {
+  color: #fff;
+}

package/dist/collection/components/layout/page/page.js

@@ -3,7 +3,7 @@ import templates from './templates';
 import { modalController, alertController } from '@ionic/core';
 import { AuthStore } from '../../../stores/auth.store';
 import userStore from '../../../stores/user.store';
-import { StoreService } from "../../../services/store.service";
+import { StoreService } from '../../../services/store.service';
 import { SignalRService } from '../../../services/signalR.service';
 import signalRStore from '../../../stores/signalR.store';
 export class SparklePage {
@@ -11,7 +11,15 @@ export class SparklePage {
     this.presentation = false;
     this.page = { title: null, path: null, body: null, pageInfo: null };
     this.isLesson = false;
-    this.handleFacilitatorNavigationChange = (url) => {
+    this.eventEmitter = (user, data) => {
+      let event = new CustomEvent('receivedSignalREvent', { detail: JSON.parse(data) });
+      document.body.dispatchEvent(event);
+    };
+    this.pollSubmissionEventEmitter = (type, data) => {
+      let event = new CustomEvent('receivedPollSubmissionSignalREvent', { detail: { data: data, type: type } });
+      document.body.dispatchEvent(event);
+    };
+    this.handleFacilitatorNavigationChange = url => {
       this.history.replace(url, {});
     };
     this.validateFetch = (response) => {
@@ -24,7 +32,7 @@ export class SparklePage {
       this.badFetch = null;
       this.page = page;
       if (this.presentation) {
-        this.page = Object.assign(Object.assign({}, this.page), { previousUrl: "/presentation" + this.page.previousUrl, nextUrl: "/presentation" + this.page.nextUrl });
+        this.page = Object.assign(Object.assign({}, this.page), { previousUrl: '/presentation' + this.page.previousUrl, nextUrl: '/presentation' + this.page.nextUrl });
       }
       StoreService.getInstance().UpdateTocPageInfo(this.page.pageInfo);
       this.isLesson = this.page.pageInfo.pageId > 0;
@@ -36,7 +44,7 @@ export class SparklePage {
         title: error.statusText,
         body: null,
         path: null,
-        pageInfo: null
+        pageInfo: null,
       };
     };
   }
@@ -47,19 +55,25 @@ export class SparklePage {
   }
   componentDidLoad() {
     if (this.presentation) {
-      signalRStore.onChange("connected", (connected) => {
+      signalRStore.onChange('connected', connected => {
         if (connected) {
-          SignalRService.getInstance().connection.on("NavigateFacilitatorPresentationCourseTo", this.handleFacilitatorNavigationChange);
+          SignalRService.getInstance().connection.on('SendMessage', this.eventEmitter);
+          SignalRService.getInstance().connection.on('NavigateFacilitatorPresentationCourseTo', this.handleFacilitatorNavigationChange);
+          SignalRService.getInstance().connection.on('PollSubmission', this.pollSubmissionEventEmitter);
+        }
+        else {
+          SignalRService.getInstance().connection.off('SendMessage', this.eventEmitter);
+          SignalRService.getInstance().connection.off('PollSubmission', this.eventEmitter);
+          SignalRService.getInstance().connection.off('NavigateFacilitatorPresentationCourseTo', this.handleFacilitatorNavigationChange);
         }
       });
     }
   }
   fetchPage(path, oldPath) {
-    if (SignalRService.getInstance().connection.connectionState == "Connected") {
-      SignalRService.getInstance().callSignalR("OnStudentNavigate", { url: window.location.href });
+    if (SignalRService.getInstance().connection._connectionState == 'Connected') {
+      SignalRService.getInstance().callSignalR('OnStudentNavigate', { url: window.location.href });
       if (this.presentation) {
-        console.log('register listener');
-        SignalRService.getInstance().connection.on("NavigateFacilitatorPresentationCourseTo", this.handleFacilitatorNavigationChange);
+        SignalRService.getInstance().connection.on('NavigateFacilitatorPresentationCourseTo', this.handleFacilitatorNavigationChange);
       }
     }
     if (path === null || path === oldPath) {
@@ -130,7 +144,7 @@ export class SparklePage {
   async presentFeedbackModal() {
     const modal = await modalController.create({
       component: 'sparkle-feedback',
-      cssClass: 'sparkle-modal sparkle-feedback-modal'
+      cssClass: 'sparkle-modal sparkle-feedback-modal',
     });
     await modal.present();
   }
@@ -161,22 +175,21 @@ export class SparklePage {
           text: 'Cancel',
           role: 'cancel',
           cssClass: 'secondary',
-          handler: () => {
-          }
-        }, {
+          handler: () => { },
+        },
+        {
           text: 'Ok',
-          handler: (data) => {
-          }
-        }
-      ]
+          handler: data => { },
+        },
+      ],
     });
     await alert.present();
   }
   openWindows() {
     //this.jwtService.updateDefaultCourseClassId(data);
-    window.open(window.location.origin + "/presentation" + this.path.replace(".json", ""), "_blank");
+    window.open(window.location.origin + '/presentation' + this.path.replace('.json', ''), '_blank');
     setTimeout(() => {
-      window.open(window.location.origin + "/presentation" + '/teacher' + this.path.replace(".json", ""), "_blank");
+      window.open(window.location.origin + '/presentation' + '/teacher' + this.path.replace('.json', ''), '_blank');
     }, 500);
   }
   renderControls() {
@@ -184,10 +197,10 @@ export class SparklePage {
       return (h("div", { class: "controls" },
         h("ion-button", { onClick: () => this.presentFeedbackModal() },
           h("ion-icon", { name: "chatbox-outline" })),
-        this.isLesson && userStore.state.user && userStore.state.user.Roles.indexOf('Facilitator') > -1 && h("ion-button", { onClick: () => this.openProjectorPage() },
-          h("ion-icon", { name: "desktop-outline" }))));
+        this.isLesson && userStore.state.user && userStore.state.user.Roles.indexOf('Facilitator') > -1 && (h("ion-button", { onClick: () => this.openProjectorPage() },
+          h("ion-icon", { name: "desktop-outline" })))));
     }
-    return "";
+    return '';
   }
   render() {
     if (this.path) {
@@ -199,13 +212,13 @@ export class SparklePage {
       const content = [
         h("main", { class: 'no-demo' },
           this.renderControls(),
-          h(Template, { page: page }))
+          h(Template, { page: page })),
       ];
       return content;
     }
     else {
-      return h("main", { class: 'no-demo' },
-        h("slot", null));
+      return (h("main", { class: 'no-demo' },
+        h("slot", null)));
     }
   }
   static get is() { return "sparkle-page"; }

package/dist/collection/components/sparkle-assignment/sparkle-assignment.css

@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}

package/dist/collection/components/sparkle-assignment/sparkle-assignment.js

@@ -0,0 +1,25 @@
+import { Component, Element, State, Host, h } from '@stencil/core';
+export class SparkleAssignment {
+  constructor() {
+    this.submitted = true;
+  }
+  async onSubmit(e) {
+    e.preventDefault();
+    this.submitted = true;
+    let isFormValid = true;
+  }
+  render() {
+    return h(Host, null, "Assignment");
+  }
+  static get is() { return "sparkle-assignment"; }
+  static get originalStyleUrls() { return {
+    "$": ["sparkle-assignment.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["sparkle-assignment.css"]
+  }; }
+  static get states() { return {
+    "submitted": {}
+  }; }
+  static get elementRef() { return "el"; }
+}

package/dist/collection/components/sparkle-character-intro/sparkle-character-intro.css

@@ -8,6 +8,13 @@ sparkle-character-intro .character-phrase-block {
   align-items: center;
   padding: 20px;
 }
+sparkle-character-intro.shift-up .character-phrase-block {
+  padding-top: 0px !important;
+}
+sparkle-character-intro.shift-up-overlap .character-phrase-block {
+  padding-top: 0px !important;
+  margin-top: -50px !important;
+}
 sparkle-character-intro .character-phrase-block.right {
   justify-content: flex-end;
 }
@@ -21,7 +28,7 @@ sparkle-character-intro .character-phrase-block.left .character-image-block {
   order: 1;
 }
 sparkle-character-intro .character-box {
-  min-width: 300px;
+  width: 80%;
   border-radius: 15px;
   background: var(--sparkle-character-background-color);
   color: var(--text-color);

package/dist/collection/components/sparkle-character-intro/sparkle-character-intro.js

@@ -1,4 +1,4 @@
-import { Component, Element, Prop, getAssetPath, h } from '@stencil/core';
+import { Component, Element, Prop, getAssetPath, Host, h } from '@stencil/core';
 export class SparkleCharacterIntro {
   constructor() {
     this.character = 'jen';
@@ -8,11 +8,12 @@ export class SparkleCharacterIntro {
     console.log(this.character);
   }
   render() {
-    return (h("div", { class: `character-phrase-block ${this.position}` },
-      h("div", { class: `character-box ${this.position}` },
-        h("slot", null)),
-      h("div", { class: `character-image-block ${this.position}` },
-        h("img", { class: "image-animation", src: getAssetPath('./assets/characters/' + this.character + '.png') }))));
+    return (h(Host, null,
+      h("div", { class: `character-phrase-block ${this.position}` },
+        h("div", { class: `character-box ${this.position}` },
+          h("slot", null)),
+        h("div", { class: `character-image-block ${this.position}` },
+          h("img", { class: "image-animation", src: getAssetPath('./assets/characters/' + this.character + '.png') })))));
   }
   static get is() { return "sparkle-character-intro"; }
   static get originalStyleUrls() { return {
@@ -62,3 +63,6 @@ export class SparkleCharacterIntro {
   }; }
   static get elementRef() { return "el"; }
 }
+//README
+//To set custom margin top use following class selector
+//sparkle-character-intro.shift-up-overlap .character-phrase-block { maring-top:-100px !important;}

package/dist/collection/components/sparkle-course-root/sparkle-course-root.js

@@ -1,4 +1,4 @@
-import { Component, State, Event, Watch, Build, h } from '@stencil/core';
+import { Component, State, Event, Watch, Build, h, Listen } from '@stencil/core';
 import { injectHistory } from '@stencil/router';
 import { PrivateRoute } from '../../PrivateRoute';
 import { AssetsService } from '../../services/core/assets.service';
@@ -14,7 +14,7 @@ export class SparkleCourseRoot {
     this.config = {
       appUrl: 'http://localhost:3333',
       globalAssetsUrl: 'http://localhost:3333/assets',
-      apiUrl: 'https://localhost:44399/',
+      apiUrl: 'https://localhost:44369/',
       quizPath: this.quizPath,
       tocPath: this.tocPath,
       menu: {
@@ -63,6 +63,10 @@ export class SparkleCourseRoot {
     var sidebar = document.getElementById('onlineStudents');
     await sidebar.show();
   }
+  useDidLogin(event) {
+    console.log('Received the userDidLogInevent: ', event.detail);
+    return h("stencil-router-redirect", { url: "/home" });
+  }
   renderPage(path) {
     return (h("stencil-route", { url: '/' + path, routeRender: props => [
         this.renderHeaderAndMenu(),
@@ -181,5 +185,12 @@ export class SparkleCourseRoot {
       "propName": "isMenuToggled",
       "methodName": "lockScroll"
     }]; }
+  static get listeners() { return [{
+      "name": "userDidLogIn",
+      "method": "useDidLogin",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }]; }
 }
 injectHistory(SparkleCourseRoot);

package/dist/collection/components/sparkle-discussion/sparkle-discussion-questions/sparkle-discussion-questions.js

@@ -23,9 +23,10 @@ export class SparkleDiscussionQuestions {
     //console.log(question, option);
     SignalRService.getInstance().callSignalR('PollSubmission', {
       questionId: question.questionId,
-      question: question.question,
+      question: question.questionText,
       answer: option.option,
-      responseType: question.responseType,
+      responseType: question.questionType,
+      pageUrl: window.location.href,
     });
   }
   addSuggestion(evt, question) {
@@ -39,6 +40,7 @@ export class SparkleDiscussionQuestions {
         question: question.questionText,
         answer: inputVal.value,
         responseType: question.questionType,
+        pageUrl: window.location.href,
       });
       //   this.dataSvc.callSignalR(
       //     {