jspsych-tangram 0.0.5 → 0.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jspsych-tangram",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "description": "Tangram tasks for jsPsych: prep and construct.",
   "type": "module",
   "main": "dist/index.cjs",

package/src/plugins/tangram-construct/ConstructionApp.tsx

@@ -25,6 +25,7 @@ import { CONFIG } from "../../core/config/config";
 export interface StartConstructionTrialParams {
   tangrams: any[];
   quickstash_macros?: Blueprint[] | AnchorComposite[];
+  primitiveOrder: string[];
   target?: PlacementTarget;
   input?: InputMode;
   layout?: LayoutMode;
@@ -57,6 +58,9 @@ export function startConstructionTrial(
     "largetriangle",
   ]);
 
+  // make copy of PRIMITIVE_BLUEPRINTS sorted by primitiveOrder
+  const PRIMITIVE_BLUEPRINTS_ORDERED = [...PRIMITIVE_BLUEPRINTS].sort((a, b) => params.primitiveOrder.indexOf(a.kind) - params.primitiveOrder.indexOf(b.kind));
+
   // Convert JSON plugin parameters to internal Sector[] format
     const sectors: Sector[] = params.tangrams.map((tangramSpec, index) => {
   
@@ -99,7 +103,7 @@ export function startConstructionTrial(
 
       // Create primitive map for conversion
       const primsByKind = new Map<TanKind, PrimitiveBlueprint>();
-      PRIMITIVE_BLUEPRINTS.forEach(p => primsByKind.set(p.kind, p));
+      PRIMITIVE_BLUEPRINTS_ORDERED.forEach(p => primsByKind.set(p.kind, p));
 
       // Convert each anchor composite to pixel-based blueprint
       quickstash = (params.quickstash_macros as AnchorComposite[]).map(anchorComposite =>
@@ -116,7 +120,7 @@ export function startConstructionTrial(
   const gameBoardProps = {
     sectors,
     quickstash,
-    primitives: PRIMITIVE_BLUEPRINTS,
+    primitives: PRIMITIVE_BLUEPRINTS_ORDERED,
     layout: params.layout as LayoutMode,
     target: params.target as PlacementTarget,
     input: params.input as InputMode,

package/src/plugins/tangram-construct/index.ts

@@ -17,6 +17,12 @@ const info = {
       default: [],
       description: "Array of MacroSpec objects created in prep trial"
     },
+    /** Array of primitive names in the order they should be displayed */
+    primitive_order: {
+      type: ParameterType.OBJECT,
+      default: ["square", "smalltriangle", "parallelogram", "medtriangle", "largetriangle"],
+      description: "Array of primitive names in the order they should be displayed"
+    },
     /** Whether to place pieces in workspace or directly on silhouette */
     target: {
       type: ParameterType.SELECT,
@@ -137,6 +143,7 @@ class TangramConstructPlugin implements JsPsychPlugin<Info> {
     const params: StartConstructionTrialParams = {
       tangrams: trial.tangrams,
       quickstash_macros: trial.quickstash_macros,
+      primitiveOrder: trial.primitive_order,
       target: trial.target,
       input: trial.input,
       layout: trial.layout,

package/src/plugins/tangram-prep/PrepApp.tsx

@@ -32,6 +32,7 @@ export interface StartPrepTrialParams {
   layoutMode: "circle" | "semicircle";
   requireAllSlots: boolean;
   quickstashMacros?: AnchorComposite[];
+  primitiveOrder: string[];
   onInteraction?: (event: any) => void;
   onTrialEnd?: (data: any) => void;
 }
@@ -53,10 +54,14 @@ export function startPrepTrial(
     layoutMode, 
     requireAllSlots,
     quickstashMacros,
+    primitiveOrder,
     onInteraction,
     onTrialEnd,
   } = params;
 
+  // make copy of PRIMITIVE_BLUEPRINTS sorted by primitiveOrder
+  const PRIMITIVE_BLUEPRINTS_ORDERED = [...PRIMITIVE_BLUEPRINTS].sort((a, b) => primitiveOrder.indexOf(a.kind) - primitiveOrder.indexOf(b.kind));
+
   // Create blank prep sectors (no silhouettes)
   const prepSectors: Sector[] = Array.from({ length: numQuickstashSlots }, (_, i) => ({
     id: `prep-sector-${i}`,
@@ -75,7 +80,8 @@ export function startPrepTrial(
     if (quickstashMacros && quickstashMacros.length > 0 && layout) {
       // Spawn pieces immediately when controller and layout are ready
       const primsByKind = new Map<TanKind, PrimitiveBlueprint>();
-      PRIMITIVE_BLUEPRINTS.forEach(p => primsByKind.set(p.kind, p));
+
+      PRIMITIVE_BLUEPRINTS_ORDERED.forEach(p => primsByKind.set(p.kind, p));
       
       quickstashMacros.forEach((anchorComposite, macroIndex) => {
         const sectorId = `prep-sector-${macroIndex}`;
@@ -164,7 +170,7 @@ export function startPrepTrial(
   root.render(React.createElement(GameBoard, {
     sectors: prepSectors,
     quickstash: [], // No pre-made macros
-    primitives: PRIMITIVE_BLUEPRINTS,
+    primitives: PRIMITIVE_BLUEPRINTS_ORDERED,
     layout: layoutMode,
     target: 'workspace', // Pieces go in sectors
     input: inputMode,

package/src/plugins/tangram-prep/index.ts

@@ -41,6 +41,12 @@ const info = {
       default: [],
       description: "Array of AnchorComposite objects to edit as primitive pieces"
     },
+    /** Array of primitive names in the order they should be displayed */
+    primitive_order: {
+      type: ParameterType.OBJECT,
+      default: ["square", "smalltriangle", "parallelogram", "medtriangle", "largetriangle"],
+      description: "Array of primitive names in the order they should be displayed"
+    },
     /** Callback fired after each interaction (optional analytics hook) */
     onInteraction: {
       type: ParameterType.FUNCTION,
@@ -108,6 +114,7 @@ class TangramPrepPlugin implements JsPsychPlugin<Info> {
       layoutMode: trial.layout as "circle" | "semicircle",
       requireAllSlots: trial.require_all_slots,
       quickstashMacros: trial.quickstash_macros,
+      primitiveOrder: trial.primitive_order,
       onInteraction: trial.onInteraction,
       onTrialEnd: wrappedOnTrialEnd,
     };