feedback part

Citolab · Sep 12, 2023 · 9852a9a · 9852a9a
1 parent dca9092
commit 9852a9a
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 49 deletions.
diff --git a/src/lib/qti-components/qti-feedback/qti-feedback-block/qti-feedback-block.ts b/src/lib/qti-components/qti-feedback/qti-feedback-block/qti-feedback-block.ts
@@ -1,29 +1,23 @@
-import { PropertyValueMap, html } from 'lit';
+import { PropertyValueMap, css, html } from 'lit';
 import { QtiFeedback } from '../qti-feedback';
 
 export class QtiFeedbackBlock extends QtiFeedback {
+  static override styles = css`
+    .on {
+      display: block;
+    }
+    .off {
+      display: none;
+    }
+  `;
+
   override render() {
-    return html`
-      <style>
-        :host {
-          display: block;
-        }
-        .on {
-          display: block;
-        }
-        .off {
-          display: none;
-        }
-      </style>
-      <div part="feedback" class="feedback ${this.showStatus}">
-        <slot></slot>
-      </div>
-    `;
+    return html` <slot part="feedback" class="feedback ${this.showStatus}"></slot> `;
   }
 
-  protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {
-    this.checkShowFeedback(this.outcomeIdentifier);
-  }
+  // protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {
+  //   this.checkShowFeedback(this.outcomeIdentifier);
+  // }
 }
 
 customElements.define('qti-feedback-block', QtiFeedbackBlock);
diff --git a/src/lib/qti-components/qti-feedback/qti-feedback-inline/qti-feedback-inline.ts b/src/lib/qti-components/qti-feedback/qti-feedback-inline/qti-feedback-inline.ts
@@ -11,6 +11,6 @@ export class QtiFeedbackInline extends QtiFeedback {
     }
   `;
 
-  override render = () => html` <slot class="${this.showStatus}"></slot> `;
+  override render = () => html` <slot part="feedback" class="${this.showStatus}"></slot> `;
 }
 customElements.define('qti-feedback-inline', QtiFeedbackInline);
diff --git a/src/lib/qti-components/qti-feedback/qti-feedback.stories.ts b/src/lib/qti-components/qti-feedback/qti-feedback.stories.ts
@@ -304,39 +304,39 @@ export const kringloop = () => {
                 step="100"
                 upper-bound="1000"
               ></qti-slider-interaction>
-              <qti-feedback-inline
-                id="feedbackInline-correct-exact"
+              <qti-feedback-block
+                id="feedbackblock-correct-exact"
                 identifier="correct-exact"
                 outcome-identifier="FEEDBACK"
                 show-hide="show"
               >
                 Helemaal goed! Dat is net zoveel als het gewicht van een groot paard! 🐎
-              </qti-feedback-inline>
-              <qti-feedback-inline
-                id="feedbackInline-correct"
+              </qti-feedback-block>
+              <qti-feedback-block
+                id="feedbackblock-correct"
                 identifier="correct"
                 outcome-identifier="FEEDBACK"
                 show-hide="show"
               >
                 Bijna! We rekenen het goed! 562 kilo 😮 Dat is net zoveel als het gewicht van een groot paard!🐎
-              </qti-feedback-inline>
-              <qti-feedback-inline
-                id="feedbackInline-incorrect-less"
+              </qti-feedback-block>
+              <qti-feedback-block
+                id="feedbackblock-incorrect-less"
                 identifier="incorrect-less"
                 outcome-identifier="FEEDBACK"
                 show-hide="show"
               >
                 Helaas het is nog meer! 562 kilo 😮! Dat is net zoveel als het gewicht van een groot paard 🐎
-              </qti-feedback-inline>
-              <qti-feedback-inline
-                id="feedbackInline-incorrect-more"
+              </qti-feedback-block>
+              <qti-feedback-block
+                id="feedbackblock-incorrect-more"
                 identifier="incorrect-more"
                 outcome-identifier="FEEDBACK"
                 show-hide="show"
               >
                 Dat is niet goed, gelukkig is het minder, maar toch 562 kilo! Dat is net zoveel als het gewicht van een
                 groot paard!🐎
-              </qti-feedback-inline>
+              </qti-feedback-block>
             </div>
           </div>
         </div>

diff --git a/src/lib/qti-components/qti-feedback/qti-modal-feedback/qti-modal-feedback.ts b/src/lib/qti-components/qti-feedback/qti-modal-feedback/qti-modal-feedback.ts
@@ -1,22 +1,17 @@
-import { html } from 'lit';
+import { css, html } from 'lit';
 import { QtiFeedback } from '../qti-feedback';
 
 export class QtiModalFeedback extends QtiFeedback {
-  override render() {
-    return html`
-      <style>
-        .on {
-          display: inline-block;
-        }
-        .off {
-          display: none;
-        }
-      </style>
-      <div class="feedback ${this.showStatus}">
-        <slot></slot>
-      </div>
-    `;
-  }
+  static override styles = css`
+    .on {
+      display: inline-block;
+    }
+    .off {
+      display: none;
+    }
+  `;
+
+  override render = () => html` <slot part="feedback" class="${this.showStatus}"></slot> `;
 }
 
 customElements.define('qti-modal-feedback', QtiModalFeedback);