jspsych-tangram 0.0.5 → 0.0.7

package/dist/prep/index.d.ts

@@ -40,6 +40,12 @@ declare const info: {
             default: never[];
             description: string;
         };
+        /** Array of primitive names in the order they should be displayed */
+        primitive_order: {
+            type: ParameterType;
+            default: string[];
+            description: string;
+        };
         /** Callback fired after each interaction (optional analytics hook) */
         onInteraction: {
             type: ParameterType;
@@ -109,6 +115,12 @@ declare class TangramPrepPlugin implements JsPsychPlugin<Info> {
                 default: never[];
                 description: string;
             };
+            /** Array of primitive names in the order they should be displayed */
+            primitive_order: {
+                type: ParameterType;
+                default: string[];
+                description: string;
+            };
             /** Callback fired after each interaction (optional analytics hook) */
             onInteraction: {
                 type: ParameterType;

package/dist/prep/index.js

@@ -6,26 +6,27 @@ import { v4 } from 'uuid';
 const CONFIG = {
   color: {
     bands: {
-      silhouette: { fillEven: "#eef2ff", fillOdd: "#f6f7fb", stroke: "#c7d2fe" },
-      workspace: { fillEven: "#f3f4f6", fillOdd: "#f9fafb", stroke: "#e5e7eb" }
+      silhouette: { fillEven: "#fff2ccff", fillOdd: "#fff2ccff", stroke: "#b1b1b1" },
+      workspace: { fillEven: "#fff2ccff", fillOdd: "#fff2ccff", stroke: "#b1b1b1" }
     },
-    completion: { fill: "#dcfce7", stroke: "#86efac" },
-    silhouetteMask: "#94a3b8",
+    completion: { fill: "#ccfff2", stroke: "#13da57" },
+    silhouetteMask: "#374151",
     anchors: { invalid: "#7dd3fc", valid: "#475569" },
-    piece: { draggingFill: "#1d4ed8", validFill: "#60a5fa", invalidFill: "#ef4444", invalidStroke: "#dc2626", selectedStroke: "#111827", allGreenStroke: "#86efac", borderStroke: "#374151" },
+    piece: { draggingFill: "#8e7cc3ff", validFill: "#8e7cc3ff", invalidFill: "#ef4444", invalidStroke: "#dc2626", selectedStroke: "#674ea7", allGreenStroke: "#86efac", borderStroke: "#674ea7" },
     ui: { light: "#60a5fa", dark: "#1d4ed8" },
-    blueprint: { fill: "#374151", selectedStroke: "#111827", badgeFill: "#eef2ff", labelFill: "#374151" }
+    blueprint: { fill: "#374151", selectedStroke: "#111827", badgeFill: "#000000", labelFill: "#ffffff" }
   },
   opacity: {
-    blueprint: 0.95,
-    silhouetteMask: 0.45,
-    anchors: { valid: 0.8, invalid: 0.5 },
-    piece: { invalid: 0.35, dragging: 0.6, locked: 0.7, normal: 0.95 }
+    blueprint: 0.4,
+    silhouetteMask: 0.25,
+    //anchors: { valid: 0.80, invalid: 0.50 },
+    anchors: { invalid: 0, valid: 0 },
+    piece: { invalid: 0.35, dragging: 0.75, locked: 1, normal: 1 }
   },
   size: {
-    stroke: { bandPx: 1, pieceSelectedPx: 1.5, allGreenStrokePx: 6, pieceBorderPx: 1 },
+    stroke: { bandPx: 5, pieceSelectedPx: 3, allGreenStrokePx: 10, pieceBorderPx: 2 },
     anchorRadiusPx: { valid: 1, invalid: 1 },
-    badgeFontPx: 12,
+    badgeFontPx: 16,
     centerBadge: { fractionOfOuterR: 0.15, minPx: 20, marginPx: 4 }
   },
   layout: {
@@ -3548,9 +3549,11 @@ function startPrepTrial(display_element, params, jsPsych) {
     layoutMode,
     requireAllSlots,
     quickstashMacros,
+    primitiveOrder,
     onInteraction,
     onTrialEnd
   } = params;
+  const PRIMITIVE_BLUEPRINTS_ORDERED = [...PRIMITIVE_BLUEPRINTS].sort((a, b) => primitiveOrder.indexOf(a.kind) - primitiveOrder.indexOf(b.kind));
   const prepSectors = Array.from({ length: numQuickstashSlots }, (_, i) => ({
     id: `prep-sector-${i}`,
     tangramId: `prep-sector-${i}`,
@@ -3564,7 +3567,7 @@ function startPrepTrial(display_element, params, jsPsych) {
   const handleControllerReady = (controller, layout, force) => {
     if (quickstashMacros && quickstashMacros.length > 0 && layout) {
       const primsByKind = /* @__PURE__ */ new Map();
-      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}`;
         const compositeBlueprint = convertAnchorCompositeToPixels(
@@ -3621,7 +3624,7 @@ function startPrepTrial(display_element, params, jsPsych) {
     sectors: prepSectors,
     quickstash: [],
     // No pre-made macros
-    primitives: PRIMITIVE_BLUEPRINTS,
+    primitives: PRIMITIVE_BLUEPRINTS_ORDERED,
     layout: layoutMode,
     target: "workspace",
     // Pieces go in sectors
@@ -3682,6 +3685,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,
@@ -3732,6 +3741,7 @@ class TangramPrepPlugin {
       layoutMode: trial.layout,
       requireAllSlots: trial.require_all_slots,
       quickstashMacros: trial.quickstash_macros,
+      primitiveOrder: trial.primitive_order,
       onInteraction: trial.onInteraction,
       onTrialEnd: wrappedOnTrialEnd
     };