Custom Calculations Using Javascript

Checkbox gives you the option to add JavaScript, a custom programming language, to your surveys in the form of a JavaScript item or survey-wide JavaScript. JavaScript has many uses, one of which is the ability to add custom calculations to your survey. This sample will walk you through how to use JavaScript to add survey answers together, and then display that calculated value as an answer to a third question.

*Note that using JavaScript is an advanced feature that is only available on our Advanced and Enterprise plans. You should have some knowledge of programming languages before attempting to use this feature.

Step 1: Create your questions.

To simplify the process for this example, we will use single-line text items to collect our values. This will allow us to easily pull the input from the text box. You can enter any question text you'd like - the only value that is critical is the CSS class field under the Behavior options of your items. For your first question, use a CSS class of "input-1" and for your second item use the CSS class "input-2". Lastly, you will want a third question to place the input, or calculated value, into. This will also be a single-line text item and the CSS class for this will be "answer-1".

Step 2: Add a jQuery reference to your survey.

By default, Checkbox surveys contain something called jQuery lite. With this and stock JavaScript you can accomplish everything that jQuery offers, but having access to jQuery makes the JavaScript much easier to write and read. For this example, go to the survey Settings -> Advanced, and then paste the following code into "Third Party References" and click save.

<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

Step 3: Create a JavaScript action item.

From the survey editor, click Add Action Item -> JavaScript. This question type allows us to add JavaScript to our survey to accomplish dynamic actions for the survey, such as the basic math functions in this example.

Step 4: Get the value from the questions

var firstQuestion = $(".input-1").find("input").val();
var secondQuestion = $(".input-2").find("input").val();

This code will pull the data from both questions. The way this works is:

$(".[[class-name]]").find("[[field-type]]").val();

If you want to perform calculations on these values, you will have to convert them to integers first. This can be done with the following code:

var answer = parseInt(firstQuestion) + parseInt(secondQuestion);

You can then set the value of your third question to this answer with the following code:

$(".answer-1").find("input").val(answer)[0].dispatchEvent(new Event("input", { bubbles: true }));

Full code example:

This code example will listen to changes to the questions and then when changed, will update the answer box.

$(document).ready(function(){
 $(".input-1").find("input").change(function(){
   doMath();
 });

$(".input-2").find("input").change(function(){
   doMath();
 });

function doMath(){
  var firstQuestion = $(".input-1").find("input").val() || 0;
  var secondQuestion = $(".input-2").find("input").val() || 0;
  var answer = parseInt(firstQuestion) + parseInt(secondQuestion);

  $(".answer-1").find("input").val(answer)[0].dispatchEvent(new Event("input", { bubbles: true }));
 }
});