DOCS

JavaScript Api

Aliveforms provides a useful JavaScript API.

Usable elements

In Aliveforms, JavaScript API has access to following elements

Element Information
input input of current screen
inputs array of all inputs of visitor
weights array of weights of screens
screen number/index of screen
$ Aliveforms API Object

Boot

In Aliveforms, __boot() can be used to execute JavaScript code before first screen. It can be used to setup variables and modify theme etc.

Aliveforms API Object

The Aliveforms JavaScript API Object provides following functions.

Util.Equals (a, b)
Alert (message)
Emit(title, detail);
ChangeFlow (screen)
ChangePrevious (screen, value)
Multiply (screen, factor)
Add (screen, factor)
Var (varName, value = null)
ScreenTitle (index, newTitle = null)
ScreenPhoto (index, newPhoto = null)
OptionTitle (sc_index, op_index, newTitle = null)
OptionPhoto (sc_index, op_index, newPhoto = null)
SetStyle (variale, value)
GetAnswers (index = null)
IsCorrect (index)
GetCorrectOptionTitle (index)
IsAnswerable (index)
SetGroup (group, value)
GetGroup (group = null)
ListGroup ()
GetDominentGroup ()
CalculatePercentage (group = null)
Fetch (url, options)
Storage.session.set (id, value)
Storage.session.get (id)
Storage.session.remove (id)

$.Util.Equals

Purpose Compare if two values or arrays are equal

Arugments 2, both required - primitive types or array

Returns bool

Sample

if (screen == 1) {
    if ($.Util.Equals(inputs[0], input)) {
        $.Alert('Both answers are same')
    }
}

$.Alert

Purpose Shows a toast

Arugments 1, String

Returns none

Sample

if (screen == 1) {
    if ($.Util.Equals(inputs[0], input)) {
        $.Alert('Both answers are same')
    }
}

$.Emit

Purpose Emit event to be listened on webpage where form is embedded via iframe.

Arugments 2, both required

  • string: title of event
  • Object: detail of event Returns none

Sample

$.Emit('close');

on webpage:

const el = document.getElementById('fabCheckbox');
const iframe = document.getElementById('wapp');
window.addEventListener('message', function (event) {
    console.log('message', event, event.detail);
    if (event.source === iframe.contentWindow && event.data === 'close') {
        el.click();
    }
});

$.ChangeFlow

Purpose Changes the flow on question. Determines what question to show next.

Arugments 1, int

Returns none

Sample

// suppose options are 0: yes 1: no
if (screen == 1) {
    if (input == 1) {
        $.Alert('Changing flow');
        $.ChangeFlow(3);
    }
}

$.ChangePrevious

Purpose Changes the previous question to show when back is pressed.

Arugments 2, both required ints

  • int: screen index
  • int: screen number

Returns none

Sample

// suppose options are 0: yes 1: no
if (screen == 1) {
    if (input == 1) {
        $.ChangePrevious(3, 1);
    }
}

$.Multiply

Works only with Analytical Forms

Purpose Multiples the weight of screen with a number.

Arugments 2, both required

  • integer: screen number
  • number: factor

Returns bool

Sample

if (screen == 2) {
    if (input == 1) {
        $.Multiply(1, screen * 10);
    }
}

$.Add

Works only with Analytical Forms

Purpose Adds to the weight of screen with a number.

Arugments 2, both required

  • integer: screen number
  • number: factor

Returns bool

Sample

if (screen == 2) {
    if (input == 1) {
        $.Add(1, screen * 10);
    }
}

$.Var

Purpose Returns the value of variable if 2nd argument is not provided else defines a variable with can be used in title and messages with [[VAR.NAME]].

Arugments 2, 1 required - 1 optional

  • string: Variable Name
  • any: Variable value (optional)

Returns Values of variable if 2nd argument is not provided.

Sample

if (screen == 1) {
    if (input == 1) {
        $.Var('factor', 1.5);
    }
}

$.ScreenTitle

Purpose Returns the screen title if 2nd argument is not provided else sets title of screen number.

Arugments 2, 1 required - 1 optional

  • int: Screen number
  • string: Screen title (optional)

Returns Title of screen if 2nd argument is not provided.

Sample

if (screen == 1) {
    if (input == 0) {
        $.ScreenTitle(2, 'Welcome with Yes');
    } else {
        $.ScreenTitle(2, 'Welcome with No');
    }
}

$.ScreenPhoto

Purpose Returns the screen photo url if 2nd argument is not provided else sets the photo of screen number.

Arugments 2, 1 required - 1 optional

  • int: Screen number
  • string: url of photo (optional)

Returns Url of photo if 2nd argument is not provided.

Sample

if (screen == 1) {
    if (input == 0) {
        $.ScreenPhoto(2, 'https://example_image/yes.png');
    } else {
        $.ScreenPhoto(2, 'https://example_image/no.png');
    }
}

$.OptionTitle

Purpose Returns the title of option of screen if 3rd argument is not provided else sets the title of options of screen number.

Arugments 3, 2 required - 1 optional

  • int: Screen number
  • int: Option Number
  • string: title (optional)

Returns title of option of screen if 3rd argument is not provided.

Sample

if (screen == 1) {
    if (input == 0) {
        $.OptionTitle(2, 0, 'Yes Again');
    }
}

$.OptionPhoto

Purpose Returns the url photo of option of screen if 3rd argument is not provided else sets the photo of options of screen number.

Arugments 3, 2 required - 1 optional

  • int: Screen number
  • int: Option Number
  • string: url of photo (optional)

Returns url of option of screen if 3rd argument is not provided.

Sample

if (screen == 1) {
    if (input == 0) {
        $.OptionPhoto(2, 0, 'https://example_image/no.png');
    }
}

$.SetStyle

Purpose Set CSS variable values

Arugments 2, both required string: variable string: value

Returns none

List of variables

body-background-color

body-background-image

body-background-repeat

body-background-size

body-background-style

body-color

border-active-color

border-color

border-radius

font-normal

font-title

option-active-bg

option-active-fg

option-bg

option-fg

primary-bg

primary-fg

secondary-bg

secondary-fg

stage-background

stage-blur

Sample

__boot() {
    $.SetStyle("stage-blur", "4px");
    $.SetStyle("primary-bg", "#fff");
}

$.GetAnswers

Works only with score based forms having option 'load solution' enabled

Purpose Returns keys of correct answers. It is array of indices of correct options or text

Arugments none Returns none

Sample

var answers;

__boot() {
    answers = $.GetAnswers();
}

// on result 

$.Define('MSG', JSON.stringify(answers));

// use this in message

Answers: [[VAR.MSG]]

$.IsCorrect

Works only with score based forms having option 'load solution' enabled

Purpose

Check if answer of screen is correct. Arugments 1, required

  • int: index of screen

Returns bool

Sample

if (screen == 1) {
    if ($.IsCorrect(screen)) {
        $.Alert('WOW');
    }
}

$.GetCorrectOptionTitle

Works only with score based forms having option 'load solution' enabled

Purpose Returns title of correct options

Arugments 1, required

  • int: index of screen

Returns string of correct option title.

Sample

if (screen == 1) {
    if ($.IsCorrect(screen)) {
        $.Alert('WOW');
    } else {
        $.Alert($.GetCorrectOptionTitle(screen))
    }
}

$.IsAnswerable

Works only with score based forms

Purpose Checks if screen is answersable or not, i.e. it is list or option or text with answerable enabled.

Arugments 1, required

  • int: index of screen

Returns bool

Sample

if (screen == 1) {
    if ($.IsAnswerable(screen)) {
        // Do Somehting
    }
}

$.SetGroup

Purpose Sets values of group.

Arugments 2, both required

  • string: Group name
  • numeric: value

Returns none

Sample

if (screen == 1) {
    if (input == 0) {
      $.SetGroup('A', $.GetGroup('A') + 10);
    }
}

$.GetGroup

Purpose Returns the value of group Arugments 1, required

  • string: name of group

Returns value of group.

Sample

if (screen == 1) {
    if (input == 0) {
      $.SetGroup('A', $.GetGroup('A') + 10);
    }
}

$.ListGroup

Purpose Returns array of names of assigned groups.

Arugments None

Returns Array of strings

Sample

var groups = $.ListGroups();

$.GetDominentGroup

Purpose Returns the group with highest value,

Arugments none

Returns string

Sample

const group = $.GetDominentGroup();
$.Alert(`Your group is ${group}`);

$.CalculatePercentage

Purpose Returns percentage of groups.

Arugments 1, optional

  • string: name of group

Returns Array if group is not provided. Number if group is provided.

Sample

const groupA= $.CalculatePercentage('A');
const groupB= $.CalculatePercentage('B');
$.Alert(`Your group A is ${groupA}% and B is ${groupB}%`);

$.Fetch

Purpose A wrapper arround JavaScript fetch api. Arugments 2, required

  • string: url
  • object: options

Returns bool

Sample

if (screen == 1) {
    if ($.Util.Equals(inputs[0], input)) {
        $.Alert('Both answers are same')
    }
}

$.Storage.session.get

Purpose Get value of variable stored in session storage.

Arugments 1, required

  • string: key

Returns any - value of key

Sample

var time = $.Storage.session.get('time');
if (!time) {
    time = $.Storage.session.set('time', 'Good Time');
}

if (screen == 1) {
    $.Alert(`Time is ${time}`);
}

$.Storage.session.set

Purpose Sets value of variable in session storage.

Arugments 2, both required

  • string: key
  • any: value

Returns none

Sample

var time = $.Storage.session.get('time');
if (!time) {
    time = $.Storage.session.set('time', 'Good Time');
}

if (screen == 1) {
    $.Alert(`Time is ${time}`);
}

$.Storage.session.remove

Purpose Removes value stored in session storage.

Arugments 1, required

  • string: key

Returns none

Sample

var time = $.Storage.session.get('time');
if (!time) {
    time = $.Storage.session.set('time', 'Good Time');
}

if (screen == 1) {
    $.Alert(`Time is ${time}`);
    $.Storage.session.remove('time');
}