jspsych-tangram 0.0.13 → 0.0.15

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

@@ -0,0 +1,140 @@
+import { JsPsych, JsPsychPlugin, ParameterType, TrialType } from "jspsych";
+import { startAFCTrial, StartAFCTrialParams } from "./AFCApp";
+
+const info = {
+  name: "tangram-afc",
+  version: "1.0.0",
+  parameters: {
+    /** Left tangram specification to display */
+    tangram_left: {
+      type: ParameterType.COMPLEX,
+      default: undefined,
+      description: "TangramSpec object defining left target shape to display"
+    },
+    /** Right tangram specification to display */
+    tangram_right: {
+      type: ParameterType.COMPLEX,
+      default: undefined,
+      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: undefined,
+      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: ""
+};
+
+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}
+ */
+class TangramAFCPlugin implements JsPsychPlugin<Info> {
+  static info = info;
+
+  constructor(private jsPsych: JsPsych) {}
+
+  /**
+   * Launches the trial by invoking startAFCTrial
+   * with the display element, parameters, and jsPsych instance.
+   */
+  trial(display_element: HTMLElement, trial: TrialType<Info>) {
+    // Wrap onTrialEnd to handle React cleanup and jsPsych trial completion
+    const wrappedOnTrialEnd = (data: any) => {
+      // Call user-provided callback if exists
+      if (trial.onTrialEnd) {
+        trial.onTrialEnd(data);
+      }
+
+      // Clean up React first (before clearing DOM)
+      const reactContext = (display_element as any).__reactContext;
+      if (reactContext?.root) {
+        reactContext.root.unmount();
+      }
+
+      // Clear display after React cleanup
+      display_element.innerHTML = '';
+
+      // Finish jsPsych trial with data
+      this.jsPsych.finishTrial(data);
+    };
+
+    // Create parameter object for wrapper
+    const params: StartAFCTrialParams = {
+      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
+    };
+
+    // Use React wrapper to start the trial
+    const { root, display_element: element, jsPsych } = startAFCTrial(display_element, params, this.jsPsych);
+
+    // Store React context for cleanup
+    (element as any).__reactContext = { root, jsPsych };
+  }
+}
+
+export default TangramAFCPlugin;

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

@@ -247,7 +247,7 @@ function NBackView({ params }: NBackViewProps) {
                 <path
                   d={pathD(scaledPoly)}
                   fill={fillColor}
-                  opacity={CONFIG.opacity.silhouetteMask}
+                  opacity={usePrimitiveColors ? CONFIG.opacity.piece.normal : CONFIG.opacity.silhouetteMask}
                   stroke="none"
                 />
 
@@ -298,7 +298,7 @@ function NBackView({ params }: NBackViewProps) {
                 key={`sil-${i}`}
                 d={pathD(scaledPoly)}
                 fill={fillColor}
-                opacity={CONFIG.opacity.silhouetteMask}
+                opacity={usePrimitiveColors ? CONFIG.opacity.piece.normal : CONFIG.opacity.silhouetteMask}
                 stroke="none"
               />
             );
@@ -315,7 +315,7 @@ function NBackView({ params }: NBackViewProps) {
       alignItems: "center",
       justifyContent: "center",
       padding: "20px",
-      background: "#f5f5f5"
+      background: "#fff7e0ff"
     }}>
       {/* Instructions */}
       {instructions && (