@sparkle-learning/core 0.0.52 → 0.0.53

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,230 @@
+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.question,
+      answer: option.option,
+      responseType: question.responseType,
+    });
+  }
+  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,
+      });
+      //   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"; }
+}

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;
+}