How to: Use Custom Question Rendering Packages (CQRP)

Overview

In addition to the native SurveyToGo question types and renderings, you can add a question and configure it so that you will be in full control of how that question is rendered. For example, instead of showing the Scale question as usual:

You can instead put in a custom slider control that will look different along with some custom behavior if necessary. For example, here is a JQuery Mobile slider:

Now while the two sliders might look roughly the same, they are rendered very differently. The first is the default built-in Scale question rendering while the second is a completely custom rendered control using HTML and JQuery Mobile and is interacting with the SurveyToGo Engine to look as if it is a native question type even though it is not. The possibilities using this technique are endless and will allow anybody with basic knowledge of HTML and Javascript to create any custom question rendering that suite your specific project requirements.

In this How-to we will show you how to use an existing custom question rendering package and specify for a question that it should use the package to render in a custom way. In a follow up how-to article, we will dive into the ins and outs of how to create a custom rendering package.

To use an existing CQRP (Custom Question Rendering Package) the following steps are needed:

1. Step 1: Attach the CQRP zip file to the question.
2. Step 2: Configure the question to use the CQRP zip file.

Step 1: Attach the CQRP zip file to the question

In our example, we are going to assume that we received a CQRP package (zip file) called customSlider.zip and we will use this file throughout the steps (click here to learn how to build CQRP packages including the customSlider.zip package shown here). Click here to download the zip file if you wish to follow the steps shown here.

Here is how to attach the CQRP zip file to the survey:

1. Switch to the “Advanced” tab of the relevant question, and click the “Attachments” link:
   
   
   
2. Click the “New” button to open up the “Add files” window, then click the “Add files” button and find the zip file on your computer and click on “Upload” to
   upload the file:
   
   
   
3. This will then attach the file and associate it with the question:
   Click “Ok” to close the window

   

   
   
   

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

Now that you have attached the zip file, customSlider.zip in our case, you just need to configure the question to use it. To configure the question:

1. On the “Advanced” tab of the question, scroll down 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. Finally, set the “Hide/Show Attach Button” to true (to hide the attachment button):
   
   
   
   
   
   
4. That’s it! Save and test the survey!

Finally, here are the descriptions of the Custom Questions settings:

That’s it!

Visit us at: http://www.dooblo.net