# Qualtrics styling for the RTHG S6 survey

Paste the stylesheet so the imported survey looks like the live instrument.
This is the ONLY manual styling step. A .qsf import never carries Look & Feel
styling with it, which is why the survey looks unstyled until you do this.

## Steps (about 60 seconds)

1. Open the imported survey in Qualtrics.
2. Go to the **Look & Feel** menu (the paint-roller / "Look & feel" tab).
3. Open the **Style** section.
4. In the **Custom CSS** box, paste the entire contents of `rthg-custom-css.css`.
5. Click **Apply** / **Save**, then click **Preview** (top right) to view it as a
   respondent. Do not judge styling from the editor canvas: the editor shows
   question names like `trust-warmup` and minimal formatting; only Preview and
   the live survey apply this CSS.

## Notes

- **No JavaScript needed for styling.** Tooltips open on hover (mouse) and on
  focus (keyboard Tab, or tap on touch screens). Nothing goes in the Header.
- This survey uses Qualtrics' New Survey Taking Experience (mandatory for new
  surveys since 2026-06-03). The CSS targets the survey's own `rthg-*` classes,
  so it is not affected by that change.
- **Verasight:** Verasight fields THIS Qualtrics survey via redirect links, so
  whatever you see in Preview is what their panel sees. They do not re-theme it.
- If the "I haven't thought about this" option does not drop onto its own line
  below the 1-7 scale in Preview, right-click that option, Inspect, note the
  element tag/class, and adjust the final CSS rule in `rthg-custom-css.css`.

## Page grouping (one page per section)

Import **`rthg-s6.qsf`** (or the regenerated `rthg-s6.txt`). Each block maps to
one live page, so the ballot vote + "which best describes" + "in your own words"
reason all sit on ONE page, the four designs + forced choice + mitigation
feedback sit on ONE page, and the panel questions sit on ONE page, exactly like
the live instrument. If you instead see one question per page, you imported an
older file or the old TXT (which had a page break after every question);
re-import the freshly generated `rthg-s6.qsf`.

If a block still splits in Qualtrics, open the block, click the three-dot menu,
and confirm there are no stray page breaks (there are none in the generated file).

## Optional: Back button + read-only-on-back lock

The live instrument shows a Back button but makes a revisited measurement page
read-only, so a later page cannot retroactively change an earlier vote. Qualtrics
has no native equivalent. By default the generated survey has **Back OFF** (vote
integrity guaranteed, no Back button). To match the live behaviour instead:

1. In `scripts/build-qsf.ts` set `BackButton: 'true'` and re-run the build.
2. Paste the entire contents of `rthg-readonly-on-back.js` into
   **Look & Feel > General > Header** (as a script block).
3. Preview: advance past a page, then click Back. The page should show your
   answers, disable them, and display the amber "submitted on a previous step"
   banner.

This is the only place JavaScript is used, and only if you choose this option.