Scales and options for their rendering (scale)

Scale will render a horizontal line with a moving slider. The user can move the slider over to one of the available positions.

task T - global impairment
  scale 0 3(0.5)
A rendered scale: 0 to 3 slider values and a half-a-point step

Scales with labels

Values of the scale can be labeled as required and the labels can also be semantic. The scale command can be followed with value text_without_spaces. The text of each value can contain HTML tags and the values can be underlined '' or have italic or bold formating ('', '')

A scale with HTML formatting

Scales with alignment of oversize labels

Verbal values can be too long for the task panel (see above). This situation can be solved by altering the alignment of the scaled element using a CSS style command (margin-left a margin-right) for all scales on a screen:text <style>.ui-slider-wrapper{margin-left:10px;margin-right:55px}</style>

Scale with 10 pixel of offset alignment of the left value and 55 pixels from the edge of the task rectangle

A vertical panel of scales

Additional taks with a scale will be diplayed under a firs scale in an oder in which it has been defined.

Task with vertical panel of scales

Horizontal panel of scales

The 'fieldset' command can be used for a HTML horizontal arrangement of the task. The element can also be styled using CSS so that it only covers half of a screen (48%) using additional text as follows 'text '

Tasks and scales adjacent to each other

Manipulating the heights of the panel content

The height of the answer fileds for tasks is different for adjacent task and this will have a unaesthetic and disordered appearance.

The height can be set using the 'height' CSS style for the 'fieldset' command

Panels with variable colour backgrounds

For setting different colours

  1. define a background:inherit property for fieldset

  2. set the background colour in each task eg.: #styleform background-color:peachpuff;

Last updated