Instructions and End Screen

2nd Dec 2024

Updated on 14th May 2025

Experiment element only

This documentation describes only one part of an experiment. For other tasks, see the related pages.

Experiment instructions and task description

The first screen displays the instructions for the participant. It typically includes the following information:

A display with instructions for participants in a psycholinguistic experiment should clearly explain the task, the procedure, and any other relevant details. Here's a breakdown of what it should typically contain:

A brief welcome message.
The purpose of the experiment (without giving too much away, to avoid influencing responses).
A clear explanation of what participants are expected to do during the experiment.
The structure of the experiment (e.g. whether there is an exercise).
Detailed instructions (e.g. which keyboard buttons to use, whether to enable the camera), what actions to perform (e.g. click on an image, select an answer), and what constraints to consider (e.g. limited time to respond, cannot revisit previous items)
Examples to demonstrate the task (optional but recommended).
Instructions on timing and speed (e.g. how fast participants should respond).
Information about (rest) breaks and the approximate duration of the experiment.
Contact information

Including all these elements ensures that participants are well-informed, feel comfortable with the task, and can proceed without confusion, leading to cleaner, more reliable data collection.

End screen and goodbye

The end screen serves as the final step in the experiment, thanking participants for their time and participation. It typically includes a brief message of appreciation, a reminder of the study’s purpose, and any final instructions, such as completing a debriefing form or answering post-experiment questions. Providing a clear and friendly conclusion helps ensure a positive participant experience and can offer an opportunity to inform participants about the study’s findings or any follow-up steps. The content of the final screen may also depend on the ethics agreement.

Overview

The following part of the code handles the instructions. It creates a new trial with two elements:

An HTML page with the instructions.
A button for continuing to the next screen or trial.

The .cssContainer() method adds a 1em margin around both the instruction and the button.
The .print() method displays the instructions and the button.
The .wait() method waits until the button is pressed before continuing.

More documentation

The information contained in this demo is an elaboration and a particular case of the HTML element described in the PCIbex documentation.

// Instructions

newTrial("instructions",
    newHtml("instructions_text", "instructions.html")
        .cssContainer({"margin":"1em"})
        .print()
        ,
    newButton("go_to_exercise", "Continue")
        .cssContainer({"margin":"1em"})
        .print()
        .wait()
);

Dependencies

Resources
- instructions.html instructions for the participant
- end.html purpose of the study, code for compensation, and goodbye
- (optional) logo.png
Scripts
- main.js
Aesthetics
- global_main.css
- PennController.css
Modules
- PennController.js

Other modules and aesthetics may be necessary if your experiment uses other trials, e.g. a form for recording participant information.

The content of the instructions.html file can be adjusted to describe the task. Click on Details to see the contents of the instructions file.

<html>
<head>
    <title>Linguistics Study Demo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
    <h1>Instructions</h1>
    <p>Your task in this experiment is to read sentences. 
    These will be shown to you piece by piece. 
    First, an asterisk (<tt>*</tt>) will appear in the center of the monitor. 
    Press the <em>SPACEBAR</em> to view the sentence.
    At first, you'll see dashes representing the length of the sentence:</p>
    <div class='fancy'><p style="text-align: center;"><tt>___ ___ ____ __ ___ ____</tt></p></div>

    <p>To read the first part of the sentence, press the <em>SPACEBAR</em>:</p>

    <div class='fancy'><p style="text-align: center;"><tt>The cat ____ __ ___ ____</tt></p></div>

    <p>As soon as you press the <em>SPACEBAR</em> again, the next sentence part will appear, and the previous part will disappear.
    This will continue until you reach the end of the sentence. 
    After reading the last part of the sentence, press the <em>SPACEBAR</em> to continue.</p>
    <div class='fancy'><p style="text-align: center;"><tt>___ ___ sits __ ___ ____</tt><br>
                          <tt>___ ___ ____ on the mat.</tt></p></div>

    <p>Read the sentences at your usual speed and make sure you understand the meaning.
    Please always keep one finger on the <em>SPACEBAR</em> while reading.</p>

    <p>Some sentences will be followed by a question with two answers about the sentence you just saw.
    Please answer this question by either clicking on the appropriate answer or pressing 1 (=<em>LEFT</em>) or 2 (=<em>RIGHT</em>).
    Once you select an answer, you cannot change it. 
    For example, a question might look like this:</p>

    <div class='fancy'><p style="text-align: center;">Who or what was mentioned in the sentence?<br>
    1 = A cat &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2 = A dog</p></div>

    <p>You'll begin by practicing with 9 examples, followed by the actual experiment.</p>
    <p>If you have any questions about the task or if you're experiencing technical difficulties, please contact the experimenter: <br>
        <a href="https://pryslopska.com/">Anna Pryslopska</a><br/> <tt>anna . pryslopska [at] gmail . com</tt></p>
</body>
</html>

Running the code

To run the experiment, clone or download the repository from GitHub. repository containing the experiment files or download them directly. Alternatively, use this demo link to test the code online before deploying it. Once uploaded, launch the code through PCIbex to start collecting data.