datamanagement-expertise for academic & non-profit trials

two examples of visual analogue scale

Some Studies use a Visual Analogue Scale to measure for example pain. A Subject is asked to mark a line that
ranges from 0 to 100 and the "score" is then put into the EDC.

fig. 1: Example of a VAS

Wouldn't it be nice if we could have something like that in OpenClinica? Indeed.

We will explain on this page how you can do this, and you can download
the two examples plus the images we use by clicking here.
In the first example we will use one image that is already included in the OpenClinia installation. In the second example we will use
two images that must be copied to the images-dir of OpenClinica and for this you must have access to the OpenClinica-server.

start simple

To start simple, we will use for our scale just a block, which is called a DIV in HTML, in the right_item_text. We will give it
a border and a color. For the pointer of the VAS we will use an already existing image, more or less a red vertical line.
The result will be this:

fig. 2: simple VAS

To get this we put the following script in the RIGHT_ITEM_TEXT:
(no need to read: just paste it; all will be explained below)

This needs some explaining. First we make a table with two rows: one for the box and one for
the 0-50-100 markers and we call it VAStable.
Then we define our box or vas-scale and call it VAS; we make it 300px wide
and give it a background-color and a border.
Then in the third line we put an image in the box. This image is already included in OpenClinica, so we can use it without
any problem. We call it pointer and set the width and height for it.
Now we include some jquery: to start with we identify the actual CRF-item that holds the score by taking the
parent-of-the-parent-of-the-element-called-VAStable and from there find the first input with var fieldVASScore = $("#VAStable").parent().parent().find("input");.
We read whatever the value is and set the pointer on the right position by calling the function setPointer().
This function places the left-corner of the image a number of pixels to the right of the parent: in our case the div.
But we made our div 300px and the scale goes from 0 to 100, so we must make a correction and multiply the score
in the CRF-item with 3. This is why we first includevar correctionFactor = 3;
and then call the function with setPointer(correctionFactor*fieldVASScore.val());
In the function a second correction is made for the width of the pointer.

The clicking is handled by $("#VAS").click(function (e)
and what that does is it takes the coordinates of the click in the div and subtracts that from the coordinates of
the left corner of the div and puts the pointer there, using the function setPointer() again.
Then the actual score is calculated and written to the input and the "status" of the input is set to changed: var newVASScore = Math.round(pos_x/correctionFactor);
fieldVASScore.val(newVASScore);
fieldVASScore.change();

a bit more sophisticated

The above solution certainly works, but we want to go the extra mile, so we make a nice background for
our scale plus a nice image for the pointer and create this:

differences

This time the situation is different, because we do not need the values of the VAS: they are in the image vas_100.jpg.
We make this image the background of the div. And to do that we must put this image plus vas_pointer.jpg
in the images folder.
We do not have the table to use as a reference to get to the CRF-item to hold the score, so we use the VAS to do that:var fieldVASScore = $("#VAS").parent().parent().find("input");.