Custom Question Types

Owned by kristine.zvaigzne (Unlicensed)
Last updated: Aug 07, 2021 by Martin Rasser
2 min read

A configurator page consists of questions, each are of a question type for different presentation and processing. There are built-in question types and you can add custom types. While overriding templates for question views and writing custom CSS for questions enables you to make extensive customisations, you can also add entirely new question types.

Make use of that feature when you want to:

  • Build custom behaviour on user interactions and system events

  • Leverage data from custom question properties 

  • Control visual output and user interactions entirely

Files involved in creating a custom question type:

Every type has a name - for this article we use ‘customtype’.

  1. A view class and template in [customization_folder]/views/question_customtype/view.html.php and [customization_folder]/views/question_customtype/tmpl/default.php

  2. CSS styling in [customization_assets_folder]/css/custom.css

  3. A JS question type object in [customization_assets_folder]/javascript/custom_questions.js

  4. Optionally: Add data fields to question data

View Class and Template

The class and template is responsible for adding the HTML of any question of this type to the configurator page. Question data and the current selection of the user is available to the template by default. See View class and template for details.

CSS styling

While there is common styling for questions, you can add additional styling in the custom CSS file. See the details in CSS Styling.

JS Question Type Object

While the user interacts on a configurator page, the CB framework triggers JavaScript events and each question type reacts on these events (e.g. changes to the current user selection, activation or deactivation of a question, displaying a validation message etc). To make your question type react, you create a JS Question Type Object that contains callback functions and register it using a framework function. See the full details in JS question type object.

Add data fields to question data

You may need specific fields in backend edit screens to support your question type. Learn here how to add properties to question data.