A scalable, natural alternative to eye-tracking.
You can test the interface by running a local http server of your choice. For instance:
python3 -m http.server
We have configured the interface with some pre-prepared images and code charts so that you can see how it works.
Using the interface for your own data collection requires two steps: 1) generating input data to the interface and 2) configuring the webpage to your needs.
The CodeCharts interface expects input task data in a specific format. We have provided code that takes in a folder of target images and a few other parameters and outputs the data expected by the CodeCharts interface. To generate the input data, do the following:
- TODO
- TODO
- TODO
Configure the interface to your needs as follows:
- Open the file
assets/js/custom.js
. This is the principal JavaScript file responsable for the interface logic. At the top of the file there is a section labeled "UI Parameters" that contains configurable parameters that change how the task runs. Change the variablesN_BUCKETS
andN_SUBJ_FILES
to match the number of buckets and subject files, respectively, that you generated above. To make sure the JavaScript can find your input data, either ensure that your data is in the fileassets/task_data
or change the variablesDATA_BASE_PATH
andIMAGE_BASE_PATH
. - Change the variables
NUM_MSEC_CROSS
,NUM_MSEC_IMAGE
,NUM_MSEC_SENTINEL
, andNUM_MSEC_CHAR
to change how long the fixation cross, target images, sentinel images, and codecharts are shown to the participant. Adjust any other variables in the "UI Parameters" section that you desire. - Edit the file
config.json
to customize the task title, instructions, and disclaimer. You can also set the booleanadvanced.includeDemographicSurvey
to include a demographic survey at the end of the task, and you can setadvanced.hideIfNotAccepted
to block continuing with the task if it is on MTurk and the worker has not accepted the task. - Configure a back-end to store your data. The interface works out-of-the-box as an MTurk
ExternalQuestion
. If you are not using MTurk and/or you want to use your own back-end to store data, set the variableadvanced.externalSubmit
inconfig.json
totrue
and changeexternalSubmitUrl
to the url that you would like toPOST
data to instead. With this configuration, the interface will expect a json response of the form{"key": <submit_code>}
. The submit code will be shown to the user on completion.
config.json
: configuration files containing general task-setup parameters.index.html
: main html file for the interfaceassets/
: contains JavaScript files and input data for the interface as well as some additional libraries and assets. Important files detailed below:js/custom.js
: JS file containing all task-specific logic. Most changes you make to the interface should involve this file.js/main.js
: generic file handling task flow, data submission, etc. Does not contain task-specific logic.task_data
: default folder for storing task input data.