Skip to content
This repository has been archived by the owner on May 24, 2019. It is now read-only.

Collecting Browser Metadata in HIT

Jump to bottom
Thomas J. Leeper edited this page Nov 24, 2015 · 1 revision

Sometimes it is useful to collect metadata about a worker's browser in a HIT. This might be particularly important when a HIT has complex dynamic elements that render differently across web browsers, when displaying images at different sizes, etc. All of this information is relatively easy to collect using javascript embedded in an HTMLQuestion HIT. A complete example HIT is given below.

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>TITLE</title>
</head>
<body>
    <div style="font-family:sans-serif;margin-left:auto;margin-right:auto;width:60%">
        <div id="accept"></div>
        <form name='mturk_form' method='post' id='submitform' action='https://www.mturk.com/mturk/externalSubmit'>
        <!--
        <form name='mturk_form' method='post' id='submitform' action='https://workersandbox.mturk.com/mturk/externalSubmit'>
        -->
        <div>
            HIT CONTENT DISPLAYED TO WORKERS HERE
        </div>
        <input type='hidden' value='' name='assignmentId' id='assignmentId' />
        <input type='hidden' value='' name='browser' id='browser' />
        <input type='hidden' value='' name='engine' id='engine' />
        <input type='hidden' value='' name='platform' id='platform' />
        <input type='hidden' value='' name='language' id='language' />
        <input type='hidden' value='' name='width' id='width' />
        <input type='hidden' value='' name='height' id='height' />
        <input type='hidden' value='' name='resolution' id='resolution' />
        <script>
            /* function to extract parameters from URL */
            function turkGetParam( name ) { 
              var regexS = "[\?&]"+name+"=([^&#]*)"; 
              var regex = new RegExp( regexS ); 
              var tmpURL = fullurl; 
              var results = regex.exec( tmpURL ); 
              if( results == null ) { 
                return ""; 
              } else { 
                return results[1];    
              } 
            }

            var fullurl = window.location.href;
            var assign = turkGetParam('assignmentId');
            var hit = turkGetParam('hitId');
            var worker = turkGetParam('workerId');

            if(assign=="ASSIGNMENT_ID_NOT_AVAILABLE")
                {
                document.getElementById("accept").innerHTML = "<p style='font-weight:bold;text-align:center;'>Please accept the HIT!</p><br />";
                }
            else
                {
                document.getElementById('assignmentId').value = assign;
                document.getElementById('browser').value = navigator.userAgent;
                document.getElementById('engine').value = navigator.product;
                document.getElementById('platform').value = navigator.platform;
                document.getElementById('language').value = navigator.language;
                document.getElementById('width').value = screen.width;
                document.getElementById('height').value = screen.height;
                document.getElementById('resolution').value = screen.colorDepth;
                }
        </script>
        <input type="submit" value="Submit">
        </form>
        <br />
    </div>
</body>
</html>

This example collects several pieces of metadata:

  • Browser
  • Engine (the HTML rendering engine used)
  • Platform (operating system)
  • Language
  • Width (screen width)
  • Height (screen height)
  • Resolution

.

Clone this wiki locally