Structure of an experiment

Most online experiments follow the same sequence of screens:

Consent: obtain consent from participant
Instructions: display one or more screens with instructions and optionally test participants' understanding of the instructions
Experimental procedure: present a sequence of experimental trials such as displaying an image and asking for a response
Debriefing: potentially provide feedback on performance, give information on experiment, and ask for participant feedback on their experience
End experiment: allow participant to navigate back to Prolific/MTurk

HTML code

To set up the basic structure of the experiment using HTML code for a browser-based experiment, it's helpful to differentiate between static content (consent and instruction screens) and dynamic content (main procedure of the experiment). This can be achieved by creating a series of visual groups in HTML that correspond to each phase of the experiment. For static content, basic HTML can be used to create the content, while JavaScript can be utilized to manipulate the dynamic content shown on each screen.

Here is some sample HTML/CSS code (without JavaScript) that establishes the fundamental structure of the experiment, with each phase associated with different screens. Knowledge of <div> tags are in HTML is helpful to understand this code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Experiment</title>
  <style>
    .graybox {
        border: 2px solid gray; background: #EEEEEE;
        padding-top: 20px; padding-bottom: 20px; padding-left: 50px; padding-right: 50px;
        width: 600px; margin: 0 auto; margin-bottom: 20px;
      }
  </style>
</head>
<body>
  <div class="graybox" id="consent">
    <h2>Participant Information</h2>
    <p>Show eligility requirements and acquire consent</p>
  </div>
  <div class="graybox" id="instructions">
    <h2>Instructions</h2>
    <p>Instructions will be shown here (possibly multiple pages).</p>
  </div>
  <div class="graybox" id="mainexperiment">
    <h2>Trial X of X</h2>
    <p>A sequence of stimuli will be shown on this page.</p>
  </div>
  <div class="graybox" id="debriefing">
    <h2>You have reached the end of the study.</h2>
    <p>Press the button to complete your assignment.</p>
  </div>
</body>
</html>

The HTML code will create the following visual groups that are simultaneously visible in the browser:

Please note that each visual group is currently presented as a gray box but the visual appearance can easily be changed by making changes to the CSS code in lines 9-11. You can customize the visual style to suit your preferences.

Changing the default screen visibility in HTML

Presently, all screens are visible in the browser, but various methods can control the default visibility of each individual screen. The control the visibility of a specific screen, you can use inline CSS tags. For instance, if you want to not display the instruction screen (by default), we can modify line 20 as follows:

<div class="graybox" id="instructions" style="display:none;">

This code adds the inline CSS code style="display:none" to instruct the browser not to render any HTML content in the section enclosed by the div tag. Similarly, you can modify lines 24 and 28 to display only the first consent screen.

To explicitly indicate that you want to make a <div> section visible, you can utilize the CSS code style="display:visible".

In the following section, we will explain how to use JavaScript to manipulate the visibility of <div> groups.