@webwriter/quiz 1.0.10 → 1.1.2

package/LICENSE

@@ -1,7 +1,7 @@
-Copyright 2024 Frederic Salmen <frederic@fsalmen.de>
-
-Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-
+Copyright 2024 Frederic Salmen <frederic@fsalmen.de>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
 THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/custom.d.ts

@@ -1,176 +1,176 @@
-declare module '*.apng' {
-  const content: string;
-  export default content;
-}
-declare module '*.jpg' {
-  const content: string;
-  export default content;
-}
-declare module '*.jpeg' {
-  const content: string;
-  export default content;
-}
-declare module '*.jfif' {
-  const content: string;
-  export default content;
-}
-declare module '*.pjpeg' {
-  const content: string;
-  export default content;
-}
-declare module '*.pjp' {
-  const content: string;
-  export default content;
-}
-declare module '*.png' {
-  const content: string;
-  export default content;
-}
-declare module '*.svg' {
-  const content: string;
-  export default content;
-}
-declare module '*.webp' {
-  const content: string;
-  export default content;
-}
-declare module '*.bmp' {
-  const content: string;
-  export default content;
-}
-declare module '*.ico' {
-  const content: string;
-  export default content;
-}
-declare module '*.cur' {
-  const content: string;
-  export default content;
-}
-declare module '*.tif' {
-  const content: string;
-  export default content;
-}
-declare module '*.tiff' {
-  const content: string;
-  export default content;
-}
-declare module '*.wav' {
-  const content: string;
-  export default content;
-}
-declare module '*.wave' {
-  const content: string;
-  export default content;
-}
-declare module '*.mp3' {
-  const content: string;
-  export default content;
-}
-declare module '*.aac' {
-  const content: string;
-  export default content;
-}
-declare module '*.aacp' {
-  const content: string;
-  export default content;
-}
-declare module '*.oga' {
-  const content: string;
-  export default content;
-}
-declare module '*.flac' {
-  const content: string;
-  export default content;
-}
-declare module '*.weba' {
-  const content: string;
-  export default content;
-}
-declare module '*.mp4' {
-  const content: string;
-  export default content;
-}
-declare module '*.webm' {
-  const content: string;
-  export default content;
-}
-declare module '*.avif' {
-  const content: string;
-  export default content;
-}
-declare module '*.gif' {
-  const content: string;
-  export default content;
-}
-declare module '*.mov' {
-  const content: string;
-  export default content;
-}
-declare module '*.avi' {
-  const content: string;
-  export default content;
-}
-declare module '*.ogv' {
-  const content: string;
-  export default content;
-}
-declare module '*.mkv' {
-  const content: string;
-  export default content;
-}
-declare module '*.opus' {
-  const content: string;
-  export default content;
-}
-declare module '*.mpeg' {
-  const content: string;
-  export default content;
-}
-declare module '*.woff' {
-  const content: string;
-  export default content;
-}
-declare module '*.woff2' {
-  const content: string;
-  export default content;
-}
-declare module '*.ttf' {
-  const content: string;
-  export default content;
-}
-declare module '*.otf' {
-  const content: string;
-  export default content;
-}
-declare module '*.pdf' {
-  const content: string;
-  export default content;
-}
-declare module '*.json' {
-  const content: {[key: string]: any};
-  export default content;
-}
-declare module '*.jsonld' {
-  const content: {[key: string]: any};
-  export default content;
-}
-declare module '*.txt' {
-  const content: string;
-  export default content;
-}
-declare module '*.csv' {
-  const content: string;
-  export default content;
-}
-declare module '*.htm' {
-  const content: string;
-  export default content;
-}
-declare module '*.html' {
-  const content: string;
-  export default content;
-}
-declare module '*.xml' {
-  const content: string;
-  export default content;
+declare module '*.apng' {
+  const content: string;
+  export default content;
+}
+declare module '*.jpg' {
+  const content: string;
+  export default content;
+}
+declare module '*.jpeg' {
+  const content: string;
+  export default content;
+}
+declare module '*.jfif' {
+  const content: string;
+  export default content;
+}
+declare module '*.pjpeg' {
+  const content: string;
+  export default content;
+}
+declare module '*.pjp' {
+  const content: string;
+  export default content;
+}
+declare module '*.png' {
+  const content: string;
+  export default content;
+}
+declare module '*.svg' {
+  const content: string;
+  export default content;
+}
+declare module '*.webp' {
+  const content: string;
+  export default content;
+}
+declare module '*.bmp' {
+  const content: string;
+  export default content;
+}
+declare module '*.ico' {
+  const content: string;
+  export default content;
+}
+declare module '*.cur' {
+  const content: string;
+  export default content;
+}
+declare module '*.tif' {
+  const content: string;
+  export default content;
+}
+declare module '*.tiff' {
+  const content: string;
+  export default content;
+}
+declare module '*.wav' {
+  const content: string;
+  export default content;
+}
+declare module '*.wave' {
+  const content: string;
+  export default content;
+}
+declare module '*.mp3' {
+  const content: string;
+  export default content;
+}
+declare module '*.aac' {
+  const content: string;
+  export default content;
+}
+declare module '*.aacp' {
+  const content: string;
+  export default content;
+}
+declare module '*.oga' {
+  const content: string;
+  export default content;
+}
+declare module '*.flac' {
+  const content: string;
+  export default content;
+}
+declare module '*.weba' {
+  const content: string;
+  export default content;
+}
+declare module '*.mp4' {
+  const content: string;
+  export default content;
+}
+declare module '*.webm' {
+  const content: string;
+  export default content;
+}
+declare module '*.avif' {
+  const content: string;
+  export default content;
+}
+declare module '*.gif' {
+  const content: string;
+  export default content;
+}
+declare module '*.mov' {
+  const content: string;
+  export default content;
+}
+declare module '*.avi' {
+  const content: string;
+  export default content;
+}
+declare module '*.ogv' {
+  const content: string;
+  export default content;
+}
+declare module '*.mkv' {
+  const content: string;
+  export default content;
+}
+declare module '*.opus' {
+  const content: string;
+  export default content;
+}
+declare module '*.mpeg' {
+  const content: string;
+  export default content;
+}
+declare module '*.woff' {
+  const content: string;
+  export default content;
+}
+declare module '*.woff2' {
+  const content: string;
+  export default content;
+}
+declare module '*.ttf' {
+  const content: string;
+  export default content;
+}
+declare module '*.otf' {
+  const content: string;
+  export default content;
+}
+declare module '*.pdf' {
+  const content: string;
+  export default content;
+}
+declare module '*.json' {
+  const content: {[key: string]: any};
+  export default content;
+}
+declare module '*.jsonld' {
+  const content: {[key: string]: any};
+  export default content;
+}
+declare module '*.txt' {
+  const content: string;
+  export default content;
+}
+declare module '*.csv' {
+  const content: string;
+  export default content;
+}
+declare module '*.htm' {
+  const content: string;
+  export default content;
+}
+declare module '*.html' {
+  const content: string;
+  export default content;
+}
+declare module '*.xml' {
+  const content: string;
+  export default content;
 }

package/dist/widgets/webwriter-choice-item.js

@@ -4139,15 +4139,16 @@ var globImport_ts = __glob({
 var generated_default = configureLocalization({ sourceLocale, targetLocales, loadLocale: (locale) => globImport_ts(`./${locale}.ts`) });
 
 // src/widgets/webwriter-choice-item.ts
-var _checkbox_dec, _layout_dec, _valid_dec, _active_dec, _a2, _WebwriterChoiceItem_decorators, _init2, _active, _valid, _layout, _checkbox;
+var _checkbox_dec, _layout_dec, _valid_dec, _active_dec, _showSolution_dec, _a2, _WebwriterChoiceItem_decorators, _init2, _showSolution, _active, _valid, _layout, _checkbox;
 _WebwriterChoiceItem_decorators = [t5("webwriter-choice-item")];
-var WebwriterChoiceItem = class extends (_a2 = LitElementWw, _active_dec = [n6({ type: Boolean, attribute: false })], _valid_dec = [n6({ type: Boolean, attribute: false })], _layout_dec = [n6({ type: String, attribute: true, reflect: true })], _checkbox_dec = [e8("sl-checkbox")], _a2) {
+var WebwriterChoiceItem = class extends (_a2 = LitElementWw, _showSolution_dec = [n6({ type: Boolean, attribute: false })], _active_dec = [n6({ type: Boolean, attribute: false })], _valid_dec = [n6({ type: Boolean, attribute: false })], _layout_dec = [n6({ type: String, attribute: true, reflect: true })], _checkbox_dec = [e8("sl-checkbox")], _a2) {
   constructor() {
     super(...arguments);
     __publicField(this, "localize", generated_default);
-    __privateAdd(this, _active, __runInitializers(_init2, 8, this, false)), __runInitializers(_init2, 11, this);
-    __privateAdd(this, _valid, __runInitializers(_init2, 12, this)), __runInitializers(_init2, 15, this);
-    __privateAdd(this, _layout, __runInitializers(_init2, 16, this, "list")), __runInitializers(_init2, 19, this);
+    __privateAdd(this, _showSolution, __runInitializers(_init2, 8, this, true)), __runInitializers(_init2, 11, this);
+    __privateAdd(this, _active, __runInitializers(_init2, 12, this, false)), __runInitializers(_init2, 15, this);
+    __privateAdd(this, _valid, __runInitializers(_init2, 16, this)), __runInitializers(_init2, 19, this);
+    __privateAdd(this, _layout, __runInitializers(_init2, 20, this, "list")), __runInitializers(_init2, 23, this);
     __publicField(this, "handleClick", (e10) => {
       const checkboxClicked = e10.composedPath().some((v3) => v3?.classList?.contains("checkbox__control"));
       const editable = this.isContentEditable;
@@ -4164,7 +4165,7 @@ var WebwriterChoiceItem = class extends (_a2 = LitElementWw, _active_dec = [n6({
         this.active = !this.active;
       }
     });
-    __privateAdd(this, _checkbox, __runInitializers(_init2, 20, this)), __runInitializers(_init2, 23, this);
+    __privateAdd(this, _checkbox, __runInitializers(_init2, 24, this)), __runInitializers(_init2, 27, this);
     __publicField(this, "observer");
   }
   async updated(_changedProperties) {
@@ -4195,7 +4196,7 @@ var WebwriterChoiceItem = class extends (_a2 = LitElementWw, _active_dec = [n6({
   }
   render() {
     return i7(this.layout, x`
-      ${this.valid !== void 0 && (this.active || !this.active && this.valid) ? x`<sl-icon class="solution user-only" ?data-valid=${this.valid} src=${this.valid ? check_default : x_default}></sl-icon>` : null}
+      ${this.showSolution && this.valid !== void 0 && (this.active || !this.active && this.valid) ? x`<sl-icon class="solution user-only" ?data-valid=${this.valid} src=${this.valid ? check_default : x_default}></sl-icon>` : null}
       <sl-checkbox class=${e5({ valid: this.valid, active: this.active })} exportparts="base, control, label" @click=${this.handleClick} @sl-change=${this.handleChange} ?checked=${this.isContentEditable ? this.valid : this.active}>
         <slot part="slot" style=${o4({ "--ww-placeholder": `"${msg("Option")}"` })}></slot>
       </sl-checkbox>
@@ -4203,10 +4204,12 @@ var WebwriterChoiceItem = class extends (_a2 = LitElementWw, _active_dec = [n6({
   }
 };
 _init2 = __decoratorStart(_a2);
+_showSolution = new WeakMap();
 _active = new WeakMap();
 _valid = new WeakMap();
 _layout = new WeakMap();
 _checkbox = new WeakMap();
+__decorateElement(_init2, 4, "showSolution", _showSolution_dec, WebwriterChoiceItem, _showSolution);
 __decorateElement(_init2, 4, "active", _active_dec, WebwriterChoiceItem, _active);
 __decorateElement(_init2, 4, "valid", _valid_dec, WebwriterChoiceItem, _valid);
 __decorateElement(_init2, 4, "layout", _layout_dec, WebwriterChoiceItem, _layout);

package/dist/widgets/webwriter-choice.js

@@ -5827,7 +5827,7 @@ function shuffle(a5) {
   }
   return a5;
 }
-var _itemsSlotEl_dec, _value_dec, _items_dec, _addItem_dec, _slotEl_dec, _randomOrder_dec, _layout_dec, _mode_dec, _a2, _WebwriterChoice_decorators, _init2, _mode, _randomOrder, _slotEl, _items, _value, _itemsSlotEl;
+var _itemsSlotEl_dec, _value_dec, _items_dec, _addItem_dec, _slotEl_dec, _showSolution_dec, _randomOrder_dec, _layout_dec, _mode_dec, _a2, _WebwriterChoice_decorators, _init2, _mode, _randomOrder, _showSolution, _slotEl, _items, _value, _itemsSlotEl;
 _WebwriterChoice_decorators = [t4("webwriter-choice")];
 var WebwriterChoice = class extends (_a2 = LitElementWw, _mode_dec = [n5({ type: String, attribute: true, reflect: true }), option({
   type: "select",
@@ -5844,7 +5844,10 @@ 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" }
+  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" }
 })], _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);
@@ -5852,8 +5855,9 @@ 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, _slotEl, __runInitializers(_init2, 16, this)), __runInitializers(_init2, 19, this);
-    __privateAdd(this, _items, __runInitializers(_init2, 20, this)), __runInitializers(_init2, 23, this);
+    __privateAdd(this, _showSolution, __runInitializers(_init2, 16, this, false)), __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, []);
     __publicField(this, "handleControlChange", (e10) => {
       if (this.mode === "single") {
@@ -5868,7 +5872,7 @@ var WebwriterChoice = class extends (_a2 = LitElementWw, _mode_dec = [n5({ type:
         composed: true
       }));
     });
-    __privateAdd(this, _itemsSlotEl, __runInitializers(_init2, 24, this)), __runInitializers(_init2, 27, this);
+    __privateAdd(this, _itemsSlotEl, __runInitializers(_init2, 28, this)), __runInitializers(_init2, 31, this);
   }
   get layout() {
     return this.children?.item(0)?.getAttribute("layout") ?? "list";
@@ -5885,16 +5889,40 @@ var WebwriterChoice = class extends (_a2 = LitElementWw, _mode_dec = [n5({ type:
     this.items.forEach((item) => value.includes(item.id) ? item.valid = true : null);
   }
   reportSolution() {
+    let itemActive = false;
+    this.items.forEach((item) => {
+      itemActive = itemActive || item.active;
+    });
+    if (!itemActive) {
+      this.items.forEach((item) => {
+        item.valid = void 0;
+        item.active = false;
+        item.style.pointerEvents = "auto";
+      });
+      return;
+    }
     if (!this.solution) {
       this.items.forEach((item) => item.valid = true);
       return;
     }
-    this.items.forEach((item) => item.valid = (this.solution ?? []).includes(item.id));
+    this.items.forEach(
+      (item) => {
+        item.valid = (this.solution ?? []).includes(item.id);
+        if (item.active != item.valid && !this.showSolution) {
+          this.items.forEach((item2) => {
+            item2.showSolution = false;
+          });
+        }
+        item.style.pointerEvents = "none";
+      }
+    );
   }
   reset() {
     this.items.forEach((item) => {
       item.valid = void 0;
       item.active = false;
+      item.showSolution = true;
+      item.style.pointerEvents = "auto";
     });
     this.shuffleItems();
   }
@@ -5968,6 +5996,7 @@ var WebwriterChoice = class extends (_a2 = LitElementWw, _mode_dec = [n5({ type:
 _init2 = __decoratorStart(_a2);
 _mode = new WeakMap();
 _randomOrder = new WeakMap();
+_showSolution = new WeakMap();
 _slotEl = new WeakMap();
 _items = new WeakMap();
 _value = new WeakMap();
@@ -5975,6 +6004,7 @@ _itemsSlotEl = new WeakMap();
 __decorateElement(_init2, 4, "mode", _mode_dec, WebwriterChoice, _mode);
 __decorateElement(_init2, 3, "layout", _layout_dec, WebwriterChoice);
 __decorateElement(_init2, 4, "randomOrder", _randomOrder_dec, WebwriterChoice, _randomOrder);
+__decorateElement(_init2, 4, "showSolution", _showSolution_dec, WebwriterChoice, _showSolution);
 __decorateElement(_init2, 4, "slotEl", _slotEl_dec, WebwriterChoice, _slotEl);
 __decorateElement(_init2, 1, "addItem", _addItem_dec, WebwriterChoice);
 __decorateElement(_init2, 4, "items", _items_dec, WebwriterChoice, _items);

package/dist/widgets/webwriter-order-item.js

@@ -3324,20 +3324,21 @@ var globImport_ts = __glob({
 var generated_default = configureLocalization({ sourceLocale, targetLocales, loadLocale: (locale) => globImport_ts(`./${locale}.ts`) });
 
 // src/widgets/webwriter-order-item.ts
-var _contentSlotEl_dec, _baseEl_dec, _hideOrderButtons_dec, _validOrder_dec, _layout_dec, _dropPreview_dec, _draggable_dec, _a2, _WebwriterOrderItem_decorators, _init2, _draggable, _dropPreview, _layout, _validOrder, _hideOrderButtons, _baseEl, _contentSlotEl;
+var _contentSlotEl_dec, _baseEl_dec, _hideOrderButtons_dec, _validOrder_dec, _layout_dec, _dropPreview_dec, _draggable_dec, _showSolution_dec, _a2, _WebwriterOrderItem_decorators, _init2, _showSolution, _draggable, _dropPreview, _layout, _validOrder, _hideOrderButtons, _baseEl, _contentSlotEl;
 _WebwriterOrderItem_decorators = [t5("webwriter-order-item")];
-var WebwriterOrderItem = class extends (_a2 = LitElementWw, _draggable_dec = [n6({ attribute: true, reflect: true, converter: { toAttribute: (v3) => v3 ? "true" : "false", fromAttribute: (attr) => attr === "true" } })], _dropPreview_dec = [n6({ type: String, attribute: true, reflect: true })], _layout_dec = [n6({ type: String, attribute: true, reflect: true })], _validOrder_dec = [n6({ type: Number, attribute: false })], _hideOrderButtons_dec = [n6({ type: Boolean, attribute: true, reflect: true })], _baseEl_dec = [e7("[part=base]")], _contentSlotEl_dec = [e7("#content")], _a2) {
+var WebwriterOrderItem = class extends (_a2 = LitElementWw, _showSolution_dec = [n6({ attribute: false, type: Boolean })], _draggable_dec = [n6({ attribute: true, reflect: true, converter: { toAttribute: (v3) => v3 ? "true" : "false", fromAttribute: (attr) => attr === "true" } })], _dropPreview_dec = [n6({ type: String, attribute: true, reflect: true })], _layout_dec = [n6({ type: String, attribute: true, reflect: true })], _validOrder_dec = [n6({ type: Number, attribute: false })], _hideOrderButtons_dec = [n6({ type: Boolean, attribute: true, reflect: true })], _baseEl_dec = [e7("[part=base]")], _contentSlotEl_dec = [e7("#content")], _a2) {
   constructor() {
     super(...arguments);
     __publicField(this, "localize", generated_default);
-    __privateAdd(this, _draggable, __runInitializers(_init2, 8, this, true)), __runInitializers(_init2, 11, this);
+    __privateAdd(this, _showSolution, __runInitializers(_init2, 8, this, true)), __runInitializers(_init2, 11, this);
+    __privateAdd(this, _draggable, __runInitializers(_init2, 12, this, true)), __runInitializers(_init2, 15, this);
     __publicField(this, "emitClearDropPreview", () => {
       this.dispatchEvent(new CustomEvent("webwriter-clear-drop-preview", { bubbles: true }));
     });
-    __privateAdd(this, _dropPreview, __runInitializers(_init2, 12, this)), __runInitializers(_init2, 15, this);
-    __privateAdd(this, _layout, __runInitializers(_init2, 16, this, "list")), __runInitializers(_init2, 19, this);
-    __privateAdd(this, _validOrder, __runInitializers(_init2, 20, this)), __runInitializers(_init2, 23, this);
-    __privateAdd(this, _hideOrderButtons, __runInitializers(_init2, 24, this, false)), __runInitializers(_init2, 27, this);
+    __privateAdd(this, _dropPreview, __runInitializers(_init2, 16, this)), __runInitializers(_init2, 19, this);
+    __privateAdd(this, _layout, __runInitializers(_init2, 20, this, "list")), __runInitializers(_init2, 23, this);
+    __privateAdd(this, _validOrder, __runInitializers(_init2, 24, this)), __runInitializers(_init2, 27, this);
+    __privateAdd(this, _hideOrderButtons, __runInitializers(_init2, 28, this, false)), __runInitializers(_init2, 31, this);
     __publicField(this, "handleClick", (e10, up = false) => {
       if (e10.target.id === "up") {
         this.dispatchEvent(new CustomEvent("ww-moveup", { bubbles: true }));
@@ -3346,8 +3347,8 @@ var WebwriterOrderItem = class extends (_a2 = LitElementWw, _draggable_dec = [n6
       }
       e10.stopPropagation();
     });
-    __privateAdd(this, _baseEl, __runInitializers(_init2, 28, this)), __runInitializers(_init2, 31, this);
-    __privateAdd(this, _contentSlotEl, __runInitializers(_init2, 32, this)), __runInitializers(_init2, 35, this);
+    __privateAdd(this, _baseEl, __runInitializers(_init2, 32, this)), __runInitializers(_init2, 35, this);
+    __privateAdd(this, _contentSlotEl, __runInitializers(_init2, 36, this)), __runInitializers(_init2, 39, this);
     __publicField(this, "observer");
   }
   get elementIndex() {
@@ -3392,7 +3393,6 @@ var WebwriterOrderItem = class extends (_a2 = LitElementWw, _draggable_dec = [n6
   }
   async updated(_changedProperties) {
     if (_changedProperties.has("layout") && this.layout === "list") {
-      console.log("switched to list");
       this.syncSize(true);
       this.observer?.disconnect();
       this.requestUpdate();
@@ -3439,7 +3439,7 @@ var WebwriterOrderItem = class extends (_a2 = LitElementWw, _draggable_dec = [n6
   render() {
     const solution = this.validOrder !== void 0 ? x`<span class="solution" ?data-valid=${this.elementIndex === this.validOrder}>${this.validOrder + 1}</span>` : null;
     return x`<ol part="base" start=${this.elementIndex + 1}>
-      ${this.layout === "list" ? solution : null}
+      ${this.layout === "list" && this.showSolution ? solution : null}
       <li id="main-li">
         <slot id="content" style=${o4({ "--ww-placeholder": `"${msg("Option")}"`, "--offset": `${this.contentSlotEl?.offsetLeft + 1}px` })}></slot>
       </li>
@@ -3450,12 +3450,13 @@ var WebwriterOrderItem = class extends (_a2 = LitElementWw, _draggable_dec = [n6
     </ol>
     <ol id="count" start=${this.elementIndex + 1}>
       <li ?data-two-digit=${this.elementIndex + 1 >= 10}></li>
-      ${this.layout === "tiles" ? solution : null}
+      ${this.layout === "tiles" && this.showSolution ? solution : null}
     </ol>
     <div id="handle"></div>`;
   }
 };
 _init2 = __decoratorStart(_a2);
+_showSolution = new WeakMap();
 _draggable = new WeakMap();
 _dropPreview = new WeakMap();
 _layout = new WeakMap();
@@ -3463,6 +3464,7 @@ _validOrder = new WeakMap();
 _hideOrderButtons = new WeakMap();
 _baseEl = new WeakMap();
 _contentSlotEl = new WeakMap();
+__decorateElement(_init2, 4, "showSolution", _showSolution_dec, WebwriterOrderItem, _showSolution);
 __decorateElement(_init2, 4, "draggable", _draggable_dec, WebwriterOrderItem, _draggable);
 __decorateElement(_init2, 4, "dropPreview", _dropPreview_dec, WebwriterOrderItem, _dropPreview);
 __decorateElement(_init2, 4, "layout", _layout_dec, WebwriterOrderItem, _layout);