Skip to content

fix: render markdown in multiple-choice survey options#1130

Open
liuziyi219 wants to merge 1 commit into
PAIR-code:mainfrom
liuziyi219:fix/markdown-in-multiple-choice-options
Open

fix: render markdown in multiple-choice survey options#1130
liuziyi219 wants to merge 1 commit into
PAIR-code:mainfrom
liuziyi219:fix/markdown-in-multiple-choice-options

Conversation

@liuziyi219
Copy link
Copy Markdown

Summary

Survey question titles are rendered through convertMarkdownToHTML, but
multiple-choice option text was interpolated raw. Markdown such as
**bold** therefore displayed literally in radio-button labels and dropdown
options, in both the participant survey view and the experimenter summary view.

Changes

  • survey_view.ts (participant view) — render markdown for radio-button
    option labels (regular and image variants) and dropdown options.
  • survey_summary_view.ts (experimenter summary view) — same fix for
    radio-button option labels.
  • survey_view.scss — add the html-preview mixin to .radio-question
    so the <p> wrapper emitted by the markdown converter does not introduce
    stray margins. .question already includes this mixin.

Option text is now rendered the same way question titles already are
(unsafeHTML(convertMarkdownToHTML(...))). aria-label attributes are
intentionally left as plain text.

Testing

  • Ran locally against the Firebase emulator.
  • Created a survey stage with a multiple-choice question containing markdown
    (**bold**, _italic_) in both the question title and the options.
  • Confirmed the options now render markdown in the participant view,
    consistent with the question title.

Fixes #1097

Survey question titles were passed through convertMarkdownToHTML, but multiple-choice option text was interpolated raw. As a result, markdown such as **bold** showed literally in radio-button labels and dropdown options, both in the participant survey view and the experimenter summary view.

Render option text with convertMarkdownToHTML + unsafeHTML, matching how titles are rendered. Add the html-preview mixin to .radio-question so the <p> wrapper emitted by the markdown converter does not introduce stray margins.

Fixes PAIR-code#1097

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
@google-cla
Copy link
Copy Markdown

google-cla Bot commented May 22, 2026

Thanks for your pull request! It looks like this may be your first contribution to a Google open source project. Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA).

View this failed invocation of the CLA check for more information.

For the most up to date status, view the checks section at the bottom of the pull request.

Copy link
Copy Markdown
Member

@cjqian cjqian left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice fix, Ziyi! :)

@jimbojw
Copy link
Copy Markdown
Collaborator

jimbojw commented May 28, 2026

@liuziyi219 , you'll need to fill out the Google CLA.

@liuziyi219
Copy link
Copy Markdown
Author

@liuziyi219 , you'll need to fill out the Google CLA.

I have signed. Could you check again plz? Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Markdown rendering doesn’t work in multiple choice survey responses

3 participants