javascript - 在提交 MTurk 作业之前,需要从两组单选按钮中进行选择
问题描述
我正在使用 Amazon MTurk 提供的 html 模板来测试音频自然度 ( https://requestersandbox.mturk.com/create/projects/new )。在我的实验中,每个音频样本都会有两个句子。在继续之前,工作人员需要为这两个句子中的每一个选择一个等级。
我已成功修改模板,因此只有 1 个音频样本和两组单选按钮。但是,我不能省略Submit
第一组之后的按钮(见截图)。
这是修改后的代码。我应该省略或连接什么,以便Submit
在两组单选按钮之后只有一个按钮?从文档看来,由于只有 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>
解决方案
我不确定分类元素是否可行,但crowd-radio-group
&crowd-radio-button
应该为您的目的解决工作。
该文档包括单个组的基本模板。对于多个,我在每个中都包含一个唯一name
属性,并通过请求者沙箱运行它。图片
<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
}
我找不到任何用于表单验证的东西,但这里有一个简单的方法来检查和突出显示缺失的组。图片
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();
}
}
}
你总是可以抛弃人群元素。人群形式可能是必要的,但标准的 HTML 元素似乎可以正常工作。这是我在偶然发现人群广播组之前正在使用的一个示例。 https://gitlab.com/snippets/2013533/raw
推荐阅读
- gitlab - 如何从 GitLab CI/CD 获取 url
- vue.js - Material Design Card (Vue) 中的居中按钮
- python-3.x - 如何打印此图案
- python - 从元素中删除不必要的值并在 Python 中的列表中创建一个新元素
- acumatica - 在营销列表选择标准中使用 @Today
- python-3.x - 加快在另一个索引列表中查找下一个索引(numpy)
- html - 如何在滚动条上绘制垂直线?
- oracle - 错误 ORA-01031,当我尝试创建表空间时显示。我能做些什么?
- git - 如何从没有子模块的分支中签出带有子模块的分支
- c# - 如何基于 Api 上的 url 从服务器检索文件