INSTRUCTIONS TO CREATE TEMPLATE FOR EACH EXPERIMENT
<br>    
&nbsp;&nbsp;&nbsp;&nbsp;
    FILES:
<br><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><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><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><br> 
&nbsp;&nbsp;&nbsp;&nbsp;
   4. EXPERIMENT-SPECIFIC FILES 1 - NEED TO RENAME FILE NAME AND MODIFY CONTENTS
<br><br>    
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
       &lt;experiment name&gt;.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
<br>     
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
       &lt;experiment name&gt;.html (rename and modify modify matrix_reasoning.html;
<br>     
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;       
            keep most divs as is except modify:
<br>     
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;       
                1. div id="experimentarea" (except usually do not modify div id="network-chat")
<br>     
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;      
                  a. make sure divs directly under "experimentarea" div (including id="network-chat") have class="col-sm-&lt;num&gt;"
<br>     
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    1. "network-chat" should be at least "col-sm-4"
<br>     
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    2. the &lt;num&gt;s on "col-sm-&lt;num&gt;" under "experimentarea" should add up to 12
<br>     
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        for example, in matrix_reasoning.html, the divs directly under "experimentarea" are:
<br>     
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                          &lt;div id = "puzzleimagearea" class="col-sm-4"&gt;
<br>     
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                          &lt;div id = "choicearea" class="col-sm-4"&gt;
<br>     
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                          &lt;div id="network-chat" class="col-sm-4"&gt; 
<br>     
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        where 4+4+4=12
<br>     
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        &lt;experiment name&gt;.css (rename and modify modify matrix_reasoning.css, if needed for experiment-specific html styles)
<br><br>    
&nbsp;&nbsp;&nbsp;&nbsp;
   5. EXPERIMENT-SPECIFIC FILES 2 - NEED TO BE ADDED, IF NEEDED
<br>     
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        optional files needed for experiment - any file name, any file ext (although start file name with &lt;experiment name&gt; when can so stands out)
<br><br>    
&nbsp;&nbsp;&nbsp;&nbsp;
    STEPS:
<br><br>     
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        1. Rename &lt;experiment name&gt;.js, .html, and .css to use actual experiment name (e.g. brainstorming.js)
<br><br>     
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        2. Modify code in these &lt;experiment name&gt; files to fit with experiment:
<br>     
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          a. In html: 
<br>     
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            1. keep the final "chat" div under "experimentarea" div, 
<br>     
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              a. then replace the other two divs with one or two experiment-specific divs with the actual specific puzzle html
<br>     
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              b. adjust the sizes of each div (including the "chat" div) by adjusting the &lt;num&gt; class="col-sm-&lt;num&gt;" in each div to give appropriate 
<br>     
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                 proportion out of 12 - eg you might 3 sections with 4 as the number of each or 2 sections, one 4, one 8, etc.,
<br>     
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                 but the total must be 12"
<br>     
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              c. if the "chat" div is adjusted from 4, the ".divChatWindow" width in network_chat.css must be adjusted from 400px accordingly
<br>     
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                 (eg. if the "chat" section goes from col-sm-4 to col-sm-8, the width of ".divChatWindow" must go from 400px to 800px)
<br>     
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            2. move the "submitandendbutton" (html shown below) to an appropriate place
<br>     
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                 "&lt;button id="submitandendbutton" onclick="submitAnswersAndEnd()" hidden&gt;Finish&lt;/button&gt;"
<br>     
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          b. In css, put any game-specific css code
<br>     
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          c. In js:
<br>     
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            1. modify but keep any functions starting "experimentSpecific" as needed
<br>     
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            2. add any other game-specific functions
<br><br>   
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        3. Fix variables in "Manage Variables" tab that have "(EXPERIMENT-SPECIFIC)" in description are specific to the experiment from the template
<br>     
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          a. each should either be renamed, with description and value modified to reflect the current experiment, keeping "(EXPERIMENT-SPECIFIC)" 
             in the description 
<br>     
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          b. OR should be deactivated
<br><br>     
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        4. Add any additional files needed (name &lt;experiment name&gt;&lt;additional identification&gt;.js where needed like matrix_reasoning_answer_key.js)
<br><br>    
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        5. Modify instructions_text.js to give instructions and image examples for specific experiment - make sure it handles instructions for both
           group and individual