在提交 MTurk 作业之前需要从两组单选按钮中进行选择

Question

我正在使用 Amazon MTurk 提供的 html 模板来测试音频自然度 (https://requestersandbox.mturk.com/create/projects/new)。在我的实验中，每个音频样本都有两个句子。在继续之前，工作人员需要 select 对两个句子中的每一个进行评分。

我已经成功修改了模板，现在只有 1 个音频样本和两组单选按钮。但是，我不能在第一组之后省略 Submit 按钮（见屏幕截图）。

这是修改后的代码。我应该省略或连接什么，以便在两组单选按钮之后只有一个 Submit 按钮？从 the documentation 看来，由于只有 1 个 crowd-form 元素，因此应该只有 1 个“提交”按钮。

<!-- You must include this JavaScript file -->
<script src="https://assets.crowd.aws/crowd-html-elements.js"></script>

<!-- You must include crowd-form so that your task successfully submit answers -->
<crowd-form answer-format="flatten-objects">

    <!-- The crowd-classifier element will create a tool for the Worker to select the 
          correct answer to your question -->
    <crowd-classifier 
        categories="['Excellent - Completely natural speech', 'Good - Mostly natural speech', 'Fair - Equally natural and unnatural speech', 'Poor - Mostly unnatural speech', 'Bad - Completely unnatural speech']"
        header="How natural (i.e. human-sounding) is the first voice sample?"
        name="audio-naturalness-1">
        
            <classification-target>
                <audio controls="" style="width: 100%">

                    <!-- Your audio file URLs will be substituted for the "audio_url" variable 
                          when you publish a batch with a CSV input file containing multiple 
                          audio file URLs -->
                    <source src="${audio_url}" type="audio/mp3" />

                </audio>
            
            </classification-target>
    </crowd-classifier>
    
    <crowd-classifier 
        categories="['Excellent - Completely natural speech', 'Good - Mostly natural speech', 'Fair - Equally natural and unnatural speech', 'Poor - Mostly unnatural speech', 'Bad - Completely unnatural speech']"
        header="How natural (i.e. human-sounding) is the second voice sample?"
        name="audio-naturalness-2">
        
            
    </crowd-classifier>
</crowd-form>

Answer 1

我不确定分类元素是否可行，但是 crowd-radio-group 和 crowd-radio-button 应该可以解决您的问题。

该文档包括一个用于单个组的 bare-bones 模板。对于多个，我在每个中都包含了一个唯一的 name 属性，并通过请求者沙箱运行它。 image

<crowd-radio-group name="S1">
<crowd-radio-button name="S1_1" value="Poor">Poor</crowd-radio-button>
...
<crowd-radio-button name="S1_5" value="Excellent">Excellent</crowd-radio-button>
</crowd-radio-group>


<crowd-radio-group name="S2">
<crowd-radio-button name="S2_1" value="Poor">Poor</crowd-radio-button>
...
<crowd-radio-button name="S2_5" value="Excellent">Excellent</crowd-radio-button>
</crowd-radio-group>

从那里，输出应该产生：

{
  "S1_1.Poor": false,
  "S1_2.Bad": false,
  "S1_3.Fair": false,
  "S1_4.Good": false,
  "S1_5.Excellent": true,
  "S2_1.Poor": false,
  "S2_2.Bad": false,
  "S2_3.Fair": false,
  "S2_4.Good": false,
  "S2_5.Excellent": true
}

我找不到任何用于表单验证的东西，但这里有一个简单的方法检查并突出显示缺失的组。 image

function is_valid_group(rbg)
{
    'use strict';
    var radio_group=document.querySelector(`crowd-radio-group[name="${rbg}"`);
    var radios = radio_group.querySelectorAll(`crowd-radio-button[role="radio"]`);
    var valid_group = false;
    for (let i = 0, j = radios.length; i < j; i++)
    {
        valid_group = valid_group || radios[i].checked;
    }

    if (valid_group === false)
    {
        for (let i = 0, j = radios.length; i < j; i++)
        {
            radios[i].parentElement.style.backgroundColor = 'pink';
        }
    }
    return valid_group;
}

window.onload = function()
{
    'use strict';
    document.querySelector(`crowd-form`).onsubmit = event =>
    {
        if (!is_valid_group("S1") || !is_valid_group("S2"))
        {
            alert("Please answer both questions");
            event.preventDefault();
        }
    }
}

您可以随时放弃 crowd-elements。 crowd-form 可能是必需的，但标准的 HTML 元素似乎工作正常。这是一个在我偶然发现 crowd-radio-group 之前我正在使用的示例。 https://gitlab.com/snippets/2013533/raw

在提交 MTurk 作业之前需要从两组单选按钮中进行选择

Require selection from two groups of radio buttons before submitting MTurk assignment

html

javascript

mechanicalturk

amazon-web-services