For unique survey platforms or specific integration requirements, our flexible API allows custom integration. Follow these guides to capture and analyze user behavior effectively.

​
Javascript

​
Step 1. Setup Tracker

Our JavaScript tracker generates a history of every change made for each open-ended textbox. To use it:

  1. Replace the textbox_id variable with the HTML id of the textbox
  2. Store the generated question_history

You can specify the max characters the parsed question_history should take before it stops tracking (default 25,000). Note: The script only works with one textbox per page.

const textbox_id = 'exampleTextarea'

// Max number of characters to store in history 
const max_characters_for_history = 25000;

document.addEventListener('DOMContentLoaded', function () {

    // Text changes are stored here
    let question_history = [];
    let old_text = document.getElementById(textbox_id).value;
    let text_over_length = false;
    let start_time;

    // Handle input changes
    document.getElementById(textbox_id).addEventListener('input', function (e) {
        if (text_over_length) return;
        if (!start_time) {
            start_time = Date.now();
            t = 0;
        } else {
            t = Date.now() - start_time;
        }
        const state = e.target.value;
        const new_history = {
            s: state,
            t,
        };
        const length_of_history = JSON.stringify([...question_history, new_history]).length;
        if (length_of_history > max_characters_for_history) {
            text_over_length = true;
            return;
        }
        question_history.push(new_history);
        old_text = state;
    });

    // Handle copy changes
    document.getElementById(textbox_id).addEventListener('copy', function (e) {
        if (text_over_length) return;
        if (!start_time) {
            start_time = Date.now();
            t = 0;
        } else {
            t = Date.now() - start_time;
        }
        const new_history = {
            s: e.target.value,
            t,
            o: 'c',
            ct: window.getSelection().toString(),
        };
        const length_of_history = JSON.stringify([...question_history, new_history]).length;
        if (length_of_history > max_characters_for_history) {
            text_over_length = true;
            return;
        }
        question_history.push(new_history);
    });
});

​
Step 2. Call the API

Substitute the question_histories below with the data collected from the tracker.

curl --request POST \
  --url https://api.roundtable.ai/alias/latest \
  --header 'Content-Type: application/json' \
  --header 'api_key: <api_key>' \
  --data '{
  "participant_id": "participant_123",
  "question_histories": {
    "Q1": [
        {
          "s": "I",
          "t": 0
        },
        {
          "s": "Im",
          "t": 429
        }
    ]
  },
  "questions": {
    "Q1": "How do you feel our software has impacted your daily workflow?"
  },
  "responses": {
    "Q1": "I really like pineapple on pizza."
  },
  "survey_id": "survey_456"
}'

​
React

​
Step 1. Setup Tracker

import { useState } from 'react';

const useQuestionHistory = (maxCharactersForHistory = 25000) => {
    const [history, setHistory] = useState([]);
    const [textOverLength, setTextOverLength] = useState(false);
    const [startTime, setStartTime] = useState(null);

    const getTimeElapsed = () => {
        const currentTime = Date.now();
        if (!startTime) {
            setStartTime(currentTime);
            return 0;
        }
        return currentTime - startTime;
    };

    const addHistoryEntry = (newEntry) => {
        if (textOverLength) return;

        const updatedHistory = [...history, newEntry];
        const lengthOfHistory = JSON.stringify(updatedHistory).length;

        if (lengthOfHistory > maxCharactersForHistory) {
            setTextOverLength(true);
            return;
        }

        setHistory(updatedHistory);
    };

    const handleInput = (event) => {
        const timeElapsed = getTimeElapsed();
        const newEntry = {
            s: event.target.value,
            t: timeElapsed
        };
        addHistoryEntry(newEntry);
    };

    const handleCopy = (event) => {
        const timeElapsed = getTimeElapsed();
        const newEntry = {
            s: event.target.value,
            t: timeElapsed,
            o: 'c',
            ct: window.getSelection().toString()
        };
        addHistoryEntry(newEntry);
    };

    return { history, handleInput, handleCopy };
};

export default useQuestionHistory;

​
Step 2. Use in Open-end Component

import useQuestionHistory from './useQuestionHistory';
const TextboxComponent = () => {
    const { history, handleInput, handleCopy } = useQuestionHistory();
    return (
        <textarea
            id="exampleTextarea"
            onChange={handleInput}
            onCopy={handleCopy}
        />
    );
};
export default TextboxComponent;

​
Step 3. Call the API

Substitute the question_histories with the data collected from the tracker when making the API request.

jsPsychFAQs