How to extend Ramboll’s SurveyXact questionnaire software - Part 2

How to extend Ramboll’s SurveyXact questionnaire software - Part 2

This post is the second post on how to implement a custom functionality into Ramboll's SurveyXact questionnaire software. If you missed the first part - read it here.

The patient / respondent completes the questionnaire and data is stored within SurveyXact's API/XML module for you to retrieve. At the data processor there’s a text field that show the respondent's drawing of their pain translated into coordinates. The respondent cannot see this – it is reserved for the data processor. The format of the coordinates is x1, y1, x2, y2, x3, y3....

In the HTML code below, a function is written that separates the result at every other comma (,) making it it's own coordinate.

You should now be able to recreate the drawing from your respondent by copying the data from the input field. It’s important to include all coordinates. Consider to replace the current text field with an expanding one so all coordinates are visible.

The data processor in the hospital project used their own backend implementation, but below I have included the HTML and Javascript code to do it locally.


<!DOCTYPE html>
<html lang="en" dir="ltr">
  <meta charset="utf-8">
  <script src="" charset="utf-8"></script>
  <div id="canvas"></div>
  <input id="input" type="string">
  <button type="button" id="drawButton">Draw SVG</button>
  <button type="button" id="saveButton">Save SVG</button>

 <script src="image.js" charset="utf-8"></script>


// Test string

'use strict'
const string = 'your-coordinates-from-the-input';

// Initiate the program
function setup() {

 // Creating canvas element
 const canvas = createCanvas(450, 500);

 // Assigning it to the div with id: #canvas

 // Load empty BG image
 const bg = loadImage('images/body.png', img => {
  image(img, 0, 0);

 // Select button with id: #drawButton
 const drawButton = document.querySelector('#drawButton');

 // Assign click event to button
 drawButton.addEventListener('click', () => {
  // Select button with id: #drawButton
  const input = document.querySelector('#input').value;

  // Parse coordinates to array format
  const parser = (string) => {
   return string.split(',')
          .reduce((acc, val, i, arr) => (i % 2) ? acc : [...acc, arr.slice(i, i + 2)], []);

  // Create array with parsed coordinates
  const parsedCoordinates = parser(input)

  // Draw coordinates on to the BG image from the array with parsed coordinates
  function draw() {
   // Draw red color
   stroke(255, 40, 0);
   // 3 pixels pr. coordinate
   // Draw each coordinate in the array
   for (var i = 0; i < parsedCoordinates.length; i++) {
    point(parsedCoordinates[i][0], parsedCoordinates[i][1]);


 // Select button with id: #saveButton
 const saveButton = document.querySelector('#saveButton');

 // Assign click event to button
 saveButton.addEventListener('click', () => {
  // Save and give a file name
  saveCanvas(canvas, "mySVG.png");
  // Prints to the console
  // Just export once

Insert the coordinates into the HTML element input and click on the button called “Draw SVG”.

The program has now recreated the respondent's drawing. Lastly, click on the button called “Save SVG”.

The picture is saved locally on the computer as a .png file for you to use.