Compare Values 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 compare the numeric value of responses in a survey. This sample will walk you through how to use JavaScript to compare two answers and then display a message stating whether or not they are equal.

*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".

Step 2: Create your display item.

Create a Message/HTML item under Add Display Item - this item will be used to tell the respondent if the compared values are equal or not. Click on the < > button in the editor and add the following HTML:

<span id="not-equal" style="display:none">The values are not equal.</span>
<span id="is-equal" style="display:none">The values are equal.</span>

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 ability to compare question answers, as 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();

Step 5: Compare the value of the answers.

var isEqual = (firstQuestion === secondQuestion);

Step 6: Display whether the answer is equal or not.

if(isEqual){
 $("#is-equal").show();
 $("#not-equal").hide();
}else{
 $("#is-equal").hide();
 $("#not-equal").show();
}

Full JavaScript example:

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

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

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

   if(isEqual){
    $("#is-equal").show();
    $("#not-equal").hide();
   }else{
    $("#is-equal").hide();
    $("#not-equal").show();
   }
  }
});