How to do scripting

Overview

Client-side API root object is available as window.Confirmit
To get current survey page questions use window.Confirmit.page.questions
To navigate use window.Confirmit.page.next or window.Confirmit.page.back
We use a naming convention to distinguish between public and private methods and properties, use of private methods and properties is not supported. Methods and properties names starting with “_” are private and may be changed at any time without warning which could lead to unexpected behaviour or could prevent your survey from working.
For more info see Client-side API reference

Where to put code

Custom JavaScript should be placed in JavaScript section of question, question skin or theme.
Use question level JavaScript to customize individual question, question skin level to customize group of questions and theme level to customize survey page experience.
currentQuestion variable is available to you in question and question skin JavaScript section. It hold a reference to current question object model.
For example, this code can be placed in JavaScript section to log question text to console:

console.log(currentQuestion.text)

How to send data to server

Update question model using setValue method.
If you have 'disable default rendering' on question skin - just do same, update question model, data will be sent to server automatically.

Client-side events

ChangeEvent

Question model has changeEvent. It can be used like this

 question.changeEvent.on(function() {<code>} );

Example: you have multi choice question with 5 answers, 3 should be selected. You want to change instruction to show remaining amount of answers. When 3 answers selected - navigate to next page.

currentQuestion.changeEvent.on(function (questionModel) {
    var model = questionModel.model;
    var text = '';

    switch (model.values.length) {
        case 0:
            text = 'Please select 3 items';
            break;
        case 1:
            text = 'You need to select 2 more';
            break;
        case 2:
            text = 'One more to go';
            break;
        case 3:
            Confirmit.page.next();
            return;
    }

    document.querySelector(`.cf-question#${model.id} .cf-question__instruction`).innerHTML = text;
});

ValidationEvent

Use validateEvent to apply custom client side validation.
If you corrupt validation result object - client-side validation will stop working properly
This event is triggered before displaying errors so custom errors added to validationResult will be displayed alongside with default validation errors if any exists.
Example: you have multi choice question. If you choose the first answer, the second must also be selected.

currentQuestion.validationEvent.on(
  function (validationResult) {
    if (currentQuestion.values.indexOf('1') != -1
       && currentQuestion.values.indexOf('2') == -1 ) {
      var error = {message: 'If the first answer is selected - the second is required'};
      validationResult.errors.push(error);
    }  
});

It's also possible to bind this validation message to second answer directly:

currentQuestion.validationEvent.on(
  function (validationResult) {
    if (currentQuestion.values.indexOf('1') != -1
       && currentQuestion.values.indexOf('2') == -1 ) {
      var error = {message: 'If the first answer is selected - the second is required'};
      var errors= [];
      errors.push(error);
      var answerErrors = { answerCode : '2', errors : errors};
      validationResult.answerValidationResults.push(answerErrors);
    }  
});

ValidationCompleteEvent

Use validationCompleteEvent to display final version of validation.
If you corrupt validation result object - client-side validation will stop working properly

Server side piping

To pass information from server use regular ^^ piping.
Example: you have open text question. You need to know which answer was selected in the first question:

Confirmit.pageView.initCompleteEvent.on(() => {
    var q1answer = "^f('q1')^";
    currentQuestion.setValue(`I've selected ${q1answer} for first question.`);
});

Custom question experience

Set 'disable default rendering' on question skin (see Custom Questions section). Write js rendering your html and updating question model.

Custom jQuery slider example

Add jQuery and jQueryUI js files to question theme as external js files.

https://code.jquery.com/jquery-3.2.1.min.js,  https://code.jquery.com/ui/1.12.1/jquery-ui.min.js  

Add the jQueryUI css file to the question theme as an external css file.

https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css

Code to put into JavaScript section:

$(function() {
    var container = $('.cf-question[data-question-id=' + currentQuestion.id + ']');

    var sliderContainer = $('<div class="single-slider" style="max-width: 300px; margin: 20px;"></div>');
    container.append(sliderContainer);

    sliderContainer.slider({
        value: currentQuestion.value,
        min: 1,
        max: currentQuestion.answers.length,
        change: function( event, ui ) {
            currentQuestion.setValue(ui.value);
        }
    });

    currentQuestion.changeEvent.on(() => {
        sliderContainer.slider("value", currentQuestion.value);
        console.log('Single slider(' + currentQuestion.id + ') changed: value ' + currentQuestion.value + ', other ' + currentQuestion.otherValue);
    });
});