Styles to break up long lists of options

[virginiascarlett]

Description

Hi, I'm in the process of creating my first surveydown survey!
I'm struggling with the visual design of a question with many options:

It's just a big wall of options, so it's a bit hard to read. I don't think buttons look any better:

The bolding the first option in each "group" helps a little bit, I think:

I'm not sure if there's an existing feature that would help with this, or if there's a new feature you could add. Here are some ideas we thought of:

• Allow multiple-select for matrices (and maybe allow color-coding of rows)
• Allow <br> for line breaks between multiple-choice options
• Allow titles for sets of options

Thanks for considering it, and thanks for making this tool! (I will drop some praise in your praise thread once I've deployed the survey. :) )

[jhelvy]

Given the nature of this question, have you tried using a matrix style question? It might work out well to put the day of the week (mon, tues, etc) across the top.
https://surveydown.org/docs/question-types#matrix

[virginiascarlett]

Thanks for the quick reply! Unfortunately, I need the user to be able to select all that apply, and I don't think that's possible with the surveydown matrices. If they select Tuesday morning, then they can't select Monday morning.

[jhelvy]

Hmm, you're right - we didn't allow for a multiple check box matrix type question. We probably need that, I'll post another issue to create that.

[jhelvy]

Given that matrix type questions aren't working, another idea might be to make five questions (one for each day), and arrange them using a Quarto grid. It's not ideal, but it might work. You could just make the label the day of the week (Monday, Tuesday, etc.) and put the question itself in the text above the question in the plain markdown. I have no idea how good this would look, but it's just an idea.

[virginiascarlett]

Thanks for the suggestions @jhelvy! I ended up doing the simplest possible thing: I just made each group of options its own question.

The grid looked okay, but I wasn't convinced that it looked better than the option above, and I wasn't sure how it would behave on mobile.

So I just went with the first option. I agree that a multi-select matrix would be handy in the future. Thanks again!

Here's the code for the grid for those who are interested.

What times might work better for you? Select all that apply.

::: {.grid}

::: {.g-col-6}
```{r}
sd_question(
  id = 'time_prefs_mon',
  type = 'mc_multiple',
  label = "Monday times:",
  option = c(
    "Monday morning" = "mon_am",
    "Monday lunchtime" = "mon_lunch",
    "Monday early afternoon" = "mon_early_pm",
    "Monday late afternoon" = "mon_late_pm"
  ),
  direction = "vertical"
)
 ```
:::

::: {.g-col-6}
```{r}
sd_question(
  id = 'time_prefs_tue',
  type = 'mc_multiple',
  label = "Tuesday times:",
  option = c(
    "Tuesday morning" = "tue_am",
    "Tuesday lunchtime" = "tue_lunch",
    "Tuesday early afternoon" = "tue_early_pm",
    "Tuesday late afternoon" = "tue_late_pm"
  ),
  direction = "vertical"
)
```
:::

:::

[jhelvy]

Looks pretty good actually! Yeah having a multi-select matrix is now in the development queue.