3

在 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

有谁知道如何在这些框上附加图像？谢谢。

4

2 回答 2

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;
}

小提琴

于 2015-05-12T13:35:32.920 回答
1

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

工作示例

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

首先，您将选择“将文本置于上方”选项，然后在文本行中放置以下代码：

<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 插入的占位符，并允许您的行很好地排列！

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

于 2015-05-12T22:19:09.610 回答