@sparkle-learning/core 0.0.52 → 0.0.54

package/dist/collection/components/sparkle-discussion/sparkle-discussion-results/sparkle-discussion-results.css

@@ -0,0 +1,158 @@
+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: rgba(var(--ion-color-sparkle-rgb), var(--bg-alpha, 0.06));
+  flex: 0 0 auto;
+  text-align: center;
+  color: #c0873c;
+  flex-basis: 100px;
+  margin-bottom: 14px;
+}
+.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-results/sparkle-discussion-results.js

@@ -0,0 +1,274 @@
+import { Component, Element, State, Prop, Listen, h, Watch } from '@stencil/core';
+import { SignalRService } from '../../../services/signalR.service';
+import signalRStore from '../../../stores/signalR.store';
+export class SparkleDiscussionResults {
+  constructor() {
+    this.allowPostToFeed = false;
+    this.feedStartingText = 'My suggestions are:';
+    this.isTeacherMode = false;
+    this.questions = [];
+    this.error = '';
+    this.modelChange = '';
+    this.responses = [];
+    this.tempResponses = [];
+    this.suggestionList = [];
+  }
+  questionsChaged(newValue, _oldValue) {
+    this.setupData(newValue);
+  }
+  //Any child component can liste for server events like
+  gotServerUpdate(evt) {
+    if (this.isTeacherMode) {
+      var detail = evt.detail;
+      if (detail.type == 'list') {
+        detail.data.forEach(element => {
+          if (element.responseType == 'TEXT') {
+            this.addToWordCloud(element);
+          }
+          else if (element.responseType == 'MULTIPLE-CHOICE') {
+            this.addToBarChart(element);
+          }
+        });
+      }
+      else if (detail.type == 'removed') {
+        this.responses = [...this.tempResponses];
+      }
+      else {
+        detail = detail.data;
+        if (detail.responseType == 'TEXT') {
+          this.addToWordCloud(detail);
+        }
+        else if (detail.responseType == 'MULTIPLE-CHOICE') {
+          this.addToBarChart(detail);
+        }
+      }
+    }
+  }
+  addToWordCloud(q) {
+    var isExistObj = this.responses.find(x => x.question == q.question);
+    if (isExistObj) {
+      this.responses = this.responses.map(resp => {
+        if (resp.question == q.question) {
+          return q;
+        }
+        return resp;
+      });
+    }
+    else {
+      this.responses = [...this.responses, q];
+    }
+    console.log(this.responses);
+  }
+  addToBarChart(q) {
+    var isExistObj = this.responses.find(x => x.question == q.question);
+    if (isExistObj) {
+      isExistObj.responses = isExistObj.responses.map(resp => {
+        var correctData = q.responses.find(x => x.response == resp.response);
+        if (correctData) {
+          return correctData;
+        }
+        return resp;
+      });
+      isExistObj.total = q.total;
+      this.responses = this.responses.map(resp => {
+        if (resp.question == isExistObj.question) {
+          return isExistObj;
+        }
+        return resp;
+      });
+    }
+    else {
+      this.responses = [...this.responses, q];
+    }
+  }
+  componentDidLoad() {
+    if (this.questions) {
+      this.setupData(this.questions);
+      signalRStore.onChange('connected', connected => {
+        if (connected && this.isTeacherMode) {
+          SignalRService.getInstance().callSignalR('GetPollSubmission', { pageUrl: window.location.href });
+        }
+      });
+    }
+  }
+  setupData(questions) {
+    this.setupResponseGraph(questions);
+    // if (this.isTeacherMode) {
+    //   SignalRService.getInstance().callSignalR('GetPollSubmission', {});
+    // }
+  }
+  resetPollData() {
+    SignalRService.getInstance().callSignalR('ResetPollData', {});
+  }
+  setupResponseGraph(questions) {
+    this.responses = [];
+    questions.forEach(q => {
+      if (q.questionType == 'TEXT') {
+        this.responses = [
+          ...this.responses,
+          {
+            question: q.questionText,
+            responseType: q.questionType,
+            responses: [],
+            total: 0,
+          },
+        ];
+        this.tempResponses = this.responses.slice();
+      }
+      else if (q.questionType == 'MULTIPLE-CHOICE') {
+        var answer = [];
+        Object.keys(q.options).map((o) => {
+          answer.push({ count: 0, response: q.options[o].option });
+        });
+        this.responses = [...this.responses, { question: q.questionText, responseType: q.questionType, responses: answer, total: 0 }];
+        this.tempResponses = this.responses.slice();
+      }
+    });
+    console.log(this.responses);
+  }
+  columnHeight(responseCount, totalResponseCount) {
+    let maxScale = 100;
+    let scaleUnit = 0;
+    if (totalResponseCount != 0) {
+      scaleUnit = maxScale / totalResponseCount;
+    }
+    var size = scaleUnit * responseCount;
+    return { height: `${size}px` };
+  }
+  getRandomColorAndFontSize(count) {
+    const h = Math.floor(Math.random() * 360), s = Math.floor(Math.random() * 100) + '%', l = Math.floor(Math.random() * 60) + '%';
+    let fontSize = 1;
+    if (count > 0) {
+      fontSize = fontSize + (count - 1) * 0.25;
+    }
+    return { 'color': `hsl(${h},${s},${l})`, 'font-size': `${fontSize}em` };
+  }
+  renderResults() {
+    console.log('Responsed', this.responses);
+    var barResponses = this.responses.filter(x => x.responseType == 'MULTIPLE-CHOICE');
+    var cloudResponses = this.responses.filter(x => x.responseType == 'TEXT');
+    return [
+      // <ion-button size="default" slot="end" color="primary" onClick={(evt) => this.resetPollData()} >Reset</ion-button>,
+      barResponses.map((q) => (h("div", null,
+        ' ',
+        h("h3", { class: "line" }, q.question),
+        h("div", { class: "graph-container" },
+          h("div", { class: "bar-graph-column" }, q.responses.map(r => (h("div", { class: "answer-column", style: this.columnHeight(r.count, q.total) }, r.count)))),
+          h("div", { class: "bar-graph-questions" }, q.responses.map(r => (h("div", { class: 'question' },
+            h("p", null, r.response))))))))),
+      cloudResponses.map(q => [
+        h("p", null,
+          h("h3", { class: "line" }, q.question)),
+        h("div", { class: "cloud" }, q.responses.map(r => (h("div", { style: this.getRandomColorAndFontSize(r.count) }, r.response)))),
+      ]),
+    ];
+  }
+  render() {
+    return this.renderResults();
+  }
+  static get is() { return "sparkle-discussion-results"; }
+  static get originalStyleUrls() { return {
+    "$": ["sparkle-discussion-results.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["sparkle-discussion-results.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"
+    },
+    "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": {}
+  }; }
+  static get elementRef() { return "el"; }
+  static get watchers() { return [{
+      "propName": "questions",
+      "methodName": "questionsChaged"
+    }]; }
+  static get listeners() { return [{
+      "name": "receivedPollSubmissionSignalREvent",
+      "method": "gotServerUpdate",
+      "target": "body",
+      "capture": false,
+      "passive": false
+    }]; }
+}

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

@@ -0,0 +1,5 @@
+sparkle-discussion{
+    border: 1px solid var(--line-rule-color);
+    display: block;
+    padding: 12px;
+}

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

@@ -0,0 +1,112 @@
+import { Component, Element, State, Prop, h } from '@stencil/core';
+import { AssetsService, EnvironmentConfigService } from '../../services';
+export class SparkleDiscussion {
+  constructor() {
+    this.allowPostToFeed = false;
+    this.feedStartingText = 'My suggestions are:';
+    this.isTeacherMode = false;
+    this.quizData = [];
+  }
+  async componentDidLoad() {
+    this.isTeacherMode = this.isTeacherMode == false ? window.location.href.indexOf('/presentation/course') > -1 : this.isTeacherMode;
+    const config = EnvironmentConfigService.getInstance().get('sparkle');
+    let allQuizData = await AssetsService.getInstance().loadJsonFile(config.quizPath);
+    if (allQuizData) {
+      if (this.questionIds) {
+        let questionIds = this.questionIds.split(',');
+        this.quizData = [];
+        questionIds.forEach(id => {
+          this.quizData = [...this.quizData, allQuizData[+id]];
+        });
+        console.log('QUIZ Data', this.quizData);
+      }
+    }
+  }
+  render() {
+    return this.isTeacherMode ? (h("sparkle-discussion-results", { allowPostToFeed: this.allowPostToFeed, feedStartingText: this.feedStartingText, isTeacherMode: this.isTeacherMode, questions: this.quizData })) : (h("sparkle-discussion-questions", { allowPostToFeed: this.allowPostToFeed, feedStartingText: this.feedStartingText, isTeacherMode: this.isTeacherMode, questions: this.quizData }));
+  }
+  static get is() { return "sparkle-discussion"; }
+  static get originalStyleUrls() { return {
+    "$": ["sparkle-discussion.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["sparkle-discussion.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"
+    },
+    "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": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "is-teacher-mode",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "questionIds": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "question-ids",
+      "reflect": false
+    }
+  }; }
+  static get states() { return {
+    "quizData": {}
+  }; }
+  static get elementRef() { return "el"; }
+}