jspsych-tangram 0.0.13 → 0.0.15

package/dist/afc/index.d.ts

@@ -0,0 +1,169 @@
+import { JsPsychPlugin, ParameterType, JsPsych, TrialType } from 'jspsych';
+
+declare const info: {
+    name: string;
+    version: string;
+    parameters: {
+        /** Left tangram specification to display */
+        tangram_left: {
+            type: ParameterType;
+            default: undefined;
+            description: string;
+        };
+        /** Right tangram specification to display */
+        tangram_right: {
+            type: ParameterType;
+            default: undefined;
+            description: string;
+        };
+        /** HTML content to display above the tangrams as instructions */
+        instructions: {
+            type: ParameterType;
+            default: string;
+            description: string;
+        };
+        /** Text to display on left response button */
+        button_text_left: {
+            type: ParameterType;
+            default: string;
+            description: string;
+        };
+        /** Text to display on right response button */
+        button_text_right: {
+            type: ParameterType;
+            default: string;
+            description: string;
+        };
+        /** Whether to show tangram decomposed into individual primitives with borders */
+        show_tangram_decomposition: {
+            type: ParameterType;
+            default: boolean;
+            description: string;
+        };
+        /** Whether to use distinct colors for each primitive shape type */
+        use_primitive_colors: {
+            type: ParameterType;
+            default: boolean;
+            description: string;
+        };
+        /** Indices mapping primitives to colors from the color palette */
+        primitive_color_indices: {
+            type: ParameterType;
+            default: number[];
+            description: string;
+        };
+        /** Callback fired when trial ends */
+        onTrialEnd: {
+            type: ParameterType;
+            default: undefined;
+            description: string;
+        };
+    };
+    data: {
+        /** Reaction time in milliseconds */
+        rt: {
+            type: ParameterType;
+            description: string;
+        };
+        /** Response choice */
+        response: {
+            type: ParameterType;
+            description: string;
+        };
+    };
+    citations: string;
+};
+type Info = typeof info;
+/**
+ * **tangram-afc**
+ *
+ * A jsPsych plugin for alternative forced choice (AFC) trials displaying two tangrams
+ * side-by-side with response buttons.
+ *
+ * @author Justin Yang & Sean Paul Anderson
+ * @see {@link https://github.com/cogtoolslab/tangram_construction.git/tree/main/experiments/jspsych-tangram-prep}
+ */
+declare class TangramAFCPlugin implements JsPsychPlugin<Info> {
+    private jsPsych;
+    static info: {
+        name: string;
+        version: string;
+        parameters: {
+            /** Left tangram specification to display */
+            tangram_left: {
+                type: ParameterType;
+                default: undefined;
+                description: string;
+            };
+            /** Right tangram specification to display */
+            tangram_right: {
+                type: ParameterType;
+                default: undefined;
+                description: string;
+            };
+            /** HTML content to display above the tangrams as instructions */
+            instructions: {
+                type: ParameterType;
+                default: string;
+                description: string;
+            };
+            /** Text to display on left response button */
+            button_text_left: {
+                type: ParameterType;
+                default: string;
+                description: string;
+            };
+            /** Text to display on right response button */
+            button_text_right: {
+                type: ParameterType;
+                default: string;
+                description: string;
+            };
+            /** Whether to show tangram decomposed into individual primitives with borders */
+            show_tangram_decomposition: {
+                type: ParameterType;
+                default: boolean;
+                description: string;
+            };
+            /** Whether to use distinct colors for each primitive shape type */
+            use_primitive_colors: {
+                type: ParameterType;
+                default: boolean;
+                description: string;
+            };
+            /** Indices mapping primitives to colors from the color palette */
+            primitive_color_indices: {
+                type: ParameterType;
+                default: number[];
+                description: string;
+            };
+            /** Callback fired when trial ends */
+            onTrialEnd: {
+                type: ParameterType;
+                default: undefined;
+                description: string;
+            };
+        };
+        data: {
+            /** Reaction time in milliseconds */
+            rt: {
+                type: ParameterType;
+                description: string;
+            };
+            /** Response choice */
+            response: {
+                type: ParameterType;
+                description: string;
+            };
+        };
+        citations: string;
+    };
+    constructor(jsPsych: JsPsych);
+    /**
+     * Launches the trial by invoking startAFCTrial
+     * with the display element, parameters, and jsPsych instance.
+     */
+    trial(display_element: HTMLElement, trial: TrialType<Info>): void;
+}
+
+export { TangramAFCPlugin as default };

package/dist/afc/index.js

@@ -0,0 +1,441 @@
+import { ParameterType } from 'jspsych';
+import React, { useRef, useState } from 'react';
+import { createRoot } from 'react-dom/client';
+
+function polysAABB(polys) {
+  let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+  for (const poly of polys) {
+    for (const p of poly) {
+      if (p.x < minX) minX = p.x;
+      if (p.y < minY) minY = p.y;
+      if (p.x > maxX) maxX = p.x;
+      if (p.y > maxY) maxY = p.y;
+    }
+  }
+  const width = Math.max(1, maxX - minX);
+  const height = Math.max(1, maxY - minY);
+  return { min: { x: minX, y: minY }, max: { x: maxX, y: maxY }, width, height, cx: (minX + maxX) / 2, cy: (minY + maxY) / 2 };
+}
+
+const CONFIG = {
+  color: {
+    bands: {
+      silhouette: { fillEven: "#ffffff", stroke: "#b1b1b1" }},
+    silhouetteMask: "#374151",
+    tangramDecomposition: { stroke: "#fef2cc" },
+    primitiveColors: [
+      // from seaborn "colorblind" palette, 6 colors, with red omitted
+      "#0173b2",
+      "#de8f05",
+      "#029e73",
+      "#cc78bc",
+      "#ca9161"
+    ]
+  },
+  opacity: {
+    silhouetteMask: 0.25,
+    piece: { normal: 1 }
+  },
+  size: {
+    stroke: { bandPx: 5, tangramDecompositionPx: 1 }},
+  layout: {
+    grid: { stepPx: 20, unitPx: 40 }}};
+
+const GRID_PX = CONFIG.layout.grid.stepPx;
+function igcd(a, b) {
+  a = Math.round(Math.abs(a));
+  b = Math.round(Math.abs(b));
+  while (b) [a, b] = [b, a % b];
+  return a || 1;
+}
+function inferUnitFromPolys(polys) {
+  let g = 0;
+  for (const poly of polys) {
+    for (let i = 0; i < poly.length; i++) {
+      const a = poly[i], b = poly[(i + 1) % poly.length];
+      if (!a || !b) continue;
+      const dx = Math.round(Math.abs(b.x - a.x));
+      const dy = Math.round(Math.abs(b.y - a.y));
+      if (dx) g = g ? igcd(g, dx) : dx;
+      if (dy) g = g ? igcd(g, dy) : dy;
+    }
+  }
+  return g || 1;
+}
+function placeSilhouetteGridAlignedAsPolys(polys, S, rectCenter) {
+  if (!polys || polys.length === 0) return [];
+  const a = polysAABB(polys);
+  const cx0 = (a.min.x + a.max.x) / 2;
+  const cy0 = (a.min.y + a.max.y) / 2;
+  const cx = Math.round(rectCenter.cx / GRID_PX) * GRID_PX;
+  const cy = Math.round(rectCenter.cy / GRID_PX) * GRID_PX;
+  const tx = cx - S * cx0;
+  const ty = cy - S * cy0;
+  const stx = Math.round(tx / GRID_PX) * GRID_PX;
+  const sty = Math.round(ty / GRID_PX) * GRID_PX;
+  return polys.map((poly) => poly.map((p) => ({ x: S * p.x + stx, y: S * p.y + sty })));
+}
+
+function startAFCTrial(display_element, params, _jsPsych) {
+  const root = createRoot(display_element);
+  root.render(React.createElement(AFCView, { params }));
+  return { root, display_element, jsPsych: _jsPsych };
+}
+function AFCView({ params }) {
+  const {
+    tangramLeft,
+    tangramRight,
+    instructions,
+    buttonTextLeft,
+    buttonTextRight,
+    showTangramDecomposition,
+    usePrimitiveColors,
+    primitiveColorIndices,
+    onTrialEnd
+  } = params;
+  const trialStartTime = useRef(Date.now());
+  const [hasResponded, setHasResponded] = useState(false);
+  const handleResponse = (choice) => {
+    if (hasResponded) return;
+    setHasResponded(true);
+    const rt = Date.now() - trialStartTime.current;
+    if (onTrialEnd) {
+      onTrialEnd({
+        rt,
+        response: choice,
+        show_tangram_decomposition: showTangramDecomposition,
+        use_primitive_colors: usePrimitiveColors,
+        primitive_color_indices: primitiveColorIndices,
+        button_text_left: buttonTextLeft,
+        button_text_right: buttonTextRight
+      });
+    }
+  };
+  return /* @__PURE__ */ React.createElement("div", { style: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    padding: "20px",
+    background: "#fff7e0ff",
+    minHeight: "100vh"
+  } }, instructions && /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      style: {
+        maxWidth: "800px",
+        width: "100%",
+        marginBottom: "30px",
+        textAlign: "center",
+        fontSize: "18px",
+        lineHeight: "1.5"
+      },
+      dangerouslySetInnerHTML: { __html: instructions }
+    }
+  ), /* @__PURE__ */ React.createElement("div", { style: {
+    display: "flex",
+    flexDirection: "row",
+    gap: "50px",
+    justifyContent: "center",
+    alignItems: "flex-start",
+    flexWrap: "wrap"
+  } }, /* @__PURE__ */ React.createElement(
+    TangramOption,
+    {
+      tangram: tangramLeft,
+      buttonText: buttonTextLeft,
+      onClick: () => handleResponse("left"),
+      disabled: hasResponded,
+      showDecomposition: showTangramDecomposition,
+      usePrimitiveColors,
+      primitiveColorIndices
+    }
+  ), /* @__PURE__ */ React.createElement(
+    TangramOption,
+    {
+      tangram: tangramRight,
+      buttonText: buttonTextRight,
+      onClick: () => handleResponse("right"),
+      disabled: hasResponded,
+      showDecomposition: showTangramDecomposition,
+      usePrimitiveColors,
+      primitiveColorIndices
+    }
+  )));
+}
+function TangramOption({
+  tangram,
+  buttonText,
+  onClick,
+  disabled,
+  showDecomposition,
+  usePrimitiveColors,
+  primitiveColorIndices
+}) {
+  if (!tangram) {
+    return /* @__PURE__ */ React.createElement("div", { style: { width: 300, height: 300, background: "#eee" } }, "No Tangram Data");
+  }
+  const CANON = /* @__PURE__ */ new Set([
+    "square",
+    "smalltriangle",
+    "parallelogram",
+    "medtriangle",
+    "largetriangle"
+  ]);
+  const filteredTans = tangram.solutionTans.filter((tan) => {
+    const tanName = tan.name ?? tan.kind;
+    return CANON.has(tanName);
+  });
+  const mask = filteredTans.map((tan) => {
+    const polygon = tan.vertices.map(([x, y]) => ({ x: x ?? 0, y: -(y ?? 0) }));
+    return polygon;
+  });
+  const primitiveDecomposition = filteredTans.map((tan) => ({
+    kind: tan.name ?? tan.kind,
+    polygon: tan.vertices.map(([x, y]) => ({ x: x ?? 0, y: -(y ?? 0) }))
+  }));
+  const DISPLAY_SIZE = 300;
+  const viewport = {
+    w: DISPLAY_SIZE,
+    h: DISPLAY_SIZE
+  };
+  const scaleS = React.useMemo(() => {
+    const u = inferUnitFromPolys(mask);
+    return u ? CONFIG.layout.grid.unitPx / u : 1;
+  }, [mask]);
+  const centerPos = {
+    cx: viewport.w / 2,
+    cy: viewport.h / 2
+  };
+  const pathD = (poly) => {
+    if (!poly || poly.length === 0) return "";
+    const moves = poly.map((p, i) => `${i === 0 ? "M" : "L"} ${p.x} ${p.y}`);
+    return moves.join(" ") + " Z";
+  };
+  const renderSilhouette = () => {
+    if (showDecomposition) {
+      const rawPolys = primitiveDecomposition.map((primInfo) => primInfo.polygon);
+      const placedPolys = placeSilhouetteGridAlignedAsPolys(rawPolys, scaleS, centerPos);
+      return /* @__PURE__ */ React.createElement("g", { key: "sil-decomposed", pointerEvents: "none" }, placedPolys.map((scaledPoly, i) => {
+        const primInfo = primitiveDecomposition[i];
+        let fillColor = CONFIG.color.silhouetteMask;
+        if (usePrimitiveColors && primInfo?.kind && primitiveColorIndices) {
+          const kindToIndex = {
+            "square": 0,
+            "smalltriangle": 1,
+            "parallelogram": 2,
+            "medtriangle": 3,
+            "largetriangle": 4
+          };
+          const primitiveIndex = kindToIndex[primInfo.kind];
+          if (primitiveIndex !== void 0 && primitiveColorIndices[primitiveIndex] !== void 0) {
+            const colorIndex = primitiveColorIndices[primitiveIndex];
+            const color = CONFIG.color.primitiveColors[colorIndex];
+            if (color) {
+              fillColor = color;
+            }
+          }
+        }
+        return /* @__PURE__ */ React.createElement(React.Fragment, { key: `prim-${i}` }, /* @__PURE__ */ React.createElement(
+          "path",
+          {
+            d: pathD(scaledPoly),
+            fill: fillColor,
+            opacity: usePrimitiveColors ? CONFIG.opacity.piece.normal : CONFIG.opacity.silhouetteMask,
+            stroke: "none"
+          }
+        ), /* @__PURE__ */ React.createElement(
+          "path",
+          {
+            d: pathD(scaledPoly),
+            fill: "none",
+            stroke: CONFIG.color.tangramDecomposition.stroke,
+            strokeWidth: CONFIG.size.stroke.tangramDecompositionPx
+          }
+        ));
+      }));
+    } else {
+      const placedPolys = placeSilhouetteGridAlignedAsPolys(mask, scaleS, centerPos);
+      return /* @__PURE__ */ React.createElement("g", { key: "sil-unified", pointerEvents: "none" }, placedPolys.map((scaledPoly, i) => {
+        const primInfo = primitiveDecomposition[i];
+        let fillColor = CONFIG.color.silhouetteMask;
+        if (usePrimitiveColors && primInfo?.kind && primitiveColorIndices) {
+          const kindToIndex = {
+            "square": 0,
+            "smalltriangle": 1,
+            "parallelogram": 2,
+            "medtriangle": 3,
+            "largetriangle": 4
+          };
+          const primitiveIndex = kindToIndex[primInfo.kind];
+          if (primitiveIndex !== void 0 && primitiveColorIndices[primitiveIndex] !== void 0) {
+            const colorIndex = primitiveColorIndices[primitiveIndex];
+            const color = CONFIG.color.primitiveColors[colorIndex];
+            if (color) {
+              fillColor = color;
+            }
+          }
+        }
+        return /* @__PURE__ */ React.createElement(
+          "path",
+          {
+            key: `sil-${i}`,
+            d: pathD(scaledPoly),
+            fill: fillColor,
+            opacity: usePrimitiveColors ? CONFIG.opacity.piece.normal : CONFIG.opacity.silhouetteMask,
+            stroke: "none"
+          }
+        );
+      }));
+    }
+  };
+  return /* @__PURE__ */ React.createElement("div", { style: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    gap: "20px"
+  } }, /* @__PURE__ */ React.createElement(
+    "svg",
+    {
+      width: viewport.w,
+      height: viewport.h,
+      viewBox: `0 0 ${viewport.w} ${viewport.h}`,
+      style: {
+        display: "block",
+        background: CONFIG.color.bands.silhouette.fillEven,
+        border: `${CONFIG.size.stroke.bandPx}px solid ${CONFIG.color.bands.silhouette.stroke}`,
+        borderRadius: "8px"
+      }
+    },
+    renderSilhouette()
+  ), /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      className: "jspsych-btn",
+      onClick,
+      disabled,
+      style: {
+        padding: "12px 30px",
+        fontSize: "16px",
+        cursor: disabled ? "not-allowed" : "pointer",
+        opacity: disabled ? 0.5 : 1
+      }
+    },
+    buttonText
+  ));
+}
+
+const info = {
+  name: "tangram-afc",
+  version: "1.0.0",
+  parameters: {
+    /** Left tangram specification to display */
+    tangram_left: {
+      type: ParameterType.COMPLEX,
+      default: void 0,
+      description: "TangramSpec object defining left target shape to display"
+    },
+    /** Right tangram specification to display */
+    tangram_right: {
+      type: ParameterType.COMPLEX,
+      default: void 0,
+      description: "TangramSpec object defining right target shape to display"
+    },
+    /** HTML content to display above the tangrams as instructions */
+    instructions: {
+      type: ParameterType.STRING,
+      default: "",
+      description: "HTML content to display above the tangrams as instructions"
+    },
+    /** Text to display on left response button */
+    button_text_left: {
+      type: ParameterType.STRING,
+      default: "Select Left",
+      description: "Text to display on left response button"
+    },
+    /** Text to display on right response button */
+    button_text_right: {
+      type: ParameterType.STRING,
+      default: "Select Right",
+      description: "Text to display on right response button"
+    },
+    /** Whether to show tangram decomposed into individual primitives with borders */
+    show_tangram_decomposition: {
+      type: ParameterType.BOOL,
+      default: false,
+      description: "Whether to show tangram decomposed into individual primitives with borders"
+    },
+    /** Whether to use distinct colors for each primitive shape type */
+    use_primitive_colors: {
+      type: ParameterType.BOOL,
+      default: false,
+      description: "Whether each primitive shape type should have its own distinct color in the displayed tangram"
+    },
+    /** Indices mapping primitives to colors from the color palette */
+    primitive_color_indices: {
+      type: ParameterType.OBJECT,
+      default: [0, 1, 2, 3, 4],
+      description: "Array of 5 integers indexing into primitiveColors array, mapping [square, smalltriangle, parallelogram, medtriangle, largetriangle] to colors"
+    },
+    /** Callback fired when trial ends */
+    onTrialEnd: {
+      type: ParameterType.FUNCTION,
+      default: void 0,
+      description: "Callback when trial completes with full data"
+    }
+  },
+  data: {
+    /** Reaction time in milliseconds */
+    rt: {
+      type: ParameterType.INT,
+      description: "Milliseconds between trial start and button click"
+    },
+    /** Response choice */
+    response: {
+      type: ParameterType.STRING,
+      description: "Which button was clicked: 'left' or 'right'"
+    }
+  },
+  citations: ""
+};
+class TangramAFCPlugin {
+  constructor(jsPsych) {
+    this.jsPsych = jsPsych;
+  }
+  static {
+    this.info = info;
+  }
+  /**
+   * Launches the trial by invoking startAFCTrial
+   * with the display element, parameters, and jsPsych instance.
+   */
+  trial(display_element, trial) {
+    const wrappedOnTrialEnd = (data) => {
+      if (trial.onTrialEnd) {
+        trial.onTrialEnd(data);
+      }
+      const reactContext = display_element.__reactContext;
+      if (reactContext?.root) {
+        reactContext.root.unmount();
+      }
+      display_element.innerHTML = "";
+      this.jsPsych.finishTrial(data);
+    };
+    const params = {
+      tangramLeft: trial.tangram_left,
+      tangramRight: trial.tangram_right,
+      instructions: trial.instructions,
+      buttonTextLeft: trial.button_text_left,
+      buttonTextRight: trial.button_text_right,
+      showTangramDecomposition: trial.show_tangram_decomposition,
+      usePrimitiveColors: trial.use_primitive_colors,
+      primitiveColorIndices: trial.primitive_color_indices,
+      onTrialEnd: wrappedOnTrialEnd
+    };
+    const { root, display_element: element, jsPsych } = startAFCTrial(display_element, params, this.jsPsych);
+    element.__reactContext = { root, jsPsych };
+  }
+}
+
+export { TangramAFCPlugin as default };
+//# sourceMappingURL=index.js.map