0

我是一些 JavaScript 的新手（并且正在苦苦挣扎），因此将不胜感激。有许多选项可以完成以下过程，所以我将首先在高层次上解释我想要做的事情。

我有一个 Qualtrics 调查，我想使用一个热点，上面有一张带有多个位置的地图图片。我创建了几个区域。在调查期间，要求用户选择一个位置。这很好，但我想问一下他们是否选择了正确的位置。

选项 1： 使用 JavaScript 监听页面上的点击事件并弹出一个提示（带有选项：ok // cancel）确认他们的选择。如果他们单击确定，则调查进入下一页。如果取消，则当前选择被撤消或页面重新加载而未选择任何内容。我发现了一些代码How to create a popup window in a Qualtrics Survey Question以将提示窗口作为起点（见下文）。但是我有两个问题：

1）我无法检索位置值（它说未识别） 2）我不知道如何重置页面/问题以便没有选择任何项目。

选项 2： 让用户选择一个位置（我在热点设置中将其限制为 1 个位置）。在下一页（即问题）中，我可以使用管道文本检索选择了哪个项目，${q://QID25/ChoiceGroup/SelectedChoicesForAnswer/2}并可以询问用户这是否是正确的位置。我想要一些 JavaScript 来监听点击，然后了解是否选择了是或否。如果是，则进入下一页。如果否，则继续上一页。我的问题是

1）如何检索值是/否 2）如何重置热点选择。

为了帮助这里有一张热点的小图片（故意模糊！）：

Q25 热点显示用户需要选择的位置

==================================================== ======== 选项 1 代码（由上面的链接提供） 注意：我不是 JavaScript 专家，我相信下面有一些代码实际上不是必需的，但我把它们留在了，但是，请随时标记这些，以便我学习！

步骤 1：将以下代码粘贴到外观 -> 高级 -> 添加自定义 css。这是为了允许创建可用于调用脚本的额外按钮。

#CustomButton{
border: none;
    color: #fff;
    font-size: 16px;
    padding: 8px 20px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
    cursor: pointer;
    margin: 0;
    text-align: center;
    text-decoration: none;
    -webkit-appearance: none;
    transition: background .3s;
    background-color: #c32432;
}

Step 2: Q25 将以下代码粘贴到问题的js(onload)中，在第一次点击页面时调用提示框（即这个过程有效地点击了调用Step 3中的js代码的customButton）

Qualtrics.SurveyEngine.addOnload(function()
{
        this.questionclick = function(event,element){
        $('CustomButton').click();
    };

});

第 3 步：Q25 将以下代码粘贴到您希望出现弹出框的问题的 js(onready) 中：

Qualtrics.SurveyEngine.addOnReady(function()
{
const that=this;
    this.hideNextButton();
    var btn = jQuery('<div id="Buttons"><input id="CustomButton" class="NextButton Button"  title="  Next  " type="button" name="NextButton" value=" Next  "  aria-label="Next"></div>') //I can add hidden="True" if I wanted to hide this button on the screen.
    jQuery('#Buttons').append(btn);

    jQuery('#CustomButton').on('click', function(){
        var txt;
        var e= jQuery("[id='QR~QID25']").val() //<=== need help to retrieve location selected
        var r = confirm("You chose this location, please confirm this is correct? "+e);
         if (r == true) {
                 that.clickNextButton();
         } else {
                 //how do I clear the selection(s) / reset the page?
          }

    });

});

==================================================== ======== 选项 2 代码

Step 1: Q25 将以下代码粘贴到问题的js(onload)中，第一次点击自动跳转到下一个问题

Qualtrics.SurveyEngine.addOnload(function()
{
        this.questionclick = function(event,element){
        $('NextButton').click();
    };

});

下一个问题（Q28）提示用户确认选择是否正确（见图）： Q28

Step 2: Q28 将以下代码粘贴到问题的js(onReady)中。 注意：此代码不是最终产品，但我正在尝试制定语法以首先获取值。该代码目前不起作用，因为它在控制台中没有给我任何东西。我也有点不确定我的 ID 是否正确。简而言之，我坚持获取是/否值，并且根据选项 1 坚持如何重置上一页上的热点选择。

初始来源：无需管道文本即可检索选定的答案

Qualtrics.SurveyEngine.addOnReady(function()
{
    document.getElementById("QR~QID28").onchange = function(element){
       //console.log(element); // use console to look at element to find what you need in the question;
       var ele_var1=element.target.value.toString(); // gets selected option value from question;
       var ele_var=element.currentTarget[ele_var1].Text; // gets text value of selected option;

       /*document.getElementById("QR~QID6").value=ele_var; //updates text question;*/

if (var == "Yes") {
                 that.clickNextButton();
         } else {
                that.clickPreviousButton();
          }

   }
});

在 DevTools 窗口截图（见下图）中，我已经表明我选择了“是”，但我认为代码并没有给出答案。这就是我对 HTML 和 JS 知识的缺乏阻止我的地方，所以希望能得到一些帮助。

在此处输入图像描述

如果您深入了解这个问题 - 非常感谢您的阅读 - 如果您能够回复并给我一些指导，那就更感谢了！:)

谢谢

杆

4

1 回答 1

0

选项 1 是不可能的，因为区域定义在 SVG 内。

在选项 2 中，您的脚本中有许多错误。此外，你正在努力做到这一点。此外，您需要隐藏下一个/上一个按钮并将问题放在自己的页面上。尝试：

Qualtrics.SurveyEngine.addOnReady(function() {
  var qobj = this;
  jQuery("#Buttons").hide();
  var q = jQuery("#"+qobj.questionId);
  q.find("input:first").click(function() { qobj.clickNextButton(); });
  q.find("input:last").click(function() { qobj.clickPreviousButton(); });
});
于 2019-11-06T15:19:22.960 回答