Merge pull request #124 from b3008/fix-material-web

update with links to papers

Author: b3008

src/stories/FunctionRandom.stories.ts

@@ -1,21 +1,41 @@
 import type { Meta, StoryObj } from "@storybook/web-components";
 import { html } from "lit";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+
+const makeSource = (name: string, min: number, max: number) =>
+  `<aa-session name="${name}">
+  <div style="display:flex; align-items:center; gap:12px;">
+    <button onclick="
+      var container = this.parentElement.querySelector('.result-container');
+      container.innerHTML = '';
+      var el = document.createElement('aa-function-random');
+      el.setAttribute('name', 'randomValue');
+      el.setAttribute('min', '${min}');
+      el.setAttribute('max', '${max}');
+      el.setAttribute('debug', '');
+      container.appendChild(el);
+      this.parentElement.querySelector('.result-value').textContent = el.value;
+    ">Generate</button>
+    <span>Result: <strong class="result-value">—</strong></span>
+    <span class="result-container" style="display:none;"></span>
+  </div>
+</aa-session>`;
 
 const meta = {
   title: "Data & Utility/Function Random",
   tags: ["autodocs"],
-  argTypes: {
-    min: { control: "number" },
-    max: { control: "number" },
+  render: (args) => {
+    const source = makeSource("random-demo", args.min, args.max);
+    return html`${unsafeHTML(source)}`;
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `<aa-function-random name="randomValue" min="1" max="100"></aa-function-random>`,
+        language: "html",
+      },
+    },
   },
-  render: (args) => html`
-    <aa-function-random
-      name="randomValue"
-      min="${args.min}"
-      max="${args.max}"
-      debug
-    ></aa-function-random>
-  `,
 } satisfies Meta;
 
 export default meta;

src/stories/Introduction.mdx

@@ -26,6 +26,8 @@ export const LiveDemo = ({ html }) => {
 **Build interactive surveys, questionnaires, and experiments using just HTML.**
 
 Executable HTML is a library of custom web components that turn static HTML into interactive, sequential experiences. Instead of writing JavaScript to manage state, control flow, and data collection, you describe your entire application declaratively with HTML tags.
+For a more detailed explanation of the rationale, please visit [its documentation](https://executablehtmldocs.roboticbit.nl/), read [the paper describing its motivation](https://link.springer.com/article/10.3758/s13428-018-1148-y) or read 
+[the paper describing its implementation](https://www.sciencedirect.com/science/article/pii/S2352711021000364) 
 
 ## How it works