Mechanical Turk External Page with JQuery

published 11 Aug 2009 by Mark Percival
filed under: Code

This is part of a series of Mechanical Turk blog posts – check out more at Economics of Mechanical Turk, Mechanical Turk in Ruby, and Building Mechanical Turk into Rails(coming soon).

If you lazy, and all good programmers are, you don’t want to spend too much time building the external pages for your Turkers to land on. Ideally you’d like to be able to simply pass in a variable, have them perform the task, and submit it – all without you having to be involved.

Amazon currently uses a static page with javascript in it’s example ruby pack, and while it’s a perfectly acceptable example, I prefer to use JQuery when I’m doing any significant page manipulation. So what I’ve done is rewrite the page in a more unobtrusive manner and using some tried and true tools to get the work done.

Get to the code already!

<!-- This file needs to be hosted on an external server.  -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  <title>Title, an XHTML requirement. This message brought to you by the W3C</title>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
	<script src="http://projects.allmarkedup.com/jquery_url_parser/jquery.url.packed.js" type="text/javascript"></script>
</head>
<body>
<form id="mturk_form" method="post" action="http://www.mturk.com/mturk/externalSubmit" onSubmit="return validFormCheck()">
<input type="hidden" id="assignmentId" name="assignmentId" value="" />
<h1>Is this picture inappropriate?</h1>

<h2>Criteria</h2>
<ul>
  <li>Look at the picture and tell me if it's inappropriate</li>
</ul>   
<div id='picture'></div>                                 
<input type="radio" name="innappropriate" value="no" />No<br>
<input type="radio" name="innappropriate" value="yes" />Yes<br>
<p/>
<input id="submitButton" type="submit" name="Submit" value="Submit" />
<p/>

</form>
<script type='text/javascript'>
    /*<![CDATA[*/
 		// From the Jquery plugin - http://projects.allmarkedup.com/jquery_url_parser/
		var assignmentId = $.url.param("assignmentID");
  	$('#assignmentId').value = assignmentId;


    //
    // Check if the worker is PREVIEWING the HIT or if they've ACCEPTED the HIT
    //
    if (assignmentId == "ASSIGNMENT_ID_NOT_AVAILABLE")
    {
      // If we're previewing, disable the button and give it a helpful message
      $('#submitButton').disabled = true;
      $('#submitButton').value = "You must ACCEPT the HIT before you can submit the results.";
    }
		//
		// Now show the image
		//
		$('#picture').append($('<img>').attr('src', $.url.param("picture_uri")));



    /*]]>*/
</script>
</body>
</html>

What’s going on here:

  1. First we disable the submit button to keep the user from submitting it without first accepting the assignment. This happens when a Turker is previewing the task.
  2. If they’ve accepted it, and we have an AssignmentID, we go ahead and put the AssignmentID in the form. This is the only way Amazon can know whom the submission belong to.
  3. We grab the picture URI from the URL params and display it to the user via JQuery. Obviously we’re assuming that your task will pass a picture_uri parameter.

blog comments powered by Disqus