@pie-element/multiple-choice 9.19.0-beta.0 → 9.19.0

package/module/demo.js

@@ -0,0 +1,86 @@
+import Configure from './configure.js';
+import Element from './element.js';
+import * as controller from './controller.js';
+
+var generate = {};
+
+generate.model = (id, element) => ({
+  id,
+  element,
+  choiceMode: 'checkbox',
+  choicePrefix: 'numbers',
+  choices: [
+    {
+      correct: true,
+      value: 'sweden',
+      label: 'Sweden',
+      feedback: {
+        type: 'none',
+        value: '',
+      },
+    },
+    {
+      value: 'iceland',
+      label: 'Iceland',
+      feedback: {
+        type: 'none',
+        value: '',
+      },
+      rationale: 'Rationale for Iceland',
+    },
+    {
+      value: 'norway',
+      label: 'Norway',
+      feedback: {
+        type: 'none',
+        value: '',
+      },
+      rationale: 'Rationale for Norway',
+    },
+    {
+      correct: true,
+      value: 'finland',
+      label: 'Finland',
+      feedback: {
+        type: 'none',
+        value: '',
+      },
+      rationale: 'Rationale for Finland',
+    },
+  ],
+  extraCSSRules: {
+    names: ['red', 'blue'],
+    rules: `
+      .red {
+        color: red !important;
+      }
+
+      .blue {
+        color: blue !important;
+      }
+    `,
+  },
+  prompt: '',
+  promptEnabled: true,
+  toolbarEditorPosition: 'bottom',
+  rubricEnabled: false,
+});
+
+const { model } = generate;
+
+var config = {
+  elements: {
+    'multiple-choice': '../..',
+  },
+  models: [model('1', 'multiple-choice')],
+};
+
+//Note: demo-el is a custom element loaded in the markup.
+  customElements.whenDefined("demo-el").then(() => {
+    config.models.forEach((m) => {
+      const de = document.createElement("demo-el");
+      document.body.appendChild(de);
+      de.def = { tagName: m.element, Element, Configure, controller };
+      de.model = m;
+    });
+  });