Forsta Responsive Rendering versioning

Rendering versioning is a new concept that allows responsive rendering to be updated, including making breaking changes that won't automatically affect existing surveys.

What is Rendering Version?

The rendering version contains:

• Server-side markup generation code
• Client-side JavaScript code
• CSS files (style bundles)

Every responsive survey layout references a specific rendering version. This means that a survey using this layout uses HTML markup, JavaScript and CSS from this rendering version. It is possible to change the rendering version in the layout properties. For layout templates, you have the option of setting the rendering version. If this is not set, it will use the latest available version by default. This is useful for layouts that only reference style bundles but do not contain any version-specific customizations.

Existing versions

• V2 version - latest and current documentation version
• V1 version

Key differences between V2 (current documentation) and V1 versions

User experience

• Grid question supports "Card sort" appearance
• Grid question supports "Ranking card sort" appearance
• 3D-grid supports new inner question types such as "Horizontal rating scale", "Grid bars", "Star rating" and "Slider"
• Answer colors support
• Repeat headers and bottom headers support in Grid and 3D-grid
• Slider grid supports label panel
• Multi question types supports enforcing the "max number of answers" setting
• Increased rating item sizes in "Whitespace" style bundle
• Improved accessibility support
• HTML element <form> wraps only hidden inputs, not whole page. If need to send data to server don't create hidden inputs, instead use Confirmit.page.serverVariables object to add, remove or edit variables. It has add/edit/remove methods.

Markup changes

• Grid, MultiGrid and Rating grids use two markups for mobile and desktop versions.

  In rendering version V1 the grid family has one markup for both mobile and desktop sizes which can cause problems with space distribution. Also mobile and desktop versions had different functionality with extra markup, that was not used in both versions. yet at the same time still needed to maintain a quite different set of CSS style for mobile and desktop version.
  As a result, in V2 rendering, the grid family uses two standalone markups for mobile and desktop versions with corresponding standalone views that are bound to one question model.

• 3D-grid's mobile version uses the same markup for an inner question as for a regular version. For example, 3D-grid's inner single has the same as a regular single.

  In rendering version V1 the mobile version of 3D-grid inner question uses its own implementation of markup and corresponding "View", but tries to mimic the original question type. This led to extra effort if you tried to do visual customization.
  In rendering version V2 mobile 3D-grid inner questions use the same markup and corresponding View as in regular question types.

• All questions support a generic scrollable container.

  In rendering version V1 there is no scrollable container for a question's content which results in breaking the question layout or even the page layout is there is oversized content.
  In rendering version V2 there is a generic scrollable container to cater for this.

• Extracted repeated visual elements to standalone reusable markup blocks.

  In rendering version V1, part of an identical-looking element on the page has completely different HTML markups. For example radio/checkbox answers or label panels in rating types.
  In rendering version V2 the logical shared visual elements have been extracted to standalone markup blocks, resulting in customization requiring changing styles for one markup block only. Affected elements: radio, checkbox, answer button, answer image, rating items/scales and label panel.

Responsive client API (models layer)

• Single other value is now aligned with the other question types

  In rendering version V1 the SingleQuestionModel has a different interaction compared to the other models with "other" values, (it was needed to set value first, then after that set "other" value).
  In rendering version V2 all question models that have "other" values behave the same way, the interaction with "other" values is now independent from model value.
  Changes in syntax: V1:SingleModel.setOtherValue(otherValue) -> V2:SingleModel.setOtherValue(answerCode, otherValue)

• Introduced "detached" method on question view.

  In rendering version V2 if you need to release resources (for example: detach from DOM, detach from Model, destroy WebGL context or make any cleanup) before the View will be destroyed, you can implement a "detach" method, where you can do those things.

• Improved validation of 3D-grid questions