I was wondering if there is a way to submit an Amazon Mechanical Turk hit from my own web app using amazon sdk with React JS. I am able to display it as a HTML form through my web and using https://www.mturk.com/mturk/externalSubmit for the submit. Here is my form and an example hit from xml.
showHit() {
var current='';
var currentHit = this.state.hit;
if(Object.keys(this.state.hit).length === 0){
console.log('no select')
} else {
console.log(currentHit['HIT'])
document.getElementById('output').innerHTML = Object.values(currentHit['HIT'])
}
}
Inside my return to output.
<p id="output"></p>
<script>{this.showHit()}</script>
<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>
</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>Example Question</h1>
<img src={image} alt="alternatetext">
<fieldset id= "div1" required>
<label for= 'question1'> 1. Is this current content component a scientific figure or a table?</label><br>
<select name = "question1" id = "question1" required>
<option disabled selected value>Select an option</option>
<option id="figure">Figure</option>
<option id="table">Table</option>
</select>
<button onclick="myFunction()">confirm</button>
<br>
<br>
<label for= 'question2'> 2. Is this current content component cropped correctly?</label><br>
<select name = "question2" id = "question2" required>
<option disabled selected value>Select an option</option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
<br>
<br>
<label for= 'question3-4'> 3-4. Is this <a id = 'name'></a> labeled correctly?</label><br>
<script>
function myFunction(){
if (document.getElementById("figure").selected){
name = "figure";
} else if(document.getElementById("table").selected){
name = "table";
} else{
name = "[CONFIRM QUESTION 1]"
}
document.getElementById("name").innerHTML = name;
}
</script>
<select name = "question3-4" id = "question3-4" required>
<option disabled selected value>Select an option</option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
<br>
<br>
<label for= 'question5'> 5. What are the <b>explicit</b> meta-tags of this current content component </label><br>
<input name = "question5" id = "question5" required></input>
<br>
<br>
<label for= 'question6'> 6. What are the <b>implicit</b> meta-tags of this current content component </label><br>
<input name = "question6" id = "question6" required></input>
<br>
<br>
<p><input type='submit' id='submitButton' value='Submit' /></p></form>
</fieldset>
<script language='Javascript'>turkSetAssignmentID();</script>
</body>
</html>
]]>
</HTMLContent>
<FrameHeight>450</FrameHeight>
</HTMLQuestion>
My issue is that when I hit submit I get directed to the following error
There was a problem submitting your results for this HIT.
This HIT is still assigned to you. To try this HIT again, refresh the page. If this problem persists, you can contact the Requester for this HIT by clicking "HIT Details" above and then clicking "Contact This Requester" at the bottom of the popup.
To return this HIT and continue working on other HITs, click the "Return" button on the top or bottom of the right side of the page.
My only possible idea is that when I submit I somehow need to use an assignmentID and possibly the workerID but I do not know how to get those when I host the question on my own webpage.
Thank you for any help!