I have an HTML table which can be edited by an MTurk for the purpose of data collection. I have a function built to turn the table into a json so that it appears in one row for each HIT except I am unsure of how to now submit this. I have successfully aggregated the data to json and then subsequently logged it in the console. I am relatively new to HTML and Javascript. The Ideal answer would clearly demonstrate how I would submit the data back to Amazon in Sandbox.
Javascript
<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>
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>
You're really close. Right below the
element, add another one:
Then, instead of doing
do this:
That will cause the value of the hidden
datainput element to hold the value oftable. When the Worker presses submit, this hidden field will be transmitted to MTurk and available when you get the HIT.