@citolab/tspci 2.3.4 → 2.4.0-alpha.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@citolab/tspci",
-  "version": "2.3.4",
+  "version": "2.4.0-alpha.0",
   "description": "an opiniated typescript ims-pci builder with tao integration",
   "author": "patrick <patrick.deklein@cito.nl>",
   "repository": "@citolab/tspci",
@@ -46,5 +46,5 @@
     "help": "tspci --help",
     "init": "tspci init --force --path=../../pcis"
   },
-  "gitHead": "93129e8ab54641a8852aa45fc26345e0eaa22c7e"
+  "gitHead": "881b3b40f3e31eafdc38ff79b51a16384e67f89d"
 }

package/preset/preact/src/index.tsx

@@ -7,7 +7,7 @@ import Interaction from "./interaction";
 import style from "./styles.css";
 import { Configuration, IMSpci, QtiVariableJSON } from "@citolab/tspci";
 import configProps from "./config.json";
-import { actions, StateModel } from "./store";
+import { IStore } from "@citolab/preact-store";
 
 type PropTypes = typeof configProps;
 
@@ -16,7 +16,7 @@ class App implements IMSpci<PropTypes> {
   config: Configuration<PropTypes>; // reference to the interface of the config object which you get when getInstance is called by the player
   state: string; // keep a reference to the state
   shadowdom: ShadowRoot; // Not mandatory, but its wise to create a shadowroot
-  store: Store<StateModel>;
+  store: IStore<StateModel>;
 
   private logActions: { type: string; payload: unknown }[] = []; // optional logActions
 
@@ -30,8 +30,10 @@ class App implements IMSpci<PropTypes> {
 
     const initState: StateModel = stateString ? JSON.parse(stateString).state : { input: 0 };
     this.logActions = stateString ? JSON.parse(stateString).log : [];
-    this.store = initStore<StateModel>(actions as any[], initState, (action) => this.logActions.push(action));
-
+    this.store = initStore(this.initialState );
+    if (restoredState || logActions) {
+      this.store.restoreState(restoredState, logActions);
+    }
     this.shadowdom = dom.attachShadow({ mode: "closed" });
     this.render();
 

package/preset/preact/src/interaction.tsx

@@ -1,16 +1,13 @@
-import { useStore } from "@citolab/preact-store";
+import { useStore, IStore, Action } from "@citolab/preact-store";
 import { ActionType, StateModel } from "./store";
 import configProps from "./config.json";
 import procenten from "./assets/procenten.png"; // image types are bundled inside the js
 
 type PropTypes = typeof configProps;
 
-const Interaction = ({ config, dom }: { config: PropTypes; dom: Document | ShadowRoot }) => {
-  const [state, dispatch] = useStore<StateModel, ActionType>(
-    (type, payload) => {
-      console.log(`type: ${type}, payload: ${JSON.stringify(payload)}`);
-    }
-  );
+const Interaction = ({ config, dom }: { config: PropTypes; dom: Document | ShadowRoot, store: IStore<StateModel> }) => {
+  const state = useStore(store);
+
   return <div className="pci-container">
     <h1>{config.title}</h1>
     <div className="body">
@@ -21,12 +18,12 @@ const Interaction = ({ config, dom }: { config: PropTypes; dom: Document | Shado
       <input type="number"
         onKeyUp={(e) => {
           const input = e.target as HTMLInputElement;
-          dispatch<{ input: number }>("SET_INPUT", { input: +input.value });
+          store.dispatch<{ input: number }>({ type: "SET_INPUT", payload: { input: +input.value } });
+        }
         }
-      }
-      onChange={(e) => {
+        onChange={(e) => {
           const input = e.target as HTMLInputElement;
-          dispatch<{ input: number }>("SET_INPUT", { input: +input.value });
+          store.dispatch<{ input: number }>({ type: "SET_INPUT", payload: { input: +input.value } });
         }} min="0" max="100" />%
     </div>
   </div>;

package/preset/preact/src/store.ts

@@ -1,12 +1,15 @@
-export type ActionType = "SET_INPUT";
+import { Store } from "@citolab/preact-store";
 
+export type ActionType = "SET_INPUT" | "RESTORE_STATE";
 export type StateModel = { input: number };
 
-export const actions = [
-  {
-    type: "SET_INPUT" as ActionType,
-    action: (state: StateModel, { input }: { input: number }) => {
-      return {...state, input };
-    },
-  },
-];
+export const initStore = (initialState: StateModel, restoreData?: {
+  state: StateModel;
+  actions: { type: string; payload: any; timestamp?: number }[];
+}) => {
+  const store = new Store<StateModel>(initialState, restoreData);
+  store.addReducer<{ input: number }>("SET_INPUT", (state, { input }) => {
+    return {...state, input };
+  });
+  return store;
+}

package/public/index.html

@@ -1,152 +1,203 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <title>Hello RequireJS</title>
-    <script
-      src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"
-      integrity="sha512-c3Nl8+7g4LMSTdrm621y7kf9v3SDPnhxLNhcjFJbKECVnmZHTdo+IRO05sNLTH/D3vA6u1X32ehoLC7WFVdheg=="
-      crossorigin="anonymous"
-      referrerpolicy="no-referrer"
-    ></script>
-    <!-- <link rel="stylesheet" class="bootswatcher" href="//bootswatch.com/5/lumen/bootstrap.min.css" /> -->
-
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" />
-
-    <style>
-      html {
-        font-size: 100%;
-      }
-      #pciContainer {
-        width: 100%;
-        /* min-width: 800px; */
-
-        max-width: 1024px;
-        height: 600px;
-        min-height: 600px;
-        /* max-height: 600px; */
-        border: 1px solid #eeeeee;
-        overflow: hidden;
-        margin: 0 auto;
-        background-color: white;
-        border-radius: 10px;
-        margin-top: 1rem;
-      }
-      #devtools {
-        max-width: 1024px;
-        margin: 0 auto;
-      }
-    </style>
-  </head>
-  <body class="bg-light">
-    <div class="container">
-      <div
-        class="alert alert-danger position-fixed mx-auto bottom-0"
-        style="display: none"
-        role="alert"
-        id="noresponse"
-      >
-        user has not yet interacted yet, getResponse should return undefined.
-      </div>
-
-      <div id="pciContainer" class="shadow-sm">
-        <div id="loading" class="text-muted mx-auto p-4">Loading...</div>
-      </div>
-      <div id="devtools"></div>
+
+<head>
+  <title>Hello RequireJS</title>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"
+    integrity="sha512-c3Nl8+7g4LMSTdrm621y7kf9v3SDPnhxLNhcjFJbKECVnmZHTdo+IRO05sNLTH/D3vA6u1X32ehoLC7WFVdheg=="
+    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+  <!-- <link rel="stylesheet" class="bootswatcher" href="//bootswatch.com/5/lumen/bootstrap.min.css" /> -->
+
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" />
+
+  <style>
+    html {
+      font-size: 100%;
+    }
+
+    #pciContainer {
+      width: 100%;
+      /* min-width: 800px; */
+
+      max-width: 1024px;
+      height: 600px;
+      min-height: 600px;
+      /* max-height: 600px; */
+      border: 1px solid #eeeeee;
+      overflow: hidden;
+      margin: 0 auto;
+      background-color: white;
+      border-radius: 10px;
+      margin-top: 1rem;
+    }
+
+    #devtools {
+      max-width: 1024px;
+      margin: 0 auto;
+    }
+  </style>
+</head>
+
+<body class="bg-light">
+  <div class="container">
+    <div class="alert alert-danger position-fixed mx-auto left-2 top-2" style="display: none" role="alert"
+      id="noresponse">
+      user has not yet interacted yet<br />getResponse should return undefined.
     </div>
 
-    <script type="module">
-      import { h, Component, render } from "https://unpkg.com/preact@latest?module";
-      import { useState, useEffect } from "https://unpkg.com/preact@latest/hooks/dist/hooks.module.js?module";
-      import htm from "https://unpkg.com/htm?module";
-      // Initialize htm with Preact
-      const html = htm.bind(h);
-
-      function App({ item }) {
-        const [show, setShow] = useState(false);
-
-        let keyArray = [];
-        if (item.config && item.config.properties) {
-          keyArray = Object.keys(item.config.properties).map((keyName, keyIndex) => ({
-            key: keyName,
-            value: item.config.properties[keyName],
-          }));
-        }
+    <div id="pciContainer" class="shadow-sm">
+      <div id="loading" class="text-muted mx-auto p-4">Loading...</div>
+    </div>
+    <div id="devtools"></div>
+  </div>
 
-        function resetlocalstorage() {
-          localStorage.removeItem(item.typeIdentifier + "_state");
-          localStorage.removeItem(item.typeIdentifier + "_props");
-          localStorage.removeItem(item.typeIdentifier + "_response");
-        }
+  <script type="module">
+    import { h, Component, render } from "https://unpkg.com/preact@latest?module";
+    import { useState, useEffect, useRef } from "https://unpkg.com/preact@latest/hooks/dist/hooks.module.js?module";
+    import htm from "https://unpkg.com/htm?module";
+    // Initialize htm with Preact
+    const html = htm.bind(h);
 
-        function reset() {
-          resetlocalstorage();
-          location.reload();
-        }
+    /**
+     * Minified useInterval hook. A custom hook that calls the given `callback` function at the given `delay` interval.
+     * useInterval(() => {
+     *   console.log('interval')
+     * }, 1000);
+     * The callback is not called immediately on mount but only after the first delay.
+     */
+    function useInterval(c, d) { const s = useRef(); useEffect(() => { s.current = c }, [c]), useEffect(() => { if (d !== null) { const i = setInterval(() => { s.current() }, d); return () => clearInterval(i) } }, [d]) }
 
-        function resetResponse() {
-          localStorage.removeItem(item.typeIdentifier + "_response");
-          item.resetResponse();
-        }
+    function App({ item }) {
+      const [show, setShow] = useState(false);
 
-        function setResponse() {
-          const response = localStorage.getItem(item.typeIdentifier + "_response");
-          if (response) {
-            item.setResponse({
-              base: {
-                string: response,
-              },
-            });
-          } else {
-            alert("no response stored");
-          }
-        }
+      const [range, setRange] = useState(0);
+      const [currentRangeValue, setCurrentRangeValue] = useState(0);
+      const [maxRange, setMaxRange] = useState(0);
+      const [actions, setActions] = useState([]);
+
+      const isReplaying = useRef(false);
+      const replayedIndex = useRef(0);
+      const store = item.store;
 
-        function saveResponse() {
-          localStorage.setItem(item.typeIdentifier + "_response", item.getResponse().base.string);
+      useEffect(() => {
+        if (store) {
+          store.subscribeActions(action => {
+            if (!isReplaying.current) {
+              const allActions = store.actions;
+              setRange(allActions.length);
+              setMaxRange(allActions.length);
+              setActions(allActions);
+              setCurrentRangeValue(allActions.findIndex(a => a === action) + 1);
+            } else {
+              replayedIndex.current++;
+              setCurrentRangeValue(replayedIndex.current);
+            }
+          });
         }
+      }, [store]);
 
-        function compareResponse() {
-          const response = localStorage.getItem(item.typeIdentifier + "_response");
-          if (!response) {
-            alert("no response stored");
-            return;
-          }
-          if (response === item.getResponse().base.string) {
-            alert("same");
-          } else {
-            alert("different");
+      async function scrubRange(value) {
+        if (!isReplaying.current) {
+          setCurrentRangeValue(value);
+          resetResponse();
+          if (store) {
+            isReplaying.current = true;
+            replayedIndex.current = 0;
+            setCurrentRangeValue(value);
+            await store.replay([...actions], { until: value, animate: false });
+            isReplaying.current = false;
           }
         }
+      }
 
-        function reload() {
-          const state = item.getState();
-          localStorage.setItem(item.typeIdentifier + "_state", JSON.stringify(state));
-          location.reload();
-        }
+      let keyArray = [];
+      if (item.config && item.config.properties) {
+        keyArray = Object.keys(item.config.properties).map((keyName, keyIndex) => ({
+          key: keyName,
+          value: item.config.properties[keyName],
+        }));
+      }
 
-        function playState() {
-          const state = item.getState();
-          item.store.replay(state.log); // state.log
-        }
+      function resetlocalstorage() {
+        localStorage.removeItem(item.typeIdentifier + "_state");
+        localStorage.removeItem(item.typeIdentifier + "_props");
+        localStorage.removeItem(item.typeIdentifier + "_response");
+      }
+
+      function reset() {
+        resetlocalstorage();
+        location.reload();
+      }
 
-        function changeConfig(key, value) {
-          item.config.properties[key] = value;
-          item.trigger(`change${key}`, value);
+      function resetResponse() {
+        localStorage.removeItem(item.typeIdentifier + "_response");
+        item.resetResponse();
+      }
+
+      function setResponse() {
+        const response = localStorage.getItem(item.typeIdentifier + "_response");
+        if (response) {
+          item.setResponse({
+            base: {
+              string: response,
+            },
+          });
+        } else {
+          alert("no response stored");
         }
+      }
+
+      function saveResponse() {
+        localStorage.setItem(item.typeIdentifier + "_response", item.getResponse().base.string);
+      }
 
-        function reConfig(key, value) {
-          localStorage.setItem(item.typeIdentifier + "_props", JSON.stringify(item.config.properties));
-          location.reload();
+      function compareResponse() {
+        const response = localStorage.getItem(item.typeIdentifier + "_response");
+        if (!response) {
+          alert("no response stored");
+          return;
+        }
+        if (response === item.getResponse().base.string) {
+          alert("same");
+        } else {
+          alert("different");
         }
+      }
+
+      function reload() {
+        const state = item.getState();
+        localStorage.setItem(item.typeIdentifier + "_state", JSON.stringify(state));
+        location.reload();
+      }
 
-        function unload() {
-          item.destroy && item.destroy();
-          item.oncompleted && item.oncompleted();
-          var name = require.undef("index.js");
-          loadItem();
+      async function playState() {
+        if (store && !isReplaying.current) {
+          resetResponse();
+          isReplaying.current = true;
+          replayedIndex.current = 0;
+          await store.replay([...actions]);
+          isReplaying.current = false;
         }
+      }
+
+      function changeConfig(key, value) {
+        item.config.properties[key] = value;
+        item.trigger(`change${key}`, value);
+      }
 
-        return html`
+      function reConfig(key, value) {
+        localStorage.setItem(item.typeIdentifier + "_props", JSON.stringify(item.config.properties));
+        location.reload();
+      }
+
+      function unload() {
+        item.destroy && item.destroy();
+        item.oncompleted && item.oncompleted();
+        var name = require.undef("index.js");
+        loadItem();
+      }
+
+      return html`
           <div>
             <div style="width:300px" class="shadow offcanvas offcanvas-end ${show ? "show visible" : ""}">
               <div class="offcanvas-header">
@@ -161,7 +212,7 @@
               <div class="offcanvas-body">
                 <ul class="card-body">
                   ${keyArray.map(
-                    ({ key, value }) => html`<div>
+        ({ key, value }) => html`<div>
                       <div>${key}</div>
                       <input
                         type="text"
@@ -170,27 +221,21 @@
                         onkeyup="${(e) => changeConfig(key, e.target.value)}"
                       />
                     </div>`
-                  )}
+      )}
                 </ul>
                 <button class="btn btn-primary" onClick="${() => reConfig()}">save and reload</button>
               </div>
             </div>
 
-            <div class="d-flex justify-content-start mt-3" role="toolbar" aria-label="Toolbar with button groups">
-              <div>
+            <div class="d-flex justify-content-between mt-3" role="toolbar" aria-label="Toolbar with button groups">
+              <div class="d-flex flex-column">
                 <small class="text-muted">configuration</small>
                 <div class="btn-group me-2 shadow-sm" role="group" aria-label="Basic checkbox toggle button group">
-                  <button class="btn btn-outline-secondary" onClick="${() => setShow(true)}">props</button>
-                  <button
-                    class="btn btn-outline-secondary"
-                    onClick="${() => alert(JSON.stringify(item.config), null, 4)}"
-                  >
-                    config
-                  </button>
+                  <button class="btn btn-outline-secondary" onClick="${() => setShow(true)}">config</button>
                 </div>
               </div>
 
-              <div>
+              <div class="d-flex flex-column">
                 <small class="text-muted">data</small>
                 <div class="btn-group me-2 shadow-sm" role="group" aria-label="Basic checkbox toggle button group">
                   <button
@@ -203,29 +248,30 @@
                 </div>
               </div>
 
-              <div>
+              <div class="d-flex flex-column">
                 <small class="text-muted">state</small>
                 <div class="btn-group me-2 shadow-sm" role="group" aria-label="Basic checkbox toggle button group">
                   <button class="btn btn-outline-secondary" onClick="${() => reload()}">reload</button>
                 </div>
               </div>
-              <div>
-                <small class="text-muted">responses</small>
+
+              <div class="d-flex flex-column">
+                <small class="text-muted">scoring TAO (match correct string)</small>
                 <div class="btn-group me-2 shadow-sm" role="group" aria-label="Basic checkbox toggle button group">
-                  <button class="btn btn-outline-secondary" onClick="${() => saveResponse()}">store</button>
+                  <button class="btn btn-outline-secondary" onClick="${() => saveResponse()}">save</button>
                   <button class="btn btn-outline-secondary" onClick="${() => compareResponse()}">compare</button>
-                  <button class="btn btn-outline-secondary" onClick="${() => setResponse()}">set</button>
+                  <button class="btn btn-outline-secondary" onClick="${() => setResponse()}">load</button>
                   <button
                     class="btn btn-outline-secondary"
                     disabled="${!item.resetResponse}"
                     onClick="${() => resetResponse()}"
                   >
-                    reset
+                    clear
                   </button>
                 </div>
               </div>
 
-              <div>
+              <div class="d-flex flex-column">
                 <small class="text-muted">ㅤ</small>
                 <div class="d-flex">
                   <button
@@ -239,80 +285,91 @@
                 </div>
               </div>
             </div>
-
-            <div class="mt-2 d-flex gap-2">
-              <button class="btn btn-outline-secondary" onClick="${() => playState()}">play</button>
-              <input
-                class="form-control-range flex-grow-1"
-                type="range"
-                min="0"
-                max="${JSON.parse(item.getState()).log.length}"
-                value=${range}
-                onChange=${(e) => setRange(e.target.value)}
-                step="1"
-              />
-            </div>
+            ${store && html`<div class="mt-5 d-flex flex-column gap-2">
+              <div class="d-flex justify-content-between">
+                <button class="btn btn-outline-secondary" onClick="${() => playState()}">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-play" viewBox="0 0 16 16">
+                    <path d="M3.905 14.21a1 1 0 0 1-1.555-.832V2.622a1 1 0 0 1 1.555-.832l9.066 5.293a1 1 0 0 1 0 1.664l-9.066 5.293zm-.57-1.664L11.4 8 3.335 2.454v10.092z"/>
+                  </svg>
+                </button>
+                <span>${currentRangeValue}</span>
+              </div>
+              <div class="d-flex gap-2">
+                <span>0</span>
+                <input
+                  class="form-control-range flex-grow-1"
+                  type="range"
+                  min="0"
+                  max="${maxRange}"
+                  value=${currentRangeValue}
+                  onInput=${(e) => scrubRange(e.target.value)}
+                  step="1"
+                />
+                <span>${maxRange}</span>
+              </div>
+            </div>` }
             
           </div>
         `;
+    }
+
+    function register(item) {
+      let state = undefined;
+      const localStorageState = localStorage.getItem(item.typeIdentifier + "_state");
+      if (localStorageState) {
+        state = JSON.parse(localStorageState);
       }
+      let props = {};
+      const localStorageProps = localStorage.getItem(item.typeIdentifier + "_props");
+      if (localStorageProps) {
+        props = JSON.parse(localStorageProps);
+      }
+      const dom = document.getElementById("pciContainer");
+      const config = {
+        onready: () => {
+          document.getElementById("loading").innerHTML = "";
+        },
+        properties: props,
+      };
 
-      function register(item) {
-        let state = undefined;
-        const localStorageState = localStorage.getItem(item.typeIdentifier + "_state");
-        if (localStorageState) {
-          state = JSON.parse(localStorageState);
-        }
-        let props = {};
-        const localStorageProps = localStorage.getItem(item.typeIdentifier + "_props");
-        if (localStorageProps) {
-          props = JSON.parse(localStorageProps);
-        }
-        const dom = document.getElementById("pciContainer");
-        const config = {
-          onready: () => {
-            document.getElementById("loading").innerHTML = "";
-          },
-          properties: props,
-        };
-
-        item.getInstance(dom, config, state);
-
-        if (item.getResponse() !== undefined) {
-          document.getElementById("noresponse").style.display = "block";
-        }
-        localStorage.removeItem(item.typeIdentifier + "_state");
+      item.getInstance(dom, config, state);
+
+      if (item.getResponse() !== undefined) {
+        document.getElementById("noresponse").style.display = "block";
       }
+      localStorage.removeItem(item.typeIdentifier + "_state");
+    }
 
-      define("qtiCustomInteractionContext", (qtiCustomInteractionContext) => {
-        return { register: (ctxA) => register(ctxA) };
+    define("qtiCustomInteractionContext", (qtiCustomInteractionContext) => {
+      return { register: (ctxA) => register(ctxA) };
+    });
+
+    function loadItem() {
+      requirejs(["index.js"], (itemInstance) => {
+        render(html`<${App} item="${itemInstance}" />`, document.getElementById("devtools"));
       });
+    }
+    window.onload = () => loadItem();
+  </script>
 
-      function loadItem() {
-        requirejs(["index.js"], (itemInstance) => {
-          render(html`<${App} item="${itemInstance}" />`, document.getElementById("devtools"));
-        });
-      }
-      window.onload = () => loadItem();
-    </script>
-
-    <h3 style="margin-top: 12rem">checklist</h3>
-    <ul style="margin-bottom: 10rem">
-      <li>Is the css scoped to the item?</li>
-      <li>Is the css/item somewhat responsive on smaller screens</li>
-      <li>Can you reset the item to its initial state</li>
-      <li>Can it restore its state ( reload )</li>
-      <li>Can you change the config</li>
-      <li>Colorblind</li>
-      <li>Touch/Mouse friendly</li>
-      <li>Works in older browser like IE11</li>
-      <li>Destroys itself correctly, removing event listeners</li>
-      <li>No objects or variables on global scope</li>
-      <li>Triggers correctly on changed config properties</li>
-      <li>Implements on off() methods of tao?</li>
-      <li>Response type and response correct</li>
-      <li>getResponse() should give undefined when user has not done anything</li>
-      <li>For TAO to enter response is the entered comparable by the response given</li>
-    </ul>
-  </body>
-</html>
+  <h3 style="margin-top: 12rem">checklist</h3>
+  <ul style="margin-bottom: 10rem">
+    <li>Is the css scoped to the item?</li>
+    <li>Is the css/item somewhat responsive on smaller screens</li>
+    <li>Can you reset the item to its initial state</li>
+    <li>Can it restore its state ( reload )</li>
+    <li>Can you change the config</li>
+    <li>Colorblind</li>
+    <li>Touch/Mouse friendly</li>
+    <li>Works in older browser like IE11</li>
+    <li>Destroys itself correctly, removing event listeners</li>
+    <li>No objects or variables on global scope</li>
+    <li>Triggers correctly on changed config properties</li>
+    <li>Implements on off() methods of tao?</li>
+    <li>Response type and response correct</li>
+    <li>getResponse() should give undefined when user has not done anything</li>
+    <li>For TAO to enter response is the entered comparable by the response given</li>
+  </ul>
+</body>
+
+</html>