jspsych-tangram 0.0.12 → 0.0.14

package/src/plugins/tangram-nback/NBackApp.tsx

@@ -19,6 +19,8 @@ export interface StartNBackTrialParams {
   instructions?: string;
   button_text?: string;
   duration: number;
+  usePrimitiveColors?: boolean;
+  primitiveColorIndices?: number[];
   onTrialEnd?: (data: any) => void;
 }
 
@@ -49,6 +51,8 @@ function NBackView({ params }: NBackViewProps) {
     instructions,
     button_text,
     duration,
+    usePrimitiveColors,
+    primitiveColorIndices,
     onTrialEnd
   } = params;
 
@@ -135,7 +139,12 @@ function NBackView({ params }: NBackViewProps) {
       ...data,
       accuracy,
       tangram_id: tangram.tangramID,
-      is_match: isMatch
+      is_match: isMatch,
+      show_tangram_decomposition: show_tangram_decomposition,
+      use_primitive_colors: usePrimitiveColors,
+      primitive_color_indices: primitiveColorIndices,
+      duration: duration,
+      button_text: button_text
     };
 
     if (onTrialEnd) {
@@ -208,25 +217,50 @@ function NBackView({ params }: NBackViewProps) {
 
       return (
         <g key="sil-decomposed" pointerEvents="none">
-          {placedPolys.map((scaledPoly, i) => (
-            <React.Fragment key={`prim-${i}`}>
-              {/* Fill path */}
-              <path
-                d={pathD(scaledPoly)}
-                fill={CONFIG.color.silhouetteMask}
-                opacity={CONFIG.opacity.silhouetteMask}
-                stroke="none"
-              />
+          {placedPolys.map((scaledPoly, i) => {
+            // Get color for this primitive based on its kind
+            const primInfo = primitiveDecomposition[i];
+            let fillColor = CONFIG.color.silhouetteMask;
 
-              {/* Full perimeter border */}
-              <path
-                d={pathD(scaledPoly)}
-                fill="none"
-                stroke={CONFIG.color.tangramDecomposition.stroke}
-                strokeWidth={CONFIG.size.stroke.tangramDecompositionPx}
-              />
-            </React.Fragment>
-          ))}
+            if (usePrimitiveColors && primInfo?.kind && primitiveColorIndices) {
+              // Map primitive kind to index
+              const kindToIndex: Record<TanKind, number> = {
+                'square': 0,
+                'smalltriangle': 1,
+                'parallelogram': 2,
+                'medtriangle': 3,
+                'largetriangle': 4
+              };
+              const primitiveIndex = kindToIndex[primInfo.kind as TanKind];
+              if (primitiveIndex !== undefined && primitiveColorIndices[primitiveIndex] !== undefined) {
+                const colorIndex = primitiveColorIndices[primitiveIndex];
+                const color = CONFIG.color.primitiveColors[colorIndex];
+                if (color) {
+                  fillColor = color;
+                }
+              }
+            }
+
+            return (
+              <React.Fragment key={`prim-${i}`}>
+                {/* Fill path */}
+                <path
+                  d={pathD(scaledPoly)}
+                  fill={fillColor}
+                  opacity={CONFIG.opacity.silhouetteMask}
+                  stroke="none"
+                />
+
+                {/* Full perimeter border */}
+                <path
+                  d={pathD(scaledPoly)}
+                  fill="none"
+                  stroke={CONFIG.color.tangramDecomposition.stroke}
+                  strokeWidth={CONFIG.size.stroke.tangramDecompositionPx}
+                />
+              </React.Fragment>
+            );
+          })}
         </g>
       );
     } else {
@@ -235,15 +269,40 @@ function NBackView({ params }: NBackViewProps) {
 
       return (
         <g key="sil-unified" pointerEvents="none">
-          {placedPolys.map((scaledPoly, i) => (
-            <path
-              key={`sil-${i}`}
-              d={pathD(scaledPoly)}
-              fill={CONFIG.color.silhouetteMask}
-              opacity={CONFIG.opacity.silhouetteMask}
-              stroke="none"
-            />
-          ))}
+          {placedPolys.map((scaledPoly, i) => {
+            // Get color for this primitive based on its kind
+            const primInfo = primitiveDecomposition[i];
+            let fillColor = CONFIG.color.silhouetteMask;
+
+            if (usePrimitiveColors && primInfo?.kind && primitiveColorIndices) {
+              // Map primitive kind to index
+              const kindToIndex: Record<TanKind, number> = {
+                'square': 0,
+                'smalltriangle': 1,
+                'parallelogram': 2,
+                'medtriangle': 3,
+                'largetriangle': 4
+              };
+              const primitiveIndex = kindToIndex[primInfo.kind as TanKind];
+              if (primitiveIndex !== undefined && primitiveColorIndices[primitiveIndex] !== undefined) {
+                const colorIndex = primitiveColorIndices[primitiveIndex];
+                const color = CONFIG.color.primitiveColors[colorIndex];
+                if (color) {
+                  fillColor = color;
+                }
+              }
+            }
+
+            return (
+              <path
+                key={`sil-${i}`}
+                d={pathD(scaledPoly)}
+                fill={fillColor}
+                opacity={CONFIG.opacity.silhouetteMask}
+                stroke="none"
+              />
+            );
+          })}
         </g>
       );
     }
@@ -256,7 +315,7 @@ function NBackView({ params }: NBackViewProps) {
       alignItems: "center",
       justifyContent: "center",
       padding: "20px",
-      background: "#f5f5f5"
+      background: "#fff7e0ff"
     }}>
       {/* Instructions */}
       {instructions && (

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

@@ -41,6 +41,18 @@ const info = {
       default: 3000,
       description: "Duration in milliseconds to display tangram and accept responses"
     },
+    /** 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,
@@ -127,6 +139,8 @@ class TangramNBackPlugin implements JsPsychPlugin<Info> {
       instructions: trial.instructions,
       button_text: trial.button_text,
       duration: trial.duration,
+      usePrimitiveColors: trial.use_primitive_colors,
+      primitiveColorIndices: trial.primitive_color_indices,
       onTrialEnd: wrappedOnTrialEnd
     };
 

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

@@ -36,6 +36,8 @@ export interface StartPrepTrialParams {
   instructions?: string;
   onInteraction?: (event: any) => void;
   onTrialEnd?: (data: any) => void;
+  usePrimitiveColorsBlueprints?: boolean;
+  primitiveColorIndices?: number[];
 }
 
 /**
@@ -58,6 +60,8 @@ export function startPrepTrial(
     primitiveOrder,
     onInteraction,
     onTrialEnd,
+    usePrimitiveColorsBlueprints,
+    primitiveColorIndices,
   } = params;
 
   // Extract non-callback params for trial data
@@ -188,7 +192,9 @@ export function startPrepTrial(
     ...(params.instructions && { instructions: params.instructions }),
     onControllerReady: handleControllerReady,
     ...(onInteraction && { onInteraction }),
-    ...(onTrialEnd && { onTrialEnd })
+    ...(onTrialEnd && { onTrialEnd }),
+    ...(usePrimitiveColorsBlueprints !== undefined && { usePrimitiveColorsBlueprints }),
+    ...(primitiveColorIndices !== undefined && { primitiveColorIndices })
   }));
 
   return { root, display_element, jsPsych };

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

@@ -62,6 +62,18 @@ const info = {
     onTrialEnd: {
       type: ParameterType.FUNCTION,
       default: undefined
+    },
+    /** Whether to use distinct colors for each primitive shape type in blueprints */
+    use_primitive_colors_blueprints: {
+      type: ParameterType.BOOL,
+      default: false,
+      description: "Whether each primitive shape type should have its own distinct color in the blueprint dock area"
+    },
+    /** 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"
     }
   },
   data: {
@@ -124,6 +136,8 @@ class TangramPrepPlugin implements JsPsychPlugin<Info> {
       instructions: trial.instructions,
       onInteraction: trial.onInteraction,
       onTrialEnd: wrappedOnTrialEnd,
+      usePrimitiveColorsBlueprints: trial.use_primitive_colors_blueprints,
+      primitiveColorIndices: trial.primitive_color_indices,
     };
     
     const { root, display_element: element, jsPsych } = startPrepTrial(display_element, params, this.jsPsych);