Qualtrics JavaScript: Append an image over matrix text boxes

Question

In Qualtrics, I am trying to create something like this: https://dl.dropboxusercontent.com/u/8114735/Screen%20Shot%202015-05-12%20at%2017.49.17.png

The only way to have text boxes both next to and on top of each other is by using a matrix table with text entry. However, this only gives you the text boxes, without a space above the text entry box to insert an image. So I'm now trying to append these images using javascript. The ID of the text boxes is in the format of QR~QID17~3~2~TEXT (for the box on row 3, column 2).

Here is a sample I made of the text boxes in a 3x3 matrix. https://eu.qualtrics.com/WRQualtricsSurveyEngine/?SID=SV_b30tGcjTmJWTlYN&SVID=&Preview=Block&ID=BL_enEP0YjUHaK5yPX&Q_DONT_SAVE=1

Does anyone know how you can append an image on top of these boxes? Thanks.

It may be worth adding a prototypejs tag to this question, since qualtrics supports prototype natively — Anthony Rivas, May 12 '15 at 23:55

alexP · Answer 1 · 2015-05-12T13:43:40.287

1

How about using DIV container?

HTML

<div class="container">
    <div class="box">
        <div class="box-image">
            <img src="http://lorempixel.com/output/city-h-c-150-230-4.jpg" />
        </div>
        <div class="box-input">
            <input type="text" />
        </div>
    </div>
</div>

CSS

.box {
    float: left;
    width: 200px;
    margin: 5px;
}
.container {
    max-width:420px;
    background:#CCCCCC;
    overflow: hidden;
}
.box-image, .box-input {
    text-align: center;
    width: 100%;
}

.box-image {
    background: #FFFFFF;
}

.box-input input{
    margin-top: 2px;
    width: 200px;
    border: 1px solid #AAAAAA;
}

FIDDLE

edited May 12 '15 at 13:43

answered May 12 '15 at 13:35

alexP

3,672
7
27
36

Thanks for your example! However, how would I be able to insert the HTML into the Qualtrics matrix table? Part of the problem is that there is no place to insert it into (like you have for a normal question). With the matrix table, all you get is a pre-fab entry text box, with no opportunity to add any html anywhere. That's why is was wondering if it could be inserted through javascript. – redfuse May 12 '15 at 14:39
This answer would be perfect if the survey wasn't being built in Qualtrics. – Anthony Rivas May 13 '15 at 16:43

score 1 · Accepted Answer · answered May 12 '15 at 22:19

I will start with a working example:

Working Example

This uses numbers, in place of images, but is still a valid example.

First, you will select the "Position text above" option, and in the rows of text you will place the following code:

<td class="c4">1</td><td class="c5">2</td><td class="c6 last">3</td>

replacing 1,2,and 3 with the images for that row(you will have to use an image tag to get this to work in a friendly way).

Once you have setup all three of your rows, add the following to the question javascript:

 Qualtrics.SurveyEngine.addOnload(function()
{
    /*Place Your Javascript Below This Line*/
    $$('.c1').each(
        function (e) {
            e.remove(); 
        } 
    );
});

This hides a placeholder inserted by qualtrics and allows your rows to line up nicely!

Enjoy! Note though that this will likely require the images to be sized properly(I havent tested images)

Thanks! Very helpful. I'm now adding some code so that when the answer choice are randomized, the images in the headers change accordingly. — redfuse, May 17 '15 at 18:33

Qualtrics JavaScript: Append an image over matrix text boxes

2 Answers2