# Study setup A React block (a whole screen) in [Beamline](https://beamline.io/)'s [Research & design](https://beamline.io/components/apps/research-design) app. Live demo: https://beamline.io/components/study-setup Set up an unmoderated test and its screener. Test: what's tested (a website, a prototype by its share link, an app by its store page), who takes it (people from a panel, matched to an audience and screened, or people invited by link), its name, scenario and tasks; everything still missing is listed before launch, preview shows what a participant sees, and the test launches now or on a date, or goes for review when the workspace approves tests first. Screener: questions with one or several answers, each accepting, rejecting or not mattering (a stripe says which); a question where every answer rejects is flagged and blocks launch, one with no accepting answer is said; trying the screener as a participant says whether they'd be invited and why not; the questions save as a template. ## Use it for - Setting up a usability test, survey or interview round with who takes it and what they do. - Any recruitment form where answers decide who is invited and launch waits until everything is in. ## Not for - Building the questions of a learner's quiz ([question-builder](https://beamline.io/components/question-builder)). - Ordering a study's blocks and their branches ([study-flow](https://beamline.io/components/study-flow)). ## Anatomy - header: the product's mark, the test's name, Test or Screener - test: what's tested, who takes it, name, country and participants (panel only), address by target, scenario, tasks - screener: questions with one or several answers, each answer's text and outcome, duplicate and remove; problems per question - side (test): what's missing, preview, launch now or on a date, the result - side (screener): the screener tried as a participant with its verdict, save as a template ## States - missing: listed (amber) until everything is in; launch and preview off - ready: said (green); preview open - launched, scheduled (green); sent for review (amber) - invite link shown after launch by link - screener: every answer rejects (red, blocks launch), no accepting answer (amber), answers without text counted - trying: questions left, eligible (green), not eligible with the reason (red) - template saved - phone: one column - right to left: the page mirrors ## Keyboard - Tab through every field; arrows choose cards, answers and outcomes; Enter or Space presses buttons ## Motion Nothing moves; changes appear on input. ## Props | Prop | Type | Default | Description | | --- | --- | --- | --- | | `defaultDraft` | `Partial` | — | | | `defaultQuestions` | `ScreenerQuestion[]` | — | | | `defaultTab` | `"screener" \| "test"` | — | | | `countries` | `{ value: string; label: string; }[]` | — | Countries the panel can recruit from. | | `reviewRequired` | `boolean` | — | The workspace approves tests before they launch. | | `onLaunch` | `((draft: StudyDraft, questions: ScreenerQuestion[], when: Date \| null) => void)` | — | | | `onSaveTemplate` | `((name: string, questions: ScreenerQuestion[]) => void)` | — | | | `product` | `string` | — | Your product's name, shown as its mark. | | `className` | `string` | — | Classes on the documented visual root; no override by default. | | `ref` | `Ref` | — | Receives the documented native target or imperative handle; omitted by default. | ## Built from - [Avatar](https://beamline.io/components/avatar.md) - [Button](https://beamline.io/components/button.md) - [Calendar](https://beamline.io/components/calendar.md) - [Checkbox](https://beamline.io/components/checkbox.md) - [Date picker](https://beamline.io/components/date-picker.md) - [Dropdown menu](https://beamline.io/components/dropdown-menu.md) - [Inline edit](https://beamline.io/components/inline-edit.md) - [Input](https://beamline.io/components/input.md) - [Label](https://beamline.io/components/label.md) - [Number field](https://beamline.io/components/number-field.md) - [Radio group](https://beamline.io/components/radio-group.md) - [Segmented control](https://beamline.io/components/segmented-control.md) - [Select](https://beamline.io/components/select.md) - [Spinner](https://beamline.io/components/spinner.md) - [Text morph](https://beamline.io/components/text-morph.md) - [Textarea](https://beamline.io/components/textarea.md) - [Tooltip](https://beamline.io/components/tooltip.md) ## Import ```tsx import { StudySetup } from "@beamline/study-setup"; ``` ## Get it Study setup is part of Beamline UI. Install the parts you need in your React app as compiled packages or editable source. [Get Beamline](https://beamline.io/checkout?pack=complete) · [Connect your agent](https://beamline.io/connect) ## More in Research & design - [Research synthesis](https://beamline.io/components/research-synthesis): A research study turned into evidence in one place. Transcripts: passages marked as accepted highlights or as the assistant's suggestions (dashed)… - [Study flow](https://beamline.io/components/study-flow): A study's blocks in order, each with where people go next. A block that routes by its answer (multiple choice, scale, open question, prototype task) has… - [Participant review](https://beamline.io/components/participant-review): One participant's session, answer by answer, beside the list of everyone who took the study. The list filters (finished, left early, with a recording)… - [Click heatmap](https://beamline.io/components/click-heatmap): One screen of a usability task as it looked (your prototype's frame or a page built from your parts, scaled into a phone) with where people clicked over… - [Tree test](https://beamline.io/components/tree-test): A tree test: build a navigation tree and read where people went. Build: pages added at the top or under any page, indented under the page above or moved… - [Prototype task](https://beamline.io/components/prototype-task): A prototype task in a study. The linked prototype refreshes from the design keeping the task and paths (a start screen gone from the new version said, a… - [Task results](https://beamline.io/components/task-results): A usability task's results, from headline outcomes down to paths and screens. Outcomes (direct success, indirect success, gave up) say their share and… - [Matrix question](https://beamline.io/components/matrix-question): A matrix question and the participant's side of it, side by side. Rows (up to ten) share one set of choices (two to seven); Enter adds a row, several… - [Prototype review](https://beamline.io/components/prototype-review): Reviewing a design file's clickable prototype. Present: the board on a stage with its wireframe, the flow chosen (an unavailable one can't be), Back… - [Report builder](https://beamline.io/components/report-builder): Build a chart from your metrics without code: choose metrics, how to group them over time, an optional breakdown, filters, the range and the chart, see… - [Report library](https://beamline.io/components/report-library): A business's reports in one place. The directory: reports by topic and group with search, each with what it answers; one this person can't open says why… - [Review page builder](https://beamline.io/components/review-page-builder): Building the page reviewers use to go through records one by one. The queue of records (one with no title shows its id instead of a blank); the record as… - [Database builder](https://beamline.io/components/database-builder): What a database does for the people who use it, built in one place. Templates: starting values per property (a relation default points at an existing… - [Workflow builder](https://beamline.io/components/workflow-builder): Automation rules for a SaaS without code: a trigger, conditions built with the query builder that branch into Yes and No, actions and waits, drawn as a… - [Workflow library](https://beamline.io/components/workflow-library): The automation library: every automation as a row (what starts it, whether it's live, a draft or paused, who owns it, when it last ran, and its runs this… - [Drawing board](https://beamline.io/components/drawing-board): A whiteboard a team already knows how to use, like FigJam: tools in a floating bar at the bottom (Select V, Hand H, Sticky note S, Shape R/O/D, Connector… - [Model workbench](https://beamline.io/components/model-workbench): A CAD model's workbench around a large isometric scene of its bodies, each shaded from its material's appearance with a soft ground shadow and an axis… - [Component properties](https://beamline.io/components/component-properties): A design system component from three sides. Its variants as a matrix on two chosen properties, the others filtering it, each cell drawing the variant; a… - [Slot editor](https://beamline.io/components/slot-editor): Slots in a design system component, from making to filling. The main component's layer tree with a checkbox per layer: a nested frame converts to a slot… Part of [Beamline UI: polished, editable React components and complete screens for custom applications](https://beamline.io/). [Build your own style from any look; tokens, fonts, radii, motion; not only colours](https://beamline.io/docs/customize).