Increasing Font Size

[Julie Beadle]

Hello, 

How can I increase the font size of "Press "E" for", "Press "I" for" and "If you make a mistake, a red X will appear. Press the other key to continue". 

I am new to .js so a visual example would be appreciated. 

Thanks!

Julie 

[Julie Beadle]

For running the IAT in Qualtrics. 

[Mayan Navon]

Hi Julie,

It is pretty easy to modify the font-size of the keys text ("Press "E" for", "Press "I" for"):

you just need to insert the code below right after you define the url for base_url. 

You can change the font-size (as I did, I commented out the original values) by changing the value of the 'font-size': property. 'em' indicates that the size is relative to the size of the user's screen.

 //Text and style for key instructions displayed about the category labels.
            leftKeyText : 'Press "E" for', 
            rightKeyText : 'Press "I" for', 
            keysCss : {'font-size':'3.8em', 'font-family':'courier', color:'#000000'}, //{'font-size':'0.8em', 'font-family':'courier', color:'#000000'},
            //Text and style for the separator between the top and bottom category labels.
            orText : 'or', 
            orCss : {'font-size':'2.8em', color:'#000000'}    // {'font-size':'1.8em', color:'#000000'}

More specifically:

  base_url : {//Where are your images at?
            image : 'https://baranan.github.io/minno-tasks/images/'
        },

 //Text and style for key instructions displayed about the category labels.
leftKeyText : 'Press "E" for',
rightKeyText : 'Press "I" for',
keysCss : {'font-size':'3.8em', 'font-family':'courier', color:'#000000'}, //{'font-size':'0.8em', 'font-family':'courier', color:'#000000'},
//Text and style for the separator between the top and bottom category labels.
orText : 'or',
orCss : {'font-size':'2.8em', color:'#000000'} // {'font-size':'1.8em', color:'#000000'}

This gave me this result. A much larger font-size:

As for the font size for the "If you make a mistake, a red X will appear. Press the other key to continue" *within the actual trial, rather than the instruction screens*, this is more difficult to do, because currently that property is set inside a function that builds the trial (we will fix that soon). If you decide it is important to you, you can copy the full IAT script https://cdn.jsdelivr.net/gh/baranan/minno-tasks@0.*/IAT/qualtrics/quiat9.js to a text editor, and modify the following part:

if (!params.isInst && params.remindError)
{
    layout.push({
        location:{bottom:1}, css: {color:piCurrent.fontColor,'font-size':'1em'}, // change the 'font-size' here 
        media : {html: isTouch ? params.remindErrorTextTouch : params.remindErrorText}
    });

}

Then, you'll need to tell Qualtrics to use this file, and not the original full script file located here https://cdn.jsdelivr.net/gh/baranan/minno-tasks@0.*/IAT/qualtrics/quiat9. You'll need to upload your edited file to a server, as you did with your IAT task that calls the full script file (see "Use your own script file" in this tutorial). Also, you'll need to change the url at the top of your IAT task to the location of your edited IAT script (the url appears in the first line):

define(['pipAPI', 'https://cdn.jsdelivr.net/gh/baranan/minno-tasks@0.*/IAT/qualtrics/quiat9.js'], function(APIConstructor, iatExtension){
    var API = new APIConstructor();

	return iatExtension({
		category1 : {
			name : 'Black people', //Will appear in the data.
			title : {
				media : {word : 'Black people'}, //Name of the category presented in the task.
				css : {color:'#31940F','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 : 'black1.jpg'}, 
    			{image : 'black2.jpg'}, 
    			{image : 'black3.jpg'}, 
    			{image : 'black4.jpg'}, 
    			{image : 'black5.jpg'}, 
    			{image : 'black6.jpg'}
			], 
			//Stimulus css (style)
			stimulusCss : {color:'#31940F','font-size':'1.8em'}
		},	
		category2 :	{
			name : 'White people', //Will appear in the data.
			title : {
				media : {word : 'White people'}, //Name of the category presented in the task.
				css : {color:'#31940F','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 : 'yf1.jpg'}, 
    			{image : 'yf4.jpg'}, 
    			{image : 'yf5.jpg'}, 
    			{image : 'ym2.jpg'}, 
    			{image : 'ym3.jpg'}, 
    			{image : 'ym5.jpg'}			], 
			//Stimulus css
			stimulusCss : {color:'#31940F','font-size':'1.8em'}
		},	

		base_url : {//Where are your images at?
			image : 'https://baranan.github.io/minno-tasks/images/'
		} 
	});
});

I hope that helps.

Best,

Mayan

--
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/329b744e-c31a-4a2e-8731-772b067a0ff6n%40googlegroups.com.

--

Mayan

[Julie Beadle]

Hi Mayan, 

This is very helpful! Thank you!

Julie