Blocking out your experiment.

Back to Contents

First, make sure you have:

(as of June 2020)

You will learn:

  1. How to make navigable pages.
  2. How to make the viewer show a particular image
  3. How to make a simple branch in pages

In this tutorial I duplicate my trial pages very early. This is because I am recreating part of the demo page which has very different trial types. It is likely you will be only creating a single type of trial. You would therefore wish to make an experiment with only one trial page initially, and only duplicate it and replace key words after finishing the form validation tutorial (the third one).

Don't worry too much about the debrief pages (unless you know exactly what you want). We will be adding a lot to these in the upcoming tutorials.

For these code heavy tutorials, it is recommended to full screen the video and watch at 720p


The changed files for this step can be found here.

The changed files in these tutorials are in the same layout as the build folder. You can simpy:
  • extract the downloaded files
  • enter the newly extracted folder
  • copy all (Ctrl + A, Ctrl + C)
  • go into your build folder
  • paste the files (Ctrl + V)
  • choose Replace All or whatever similar option exists in the dialog that appears.
     If this dialog didn't appear, you may have copied the wrong files or pasted them in the wrong area.

Be aware that two changes aren't refelected in the files:
  1. I rename file03.jpg in the assets/slides folder to file02.jpg.
  2. I rename viewerBlank.html to v.html (This doesn't matter as you will get v.html in the above files. Just be aware that viewerBlank.html is no longer used, however you may wish to keep it around if you haven't cached its sample inputs anywhere).

Proceed to learn how to add inputs to each page.