@webwriter/quiz 1.1.2 → 1.1.3

package/dist/widgets/webwriter-choice.js

@@ -5845,9 +5845,14 @@ var WebwriterChoice = class extends (_a2 = LitElementWw, _mode_dec = [n5({ type:
 })], _randomOrder_dec = [n5({ type: Boolean, attribute: true, reflect: true }), option({
   type: Boolean,
   label: { "en": "Random Choice Order", "de": "Zuf\xE4llige Reihenfolge" }
-})], _showSolution_dec = [n5({ type: Boolean, attribute: true, reflect: true }), option({
-  type: Boolean,
-  label: { "en": "show Solution", "de": "L\xF6sung anzeigen" }
+})], _showSolution_dec = [n5({ type: String, attribute: true, reflect: true }), option({
+  type: "select",
+  label: { "de": "L\xF6sung anzeigen", "en": "Show solution" },
+  options: [
+    { value: "right", label: { "en": "Right answers", "de": "Korrekte Antworten" } },
+    { value: "both", label: { "en": "all (indicator)", "de": "Alle (Indikator)" } },
+    { value: "full", label: { "en": "all (conclusive)", "de": "Alle (vollst\xE4ndig)" } }
+  ]
 })], _slotEl_dec = [e6("slot")], _addItem_dec = [action()], _items_dec = [o6()], _value_dec = [n5({ type: Array, attribute: false })], _itemsSlotEl_dec = [e6("#items-slot")], _a2) {
   constructor() {
     super(...arguments);
@@ -5855,7 +5860,7 @@ var WebwriterChoice = class extends (_a2 = LitElementWw, _mode_dec = [n5({ type:
     __publicField(this, "localize", generated_default);
     __privateAdd(this, _mode, __runInitializers(_init2, 8, this, "single")), __runInitializers(_init2, 11, this);
     __privateAdd(this, _randomOrder, __runInitializers(_init2, 12, this, false)), __runInitializers(_init2, 15, this);
-    __privateAdd(this, _showSolution, __runInitializers(_init2, 16, this, false)), __runInitializers(_init2, 19, this);
+    __privateAdd(this, _showSolution, __runInitializers(_init2, 16, this, "right")), __runInitializers(_init2, 19, this);
     __privateAdd(this, _slotEl, __runInitializers(_init2, 20, this)), __runInitializers(_init2, 23, this);
     __privateAdd(this, _items, __runInitializers(_init2, 24, this)), __runInitializers(_init2, 27, this);
     __privateAdd(this, _value, []);
@@ -5889,6 +5894,7 @@ var WebwriterChoice = class extends (_a2 = LitElementWw, _mode_dec = [n5({ type:
     this.items.forEach((item) => value.includes(item.id) ? item.valid = true : null);
   }
   reportSolution() {
+    console.log(this.solution, this.items);
     let itemActive = false;
     this.items.forEach((item) => {
       itemActive = itemActive || item.active;
@@ -5905,24 +5911,36 @@ var WebwriterChoice = class extends (_a2 = LitElementWw, _mode_dec = [n5({ type:
       this.items.forEach((item) => item.valid = true);
       return;
     }
+    let wrongSolution = false;
     this.items.forEach(
       (item) => {
+        console.log(!(item.active === item.valid), item.active, item.valid);
         item.valid = (this.solution ?? []).includes(item.id);
-        if (item.active != item.valid && !this.showSolution) {
-          this.items.forEach((item2) => {
-            item2.showSolution = false;
-          });
+        if (item.active != item.valid) {
+          wrongSolution = true;
+          if (this.showSolution != "full") {
+            this.items.forEach((item2) => {
+              item2.showSolution = false;
+            });
+          }
         }
         item.style.pointerEvents = "none";
       }
     );
+    if (wrongSolution) {
+      if (this.showSolution != "right") {
+        this.style.backgroundColor = "#F9B5C4";
+      }
+    } else {
+      this.style.backgroundColor = "#BCE194";
+    }
   }
   reset() {
     this.items.forEach((item) => {
       item.valid = void 0;
       item.active = false;
       item.showSolution = true;
-      item.style.pointerEvents = "auto";
+      item.style.pointerEvents = "auto", this.style.backgroundColor = "";
     });
     this.shuffleItems();
   }

package/dist/widgets/webwriter-order.js

@@ -4585,15 +4585,20 @@ var WebwriterOrder = class extends (_a2 = LitElementWw, _layout_dec = [n5({ type
     { value: "list", label: { "en": "List" } },
     { value: "tiles", label: { "en": "Tiles" } }
   ]
-})], _hideOrderButtons_dec = [n5({ type: Boolean, attribute: true, reflect: true }), option({ type: Boolean, label: { "en": "Hide order buttons", "de": "Pfeile zum Verschieben verstecken" } })], _showSolution_dec = [n5({ type: Boolean, attribute: true, reflect: true }), option({
-  type: Boolean,
-  label: { "en": "show Solution", "de": "L\xF6sung anzeigen" }
+})], _hideOrderButtons_dec = [n5({ type: Boolean, attribute: true, reflect: true }), option({ type: Boolean, label: { "en": "Hide order buttons", "de": "Pfeile zum Verschieben verstecken" } })], _showSolution_dec = [n5({ type: String, attribute: true, reflect: true }), option({
+  type: "select",
+  label: { "de": "L\xF6sung anzeigen", "en": "Show solution" },
+  options: [
+    { value: "right", label: { "en": "Right answers", "de": "Korrekte Antworten" } },
+    { value: "both", label: { "en": "all (indicator)", "de": "Alle (Indikator)" } },
+    { value: "full", label: { "en": "all (conclusive)", "de": "Alle (vollst\xE4ndig)" } }
+  ]
 })], _itemsSlot_dec = [e6("#items-slot")], _items_dec = [o6()], _solution_dec = [n5({ attribute: false })], _a2) {
   constructor() {
     super(...arguments);
     __runInitializers(_init2, 5, this);
     __publicField(this, "localize", generated_default);
-    __privateAdd(this, _showSolution, __runInitializers(_init2, 8, this, false)), __runInitializers(_init2, 11, this);
+    __privateAdd(this, _showSolution, __runInitializers(_init2, 8, this, "right")), __runInitializers(_init2, 11, this);
     __publicField(this, "observer");
     __publicField(this, "orderSheet", new CSSStyleSheet());
     __publicField(this, "clearDropPreviews", () => {
@@ -4702,14 +4707,23 @@ var WebwriterOrder = class extends (_a2 = LitElementWw, _layout_dec = [n5({ type
   }
   reportSolution() {
     this.solution.forEach((id, i7) => this.querySelector(`#${id}`).validOrder = i7);
-    if (!this.showSolution) {
-      this.items.forEach((item) => {
-        if (this.items.indexOf(item) != this.solution.indexOf(item.id)) {
+    let wrongSolution = false;
+    this.items.forEach((item) => {
+      if (this.items.indexOf(item) != this.solution.indexOf(item.id)) {
+        wrongSolution = true;
+        if (this.showSolution != "full") {
           this.items.forEach((i7) => {
             i7.showSolution = false;
           });
         }
-      });
+      }
+    });
+    if (wrongSolution) {
+      if (this.showSolution != "right") {
+        this.style.backgroundColor = "#F9B5C4";
+      }
+    } else {
+      this.style.backgroundColor = "#BCE194";
     }
     this.items.forEach((item) => {
       item.style.pointerEvents = "none";
@@ -4717,6 +4731,7 @@ var WebwriterOrder = class extends (_a2 = LitElementWw, _layout_dec = [n5({ type
   }
   reset() {
     this.solution = void 0;
+    this.style.backgroundColor = "";
     this.shuffleItems();
     this.items.forEach((item) => {
       item.style.pointerEvents = "auto";
@@ -4728,9 +4743,11 @@ var WebwriterOrder = class extends (_a2 = LitElementWw, _layout_dec = [n5({ type
   render() {
     return x`
       <slot id="items-slot" @webwriter-clear-drop-preview=${this.clearDropPreviews}></slot>
-      <sl-button size="small" id="add-option" class="author-only" @click=${() => this.addItem()}>
+      ${this.hasAttribute("contenteditable") ? x`
+      <sl-button size="small" id="add-option" @click=${() => this.addItem()}>
         <sl-icon src=${plus_default}></sl-icon><span>${msg("Add Option")}</span>
       </sl-button>
+      ` : ""}
     `;
   }
 };
@@ -4817,11 +4834,11 @@ __publicField(WebwriterOrder, "styles", i`
       align-items: center;
       justify-content: center;
     }
-
-
+// broken for some reason o.O
+/* 
     :host(:not([contenteditable=true]):not([contenteditable=""])) .author-only {
       display: none;
-    }
+    } */
   `);
 __runInitializers(_init2, 1, WebwriterOrder);
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@webwriter/quiz",
-    "version": "1.1.2",
+    "version": "1.1.3",
     "description": "Add interactive tasks (multiple choice, order, free text, highlighting, or speech input). Make a quiz out of multiple tasks.",
     "keywords": [
         "webwriter-widget",

package/src/widgets/webwriter-choice.ts

@@ -72,12 +72,17 @@ export class WebwriterChoice extends LitElementWw {
   })
   accessor randomOrder = false
 
-  @property({type: Boolean, attribute: true, reflect: true})
+  @property({type: String, attribute: true, reflect: true})
   @option({
-    type: Boolean,
-    label: {"en": "show Solution", "de": "Lösung anzeigen"},
+    type: "select",
+    label: {"de": "Lösung anzeigen", "en": "Show solution"},
+    options: [
+      {value: "right", label: {"en": "Right answers", "de": "Korrekte Antworten"}},
+      {value: "both", label: {"en": "all (indicator)", "de": "Alle (Indikator)"}},
+      {value: "full", label: {"en": "all (conclusive)", "de": "Alle (vollständig)"}}
+    ],
   })
-  accessor showSolution = false
+  accessor showSolution = "right"
 
   get solution() {
     const validIDs = this.items.filter(item => item.valid).map(item => item.id)
@@ -90,7 +95,7 @@ export class WebwriterChoice extends LitElementWw {
 
   
   reportSolution() {
-
+    console.log(this.solution, this.items)
     let itemActive: boolean = false
     this.items.forEach(item => {itemActive = itemActive || item.active})
     if(!itemActive){
@@ -101,21 +106,32 @@ export class WebwriterChoice extends LitElementWw {
       this.items.forEach(item => item.valid = true)
       return
     }
+    let wrongSolution: boolean = false
     this.items.forEach(item => {
+      console.log(!(item.active === item.valid), item.active, item.valid)
         item.valid = (this.solution ?? []).includes(item.id)
-        if(item.active != item.valid && !this.showSolution){
-          this.items.forEach(item => {
-            item.showSolution = false
-          })
+        if(item.active != item.valid){
+          wrongSolution = true
+          if(this.showSolution != "full"){
+            this.items.forEach(item => {
+              item.showSolution = false
+            })
+          }
         }
         item.style.pointerEvents = "none"
       }
     )
-
+    if(wrongSolution){
+      if(this.showSolution != "right"){
+        this.style.backgroundColor = "#F9B5C4"
+      }
+    }else{
+      this.style.backgroundColor = "#BCE194"
+    }
   }
 
   reset() {
-    this.items.forEach(item => {item.valid = undefined; item.active = false; item.showSolution = true; item.style.pointerEvents = "auto"})
+    this.items.forEach(item => {item.valid = undefined; item.active = false; item.showSolution = true; item.style.pointerEvents = "auto", this.style.backgroundColor = ""})
     this.shuffleItems()
   }
 

package/src/widgets/webwriter-order.ts

@@ -103,11 +103,11 @@ export class WebwriterOrder extends LitElementWw {
       align-items: center;
       justify-content: center;
     }
-
-
+// broken for some reason o.O
+/* 
     :host(:not([contenteditable=true]):not([contenteditable=""])) .author-only {
       display: none;
-    }
+    } */
   `
 
   get layout(): "list" | "tiles" {
@@ -137,12 +137,17 @@ export class WebwriterOrder extends LitElementWw {
     this.items.forEach(item => item.hideOrderButtons = value)
   }
 
-  @property({type: Boolean, attribute: true, reflect: true})
+  @property({type: String, attribute: true, reflect: true})
   @option({
-    type: Boolean,
-    label: {"en": "show Solution", "de": "Lösung anzeigen"},
+    type: "select",
+    label: {"de": "Lösung anzeigen", "en": "Show solution"},
+    options: [
+      {value: "right", label: {"en": "Right answers", "de": "Korrekte Antworten"}},
+      {value: "both", label: {"en": "all (indicator)", "de": "Alle (Indikator)"}},
+      {value: "full", label: {"en": "all (conclusive)", "de": "Alle (vollständig)"}}
+    ],
   })
-  accessor showSolution = false
+  accessor showSolution = "right"
 
   observer: MutationObserver
 
@@ -273,14 +278,23 @@ export class WebwriterOrder extends LitElementWw {
   
   reportSolution() {
     this.solution.forEach((id, i) => (this.querySelector(`#${id}`) as any).validOrder = i)
-    if(!this.showSolution){
-      this.items.forEach(item => {
-        if(this.items.indexOf(item) != this.solution.indexOf(item.id)){
+    let wrongSolution: boolean = false
+    this.items.forEach(item => {
+      if(this.items.indexOf(item) != this.solution.indexOf(item.id)){
+        wrongSolution = true
+        if(this.showSolution != "full"){
           this.items.forEach(i => {
             i.showSolution = false
           })
         }
-      })
+      }
+    })
+    if(wrongSolution){
+      if(this.showSolution != "right"){
+        this.style.backgroundColor = "#F9B5C4"
+      }
+    }else{
+      this.style.backgroundColor = "#BCE194"
     }
     this.items.forEach(item=>{
       item.style.pointerEvents="none"
@@ -289,6 +303,7 @@ export class WebwriterOrder extends LitElementWw {
 
   reset() {
     this.solution = undefined
+    this.style.backgroundColor = ""
     this.shuffleItems()
     this.items.forEach(item=>{
       item.style.pointerEvents="auto"
@@ -302,9 +317,11 @@ export class WebwriterOrder extends LitElementWw {
   render() {
     return html`
       <slot id="items-slot" @webwriter-clear-drop-preview=${this.clearDropPreviews}></slot>
-      <sl-button size="small" id="add-option" class="author-only" @click=${() => this.addItem()}>
+      ${this.hasAttribute("contenteditable")?html`
+      <sl-button size="small" id="add-option" @click=${() => this.addItem()}>
         <sl-icon src=${IconPlus}></sl-icon><span>${msg("Add Option")}</span>
       </sl-button>
+      `:""}
     `
   }
 }