Custom JavaScript Library for Datumforms

Custom JavaScript Library for Datumforms

Customize your survey experience with advanced features and interactivity using Datumforms' custom JavaScript library.

Table of Contents

Introduction

The custom JavaScript library provides a set of functions that allow clients to enhance their surveys with advanced features and custom interactivity. This document covers all the functions available in the library, with examples of how to use them.

Survey Appearance

setBackgroundColor(color)

Changes the background color of the survey.

Parameters:

  • color (string): A CSS color value to set as the new background color.

Example:

surveyCustomLibrary.setBackgroundColor("#f0f0f0");

Question Manipulation

setQuestionFontSize(questionId, fontSize)

Changes the font size of a specific question.

Parameters:

  • questionId (string): The ID of the question element to modify.
  • fontSize (string): A CSS font size value to set as the new font size.

Example:

surveyCustomLibrary.setQuestionFontSize("question-1", "18px");

setQuestionFontColor(questionId, color)

Changes the font color of a specific question.

Parameters:

  • questionId (string): The ID of the question element to modify.
  • color (string): A CSS color value to set as the new font color.

Example:

surveyCustomLibrary.setQuestionFontColor("question-1", "#333");

toggleQuestionVisibility(questionId, condition)

Shows or hides a specific question based on a condition.

Parameters:

  • questionId (string): The ID of the question element to show or hide.
  • condition (boolean): A boolean value that determines whether to show (`true`) or hide (`false`) the question.

Example:

surveyCustomLibrary.toggleQuestionVisibility("question-2", true);

addQuestionClass(questionId, className)

Adds a CSS class to a specific question.

Parameters:

  • questionId (string): The ID of the question element to modify.
  • className (string): The CSS class to add to the question element.

Example:

surveyCustomLibrary.addQuestionClass("question-1", "highlight");

removeQuestionClass(questionId, className)

Removes a CSS class from a specific question.

Parameters:

  • questionId (string): The ID of the question element to modify.
  • className (string): The CSS class to remove from the question element.

Example:

surveyCustomLibrary.removeQuestionClass("question-1", "highlight");

setQuestionAttribute(questionId, attributeName, attributeValue)

Sets an attribute on a specific question.

Parameters:

  • questionId (string): The ID of the question element to modify.
  • attributeName (string): The name of the attribute to set.
  • attributeValue (string): The value to set for the attribute.

Example:

surveyCustomLibrary.setQuestionAttribute("question-1", "data-custom", "example");

removeQuestionAttribute(questionId, attributeName)

Removes an attribute from a specific question.

Parameters:

  • questionId (string): The ID of the question element to modify.
  • attributeName (string): The name of the attribute to remove.

Example:

surveyCustomLibrary.removeQuestionAttribute("question-1", "data-custom");

Event Handling

addQuestionEventListener(questionId, eventName, callback)

Adds an event listener to a specific question.

Parameters:

  • questionId (string): The ID of the question element.
  • eventName (string): The name of the event to listen for.
  • callback (function): The function to execute when the event occurs.

Example:

surveyCustomLibrary.addQuestionEventListener("question-1", "click", () => {
    console.log("Question 1 clicked");
});

removeQuestionEventListener(questionId, eventName, callback)

Removes an event listener from a specific question.

Parameters:

  • questionId (string): The ID of the question element.
  • eventName (string): The name of the event to stop listening for.
  • callback (function): The function that was previously attached as an event listener.

Example:

const handleClick = () => {
  console.log("Question 1 clicked");
};
surveyCustomLibrary.addQuestionEventListener("question-1", "click", handleClick);
surveyCustomLibrary.removeQuestionEventListener("question-1", "click", handleClick);

Custom Validation

registerCustomValidation(inputId, validationFunction, errorMessage)

Registers a custom validation rule for an input field.

Parameters:

  • inputId (string): The ID of the input element to add the custom validation to.
  • validationFunction (function): A function that returns true if the input value is valid, and false otherwise.
  • errorMessage (string): An error message to display when the custom validation fails.

Example:

const customValidation = (value) => {
  return parseFloat(value) > 0;
};
surveyCustomLibrary.registerCustomValidation("consumptionInput", customValidation, "Consumption must be greater than 0");

Conditional Display of Questions

displayQuestionOnCondition(questionId, dependentQuestionId, conditionFunction)

Conditionally displays a question based on the answer to another question.

Parameters:

  • questionId (string): The ID of the question to show or hide.
  • dependentQuestionId (string): The ID of the question whose answer will determine whether to show or hide the question.
  • conditionFunction (function): A function that takes the dependent question’s value as input and returns true if the question should be shown, and false otherwise.

Example:

const condition = (dependentValue) => {
  return parseFloat(dependentValue) > 100;
};
surveyCustomLibrary.displayQuestionOnCondition("question-2", "question-1", condition);

Custom Interactivity and Animations

applyCustomInteractivity(elementId, eventName, interactionFunction)

Applies custom interactivity or animations to an element.

Parameters:

  • elementId (string): The ID of the element to add the custom interactivity or animation to.
  • eventName (string): The name of the event to trigger the custom interactivity or animation.
  • interactionFunction (function): A function that applies the custom interactivity or animation to the element.

Example:

const customAnimation = (element) => {
  element.style.opacity = 0;
  setTimeout(() => {
    element.style.opacity = 1;
  }, 200);
};
surveyCustomLibrary.applyCustomInteractivity("question-1", "click", customAnimation);

IndexedDB Integration

openClientDatabase(clientId, version)

Opens a client-specific IndexedDB database.

Parameters:

  • clientId (string): A unique identifier for the client.
  • version (number, optional): The version number of the database.

Returns:

  • A Promise that resolves with the opened database.

storeClientData(clientId, key, value)

Stores data in the client’s IndexedDB database.

Parameters:

  • clientId (string): A unique identifier for the client.
  • key (string): The key to store the data under.
  • value (any): The data to store.

Returns:

  • A Promise that resolves when the data is stored.

getClientData(clientId, key)

Retrieves data from the client’s IndexedDB database.

Parameters:

  • clientId (string): A unique identifier for the client.
  • version (number): The version number of the IndexedDB to open.

Example:

surveyCustomLibrary.openClientDatabase("client-1", 1).then((db) => {
  console.log("Database opened:", db);
});

storeClientData(clientId, key, value)

Stores data in the client’s IndexedDB.

Parameters:

  • clientId (string): A unique identifier for the client.
  • key (string): The key to store the data under.
  • value (any): The value to store.

Example:

surveyCustomLibrary.storeClientData("client-1", "lastSurveyDate", "2022-01-15");

getClientData(clientId, key)

Retrieves data from the client’s IndexedDB.

Parameters:

  • clientId (string): A unique identifier for the client.
  • key (string): The key of the data to retrieve.

Example:

surveyCustomLibrary.getClientData("client-1", "lastSurveyDate").then((value) => {
  console.log("Last survey date:", value);
});

Previous Survey Data

fetchPreviousSurveyData(clientId, secretKey, panelId, currentSurveyId)

Fetches previous survey data for a client.

Parameters:

  • clientId (string): A unique identifier for the client.
  • secretKey (string): The client’s secret key to authenticate the request.
  • panelId (string): The ID of the panel to fetch the previous survey data for.
  • currentSurveyId (string): The ID of the current survey.

Example:

surveyCustomLibrary
  .fetchPreviousSurveyData("client-1", "secretKey123", "panel-1", "survey-2")
  .then((previousSurveyData) => {
    console.log("Previous survey data:", previousSurveyData);
  });

Conclusion

The custom JavaScript library for Datumforms offers a wide array of functions to help clients easily customize and enhance their surveys. By incorporating this library into your platform, you empower clients to create engaging and personalized survey experiences, all within a controlled and secure environment.