# Build screens (https://www.getfounderhq.com/docs/journeys/build-screens)

A Journey is made of screens. Screens are grouped into arcs: chapters with
their own part of the progress bar.

## Add and order screens

In **Screens**, on the left of the editor:

- Press the plus and choose **New Screen** to add a screen to the current
  arc, or **New Arc** to start a new chapter.
- Drag a screen to move it, within an arc or to another one.
- Open a screen's menu to **Duplicate** or **Delete** it.

Select a screen to edit it in the **Inspector**, on the right. Its name is
at the top of the Inspector: click it to rename the screen.

## Edit a question screen

Every screen that asks something has these parts.

| Section | What you set |
| --- | --- |
| **Screen type** | What the screen does. You can change it. |
| **Answer name** | The name the answer is stored under. See [Name your answers](#name-your-answers). |
| **Content** | The question, a description, the button text |
| **Options**, **Fields**, or **Cards** | What the person chooses from, or fills in |
| **Layout** and the style section | How the options look |
| **Background** | A color, a gradient, an image, or a video |
| **Navigation** | The back button, the progress bar, and which screen comes next |

### Require an answer

| Screen | Setting |
| --- | --- |
| Single Select | **Required**. **Auto-advance on answer** moves on as soon as they pick. |
| Multi Select | **Fewest choices** and **Most choices** |
| Input | **Required**, on each field |
| Counter Select | **Smallest total** |
| Slider | **Lowest value**, **Highest value**, and **Start value** |

A Single Select with 7 options or more gets a search box by itself.

### Input fields

An Input screen holds one or more fields. Each field is **Text**,
**Email**, **Number**, or **Phone**, and has its own answer name.

## Name your answers

The **Answer name** is how you refer to an answer later: in a routing
rule, in a calculated value, in your text, and in the responses you
export.

Use letters, numbers, and underscores, starting with a letter: `team_size`.
A name can be up to 64 characters.

Two screens store more than one answer:

- An Input screen stores one per field.
- Swipe Cards store one per card, with the value `yes` or `no`.

To show an answer in your text, write its name like this: `${team_size}`.

## Build an info page with blocks

An **Info Page** asks nothing. You build it from blocks: a heading, an
image, a list, a button.

In the Inspector, find **Blocks** and press **Add block**. Drag blocks to
order them. Click a block to edit it.

There are 38 blocks, from **Heading** and **Text** to **Pricing Plans**,
**Line Chart**, and **Before / After**. See the
[Steps and blocks reference](/journeys/steps-and-blocks-reference) for all
of them.

### What a block can do

| Section | What you set |
| --- | --- |
| **Content** | The words, the image, the data |
| **Spacing**, **Border and corners**, **Size and position** | How it sits on the screen. **Pin to the bottom** keeps it there while the page scrolls. |
| **Animation** | How it appears and leaves |
| **Show when** | **Always**, or **On a condition**: only when an earlier answer matches |

### Buttons

A **Button** block has an **On tap** action:

| Action | What happens |
| --- | --- |
| **Go to the next screen** | Moves on |
| **Go back** | Returns to the previous screen |
| **Skip this screen** | Moves on without an answer |
| **Open a link** | Opens an address |
| **Start the purchase** | Tells your app to start its checkout |
| **Ask for a discount code** | Lets the person enter a code, which your app checks |

## Check your work in the preview

The preview is a working Journey. Click through it and answer the
questions. Your answers appear under **Variables**, where
**Clear answers** resets them. Preview answers are not saved.

- **Inspect elements** lets you click something in the preview to jump to
  its setting.
- The device menu switches between phones, a tablet, and a desktop.
- **Flow canvas** shows every screen and the paths between them.

## Let Astro build

Press **Astro** and describe what you want: "Create a welcome screen",
"Add a results page that shows their score". Astro's edits arrive as
unsaved changes, so you can look before you save.