Use when generating APA-style trial sequence diagrams for cognitive psychology experiments. Applies when given jsPsych, PsychoPy, MATLAB, or Python experiment scripts, or natural language descriptions of trial timelines (e.g., "Fixation 500ms → Stimulus 1000ms → Response 2000ms"). Covers fixation/stimulus/response/ITI sequences, multi-layout stimuli, and publication-ready single-trial flowchart figures.
Generates single-trial flowcharts for cognitive psychology experiments that conform to academic journal standards (e.g., APA formatting).
jsPsych timeline code (JS/HTML), or from MATLAB/Python experimental scripts.Before generating the code, clearly extract data across the following three dimensions:
+) remains on screen between stimulus groups.F = Same, J = Different).Do not use fixed questions. Instead, analyze the provided code or text description for ambiguities and generate 1-3 targeted questions to clarify the visualization requirements before generating the final HTML. Wait for the user's response before proceeding.
Examples of contexts that trigger dynamic questions:
The generated HTML must include the following structure, utilizing CSS variables for easy adjustment:
<!DOCTYPE html>
<html>
<head>
<style>
/* ===== User-defined Parameter Panel ===== */
:root {
/* Screen frame dimensions */
--frame-width: 160px;
--frame-height: 120px;
--frame-border-width: 3px;
/* Stimulus dimensions */
--stim-size: 32px;
--text-size: 28px;
--fixation-size: 24px;
/* Spacing and arrows */
--arrow-length: 40px;
--arrow-thickness: 2px;
--layout-gap: 30px;
/* Colors (Grayscale only) */
--border-color: #000000;
--bg-color: #ffffff;
--text-color: #333333;
}
/* Base styles */
body {
font-family: Arial, Helvetica, sans-serif;
background: var(--bg-color);
}
.screen-box {
width: var(--frame-width);
height: var(--frame-height);
border: var(--frame-border-width) solid var(--border-color);
background: var(--bg-color);
}
.arrow {
width: var(--arrow-length);
height: var(--arrow-thickness);
background: var(--border-color);
}
</style>
</head>
<body>
</body>
</html>
Automatically add an academic-style Figure Caption at the bottom of the flowchart:
<div class="figure-caption">
<strong>Figure 1.</strong> Single-trial timeline flowchart (Example: Abstract homogeneous condition).
A fixation cross is presented for 300-1000 ms, followed by the stimulus for 500 ms. Participants must make a judgment within 2000 ms (press 'F' for "Same", press 'J' for "Different"). The inter-trial interval is 300 ms.
</div>
font-style: italic).font-weight: bold).| Step | Action | Key rule |
|---|---|---|
| 1 | Parse code / description | Extract timing, layout, keys |
| 2 | Ask 1–3 targeted questions | Only about real ambiguities |
| 3 | Generate parameterized HTML | CSS variables at top, no external libs |
| 4 | Append Figure Caption | APA format, italic timing, bold keys |
| Visual token | Rule |
|---|---|
| Solid border | Formal trial |
| Dashed border | Practice trial |
| Italic text | Timing values |
| Bold text | Action labels / key prompts |
.html file.Reference file: example_psych_experiment_flowchart.html in the references folder.
This file demonstrates: