How to: Use Custom Question Rendering Packages (CQRP)

Overview

In addition to the standard SurveyToGo question types and rendering options, you can create a Custom Rendering that gives you complete control over how a question is displayed.

With a custom rendering, you define the appearance and behavior of the question, allowing you to create interfaces that go beyond the built-in layouts.

For example, instead of displaying a Scale question using its default layout, you can design a completely customized interface that better suits your survey requirements or provides a more engaging respondent experience (like a JQuery Mobile slider). 

While the two sliders look roughly the same, they are rendered very differently.

• The first is the default built-in Scale question rendering.
•  The second is a custom rendered control using HTML and JQuery Mobile.
• It is interacting with the SurveyToGo engine to look as if it is a native question type. 
• The possibilities using this technique are endless.
  • Anyone with basic knowledge of HTML and Javascript can create custom question rendering that suites their project requirements.

This how-to explains how to use an existing custom question rendering package and configure a survey question to use it instead of the default SurveyToGo rendering.

Prerequisites 

Step 1: Attach the CQRP zip file to the question

In our example, we are going to utilize the attached zip file.  Download it if you wish to use it while walk through the steps. 

Steps

1. Switch to the “Advanced” tab of the relevant question. 
2. Click the “Attachments” link:
   
   
   
3. Click the “New” button to open up the “Add files” window.
4. Click the “Add files” button and find the zip file on your computer.
5. Click “Upload”. 
   
   
   
6. Click “Ok” to close the window
   

   

   

Step 2: Configure the question to use the CQRP zip file

1. On the “Advanced” tab of the question, scroll through the options until you reach the “09 Custom Question” section:
   
   
   
   
2. Fill in the details as follows:
   1. In the Custom Question AttachmentID: customSlider.zip
   2. In the Custom Question Class Name: HTML/page1.html
   3. In the Custom Question Enabled: True|
      
3. Set the “Hide/Show Attach Button” to true (Hide) 
   1. 
      
      
      
      
4. Save and test the survey

Custom Questions settings