Tracker Design and Sensitivity

In order to adjust the tracking frequency, please open /lib/js/tracker.js with a text editor. You can adjust the tracking frequency with the variable var period= 10,. This value is the interval length between two data points in ms. The setting period=10 equals a 100 Hz frequency for tracking tasks. The tracker is deactivated on all other pages.

Design:

All design features (background color, images, text format, size) can be edited in /lib/style.css. Please do not change the position of the classes; i.e. just replace the value, but do not move the items around. Some of the most important style options:

Side width:

.wrapper {
width : 80%;
max-width: 42.5rem;
margin: 0 auto;
padding: 1rem;
}

The page is set to fill 80% of the screen, with a maximum width of 42.5 rem. You can use px as well.

Side heigth:

.page {
position: relative;
padding: 1rem;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: stretch;
width: 100%;
padding-bottom: 5.125rem;
min-height: 20rem;
}

The page height is defined by the items on the longest individual page. If the page length exceeds the screen size, please consider removing individual items from the page. you can also define the height using 80vh.

Position of start button for the experiments:

.btn-start {
margin-top: 500px;
}

The button is positioned 500 px from the top of the page.

Size of the images for the tracking experiment

The tracker will automatically resize your images within given boundaries.

.select-items .tracker-select–image .input-item img {
max-width: 300px;
max-height: 800px;
min-width: 100px;
min-height: 100px;
}