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');
}