Question

在Qualtrics中，我试图创建这样的东西： https://dl.dropboxusercontent.com/u/8114735/Screen%20Shot%202015-05-12%20at%2017.49.17.png

将文本框放在彼此旁边和顶部的唯一方法是使用带有文本输入的矩阵表。但是，这只会为您提供文本框，文本输入框上方没有空格来插入图像。所以我现在尝试使用javascript附加这些图片。文本框的ID格式为QR~QID17~3~2~TEXT（第3行第2列的方框）。

以下是我用3x3矩阵中的文本框制作的示例。 https://eu.qualtrics.com/WRQualtricsSurveyEngine/?SID=SV_b30tGcjTmJWTlYN&SVID=&Preview=Block&ID=BL_enEP0YjUHaK5yPX&Q_DONT_SAVE=1

有谁知道如何在这些盒子上添加图片？感谢。

Answer 1

如何使用DIV容器？

<强> 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

Answer 2

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:

tips.each.do |...|

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:

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

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)

Qualtrics JavaScript：在矩阵文本框上附加图像

2 个答案: