Homepage / Doc / Survey Columns

Survey Columns

Checkbox surveys are designed to be single column surveys. This means that all of your questions will be presented in a single column going down the page. The exception being the matrix item which is rendered as a table.

With some javascript, CSS, and the help of Bootstrap you can make your Checkbox survey contain multiple columns. To complete this customization you will need to include external references to Bootstrap.

You can utilize MaxCDN references like this :

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

You can add these references when editing your survey under “Configure” then “Advanced” then “Third Party References”

This will give your survey access to the full feature set of Bootstrap.

For the purpose of this sample, we will be changing our single column survey into a two column survey. The first step you will want to complete is to envision how you want your survey laid out within the columns. There will be a right and left-side. It is important before you start working that you know which questions you will want on each side of the side.

Once you have a good idea of how you want your survey organized you will want to add a custom class, for this example we are using leftside and rightside as our class names, to each of your items. The questions you want to appear on the left side should have the class leftside, the questions you want to appear on the right side should have the class rightside.

Custom class names can be added to each question on the behavior tab when editing the questions.

custom_css_class

Now that we have our custom classes we can start writing the code to break our survey into columns.

In order to ensure that our items are on the correct side, we will want to float those items properly. This can be done with the following CSS :

.leftside {
    float:left;
}

.rightside{
    float:right;
}

Next, we need to apply Bootstrap classes to the questions and remove the conflicting Checkbox classes from them. You can do this by adding the following javascript.

$(document).ready(function(e) {
    //Add the container class from bootstrap to the Checkbox content frame
    $(".surveyContentFrame").addClass("container");

    //Add bootstrap classes to the Checkbox question dividers. The first instance of the "Page" class is for the entire page, this should be skipped hence the :not(:first)
    $(".Page:not(:first)").addClass("col-sm-1 col-xs-12");
    //Remove the "Page" class entirely from all elements but the initial one, this allows for spacing between your columns
    $(".Page:not(:first)").removeClass("Page");

    //Add the classes to both the rightside and leftside classes created earlier
    //With this we are also removing the clear:both from the style attribute to ensure bootstrap can function properly
    $(".rightside").addClass("col-sm-5 col-xs-12").parent().parent().attr("style", "");
    $(".leftside").addClass("col-sm-5 col-xs-12").parent().parent().attr("style", "");
});

With the code provided your survey will be set up in a two column format. Depending on the types of questions you utilized and the size of the questions you may want to make further adjustments to the CSS or to the items themselves.

If you have any questions or concerns please contact our support team and we will be happy to assist the best we can.

November 29, 2016