@pie-element/explicit-constructed-response 3.11.3 → 3.11.5

package/module/index.html

@@ -0,0 +1,21 @@
+
+  <!doctype html>
+  <html>
+    <head>
+      <title>@pie-element/explicit-constructed-response@3.11.3</title>
+      <script
+        type="module"
+        src="https://cdn.jsdelivr.net/npm/@pslb/demo-el@^1.0.0/dist/demo-el/demo-el.esm.js"></script>
+     
+      <link
+        href="https://fonts.googleapis.com/css?family=Roboto&display=swap"
+        rel="stylesheet"
+      />
+      <style>
+        html, body {
+          font-family: 'Roboto', sans-serif;
+        }
+      </style>
+      <script type="module" src="./demo.js"></script> 
+    </head>
+  </html>

package/module/manifest.json

@@ -0,0 +1,14 @@
+{
+  "name": "@pie-element/explicit-constructed-response",
+  "version": "3.11.3",
+  "modules": [
+    {
+      "name": "@pie-lib/shared-module",
+      "version": "^1.2.13"
+    },
+    {
+      "name": "@pie-lib/drag-module",
+      "version": "^1.0.14"
+    }
+  ]
+}

package/module/print-demo.js

@@ -0,0 +1,83 @@
+import PrintElement from './print.js';
+
+var generate = {};
+
+const choice = (l, v) => ({ label: l, value: v });
+
+const markup = '<p>The {{0}} <br> jumped {{1}} <br> the {{2}}</p>';
+
+generate.model = (id, element) => ({
+  id,
+  element,
+  markup,
+  disabled: false,
+  choices: {
+    0: [choice('cow', '0'), choice('cattle', '1'), choice('calf', '2')],
+    1: [choice('over', '0'), choice('past', '1'), choice('beyond', '2')],
+    2: [choice('moon', '0')]
+  },
+  maxLengthPerChoice: [10, 11, 7],
+  prompt: 'Complete the sentence',
+  note: 'The answer shown above is the most common correct answer for this item. One or more additional correct answers are also defined, and will also be recognized as correct.',
+  promptEnabled: true,
+  toolbarEditorPosition: 'bottom'
+});
+
+const { model } = generate;
+
+var config = {
+  elements: {
+    'explicit-constructed-response': '../..'
+  },
+  models: [model('1', 'explicit-constructed-response')]
+};
+
+// new init - just shows off print!
+
+const init = async () => {
+  console.log('define the element...');
+  await Promise.all(
+    config.models.map(async (m) => {
+      try {
+        const printTag = `${m.element}-print`;
+        if (customElements.get(printTag)) {
+          return true;
+        } else {
+          customElements.define(printTag, PrintElement);
+          await customElements.whenDefined(printTag);
+          return true;
+        }
+      } catch (e) {
+        return false;
+      }
+    })
+  );
+
+  console.log('now apply the model...');
+  config.models.forEach((m) => {
+    const printTag = `${m.element}-print`;
+    const h3s = document.createElement('h3');
+    h3s.textContent = 'student mode';
+    document.body.appendChild(h3s);
+    const de = document.createElement(printTag);
+    document.body.appendChild(de);
+    de.options = {};
+    de.model = m;
+
+    const h3 = document.createElement('h3');
+    h3.textContent = 'instructor mode';
+    document.body.appendChild(h3);
+    const instr = document.createElement(printTag);
+    document.body.appendChild(instr);
+    instr.options = { mode: 'instructor' };
+    instr.model = JSON.parse(JSON.stringify(m));
+  });
+};
+
+init()
+  .then(() => {
+    console.log('ready');
+  })
+  .catch((e) => {
+    console.error(e);
+  });

package/module/print.html

@@ -0,0 +1,18 @@
+
+  <!doctype html>
+  <html>
+    <head>
+      <title>@pie-element/explicit-constructed-response@3.11.3</title>
+      <link
+        href="https://fonts.googleapis.com/css?family=Roboto&display=swap"
+        rel="stylesheet"
+      />
+      <style>
+        html, body {
+          font-family: 'Roboto', sans-serif;
+        }
+      </style>
+      <script type="module" src="./print-demo.js"></script> 
+    </head>
+    <body></body>
+  </html>