@sparkle-learning/core 0.0.52 → 0.0.54

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-animation-player/sparkle-animation-player.js

@@ -282,6 +282,7 @@ export class SparkleAnimationPlayer {
         this.captionText = this.captionData[Math.floor(this.timeline.position / this.library.properties.fps)];
       }
       if (this.timeline.position % 10 == 0) {
+        console.log(this.timeline.duration - 10, this.timeline.position);
         if (this.timeline.position > (this.timeline.duration - 10)) {
           this.animationCompleted();
         }

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';
@@ -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.css

@@ -0,0 +1,157 @@
+div.question {
+  margin-bottom: 5px;
+}
+div.question ul {
+  padding-left: 5px;
+}
+div.question li {
+  list-style-type: none;
+  cursor: pointer;
+  background: #e5053a;
+  border-radius: 4px;
+  vertical-align: middle;
+  line-height: 40px;
+  padding-left: 20px;
+  color: #fff;
+  margin-bottom: 5px;
+}
+.question h3 {
+  color: #333;
+  padding-top: 14px;
+  margin-bottom: 4px;
+  font-size: 16px;
+}
+div.question li.selected {
+  font-weight: bold;
+  background: #9e0428;
+}
+input[type='text'] {
+  width: 100%;
+  padding: 12px 20px;
+  margin: 8px 0;
+  box-sizing: border-box;
+  border: 2px solid #ccc;
+  -webkit-transition: 0.5s;
+  transition: 0.5s;
+  outline: none;
+}
+
+input[type='text']:focus {
+  border: 2px solid var(--ion-color-primary);
+}
+ion-item .item-native {
+  padding-left: 0px !important;
+}
+ion-button.suggetion-btn {
+  margin-left: 0px !important;
+}
+
+/* ion-alert {
+        .alert-wrapper {
+          --min-width: 320px;
+          border: 1px solid #e5053a !important;
+        }
+        .alert-button {
+          background-color: var(--ion-color-primary);
+          color: #fff;
+        }
+        .alert-button-group button {
+          background-color: var(--ion-color-primary) !important;
+          color: #fff !important;
+        }
+        .alert-button-group {
+          justify-content: space-between !important;
+          padding: 10px 12px 10px 24px !important;
+        }
+        .alert-radio-icon {
+          display: none !important;
+        }
+        .alert-head {
+          display: none;
+        }
+        .alert-radio-label {
+          padding: 13px 26px 13px 34px !important;
+        }
+        .alert-radio-group {
+          padding: 20px 0px !important;
+          border-bottom: none !important;
+        }
+        .alert-radio-button {
+          &[aria-checked="true"] {
+            border-top: 1px solid #e5053a !important;
+            border-bottom: 1px solid #e5053a !important;
+            .alert-radio-label {
+              color: #e5053a !important;
+            }
+          }
+        }
+        ion-backdrop {
+          opacity: 0.1 !important;
+        }
+      }
+      ion-item {
+        ion-label {
+          color: var(--ion-color-primary) !important;
+          ion-icon {
+            transform: rotate(-90deg) !important;
+          }
+        }
+      }
+       */
+.graph-container {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  flex-direction: column;
+}
+.graph-container .question-title {
+  width: 100%;
+}
+.graph-container div.question {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  flex-basis: 100px;
+}
+.graph-container div.question p {
+  text-align: center;
+}
+.answer-column {
+  background-color: antiquewhite;
+  flex: 0 0 auto;
+  text-align: center;
+  color: #c0873c;
+  flex-basis: 100px;
+}
+.toggle-mode {
+  color: #888;
+}
+
+.cloud {
+  display: inline;
+  list-style-type: none;
+  width: 400px;
+}
+.cloud > div {
+  list-style: none;
+  display: inline;
+  padding: 20px;
+}
+.cloud > div:nth-of-type(3n + 1) {
+  font-size: 1.25em;
+}
+.cloud > div:nth-of-type(4n + 3) {
+  font-size: 1.5em;
+}
+.cloud > div:nth-of-type(5n - 3) {
+  font-size: 1em;
+}
+
+.bar-graph-column {
+  display: flex;
+  align-items: flex-end;
+}
+.bar-graph-questions {
+  display: flex;
+  align-items: flex-start;
+}

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

@@ -0,0 +1,232 @@
+import { Component, Element, State, Prop, h } from '@stencil/core';
+import { SignalRService } from '../../../services/signalR.service';
+export class SparkleDiscussionQuestions {
+  constructor() {
+    this.allowPostToFeed = false;
+    this.feedStartingText = 'My suggestions are:';
+    this.isTeacherMode = false;
+    this.questions = [];
+    this.error = '';
+    this.modelChange = '';
+    this.responses = [];
+    this.tempResponses = [];
+    this.suggestionList = [];
+    this.postToFeedTextValue = '';
+  }
+  componentDidLoad() { }
+  resetPollData() {
+    SignalRService.getInstance().callSignalR('ResetPollData', {});
+  }
+  selectOption(evt, question, option) {
+    evt.target.parentElement.childNodes.forEach(e => e.classList.remove('selected'));
+    evt.target.classList.add('selected');
+    //console.log(question, option);
+    SignalRService.getInstance().callSignalR('PollSubmission', {
+      questionId: question.questionId,
+      question: question.questionText,
+      answer: option.option,
+      responseType: question.questionType,
+      pageUrl: window.location.href,
+    });
+  }
+  addSuggestion(evt, question) {
+    var inputVal = evt.target.parentElement.parentElement.querySelector('input[type=text]');
+    if (inputVal.value == '' || !inputVal.value) {
+      this.error = 'Please enter the value';
+    }
+    else {
+      SignalRService.getInstance().callSignalR('PollSubmission', {
+        questionId: question.questionId,
+        question: question.questionText,
+        answer: inputVal.value,
+        responseType: question.questionType,
+        pageUrl: window.location.href,
+      });
+      //   this.dataSvc.callSignalR(
+      //     {
+      //       questionId: question.questionId,
+      //       question: question.question,
+      //       answer: inputVal.value,
+      //       responseType: question.responseType,
+      //     },
+      //     'PollSubmission',
+      //     true,
+      //   );
+      //&& question.updateFeedText
+      if (this.allowPostToFeed) {
+        this.suggestionList.push({ questionId: question.questionId, question: question.questionText, answer: inputVal.value, responseType: question.questionType });
+        let value = this.suggestionList
+          .map(x => x.answer)
+          .join(', ')
+          .toString();
+        this.postToFeedTextValue = this.feedStartingText + ' ' + value;
+      }
+    }
+  }
+  // async presentToast(message: string) {
+  //     const toast = await this.toastCtrl.create({
+  //         message: message,
+  //         duration: 2000
+  //     });
+  //     await toast.present();
+  // }
+  toggleMode() {
+    this.isTeacherMode = !this.isTeacherMode;
+  }
+  renderOptions(question) {
+    if (question.questionType == 'MULTIPLE-CHOICE') {
+      return (h("ul", null, question.options.map(opt => (h("li", { onClick: evt => this.selectOption(evt, question, opt) }, opt.option)))));
+    }
+    else if (question.questionType == 'FEEDBACK') {
+      let options = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+      return (h("ion-item", null,
+        h("ion-label", null,
+          "Choose Option ",
+          h("ion-icon", { name: "arrow-back", mode: "ios" })),
+        h("ion-select", { id: "customAlertSelect", interface: "alert" },
+          h("ion-select-option", { value: "bacon" }, "Bacon"),
+          h("ion-select-option", { value: "olives" }, "Black Olives"),
+          h("ion-select-option", { value: "xcheese" }, "Extra Cheese"),
+          h("ion-select-option", { value: "peppers" }, "Green Peppers"),
+          h("ion-select-option", { value: "mushrooms" }, "Mushrooms"),
+          h("ion-select-option", { value: "onions" }, "Onions"),
+          h("ion-select-option", { value: "pepperoni" }, "Pepperoni"),
+          h("ion-select-option", { value: "pineapple" }, "Pineapple"),
+          h("ion-select-option", { value: "sausage" }, "Sausage"),
+          h("ion-select-option", { value: "Spinach" }, "Spinach"))));
+    }
+    else {
+      return (h("div", null,
+        h("input", { slot: "start", type: "text", placeholder: "Type suggestion" }),
+        h("div", null, this.error),
+        h("ion-item", null,
+          h("ion-button", { class: "suggetion-btn", size: "default", slot: "end", color: "primary", onClick: evt => this.addSuggestion(evt, question) }, "ADD SUGGESTION"))));
+    }
+  }
+  renderQuestions() {
+    return [
+      this.questions.map(q => (h("div", { class: 'question' },
+        h("h3", null,
+          q.questionText,
+          ' ',
+          h("span", { class: "toggle-mode", onClick: () => this.toggleMode() }, ".")),
+        this.renderOptions(q)))),
+      this.allowPostToFeed ? h("sparkle-feed-post", { assignmentName: this.postToFeedAssignmentName, textValue: this.postToFeedTextValue }) : '',
+    ];
+  }
+  render() {
+    return this.renderQuestions();
+  }
+  static get is() { return "sparkle-discussion-questions"; }
+  static get originalStyleUrls() { return {
+    "$": ["sparkle-discussion-questions.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["sparkle-discussion-questions.css"]
+  }; }
+  static get properties() { return {
+    "allowPostToFeed": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "allow-post-to-feed",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "postToFeedAssignmentName": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "post-to-feed-assignment-name",
+      "reflect": false
+    },
+    "feedStartingText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "feed-starting-text",
+      "reflect": false,
+      "defaultValue": "'My suggestions are:'"
+    },
+    "isTeacherMode": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "is-teacher-mode",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "questions": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "Array<SparkleQuizQuestion>",
+        "resolved": "SparkleQuizQuestion[]",
+        "references": {
+          "Array": {
+            "location": "global"
+          },
+          "SparkleQuizQuestion": {
+            "location": "import",
+            "path": "../../../models/quiz.model"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "defaultValue": "[]"
+    }
+  }; }
+  static get states() { return {
+    "error": {},
+    "modelChange": {},
+    "responses": {},
+    "suggestionList": {},
+    "postToFeedTextValue": {}
+  }; }
+  static get elementRef() { return "el"; }
+}