@m2c2kit/assessment-color-shapes 0.8.20 → 0.8.21

package/dist/index.js

@@ -282,8 +282,8 @@ class ColorShapes extends Game {
        */
       id: "color-shapes",
       publishUuid: "394cb010-2ccf-4a87-9d23-cda7fb07a960",
-      version: "0.8.20 (6bd16a4e)",
-      moduleMetadata: { "name": "@m2c2kit/assessment-color-shapes", "version": "0.8.20", "dependencies": { "@m2c2kit/addons": "0.3.21", "@m2c2kit/core": "0.3.22" } },
+      version: "0.8.21 (b4419e1c)",
+      moduleMetadata: { "name": "@m2c2kit/assessment-color-shapes", "version": "0.8.21", "dependencies": { "@m2c2kit/addons": "0.3.22", "@m2c2kit/core": "0.3.23" } },
       translation,
       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.`,

package/dist/index.min.js

@@ -1 +1 @@
-import{Game as ce,Sprite as pe,Scene as y,WebColors as l,Transition as j,RandomDraws as g,Shape as p,Label as te,Action as h,Timer as H,TransitionDirection as he,Easings as de}from"@m2c2kit/core";import{LocalePicker as Te,Instructions as V,CountdownScene as me,Grid as oe,Button as K}from"@m2c2kit/addons";class ue extends ce{constructor(){const e={fixation_duration_ms:{default:500,description:"How long fixation scene is shown, milliseconds.",type:"number"},shape_colors:{type:"array",description:"Array of colors for shapes.",items:{type:"object",properties:{colorName:{type:"string",description:"Human-friendly name of color."},rgbaColor:{type:"array",description:"Color as array, [r,g,b,a].",items:{type:"number"}}}},default:[{colorName:"black",rgbaColor:[0,0,0,1]},{colorName:"green",rgbaColor:[0,158,115,1]},{colorName:"yellow",rgbaColor:[240,228,66,1]},{colorName:"blue",rgbaColor:[0,114,178,1]},{colorName:"orange",rgbaColor:[213,94,0,1]},{colorName:"pink",rgbaColor:[204,121,167,1]}]},number_of_shapes_shown:{default:3,description:"How many shapes to show on the grid at one time.",type:"integer"},number_of_shapes_changing_color:{default:2,description:"If a different color trial, how many shapes should change color (minimum is 2, because changes are swaps with other shapes).",type:"integer"},shapes_presented_duration_ms:{default:2e3,description:"How long the shapes are shown, milliseconds.",type:"number"},shapes_removed_duration_ms:{default:1e3,description:"How long to show a blank square after shapes are removed, milliseconds.",type:"number"},cells_per_side:{default:3,description:"How many cell positions for each side of the square grid (e.g., 3 is a 3x3 grid; 4 is a 4x4 grid).",type:"integer"},number_of_different_colors_trials:{default:2,type:"integer",description:"Number of trials where the shapes have different colors."},number_of_trials:{default:4,description:"How many trials to run.",type:"integer"},show_trials_complete_scene:{default:!0,type:"boolean",description:"After the final trial, should a completion scene be shown? Otherwise, the game will immediately end."},instruction_type:{default:"long",description:"Type of instructions to show, 'short' or 'long'.",type:"string",enum:["short","long"]},instructions:{default:null,type:["object","null"],description:"When non-null, an InstructionsOptions object that will completely override the built-in instructions."},show_quit_button:{type:"boolean",default:!0,description:"Should the activity quit button be shown?"},show_fps:{type:"boolean",default:!1,description:"Should the FPS be shown?"},show_locale_picker:{type:"boolean",default:!1,description:"Should the icon that allows the participant to switch the locale be shown?"}},E={activity_begin_iso8601_timestamp:{type:"string",format:"date-time",description:"ISO 8601 timestamp at the beginning of the game activity."},trial_begin_iso8601_timestamp:{type:["string","null"],format:"date-time",description:"ISO 8601 timestamp at the beginning of the trial. Null if trial was skipped."},trial_end_iso8601_timestamp:{type:["string","null"],format:"date-time",description:"ISO 8601 timestamp at the end of the trial (when user presses 'Same' or 'Different'). Null if trial was skipped."},trial_index:{type:["integer","null"],description:"Index of the trial within this assessment, 0-based."},present_shapes:{description:"Configuration of shapes shown to the user in the presentation phase. Null if trial was skipped.",type:["array","null"],items:{type:"object",properties:{shape_index:{type:"integer",description:"Index of the shape within the library of shapes, 0-based"},color_name:{type:"string",description:"Human-friendly name of color."},rgba_color:{type:"array",description:"Color as array, [r,g,b,a].",items:{type:"number"}},location:{type:"object",description:"Location of shape.",properties:{row:{type:"number",description:"Row of the shape, 0-based."},column:{type:"number",description:"Column of the shape, 0-based."}}}}}},response_shapes:{description:"Configuration of shapes shown to the user in the response phase. Null if trial was skipped.",type:["array","null"],items:{type:"object",properties:{shape_index:{type:"integer",description:"Index of the shape within the library of shapes, 0-based"},color_name:{type:"string",description:"Human-friendly name of color."},rgba_color:{type:"array",description:"Color as array, [r,g,b,a].",items:{type:"number"}},location:{type:"object",description:"Location of shape.",properties:{row:{type:"number",description:"Row of the shape, 0-based."},column:{type:"number",description:"Column of the shape, 0-based."}}}}}},response_time_duration_ms:{type:["number","null"],description:"Milliseconds from when the response configuration of shapes is shown until the user taps a response. Null if trial was skipped."},user_response:{type:["string","null"],enum:["same","different"],description:"User's response to whether the shapes are same colors or different."},user_response_correct:{type:["boolean","null"],description:"Was the user's response correct?"},quit_button_pressed:{type:"boolean",description:"Was the quit button pressed?"}},i={name:"Color Shapes",id:"color-shapes",publishUuid:"394cb010-2ccf-4a87-9d23-cda7fb07a960",version:"0.8.20 (6bd16a4e)",moduleMetadata:{name:"@m2c2kit/assessment-color-shapes",version:"0.8.20",dependencies:{"@m2c2kit/addons":"0.3.21","@m2c2kit/core":"0.3.22"}},translation:{configuration:{baseLocale:"en-US"},"en-US":{localeName:"English",INSTRUCTIONS_TITLE:"Color Shapes",SHORT_INSTRUCTIONS_TEXT_PAGE_1:"Try to remember the color of 3 shapes, because they will soon disappear. When the shapes reappear, answer whether they have the SAME or DIFFERENT colors as they had before",INSTRUCTIONS_TEXT_PAGE_1:"Try to remember the color of 3 shapes, because they will soon disappear.",INSTRUCTIONS_TEXT_PAGE_2:"Next you will see the same shapes reappear.",INSTRUCTIONS_TEXT_PAGE_3:"Answer whether the shapes have the SAME or DIFFERENT colors as they had before.",START_BUTTON_TEXT:"START",NEXT_BUTTON_TEXT:"Next",BACK_BUTTON_TEXT:"Back",GET_READY_COUNTDOWN_TEXT:"GET READY!",SAME_BUTTON_TEXT:"Same",DIFFERENT_BUTTON_TEXT:"Different",TRIALS_COMPLETE_SCENE_TEXT:"This activity is complete.",TRIALS_COMPLETE_SCENE_BUTTON_TEXT:"OK"},"es-MX":{localeName:"Espa\xF1ol",INSTRUCTIONS_TITLE:"Formas de Color",INSTRUCTIONS_TEXT_PAGE_1:"Intenta recordar el color de las 3 formas, porque pronto desaparecer\xE1n.",INSTRUCTIONS_TEXT_PAGE_2:"Luego ver\xE1s reaparecer las mismas formas.",INSTRUCTIONS_TEXT_PAGE_3:"Responde si las formas tienen el MISMO o DIFERENTE color que antes.",START_BUTTON_TEXT:"COMENZAR",NEXT_BUTTON_TEXT:"Siguiente",BACK_BUTTON_TEXT:"Atr\xE1s",GET_READY_COUNTDOWN_TEXT:"PREP\xC1RESE",SAME_BUTTON_TEXT:"Mismo",DIFFERENT_BUTTON_TEXT:"Diferente",TRIALS_COMPLETE_SCENE_TEXT:"Esta actividad est\xE1 completa.",TRIALS_COMPLETE_SCENE_BUTTON_TEXT:"OK"},"de-DE":{localeName:"Deutsch",INSTRUCTIONS_TITLE:"Farb-Formen",INSTRUCTIONS_TEXT_PAGE_1:"Oben und unten sehen Sie Symbolpaare.",INSTRUCTIONS_TEXT_PAGE_2:"Ihre Aufgabe wird es sein, auf dasjenige untere Paar zu tippen, welches mit einem der obigen Paare exakt \xFCbereinstimmt.",INSTRUCTIONS_TEXT_PAGE_3:"Versuchen Sie bitte, so schnell und korrekt wie m\xF6glich zu sein.",START_BUTTON_TEXT:"START",NEXT_BUTTON_TEXT:"Weiter",BACK_BUTTON_TEXT:"Vorherige",GET_READY_COUNTDOWN_TEXT:"BEREIT MACHEN",SAME_BUTTON_TEXT:"Gleich",DIFFERENT_BUTTON_TEXT:"Unterschiedlich",TRIALS_COMPLETE_SCENE_TEXT:"Die Aufgabe ist beendet.",TRIALS_COMPLETE_SCENE_BUTTON_TEXT:"OK"}},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:e.show_fps.default,width:400,height:800,trialSchema:E,parameters:e,fonts:[{fontName:"roboto",url:"fonts/roboto/Roboto-Regular.ttf"}],images:[{imageName:"instructions-1",height:256,width:256,url:"images/cs-instructions-1.png"},{imageName:"instructions-2",height:256,width:256,url:"images/cs-instructions-2.png"},{imageName:"instructions-3",height:350,width:300,url:"images/cs-instructions-3.png",localize:!0},{imageName:"circle-x",height:32,width:32,url:"images/circle-x.svg"}]};super(i)}async initialize(){await super.initialize();const e=this,E=96,a=350,i=e.getParameter("number_of_shapes_shown"),I=this.makeShapes(E);if(e.getParameter("show_quit_button")){const n=new pe({imageName:"circle-x",position:{x:380,y:20},isUserInteractionEnabled:!0});e.addFreeNode(n),n.onTapDown(s=>{e.removeAllFreeNodes(),s.handled=!0;const r=new y;e.addScene(r),e.presentScene(r),e.addTrialData("quit_button_pressed",!0),e.trialComplete(),e.cancel()})}let x;e.getParameter("show_locale_picker")&&(x=new Te,e.addFreeNode(x));let T;const O=e.getParameter("instructions");if(O)T=V.create(O);else switch(e.getParameter("instruction_type")){case"short":{T=V.create({instructionScenes:[{title:"INSTRUCTIONS_TITLE",text:"SHORT_INSTRUCTIONS_TEXT_PAGE_1",imageName:"instructions-1",imageAboveText:!1,imageMarginTop:32,textFontSize:24,titleFontSize:30,textVerticalBias:.2,nextButtonText:"START_BUTTON_TEXT",nextButtonBackgroundColor:l.Green,nextSceneTransition:j.none()}]});break}case"long":{T=V.create({instructionScenes:[{title:"INSTRUCTIONS_TITLE",text:"INSTRUCTIONS_TEXT_PAGE_1",imageName:"instructions-1",imageAboveText:!1,imageMarginTop:32,textFontSize:24,titleFontSize:30,textVerticalBias:.2,nextButtonText:"NEXT_BUTTON_TEXT",backButtonText:"BACK_BUTTON_TEXT"},{title:"INSTRUCTIONS_TITLE",text:"INSTRUCTIONS_TEXT_PAGE_2",imageName:"instructions-2",imageAboveText:!1,imageMarginTop:32,textFontSize:24,titleFontSize:30,textVerticalBias:.2,nextButtonText:"NEXT_BUTTON_TEXT",backButtonText:"BACK_BUTTON_TEXT"},{title:"INSTRUCTIONS_TITLE",text:"INSTRUCTIONS_TEXT_PAGE_3",imageName:"instructions-3",imageAboveText:!1,imageMarginTop:32,textFontSize:24,titleFontSize:30,textVerticalBias:.2,nextButtonText:"START_BUTTON_TEXT",nextButtonBackgroundColor:l.Green,backButtonText:"BACK_BUTTON_TEXT"}]});break}default:throw new Error("invalid value for instruction_type")}T[0].onAppear(()=>{e.addTrialData("activity_begin_iso8601_timestamp",this.beginIso8601Timestamp)}),e.addScenes(T);const v=new me({milliseconds:3e3,text:"GET_READY_COUNTDOWN_TEXT",zeroDwellMilliseconds:1e3,transition:j.none()});e.addScene(v);const F=e.getParameter("cells_per_side"),Z=e.getParameter("cells_per_side"),G=e.getParameter("number_of_trials"),A=e.getParameter("shape_colors"),R=[],M=e.getParameter("cells_per_side"),Y=M,ne=e.getParameter("number_of_different_colors_trials"),se=g.FromRangeWithoutReplacement(ne,0,G-1);for(let n=0;n<G;n++){const s=new Array,r=new Array,b=g.FromRangeWithoutReplacement(i,0,I.length-1),N=g.FromRangeWithoutReplacement(i,0,A.length-1),P=o=>!!(o.map(t=>t.row===0&&t.column===0).some(t=>t===!0)&&o.map(t=>t.row===1&&t.column===1).some(t=>t===!0)&&o.map(t=>t.row===2&&t.column===2).some(t=>t===!0)||o.map(t=>t.row===2&&t.column===0).some(t=>t===!0)&&o.map(t=>t.row===1&&t.column===1).some(t=>t===!0)&&o.map(t=>t.row===0&&t.column===2).some(t=>t===!0)),c=o=>{const t=new Set(o.map(C=>C.row)).size,S=new Set(o.map(C=>C.column)).size;return!(t!==1&&S!==1)};let z=!1,L;do L=g.FromGridWithoutReplacement(i,M,Y),!c(L)&&!P(L)?z=!0:z=!1;while(!z);for(let o=0;o<i;o++){const t={shape:I[b[o]],shapeIndex:b[o],color:A[N[o]].rgbaColor,colorName:A[N[o]].colorName,location:L[o]};s.push(t)}let q=!1,k;do k=g.FromGridWithoutReplacement(i,M,Y),!c(k)&&!P(k)?q=!0:q=!1;while(!q);for(let o=0;o<i;o++){const t={shape:s[o].shape,shapeIndex:b[o],color:s[o].color,colorName:A[N[o]].colorName,location:k[o]};r.push(t)}let J=0;if(se.includes(n)){const o=e.getParameter("number_of_shapes_changing_color");if(o>i)throw new Error(`number_of_shapes_changing_color is ${o}, but it must be less than or equal to number_of_shapes_shown (which is ${i}).`);const S=g.FromRangeWithoutReplacement(o,0,i-1).map(u=>r[u]);J=S.length;const C=S[0].color;for(let u=0;u<o;u++){const ee=S[u];u+1<o?ee.color=S[u+1].color:ee.color=C}}R.push({presentShapes:s,responseShapes:r,numberOfShapesWithDifferentColors:J})}const w=new y;e.addScene(w);const $=new p({rect:{size:{width:a,height:a}},fillColor:l.Transparent,strokeColor:l.Gray,lineWidth:4,position:{x:200,y:300}});w.addChild($);const re=new te({text:"+",fontSize:32,fontColor:l.Black,localize:!1});$.addChild(re),w.onAppear(()=>{e.addTrialData("activity_begin_iso8601_timestamp",this.beginIso8601Timestamp),e.addTrialData("trial_begin_iso8601_timestamp",new Date().toISOString()),w.run(h.sequence([h.wait({duration:e.getParameter("fixation_duration_ms")}),h.custom({callback:()=>{e.presentScene(_)}})]))});const _=new y;e.addScene(_);const ae=new p({rect:{size:{width:a,height:a}},fillColor:l.Transparent,strokeColor:l.Gray,lineWidth:4,position:{x:200,y:300}});_.addChild(ae);const U=new oe({rows:F,columns:Z,size:{width:a,height:a},position:{x:200,y:300},backgroundColor:l.Transparent,gridLineColor:l.Transparent});_.addChild(U),_.onAppear(()=>{const n=R[e.trialIndex];for(let s=0;s<n.presentShapes.length;s++){const r=n.presentShapes[s].shape;r.fillColor=n.presentShapes[s].color,r.position={x:0,y:0},U.addAtCell(r,n.presentShapes[s].location.row,n.presentShapes[s].location.column)}_.run(h.sequence([h.wait({duration:e.getParameter("shapes_presented_duration_ms")}),h.custom({callback:()=>{U.removeAllGridChildren()}}),h.wait({duration:e.getParameter("shapes_removed_duration_ms")}),h.custom({callback:()=>{U.removeAllGridChildren(),e.presentScene(m)}})]))});const m=new y;e.addScene(m);const ie=new p({rect:{size:{width:a,height:a}},fillColor:l.Transparent,strokeColor:l.Gray,lineWidth:4,position:{x:200,y:300}});m.addChild(ie);const W=new oe({rows:F,columns:Z,size:{width:a,height:a},position:{x:200,y:300},backgroundColor:l.Transparent,gridLineColor:l.Transparent});m.addChild(W),m.onAppear(()=>{const n=R[e.trialIndex];for(let s=0;s<n.responseShapes.length;s++){const r=n.responseShapes[s].shape;r.fillColor=n.responseShapes[s].color,r.position={x:0,y:0},W.addAtCell(r,n.responseShapes[s].location.row,n.responseShapes[s].location.column)}B.isUserInteractionEnabled=!0,X.isUserInteractionEnabled=!0,H.startNew("rt")});const B=new K({text:"SAME_BUTTON_TEXT",position:{x:100,y:700},size:{width:150,height:50}});m.addChild(B),B.onTapDown(()=>{B.isUserInteractionEnabled=!1,Q(!1)});const X=new K({text:"DIFFERENT_BUTTON_TEXT",position:{x:300,y:700},size:{width:150,height:50}});m.addChild(X),X.onTapDown(()=>{X.isUserInteractionEnabled=!1,Q(!0)});const Q=n=>{const s=H.elapsed("rt");H.remove("rt"),W.removeAllGridChildren(),e.addTrialData("trial_end_iso8601_timestamp",new Date().toISOString());const r=R[e.trialIndex];e.addTrialData("response_time_duration_ms",s),e.addTrialData("user_response",n?"different":"same");const b=r.numberOfShapesWithDifferentColors===0&&!n||r.numberOfShapesWithDifferentColors>0&&n;e.addTrialData("user_response_correct",b);const N=r.presentShapes.map(c=>({shape_index:c.shapeIndex,color_name:c.colorName,rgba_color:c.color,location:c.location}));e.addTrialData("present_shapes",N),e.addTrialData("quit_button_pressed",!1);const P=r.responseShapes.map(c=>({shape_index:c.shapeIndex,color_name:c.colorName,rgba_color:c.color,location:c.location}));e.addTrialData("response_shapes",P),e.addTrialData("trial_index",e.trialIndex),e.trialComplete(),e.trialIndex<G?e.presentScene(w):e.presentScene(f,j.slide({direction:he.Left,duration:500,easing:de.sinusoidalInOut}))},f=new y;e.addScene(f);const le=new te({text:"TRIALS_COMPLETE_SCENE_TEXT",position:{x:200,y:400}});f.addChild(le);const D=new K({text:"TRIALS_COMPLETE_SCENE_BUTTON_TEXT",position:{x:200,y:650}});D.isUserInteractionEnabled=!0,D.onTapDown(()=>{D.isUserInteractionEnabled=!1,f.removeAllChildren(),e.end()}),f.addChild(D),f.onSetup(()=>{e.removeAllFreeNodes()})}makeShapes(e){const E=new p({path:{pathString:d[0],height:e},lineWidth:0}),a=new p({path:{pathString:d[1],height:e},lineWidth:0}),i=new p({path:{pathString:d[2],height:e*.8},lineWidth:0}),I=new p({path:{pathString:d[3],height:e},lineWidth:0}),x=new p({path:{pathString:d[4],height:e*.8},lineWidth:0}),T=new p({path:{pathString:d[5],height:e},lineWidth:0}),O=new p({path:{pathString:d[6],height:e},lineWidth:0}),v=new p({path:{pathString:d[7],height:e},lineWidth:0});return[E,a,i,I,x,T,O,v]}}const d=["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","M134 0h2c7.26 22.31 14.38 44.67 21.86 66.9 3.91 11.61 5.47 29.91 13.25 33.27C203 113.94 236.86 123.13 270 134v1L136 269h-1c-11.04-33.58-22.08-67.16-33.21-101.03C67.87 156.98 33.93 145.99 0 135v-1L134 0Z","M107 0h1l108 108v1c-26.67 35.33-53.33 70.66-80 106h-1c-8.82-35.03-17.64-70.07-27-107.28C98.62 145.01 89.81 180 81.01 215h-1C53.33 179.66 26.67 144.33 0 109v-2L107 0Z","M0 1C2.17.67 4.33.05 6.5.04 58.33-.01 110.17 0 162 0v270H2c26.2-22.17 52.41-44.33 78.86-66.71V67.4c-3.85-3.22-7.35-6.2-10.9-9.11C46.64 39.18 23.32 20.09 0 1Z","M95 268.99h-1C62.66 238.66 31.33 208.33 0 178V88C26.67 58.67 53.33 29.33 80 0h1c0 29.45 0 58.89-.01 88.38 35.99 29.57 72 59.09 108.01 88.61v1l-94 91Z","M13 0h67l135 135v1L81 270c-27-.33-54-.67-81-1 11.73-12.51 23.61-24.87 35.16-37.54 33.14-36.35 66.14-72.82 100.23-110.38C94.4 80.52 53.7 40.26 13 0Z"];export{ue as ColorShapes};
+import{Game as ce,Sprite as pe,Scene as y,WebColors as l,Transition as j,RandomDraws as g,Shape as p,Label as te,Action as h,Timer as H,TransitionDirection as he,Easings as de}from"@m2c2kit/core";import{LocalePicker as Te,Instructions as V,CountdownScene as me,Grid as oe,Button as K}from"@m2c2kit/addons";class ue extends ce{constructor(){const e={fixation_duration_ms:{default:500,description:"How long fixation scene is shown, milliseconds.",type:"number"},shape_colors:{type:"array",description:"Array of colors for shapes.",items:{type:"object",properties:{colorName:{type:"string",description:"Human-friendly name of color."},rgbaColor:{type:"array",description:"Color as array, [r,g,b,a].",items:{type:"number"}}}},default:[{colorName:"black",rgbaColor:[0,0,0,1]},{colorName:"green",rgbaColor:[0,158,115,1]},{colorName:"yellow",rgbaColor:[240,228,66,1]},{colorName:"blue",rgbaColor:[0,114,178,1]},{colorName:"orange",rgbaColor:[213,94,0,1]},{colorName:"pink",rgbaColor:[204,121,167,1]}]},number_of_shapes_shown:{default:3,description:"How many shapes to show on the grid at one time.",type:"integer"},number_of_shapes_changing_color:{default:2,description:"If a different color trial, how many shapes should change color (minimum is 2, because changes are swaps with other shapes).",type:"integer"},shapes_presented_duration_ms:{default:2e3,description:"How long the shapes are shown, milliseconds.",type:"number"},shapes_removed_duration_ms:{default:1e3,description:"How long to show a blank square after shapes are removed, milliseconds.",type:"number"},cells_per_side:{default:3,description:"How many cell positions for each side of the square grid (e.g., 3 is a 3x3 grid; 4 is a 4x4 grid).",type:"integer"},number_of_different_colors_trials:{default:2,type:"integer",description:"Number of trials where the shapes have different colors."},number_of_trials:{default:4,description:"How many trials to run.",type:"integer"},show_trials_complete_scene:{default:!0,type:"boolean",description:"After the final trial, should a completion scene be shown? Otherwise, the game will immediately end."},instruction_type:{default:"long",description:"Type of instructions to show, 'short' or 'long'.",type:"string",enum:["short","long"]},instructions:{default:null,type:["object","null"],description:"When non-null, an InstructionsOptions object that will completely override the built-in instructions."},show_quit_button:{type:"boolean",default:!0,description:"Should the activity quit button be shown?"},show_fps:{type:"boolean",default:!1,description:"Should the FPS be shown?"},show_locale_picker:{type:"boolean",default:!1,description:"Should the icon that allows the participant to switch the locale be shown?"}},E={activity_begin_iso8601_timestamp:{type:"string",format:"date-time",description:"ISO 8601 timestamp at the beginning of the game activity."},trial_begin_iso8601_timestamp:{type:["string","null"],format:"date-time",description:"ISO 8601 timestamp at the beginning of the trial. Null if trial was skipped."},trial_end_iso8601_timestamp:{type:["string","null"],format:"date-time",description:"ISO 8601 timestamp at the end of the trial (when user presses 'Same' or 'Different'). Null if trial was skipped."},trial_index:{type:["integer","null"],description:"Index of the trial within this assessment, 0-based."},present_shapes:{description:"Configuration of shapes shown to the user in the presentation phase. Null if trial was skipped.",type:["array","null"],items:{type:"object",properties:{shape_index:{type:"integer",description:"Index of the shape within the library of shapes, 0-based"},color_name:{type:"string",description:"Human-friendly name of color."},rgba_color:{type:"array",description:"Color as array, [r,g,b,a].",items:{type:"number"}},location:{type:"object",description:"Location of shape.",properties:{row:{type:"number",description:"Row of the shape, 0-based."},column:{type:"number",description:"Column of the shape, 0-based."}}}}}},response_shapes:{description:"Configuration of shapes shown to the user in the response phase. Null if trial was skipped.",type:["array","null"],items:{type:"object",properties:{shape_index:{type:"integer",description:"Index of the shape within the library of shapes, 0-based"},color_name:{type:"string",description:"Human-friendly name of color."},rgba_color:{type:"array",description:"Color as array, [r,g,b,a].",items:{type:"number"}},location:{type:"object",description:"Location of shape.",properties:{row:{type:"number",description:"Row of the shape, 0-based."},column:{type:"number",description:"Column of the shape, 0-based."}}}}}},response_time_duration_ms:{type:["number","null"],description:"Milliseconds from when the response configuration of shapes is shown until the user taps a response. Null if trial was skipped."},user_response:{type:["string","null"],enum:["same","different"],description:"User's response to whether the shapes are same colors or different."},user_response_correct:{type:["boolean","null"],description:"Was the user's response correct?"},quit_button_pressed:{type:"boolean",description:"Was the quit button pressed?"}},i={name:"Color Shapes",id:"color-shapes",publishUuid:"394cb010-2ccf-4a87-9d23-cda7fb07a960",version:"0.8.21 (b4419e1c)",moduleMetadata:{name:"@m2c2kit/assessment-color-shapes",version:"0.8.21",dependencies:{"@m2c2kit/addons":"0.3.22","@m2c2kit/core":"0.3.23"}},translation:{configuration:{baseLocale:"en-US"},"en-US":{localeName:"English",INSTRUCTIONS_TITLE:"Color Shapes",SHORT_INSTRUCTIONS_TEXT_PAGE_1:"Try to remember the color of 3 shapes, because they will soon disappear. When the shapes reappear, answer whether they have the SAME or DIFFERENT colors as they had before",INSTRUCTIONS_TEXT_PAGE_1:"Try to remember the color of 3 shapes, because they will soon disappear.",INSTRUCTIONS_TEXT_PAGE_2:"Next you will see the same shapes reappear.",INSTRUCTIONS_TEXT_PAGE_3:"Answer whether the shapes have the SAME or DIFFERENT colors as they had before.",START_BUTTON_TEXT:"START",NEXT_BUTTON_TEXT:"Next",BACK_BUTTON_TEXT:"Back",GET_READY_COUNTDOWN_TEXT:"GET READY!",SAME_BUTTON_TEXT:"Same",DIFFERENT_BUTTON_TEXT:"Different",TRIALS_COMPLETE_SCENE_TEXT:"This activity is complete.",TRIALS_COMPLETE_SCENE_BUTTON_TEXT:"OK"},"es-MX":{localeName:"Espa\xF1ol",INSTRUCTIONS_TITLE:"Formas de Color",INSTRUCTIONS_TEXT_PAGE_1:"Intenta recordar el color de las 3 formas, porque pronto desaparecer\xE1n.",INSTRUCTIONS_TEXT_PAGE_2:"Luego ver\xE1s reaparecer las mismas formas.",INSTRUCTIONS_TEXT_PAGE_3:"Responde si las formas tienen el MISMO o DIFERENTE color que antes.",START_BUTTON_TEXT:"COMENZAR",NEXT_BUTTON_TEXT:"Siguiente",BACK_BUTTON_TEXT:"Atr\xE1s",GET_READY_COUNTDOWN_TEXT:"PREP\xC1RESE",SAME_BUTTON_TEXT:"Mismo",DIFFERENT_BUTTON_TEXT:"Diferente",TRIALS_COMPLETE_SCENE_TEXT:"Esta actividad est\xE1 completa.",TRIALS_COMPLETE_SCENE_BUTTON_TEXT:"OK"},"de-DE":{localeName:"Deutsch",INSTRUCTIONS_TITLE:"Farb-Formen",INSTRUCTIONS_TEXT_PAGE_1:"Oben und unten sehen Sie Symbolpaare.",INSTRUCTIONS_TEXT_PAGE_2:"Ihre Aufgabe wird es sein, auf dasjenige untere Paar zu tippen, welches mit einem der obigen Paare exakt \xFCbereinstimmt.",INSTRUCTIONS_TEXT_PAGE_3:"Versuchen Sie bitte, so schnell und korrekt wie m\xF6glich zu sein.",START_BUTTON_TEXT:"START",NEXT_BUTTON_TEXT:"Weiter",BACK_BUTTON_TEXT:"Vorherige",GET_READY_COUNTDOWN_TEXT:"BEREIT MACHEN",SAME_BUTTON_TEXT:"Gleich",DIFFERENT_BUTTON_TEXT:"Unterschiedlich",TRIALS_COMPLETE_SCENE_TEXT:"Die Aufgabe ist beendet.",TRIALS_COMPLETE_SCENE_BUTTON_TEXT:"OK"}},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:e.show_fps.default,width:400,height:800,trialSchema:E,parameters:e,fonts:[{fontName:"roboto",url:"fonts/roboto/Roboto-Regular.ttf"}],images:[{imageName:"instructions-1",height:256,width:256,url:"images/cs-instructions-1.png"},{imageName:"instructions-2",height:256,width:256,url:"images/cs-instructions-2.png"},{imageName:"instructions-3",height:350,width:300,url:"images/cs-instructions-3.png",localize:!0},{imageName:"circle-x",height:32,width:32,url:"images/circle-x.svg"}]};super(i)}async initialize(){await super.initialize();const e=this,E=96,a=350,i=e.getParameter("number_of_shapes_shown"),I=this.makeShapes(E);if(e.getParameter("show_quit_button")){const n=new pe({imageName:"circle-x",position:{x:380,y:20},isUserInteractionEnabled:!0});e.addFreeNode(n),n.onTapDown(s=>{e.removeAllFreeNodes(),s.handled=!0;const r=new y;e.addScene(r),e.presentScene(r),e.addTrialData("quit_button_pressed",!0),e.trialComplete(),e.cancel()})}let x;e.getParameter("show_locale_picker")&&(x=new Te,e.addFreeNode(x));let T;const O=e.getParameter("instructions");if(O)T=V.create(O);else switch(e.getParameter("instruction_type")){case"short":{T=V.create({instructionScenes:[{title:"INSTRUCTIONS_TITLE",text:"SHORT_INSTRUCTIONS_TEXT_PAGE_1",imageName:"instructions-1",imageAboveText:!1,imageMarginTop:32,textFontSize:24,titleFontSize:30,textVerticalBias:.2,nextButtonText:"START_BUTTON_TEXT",nextButtonBackgroundColor:l.Green,nextSceneTransition:j.none()}]});break}case"long":{T=V.create({instructionScenes:[{title:"INSTRUCTIONS_TITLE",text:"INSTRUCTIONS_TEXT_PAGE_1",imageName:"instructions-1",imageAboveText:!1,imageMarginTop:32,textFontSize:24,titleFontSize:30,textVerticalBias:.2,nextButtonText:"NEXT_BUTTON_TEXT",backButtonText:"BACK_BUTTON_TEXT"},{title:"INSTRUCTIONS_TITLE",text:"INSTRUCTIONS_TEXT_PAGE_2",imageName:"instructions-2",imageAboveText:!1,imageMarginTop:32,textFontSize:24,titleFontSize:30,textVerticalBias:.2,nextButtonText:"NEXT_BUTTON_TEXT",backButtonText:"BACK_BUTTON_TEXT"},{title:"INSTRUCTIONS_TITLE",text:"INSTRUCTIONS_TEXT_PAGE_3",imageName:"instructions-3",imageAboveText:!1,imageMarginTop:32,textFontSize:24,titleFontSize:30,textVerticalBias:.2,nextButtonText:"START_BUTTON_TEXT",nextButtonBackgroundColor:l.Green,backButtonText:"BACK_BUTTON_TEXT"}]});break}default:throw new Error("invalid value for instruction_type")}T[0].onAppear(()=>{e.addTrialData("activity_begin_iso8601_timestamp",this.beginIso8601Timestamp)}),e.addScenes(T);const v=new me({milliseconds:3e3,text:"GET_READY_COUNTDOWN_TEXT",zeroDwellMilliseconds:1e3,transition:j.none()});e.addScene(v);const F=e.getParameter("cells_per_side"),Z=e.getParameter("cells_per_side"),G=e.getParameter("number_of_trials"),A=e.getParameter("shape_colors"),R=[],M=e.getParameter("cells_per_side"),Y=M,ne=e.getParameter("number_of_different_colors_trials"),se=g.FromRangeWithoutReplacement(ne,0,G-1);for(let n=0;n<G;n++){const s=new Array,r=new Array,b=g.FromRangeWithoutReplacement(i,0,I.length-1),N=g.FromRangeWithoutReplacement(i,0,A.length-1),P=o=>!!(o.map(t=>t.row===0&&t.column===0).some(t=>t===!0)&&o.map(t=>t.row===1&&t.column===1).some(t=>t===!0)&&o.map(t=>t.row===2&&t.column===2).some(t=>t===!0)||o.map(t=>t.row===2&&t.column===0).some(t=>t===!0)&&o.map(t=>t.row===1&&t.column===1).some(t=>t===!0)&&o.map(t=>t.row===0&&t.column===2).some(t=>t===!0)),c=o=>{const t=new Set(o.map(C=>C.row)).size,S=new Set(o.map(C=>C.column)).size;return!(t!==1&&S!==1)};let z=!1,L;do L=g.FromGridWithoutReplacement(i,M,Y),!c(L)&&!P(L)?z=!0:z=!1;while(!z);for(let o=0;o<i;o++){const t={shape:I[b[o]],shapeIndex:b[o],color:A[N[o]].rgbaColor,colorName:A[N[o]].colorName,location:L[o]};s.push(t)}let q=!1,k;do k=g.FromGridWithoutReplacement(i,M,Y),!c(k)&&!P(k)?q=!0:q=!1;while(!q);for(let o=0;o<i;o++){const t={shape:s[o].shape,shapeIndex:b[o],color:s[o].color,colorName:A[N[o]].colorName,location:k[o]};r.push(t)}let J=0;if(se.includes(n)){const o=e.getParameter("number_of_shapes_changing_color");if(o>i)throw new Error(`number_of_shapes_changing_color is ${o}, but it must be less than or equal to number_of_shapes_shown (which is ${i}).`);const S=g.FromRangeWithoutReplacement(o,0,i-1).map(u=>r[u]);J=S.length;const C=S[0].color;for(let u=0;u<o;u++){const ee=S[u];u+1<o?ee.color=S[u+1].color:ee.color=C}}R.push({presentShapes:s,responseShapes:r,numberOfShapesWithDifferentColors:J})}const w=new y;e.addScene(w);const $=new p({rect:{size:{width:a,height:a}},fillColor:l.Transparent,strokeColor:l.Gray,lineWidth:4,position:{x:200,y:300}});w.addChild($);const re=new te({text:"+",fontSize:32,fontColor:l.Black,localize:!1});$.addChild(re),w.onAppear(()=>{e.addTrialData("activity_begin_iso8601_timestamp",this.beginIso8601Timestamp),e.addTrialData("trial_begin_iso8601_timestamp",new Date().toISOString()),w.run(h.sequence([h.wait({duration:e.getParameter("fixation_duration_ms")}),h.custom({callback:()=>{e.presentScene(_)}})]))});const _=new y;e.addScene(_);const ae=new p({rect:{size:{width:a,height:a}},fillColor:l.Transparent,strokeColor:l.Gray,lineWidth:4,position:{x:200,y:300}});_.addChild(ae);const U=new oe({rows:F,columns:Z,size:{width:a,height:a},position:{x:200,y:300},backgroundColor:l.Transparent,gridLineColor:l.Transparent});_.addChild(U),_.onAppear(()=>{const n=R[e.trialIndex];for(let s=0;s<n.presentShapes.length;s++){const r=n.presentShapes[s].shape;r.fillColor=n.presentShapes[s].color,r.position={x:0,y:0},U.addAtCell(r,n.presentShapes[s].location.row,n.presentShapes[s].location.column)}_.run(h.sequence([h.wait({duration:e.getParameter("shapes_presented_duration_ms")}),h.custom({callback:()=>{U.removeAllGridChildren()}}),h.wait({duration:e.getParameter("shapes_removed_duration_ms")}),h.custom({callback:()=>{U.removeAllGridChildren(),e.presentScene(m)}})]))});const m=new y;e.addScene(m);const ie=new p({rect:{size:{width:a,height:a}},fillColor:l.Transparent,strokeColor:l.Gray,lineWidth:4,position:{x:200,y:300}});m.addChild(ie);const W=new oe({rows:F,columns:Z,size:{width:a,height:a},position:{x:200,y:300},backgroundColor:l.Transparent,gridLineColor:l.Transparent});m.addChild(W),m.onAppear(()=>{const n=R[e.trialIndex];for(let s=0;s<n.responseShapes.length;s++){const r=n.responseShapes[s].shape;r.fillColor=n.responseShapes[s].color,r.position={x:0,y:0},W.addAtCell(r,n.responseShapes[s].location.row,n.responseShapes[s].location.column)}B.isUserInteractionEnabled=!0,X.isUserInteractionEnabled=!0,H.startNew("rt")});const B=new K({text:"SAME_BUTTON_TEXT",position:{x:100,y:700},size:{width:150,height:50}});m.addChild(B),B.onTapDown(()=>{B.isUserInteractionEnabled=!1,Q(!1)});const X=new K({text:"DIFFERENT_BUTTON_TEXT",position:{x:300,y:700},size:{width:150,height:50}});m.addChild(X),X.onTapDown(()=>{X.isUserInteractionEnabled=!1,Q(!0)});const Q=n=>{const s=H.elapsed("rt");H.remove("rt"),W.removeAllGridChildren(),e.addTrialData("trial_end_iso8601_timestamp",new Date().toISOString());const r=R[e.trialIndex];e.addTrialData("response_time_duration_ms",s),e.addTrialData("user_response",n?"different":"same");const b=r.numberOfShapesWithDifferentColors===0&&!n||r.numberOfShapesWithDifferentColors>0&&n;e.addTrialData("user_response_correct",b);const N=r.presentShapes.map(c=>({shape_index:c.shapeIndex,color_name:c.colorName,rgba_color:c.color,location:c.location}));e.addTrialData("present_shapes",N),e.addTrialData("quit_button_pressed",!1);const P=r.responseShapes.map(c=>({shape_index:c.shapeIndex,color_name:c.colorName,rgba_color:c.color,location:c.location}));e.addTrialData("response_shapes",P),e.addTrialData("trial_index",e.trialIndex),e.trialComplete(),e.trialIndex<G?e.presentScene(w):e.presentScene(f,j.slide({direction:he.Left,duration:500,easing:de.sinusoidalInOut}))},f=new y;e.addScene(f);const le=new te({text:"TRIALS_COMPLETE_SCENE_TEXT",position:{x:200,y:400}});f.addChild(le);const D=new K({text:"TRIALS_COMPLETE_SCENE_BUTTON_TEXT",position:{x:200,y:650}});D.isUserInteractionEnabled=!0,D.onTapDown(()=>{D.isUserInteractionEnabled=!1,f.removeAllChildren(),e.end()}),f.addChild(D),f.onSetup(()=>{e.removeAllFreeNodes()})}makeShapes(e){const E=new p({path:{pathString:d[0],height:e},lineWidth:0}),a=new p({path:{pathString:d[1],height:e},lineWidth:0}),i=new p({path:{pathString:d[2],height:e*.8},lineWidth:0}),I=new p({path:{pathString:d[3],height:e},lineWidth:0}),x=new p({path:{pathString:d[4],height:e*.8},lineWidth:0}),T=new p({path:{pathString:d[5],height:e},lineWidth:0}),O=new p({path:{pathString:d[6],height:e},lineWidth:0}),v=new p({path:{pathString:d[7],height:e},lineWidth:0});return[E,a,i,I,x,T,O,v]}}const d=["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","M134 0h2c7.26 22.31 14.38 44.67 21.86 66.9 3.91 11.61 5.47 29.91 13.25 33.27C203 113.94 236.86 123.13 270 134v1L136 269h-1c-11.04-33.58-22.08-67.16-33.21-101.03C67.87 156.98 33.93 145.99 0 135v-1L134 0Z","M107 0h1l108 108v1c-26.67 35.33-53.33 70.66-80 106h-1c-8.82-35.03-17.64-70.07-27-107.28C98.62 145.01 89.81 180 81.01 215h-1C53.33 179.66 26.67 144.33 0 109v-2L107 0Z","M0 1C2.17.67 4.33.05 6.5.04 58.33-.01 110.17 0 162 0v270H2c26.2-22.17 52.41-44.33 78.86-66.71V67.4c-3.85-3.22-7.35-6.2-10.9-9.11C46.64 39.18 23.32 20.09 0 1Z","M95 268.99h-1C62.66 238.66 31.33 208.33 0 178V88C26.67 58.67 53.33 29.33 80 0h1c0 29.45 0 58.89-.01 88.38 35.99 29.57 72 59.09 108.01 88.61v1l-94 91Z","M13 0h67l135 135v1L81 270c-27-.33-54-.67-81-1 11.73-12.51 23.61-24.87 35.16-37.54 33.14-36.35 66.14-72.82 100.23-110.38C94.4 80.52 53.7 40.26 13 0Z"];export{ue as ColorShapes};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m2c2kit/assessment-color-shapes",
-  "version": "0.8.20",
+  "version": "0.8.21",
   "m2c2kit": {
     "assessmentId": "color-shapes"
   },
@@ -38,20 +38,21 @@
   },
   "homepage": "https://m2c2-project.github.io/m2c2kit",
   "dependencies": {
-    "@m2c2kit/addons": "0.3.21",
-    "@m2c2kit/core": "0.3.22"
+    "@m2c2kit/addons": "0.3.22",
+    "@m2c2kit/core": "0.3.23"
   },
   "devDependencies": {
-    "@m2c2kit/build-helpers": "0.3.18",
-    "@m2c2kit/schema-util": "0.1.12",
-    "@m2c2kit/session": "0.3.4",
-    "@rollup/plugin-node-resolve": "15.2.3",
-    "@rollup/plugin-replace": "5.0.7",
+    "@m2c2kit/build-helpers": "0.3.19",
+    "@m2c2kit/schema-util": "0.1.13",
+    "@m2c2kit/session": "0.3.5",
+    "@rollup/plugin-node-resolve": "15.3.0",
+    "@rollup/plugin-replace": "6.0.1",
+    "concurrently": "9.0.1",
     "rimraf": "6.0.1",
-    "rollup": "4.21.2",
+    "rollup": "4.24.0",
     "rollup-plugin-copy": "3.5.0",
     "rollup-plugin-esbuild": "6.1.1",
-    "typescript": "5.5.4"
+    "typescript": "5.6.2"
   },
   "engines": {
     "node": ">=18"

package/schemas.json

@@ -1,6 +1,6 @@
 {
   "$schema": "http://json-schema.org/draft-07/schema",
-  "title": "Color Shapes version 0.8.20, 6bd16a4e",
+  "title": "Color Shapes version 0.8.21, b4419e1c",
   "type": "object",
   "description": "All game schemas",
   "properties": {