@m2c2kit/assessment-color-shapes 0.8.10 → 0.8.12

package/dist/index.js

@@ -1,29 +1,6 @@
-import { Game, Shape, Sprite, Scene, WebColors, Transition, RandomDraws, Label, Action, Timer, TransitionDirection, Easings } from '@m2c2kit/core';
+import { Game, Sprite, Scene, WebColors, Transition, RandomDraws, Shape, Label, Action, Timer, TransitionDirection, Easings } from '@m2c2kit/core';
 import { Instructions, Grid, Button } from '@m2c2kit/addons';
 
-var __getProtoOf = Object.getPrototypeOf;
-var __reflectGet = Reflect.get;
-var __superGet = (cls, obj, key) => __reflectGet(__getProtoOf(cls), key, obj);
-var __async = (__this, __arguments, generator) => {
-  return new Promise((resolve, reject) => {
-    var fulfilled = (value) => {
-      try {
-        step(generator.next(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var rejected = (value) => {
-      try {
-        step(generator.throw(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
-    step((generator = generator.apply(__this, __arguments)).next());
-  });
-};
 class ColorShapes extends Game {
   constructor() {
     const defaultParameters = {
@@ -243,7 +220,7 @@ class ColorShapes extends Game {
     const options = {
       name: "Color Shapes",
       id: "color-shapes",
-      version: "0.8.10 (25099410)",
+      version: "0.8.12 (38470c49)",
       shortDescription: "Color Shapes is a visual array change detection task, measuring intra-item feature binding, where participants determine if shapes change color across two sequential presentations of shape stimuli.",
       longDescription: `Color Shapes is a change detection paradigm used to measure visual short-term memory binding (Parra et al., 2009). Participants are asked to memorize the shapes and colors of three different polygons for 3 seconds. The three polygons are then removed from the screen and re-displayed at different locations, either having the same or different colors. Participants are then asked to decide whether the combination of colors and shapes are the "Same" or "Different" between the study and test phases.`,
       showFps: defaultParameters.show_fps.default,
@@ -288,519 +265,508 @@ class ColorShapes extends Game {
     };
     super(options);
   }
-  initialize() {
-    return __async(this, null, function* () {
-      yield __superGet(ColorShapes.prototype, this, "initialize").call(this);
-      const game = this;
-      const SHAPE_SVG_HEIGHT = 96;
-      const SQUARE_SIDE_LENGTH = 350;
-      const SHAPE_SIZE = { width: 116, height: 116 };
-      const numberOfShapesShown = game.getParameter(
-        "number_of_shapes_shown"
-      );
-      const shapeLibrary = this.makeShapes(SHAPE_SVG_HEIGHT, SHAPE_SIZE);
-      if (game.getParameter("show_quit_button")) {
-        const quitSprite = new Sprite({
-          imageName: "circle-x",
-          position: { x: 380, y: 20 },
-          isUserInteractionEnabled: true
+  async initialize() {
+    await super.initialize();
+    const game = this;
+    const SHAPE_SVG_HEIGHT = 96;
+    const SQUARE_SIDE_LENGTH = 350;
+    const numberOfShapesShown = game.getParameter(
+      "number_of_shapes_shown"
+    );
+    const shapeLibrary = this.makeShapes(SHAPE_SVG_HEIGHT);
+    if (game.getParameter("show_quit_button")) {
+      const quitSprite = new Sprite({
+        imageName: "circle-x",
+        position: { x: 380, y: 20 },
+        isUserInteractionEnabled: true
+      });
+      game.addFreeEntity(quitSprite);
+      quitSprite.onTapDown((e) => {
+        game.removeAllFreeEntities();
+        e.handled = true;
+        const blankScene = new Scene();
+        game.addScene(blankScene);
+        game.presentScene(blankScene);
+        game.addTrialData("quit_button_pressed", true);
+        game.trialComplete();
+        game.cancel();
+      });
+    }
+    let instructionsScenes;
+    switch (game.getParameter("instruction_type")) {
+      case "short": {
+        instructionsScenes = Instructions.Create({
+          instructionScenes: [
+            {
+              title: "Color Shapes",
+              text: `Try to remember the location and color of ${numberOfShapesShown} shapes, because they will soon disappear. When the shapes reappear, answer whether they have the SAME or DIFFERENT colors as they had before.`,
+              imageName: "instructions-1",
+              imageAboveText: false,
+              imageMarginTop: 32,
+              textFontSize: 24,
+              titleFontSize: 30,
+              textVerticalBias: 0.2,
+              nextButtonText: "START",
+              nextButtonBackgroundColor: WebColors.Green,
+              nextSceneTransition: Transition.none()
+            }
+          ]
         });
-        game.addFreeEntity(quitSprite);
-        quitSprite.onTapDown((e) => {
-          game.removeAllFreeEntities();
-          e.handled = true;
-          const blankScene = new Scene();
-          game.addScene(blankScene);
-          game.presentScene(blankScene);
-          game.addTrialData("quit_button_pressed", true);
-          game.trialComplete();
-          game.cancel();
+        break;
+      }
+      case "long": {
+        instructionsScenes = Instructions.Create({
+          instructionScenes: [
+            {
+              title: "Color Shapes",
+              text: `Try to remember the location and color of ${numberOfShapesShown} shapes, because they will soon disappear.`,
+              imageName: "instructions-1",
+              imageAboveText: false,
+              imageMarginTop: 32,
+              textFontSize: 24,
+              titleFontSize: 30,
+              textVerticalBias: 0.2
+            },
+            {
+              title: "Color Shapes",
+              text: "Next you will see the same shapes reappear.",
+              imageName: "instructions-2",
+              imageAboveText: false,
+              imageMarginTop: 32,
+              textFontSize: 24,
+              titleFontSize: 30,
+              textVerticalBias: 0.2
+            },
+            {
+              title: "Color Shapes",
+              text: "Answer whether the shapes have the SAME or DIFFERENT colors as they had before.",
+              imageName: "instructions-3",
+              imageAboveText: false,
+              imageMarginTop: 32,
+              textFontSize: 24,
+              titleFontSize: 30,
+              textVerticalBias: 0.2,
+              nextButtonText: "START",
+              nextButtonBackgroundColor: WebColors.Green,
+              nextSceneTransition: Transition.none()
+            }
+          ]
         });
+        break;
       }
-      let instructionsScenes;
-      switch (game.getParameter("instruction_type")) {
-        case "short": {
-          instructionsScenes = Instructions.Create({
-            instructionScenes: [
-              {
-                title: "Color Shapes",
-                text: `Try to remember the location and color of ${numberOfShapesShown} shapes, because they will soon disappear. When the shapes reappear, answer whether they have the SAME or DIFFERENT colors as they had before.`,
-                imageName: "instructions-1",
-                imageAboveText: false,
-                imageMarginTop: 32,
-                textFontSize: 24,
-                titleFontSize: 30,
-                textVerticalBias: 0.2,
-                nextButtonText: "START",
-                nextButtonBackgroundColor: WebColors.Green,
-                nextSceneTransition: Transition.none()
-              }
-            ]
-          });
-          break;
-        }
-        case "long": {
-          instructionsScenes = Instructions.Create({
-            instructionScenes: [
-              {
-                title: "Color Shapes",
-                text: `Try to remember the location and color of ${numberOfShapesShown} shapes, because they will soon disappear.`,
-                imageName: "instructions-1",
-                imageAboveText: false,
-                imageMarginTop: 32,
-                textFontSize: 24,
-                titleFontSize: 30,
-                textVerticalBias: 0.2
-              },
-              {
-                title: "Color Shapes",
-                text: "Next you will see the same shapes reappear.",
-                imageName: "instructions-2",
-                imageAboveText: false,
-                imageMarginTop: 32,
-                textFontSize: 24,
-                titleFontSize: 30,
-                textVerticalBias: 0.2
-              },
-              {
-                title: "Color Shapes",
-                text: "Answer whether the shapes have the SAME or DIFFERENT colors as they had before.",
-                imageName: "instructions-3",
-                imageAboveText: false,
-                imageMarginTop: 32,
-                textFontSize: 24,
-                titleFontSize: 30,
-                textVerticalBias: 0.2,
-                nextButtonText: "START",
-                nextButtonBackgroundColor: WebColors.Green,
-                nextSceneTransition: Transition.none()
-              }
-            ]
-          });
-          break;
-        }
-        default: {
-          throw new Error("invalid value for instruction_type");
-        }
+      default: {
+        throw new Error("invalid value for instruction_type");
       }
-      instructionsScenes[0].onAppear(() => {
-        game.addTrialData(
-          "activity_begin_iso8601_timestamp",
-          this.beginIso8601Timestamp
-        );
-      });
-      game.addScenes(instructionsScenes);
-      const gridRows = game.getParameter("cells_per_side");
-      const gridColumns = game.getParameter("cells_per_side");
-      const numberOfTrials = game.getParameter("number_of_trials");
-      const shapeColors = game.getParameter(
-        "shape_colors"
+    }
+    instructionsScenes[0].onAppear(() => {
+      game.addTrialData(
+        "activity_begin_iso8601_timestamp",
+        this.beginIso8601Timestamp
       );
-      const trialConfigurations = [];
-      const rows = game.getParameter("cells_per_side");
-      const columns = rows;
-      const numberOfDifferentColorsTrials = game.getParameter(
-        "number_of_different_colors_trials"
+    });
+    game.addScenes(instructionsScenes);
+    const gridRows = game.getParameter("cells_per_side");
+    const gridColumns = game.getParameter("cells_per_side");
+    const numberOfTrials = game.getParameter("number_of_trials");
+    const shapeColors = game.getParameter(
+      "shape_colors"
+    );
+    const trialConfigurations = [];
+    const rows = game.getParameter("cells_per_side");
+    const columns = rows;
+    const numberOfDifferentColorsTrials = game.getParameter(
+      "number_of_different_colors_trials"
+    );
+    const differentColorsTrialIndexes = RandomDraws.FromRangeWithoutReplacement(
+      numberOfDifferentColorsTrials,
+      0,
+      numberOfTrials - 1
+    );
+    for (let i = 0; i < numberOfTrials; i++) {
+      const presentShapes = new Array();
+      const responseShapes = new Array();
+      const shapesToShowIndexes = RandomDraws.FromRangeWithoutReplacement(
+        numberOfShapesShown,
+        0,
+        shapeLibrary.length - 1
       );
-      const differentColorsTrialIndexes = RandomDraws.FromRangeWithoutReplacement(
-        numberOfDifferentColorsTrials,
+      const shapeColorsIndexes = RandomDraws.FromRangeWithoutReplacement(
+        numberOfShapesShown,
         0,
-        numberOfTrials - 1
+        shapeColors.length - 1
       );
-      for (let i = 0; i < numberOfTrials; i++) {
-        const presentShapes = new Array();
-        const responseShapes = new Array();
-        const shapesToShowIndexes = RandomDraws.FromRangeWithoutReplacement(
-          numberOfShapesShown,
-          0,
-          shapeLibrary.length - 1
-        );
-        const shapeColorsIndexes = RandomDraws.FromRangeWithoutReplacement(
-          numberOfShapesShown,
-          0,
-          shapeColors.length - 1
-        );
-        const onDiagonal = (locations) => {
-          if (locations.map((c) => c.row === 0 && c.column === 0).some((e) => e === true) && locations.map((c) => c.row === 1 && c.column === 1).some((e) => e === true) && locations.map((c) => c.row === 2 && c.column === 2).some((e) => e === true)) {
-            return true;
-          }
-          if (locations.map((c) => c.row === 2 && c.column === 0).some((e) => e === true) && locations.map((c) => c.row === 1 && c.column === 1).some((e) => e === true) && locations.map((c) => c.row === 0 && c.column === 2).some((e) => e === true)) {
-            return true;
-          }
-          return false;
-        };
-        const inLine = (locations) => {
-          const uniqueRows = new Set(locations.map((l) => l.row)).size;
-          const uniqueColumns = new Set(locations.map((l) => l.column)).size;
-          if (uniqueRows !== 1 && uniqueColumns !== 1) {
-            return false;
-          }
+      const onDiagonal = (locations) => {
+        if (locations.map((c) => c.row === 0 && c.column === 0).some((e) => e === true) && locations.map((c) => c.row === 1 && c.column === 1).some((e) => e === true) && locations.map((c) => c.row === 2 && c.column === 2).some((e) => e === true)) {
           return true;
-        };
-        let presentLocationsOk = false;
-        let presentLocations;
-        do {
-          presentLocations = RandomDraws.FromGridWithoutReplacement(
-            numberOfShapesShown,
-            rows,
-            columns
-          );
-          if (!inLine(presentLocations) && !onDiagonal(presentLocations)) {
-            presentLocationsOk = true;
-          } else {
-            presentLocationsOk = false;
-          }
-        } while (!presentLocationsOk);
-        for (let j = 0; j < numberOfShapesShown; j++) {
-          const presentShape = {
-            shape: shapeLibrary[shapesToShowIndexes[j]],
-            shapeIndex: shapesToShowIndexes[j],
-            color: shapeColors[shapeColorsIndexes[j]].rgbaColor,
-            colorName: shapeColors[shapeColorsIndexes[j]].colorName,
-            location: presentLocations[j]
-          };
-          presentShapes.push(presentShape);
         }
-        let responseLocationsOk = false;
-        let responseLocations;
-        do {
-          responseLocations = RandomDraws.FromGridWithoutReplacement(
-            numberOfShapesShown,
-            rows,
-            columns
-          );
-          if (!inLine(responseLocations) && !onDiagonal(responseLocations)) {
-            responseLocationsOk = true;
-          } else {
-            responseLocationsOk = false;
-          }
-        } while (!responseLocationsOk);
-        for (let j = 0; j < numberOfShapesShown; j++) {
-          const responseShape = {
-            shape: presentShapes[j].shape,
-            shapeIndex: shapesToShowIndexes[j],
-            color: presentShapes[j].color,
-            colorName: shapeColors[shapeColorsIndexes[j]].colorName,
-            location: responseLocations[j]
-          };
-          responseShapes.push(responseShape);
+        if (locations.map((c) => c.row === 2 && c.column === 0).some((e) => e === true) && locations.map((c) => c.row === 1 && c.column === 1).some((e) => e === true) && locations.map((c) => c.row === 0 && c.column === 2).some((e) => e === true)) {
+          return true;
         }
-        let numberOfShapesWithDifferentColors = 0;
-        const differentColorTrial = differentColorsTrialIndexes.includes(i);
-        if (differentColorTrial) {
-          const numberOfShapesToChange = RandomDraws.SingleFromRange(
-            2,
-            numberOfShapesShown
-          );
-          const shapesToChangeIndexes = RandomDraws.FromRangeWithoutReplacement(
-            numberOfShapesToChange,
-            0,
-            numberOfShapesShown - 1
-          );
-          const shapesToChange = shapesToChangeIndexes.map(
-            (index) => responseShapes[index]
-          );
-          numberOfShapesWithDifferentColors = shapesToChange.length;
-          const firstShapeColor = shapesToChange[0].color;
-          for (let j = 0; j < numberOfShapesToChange; j++) {
-            const shape = shapesToChange[j];
-            if (j + 1 < numberOfShapesToChange) {
-              shape.color = shapesToChange[j + 1].color;
-            } else {
-              shape.color = firstShapeColor;
-            }
-          }
+        return false;
+      };
+      const inLine = (locations) => {
+        const uniqueRows = new Set(locations.map((l) => l.row)).size;
+        const uniqueColumns = new Set(locations.map((l) => l.column)).size;
+        if (uniqueRows !== 1 && uniqueColumns !== 1) {
+          return false;
         }
-        trialConfigurations.push({
-          presentShapes,
-          responseShapes,
-          numberOfShapesWithDifferentColors
-        });
-      }
-      const fixationScene = new Scene();
-      game.addScene(fixationScene);
-      const fixationSceneSquare = new Shape({
-        rect: { size: { width: SQUARE_SIDE_LENGTH, height: SQUARE_SIDE_LENGTH } },
-        fillColor: WebColors.Transparent,
-        strokeColor: WebColors.Gray,
-        lineWidth: 4,
-        position: { x: 200, y: 300 }
-      });
-      fixationScene.addChild(fixationSceneSquare);
-      const plusLabel = new Label({
-        text: "+",
-        fontSize: 32,
-        fontColor: WebColors.Black
-      });
-      fixationSceneSquare.addChild(plusLabel);
-      fixationScene.onAppear(() => {
-        game.addTrialData(
-          "activity_begin_iso8601_timestamp",
-          this.beginIso8601Timestamp
-        );
-        game.addTrialData(
-          "trial_begin_iso8601_timestamp",
-          (/* @__PURE__ */ new Date()).toISOString()
-        );
-        fixationScene.run(
-          Action.sequence([
-            Action.wait({ duration: game.getParameter("fixation_duration_ms") }),
-            Action.custom({
-              callback: () => {
-                game.presentScene(shapePresentationScene);
-              }
-            })
-          ])
+        return true;
+      };
+      let presentLocationsOk = false;
+      let presentLocations;
+      do {
+        presentLocations = RandomDraws.FromGridWithoutReplacement(
+          numberOfShapesShown,
+          rows,
+          columns
         );
-      });
-      const shapePresentationScene = new Scene();
-      game.addScene(shapePresentationScene);
-      const presentationSceneSquare = new Shape({
-        rect: { size: { width: SQUARE_SIDE_LENGTH, height: SQUARE_SIDE_LENGTH } },
-        fillColor: WebColors.Transparent,
-        strokeColor: WebColors.Gray,
-        lineWidth: 4,
-        position: { x: 200, y: 300 }
-      });
-      shapePresentationScene.addChild(presentationSceneSquare);
-      const presentationGrid = new Grid({
-        rows: gridRows,
-        columns: gridColumns,
-        size: { width: SQUARE_SIDE_LENGTH, height: SQUARE_SIDE_LENGTH },
-        position: { x: 200, y: 300 },
-        backgroundColor: WebColors.Transparent,
-        gridLineColor: WebColors.Transparent
-      });
-      shapePresentationScene.addChild(presentationGrid);
-      shapePresentationScene.onAppear(() => {
-        const trialConfiguration = trialConfigurations[game.trialIndex];
-        for (let i = 0; i < trialConfiguration.presentShapes.length; i++) {
-          const presentShape = trialConfiguration.presentShapes[i].shape;
-          presentShape.fillColor = trialConfiguration.presentShapes[i].color;
-          presentShape.position = { x: 0, y: 0 };
-          presentationGrid.addAtCell(
-            presentShape,
-            trialConfiguration.presentShapes[i].location.row,
-            trialConfiguration.presentShapes[i].location.column
-          );
+        if (!inLine(presentLocations) && !onDiagonal(presentLocations)) {
+          presentLocationsOk = true;
+        } else {
+          presentLocationsOk = false;
         }
-        shapePresentationScene.run(
-          Action.sequence([
-            Action.wait({
-              duration: game.getParameter("shapes_presented_duration_ms")
-            }),
-            Action.custom({
-              callback: () => {
-                presentationGrid.removeAllChildren();
-              }
-            }),
-            Action.wait({
-              duration: game.getParameter("shapes_removed_duration_ms")
-            }),
-            Action.custom({
-              callback: () => {
-                presentationGrid.removeAllChildren();
-                game.presentScene(shapeResponseScene);
-              }
-            })
-          ])
+      } while (!presentLocationsOk);
+      for (let j = 0; j < numberOfShapesShown; j++) {
+        const presentShape = {
+          shape: shapeLibrary[shapesToShowIndexes[j]],
+          shapeIndex: shapesToShowIndexes[j],
+          color: shapeColors[shapeColorsIndexes[j]].rgbaColor,
+          colorName: shapeColors[shapeColorsIndexes[j]].colorName,
+          location: presentLocations[j]
+        };
+        presentShapes.push(presentShape);
+      }
+      let responseLocationsOk = false;
+      let responseLocations;
+      do {
+        responseLocations = RandomDraws.FromGridWithoutReplacement(
+          numberOfShapesShown,
+          rows,
+          columns
         );
-      });
-      const shapeResponseScene = new Scene();
-      game.addScene(shapeResponseScene);
-      const responseSceneSquare = new Shape({
-        rect: { size: { width: SQUARE_SIDE_LENGTH, height: SQUARE_SIDE_LENGTH } },
-        fillColor: WebColors.Transparent,
-        strokeColor: WebColors.Gray,
-        lineWidth: 4,
-        position: { x: 200, y: 300 }
-      });
-      shapeResponseScene.addChild(responseSceneSquare);
-      const responseGrid = new Grid({
-        rows: gridRows,
-        columns: gridColumns,
-        size: { width: SQUARE_SIDE_LENGTH, height: SQUARE_SIDE_LENGTH },
-        position: { x: 200, y: 300 },
-        backgroundColor: WebColors.Transparent,
-        gridLineColor: WebColors.Transparent
-      });
-      shapeResponseScene.addChild(responseGrid);
-      shapeResponseScene.onAppear(() => {
-        const trialConfiguration = trialConfigurations[game.trialIndex];
-        for (let i = 0; i < trialConfiguration.responseShapes.length; i++) {
-          const responseShape = trialConfiguration.responseShapes[i].shape;
-          responseShape.fillColor = trialConfiguration.responseShapes[i].color;
-          responseShape.position = { x: 0, y: 0 };
-          responseGrid.addAtCell(
-            responseShape,
-            trialConfiguration.responseShapes[i].location.row,
-            trialConfiguration.responseShapes[i].location.column
-          );
+        if (!inLine(responseLocations) && !onDiagonal(responseLocations)) {
+          responseLocationsOk = true;
+        } else {
+          responseLocationsOk = false;
         }
-        sameButton.isUserInteractionEnabled = true;
-        differentButton.isUserInteractionEnabled = true;
-        Timer.start("rt");
-      });
-      const sameButton = new Button({
-        text: "Same",
-        position: { x: 100, y: 700 },
-        size: { width: 125, height: 50 }
-      });
-      shapeResponseScene.addChild(sameButton);
-      sameButton.onTapDown(() => {
-        sameButton.isUserInteractionEnabled = false;
-        handleSelection(false);
-      });
-      const differentButton = new Button({
-        text: "Different",
-        position: { x: 300, y: 700 },
-        size: { width: 125, height: 50 }
-      });
-      shapeResponseScene.addChild(differentButton);
-      differentButton.onTapDown(() => {
-        differentButton.isUserInteractionEnabled = false;
-        handleSelection(true);
-      });
-      const handleSelection = (differentPressed) => {
-        const rt = Timer.elapsed("rt");
-        Timer.remove("rt");
-        responseGrid.removeAllChildren();
-        game.addTrialData(
-          "trial_end_iso8601_timestamp",
-          (/* @__PURE__ */ new Date()).toISOString()
+      } while (!responseLocationsOk);
+      for (let j = 0; j < numberOfShapesShown; j++) {
+        const responseShape = {
+          shape: presentShapes[j].shape,
+          shapeIndex: shapesToShowIndexes[j],
+          color: presentShapes[j].color,
+          colorName: shapeColors[shapeColorsIndexes[j]].colorName,
+          location: responseLocations[j]
+        };
+        responseShapes.push(responseShape);
+      }
+      let numberOfShapesWithDifferentColors = 0;
+      const differentColorTrial = differentColorsTrialIndexes.includes(i);
+      if (differentColorTrial) {
+        const numberOfShapesToChange = RandomDraws.SingleFromRange(
+          2,
+          numberOfShapesShown
         );
-        const trialConfiguration = trialConfigurations[game.trialIndex];
-        game.addTrialData("response_time_duration_ms", rt);
-        game.addTrialData(
-          "number_of_different_shapes",
-          trialConfiguration.numberOfShapesWithDifferentColors
+        const shapesToChangeIndexes = RandomDraws.FromRangeWithoutReplacement(
+          numberOfShapesToChange,
+          0,
+          numberOfShapesShown - 1
         );
-        game.addTrialData(
-          "user_response",
-          differentPressed ? "different" : "same"
+        const shapesToChange = shapesToChangeIndexes.map(
+          (index) => responseShapes[index]
         );
-        const correctResponse = trialConfiguration.numberOfShapesWithDifferentColors === 0 && !differentPressed || trialConfiguration.numberOfShapesWithDifferentColors > 0 && differentPressed;
-        game.addTrialData("user_response_correct", correctResponse);
-        const presentShapes = trialConfiguration.presentShapes.map((p) => {
-          return {
-            shape_index: p.shapeIndex,
-            color_name: p.colorName,
-            rgba_color: p.color,
-            location: p.location
-          };
-        });
-        game.addTrialData("present_shapes", presentShapes);
-        game.addTrialData("quit_button_pressed", false);
-        const responseShapes = trialConfiguration.responseShapes.map((p) => {
-          return {
-            shape_index: p.shapeIndex,
-            color_name: p.colorName,
-            rgba_color: p.color,
-            location: p.location
-          };
-        });
-        game.addTrialData("response_shapes", responseShapes);
-        game.addTrialData("trial_index", game.trialIndex);
-        game.trialComplete();
-        if (game.trialIndex < numberOfTrials) {
-          game.presentScene(fixationScene);
-        } else {
-          game.presentScene(
-            doneScene,
-            Transition.slide({
-              direction: TransitionDirection.Left,
-              duration: 500,
-              easing: Easings.sinusoidalInOut
-            })
-          );
+        numberOfShapesWithDifferentColors = shapesToChange.length;
+        const firstShapeColor = shapesToChange[0].color;
+        for (let j = 0; j < numberOfShapesToChange; j++) {
+          const shape = shapesToChange[j];
+          if (j + 1 < numberOfShapesToChange) {
+            shape.color = shapesToChange[j + 1].color;
+          } else {
+            shape.color = firstShapeColor;
+          }
         }
-      };
-      const doneScene = new Scene();
-      game.addScene(doneScene);
-      const doneSceneText = new Label({
-        text: game.getParameter("trials_complete_scene_text"),
-        position: { x: 200, y: 400 }
-      });
-      doneScene.addChild(doneSceneText);
-      const okButton = new Button({
-        text: game.getParameter("trials_complete_scene_button_text"),
-        position: { x: 200, y: 650 }
+      }
+      trialConfigurations.push({
+        presentShapes,
+        responseShapes,
+        numberOfShapesWithDifferentColors
       });
-      okButton.isUserInteractionEnabled = true;
-      okButton.onTapDown(() => {
-        okButton.isUserInteractionEnabled = false;
-        doneScene.removeAllChildren();
-        game.end();
+    }
+    const fixationScene = new Scene();
+    game.addScene(fixationScene);
+    const fixationSceneSquare = new Shape({
+      rect: { size: { width: SQUARE_SIDE_LENGTH, height: SQUARE_SIDE_LENGTH } },
+      fillColor: WebColors.Transparent,
+      strokeColor: WebColors.Gray,
+      lineWidth: 4,
+      position: { x: 200, y: 300 }
+    });
+    fixationScene.addChild(fixationSceneSquare);
+    const plusLabel = new Label({
+      text: "+",
+      fontSize: 32,
+      fontColor: WebColors.Black
+    });
+    fixationSceneSquare.addChild(plusLabel);
+    fixationScene.onAppear(() => {
+      game.addTrialData(
+        "activity_begin_iso8601_timestamp",
+        this.beginIso8601Timestamp
+      );
+      game.addTrialData(
+        "trial_begin_iso8601_timestamp",
+        (/* @__PURE__ */ new Date()).toISOString()
+      );
+      fixationScene.run(
+        Action.sequence([
+          Action.wait({ duration: game.getParameter("fixation_duration_ms") }),
+          Action.custom({
+            callback: () => {
+              game.presentScene(shapePresentationScene);
+            }
+          })
+        ])
+      );
+    });
+    const shapePresentationScene = new Scene();
+    game.addScene(shapePresentationScene);
+    const presentationSceneSquare = new Shape({
+      rect: { size: { width: SQUARE_SIDE_LENGTH, height: SQUARE_SIDE_LENGTH } },
+      fillColor: WebColors.Transparent,
+      strokeColor: WebColors.Gray,
+      lineWidth: 4,
+      position: { x: 200, y: 300 }
+    });
+    shapePresentationScene.addChild(presentationSceneSquare);
+    const presentationGrid = new Grid({
+      rows: gridRows,
+      columns: gridColumns,
+      size: { width: SQUARE_SIDE_LENGTH, height: SQUARE_SIDE_LENGTH },
+      position: { x: 200, y: 300 },
+      backgroundColor: WebColors.Transparent,
+      gridLineColor: WebColors.Transparent
+    });
+    shapePresentationScene.addChild(presentationGrid);
+    shapePresentationScene.onAppear(() => {
+      const trialConfiguration = trialConfigurations[game.trialIndex];
+      for (let i = 0; i < trialConfiguration.presentShapes.length; i++) {
+        const presentShape = trialConfiguration.presentShapes[i].shape;
+        presentShape.fillColor = trialConfiguration.presentShapes[i].color;
+        presentShape.position = { x: 0, y: 0 };
+        presentationGrid.addAtCell(
+          presentShape,
+          trialConfiguration.presentShapes[i].location.row,
+          trialConfiguration.presentShapes[i].location.column
+        );
+      }
+      shapePresentationScene.run(
+        Action.sequence([
+          Action.wait({
+            duration: game.getParameter("shapes_presented_duration_ms")
+          }),
+          Action.custom({
+            callback: () => {
+              presentationGrid.removeAllChildren();
+            }
+          }),
+          Action.wait({
+            duration: game.getParameter("shapes_removed_duration_ms")
+          }),
+          Action.custom({
+            callback: () => {
+              presentationGrid.removeAllChildren();
+              game.presentScene(shapeResponseScene);
+            }
+          })
+        ])
+      );
+    });
+    const shapeResponseScene = new Scene();
+    game.addScene(shapeResponseScene);
+    const responseSceneSquare = new Shape({
+      rect: { size: { width: SQUARE_SIDE_LENGTH, height: SQUARE_SIDE_LENGTH } },
+      fillColor: WebColors.Transparent,
+      strokeColor: WebColors.Gray,
+      lineWidth: 4,
+      position: { x: 200, y: 300 }
+    });
+    shapeResponseScene.addChild(responseSceneSquare);
+    const responseGrid = new Grid({
+      rows: gridRows,
+      columns: gridColumns,
+      size: { width: SQUARE_SIDE_LENGTH, height: SQUARE_SIDE_LENGTH },
+      position: { x: 200, y: 300 },
+      backgroundColor: WebColors.Transparent,
+      gridLineColor: WebColors.Transparent
+    });
+    shapeResponseScene.addChild(responseGrid);
+    shapeResponseScene.onAppear(() => {
+      const trialConfiguration = trialConfigurations[game.trialIndex];
+      for (let i = 0; i < trialConfiguration.responseShapes.length; i++) {
+        const responseShape = trialConfiguration.responseShapes[i].shape;
+        responseShape.fillColor = trialConfiguration.responseShapes[i].color;
+        responseShape.position = { x: 0, y: 0 };
+        responseGrid.addAtCell(
+          responseShape,
+          trialConfiguration.responseShapes[i].location.row,
+          trialConfiguration.responseShapes[i].location.column
+        );
+      }
+      sameButton.isUserInteractionEnabled = true;
+      differentButton.isUserInteractionEnabled = true;
+      Timer.start("rt");
+    });
+    const sameButton = new Button({
+      text: "Same",
+      position: { x: 100, y: 700 },
+      size: { width: 125, height: 50 }
+    });
+    shapeResponseScene.addChild(sameButton);
+    sameButton.onTapDown(() => {
+      sameButton.isUserInteractionEnabled = false;
+      handleSelection(false);
+    });
+    const differentButton = new Button({
+      text: "Different",
+      position: { x: 300, y: 700 },
+      size: { width: 125, height: 50 }
+    });
+    shapeResponseScene.addChild(differentButton);
+    differentButton.onTapDown(() => {
+      differentButton.isUserInteractionEnabled = false;
+      handleSelection(true);
+    });
+    const handleSelection = (differentPressed) => {
+      const rt = Timer.elapsed("rt");
+      Timer.remove("rt");
+      responseGrid.removeAllChildren();
+      game.addTrialData(
+        "trial_end_iso8601_timestamp",
+        (/* @__PURE__ */ new Date()).toISOString()
+      );
+      const trialConfiguration = trialConfigurations[game.trialIndex];
+      game.addTrialData("response_time_duration_ms", rt);
+      game.addTrialData(
+        "number_of_different_shapes",
+        trialConfiguration.numberOfShapesWithDifferentColors
+      );
+      game.addTrialData(
+        "user_response",
+        differentPressed ? "different" : "same"
+      );
+      const correctResponse = trialConfiguration.numberOfShapesWithDifferentColors === 0 && !differentPressed || trialConfiguration.numberOfShapesWithDifferentColors > 0 && differentPressed;
+      game.addTrialData("user_response_correct", correctResponse);
+      const presentShapes = trialConfiguration.presentShapes.map((p) => {
+        return {
+          shape_index: p.shapeIndex,
+          color_name: p.colorName,
+          rgba_color: p.color,
+          location: p.location
+        };
       });
-      doneScene.addChild(okButton);
-      doneScene.onSetup(() => {
-        game.removeAllFreeEntities();
+      game.addTrialData("present_shapes", presentShapes);
+      game.addTrialData("quit_button_pressed", false);
+      const responseShapes = trialConfiguration.responseShapes.map((p) => {
+        return {
+          shape_index: p.shapeIndex,
+          color_name: p.colorName,
+          rgba_color: p.color,
+          location: p.location
+        };
       });
+      game.addTrialData("response_shapes", responseShapes);
+      game.addTrialData("trial_index", game.trialIndex);
+      game.trialComplete();
+      if (game.trialIndex < numberOfTrials) {
+        game.presentScene(fixationScene);
+      } else {
+        game.presentScene(
+          doneScene,
+          Transition.slide({
+            direction: TransitionDirection.Left,
+            duration: 500,
+            easing: Easings.sinusoidalInOut
+          })
+        );
+      }
+    };
+    const doneScene = new Scene();
+    game.addScene(doneScene);
+    const doneSceneText = new Label({
+      text: game.getParameter("trials_complete_scene_text"),
+      position: { x: 200, y: 400 }
+    });
+    doneScene.addChild(doneSceneText);
+    const okButton = new Button({
+      text: game.getParameter("trials_complete_scene_button_text"),
+      position: { x: 200, y: 650 }
+    });
+    okButton.isUserInteractionEnabled = true;
+    okButton.onTapDown(() => {
+      okButton.isUserInteractionEnabled = false;
+      doneScene.removeAllChildren();
+      game.end();
+    });
+    doneScene.addChild(okButton);
+    doneScene.onSetup(() => {
+      game.removeAllFreeEntities();
     });
   }
-  makeShapes(svgHeight, size) {
+  makeShapes(svgHeight) {
     const shape01 = new Shape({
       path: {
-        svgPathString: shapeSvgPathStrings[0],
+        pathString: shapePathStrings[0],
         height: svgHeight
       },
-      size,
       lineWidth: 0
     });
     const shape02 = new Shape({
       path: {
-        svgPathString: shapeSvgPathStrings[1],
+        pathString: shapePathStrings[1],
         height: svgHeight
       },
-      size,
       lineWidth: 0
     });
     const shape03 = new Shape({
       path: {
-        svgPathString: shapeSvgPathStrings[2],
+        pathString: shapePathStrings[2],
         height: svgHeight * 0.8
       },
-      size,
       lineWidth: 0
     });
     const shape04 = new Shape({
       path: {
-        svgPathString: shapeSvgPathStrings[3],
+        pathString: shapePathStrings[3],
         height: svgHeight
       },
-      size,
       lineWidth: 0
     });
     const shape05 = new Shape({
       path: {
-        svgPathString: shapeSvgPathStrings[4],
+        pathString: shapePathStrings[4],
         height: svgHeight * 0.8
       },
-      size,
       lineWidth: 0
     });
     const shape06 = new Shape({
       path: {
-        svgPathString: shapeSvgPathStrings[5],
+        pathString: shapePathStrings[5],
         height: svgHeight
       },
-      size,
       lineWidth: 0
     });
     const shape07 = new Shape({
       path: {
-        svgPathString: shapeSvgPathStrings[6],
+        pathString: shapePathStrings[6],
         height: svgHeight
       },
-      size,
       lineWidth: 0
     });
     const shape08 = new Shape({
       path: {
-        svgPathString: shapeSvgPathStrings[7],
+        pathString: shapePathStrings[7],
         height: svgHeight
       },
-      size,
       lineWidth: 0
     });
     const shapes = [
@@ -816,7 +782,7 @@ class ColorShapes extends Game {
     return shapes;
   }
 }
-const shapeSvgPathStrings = [
+const shapePathStrings = [
   "M0 89.94v-2L131.95 0h2v88.7c2.34 1.6 4.47 3.11 6.65 4.55 42.77 28.22 85.54 56.42 128.3 84.63v2c-44.65 29.65-89.3 59.29-133.95 88.94h-1v-90.84C89.44 148.72 44.72 119.33 0 89.94Z",
   "M162 188c-.33 27-.67 54-1 81-26.87-26.18-53.74-52.35-80-77.94V269H0C0 180.83 0 92.67.04 4.5.04 3 .67 1.5 1 0c24.64 29.1 49.15 58.31 73.96 87.26 28.88 33.7 58.01 67.17 87.04 100.74Z",
   "M3 148.86V61.12C41.76 40.75 80.52 20.37 119.28 0h2.91c21.32 20.7 42.64 41.4 63.96 62.11v89.71c-38.44 20.04-76.88 40.09-115.31 60.13h-2.91L3.01 148.86Z",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m2c2kit/assessment-color-shapes",
-  "version": "0.8.10",
+  "version": "0.8.12",
   "description": "A visual array change detection task, measuring intra-item feature binding, where participants determine if shapes change color across two sequential presentations of shape stimuli",
   "scripts": {
     "build": "npm run clean && tsc && rollup -c",
@@ -30,17 +30,17 @@
   },
   "homepage": "https://m2c2-project.github.io/m2c2kit",
   "dependencies": {
-    "@m2c2kit/addons": "^0.3.3",
-    "@m2c2kit/core": "^0.3.6"
+    "@m2c2kit/addons": "^0.3.11",
+    "@m2c2kit/core": "^0.3.14"
   },
   "devDependencies": {
-    "@rollup/plugin-node-resolve": "15.1.0",
-    "@rollup/plugin-replace": "5.0.2",
-    "rimraf": "5.0.1",
-    "rollup": "3.25.3",
-    "rollup-plugin-copy": "3.4.0",
-    "rollup-plugin-esbuild": "5.0.0",
-    "typescript": "5.1.6"
+    "@rollup/plugin-node-resolve": "15.2.3",
+    "@rollup/plugin-replace": "5.0.5",
+    "rimraf": "5.0.5",
+    "rollup": "4.8.0",
+    "rollup-plugin-copy": "3.5.0",
+    "rollup-plugin-esbuild": "6.1.0",
+    "typescript": "5.3.3"
   },
   "engines": {
     "node": ">=18"