INSTRUCTIONS TO CREATE TEMPLATE FOR EACH EXPERIMENT
<br>    
&nbsp;&nbsp;&nbsp;&nbsp;
    FILES:
<br>    
&nbsp;&nbsp;&nbsp;&nbsp;
    1. GLOBAL TEMPLATE FILES 1 - SHOULD NOT NEED TO MODIFY CONTENTS
<br>     
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
         template_info.js (this file)
<br>     
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
         countdown.js (file to handle timer code - should not need modification)
<br>     
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
         countdown.css (file to handle timer html styles - should not need modification)
<br>     
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
         template_structure.js (file to handle main flow of experiment - should not need modification)
<br>     
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
         instructions.css (file to handle instruction html styles - should not need modification)
<br>     
&nbsp;&nbsp;&nbsp;&nbsp;
    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)
<br>     
&nbsp;&nbsp;&nbsp;&nbsp;
   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)
<br>     
&nbsp;&nbsp;&nbsp;&nbsp;
   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:
                                                        <div id = "puzzleimagearea" class="col-sm-4">
                                                        <div id = "choicearea" class="col-sm-4">
                                                        <div id="network-chat" class="col-sm-4"> 
                                                    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

<!--
<iframe src='/attachment/experimentnamescreenshot01.png' width='100%' height='565px' frameborder='0'> 
</iframe>
<iframe src='https://view.officeapps.live.com/op/embed.aspx?src=/attachment/experimentnamescreenshot01.png' width='100%' height='565px' frameborder='0'> 
</iframe>




<html xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office"
xmlns:w="urn:schemas-microsoft-com:office:word"
xmlns:m="http://schemas.microsoft.com/office/2004/12/omml"
xmlns="http://www.w3.org/TR/REC-html40">

<head>
<meta http-equiv=Content-Type content="text/html; charset=windows-1252">
<meta name=ProgId content=Word.Document>
<meta name=Generator content="Microsoft Word 15">
<meta name=Originator content="Microsoft Word 15">
<link rel=File-List href="templateinfo_html_files/filelist.xml">

<link rel=themeData href="templateinfo_html_files/themedata.thmx">
<link rel=colorSchemeMapping
href="templateinfo_html_files/colorschememapping.xml">
-->
<!--
<style>

 /* Font Definitions */
 @font-face
	{font-family:"Cambria Math";
	panose-1:2 4 5 3 5 4 6 3 2 4;
	mso-font-charset:0;
	mso-generic-font-family:roman;
	mso-font-pitch:variable;
	mso-font-signature:3 0 0 0 1 0;}
@font-face
	{font-family:Calibri;
	panose-1:2 15 5 2 2 2 4 3 2 4;
	mso-font-charset:0;
	mso-generic-font-family:swiss;
	mso-font-pitch:variable;
	mso-font-signature:-469750017 -1073732485 9 0 511 0;}
 /* Style Definitions */
 p.MsoNormal, li.MsoNormal, div.MsoNormal
	{mso-style-unhide:no;
	mso-style-qformat:yes;
	mso-style-parent:"";
	margin-top:0in;
	margin-right:0in;
	margin-bottom:8.0pt;
	margin-left:0in;
	line-height:107%;
	mso-pagination:widow-orphan;
	font-size:11.0pt;
	font-family:"Calibri",sans-serif;
	mso-ascii-font-family:Calibri;
	mso-ascii-theme-font:minor-latin;
	mso-fareast-font-family:Calibri;
	mso-fareast-theme-font:minor-latin;
	mso-hansi-font-family:Calibri;
	mso-hansi-theme-font:minor-latin;
	mso-bidi-font-family:"Times New Roman";
	mso-bidi-theme-font:minor-bidi;}
span.SpellE
	{mso-style-name:"";
	mso-spl-e:yes;}
span.GramE
	{mso-style-name:"";
	mso-gram-e:yes;}
.MsoChpDefault
	{mso-style-type:export-only;
	mso-default-props:yes;
	font-family:"Calibri",sans-serif;
	mso-ascii-font-family:Calibri;
	mso-ascii-theme-font:minor-latin;
	mso-fareast-font-family:Calibri;
	mso-fareast-theme-font:minor-latin;
	mso-hansi-font-family:Calibri;
	mso-hansi-theme-font:minor-latin;
	mso-bidi-font-family:"Times New Roman";
	mso-bidi-theme-font:minor-bidi;}
.MsoPapDefault
	{mso-style-type:export-only;
	margin-bottom:8.0pt;
	line-height:107%;}
@page WordSection1
	{size:8.5in 11.0in;
	margin:1.0in 1.0in 1.0in 1.0in;
	mso-header-margin:.5in;
	mso-footer-margin:.5in;
	mso-paper-source:0;}
div.WordSection1
	{page:WordSection1;}
-->
<!--
</style>

</head>

<body lang=EN-US style='tab-interval:.5in;word-wrap:break-word'>

<div class=WordSection1>

<p class=MsoNormal>INSTRUCTIONS TO CREATE SPECIFIC EXPERIMENT BASED ON TEMPLATE<o:p></o:p></p>

<p class=MsoNormal><span style='mso-spacerun:yes'></span>FILES INCLUDED IN TEMPLATE:<o:p></o:p></p>
<br>
<p class=MsoNormal><span style='mso-spacerun:yes'></span>1. GLOBAL TEMPLATE
FILES 1 - SHOULD NOT NEED TO MODIFY CONTENTS<o:p></o:p></p>

<p class=MsoNormal><span style='mso-spacerun:yes'></span>&nbsp;&nbsp;&nbsp;&nbsp;template_info.js
(this file)<o:p></o:p></p>

<p class=MsoNormal><span style='mso-spacerun:yes'></span>&nbsp;&nbsp;&nbsp;&nbsp;countdown.js
(file to handle timer code - should not need modification)<o:p></o:p></p>

<p class=MsoNormal><span style='mso-spacerun:yes'></span>&nbsp;&nbsp;&nbsp;&nbsp;countdown.css
(file to handle timer html styles - should not need modification)<o:p></o:p></p>

<p class=MsoNormal><span style='mso-spacerun:yes'>
</span>&nbsp;&nbsp;&nbsp;&nbsp;template_structure.js (file to handle main flow of experiment - should
not need modification)<o:p></o:p></p>

<p class=MsoNormal><span style='mso-spacerun:yes'>
</span>&nbsp;&nbsp;&nbsp;&nbsp;instructions.css (file to handle instruction html styles - should not
need modification)<o:p></o:p></p>

<p class=MsoNormal><span style='mso-spacerun:yes'></span><o:p></o:p></p>

<p class=MsoNormal><span style='mso-spacerun:yes'></span>2. GLOBAL TEMPLATE
FILES 2 - MIGHT NEED TO MODIFY CONTENTS A LITTLE BIT FOR FORMATTING EXPERIMENT
PAGE<o:p></o:p></p>

<p class=MsoNormal><span style='mso-spacerun:yes'></span>&nbsp;&nbsp;&nbsp;&nbsp;network_chat.js
(file to handle network chat code - might need minor modification - see places
where NOTE in comment)<o:p></o:p></p>

<p class=MsoNormal><span style='mso-spacerun:yes'></span>&nbsp;&nbsp;&nbsp;&nbsp;network_chat.css 
(file to handle network chat html styles - might need minor modification - see places 
where NOTE in comment)<o:p></o:p></p>


<p class=MsoNormal><span style='mso-spacerun:yes'></span>3. GLOBAL TEMPLATE
FILES 3 - NEED TO MODIFY CONTENTS<o:p></o:p></p>

<p class=MsoNormal><span style='mso-spacerun:yes'>
</span>&nbsp;&nbsp;&nbsp;&nbsp;instructions_text.js (file with instruction text and information about
images - some instructions might be global, but some is experiment specific)<o:p></o:p></p>

<p class=MsoNormal><span style='mso-spacerun:yes'></span>&nbsp;&nbsp;&nbsp;&nbsp;image files for
instructions - files could have any name and the files names are put in
appropriate place in instructions_text.js<o:p></o:p></p>

<p class=MsoNormal><span style='mso-spacerun:yes'></span><o:p></o:p></p>

<p class=MsoNormal><span style='mso-spacerun:yes'></span>4.
EXPERIMENT-SPECIFIC FILES 1 - NEED TO RENAME FILE NAME AND MODIFY CONTENTS<o:p></o:p></p>

<p class=MsoNormal><span style='mso-spacerun:yes'></span>>&nbsp;&nbsp;&nbsp;&nbsp;&lt;experiment
name&gt;.<span class=SpellE>js</span> (rename and modify <span class=GramE>matrix_reasoning.js;</span><o:p></o:p></p>

<p class=MsoNormal><span style='mso-spacerun:yes'>
</span><span style='mso-spacerun:yes'></span>keep any functions that start
&quot;<span class=SpellE>experimentSpecific</span>&quot;, although can entirely
change code in <span class=GramE>it;</span><o:p></o:p></p>

<p class=MsoNormal><span style='mso-spacerun:yes'>
</span>delete any other functions and create new ones needs by specific
experiment<o:p></o:p></p>

<p class=MsoNormal><span style='mso-spacerun:yes'></span>>&nbsp;&nbsp;&nbsp;&nbsp;&lt;experiment
name&gt;.html (rename and modify <span class=SpellE>modify</span> <span
class=GramE>matrix_reasoning.html;</span><o:p></o:p></p>

<p class=MsoNormal><span
style='mso-spacerun:yes'></span>keep most <span
class=SpellE>divs</span> as is except modify:<o:p></o:p></p>

<p class=MsoNormal><span
style='mso-spacerun:yes'></span>div
id=&quot;<span class=SpellE>experimentarea</span>&quot; (except usually do not
modify div id=&quot;network-chat&quot;)<o:p></o:p></p>

<p class=MsoNormal><span
style='mso-spacerun:yes'></span>make
sure <span class=SpellE>divs</span> directly under &quot;<span class=SpellE>experimentarea</span>&quot;
div (including id=&quot;network-chat&quot;) have class=&quot;col-<span
class=SpellE>sm</span>-&lt;num&gt;&quot;<o:p></o:p></p>

<p class=MsoNormal><span
style='mso-spacerun:yes'>
</span>&quot;<span class=GramE>network</span>-chat&quot; should be at least
&quot;col-sm-4&quot;<o:p></o:p></p>

<p class=MsoNormal><span
style='mso-spacerun:yes'></span>the
&lt;num&gt;<span class=SpellE>s on</span> &quot;col-<span class=SpellE>sm</span>-&lt;num&gt;&quot;
under &quot;<span class=SpellE>experimentarea</span>&quot; should add up to 12<o:p></o:p></p>

<p class=MsoNormal><span
style='mso-spacerun:yes'>
</span>for example, in matrix_reasoning.html, the <span class=SpellE>divs</span>
directly under &quot;<span class=SpellE>experimentarea</span>&quot; are:<o:p></o:p></p>

<p class=MsoNormal><span
style='mso-spacerun:yes'>
</span>&lt;div id = &quot;<span class=SpellE>puzzleimagearea</span>&quot;
class=&quot;col-sm-4&quot;&gt;<o:p></o:p></p>

<p class=MsoNormal><span style='mso-spacerun:yes'></span><span
style='mso-spacerun:yes'></span>&lt;div id =
&quot;<span class=SpellE>choicearea</span>&quot; class=&quot;col-sm-4&quot;&gt;<o:p></o:p></p>

<p class=MsoNormal><span
style='mso-spacerun:yes'>
</span>&lt;div id=&quot;network-chat&quot; class=&quot;col-sm-4&quot;&gt; <o:p></o:p></p>

<p class=MsoNormal><span
style='mso-spacerun:yes'>
</span>where 4+4+4=12<o:p></o:p></p>

<p class=MsoNormal><span style='mso-spacerun:yes'></span>&lt;experiment
name&gt;.<span class=SpellE>css</span> (rename and modify <span class=SpellE>modify</span>
matrix_reasoning.css, if needed for experiment-specific html styles)<o:p></o:p></p>

<p class=MsoNormal><span style='mso-spacerun:yes'></span><o:p></o:p></p>

<p class=MsoNormal><span style='mso-spacerun:yes'></span>5.
EXPERIMENT-SPECIFIC FILES 2 - NEED TO BE ADDED, IF NEEDED<o:p></o:p></p>

<p class=MsoNormal><span style='mso-spacerun:yes'></span>optional files
needed for experiment - any file name, any file <span class=SpellE>ext</span> (although
start file name with &lt;experiment name&gt; when can so stands out)<o:p></o:p></p>

<p class=MsoNormal><span style='mso-spacerun:yes'></span><o:p></o:p></p>

<p class=MsoNormal><span style='mso-spacerun:yes'></span>STEPS:<o:p></o:p></p>

<p class=MsoNormal><span style='mso-spacerun:yes'></span>1. Rename
matrix_reasoning.js, .html, and .<span class=SpellE>css</span> to
&lt;experiment name&gt;.<span class=SpellE>js</span>, .html, .<span
class=SpellE>css</span><o:p></o:p></p>

<p class=MsoNormal><span style='mso-spacerun:yes'></span>2. Modify code
in these &lt;experiment name&gt; files to fit with experiment:<o:p></o:p></p>

<p class=MsoNormal><span style='mso-spacerun:yes'></span>a. In
html: <o:p></o:p></p>

<p class=MsoNormal><span style='mso-spacerun:yes'></span>1.
keep the final &quot;chat&quot; div under &quot;<span class=SpellE>experimentarea</span>&quot;
div, <o:p></o:p></p>

<p class=MsoNormal><span style='mso-spacerun:yes'></span>a.
then <span class=GramE>replace</span> the other two <span class=SpellE>divs</span>
with one or two experiment-specific <span class=SpellE>divs</span> with the
actual specific puzzle html<o:p></o:p></p>

<p class=MsoNormal><span style='mso-spacerun:yes'></span><span
style='mso-spacerun:yes'></span>b. <span class=GramE>adjust</span> the sizes
of each div (including the &quot;chat&quot; div) by adjusting the &lt;num&gt;
class=&quot;col-<span class=SpellE>sm</span>-&lt;num&gt;&quot; in each div to
give appropriate <o:p></o:p></p>

<p class=MsoNormal><span style='mso-spacerun:yes'>
</span>proportion out of 12 - <span class=SpellE><span class=GramE>eg</span></span>
you might 3 sections with 4 as the number of each or 2 sections, one 4, one 8,
etc.,<o:p></o:p></p>

<p class=MsoNormal><span style='mso-spacerun:yes'>
</span>but the total must be 12&quot;<o:p></o:p></p>

<p class=MsoNormal><span style='mso-spacerun:yes'></span>c.
if the &quot;chat&quot; div is adjusted from 4, the <span class=GramE>&quot;.<span
class=SpellE>divChatWindow</span></span>&quot; width in network_chat.css must
be adjusted from 400px accordingly<o:p></o:p></p>

<p class=MsoNormal><span style='mso-spacerun:yes'>
</span>(<span class=SpellE><span class=GramE>eg</span>.</span> if the
&quot;chat&quot; section goes from col-sm-4 to col-sm-8, the width of <span
class=GramE>&quot;.<span class=SpellE>divChatWindow</span></span>&quot; must go
from 400px to 800px)<o:p></o:p></p>

<p class=MsoNormal><span style='mso-spacerun:yes'></span>2.
move the &quot;<span class=SpellE>submitandendbutton</span>&quot; (html shown
below) to an appropriate place<o:p></o:p></p>

<p class=MsoNormal><span style='mso-spacerun:yes'>
</span>&quot;&lt;button id=&quot;<span class=SpellE>submitandendbutton</span>&quot;
onclick=&quot;<span class=SpellE><span class=GramE>submitAnswersAndEnd</span></span><span
class=GramE>(</span>)&quot; hidden&gt;Finish&lt;/button&gt;&quot;<o:p></o:p></p>

<p class=MsoNormal><span style='mso-spacerun:yes'></span>b. In <span
class=SpellE>css</span>, put any game-specific <span class=SpellE>css</span>
code<o:p></o:p></p>

<p class=MsoNormal><span style='mso-spacerun:yes'></span>c. In <span
class=SpellE>js</span>:<o:p></o:p></p>

<p class=MsoNormal><span style='mso-spacerun:yes'></span>1.
modify but keep any functions starting &quot;<span class=SpellE>experimentSpecific</span>&quot;
as needed<o:p></o:p></p>

<p class=MsoNormal><span style='mso-spacerun:yes'></span>2. add
any other game-specific functions<o:p></o:p></p>

<p class=MsoNormal><span style='mso-spacerun:yes'></span>3. Fix
variables in &quot;Manage Variables&quot; tab that have
&quot;(EXPERIMENT-SPECIFIC)&quot; in description are specific to the experiment
from the template<o:p></o:p></p>

<p class=MsoNormal><span style='mso-spacerun:yes'></span>a. each
should either be renamed, with description and value modified to reflect the
current experiment, keeping &quot;(EXPERIMENT-SPECIFIC)&quot; <o:p></o:p></p>

<p class=MsoNormal><span style='mso-spacerun:yes'></span>in the
description <o:p></o:p></p>

<p class=MsoNormal><span style='mso-spacerun:yes'></span>b. OR
should be deactivated<o:p></o:p></p>

<p class=MsoNormal><span style='mso-spacerun:yes'></span>4. Add any
additional files needed (name &lt;experiment name&gt;&lt;additional
identification&gt;.<span class=SpellE>js</span> where needed like
matrix_reasoning_answer_key.js)<o:p></o:p></p>

<p class=MsoNormal><span style='mso-spacerun:yes'></span>5. Modify
instructions_text.js to give instructions and image examples for specific
experiment - make sure it handles instructions for both<o:p></o:p></p>

<p class=MsoNormal><span style='mso-spacerun:yes'></span>group and
individual<o:p></o:p></p>


</div>

</body>

</html>
-->