INSTRUCTIONS TO CREATE TEMPLATE FOR EACH EXPERIMENT
    
    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:
                                                        <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