Improved JavaScript Support in our Survey Software

If you’re currently subscribing to either the Ultra or Enterprise plan for our online survey maker, you may have noticed a new Advanced Question type has recently appeared in your repertoire.

Today we’ll be exploring this new JavaScript question type and showing you what it can do in our survey software!

Improved JavaScript Support in our Survey Software

It’s worth mentioning that you were always able to type JavaScript code into certain questions in your survey, but there are some valuable improvements being made with this new question type:

  • You can now collect your JavaScript code into a single place for each page of your survey, making it easier to locate and work with,
  • We’ve included a built-in JavaScript editor complete with syntax highlighting,
  • You can use our JavaScript builder to easily modify the core components of the question types on your current survey page, and,
  • Administrators can show/hide the JavaScript code in preview mode!

Adding a JavaScript Question Type to your Survey

Once you drag the JavaScript question type to your survey, you will see the following:

JavaScript Editor in FluidSurveys

“WhazzdaButtonDo?”

1. Select a Variable to Pipe into your JavaScript Code.
Optionally, you can pipe data from your survey into your JavaScript code to play with.

2. Expand the Visible Area of the JavaScript Editor.
Clicking this button will give you a larger work space and makes coding much easier.

3. Toggle the JavaScript Builder Window.
This button shows & hides the JavaScript Builder, which allows you to build quick blocks of JavaScript code. More on this in a moment…

4. Undo
Undo the last action.

5. Redo
Redo the last action.

6. Clear
Wipe all of the code you added and start over.

NB: Be sure to add an identifier to each question that you want to manipulate with the JavaScript question type, or it will not appear in the Piper drop down (1) or the JavaScript Builder window (3)!

A Quick Example …

Let’s suppose you have this plain-jane text response question:

Text Response Question

Wouldn’t it be that much more appealing to have the US dollar sign ($) appear directly to the left of the text input field? With the JavaScript Builder, accomplishing this is a cakewalk!

Let’s begin by taking a look at this question in our survey builder:

FluidSurveys JavaScript Question Type Example

Notice the “q2” in the upper-left corner of our question. This means I’ve already given this question an identifier, which is a requirement of what we’re about to do next.

Next, we drag the JavaScript advanced question type onto our survey builder, and click on the button (number (3) in our screenshot above) to show the JavaScript Builder Window:

FluidSurveys JavaScript Builder Window

Now we will select the identifier which corresponds to this question from the “Question” drop-down menu, and then select the appropriate option from the “Option” drop-down menu:

FluidSurveys JavaScript Builder Window

After we select these two options from our drop-down menus, FluidSurveys automatically populates the code window (the black portion) with the necessary JavaScript code! All we need to do now is replace “INSERT TEXT HERE” with our US dollar sign, and then click “Insert” to add this to our JavaScript question type!

FluidSurveys JavaScript Builder Window

Here is what our JavaScript question type looks like after we click “Insert”:

JavaScript Editor in FluidSurveys

So now if we save our survey and preview it, we see the following:

FluidSurveys JavaScript Example

Ta da! The US dollar sign now appears next to our text input field as we wanted it to. You should also notice the “Show Script” toggle, which will show or hide the JavaScript code for the administrator. This should prove to be incredibly useful for debugging purposes!

Video Example

Feel free to watch this video for a quick rundown of the above example!

The following two tabs change content below.

Sean O'Dacre

Sean is a coordinator for the search marketing team at Fluidware. He enjoys building awareness of Fluidware's solutions through the development of relationships with other web communities. He is also an active member of several search engine optimization user groups and forums.
FluidSurveys Presents

Free Survey Q&A

Join our survey & research expert Rick Penwarden as he answers all of your questions every Wednesday at 1PM EST!


2 Comments

  • Steve Long says:

    I’m curious if the JS question type can be used to load another file. Say we were using a Tag Management System and wanted to have custom code loaded on our survey pages. Is that feasible/allowed?

    • RickPenwarden says:

      Hey Steve!
      Good question! The JS question type allows you to do anything you could do with javascript and therefore the answer is yes its allowed and feasible. Give it a try! Just remember to test test test before launching!

      Good luck with the survey!