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

Question

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

让文本框彼此相邻和重叠的唯一方法是使用带有文本输入的矩阵 table。但是，这只为您提供了文本框，文本输入框上方没有 space 来插入图像。所以我现在尝试使用 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

我将从一个工作示例开始：

Working Example

这使用数字代替图像，但仍然是一个有效的示例。

首先，您将 select "Position text above" 选项，然后在文本行中放置以下代码：

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

将 1、2 和 3 替换为该行的图像（您必须使用图像标签才能使其以友好的方式工作）。

设置完所有三行后，将以下内容添加到问题 javascript：

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

这隐藏了由 qualtrics 插入的占位符，并允许您的行很好地排列！

尽情享受吧！请注意，这可能需要正确调整图像大小（我还没有测试过图像）

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

Qualtrics JavaScript: Append an image over matrix text boxes

javascript

qualtrics