Home > Survey Creation > How to: Use Custom Question Rendering Packages (CQRP)

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:
    This will then attach the file and associate it with the question:

  3. 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:

 

Setting Description
Custom Question AttachmentID Should contain the name of the CQRP zip file. For example: “customSlider.zip”
Custom Question Class Name Should contain the full path to the HTML file in the zip file that contains the custom rendering control. For example: “HTML/page1.html”
Custom Question DLL Path Should be empty
Custom Question Enabled True – tells the engine this question should be rendered using the CQRP modeFalse (default) – tells the engine to render the question according to its type and not use CQRP mode

 

 

 

 

That’s it!

 

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

 

Categories: Survey Creation

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: