feat: add linear scale questions

[Chartman123]

This is a first attempt to implement a new question type. It will close #2605

Current state of implementation:

Edit labels:

Edit min/max option in context menu:

Submit view:

Results view:

----- Mobile -----
Submit view:

Edit view:

[codecov]

Codecov Report

Attention: Patch coverage is 92.85714% with 1 line in your changes missing coverage. Please review.

Project coverage is 43.72%. Comparing base (e88ba60) to head (d1975dc).
Report is 22 commits behind head on main.

Additional details and impacted files

@@             Coverage Diff              @@
##               main    #2609      +/-   ##
============================================
+ Coverage     43.55%   43.72%   +0.16%     
- Complexity      908      921      +13     
============================================
  Files            78       78              
  Lines          3391     3403      +12     
============================================
+ Hits           1477     1488      +11     
- Misses         1914     1915       +1     

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[susnux]

I also saw this sometimes with labels for each option like:

strongly agree    agree    neutral   disagree     strongly disagree
    [ ]            [ ]       [ ]       [ ]               [ ]

[Chartman123]

I also saw this sometimes with labels for each option like:

strongly agree    agree    neutral   disagree     strongly disagree
    [ ]            [ ]       [ ]           [ ]            [ ]

Yes, there are different implementations. I used Google Forms as a "template", Microsoft does it more like in your comment.

[jancborchardt]

Nice! So as defaults, we could set a scale of 1 to 5, since that is what the usual Likert scale is as well.
The labels we could also set to a default of "Strongly disagree" for lowest and "Strongly agree" for the highest, as @susnux mentions – probably best to leave out the other labels, except if we default to those as labels and don’t allow customization. (Or we do an either/or: Either you get numbers, or you get labels.)

Google Forms defaults to 1 for lowest and 5 for highest, and allows only 0 or 1 for lowest as well as only 2 to 10 for highest, which makes sense.

[nimishavijay]

Awesome! Looks great already!

For reference this is what Google Forms does, but I actually love how we can see the scale in your screenshot

Here are some ideas to improve the look of this

• Since the lowest and highest value is an important attribute of the question, we can move it outside to below the scale
• Maybe the scale can be a more direct "preview". What would the scale look like in view mode? Could that be replicated here?
• The labels for the lowest and highest value can also be outside using the inputs with the floating label, what do you think?

Then with the preview it would be like:

             1    2    3    4    5
not so good [ ]  [ ]  [ ]  [ ]  [ ] very good

Lowest value  [ 1 ] [ not so good  ]
Highest value [ 5 ] [ very good    ]

What do you think?

[Chartman123]

Maybe the scale can be a more direct "preview". What would the scale look like in view mode? Could that be replicated here?

@nimishavijay The scale in the edit mode adjusts directly to the changed values in the actions menu and it will look the same in edit and view mode :)

Since the lowest and highest value is an important attribute of the question, we can move it outside to below the scale
The labels for the lowest and highest value can also be outside using the inputs with the floating label, what do you think?

You mean to move the settings from the menu directly to the content of the question? This would be feasible, but also break the UX regarding where to configure the settings of the questions.

Google Forms defaults to 1 for lowest and 5 for highest, and allows only 0 or 1 for lowest as well as only 2 to 10 for highest, which makes sense.

@jancborchardt those are also the defaults for us here :)

probably best to leave out the other labels, except if we default to those as labels and don’t allow customization. (Or we do an either/or: Either you get numbers, or you get labels.)

Google allows to customize all labels for matrix questions. So for that use case you could then use a matrix question with just one row.

[nimishavijay]

The scale in the edit mode adjusts directly to the changed values in the actions menu and it will look the same in edit and view mode :)

Oh nice! Do you think they can be radio buttons like in Google forms then? I took a quick look at general likert scale forms in other software and radio buttons seems to ne the general standard.

You mean to move the settings from the menu directly to the content of the question? This would be feasible, but also break the UX regarding where to configure the settings of the questions.

Yes, I understand. I see this as rather the settings of the options rather than settings of the question itself (eg. Required question, technical question, etc).
The question types so far were simple enough that they didn't need many options up front, but I'd say this is more complex, what do you think?

[Chartman123]

I see this as rather the settings of the options rather than settings of the question itself (eg. Required question, technical question, etc).

I understand that, but this will break with our current philosophy to show the form in edit view in the same way (except for the borders) as it will be in the submit/view mode. I'm not really sure about that.

Do you think they can be radio buttons like in Google forms then? I took a quick look at general likert scale forms in other software and radio buttons seems to ne the general standard.

Yes, sure:

But I also quite like the button variant, could be some sort of "unique selling point". 😉

[susnux]

I understand that, but this will break with our current philosophy to show the form in edit view in the same way (except for the borders) as it will be in the submit/view mode. I'm not really sure about that.

We could make the labels text boxes just like we do for other question types.
And the options could have a + or -

So nothing in the popover menu needed.

[Chartman123]

@Elsensee would you like to work on the remaining CSS/design issues here?

[Chartman123]

@nimishavijay I improved the layout on mobile devices :) Probably not the best solution but it works. Do you know someone who could help here? Or do you think we can leave it as it is right now?

[nimishavijay]

Looks good in mobile :) What do you think about moving the fields to next to the associated radio buttons? Like this:

[] 1    [ strongly disagree ]
[] 2
[] 3
[] 4
[] 5    [ strongly agree    ]

If that's not possible then I'd suggest simply adding around 4px spacing above the lowest value label to separate it from the question fields :)

[Chartman123]

@nimishavijay I can try that :) Google shows the labels above and below, that's where I got the inspiration from. But I also like the idea of putting it next to the lowest/highest value

[Chartman123]

@nimishavijay I used the easier way and added a padding-block: var(--default--grid-baseline) to the labels in mobile view both for edit and view mode.

[susnux]

Tested and works fine.
But should here not also the label of the highest option be shown? Currently only the lowest is shown: