From cdcd07f6c98199718f31f8c87b1ed7fbbc1a940e Mon Sep 17 00:00:00 2001
From: btopro <btopro@outlook.com>
Date: Thu, 2 May 2024 14:46:12 -0400
Subject: [PATCH] https://github.com/elmsln/issues/issues/1326

---
 elements/app-hax/demo/appstore.json           |   1 +
 elements/cms-hax/demo/sample-store.json       |   1 +
 elements/h-a-x/demo/appstore.json             |   1 +
 elements/hax-body/demo/appstore.json          |   1 +
 elements/hax-body/demo/shoelace.json          |   1 +
 elements/hax-bookmarklet/demo/appstore.json   |   1 +
 .../hax-cloud/demo/dist/dev/appstore.json     |   1 +
 elements/hax-cloud/lib/appstore.json          |   1 +
 .../demo/dist/dev/appstore.json               |   1 +
 .../demo/fake/dev/appstore.json               |   1 +
 elements/multiple-choice/demo/index.html      |  27 +-
 .../multiple-choice/lib/QuestionElement.js    | 588 ++++++++++++++++++
 .../true-false-question.haxProperties.json    |  95 +++
 .../lib/true-false-question.js                | 188 ++++++
 elements/multiple-choice/multiple-choice.js   | 556 +----------------
 .../multiple-choice/src/multiple-choice.js    | 556 +----------------
 .../video-player/demo/lecture-player.html     |   6 +-
 elements/video-player/lib/lecture-player.js   | 122 ++--
 elements/wysiwyg-hax/demo/sample-store.json   |   1 +
 19 files changed, 962 insertions(+), 1187 deletions(-)
 create mode 100644 elements/multiple-choice/lib/QuestionElement.js
 create mode 100644 elements/multiple-choice/lib/true-false-question.haxProperties.json
 create mode 100644 elements/multiple-choice/lib/true-false-question.js

diff --git a/elements/app-hax/demo/appstore.json b/elements/app-hax/demo/appstore.json
index 5e62b208b2..a09b08b906 100644
--- a/elements/app-hax/demo/appstore.json
+++ b/elements/app-hax/demo/appstore.json
@@ -14,6 +14,7 @@
       "meme-maker": "@lrnwebcomponents/meme-maker/meme-maker.js",
       "grid-plate": "@lrnwebcomponents/grid-plate/grid-plate.js",
       "multiple-choice": "@lrnwebcomponents/multiple-choice/multiple-choice.js",
+    "true-false-question": "@lrnwebcomponents/multiple-choice/lib/true-false-question.js",
       "person-testimonial": "@lrnwebcomponents/person-testimonial/person-testimonial.js",
       "place-holder": "@lrnwebcomponents/place-holder/place-holder.js",
       "q-r": "@lrnwebcomponents/q-r/q-r.js",
diff --git a/elements/cms-hax/demo/sample-store.json b/elements/cms-hax/demo/sample-store.json
index ba2669626d..13922c2767 100644
--- a/elements/cms-hax/demo/sample-store.json
+++ b/elements/cms-hax/demo/sample-store.json
@@ -618,6 +618,7 @@
     "meme-maker": "@lrnwebcomponents/meme-maker/meme-maker.js",
     "grid-plate": "@lrnwebcomponents/grid-plate/grid-plate.js",
     "multiple-choice": "@lrnwebcomponents/multiple-choice/multiple-choice.js",
+    "true-false-question": "@lrnwebcomponents/multiple-choice/lib/true-false-question.js",
     "person-testimonial": "@lrnwebcomponents/person-testimonial/person-testimonial.js",
     "place-holder": "@lrnwebcomponents/place-holder/place-holder.js",
     "q-r": "@lrnwebcomponents/q-r/q-r.js",
diff --git a/elements/h-a-x/demo/appstore.json b/elements/h-a-x/demo/appstore.json
index 13773ec0c8..31888b06d4 100644
--- a/elements/h-a-x/demo/appstore.json
+++ b/elements/h-a-x/demo/appstore.json
@@ -561,6 +561,7 @@
     "meme-maker": "@lrnwebcomponents/meme-maker/meme-maker.js",
     "grid-plate": "@lrnwebcomponents/grid-plate/grid-plate.js",
     "multiple-choice": "@lrnwebcomponents/multiple-choice/multiple-choice.js",
+    "true-false-question": "@lrnwebcomponents/multiple-choice/lib/true-false-question.js",
     "person-testimonial": "@lrnwebcomponents/person-testimonial/person-testimonial.js",
     "place-holder": "@lrnwebcomponents/place-holder/place-holder.js",
     "q-r": "@lrnwebcomponents/q-r/q-r.js",
diff --git a/elements/hax-body/demo/appstore.json b/elements/hax-body/demo/appstore.json
index cfc01d6f04..b3a8fdfd89 100644
--- a/elements/hax-body/demo/appstore.json
+++ b/elements/hax-body/demo/appstore.json
@@ -606,6 +606,7 @@
     "stop-note": "@lrnwebcomponents/stop-note/stop-note.js",
     "video-player": "@lrnwebcomponents/video-player/video-player.js",
     "multiple-choice": "@lrnwebcomponents/multiple-choice/multiple-choice.js",
+    "true-false-question": "@lrnwebcomponents/multiple-choice/lib/true-false-question.js",
     "accent-card": "@lrnwebcomponents/accent-card/accent-card.js",
     "a11y-gif-player": "@lrnwebcomponents/a11y-gif-player/a11y-gif-player.js",
     "page-break": "@lrnwebcomponents/page-break/page-break.js",
diff --git a/elements/hax-body/demo/shoelace.json b/elements/hax-body/demo/shoelace.json
index ebb5733d56..41bd1295eb 100644
--- a/elements/hax-body/demo/shoelace.json
+++ b/elements/hax-body/demo/shoelace.json
@@ -616,6 +616,7 @@
     "meme-maker": "@lrnwebcomponents/meme-maker/meme-maker.js",
     "grid-plate": "@lrnwebcomponents/grid-plate/grid-plate.js",
     "multiple-choice": "@lrnwebcomponents/multiple-choice/multiple-choice.js",
+    "true-false-question": "@lrnwebcomponents/multiple-choice/lib/true-false-question.js",
     "person-testimonial": "@lrnwebcomponents/person-testimonial/person-testimonial.js",
     "place-holder": "@lrnwebcomponents/place-holder/place-holder.js",
     "q-r": "@lrnwebcomponents/q-r/q-r.js",
diff --git a/elements/hax-bookmarklet/demo/appstore.json b/elements/hax-bookmarklet/demo/appstore.json
index ba2669626d..13922c2767 100644
--- a/elements/hax-bookmarklet/demo/appstore.json
+++ b/elements/hax-bookmarklet/demo/appstore.json
@@ -618,6 +618,7 @@
     "meme-maker": "@lrnwebcomponents/meme-maker/meme-maker.js",
     "grid-plate": "@lrnwebcomponents/grid-plate/grid-plate.js",
     "multiple-choice": "@lrnwebcomponents/multiple-choice/multiple-choice.js",
+    "true-false-question": "@lrnwebcomponents/multiple-choice/lib/true-false-question.js",
     "person-testimonial": "@lrnwebcomponents/person-testimonial/person-testimonial.js",
     "place-holder": "@lrnwebcomponents/place-holder/place-holder.js",
     "q-r": "@lrnwebcomponents/q-r/q-r.js",
diff --git a/elements/hax-cloud/demo/dist/dev/appstore.json b/elements/hax-cloud/demo/dist/dev/appstore.json
index b84212101f..860efb8e62 100644
--- a/elements/hax-cloud/demo/dist/dev/appstore.json
+++ b/elements/hax-cloud/demo/dist/dev/appstore.json
@@ -645,6 +645,7 @@
     "stop-note": "@lrnwebcomponents/stop-note/stop-note.js",
     "video-player": "@lrnwebcomponents/video-player/video-player.js",
     "multiple-choice": "@lrnwebcomponents/multiple-choice/multiple-choice.js",
+    "true-false-question": "@lrnwebcomponents/multiple-choice/lib/true-false-question.js",
     "a11y-collapse": "@lrnwebcomponents/a11y-collapse/a11y-collapse.js",
     "accent-card": "@lrnwebcomponents/accent-card/accent-card.js",
     "a11y-gif-player": "@lrnwebcomponents/a11y-gif-player/a11y-gif-player.js",
diff --git a/elements/hax-cloud/lib/appstore.json b/elements/hax-cloud/lib/appstore.json
index b84212101f..860efb8e62 100644
--- a/elements/hax-cloud/lib/appstore.json
+++ b/elements/hax-cloud/lib/appstore.json
@@ -645,6 +645,7 @@
     "stop-note": "@lrnwebcomponents/stop-note/stop-note.js",
     "video-player": "@lrnwebcomponents/video-player/video-player.js",
     "multiple-choice": "@lrnwebcomponents/multiple-choice/multiple-choice.js",
+    "true-false-question": "@lrnwebcomponents/multiple-choice/lib/true-false-question.js",
     "a11y-collapse": "@lrnwebcomponents/a11y-collapse/a11y-collapse.js",
     "accent-card": "@lrnwebcomponents/accent-card/accent-card.js",
     "a11y-gif-player": "@lrnwebcomponents/a11y-gif-player/a11y-gif-player.js",
diff --git a/elements/haxcms-elements/demo/dist/dev/appstore.json b/elements/haxcms-elements/demo/dist/dev/appstore.json
index 3070e67b56..dce4bdac5b 100644
--- a/elements/haxcms-elements/demo/dist/dev/appstore.json
+++ b/elements/haxcms-elements/demo/dist/dev/appstore.json
@@ -653,6 +653,7 @@
     "stop-note": "@lrnwebcomponents/stop-note/stop-note.js",
     "video-player": "@lrnwebcomponents/video-player/video-player.js",
     "multiple-choice": "@lrnwebcomponents/multiple-choice/multiple-choice.js",
+    "true-false-question": "@lrnwebcomponents/multiple-choice/lib/true-false-question.js",
     "a11y-collapse": "@lrnwebcomponents/a11y-collapse/a11y-collapse.js",
     "accent-card": "@lrnwebcomponents/accent-card/accent-card.js",
     "a11y-gif-player": "@lrnwebcomponents/a11y-gif-player/a11y-gif-player.js",
diff --git a/elements/haxcms-elements/demo/fake/dev/appstore.json b/elements/haxcms-elements/demo/fake/dev/appstore.json
index 67d707c988..a4929aa794 100644
--- a/elements/haxcms-elements/demo/fake/dev/appstore.json
+++ b/elements/haxcms-elements/demo/fake/dev/appstore.json
@@ -622,6 +622,7 @@
     "meme-maker": "@lrnwebcomponents/meme-maker/meme-maker.js",
     "grid-plate": "@lrnwebcomponents/grid-plate/grid-plate.js",
     "multiple-choice": "@lrnwebcomponents/multiple-choice/multiple-choice.js",
+    "true-false-question": "@lrnwebcomponents/multiple-choice/lib/true-false-question.js",
     "person-testimonial": "@lrnwebcomponents/person-testimonial/person-testimonial.js",
     "place-holder": "@lrnwebcomponents/place-holder/place-holder.js",
     "q-r": "@lrnwebcomponents/q-r/q-r.js",
diff --git a/elements/multiple-choice/demo/index.html b/elements/multiple-choice/demo/index.html
index 0cc4d40165..32df75d1cd 100644
--- a/elements/multiple-choice/demo/index.html
+++ b/elements/multiple-choice/demo/index.html
@@ -9,6 +9,7 @@
     <script type="module">
       import '@polymer/iron-demo-helpers/demo-snippet.js';
       import '../multiple-choice.js';
+      import '../lib/true-false-question.js';
       import "@lrnwebcomponents/simple-toast/simple-toast.js";
 
       globalThis.SimpleToast.requestAvailability()
@@ -20,12 +21,18 @@
       <h3>Basic multiple-choice progressive enhancement</h3>
       <demo-snippet>
         <template>
+          <true-false-question
+          question="Ducks have wings.">
+            <input correct value="True"/>
+            <input value="False"/>
+            <p slot="correct-feedback">Yay! Let's jump in the money pit.</p>
+              <p slot="incorrect-feedback">You're despicable. What a quack!</p>
+          </true-false-question>
           <multiple-choice
           id="basic"
           name="basic"
-          title="Which are ducks????"
-          randomize
-          question="Which are ducks?">
+          question="Which are ducks????"
+          randomize>
             <input correct value="Huey"/>
             <input correct value="Duey"/>
             <input correct value="Daffy"/>
@@ -105,7 +112,7 @@ <h3>Deprecated multiple-choice with input</h3>
         <template>
           <multiple-choice
           id="deprecated"
-          title="Which are ducks?"
+          question="Which are ducks?"
           correct-text="Yay! Let's jump in the money pit."
           incorrect-text="You're despicable. What a quack!"
           randomize>
@@ -118,7 +125,7 @@ <h3>Deprecated multiple-choice with input</h3>
           <multiple-choice
           id="deprecated2"
           edit-mode
-          title="Which are ducks?"
+          question="Which are ducks?"
           correct-text="Yay! Let's jump in the money pit."
           incorrect-text="You're despicable. What a quack!"
           randomize>
@@ -138,15 +145,15 @@ <h3>Importing from a list</h3>
           <multiple-choice
           id="deprecated3"
           edit-mode
-          title="Which are ducks?"
+          question="Which are ducks?"
           correct-text="Yay! Let's jump in the money pit."
           incorrect-text="You're despicable. What a quack!"
           randomize>
           <ul>
-            <li value=">Huey</li>
-            <li value=">Duey</li>
-            <li value=">Daffy</li>
-            <li value=">Donald</li>
+            <li correct>Huey</li>
+            <li correct>Duey</li>
+            <li correct>Daffy</li>
+            <li correct>Donald</li>
             <li>Mickey</li>
           </ul>
           </multiple-choice>
diff --git a/elements/multiple-choice/lib/QuestionElement.js b/elements/multiple-choice/lib/QuestionElement.js
new file mode 100644
index 0000000000..f90f40e63c
--- /dev/null
+++ b/elements/multiple-choice/lib/QuestionElement.js
@@ -0,0 +1,588 @@
+// superclass that can be used to more rapidly build question based components
+import { LitElement, html, css } from "lit";
+import { SchemaBehaviors } from "@lrnwebcomponents/schema-behaviors/schema-behaviors.js";
+import { DDDSuper } from "@lrnwebcomponents/d-d-d/d-d-d.js";
+import "@lrnwebcomponents/simple-icon/simple-icon.js";
+import "@lrnwebcomponents/simple-icon/lib/simple-icons.js";
+import "@lrnwebcomponents/simple-fields/lib/simple-fields-field.js";
+import "@lrnwebcomponents/simple-toolbar/lib/simple-toolbar-button.js";
+import "@lrnwebcomponents/simple-toast/simple-toast.js";
+
+
+export class QuestionElement extends SchemaBehaviors(DDDSuper(LitElement)) {
+
+  constructor() {
+    super();
+    this.shadowRootOptions = {
+      ...LitElement.shadowRootOptions,
+      delegatesFocus: true,
+    };
+    this.randomize = false;
+    this.hideButtons = false;
+    this.disabled = false;
+    this.singleOption = false;
+    this.checkLabel = "Check answer";
+    this.resetLabel = "Reset";
+    this.question = "";
+    this.answers = [];
+    this.displayedAnswers = [];
+    this.correctText = "Great job!";
+    this.correctIcon = "icons:thumb-up";
+    this.incorrectText = "Better luck next time!";
+    this.incorrectIcon = "icons:thumb-down";
+    this.quizName = "default";
+  }
+  updated(changedProperties) {
+    if (super.updated) {
+      super.updated(changedProperties);
+    }
+    changedProperties.forEach((oldValue, propName) => {
+      let notifiedProps = ["answers", "displayedAnswers"];
+      if (notifiedProps.includes(propName)) {
+        // notify
+        let eventName = `${propName
+          .replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2")
+          .toLowerCase()}-changed`;
+        this.dispatchEvent(
+          new CustomEvent(eventName, {
+            detail: {
+              value: this[propName],
+            },
+          }),
+        );
+      }
+      if (propName == "answers" && this.answers && this.answers.length > 0) {
+        this.displayedAnswers = [
+          ...this._computeDisplayedAnswers(this.answers, this.randomize),
+        ];
+      }
+    });
+  }
+
+  checkedEvent(e) {
+    // ensure there's a match w/ the event data
+    this.displayedAnswers[e.target.name].userGuess = e.detail.value;
+    this.requestUpdate();
+  }
+
+  /**
+   * Reset user answers and shuffle the board again.
+   */
+  resetAnswers(e) {
+    globalThis.dispatchEvent(
+      new CustomEvent("simple-toast-hide", {
+        bubbles: true,
+        composed: true,
+        cancelable: false,
+        detail: false,
+      }),
+    );
+    this.displayedAnswers = [];
+    this.answers.forEach((el) => {
+      el.userGuess = "";
+    });
+    const answers = JSON.parse(JSON.stringify(this.answers));
+    this.answers = [...answers];
+  }
+
+  /**
+   * Return if the current answers are correct
+   */
+  checkAnswers() {
+    let gotRight = true;
+    // see that they got them all right
+    for (var i in this.displayedAnswers) {
+      if (
+        gotRight != false &&
+        this.displayedAnswers[i].correct &&
+        this.displayedAnswers[i].userGuess
+      ) {
+        gotRight = true;
+      } else if (
+        this.displayedAnswers[i].correct &&
+        !this.displayedAnswers[i].userGuess
+      ) {
+        gotRight = false;
+      } else if (
+        !this.displayedAnswers[i].correct &&
+        this.displayedAnswers[i].userGuess
+      ) {
+        gotRight = false;
+      }
+    }
+    return gotRight;
+  }
+  /**
+   * Verify the answers of the user based on their saying
+   * that they want to see how they did.
+   */
+  _verifyAnswers(e) {
+    globalThis.dispatchEvent(
+      new CustomEvent("simple-toast-hide", {
+        bubbles: true,
+        composed: true,
+        cancelable: false,
+        detail: false,
+      }),
+    );
+    let si = document.createElement("simple-icon-lite");
+    let extras = {};
+    let toastShowEventName = "simple-toast-show";
+    // support for haxcms toast
+    if (globalThis.HAXCMSToast) {
+      toastShowEventName = "haxcms-toast-show";
+      si.style.setProperty("--simple-icon-height", "40px");
+      si.style.setProperty("--simple-icon-width", "40px");
+      si.style.height = "150px";
+      si.style.marginLeft = "8px";
+    }
+    let gotRight = this.checkAnswers();
+    // see if they got this correct based on their answers
+    if (gotRight) {
+      this.__toastColor = "green";
+      this.__toastIcon = this.correctIcon;
+      this.__toastText = this.correctText;
+      // make it fun... and performant!
+      import("./confetti-container.js").then((module) => {
+        setTimeout(() => {
+          this.shadowRoot.querySelector("#confetti").setAttribute("popped", "");
+        }, 0);
+      });
+      extras.hat = "party";
+    } else {
+      this.__toastColor = "red";
+      this.__toastIcon = this.incorrectIcon;
+      this.__toastText = this.incorrectText;
+      extras.fire = true;
+    }
+    si.icon = this.__toastIcon;
+    si.style.marginLeft = "16px";
+    si.accentColor = this.__toastColor;
+    si.dark = true;
+    // gets it all the way to the top immediately
+    globalThis.dispatchEvent(
+      new CustomEvent(toastShowEventName, {
+        bubbles: true,
+        composed: true,
+        cancelable: true,
+        detail: {
+          text: this.__toastText,
+          accentColor: this.__toastColor,
+          duration: 3000,
+          slot: si,
+          ...extras,
+        },
+      }),
+    );
+    // start of data passing, this is a prototype atm
+    let eventData = {
+      activityDisplay: "answered",
+      objectName: this.quizName,
+      resultSuccess: gotRight,
+    };
+    this.dispatchEvent(
+      new CustomEvent("user-engagement", {
+        bubbles: true,
+        composed: true,
+        cancelable: false,
+        detail: eventData,
+      }),
+    );
+  }
+
+  /**
+   * Figure out the order of the answers which will be displayed
+   */
+  _computeDisplayedAnswers(answers, randomize) {
+    // if we are editing via HAX, don't randomize the answers
+    // as we are actively editing the content and this is amazingly jarring
+    if (
+      typeof answers !== typeof undefined &&
+      answers != null &&
+      answers.length > 0 &&
+      randomize &&
+      !this._haxstate
+    ) {
+      let random = answers;
+      var currentIndex = random.length,
+        temporaryValue,
+        randomIndex;
+      // While there remain elements to shuffle...
+      while (0 !== currentIndex) {
+        // Pick a remaining element...
+        randomIndex = Math.floor(Math.random() * currentIndex);
+        currentIndex -= 1;
+        // And swap it with the current element.
+        temporaryValue = random[currentIndex];
+        random[currentIndex] = random[randomIndex];
+        random[randomIndex] = temporaryValue;
+      }
+      // @todo apply a random sort to the answers array
+      return random;
+    } else {
+      return answers;
+    }
+  }
+  static get properties() {
+    return {
+      ...super.properties,
+      /**
+       * Support disabling interaction with the entire board
+       */
+      disabled: {
+        type: Boolean,
+      },
+      /**
+       * Simple option, otherwise allow multiple via checkbox
+       */
+      singleOption: {
+        type: Boolean,
+        attribute: "single-option",
+      },
+      /**
+       * Text of the label to check your answer
+       */
+      checkLabel: {
+        type: String,
+        attribute: "check-label",
+      },
+      /**
+       * Text of the reset button
+       */
+      resetLabel: {
+        type: String,
+        attribute: "reset-label",
+      },
+      /**
+       * Related Resource ID
+       */
+      relatedResource: {
+        type: String,
+        attribute: "related-resource",
+      },
+      /**
+       * Question to ask
+       */
+      question: {
+        type: String,
+      },
+      /**
+       * Array of possible answers
+       */
+      answers: {
+        type: Array,
+      },
+      /**
+       * Displayed Answer set.
+       */
+      displayedAnswers: {
+        type: Array,
+      },
+      /**
+       * Correct answer text to display
+       */
+      correctText: {
+        type: String,
+        attribute: "correct-text",
+      },
+      /**
+       * Incorrect answer text to display
+       */
+      incorrectText: {
+        type: String,
+        attribute: "incorrect-text",
+      },
+      /**
+       * Correct answer text to display
+       */
+      correctIcon: {
+        type: String,
+        attribute: "correct-icon",
+      },
+      /**
+       * Incorrect answer text to display
+       */
+      incorrectIcon: {
+        type: String,
+        attribute: "incorrect-icon",
+      },
+      /**
+       * Name of the quiz - hardcoded for now from HTML
+       */
+      quizName: {
+        type: String,
+        attribute: "quiz-name",
+      },
+      /**
+       * Randomize the display of the answers
+       */
+      randomize: {
+        type: Boolean,
+        reflect: true,
+      },
+      /**
+       * flag to hide buttons
+       */
+      hideButtons: {
+        type: Boolean,
+        attribute: "hide-buttons",
+      },
+    };
+  }
+  /**
+   * LitElement constructable styles enhancement
+   */
+  static get styles() {
+    return [
+      super.styles,
+      css`
+        :host {
+          display: block;
+          min-width: 160px;
+          padding: var(--ddd-spacing-8);
+          border: var(--ddd-border-md);
+          background-color: var(--simple-colors-default-theme-accent-1);
+          border-radius: var(--ddd-radius-xs);
+          transition: all 0.3s ease-in-out;
+          color: var(--simple-colors-default-theme-grey-12);
+          --simple-toolbar-button-border-color: var(
+            --simple-colors-default-theme-grey-4
+          );
+          --simple-fields-field-color: var(
+            --simple-colors-default-theme-grey-12
+          );
+          --simple-fields-field-ink-color: var(
+            --simple-colors-default-theme-grey-12
+          );
+          --simple-fields-field-checked-color: var(
+            --simple-colors-default-theme-accent-8
+          );
+          --simple-fields-field-checked-ink-color: var(
+            --simple-colors-default-theme-accent-8
+          );
+          --simple-fields-field-checkmark-color: var(
+            --simple-colors-default-theme-grey-1
+          );
+          --simple-fields-field-label-color: var(
+            --simple-colors-default-theme-grey-12
+          );
+          --simple-fields-field-error-color: var(
+            --simple-colors-default-theme-red-8
+          );
+          --simple-fields-border-bottom-size: 0px;
+          --simple-fields-border-bottom-focus-size: 0px;
+        }
+
+        :host(:focus),
+        :host(:focus-within),
+        :host(:hover) {
+          border-color: var(--simple-colors-default-theme-accent-12);
+        }
+
+        :host button {
+          background-color: var(--simple-colors-default-theme-grey-1);
+          color: var(--simple-colors-default-theme-grey-12);
+        }
+        :host simple-fields-field:hover,
+        :host simple-fields-field:focus,
+        :host simple-fields-field:focus-within,
+        :host simple-fields-field:active {
+          cursor: pointer;
+          background-color: var(--simple-colors-default-theme-accent-3);
+          color: var(--simple-colors-default-theme-accent-12);
+          box-shadow: var(--ddd-boxShadow-sm);
+          border-color: black;
+        }
+        ul {
+          list-style: none;
+          padding: 0;
+          margin: 0;
+        }
+        h3 {
+          padding: 0;
+          margin: 0 0 var(--ddd-spacing-8) 0;
+          font-family: var(--ddd-font-navigation);
+        }
+        ul li {
+          padding: 0;
+        }
+        simple-icon {
+          display: inline-flex;
+        }
+        #buttons {
+          display: flex;
+          align-items: center;
+          justify-content: flex-end;
+          margin: var(--ddd-spacing-4) 0 0 0;
+        }
+        #check {
+          margin-right: var(--ddd-spacing-4);
+        }
+        simple-fields-field {
+          padding: var(--ddd-spacing-4);
+          transition: all 0.3s ease-in-out;
+          margin: 0;
+          border: var(--ddd-border-md);
+          border-radius: var(--ddd-radius-xs);
+          color: var(--simple-colors-default-theme-accent-10);
+          background-color: var(--simple-colors-default-theme-accent-2);
+          --simple-fields-font-family: var(--ddd-font-navigation);
+          --simple-fields-font-size: var(--ddd-font-size-xs);
+          --simple-fields-line-height: var(--ddd-font-size-xs);
+          --simple-icon-height: var(--ddd-icon-xs);
+          --simple-icon-width: var(--ddd-icon-xs);
+        }
+        simple-toolbar-button {
+          font-size: var(--ddd-font-size-xs);
+          font-family: var(--ddd-font-navigation);
+          transition: all 0.3s ease-in-out;
+        }
+        :host simple-toolbar-button:hover::part(button),
+        :host simple-toolbar-button:focus::part(button),
+        :host simple-toolbar-button:focus-within::part(button),
+        :host simple-toolbar-button:active::part(button) {
+          cursor: pointer;
+          background-color: var(--simple-colors-default-theme-accent-3);
+          color: var(--simple-colors-default-theme-accent-12);
+          box-shadow: var(--ddd-boxShadow-sm);
+          border-color: black;
+        }
+        simple-toolbar-button::part(button) {
+          border: var(--ddd-border-md);
+          border-radius: var(--ddd-radius-xs);
+          padding: var(--ddd-spacing-2);
+          transition: all 0.3s ease-in-out;
+        }
+        simple-toolbar-button::part(label) {
+          font-size: var(--ddd-font-size-xs);
+          font-family: var(--ddd-font-navigation);
+          padding: 0;
+          margin: 0;
+        }
+        simple-fields-field::part(option-inner) {
+          position: absolute;
+          right: 0px;
+          font-family: var(--ddd-font-navigation);
+          font-size: var(--ddd-font-size-xs);
+          bottom: 50%;
+          top: 50%;
+          padding: 0px;
+          margin: 0px;
+        }
+        ul,
+        ol {
+          gap: var(--ddd-spacing-4);
+        }
+        simple-icon {
+          display: inline-flex;
+        }
+      `,
+    ];
+  }
+
+  /**
+   * HAX preprocess Node to Content hook
+   */
+  async haxpreProcessNodeToContent(node) {
+    // ensure we dont accidently have the answer displayed!
+    // this also rips the data into the lightDom for saving
+    // so that we can unset the array data on the object at save time
+    // this helps improve SEO / compatibility with CMS solutions
+    if (node.answers) {
+      // ensure this is null before generating new answers
+      // otherwise page to page saves we could lose statefulness
+      this.innerHTML = "";
+      for (var i in node.answers) {
+        if (node.answers[i]) {
+          let answer = document.createElement("input");
+          answer.setAttribute("type", "checkbox");
+          answer.value = node.answers[i].label;
+          if (node.answers[i].correct) {
+            answer.setAttribute("correct", "correct");
+          }
+          node.appendChild(answer);
+        }
+      }
+    }
+    return node;
+  }
+
+  /**
+   * HAX preprocess insert content hook
+   */
+  haxpreProcessInsertContent(detail, activeNode) {
+    // ensure we dont accidently have the answer displayed!
+    if (detail.properties.answers) {
+      detail.properties.answers = detail.properties.answers.map(function (val) {
+        if (val.userGuess) {
+          delete val.userGuess;
+        }
+        return val;
+      });
+    }
+    return detail;
+  }
+  firstUpdated(changedProperties) {
+    if (super.firstUpdated) {
+      super.firstUpdated(changedProperties);
+    }
+    this.setAttribute("typeof", "oer:Assessment");
+    // check lightdom on setup for answers to be read in
+    // this only happens on initial paint
+    this.loadLightDomData();
+  }
+
+  loadLightDomData() {
+    if (this.children.length > 0) {
+      let inputs = Array.from(this.querySelectorAll("input,li"));
+      let answers = [];
+      for (var i in inputs) {
+        let answer = {
+          label: inputs[i].value || inputs[i].innerText,
+          correct: inputs[i].getAttribute("correct") == null ? false : true,
+        };
+        answers.push(answer);
+      }
+      this.answers = answers;
+      // look for light dom slot markers
+      const correctLD = this.querySelector('[slot="correct-feedback"]');
+      const incorrectLD = this.querySelector('[slot="incorrect-feedback"]');
+      const questionLD = this.querySelector('[slot="question"]');
+      if (correctLD) {
+        this.correctText = correctLD.innerText;
+      }
+      if (incorrectLD) {
+        this.incorrectText = incorrectLD.innerText;
+      }
+      if (questionLD) {
+        this.question = questionLD.innerText;
+      }
+      // wipe lightdom after reading it in for data. This makes it harder for someone
+      // to just inspect the document and get at the underlying data
+
+      this.innerHTML = "";
+    }
+  }
+
+  haxactiveElementChanged(element, value) {
+    if (value) {
+      this._haxstate = value;
+    }
+  }
+
+  haxeditModeChanged(value) {
+    this._haxstate = value;
+  }
+
+    /**
+   * Implements haxHooks to tie into life-cycle if hax exists.
+   */
+    haxHooks() {
+      return {
+        editModeChanged: "haxeditModeChanged",
+        activeElementChanged: "haxactiveElementChanged",
+        preProcessNodeToContent: "haxpreProcessNodeToContent",
+        preProcessInsertContent: "haxpreProcessInsertContent",
+      };
+    }
+}
\ No newline at end of file
diff --git a/elements/multiple-choice/lib/true-false-question.haxProperties.json b/elements/multiple-choice/lib/true-false-question.haxProperties.json
new file mode 100644
index 0000000000..ea67845155
--- /dev/null
+++ b/elements/multiple-choice/lib/true-false-question.haxProperties.json
@@ -0,0 +1,95 @@
+{
+  "canScale": false,
+  "canEditSource": true,
+  "type": "grid",
+  "editMode": {
+    "editMode": true
+  },
+  "gizmo": {
+    "title": "True / False",
+    "description": "True false question",
+    "icon": "hax:multiple-choice",
+    "color": "purple",
+    "tags": [
+      "Instructional",
+      "quiz",
+      "true false"
+    ],
+    "handles": [],
+    "meta": {
+      "author": "HAXTheWeb core team"
+    }
+  },
+  "settings": {
+    "configure": [
+      {
+        "property": "question",
+        "title": "Question",
+        "description": "Question for users to respond to.",
+        "inputMethod": "textfield"
+      },
+      {
+        "property": "tfAnswer",
+        "title": "Correct Answer",
+        "inputMethod": "radio",
+        "itemsList": [
+          {
+            "value": true,
+            "text": "True"
+          },
+          {
+            "value": false,
+            "text": "False"
+          }
+        ]
+      },
+      {
+        "property": "correctText",
+        "title": "Correct feedback",
+        "description": "Feedback when they get it right",
+        "inputMethod": "textfield"
+      },
+      {
+        "property": "incorrectText",
+        "title": "Incorrect feedback",
+        "description": "Feedback when they get it wrong",
+        "inputMethod": "textfield"
+      }
+    ],
+    "advanced": [
+      {
+        "property": "checkLabel",
+        "title": "Check answers label",
+        "description": "Label for getting solution feedback",
+        "inputMethod": "textfield"
+      },
+      {
+        "property": "resetLabel",
+        "title": "Reset label",
+        "description": "label for the reset button",
+        "inputMethod": "textfield"
+      }
+    ],
+    "developer": [
+      {
+        "property": "quizName",
+        "title": "Name of the quiz",
+        "description": "Quiz name passed in for use in xAPI driven environments for identification of this item",
+        "inputMethod": "textfield"
+      }
+    ]
+  },
+  "saveOptions": {
+    "unsetAttributes": ["__utils", "displayed-answers", "colors", "answers", "tfAnswer"]
+  },
+  "demoSchema": [
+    {
+      "tag": "true-false-question",
+      "properties": {
+        "answer": true,
+        "question": "HAX is game changing."
+      },
+      "content": "<input type=\"checkbox\" value=\"True\" correct>\n<input type=\"checkbox\" value=\"False\">"
+    }
+  ]
+}
diff --git a/elements/multiple-choice/lib/true-false-question.js b/elements/multiple-choice/lib/true-false-question.js
new file mode 100644
index 0000000000..3a356a4b0c
--- /dev/null
+++ b/elements/multiple-choice/lib/true-false-question.js
@@ -0,0 +1,188 @@
+import {  html } from "lit";
+import "@lrnwebcomponents/simple-fields/lib/simple-fields-field.js";
+import { QuestionElement } from "./QuestionElement.js";
+/**
+ * `true-false-question`
+ * `Ask the user a question from a set of possible answers.`
+ * @demo demo/index.html
+ * @element true-false-question
+ */
+class TrueFalseQuestion extends QuestionElement {
+
+  static get tag() {
+    return "true-false-question";
+  }
+  constructor() {
+    super();
+    this.tfAnswer = null;
+    this.singleOption = true;
+    this.randomize = false;
+  }
+  render() {
+    return html`
+      <confetti-container id="confetti">
+        <meta property="oer:assessing" content="${this.relatedResource}" />
+        <h3 property="oer:name">${this.question}</h3>
+          <fieldset id="answers">
+            ${this.displayedAnswers.map(
+              (answer, index) => html`
+                <simple-fields-field
+                  type="${this.singleOption ? "radio" : "checkbox"}"
+                  ?disabled="${this.disabled}"
+                  property="oer:answer"
+                  name="${index}"
+                  @mousedown="${this.clickSingle}"
+                  @keydown="${this.clickSingle}"
+                  .value="${answer ? answer.userGuess : ""}"
+                  @value-changed="${this.checkedEvent}"
+                  label="${answer && answer.label ? answer.label : ""}"
+                ></simple-fields-field>
+              `,
+            )}
+          </fieldset>
+        ${!this.hideButtons
+          ? html`
+              <div id="buttons">
+                <simple-toolbar-button
+                  id="check"
+                  ?disabled="${this.disabled}"
+                  @click="${this._verifyAnswers}"
+                  label="${this.checkLabel}"
+                >
+                </simple-toolbar-button>
+                <simple-toolbar-button
+                  id="reset"
+                  ?disabled="${this.disabled}"
+                  @click="${this.resetAnswers}"
+                  label="${this.resetLabel}"
+                >
+                </simple-toolbar-button>
+              </div>
+            `
+          : ``}
+      </confetti-container>
+    `;
+  }
+  clickSingle(e) {  
+    // single option shortcut only bc we have to wipe all others
+    if (this.singleOption) {
+      let proceed = false;
+      // ensure if it's a keyboard it was enter or space
+      if (e.key) {
+        if (e.key === " " || e.key === "Enter") {
+          proceed = true;
+        }
+        else if (e.key === "ArrowUp") {
+          e.preventDefault();
+          if (e.target.previousElementSibling) {
+            e.target.previousElementSibling.focus();
+          }
+          else {
+            e.target.parentNode.lastElementChild.focus();
+          }
+        }
+        else if (e.key === "ArrowDown") {
+          e.preventDefault();
+          if (e.target.nextElementSibling) {
+            e.target.nextElementSibling.focus();
+          }
+          else {
+            e.target.parentNode.firstElementChild.focus();
+          }
+        }
+      }
+      // if click then we process regardless
+      else {
+        proceed = true;
+      }
+      // wipe answer data, THEN update will happen later when all the values change
+      if (proceed) {
+        for (let i in this.displayedAnswers) {
+          if (i === e.target.name) {
+            if (e.key) {
+              if (this.displayedAnswers[i].userGuess) {
+                this.displayedAnswers[i].userGuess = "";
+              }
+              else {
+                this.displayedAnswers[i].userGuess = true;
+              }
+            }
+          }
+          else {
+            this.displayedAnswers[i].userGuess = (i === e.target.name) ? true : "";
+          }
+        }
+      }
+    }
+    else {
+      if (e.key) {
+        if (e.key === "ArrowUp") {
+          e.preventDefault();
+          if (e.target.previousElementSibling) {
+            e.target.previousElementSibling.focus();
+          }
+          else {
+            e.target.parentNode.lastElementChild.focus();
+          }
+        }
+        else if (e.key === "ArrowDown") {
+          e.preventDefault();
+          if (e.target.nextElementSibling) {
+            e.target.nextElementSibling.focus();
+          }
+          else {
+            e.target.parentNode.firstElementChild.focus();
+          }
+        }
+        else if (e.key === "Enter") {
+          this.displayedAnswers[e.target.name].userGuess = (this.displayedAnswers[e.target.name].userGuess) ? "" : true;
+        }
+      }
+    }
+    this.requestUpdate();
+  }
+  /**
+   * haxProperties integration via file reference
+   */
+  static get haxProperties() {
+    return new URL(`./${this.tag}.haxProperties.json`, import.meta.url)
+      .href;
+  }
+
+  static get properties() {
+    return {
+      ...super.properties,
+      tfAnswer: { type: Boolean, }
+    };
+  }
+
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    if (changedProperties.has('tfAnswer')) {
+      // initial setting when answers updates just prior
+      if (this.answers.length > 0 && this.tfAnswer === null) {
+        let index = this.answers.findIndex((item) => item.correct === true );
+        if (index === 0) {
+          this.tfAnswer = true;
+        }
+        else if (index === 1) {
+          this.tfAnswer = false;
+        }
+      }
+      if (this.tfAnswer !== null) {
+        console.log('ensure normalization');
+        if (this.tfAnswer) {
+          this.answers[0].correct = true;
+          this.answers[1].correct = false;
+        }
+        else {
+          this.answers[0].correct = false;
+          this.answers[1].correct = true;
+        }
+      }
+    }
+  }
+
+}
+globalThis.customElements.define(TrueFalseQuestion.tag, TrueFalseQuestion);
+export { TrueFalseQuestion };
diff --git a/elements/multiple-choice/multiple-choice.js b/elements/multiple-choice/multiple-choice.js
index 4c26201447..85fc8b00cb 100644
--- a/elements/multiple-choice/multiple-choice.js
+++ b/elements/multiple-choice/multiple-choice.js
@@ -6,212 +6,21 @@ import "@lrnwebcomponents/simple-icon/lib/simple-icons.js";
 import "@lrnwebcomponents/simple-fields/lib/simple-fields-field.js";
 import "@lrnwebcomponents/simple-toolbar/lib/simple-toolbar-button.js";
 import "@lrnwebcomponents/simple-toast/simple-toast.js";
+import { QuestionElement } from "./lib/QuestionElement.js";
 /**
  * `multiple-choice`
  * `Ask the user a question from a set of possible answers.`
  * @demo demo/index.html
  * @element multiple-choice
  */
-class MultipleChoice extends SchemaBehaviors(DDDSuper(LitElement)) {
-  /**
-   * LitElement constructable styles enhancement
-   */
-  static get styles() {
-    return [
-      super.styles,
-      css`
-        :host {
-          display: block;
-          min-width: 160px;
-          padding: var(--ddd-spacing-8);
-          border: var(--ddd-border-md);
-          background-color: var(--simple-colors-default-theme-accent-1);
-          border-radius: var(--ddd-radius-xs);
-          transition: all 0.3s ease-in-out;
-          color: var(--simple-colors-default-theme-grey-12);
-          --simple-toolbar-button-border-color: var(
-            --simple-colors-default-theme-grey-4
-          );
-          --simple-fields-field-color: var(
-            --simple-colors-default-theme-grey-12
-          );
-          --simple-fields-field-ink-color: var(
-            --simple-colors-default-theme-grey-12
-          );
-          --simple-fields-field-checked-color: var(
-            --simple-colors-default-theme-accent-8
-          );
-          --simple-fields-field-checked-ink-color: var(
-            --simple-colors-default-theme-accent-8
-          );
-          --simple-fields-field-checkmark-color: var(
-            --simple-colors-default-theme-grey-1
-          );
-          --simple-fields-field-label-color: var(
-            --simple-colors-default-theme-grey-12
-          );
-          --simple-fields-field-error-color: var(
-            --simple-colors-default-theme-red-8
-          );
-          --simple-fields-border-bottom-size: 0px;
-          --simple-fields-border-bottom-focus-size: 0px;
-        }
+class MultipleChoice extends QuestionElement {
 
-        :host(:focus),
-        :host(:focus-within),
-        :host(:hover) {
-          border-color: var(--simple-colors-default-theme-accent-12);
-        }
-
-        :host button {
-          background-color: var(--simple-colors-default-theme-grey-1);
-          color: var(--simple-colors-default-theme-grey-12);
-        }
-        :host simple-fields-field:hover,
-        :host simple-fields-field:focus,
-        :host simple-fields-field:focus-within,
-        :host simple-fields-field:active {
-          cursor: pointer;
-          background-color: var(--simple-colors-default-theme-accent-3);
-          color: var(--simple-colors-default-theme-accent-12);
-          box-shadow: var(--ddd-boxShadow-sm);
-          border-color: black;
-        }
-        ul {
-          list-style: none;
-          padding: 0;
-          margin: 0;
-        }
-        h3 {
-          padding: 0;
-          margin: 0 0 var(--ddd-spacing-8) 0;
-          font-family: var(--ddd-font-navigation);
-        }
-        ul li {
-          padding: 0;
-        }
-        simple-icon {
-          display: inline-flex;
-        }
-        #buttons {
-          display: flex;
-          align-items: center;
-          justify-content: flex-end;
-          margin: var(--ddd-spacing-4) 0 0 0;
-        }
-        #check {
-          margin-right: var(--ddd-spacing-4);
-        }
-        simple-fields-field {
-          padding: var(--ddd-spacing-4);
-          transition: all 0.3s ease-in-out;
-          margin: 0;
-          border: var(--ddd-border-md);
-          border-radius: var(--ddd-radius-xs);
-          color: var(--simple-colors-default-theme-accent-10);
-          background-color: var(--simple-colors-default-theme-accent-2);
-          --simple-fields-font-family: var(--ddd-font-navigation);
-          --simple-fields-font-size: var(--ddd-font-size-xs);
-          --simple-fields-line-height: var(--ddd-font-size-xs);
-          --simple-icon-height: var(--ddd-icon-xs);
-          --simple-icon-width: var(--ddd-icon-xs);
-        }
-        simple-toolbar-button {
-          font-size: var(--ddd-font-size-xs);
-          font-family: var(--ddd-font-navigation);
-          transition: all 0.3s ease-in-out;
-        }
-        :host simple-toolbar-button:hover::part(button),
-        :host simple-toolbar-button:focus::part(button),
-        :host simple-toolbar-button:focus-within::part(button),
-        :host simple-toolbar-button:active::part(button) {
-          cursor: pointer;
-          background-color: var(--simple-colors-default-theme-accent-3);
-          color: var(--simple-colors-default-theme-accent-12);
-          box-shadow: var(--ddd-boxShadow-sm);
-          border-color: black;
-        }
-        simple-toolbar-button::part(button) {
-          border: var(--ddd-border-md);
-          border-radius: var(--ddd-radius-xs);
-          padding: var(--ddd-spacing-2);
-          transition: all 0.3s ease-in-out;
-        }
-        simple-toolbar-button::part(label) {
-          font-size: var(--ddd-font-size-xs);
-          font-family: var(--ddd-font-navigation);
-          padding: 0;
-          margin: 0;
-        }
-        simple-fields-field::part(option-inner) {
-          position: absolute;
-          right: 0px;
-          font-family: var(--ddd-font-navigation);
-          font-size: var(--ddd-font-size-xs);
-          bottom: 50%;
-          top: 50%;
-          padding: 0px;
-          margin: 0px;
-        }
-        ul,
-        ol {
-          gap: var(--ddd-spacing-4);
-        }
-        simple-icon {
-          display: inline-flex;
-        }
-      `,
-    ];
-  }
   static get tag() {
     return "multiple-choice";
   }
   constructor() {
     super();
-    this.shadowRootOptions = {
-      ...LitElement.shadowRootOptions,
-      delegatesFocus: true,
-    };
-    this.randomize = false;
-    this.hideButtons = false;
-    this.disabled = false;
-    this.singleOption = false;
-    this.checkLabel = "Check answer";
-    this.resetLabel = "Reset";
-    this.question = "";
-    this.answers = [];
-    this.displayedAnswers = [];
-    this.correctText = "Great job!";
-    this.correctIcon = "icons:thumb-up";
-    this.incorrectText = "Better luck next time!";
-    this.incorrectIcon = "icons:thumb-down";
-    this.quizName = "default";
-  }
-  updated(changedProperties) {
-    if (super.updated) {
-      super.updated(changedProperties);
-    }
-    changedProperties.forEach((oldValue, propName) => {
-      let notifiedProps = ["answers", "displayedAnswers"];
-      if (notifiedProps.includes(propName)) {
-        // notify
-        let eventName = `${propName
-          .replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2")
-          .toLowerCase()}-changed`;
-        this.dispatchEvent(
-          new CustomEvent(eventName, {
-            detail: {
-              value: this[propName],
-            },
-          }),
-        );
-      }
-      if (propName == "answers" && this.answers && this.answers.length > 0) {
-        this.displayedAnswers = [
-          ...this._computeDisplayedAnswers(this.answers, this.randomize),
-        ];
-      }
-    });
+
   }
   render() {
     return html`
@@ -336,276 +145,6 @@ class MultipleChoice extends SchemaBehaviors(DDDSuper(LitElement)) {
     }
     this.requestUpdate();
   }
-  checkedEvent(e) {
-    // ensure there's a match w/ the event data
-    this.displayedAnswers[e.target.name].userGuess = e.detail.value;
-    this.requestUpdate();
-  }
-  static get properties() {
-    return {
-      ...super.properties,
-      /**
-       * Support disabling interaction with the entire board
-       */
-      disabled: {
-        type: Boolean,
-      },
-      /**
-       * Simple option, otherwise allow multiple via checkbox
-       */
-      singleOption: {
-        type: Boolean,
-        attribute: "single-option",
-      },
-      /**
-       * Text of the label to check your answer
-       */
-      checkLabel: {
-        type: String,
-        attribute: "check-label",
-      },
-      /**
-       * Text of the reset button
-       */
-      resetLabel: {
-        type: String,
-        attribute: "reset-label",
-      },
-      /**
-       * Related Resource ID
-       */
-      relatedResource: {
-        type: String,
-        attribute: "related-resource",
-      },
-      /**
-       * Question to ask
-       */
-      question: {
-        type: String,
-      },
-      /**
-       * Array of possible answers
-       */
-      answers: {
-        type: Array,
-      },
-      /**
-       * Displayed Answer set.
-       */
-      displayedAnswers: {
-        type: Array,
-      },
-      /**
-       * Correct answer text to display
-       */
-      correctText: {
-        type: String,
-        attribute: "correct-text",
-      },
-      /**
-       * Incorrect answer text to display
-       */
-      incorrectText: {
-        type: String,
-        attribute: "incorrect-text",
-      },
-      /**
-       * Correct answer text to display
-       */
-      correctIcon: {
-        type: String,
-        attribute: "correct-icon",
-      },
-      /**
-       * Incorrect answer text to display
-       */
-      incorrectIcon: {
-        type: String,
-        attribute: "incorrect-icon",
-      },
-      /**
-       * Name of the quiz - hardcoded for now from HTML
-       */
-      quizName: {
-        type: String,
-        attribute: "quiz-name",
-      },
-      /**
-       * Randomize the display of the answers
-       */
-      randomize: {
-        type: Boolean,
-        reflect: true,
-      },
-      /**
-       * flag to hide buttons
-       */
-      hideButtons: {
-        type: Boolean,
-        attribute: "hide-buttons",
-      },
-    };
-  }
-
-  /**
-   * Reset user answers and shuffle the board again.
-   */
-  resetAnswers(e) {
-    globalThis.dispatchEvent(
-      new CustomEvent("simple-toast-hide", {
-        bubbles: true,
-        composed: true,
-        cancelable: false,
-        detail: false,
-      }),
-    );
-    this.displayedAnswers = [];
-    this.answers.forEach((el) => {
-      el.userGuess = "";
-    });
-    const answers = JSON.parse(JSON.stringify(this.answers));
-    this.answers = [...answers];
-  }
-
-  /**
-   * Return if the current answers are correct
-   */
-  checkAnswers() {
-    let gotRight = true;
-    // see that they got them all right
-    for (var i in this.displayedAnswers) {
-      if (
-        gotRight != false &&
-        this.displayedAnswers[i].correct &&
-        this.displayedAnswers[i].userGuess
-      ) {
-        gotRight = true;
-      } else if (
-        this.displayedAnswers[i].correct &&
-        !this.displayedAnswers[i].userGuess
-      ) {
-        gotRight = false;
-      } else if (
-        !this.displayedAnswers[i].correct &&
-        this.displayedAnswers[i].userGuess
-      ) {
-        gotRight = false;
-      }
-    }
-    return gotRight;
-  }
-  /**
-   * Verify the answers of the user based on their saying
-   * that they want to see how they did.
-   */
-  _verifyAnswers(e) {
-    globalThis.dispatchEvent(
-      new CustomEvent("simple-toast-hide", {
-        bubbles: true,
-        composed: true,
-        cancelable: false,
-        detail: false,
-      }),
-    );
-    let si = document.createElement("simple-icon-lite");
-    let extras = {};
-    let toastShowEventName = "simple-toast-show";
-    // support for haxcms toast
-    if (globalThis.HAXCMSToast) {
-      toastShowEventName = "haxcms-toast-show";
-      si.style.setProperty("--simple-icon-height", "40px");
-      si.style.setProperty("--simple-icon-width", "40px");
-      si.style.height = "150px";
-      si.style.marginLeft = "8px";
-    }
-    let gotRight = this.checkAnswers();
-    // see if they got this correct based on their answers
-    if (gotRight) {
-      this.__toastColor = "green";
-      this.__toastIcon = this.correctIcon;
-      this.__toastText = this.correctText;
-      // make it fun... and performant!
-      import("./lib/confetti-container.js").then((module) => {
-        setTimeout(() => {
-          this.shadowRoot.querySelector("#confetti").setAttribute("popped", "");
-        }, 0);
-      });
-      extras.hat = "party";
-    } else {
-      this.__toastColor = "red";
-      this.__toastIcon = this.incorrectIcon;
-      this.__toastText = this.incorrectText;
-      extras.fire = true;
-    }
-    si.icon = this.__toastIcon;
-    si.style.marginLeft = "16px";
-    si.accentColor = this.__toastColor;
-    si.dark = true;
-    // gets it all the way to the top immediately
-    globalThis.dispatchEvent(
-      new CustomEvent(toastShowEventName, {
-        bubbles: true,
-        composed: true,
-        cancelable: true,
-        detail: {
-          text: this.__toastText,
-          accentColor: this.__toastColor,
-          duration: 3000,
-          slot: si,
-          ...extras,
-        },
-      }),
-    );
-    // start of data passing, this is a prototype atm
-    let eventData = {
-      activityDisplay: "answered",
-      objectName: this.quizName,
-      resultSuccess: gotRight,
-    };
-    this.dispatchEvent(
-      new CustomEvent("user-engagement", {
-        bubbles: true,
-        composed: true,
-        cancelable: false,
-        detail: eventData,
-      }),
-    );
-  }
-
-  /**
-   * Figure out the order of the answers which will be displayed
-   */
-  _computeDisplayedAnswers(answers, randomize) {
-    // if we are editing via HAX, don't randomize the answers
-    // as we are actively editing the content and this is amazingly jarring
-    if (
-      typeof answers !== typeof undefined &&
-      answers != null &&
-      answers.length > 0 &&
-      randomize &&
-      !this._haxstate
-    ) {
-      let random = answers;
-      var currentIndex = random.length,
-        temporaryValue,
-        randomIndex;
-      // While there remain elements to shuffle...
-      while (0 !== currentIndex) {
-        // Pick a remaining element...
-        randomIndex = Math.floor(Math.random() * currentIndex);
-        currentIndex -= 1;
-        // And swap it with the current element.
-        temporaryValue = random[currentIndex];
-        random[currentIndex] = random[randomIndex];
-        random[randomIndex] = temporaryValue;
-      }
-      // @todo apply a random sort to the answers array
-      return random;
-    } else {
-      return answers;
-    }
-  }
   /**
    * haxProperties integration via file reference
    */
@@ -618,23 +157,11 @@ class MultipleChoice extends SchemaBehaviors(DDDSuper(LitElement)) {
    */
   haxHooks() {
     return {
-      editModeChanged: "haxeditModeChanged",
-      activeElementChanged: "haxactiveElementChanged",
-      preProcessNodeToContent: "haxpreProcessNodeToContent",
-      preProcessInsertContent: "haxpreProcessInsertContent",
+      ...super.haxHooks,
       inlineContextMenu: "haxinlineContextMenu",
     };
   }
 
-  haxactiveElementChanged(element, value) {
-    if (value) {
-      this._haxstate = value;
-    }
-  }
-
-  haxeditModeChanged(value) {
-    this._haxstate = value;
-  }
   /**
    * add buttons when it is in context
    */
@@ -668,81 +195,6 @@ class MultipleChoice extends SchemaBehaviors(DDDSuper(LitElement)) {
       return true;
     }
   }
-  /**
-   * HAX preprocess Node to Content hook
-   */
-  async haxpreProcessNodeToContent(node) {
-    // ensure we dont accidently have the answer displayed!
-    // this also rips the data into the lightDom for saving
-    // so that we can unset the array data on the object at save time
-    // this helps improve SEO / compatibility with CMS solutions
-    if (node.answers) {
-      // ensure this is null before generating new answers
-      // otherwise page to page saves we could lose statefulness
-      this.innerHTML = "";
-      for (var i in node.answers) {
-        if (node.answers[i]) {
-          let answer = document.createElement("input");
-          answer.setAttribute("type", "checkbox");
-          answer.value = node.answers[i].label;
-          if (node.answers[i].correct) {
-            answer.setAttribute("correct", "correct");
-          }
-          node.appendChild(answer);
-        }
-      }
-    }
-    return node;
-  }
-
-  /**
-   * HAX preprocess insert content hook
-   */
-  haxpreProcessInsertContent(detail, activeNode) {
-    // ensure we dont accidently have the answer displayed!
-    if (detail.properties.answers) {
-      detail.properties.answers = detail.properties.answers.map(function (val) {
-        if (val.userGuess) {
-          delete val.userGuess;
-        }
-        return val;
-      });
-    }
-    return detail;
-  }
-  firstUpdated(changedProperties) {
-    if (super.firstUpdated) {
-      super.firstUpdated(changedProperties);
-    }
-    this.setAttribute("typeof", "oer:Assessment");
-    // check lightdom on setup for answers to be read in
-    // this only happens on initial paint
-    console.log(this.children);
-    if (this.children.length > 0) {
-      let inputs = Array.from(this.querySelectorAll("input"));
-      let answers = [];
-      for (var i in inputs) {
-        let answer = {
-          label: inputs[i].value,
-          correct: inputs[i].getAttribute("correct") == null ? false : true,
-        };
-        answers.push(answer);
-      }
-      this.answers = answers;
-      // look for light dom slot markers
-      const correctLD = this.querySelector('[slot="correct-feedback"]');
-      const incorrectLD = this.querySelector('[slot="correct-feedback"]');
-      const questionLD = this.querySelector('[slot="correct-feedback"]');
-      if (this.querySelector('[slot="correct-feedback"]')) {
-        this.correctText = this.querySelector('[slot="correct-feedback"]')
-      }
-      question
-      // wipe lightdom after reading it in for data. This makes it harder for someone
-      // to just inspect the document and get at the underlying data
-
-      //this.innerHTML = "";
-    }
-  }
 }
 globalThis.customElements.define(MultipleChoice.tag, MultipleChoice);
 export { MultipleChoice };
diff --git a/elements/multiple-choice/src/multiple-choice.js b/elements/multiple-choice/src/multiple-choice.js
index 4c26201447..85fc8b00cb 100644
--- a/elements/multiple-choice/src/multiple-choice.js
+++ b/elements/multiple-choice/src/multiple-choice.js
@@ -6,212 +6,21 @@ import "@lrnwebcomponents/simple-icon/lib/simple-icons.js";
 import "@lrnwebcomponents/simple-fields/lib/simple-fields-field.js";
 import "@lrnwebcomponents/simple-toolbar/lib/simple-toolbar-button.js";
 import "@lrnwebcomponents/simple-toast/simple-toast.js";
+import { QuestionElement } from "./lib/QuestionElement.js";
 /**
  * `multiple-choice`
  * `Ask the user a question from a set of possible answers.`
  * @demo demo/index.html
  * @element multiple-choice
  */
-class MultipleChoice extends SchemaBehaviors(DDDSuper(LitElement)) {
-  /**
-   * LitElement constructable styles enhancement
-   */
-  static get styles() {
-    return [
-      super.styles,
-      css`
-        :host {
-          display: block;
-          min-width: 160px;
-          padding: var(--ddd-spacing-8);
-          border: var(--ddd-border-md);
-          background-color: var(--simple-colors-default-theme-accent-1);
-          border-radius: var(--ddd-radius-xs);
-          transition: all 0.3s ease-in-out;
-          color: var(--simple-colors-default-theme-grey-12);
-          --simple-toolbar-button-border-color: var(
-            --simple-colors-default-theme-grey-4
-          );
-          --simple-fields-field-color: var(
-            --simple-colors-default-theme-grey-12
-          );
-          --simple-fields-field-ink-color: var(
-            --simple-colors-default-theme-grey-12
-          );
-          --simple-fields-field-checked-color: var(
-            --simple-colors-default-theme-accent-8
-          );
-          --simple-fields-field-checked-ink-color: var(
-            --simple-colors-default-theme-accent-8
-          );
-          --simple-fields-field-checkmark-color: var(
-            --simple-colors-default-theme-grey-1
-          );
-          --simple-fields-field-label-color: var(
-            --simple-colors-default-theme-grey-12
-          );
-          --simple-fields-field-error-color: var(
-            --simple-colors-default-theme-red-8
-          );
-          --simple-fields-border-bottom-size: 0px;
-          --simple-fields-border-bottom-focus-size: 0px;
-        }
+class MultipleChoice extends QuestionElement {
 
-        :host(:focus),
-        :host(:focus-within),
-        :host(:hover) {
-          border-color: var(--simple-colors-default-theme-accent-12);
-        }
-
-        :host button {
-          background-color: var(--simple-colors-default-theme-grey-1);
-          color: var(--simple-colors-default-theme-grey-12);
-        }
-        :host simple-fields-field:hover,
-        :host simple-fields-field:focus,
-        :host simple-fields-field:focus-within,
-        :host simple-fields-field:active {
-          cursor: pointer;
-          background-color: var(--simple-colors-default-theme-accent-3);
-          color: var(--simple-colors-default-theme-accent-12);
-          box-shadow: var(--ddd-boxShadow-sm);
-          border-color: black;
-        }
-        ul {
-          list-style: none;
-          padding: 0;
-          margin: 0;
-        }
-        h3 {
-          padding: 0;
-          margin: 0 0 var(--ddd-spacing-8) 0;
-          font-family: var(--ddd-font-navigation);
-        }
-        ul li {
-          padding: 0;
-        }
-        simple-icon {
-          display: inline-flex;
-        }
-        #buttons {
-          display: flex;
-          align-items: center;
-          justify-content: flex-end;
-          margin: var(--ddd-spacing-4) 0 0 0;
-        }
-        #check {
-          margin-right: var(--ddd-spacing-4);
-        }
-        simple-fields-field {
-          padding: var(--ddd-spacing-4);
-          transition: all 0.3s ease-in-out;
-          margin: 0;
-          border: var(--ddd-border-md);
-          border-radius: var(--ddd-radius-xs);
-          color: var(--simple-colors-default-theme-accent-10);
-          background-color: var(--simple-colors-default-theme-accent-2);
-          --simple-fields-font-family: var(--ddd-font-navigation);
-          --simple-fields-font-size: var(--ddd-font-size-xs);
-          --simple-fields-line-height: var(--ddd-font-size-xs);
-          --simple-icon-height: var(--ddd-icon-xs);
-          --simple-icon-width: var(--ddd-icon-xs);
-        }
-        simple-toolbar-button {
-          font-size: var(--ddd-font-size-xs);
-          font-family: var(--ddd-font-navigation);
-          transition: all 0.3s ease-in-out;
-        }
-        :host simple-toolbar-button:hover::part(button),
-        :host simple-toolbar-button:focus::part(button),
-        :host simple-toolbar-button:focus-within::part(button),
-        :host simple-toolbar-button:active::part(button) {
-          cursor: pointer;
-          background-color: var(--simple-colors-default-theme-accent-3);
-          color: var(--simple-colors-default-theme-accent-12);
-          box-shadow: var(--ddd-boxShadow-sm);
-          border-color: black;
-        }
-        simple-toolbar-button::part(button) {
-          border: var(--ddd-border-md);
-          border-radius: var(--ddd-radius-xs);
-          padding: var(--ddd-spacing-2);
-          transition: all 0.3s ease-in-out;
-        }
-        simple-toolbar-button::part(label) {
-          font-size: var(--ddd-font-size-xs);
-          font-family: var(--ddd-font-navigation);
-          padding: 0;
-          margin: 0;
-        }
-        simple-fields-field::part(option-inner) {
-          position: absolute;
-          right: 0px;
-          font-family: var(--ddd-font-navigation);
-          font-size: var(--ddd-font-size-xs);
-          bottom: 50%;
-          top: 50%;
-          padding: 0px;
-          margin: 0px;
-        }
-        ul,
-        ol {
-          gap: var(--ddd-spacing-4);
-        }
-        simple-icon {
-          display: inline-flex;
-        }
-      `,
-    ];
-  }
   static get tag() {
     return "multiple-choice";
   }
   constructor() {
     super();
-    this.shadowRootOptions = {
-      ...LitElement.shadowRootOptions,
-      delegatesFocus: true,
-    };
-    this.randomize = false;
-    this.hideButtons = false;
-    this.disabled = false;
-    this.singleOption = false;
-    this.checkLabel = "Check answer";
-    this.resetLabel = "Reset";
-    this.question = "";
-    this.answers = [];
-    this.displayedAnswers = [];
-    this.correctText = "Great job!";
-    this.correctIcon = "icons:thumb-up";
-    this.incorrectText = "Better luck next time!";
-    this.incorrectIcon = "icons:thumb-down";
-    this.quizName = "default";
-  }
-  updated(changedProperties) {
-    if (super.updated) {
-      super.updated(changedProperties);
-    }
-    changedProperties.forEach((oldValue, propName) => {
-      let notifiedProps = ["answers", "displayedAnswers"];
-      if (notifiedProps.includes(propName)) {
-        // notify
-        let eventName = `${propName
-          .replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2")
-          .toLowerCase()}-changed`;
-        this.dispatchEvent(
-          new CustomEvent(eventName, {
-            detail: {
-              value: this[propName],
-            },
-          }),
-        );
-      }
-      if (propName == "answers" && this.answers && this.answers.length > 0) {
-        this.displayedAnswers = [
-          ...this._computeDisplayedAnswers(this.answers, this.randomize),
-        ];
-      }
-    });
+
   }
   render() {
     return html`
@@ -336,276 +145,6 @@ class MultipleChoice extends SchemaBehaviors(DDDSuper(LitElement)) {
     }
     this.requestUpdate();
   }
-  checkedEvent(e) {
-    // ensure there's a match w/ the event data
-    this.displayedAnswers[e.target.name].userGuess = e.detail.value;
-    this.requestUpdate();
-  }
-  static get properties() {
-    return {
-      ...super.properties,
-      /**
-       * Support disabling interaction with the entire board
-       */
-      disabled: {
-        type: Boolean,
-      },
-      /**
-       * Simple option, otherwise allow multiple via checkbox
-       */
-      singleOption: {
-        type: Boolean,
-        attribute: "single-option",
-      },
-      /**
-       * Text of the label to check your answer
-       */
-      checkLabel: {
-        type: String,
-        attribute: "check-label",
-      },
-      /**
-       * Text of the reset button
-       */
-      resetLabel: {
-        type: String,
-        attribute: "reset-label",
-      },
-      /**
-       * Related Resource ID
-       */
-      relatedResource: {
-        type: String,
-        attribute: "related-resource",
-      },
-      /**
-       * Question to ask
-       */
-      question: {
-        type: String,
-      },
-      /**
-       * Array of possible answers
-       */
-      answers: {
-        type: Array,
-      },
-      /**
-       * Displayed Answer set.
-       */
-      displayedAnswers: {
-        type: Array,
-      },
-      /**
-       * Correct answer text to display
-       */
-      correctText: {
-        type: String,
-        attribute: "correct-text",
-      },
-      /**
-       * Incorrect answer text to display
-       */
-      incorrectText: {
-        type: String,
-        attribute: "incorrect-text",
-      },
-      /**
-       * Correct answer text to display
-       */
-      correctIcon: {
-        type: String,
-        attribute: "correct-icon",
-      },
-      /**
-       * Incorrect answer text to display
-       */
-      incorrectIcon: {
-        type: String,
-        attribute: "incorrect-icon",
-      },
-      /**
-       * Name of the quiz - hardcoded for now from HTML
-       */
-      quizName: {
-        type: String,
-        attribute: "quiz-name",
-      },
-      /**
-       * Randomize the display of the answers
-       */
-      randomize: {
-        type: Boolean,
-        reflect: true,
-      },
-      /**
-       * flag to hide buttons
-       */
-      hideButtons: {
-        type: Boolean,
-        attribute: "hide-buttons",
-      },
-    };
-  }
-
-  /**
-   * Reset user answers and shuffle the board again.
-   */
-  resetAnswers(e) {
-    globalThis.dispatchEvent(
-      new CustomEvent("simple-toast-hide", {
-        bubbles: true,
-        composed: true,
-        cancelable: false,
-        detail: false,
-      }),
-    );
-    this.displayedAnswers = [];
-    this.answers.forEach((el) => {
-      el.userGuess = "";
-    });
-    const answers = JSON.parse(JSON.stringify(this.answers));
-    this.answers = [...answers];
-  }
-
-  /**
-   * Return if the current answers are correct
-   */
-  checkAnswers() {
-    let gotRight = true;
-    // see that they got them all right
-    for (var i in this.displayedAnswers) {
-      if (
-        gotRight != false &&
-        this.displayedAnswers[i].correct &&
-        this.displayedAnswers[i].userGuess
-      ) {
-        gotRight = true;
-      } else if (
-        this.displayedAnswers[i].correct &&
-        !this.displayedAnswers[i].userGuess
-      ) {
-        gotRight = false;
-      } else if (
-        !this.displayedAnswers[i].correct &&
-        this.displayedAnswers[i].userGuess
-      ) {
-        gotRight = false;
-      }
-    }
-    return gotRight;
-  }
-  /**
-   * Verify the answers of the user based on their saying
-   * that they want to see how they did.
-   */
-  _verifyAnswers(e) {
-    globalThis.dispatchEvent(
-      new CustomEvent("simple-toast-hide", {
-        bubbles: true,
-        composed: true,
-        cancelable: false,
-        detail: false,
-      }),
-    );
-    let si = document.createElement("simple-icon-lite");
-    let extras = {};
-    let toastShowEventName = "simple-toast-show";
-    // support for haxcms toast
-    if (globalThis.HAXCMSToast) {
-      toastShowEventName = "haxcms-toast-show";
-      si.style.setProperty("--simple-icon-height", "40px");
-      si.style.setProperty("--simple-icon-width", "40px");
-      si.style.height = "150px";
-      si.style.marginLeft = "8px";
-    }
-    let gotRight = this.checkAnswers();
-    // see if they got this correct based on their answers
-    if (gotRight) {
-      this.__toastColor = "green";
-      this.__toastIcon = this.correctIcon;
-      this.__toastText = this.correctText;
-      // make it fun... and performant!
-      import("./lib/confetti-container.js").then((module) => {
-        setTimeout(() => {
-          this.shadowRoot.querySelector("#confetti").setAttribute("popped", "");
-        }, 0);
-      });
-      extras.hat = "party";
-    } else {
-      this.__toastColor = "red";
-      this.__toastIcon = this.incorrectIcon;
-      this.__toastText = this.incorrectText;
-      extras.fire = true;
-    }
-    si.icon = this.__toastIcon;
-    si.style.marginLeft = "16px";
-    si.accentColor = this.__toastColor;
-    si.dark = true;
-    // gets it all the way to the top immediately
-    globalThis.dispatchEvent(
-      new CustomEvent(toastShowEventName, {
-        bubbles: true,
-        composed: true,
-        cancelable: true,
-        detail: {
-          text: this.__toastText,
-          accentColor: this.__toastColor,
-          duration: 3000,
-          slot: si,
-          ...extras,
-        },
-      }),
-    );
-    // start of data passing, this is a prototype atm
-    let eventData = {
-      activityDisplay: "answered",
-      objectName: this.quizName,
-      resultSuccess: gotRight,
-    };
-    this.dispatchEvent(
-      new CustomEvent("user-engagement", {
-        bubbles: true,
-        composed: true,
-        cancelable: false,
-        detail: eventData,
-      }),
-    );
-  }
-
-  /**
-   * Figure out the order of the answers which will be displayed
-   */
-  _computeDisplayedAnswers(answers, randomize) {
-    // if we are editing via HAX, don't randomize the answers
-    // as we are actively editing the content and this is amazingly jarring
-    if (
-      typeof answers !== typeof undefined &&
-      answers != null &&
-      answers.length > 0 &&
-      randomize &&
-      !this._haxstate
-    ) {
-      let random = answers;
-      var currentIndex = random.length,
-        temporaryValue,
-        randomIndex;
-      // While there remain elements to shuffle...
-      while (0 !== currentIndex) {
-        // Pick a remaining element...
-        randomIndex = Math.floor(Math.random() * currentIndex);
-        currentIndex -= 1;
-        // And swap it with the current element.
-        temporaryValue = random[currentIndex];
-        random[currentIndex] = random[randomIndex];
-        random[randomIndex] = temporaryValue;
-      }
-      // @todo apply a random sort to the answers array
-      return random;
-    } else {
-      return answers;
-    }
-  }
   /**
    * haxProperties integration via file reference
    */
@@ -618,23 +157,11 @@ class MultipleChoice extends SchemaBehaviors(DDDSuper(LitElement)) {
    */
   haxHooks() {
     return {
-      editModeChanged: "haxeditModeChanged",
-      activeElementChanged: "haxactiveElementChanged",
-      preProcessNodeToContent: "haxpreProcessNodeToContent",
-      preProcessInsertContent: "haxpreProcessInsertContent",
+      ...super.haxHooks,
       inlineContextMenu: "haxinlineContextMenu",
     };
   }
 
-  haxactiveElementChanged(element, value) {
-    if (value) {
-      this._haxstate = value;
-    }
-  }
-
-  haxeditModeChanged(value) {
-    this._haxstate = value;
-  }
   /**
    * add buttons when it is in context
    */
@@ -668,81 +195,6 @@ class MultipleChoice extends SchemaBehaviors(DDDSuper(LitElement)) {
       return true;
     }
   }
-  /**
-   * HAX preprocess Node to Content hook
-   */
-  async haxpreProcessNodeToContent(node) {
-    // ensure we dont accidently have the answer displayed!
-    // this also rips the data into the lightDom for saving
-    // so that we can unset the array data on the object at save time
-    // this helps improve SEO / compatibility with CMS solutions
-    if (node.answers) {
-      // ensure this is null before generating new answers
-      // otherwise page to page saves we could lose statefulness
-      this.innerHTML = "";
-      for (var i in node.answers) {
-        if (node.answers[i]) {
-          let answer = document.createElement("input");
-          answer.setAttribute("type", "checkbox");
-          answer.value = node.answers[i].label;
-          if (node.answers[i].correct) {
-            answer.setAttribute("correct", "correct");
-          }
-          node.appendChild(answer);
-        }
-      }
-    }
-    return node;
-  }
-
-  /**
-   * HAX preprocess insert content hook
-   */
-  haxpreProcessInsertContent(detail, activeNode) {
-    // ensure we dont accidently have the answer displayed!
-    if (detail.properties.answers) {
-      detail.properties.answers = detail.properties.answers.map(function (val) {
-        if (val.userGuess) {
-          delete val.userGuess;
-        }
-        return val;
-      });
-    }
-    return detail;
-  }
-  firstUpdated(changedProperties) {
-    if (super.firstUpdated) {
-      super.firstUpdated(changedProperties);
-    }
-    this.setAttribute("typeof", "oer:Assessment");
-    // check lightdom on setup for answers to be read in
-    // this only happens on initial paint
-    console.log(this.children);
-    if (this.children.length > 0) {
-      let inputs = Array.from(this.querySelectorAll("input"));
-      let answers = [];
-      for (var i in inputs) {
-        let answer = {
-          label: inputs[i].value,
-          correct: inputs[i].getAttribute("correct") == null ? false : true,
-        };
-        answers.push(answer);
-      }
-      this.answers = answers;
-      // look for light dom slot markers
-      const correctLD = this.querySelector('[slot="correct-feedback"]');
-      const incorrectLD = this.querySelector('[slot="correct-feedback"]');
-      const questionLD = this.querySelector('[slot="correct-feedback"]');
-      if (this.querySelector('[slot="correct-feedback"]')) {
-        this.correctText = this.querySelector('[slot="correct-feedback"]')
-      }
-      question
-      // wipe lightdom after reading it in for data. This makes it harder for someone
-      // to just inspect the document and get at the underlying data
-
-      //this.innerHTML = "";
-    }
-  }
 }
 globalThis.customElements.define(MultipleChoice.tag, MultipleChoice);
 export { MultipleChoice };
diff --git a/elements/video-player/demo/lecture-player.html b/elements/video-player/demo/lecture-player.html
index 0432223323..5d70a05d89 100644
--- a/elements/video-player/demo/lecture-player.html
+++ b/elements/video-player/demo/lecture-player.html
@@ -66,8 +66,10 @@ <h2 data-lecture-slide data-primary="11" data-accent="1" data-value=12 target="v
   });
 
   scrollBtn.addEventListener('click', () => {
-    const video = document.querySelector(window.location.hash.split('--')[0]);
-    video.scrollIntoView();
+    if (window.location.hash && window.location.hash.split('--')) {
+      const video = document.querySelector(window.location.hash.split('--')[0]);
+    video.scrollIntoView();      
+    }
   });
 
   seekBtn.addEventListener('click', async () => {
diff --git a/elements/video-player/lib/lecture-player.js b/elements/video-player/lib/lecture-player.js
index d46722e853..08144b79c1 100644
--- a/elements/video-player/lib/lecture-player.js
+++ b/elements/video-player/lib/lecture-player.js
@@ -42,6 +42,51 @@ class LecturePlayer extends DDDSuper(LitElement) {
     this.videoPlayer = this.querySelector("video-player").outerHTML;
     this.videoInterval = null;
     this.activeIndex = null;
+    console.log(globalThis.location.hash);
+    if(globalThis.location.hash){
+      var id  = globalThis.location.hash.split('--')[0];
+      var timestamp = globalThis.location.hash.split('--')[1] || this.associatedNodes['slide-1'];
+      console.log(id, timestamp);
+      setTimeout(() => {
+        this.showModal();
+        console.log('show modal');
+        let activeSlide = null;
+        let associatedNodesValues = Object.values(this.associatedNodes);
+        console.log(associatedNodesValues.length);
+        for (let i = 0; i < associatedNodesValues.length; i++) {
+          let currentTimestamp = associatedNodesValues[i];
+          console.log(currentTimestamp);
+          let nextTimestamp = i <= (associatedNodesValues.length - 1) ? associatedNodesValues[i + 1] : Infinity;
+
+          if (timestamp >= currentTimestamp && timestamp < nextTimestamp) {
+            console.log('found current slide' + currentTimestamp + ' ' + nextTimestamp + ' ' + timestamp);
+            activeSlide = Object.keys(this.associatedNodes)[i];
+            console.log(activeSlide);
+            setTimeout(() => {
+              this.activeIndex = activeSlide;
+            }, 3000);
+            break;
+          }
+          if (i == associatedNodesValues.length - 1 && this.activeIndex === null) {
+            console.log('last slide');
+            this.activeIndex = Object.keys(this.associatedNodes)[0];
+            break;
+          }
+          //@TODO: Find the current slide based on timestamp & set it
+        }
+      }, 2000);
+      
+    }
+    globalThis.addEventListener("hashChange", () => {
+      var [id, timestamp] = globalThis.location.hash.split('--');
+      if(id=== '#lecture-player-video' && !timestamp){
+        console.log('no timestamp');
+        this.showModal();
+        setTimeout(() => {
+          this.activeIndex = 'slide-1';
+        }, 1000);
+      }
+    });
   }
 
   static get properties() {
@@ -240,34 +285,22 @@ class LecturePlayer extends DDDSuper(LitElement) {
         }, 3000);
     } else {
       console.log('seeking to video player');
-      this.querySelector("video-player")
-        .shadowRoot.querySelector("a11y-media-player")
-        .play();
-      this.querySelector("video-player")
-        .shadowRoot.querySelector("a11y-media-player")
-        .seek(timestamp);
+      this.querySelector("video-player").play();
+      this.querySelector("video-player").seek(timestamp);
     }
   }
 
   play() {
-    console.log(
       document
         .querySelector("video-player")
-        .shadowRoot.querySelector("a11y-media-player"),
-    );
     if (
       document
         .querySelector("video-player")
-        .shadowRoot.querySelector("a11y-media-player")
     ) {
       document
-        .querySelector("video-player")
-        .shadowRoot.querySelector("a11y-media-player")
-        .play();
+        .querySelector("video-player").play();
     } else {
-      this.querySelector("video-player")
-        .shadowRoot.querySelector("a11y-media-player")
-        .play();
+      this.querySelector("video-player").play();
     }
   }
 
@@ -288,9 +321,7 @@ class LecturePlayer extends DDDSuper(LitElement) {
   endVideo() {
     console.log("endVideo");
     document
-      .querySelector("#lecture-player-video")
-      .shadowRoot.querySelector("a11y-media-player")
-      .pause();
+      .querySelector("#lecture-player-video")      .pause();
     document.querySelector("#nextSlideBtn").setAttribute("disabled", "true");
     let endBtnDiv = document.createElement("div");
     endBtnDiv.setAttribute("data-primary", "11");
@@ -540,58 +571,7 @@ class LecturePlayer extends DDDSuper(LitElement) {
 
   render() {
     return html`
-    ${ 
-      globalThis.addEventListener("DOMContentLoaded", () => {
-        console.log(globalThis.location.hash);
-        if(globalThis.location.hash){
-          var id  = globalThis.location.hash.split('--')[0];
-          var timestamp = globalThis.location.hash.split('--')[1] || this.associatedNodes['slide-1'];
-          console.log(id, timestamp);
-          if(id === '#lecture-player-video'){
-            console.log('lecture player link')
-            setTimeout(() => {
-              this.showModal();
-              console.log('show modal');
-              let activeSlide = null;
-              let associatedNodesValues = Object.values(this.associatedNodes);
-              console.log(associatedNodesValues.length);
-              for (let i = 0; i < associatedNodesValues.length; i++) {
-                let currentTimestamp = associatedNodesValues[i];
-                console.log(currentTimestamp);
-                let nextTimestamp = i <= (associatedNodesValues.length - 1) ? associatedNodesValues[i + 1] : Infinity;
-
-                if (timestamp >= currentTimestamp && timestamp < nextTimestamp) {
-                  console.log('found current slide' + currentTimestamp + ' ' + nextTimestamp + ' ' + timestamp);
-                  activeSlide = Object.keys(this.associatedNodes)[i];
-                  console.log(activeSlide);
-                  setTimeout(() => {
-                    this.activeIndex = activeSlide;
-                  }, 3000);
-                  break;
-                }
-                if (i == associatedNodesValues.length - 1 && this.activeIndex === null) {
-                  console.log('last slide');
-                  this.activeIndex = Object.keys(this.associatedNodes)[0];
-                  break;
-                }
-                //@TODO: Find the current slide based on timestamp & set it
-              }
-            }, 2000);
-          };
-          
-        }
-      })}
-      ${globalThis.addEventListener("hashChange", () => {
-        var [id, timestamp] = globalThis.location.hash.split('--');
-        if(id=== '#lecture-player-video' && !timestamp){
-          console.log('no timestamp');
-          this.showModal();
-          setTimeout(() => {
-            this.activeIndex = 'slide-1';
-          }, 1000);
-        }
-      })}
-    <simple-cta id="lectureActivation" >Open Lecture Player</simple-cta>
+    <simple-cta id="lectureActivation">Open Lecture Player</simple-cta>
     ${!this.open ? html`<slot></slot>` : html``}
     `;
   }
diff --git a/elements/wysiwyg-hax/demo/sample-store.json b/elements/wysiwyg-hax/demo/sample-store.json
index ba2669626d..13922c2767 100644
--- a/elements/wysiwyg-hax/demo/sample-store.json
+++ b/elements/wysiwyg-hax/demo/sample-store.json
@@ -618,6 +618,7 @@
     "meme-maker": "@lrnwebcomponents/meme-maker/meme-maker.js",
     "grid-plate": "@lrnwebcomponents/grid-plate/grid-plate.js",
     "multiple-choice": "@lrnwebcomponents/multiple-choice/multiple-choice.js",
+    "true-false-question": "@lrnwebcomponents/multiple-choice/lib/true-false-question.js",
     "person-testimonial": "@lrnwebcomponents/person-testimonial/person-testimonial.js",
     "place-holder": "@lrnwebcomponents/place-holder/place-holder.js",
     "q-r": "@lrnwebcomponents/q-r/q-r.js",