Qualtrics JavaScript: Adding Image Text Fields Over Matrices
In Qualtrics, I'm 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 fields both next to each other and above each other is to use a matrix table with text entry. However, this only gives you text boxes, no space above the text box to insert an image. So I am now trying to add these images using javascript. The ID of the text fields is in the QR ~ QID17 ~ 3 ~ 2 ~ TEXT format (for the window at line 3, column 2).
Here is a sample I made from 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 add an image on top of these fields? Thank.
source to share
I'll start with a working example:
This uses numbers instead of images, but is still a valid example.
First you will select the "Position text above" option, and in the lines of text you will put 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 images for that line (you'll have to use an image tag to make this work friendly).
Once you've configured all three of your lines, add the following to the javascript of the question:
Qualtrics.SurveyEngine.addOnload(function()
{
/*Place Your Javascript Below This Line*/
$$('.c1').each(
function (e) {
e.remove();
}
);
});
This hides the placeholder inserted by qualtrics and allows your lines to line up nicely!
Enjoy! Note that this will most likely require the correct image size (I have no verified images)
source to share
How do I use a 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;
}
source to share