@m2c2kit/assessment-color-shapes 0.8.7 → 0.8.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +22 -0
- package/dist/index.js +19 -10
- package/package.json +2 -2
package/README.md
ADDED
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
# @m2c2kit/assessment-color-shapes
|
|
2
|
+
|
|
3
|
+
[](https://opensource.org/licenses/MIT)
|
|
4
|
+
[](https://github.com/m2c2-project/m2c2kit/actions/workflows/ci.yml)
|
|
5
|
+
[](https://www.npmjs.com/package/@m2c2kit/assessment-color-shapes)
|
|
6
|
+
|
|
7
|
+
This package contains the m2c2kit Color Shapes assessment, which is a visual array change detection task, measuring intra-item feature binding. [Live Demo](https://m2c2-project.github.io/m2c2kit/docs/examples/color-shapes/)
|
|
8
|
+
|
|
9
|
+
**m2c2kit** is a library for cross-platform cognitive assessments. Features:
|
|
10
|
+
|
|
11
|
+
- **Mobile first**. Optimized for touch and mobile devices while also usable on desktops.
|
|
12
|
+
- **Portable**. Use on browsers, compile within native apps using web views, or embed in products like Qualtrics. A shared assessment codebase reduces development time and promotes experiment standardization across devices and services.
|
|
13
|
+
- **Rapid iteration**. Quickly develop and test new assessments with the JavaScript-based library and deploy them in studies.
|
|
14
|
+
|
|
15
|
+
## Resources
|
|
16
|
+
|
|
17
|
+
---
|
|
18
|
+
|
|
19
|
+
- [Website](https://m2c2-project.github.io/m2c2kit/)
|
|
20
|
+
- [Live Examples](https://m2c2-project.github.io/m2c2kit/docs/category/examples)
|
|
21
|
+
- [Getting Started](https://m2c2-project.github.io/m2c2kit/docs/getting-started)
|
|
22
|
+
- [Interactive Tutorial](https://m2c2-project.github.io/m2c2kit/docs/tutorial-fundamentals/fundamentals)
|
package/dist/index.js
CHANGED
|
@@ -133,6 +133,11 @@ class ColorShapes extends Game {
|
|
|
133
133
|
format: "date-time",
|
|
134
134
|
description: "ISO 8601 timestamp at the beginning of the trial. Null if trial was skipped."
|
|
135
135
|
},
|
|
136
|
+
trial_end_iso8601_timestamp: {
|
|
137
|
+
type: ["string", "null"],
|
|
138
|
+
format: "date-time",
|
|
139
|
+
description: "ISO 8601 timestamp at the end of the trial (when user presses 'Same' or 'Different'). Null if trial was skipped."
|
|
140
|
+
},
|
|
136
141
|
trial_index: {
|
|
137
142
|
type: ["integer", "null"],
|
|
138
143
|
description: "Index of the trial within this assessment, 0-based."
|
|
@@ -238,7 +243,7 @@ class ColorShapes extends Game {
|
|
|
238
243
|
const options = {
|
|
239
244
|
name: "Color Shapes",
|
|
240
245
|
id: "color-shapes",
|
|
241
|
-
version: "0.8.
|
|
246
|
+
version: "0.8.9 (b15b374e)",
|
|
242
247
|
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.",
|
|
243
248
|
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.`,
|
|
244
249
|
showFps: defaultParameters.show_fps.default,
|
|
@@ -660,6 +665,10 @@ class ColorShapes extends Game {
|
|
|
660
665
|
const rt = Timer.elapsed("rt");
|
|
661
666
|
Timer.remove("rt");
|
|
662
667
|
responseGrid.removeAllChildren();
|
|
668
|
+
game.addTrialData(
|
|
669
|
+
"trial_end_iso8601_timestamp",
|
|
670
|
+
(/* @__PURE__ */ new Date()).toISOString()
|
|
671
|
+
);
|
|
663
672
|
const trialConfiguration = trialConfigurations[game.trialIndex];
|
|
664
673
|
game.addTrialData("response_time_duration_ms", rt);
|
|
665
674
|
game.addTrialData(
|
|
@@ -732,7 +741,7 @@ class ColorShapes extends Game {
|
|
|
732
741
|
makeShapes(svgHeight, size) {
|
|
733
742
|
const shape01 = new Shape({
|
|
734
743
|
path: {
|
|
735
|
-
|
|
744
|
+
svgPathString: shapeSvgPathStrings[0],
|
|
736
745
|
height: svgHeight
|
|
737
746
|
},
|
|
738
747
|
size,
|
|
@@ -740,7 +749,7 @@ class ColorShapes extends Game {
|
|
|
740
749
|
});
|
|
741
750
|
const shape02 = new Shape({
|
|
742
751
|
path: {
|
|
743
|
-
|
|
752
|
+
svgPathString: shapeSvgPathStrings[1],
|
|
744
753
|
height: svgHeight
|
|
745
754
|
},
|
|
746
755
|
size,
|
|
@@ -748,7 +757,7 @@ class ColorShapes extends Game {
|
|
|
748
757
|
});
|
|
749
758
|
const shape03 = new Shape({
|
|
750
759
|
path: {
|
|
751
|
-
|
|
760
|
+
svgPathString: shapeSvgPathStrings[2],
|
|
752
761
|
height: svgHeight * 0.8
|
|
753
762
|
},
|
|
754
763
|
size,
|
|
@@ -756,7 +765,7 @@ class ColorShapes extends Game {
|
|
|
756
765
|
});
|
|
757
766
|
const shape04 = new Shape({
|
|
758
767
|
path: {
|
|
759
|
-
|
|
768
|
+
svgPathString: shapeSvgPathStrings[3],
|
|
760
769
|
height: svgHeight
|
|
761
770
|
},
|
|
762
771
|
size,
|
|
@@ -764,7 +773,7 @@ class ColorShapes extends Game {
|
|
|
764
773
|
});
|
|
765
774
|
const shape05 = new Shape({
|
|
766
775
|
path: {
|
|
767
|
-
|
|
776
|
+
svgPathString: shapeSvgPathStrings[4],
|
|
768
777
|
height: svgHeight * 0.8
|
|
769
778
|
},
|
|
770
779
|
size,
|
|
@@ -772,7 +781,7 @@ class ColorShapes extends Game {
|
|
|
772
781
|
});
|
|
773
782
|
const shape06 = new Shape({
|
|
774
783
|
path: {
|
|
775
|
-
|
|
784
|
+
svgPathString: shapeSvgPathStrings[5],
|
|
776
785
|
height: svgHeight
|
|
777
786
|
},
|
|
778
787
|
size,
|
|
@@ -780,7 +789,7 @@ class ColorShapes extends Game {
|
|
|
780
789
|
});
|
|
781
790
|
const shape07 = new Shape({
|
|
782
791
|
path: {
|
|
783
|
-
|
|
792
|
+
svgPathString: shapeSvgPathStrings[6],
|
|
784
793
|
height: svgHeight
|
|
785
794
|
},
|
|
786
795
|
size,
|
|
@@ -788,7 +797,7 @@ class ColorShapes extends Game {
|
|
|
788
797
|
});
|
|
789
798
|
const shape08 = new Shape({
|
|
790
799
|
path: {
|
|
791
|
-
|
|
800
|
+
svgPathString: shapeSvgPathStrings[7],
|
|
792
801
|
height: svgHeight
|
|
793
802
|
},
|
|
794
803
|
size,
|
|
@@ -807,7 +816,7 @@ class ColorShapes extends Game {
|
|
|
807
816
|
return shapes;
|
|
808
817
|
}
|
|
809
818
|
}
|
|
810
|
-
const
|
|
819
|
+
const shapeSvgPathStrings = [
|
|
811
820
|
"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",
|
|
812
821
|
"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",
|
|
813
822
|
"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
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@m2c2kit/assessment-color-shapes",
|
|
3
|
-
"version": "0.8.
|
|
3
|
+
"version": "0.8.9",
|
|
4
4
|
"scripts": {
|
|
5
5
|
"build": "npm run clean && tsc && rollup -c",
|
|
6
6
|
"clean": "rimraf build build-nobundler dist .rollup.cache tsconfig.tsbuildinfo"
|
|
@@ -25,7 +25,7 @@
|
|
|
25
25
|
"@rollup/plugin-node-resolve": "15.1.0",
|
|
26
26
|
"@rollup/plugin-replace": "5.0.2",
|
|
27
27
|
"rimraf": "5.0.1",
|
|
28
|
-
"rollup": "3.
|
|
28
|
+
"rollup": "3.25.1",
|
|
29
29
|
"rollup-plugin-copy": "3.4.0",
|
|
30
30
|
"rollup-plugin-esbuild": "5.0.0",
|
|
31
31
|
"typescript": "5.1.3"
|