Javascript 将输出JSON发送到MTurk提交
我有一个HTML表格,可以由MTurk编辑以收集数据。我构建了一个函数,将表转换为json,这样每次点击都会显示在一行中,但我不确定现在如何提交。我已经成功地将数据聚合到json,然后将其记录到控制台中。我对HTML和Javascript比较陌生。理想的答案是清楚地展示我将如何在沙箱中将数据提交回Amazon JavascriptJavascript 将输出JSON发送到MTurk提交,javascript,html,mechanicalturk,Javascript,Html,Mechanicalturk,我有一个HTML表格,可以由MTurk编辑以收集数据。我构建了一个函数,将表转换为json,这样每次点击都会显示在一行中,但我不确定现在如何提交。我已经成功地将数据聚合到json,然后将其记录到控制台中。我对HTML和Javascript比较陌生。理想的答案是清楚地展示我将如何在沙箱中将数据提交回Amazon Javascript <script language='Javascript'> function deleteRow(row) { var i=row.p
<script language='Javascript'>
function deleteRow(row)
{
var i=row.parentNode.parentNode.rowIndex;
document.getElementById('Table').deleteRow(i);
}
function addRow(row)
{
var i = row.parentNode.parentNode.rowIndex;
var tr = document.getElementById('Table').insertRow(i+1);
tr.innerHTML = row.parentNode.parentNode.innerHTML;
tr.children[0].innerHTML = tr.parentNode.querySelectorALL("tr").length-1;
}
$('#convert-table').click(function()
{
var table = $('#Table').tableToJSON(
{
onlyColumns:[0,1,2],
extractor:function(cellIndex, $cell) {
return $cell.find('input').val();
}
});
console.log(table);
alert(JSON.stringify(table));
});
</script>
函数deleteRow(行)
{
var i=row.parentNode.parentNode.rowIndex;
document.getElementById('Table').deleteRow(i);
}
函数addRow(row)
{
var i=row.parentNode.parentNode.rowIndex;
var tr=document.getElementById('Table').insertRow(i+1);
tr.innerHTML=row.parentNode.parentNode.innerHTML;
tr.children[0].innerHTML=tr.parentNode.queryselectoral(“tr”).length-1;
}
$(“#转换表”)。单击(函数()
{
var table=$(“#table”).tableToJSON(
{
仅列:[0,1,2],
提取器:函数(cellIndex,$cell){
返回$cell.find('input').val();
}
});
控制台日志(表);
警报(JSON.stringify(表));
});
HTML
<HTMLQuestion xmlns="http://mechanicalturk.amazonaws.com/AWSMechanicalTurkDataSchemas/2011-11-11/HTMLQuestion.xsd">
<HTMLContent><![CDATA[
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8'/>
<script type='text/javascript' src='https://s3.amazonaws.com/mturk-public/externalHIT_v1.js'></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://storage.googleapis.com/jquerytabletohtml/jquery.tabletojson.js"></script>
</head>
<body>
<form name='mturk_form' method='post' id='mturk_form' action='https://www.mturk.com/mturk/externalSubmit'>
<input type='hidden' value='' name='assignmentId' id='assignmentId'/>
<h1 align="center">Insertion of Missing Data</h1>
<h2>Instructions:</h2>
<p>Open the document <a href="https://storage.googleapis.com/directionalsurvey/Amazon%20Turk%20Test%20files/PDFS/100122514.pdf" target='_blank'>HERE</a> and look for a missing value by scanning a column in the pdf until the data shown below does not line up. when you find one insert a row and enter the three variables Measured Depth, Inclination, and Azimuth.</p>
<p> The variables could appear as: </p>
<ul>
<li><b>Measured Depth</b></li>
<ul><li>MD, Depth, Measured Depth, M.D.</li></ul>
<li><b>Inclination</b></li>
<ul><li>Incl, IncAng, Inclination Angle, Inclination</li></ul>
<li><b>Azimuth</b></li>
<ul><li>Azi, Azimuth Angle, DirDeg, Directional Angle</li></ul>
</ul>
<p>I expect there to be <b>~ 5 </b>missing rows... when you are done hit submit.</p>
<div id="tablediv">
<table id="Table" border="1">
<tr>
<td><b>Measured Depth</b></td>
<td><b>Inclination</b></td>
<td><b>Azimuth</b></td>
<td><b>Delete?</b></td>
<td><b>Add Row?</b></td>
</tr>
<tr>
<td><input size=25 type="text" id="Measured Depth0[]" contenteditable="true" value='339'></td>
<td><input size=25 type="text" id="Inclination0[]" contenteditable='true' value='0.540000021'></td>
<td><input size=25 type="text" id="Azimuth0[]" contenteditable='true' value='310.7200012'></td>
<td><input type="button" id="delbutton0" value="Delete" onclick="deleteRow(this)"/></td>
<td><input type="button" id="addmorebutton0" value="Add Row Below" onclick="addRow(this)"/></td>
</tr>
<tr>
<td><input size=25 type="text" id="Measured Depth1[]" contenteditable="true" value='432'></td>
<td><input size=25 type="text" id="Inclination1[]" contenteditable='true' value='0.930000007'></td>
<td><input size=25 type="text" id="Azimuth1[]" contenteditable='true' value='326.3599854'></td>
<td><input type="button" id="delbutton1" value="Delete" onclick="deleteRow(this)"/></td>
<td><input type="button" id="addmorebutton1" value="Add Row Below" onclick="addRow(this)"/></td>
</tr>
</table>
</div>
<button id="convert-table">Convert!</button>
<p><input type='submit' id='submitButton' value='Submit' /></p></form>
<script language='Javascript'>turkSetAssignmentID();</script>
</body>
</html>
]]>
</HTMLContent>
<FrameHeight>900</FrameHeight>
</HTMLQuestion>
插入缺失数据
说明:
打开文档,通过扫描pdf中的一列来查找缺少的值,直到下面显示的数据没有对齐为止。找到一个后,插入一行并输入三个变量(测量深度、倾角和方位角)
变量可以显示为:
- 测量深度
- MD,深度,测量深度,M.D.
- 倾向
- 包括白炽灯、倾角、倾角
- 方位角
- 方位角、方位角、方向角
我预计会有~5行缺失。。。完成后点击提交
测量深度
倾向
方位角
删除?
添加行?
转换
turkSetAssignmentID();
]]>
900
你真的很接近了。正下方
元素,添加另一个元素:
那么,不是做,
alert(JSON.stringify(table));
这样做:
$('#data').val(JSON.stringify(table));
这将导致隐藏的
数据
输入元素的值保存表
的值。当工作人员按submit时,此隐藏字段将传输到MTurk,并在您点击时可用。我已经找到了答案,但您是正确的,因此感谢您的回复