@sparkle-learning/core 0.0.34 → 0.0.37

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

@@ -0,0 +1,327 @@
+import { Component, Prop, Listen, State, Event, Element, h } from '@stencil/core';
+export class SparkleQuiz {
+  constructor() {
+    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 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);
+    }
+    this.quizAnswerChanged.emit({
+      question: null,
+      answer: '1',
+    });
+  }
+  quizInputChangeHandler(event) {
+    this.quizAnswerChanged.emit({
+      question: event.detail.question,
+      answer: event.detail.value,
+    });
+  }
+  quizFeedbackChangeHandler(event) {
+    this.quizAnswerChanged.emit({
+      question: event.detail.question,
+      answer: event.detail.value,
+    });
+  }
+  quizSelectChangeHandler(event) {
+    this.quizAnswerChanged.emit({
+      question: event.detail.question,
+      answer: event.detail.value,
+    });
+  }
+  quizOpinionChangeHandler(event) {
+    this.quizAnswerChanged.emit({
+      question: event.detail.question,
+      answer: event.detail.value,
+    });
+  }
+  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 h("small", null);
+    }
+    else if (this.type == 'FEEDBACK' || this.type == 'TEXT') {
+      return this.feedback && h("small", null,
+        " ",
+        this.feedback);
+    }
+  }
+  showAnswerStatus() {
+    return h("div", null, this.correct ? h("strong", null, "Good job!") : 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 h("sparkle-quiz-select", { question: question, allowMultiple: true });
+    }
+    else if (this.type == 'FEEDBACK') {
+      return h("sparkle-quiz-feedback", { question: question });
+    }
+    else if (this.type == 'TEXT') {
+      return h("sparkle-quiz-input", { question: question });
+    }
+    else if (this.type == 'OPINION') {
+      return h("sparkle-quiz-opinion", { question: question });
+    }
+    else if (this.type == 'POLL') {
+      return h("sparkle-quiz-poll", { question: question });
+    }
+  }
+  render() {
+    if (this.questionText) {
+      let classes = {
+        correct: this.submitted && this.correct,
+        incorrect: this.submitted && !this.correct,
+      };
+      return (h("div", { class: classes, ref: el => (this.containerRef = el) },
+        h("div", { hidden: true },
+          h("slot", null)),
+        this.renderQuestion(),
+        this.submitted && this.showInstantResult && h("div", { class: "feedback-container" }, [this.showAnswerStatus(), this.getQuestionFeedback()])));
+    }
+    else {
+      return h("p", null, "No question found.");
+    }
+  }
+  static get is() { return "sparkle-quiz"; }
+  static get originalStyleUrls() { return {
+    "$": ["sparkle-quiz.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["sparkle-quiz.css"]
+  }; }
+  static get properties() { return {
+    "questionId": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "question-id",
+      "reflect": false
+    },
+    "type": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'MULTIPLE-CHOICE' | 'TEXT' | 'FEEDBACK' | 'OPINION' | 'POLL'",
+        "resolved": "\"FEEDBACK\" | \"MULTIPLE-CHOICE\" | \"OPINION\" | \"POLL\" | \"TEXT\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "type",
+      "reflect": false,
+      "defaultValue": "'TEXT'"
+    },
+    "scale": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'FIVE-POINTS' | 'TEN-POINTS'",
+        "resolved": "\"FIVE-POINTS\" | \"TEN-POINTS\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "scale",
+      "reflect": false,
+      "defaultValue": "'FIVE-POINTS'"
+    },
+    "questionText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "question-text",
+      "reflect": false
+    },
+    "showOptionNumber": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "show-option-number",
+      "reflect": false
+    },
+    "submitted": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "submitted",
+      "reflect": false
+    },
+    "correct": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "correct",
+      "reflect": false
+    },
+    "feedback": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "feedback",
+      "reflect": false
+    },
+    "showInstantResult": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "show-instant-result",
+      "reflect": false
+    }
+  }; }
+  static get states() { return {
+    "options": {}
+  }; }
+  static get events() { return [{
+      "method": "quizAnswerChanged",
+      "name": "quizAnswerChanged",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "{ answer: any; question: SparkleQuizQuestion }",
+        "resolved": "{ answer: any; question: SparkleQuizQuestion; }",
+        "references": {
+          "SparkleQuizQuestion": {
+            "location": "import",
+            "path": "../../../models/quiz.model"
+          }
+        }
+      }
+    }]; }
+  static get elementRef() { return "el"; }
+  static get listeners() { return [{
+      "name": "quizInputChange",
+      "method": "quizInputChangeHandler",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "quizFeedbackChange",
+      "method": "quizFeedbackChangeHandler",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "quizSelectChange",
+      "method": "quizSelectChangeHandler",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "quizOpinionChange",
+      "method": "quizOpinionChangeHandler",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }]; }
+}

package/dist/collection/components/sparkle-quiz/sparkle-quiz-v1.css

@@ -0,0 +1,48 @@
+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);
+}

package/dist/collection/components/sparkle-quiz/{sparkle-quiz.js → sparkle-quiz-v1.js}

@@ -1,7 +1,7 @@
 import { Component, Prop, Watch, Listen, State, Event, Element, h } from '@stencil/core';
 import { AssetsService } from '../../services/core/assets.service';
 import { EnvironmentConfigService } from "../../services/environment/environment-config.service";
-export class SparkleQuiz {
+export class SparkleQuizV1 {
   async loadQuestion() {
     if (this.quizData) {
       this.question = this.quizData[+this.questionId];
@@ -88,12 +88,12 @@ export class SparkleQuiz {
       return h("p", null, "No question found.");
     }
   }
-  static get is() { return "sparkle-quiz"; }
+  static get is() { return "sparkle-quiz-v1"; }
   static get originalStyleUrls() { return {
-    "$": ["sparkle-quiz.scss"]
+    "$": ["sparkle-quiz-v1.scss"]
   }; }
   static get styleUrls() { return {
-    "$": ["sparkle-quiz.css"]
+    "$": ["sparkle-quiz-v1.css"]
   }; }
   static get properties() { return {
     "questionId": {

package/dist/esm/{PrivateRoute-f59ba6b5.js → PrivateRoute-7b526801.js}

@@ -1,5 +1,5 @@
-import { h } from './index-5568e3fa.js';
-import { A as AuthStore } from './auth.store-98fad96d.js';
+import { h } from './index-c04b9ed5.js';
+import { A as AuthStore } from './auth.store-633e8414.js';
 
 function isGranted(permissionName) {
   return sparkle.auth.isGranted(permissionName);

package/dist/esm/{active-router-909088d6.js → active-router-fc9e4e06.js}

@@ -1,4 +1,4 @@
-import { h } from './index-5568e3fa.js';
+import { h } from './index-c04b9ed5.js';
 
 const createProviderConsumer = (defaultState, consumerRender) => {
     let listeners = new Map();