Skip to content

Create new LargeScaleQueryWidgetComponent

This issue is about adding a new QueryWidgetComponent for the scale/slider questions, that use a large range.

What is to be done?

The idea is to do something similar to SelectQueryWidgetComponent, but replace the rcc-radio-select with a new – to be created – rcc-large-scale.

  • Create a new QueryWidgetComponent: LargeScaleQueryWidgetComponent and add it to `BasicQueryWidgetsModule
  • widgteMatch with a high value (I suggest 2), if the question at hand has many consecutive integer options (see below)
  • create RccLargeScaleComponent and add it to LargeScaleQueryWidgetComponent

RccLargeScaleComponent

This should be an input component just like `RccRadioSelectComponent and should look like the slider in the layouts below.

  • it should have a min and a max input
  • min and max values should be displayed at the respective ends of the scale
  • there are no ticks for values between min and max
  • if no value is selected the handle is an empty circle and positioned in the middle
  • if the component is disabled the handle is small
  • if a value was selected, the handle is large, has a colored dot in it and the current value is displayed above the handle.
  • color should be configurable
  • NO steps or in-between values are supposed to be supported. Only integer values, no gaps.
  • clicking/touching the handle and moving it along the scale changes its value :D

Large vs normal scale

We already have a ScaleQueryWidgetComponent which does a bit more than what the LargeScaleQueryWidgetComponent is supposed to do here (e.g. can handle named options and have gaps bigger and smaller than 1). But it is ill suited for scales with many selectable values.

The use case at hand is a scale with 101 values. The smaller the scale the more important it is to be able to pick an exact value; which makes ticks and labels more useful. For a large scale on the other hand accuracy is less important and ticks (especially with labels) are impractical.

`QueryWidgetComponent#widgetMatch: What does 'many' mean in this context?

I suggest returning a high number (e.g.: 2) by QueryWidgetComponent#widgetMatch if these conditions are met:

  • queryControl.question.type === integer
  • queryControl.question.tags?.contains('rcc-scale')
  • typeof queryControl.question.min === 'number'
  • typeof queryControl.question.max === 'number'
  • queryControl.question.max-queryControl.question.min > 11
  • !queryControl.question.options || queryControl.question.options.length === 0

Requirements

  • HCP: In the monitoring setup, when selecting "scale (0-100)" for a custom question, we should see the LargeScaleQueryWidget in the preview. (ranging from 0 to 100)
  • PAT: When answering a question added in the monitoring setup as "scale (0-100)", we should see theLargeScaleQueryWidget in action. (ranging from 0 to 100)

If I get this correctly, there are no changes needed to the monitoring setup. Selecting "scale (0-100)" in the question editor, should already set all values, such that QueryWidgetComponent#widgetMatch will trigger.

Figma: https://www.figma.com/file/8PWKCoBl4vl4TrI32UV5op/RC-Design-PRODUCTION?node-id=2802%3A46587&t=19szT6QH41oIAtFF-1

Clickup: https://app.clickup.com/t/861m3zw47

Edited by Andreas Pittrich