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.

Answer 1

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)

Answer 2

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