Design your own page - MCWillemsen/mouselabWEB20 GitHub Wiki

To test and design your own page, you can edit one of the existing pages, change the HTML code and the link to the json file. Just like in mouselabWEB 1.0 a set of hidden variables define the experiment name of a page, the nextURL to browse to etc.

       `<input id="expName" type=hidden name="expname" value="gamble">
        <input type=hidden name="nextURL" value="gamble2.php">`

The actual mouselabWEB table will be constructed from the JSON file and appended to this container DIV, so leave the code below as is (though you can surely relocate it in the HTML code).

 `<div id="container" class="w3-white w3-container w3-col" style="width:90%"></div>`

The following line in the javascript just below the end of the HTML code calls the javascript function to generate the code.

 `generateTrial("json_files/gamble.json", "dynSet", o);`

Adjusting this line to point to the right json file, the set to be used (in this case dynSet). the "o" indicates the order of presentation, and this is taken from the condnum variable in the call to the page, and can be left as is. If "o" is changed to "random" the script will randomize option order.

JSON files can be tested and edited in the special JSON editor (jsonedit.html). The page allows to test and adapt JSON code. It starts with a one-box version that can be extended. You can also copy-paste the JSON files from the demo files and edit these.

Some tips in extending an existing JSON file. If you add options or attributes, you typically also need to adjust other things, such as adding addtional cell layouts or options in the option order. This can be confusing at first. The "JSON structure and properties.docx" file provides the definition of the JSON file.