INSTRUCTIONS TO CREATE TEMPLATE FOR EACH EXPERIMENT

NOTE: This should really be a txt file but made as js file with only a comment because txt files do not show up well in the experiment interface.

FILES:

1. GLOBAL TEMPLATE FILES 1 - SHOULD NOT NEED TO MODIFY CONTENTS

template_info.js (this file)

countdown.js (file to handle timer code - should not need modification)

countdown.css (file to handle timer html styles - should not need modification)

template_structure.js (file to handle main flow of experiment - should not need modification)

instructions.css (file to handle instruction html styles - should not need modification)

2. GLOBAL TEMPLATE FILES 2 - MIGHT NEED TO MODIFY CONTENTS A LITTLE BIT FOR FORMATTING EXPERIMENT PAGE

network_chat.js (file to handle network chat code - might need minor modification - see places where NOTE in comment)

network_chat.css (file to handle network chat html styles - might need minor modification - see places where NOTE in comment)

3. GLOBAL TEMPLATE FILES 3 - NEED TO MODIFY CONTENTS

instructions_text.js (file with instruction text and information about images - some instructions might be global, but some is experiment specific)

image files for instructions - files could have any name and the files names are put in appropriate place in instructions_text.js

4. EXPERIMENT-SPECIFIC FILES 1 - NEED TO RENAME FILE NAME AND MODIFY CONTENTS

<experiment name>.js (rename and modify matrix_reasoning.js;

keep any functions that start "experimentSpecific", although can entirely change code in it;

delete any other functions and create new ones needs by specific experiment

<experiment name>.html (rename and modify modify matrix_reasoning.html;

keep most divs as is except modify:

div id="experimentarea" (except usually do not modify div id="network-chat")

make sure divs directly under "experimentarea" div (including id="network-chat") have class="col-sm-<num>"

"network-chat" should be at least "col-sm-4"

the <num>s on "col-sm-<num>" under "experimentarea" should add up to 12

for example, in matrix_reasoning.html, the divs directly under "experimentarea" are:

where 4+4+4=12

<experiment name>.css (rename and modify modify matrix_reasoning.css, if needed for experiment-specific html styles)

5. EXPERIMENT-SPECIFIC FILES 2 - NEED TO BE ADDED, IF NEEDED

optional files needed for experiment - any file name, any file ext (although start file name with <experiment name> when can so stands out)

STEPS:

1. Rename matrix_reasoning.js, .html, and .css to <experiment name>.js, .html, .css

2. Modify code in these <experiment name> files to fit with experiment:

a. In html:

1. keep the final "chat" div under "experimentarea" div,

a. then replace the other two divs with one or two experiment-specific divs with the actual specific puzzle html

b. adjust the sizes of each div (including the "chat" div) by adjusting the <num> class="col-sm-<num>" in each div to give appropriate

proportion out of 12 - eg you might 3 sections with 4 as the number of each or 2 sections, one 4, one 8, etc.,

but the total must be 12"

c. if the "chat" div is adjusted from 4, the ".divChatWindow" width in network_chat.css must be adjusted from 400px accordingly

(eg. if the "chat" section goes from col-sm-4 to col-sm-8, the width of ".divChatWindow" must go from 400px to 800px)

2. move the "submitandendbutton" (html shown below) to an appropriate place

"<button id="submitandendbutton" onclick="submitAnswersAndEnd()" hidden>Finish</button>"

b. In css, put any game-specific css code

c. In js:

1. modify but keep any functions starting "experimentSpecific" as needed

2. add any other game-specific functions

3. Fix variables in "Manage Variables" tab that have "(EXPERIMENT-SPECIFIC)" in description are specific to the experiment from the template

a. each should either be renamed, with description and value modified to reflect the current experiment, keeping "(EXPERIMENT-SPECIFIC)"

in the description

b. OR should be deactivated

4. Add any additional files needed (name <experiment name><additional identification>.js where needed like matrix_reasoning_answer_key.js)

5. Modify instructions_text.js to give instructions and image examples for specific experiment - make sure it handles instructions for both

group and individual