Qualtrics使用JavaScript插入图片始终显示在页面底部如何解决

问题原因 #

问题出在你写的渲染逻辑：document.body.appendChild(a)会直接把生成的图片插到整个页面DOM树的最末尾，跟你怎么调整区块、题目的顺序完全没关系，所以不管怎么挪题的位置，图片永远钉在页面最底部。

原有配置参考 #

你当前的区块设置逻辑是没问题的：单区块内放2道独立题，顶部空白题绑定图片渲染JS，下方放文本题展示题干。
问卷流结构如下：

实际预览错位效果：

修复方法 #

不要把图片挂到全局的body节点上，直接把图片插到当前绑定JS的空白题的容器里就行。这样图片的位置会完全跟着这道空白题走，你把空白题放在题干上方，图片自然就显示在整个题组的顶部，不会乱跑。
直接替换成下面的代码就能用：

Qualtrics.SurveyEngine.addOnload(function()
{
    // 拿到当前绑定JS的这道空白题的DOM容器
    const questionContainer = this.getQuestionContainer();

    function display_image(src, width, height) {
        const img = document.createElement("img");
        img.src = src;
        img.width = width;
        img.height = height;
        // 可选：加个下外边距，和下面的题干拉开距离，数值可以自己调
        img.style.marginBottom = "20px";
        // 把图片插到当前题目容器的最开头，保证在题干上方
        questionContainer.prepend(img);
    }
    
    // 后面要做条件判断切图，直接在这里根据分支/嵌入数据改传入的src就行，不用手动加几百张图
    display_image('替换成你的图片URL', 
             770, 
             385);

});

Qualtrics.SurveyEngine.addOnReady(function()
{
    // 页面完全加载后要跑的逻辑写这里
});

Qualtrics.SurveyEngine.addOnUnload(function()
{
    // 页面卸载时的清理逻辑写这里
});

注意点 #

• 修完之后不用改你原来的区块结构，保持空白题在上、文本题在下的顺序就行，图片不会再跑到页面底部
• 如果要调整图片和题干的间距，改img.style.marginBottom的数值就可以
• 后续做多条件匹配不同图片的逻辑，直接在调用display_image前判断条件传对应src即可，完全能适配数百张图的动态展示需求

内容的提问来源于stack exchange，提问作者Julian