2017-09-07 2 views
1

J'ai un tableau HTML qui peut être édité par un MTurk à des fins de collecte de données. J'ai une fonction construite pour transformer la table en json afin qu'elle apparaisse dans une rangée pour chaque HIT sauf que je ne suis pas sûr de la façon de soumettre maintenant ceci. J'ai réussi à agréger les données à json, puis l'ai ensuite enregistré dans la console. Je suis relativement nouveau en HTML et Javascript. La réponse idéale montrerait clairement comment je retournerais les données à Amazon dans Sandbox.Envoyer la sortie JSON à MTurk soumission

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> 

Répondre

1

Vous êtes vraiment proche. Juste en dessous du

<input type='hidden' value='' name='assignmentId' id='assignmentId'/> 
élément

, ajouter un autre:

<input type='hidden' value='' name='data' id='data'/> 

Ensuite, au lieu de faire

alert(JSON.stringify(table)); 

faire ceci:

$('#data').val(JSON.stringify(table)); 

Cela entraînera la valeur du caché data élément d'entrée pour contenir la valeur de table. Lorsque le travailleur appuie sur soumettre, ce champ caché sera transmis à MTurk et disponible lorsque vous obtenez le HIT.

+0

Je l'ai déjà compris mais vous avez raison, merci pour la réponse –