Re: [Minno.js] Stimuli on IAT Aren't Affected by CSS

[Mayan Navon]

Hi Moshe,

I see that you changed your code to stimulusCss : {"height":"60%", "margin-bottom":"5%"}. This should work (and I don't think you need the "margin-bottom":"5%" part). 

Let us know if the issue persists.

Thanks,

Mayan

On Wed, Nov 18, 2020 at 3:19 AM Moshe Poliak <mpo...@college.harvard.edu> wrote:

Hello there!

Could I please ask you for help regarding why IAT stimuli aren't being resized as expected?  

In the Banaji lab, we are working on a task that includes a Black-White IAT with faces as the social stimuli. The images are jpg files. During a learning task, we can control the sizes of the image stimuli using the size:{height:X} property. However, in the IAT, the CSS doesn't get applied to the stimuli. When I inspect the page and change the HTML manually, I can resize the image with CSS, so the problem is that the original CSS doesn't get applied to the image.

My code is at: https://app-prod-03.implicit.harvard.edu/dashboard/static/?/view/7d123f93548dc941264bcce77a695f20

This is the relevant IAT code:

        category1 : {

            name : 'Positive shapes', //Will appear in the data.

            title : {

                media : {image : global.targetTestPos[7]+'.jpg'}, //Name of the category presented in the task.

                css : {color:'#31b404','font-size':'2em'}, //Style of the category title.

                height : 4 //Used to position the "Or" in the combined block.

            }, 

            stimulusMedia : [ //Stimuli content as PIP's media objects

{image: global.targetTestPos[0]+'.jpg'},

{image: global.targetTestPos[1]+'.jpg'},

{image: global.targetTestPos[2]+'.jpg'},

{image: global.targetTestPos[3]+'.jpg'},

{image: global.targetTestPos[4]+'.jpg'},

{image: global.targetTestPos[5]+'.jpg'}

            ], 

//Stimulus css

stimulusCss : {location: {bottom:10}, size:{height:60}} 

        },    

        category2 :    {

            name : 'Negative shapes', //Will appear in the data.

            title : {

                media : {image : global.targetTestNeg[7]+'.jpg'}, //Name of the category presented in the task.

                css : {color:'#31b404','font-size':'2em'}, //Style of the category title.

                height : 4 //Used to position the "Or" in the combined block.

            }, 

            stimulusMedia : [ //Stimuli content as PIP's media objects

{image: global.targetTestNeg[0]+'.jpg'},

{image: global.targetTestNeg[1]+'.jpg'},

{image: global.targetTestNeg[2]+'.jpg'},

{image: global.targetTestNeg[3]+'.jpg'},

{image: global.targetTestNeg[4]+'.jpg'},

{image: global.targetTestNeg[5]+'.jpg'}

            ],

            //Stimulus css

stimulusCss : {location: {bottom:10}, size:{height:60}} 

Thank you so much!

Moshe

--
You received this message because you are subscribed to the Google Groups "Minno.js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to minnojs+u...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/minnojs/b179547b-a480-4d34-8728-d16f93aa835cn%40googlegroups.com.

--

Mayan