Creating Simple Form Elements.



Back to Contents



First, make sure you have:

(as of June 2020)

You will learn:

  1. How to make simple text entry boxes, check boxes, and radio buttons
  2. How to create inputs which control the viewer's windowing
  3. How to integrate your forms dynamically with the viewer.


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



Resources


The changed files for this step can be found here.

Notes:
  1. I only casually carry over windows from the demo. If you want to set your own windows see how on the shader page.
  2. If you are making new files in MS Windows, it is probably best to set their line endings to Unix (to prevent potential compatibility issues later when you move your experiment to a remote server).
  3. I am using click events to dynamically create text boxes. It is the dynamic nature of the form which creates all of the complexity in this tutorial (as well as complexity in the validation and data transmission tutorials).
    If you only want to see where a user clicks, this is very simple with either the viewer specific function: viewerGetClicksFor, or the function in common.js addClickData which allows you to grab click data the same way you get scroll times.
  4. The changed files above are slightly different from the tutorial
    1. The None Found check box for the windowing trial page (Trial2) has been fixed so that it has the proper label
    2. The User1 shader was removed from customInit.js


Proceed to learn how to validate these inputs