Programming behavioral experiments · Meeting 4

A reliable participant experience

Presentation, assets, browser assumptions, and pilot evidence

Bartosz Maćkiewicz

Concept · 04

Today's outcome

Make the task readable and make predictable failures visible.

Artifact: an image-categorization pilot with controlled layout, explicit preload, a browser check, and a pilot log.

Think first · 04

Retrieval: what does running once prove?

One successful run shows that one path worked in one environment.

It does not establish correct mappings, complete data, working failure paths, device compatibility, or research validity.

Name one additional test your project needs.

Concept · 04

Instructions are part of the method

Tell participants:

what to attend to;
which response means what;
whether speed matters and the deadline;
what practice and completion look like;
how to stop.

Use familiar language before technical terms.

Concept · 04

Structure before decoration

<section class="card">
  <h1>Shape categorization</h1>
  <p>F = rounded; J = angular.</p>
  <p>You have 3 seconds per shape.</p>
</section>

The heading, mapping, and action should be easy to find.

Concept · 04

CSS controls presentation

.card {
  max-width: 46rem;
  padding: 1.5rem;
  background: white;
}

Keep spacing, stimulus size, and response reminders consistent. Avoid decorative changes that introduce condition differences.

Try it · 04

Live checkpoint L1: instruction card

Add the card class and improve one sentence.

Ask a partner to explain the mapping without your help. Test readability at the classroom display size.

The core styles are in .shared/course.css.

Concept · 04

A file path is part of the experiment

Images are local assets in materials/assets/.

Check exact filename, case, and relative location.

A path that works in your folder may break when only one file is copied. Package and test the whole experiment.

Concept · 04

Preload the actual item list

Item listUse the actual asset paths.

PreloadLoad successfully or show the error.

TaskPresent the image; record a response.

Use images: SHAPE_STIMULI.map((item) => item.file). Set continue_after_error: false for a task that requires every image.

Dynamic paths need an explicit preload list. Test a missing file deliberately.

Experiment laboratory · 04

Live checkpoint L2: images

Open the lab in its own tab · Predict → edit → run → inspect · The preview captures response keys.

Preload both images, then run the response procedure.

Verify a rounded and an angular shape, their keys, and rows. Temporarily break a filename; confirm the error path; then restore it and rerun.

Experiment laboratory · 04

A controlled image trial

Open the lab in its own tab · Predict → edit → run → inspect · The preview captures response keys.

const trial = {
  type: jsPsychImageKeyboardResponse,
  stimulus: jsPsych.timelineVariable("file"),
  stimulus_height: 220,
  choices: ["f", "j"],
  trial_duration: 3000
};

Displayed size is a design choice. Pixels are not visual angle.

Read the evidence · 04

Browser checks make assumptions explicit

const check = {
  type: jsPsychBrowserCheck,
  minimum_width: 800,
  minimum_height: 600,
  inclusion_function: (data) => !data.mobile
};

A viewport check is not proof of a physical keyboard.

Try it · 04

Live checkpoint L3: test the check

Reduce the browser viewport and inspect the resize message.

Restore it and verify continuation. Discuss what the mobile exclusion tests and what it cannot guarantee.

Choose thresholds from task requirements, not habit.

Concept · 04

Timing: distinguish claims

Preload helps avoid missing or delayed assets.

It does not remove refresh-rate, keyboard, browser, or operating-system differences.

Do not infer millisecond-accurate physical presentation from a number in your source file alone.

Reveal the reasoning

A requested 200 ms duration is not a measurement of physical display onset or duration. The browser, display, and device also matter.

Concept · 04

Access is a design question

Keep text legible and focus visible.
Provide a non-color alternative when color is not essential.
Explain required input devices.
Keep camera activities optional.

If an adaptation changes the measure, document the change.

Build and verify · 04

Workshop: finish the shape task

Preload the complete item list.
Control stimulus size and randomize order.
Check scoring and clear summaries.
Run a failure test and a fresh-folder test.

Record what actually happened in the pilot log.

Concept · 04

Pilot log: expected versus observed

Case	Expected	Evidence
Valid response	Correct item/key row	Export
Timeout	Missing response, false correctness	Export
Missing image	Helpful stop	Screen/error
Small viewport	Resize route	Screen
Download	File opens with final row	CSV/JSON

Concept · 04

Do not confuse a pilot with a result

A pilot tests instructions, flow, loading, and data.

It can reveal design problems. It does not need to produce a significant effect. Label synthetic/self-test data clearly.

Concept · 04

Project clinic

Use eight minutes per project:

explain the question;
run one critical path;
inspect one row;
agree the most important next fix.

Peer feedback is formative, not a grade.

Think first · 04

Exit ticket and next step

Show one failure you deliberately tested and its evidence.

Before Meeting 5: submit your pilot, list remaining bugs, and read the deployment guide. A webcam is optional.