TurkSuite Rating Bar

Please cite as: Alper, Morris (2014). "TurkSuite Rating Bar". Available online at http://mturk.mit.edu/rating.php

Instructions: The TurkSuite Rating Bar uses JQuery along with the RatingBar.js library. JQuery is a JavaScript library which adds extra functionality to JavaScript. RatingBar.js uses this extra functionality to create a bar which the user can use to give gradient response. We will also have to include some .css files — these add formatting to the bar, affecting its appearence.

In order to use the TurkSuite Rating Bar in your HIT, you must use the following two steps:

  1. Include the extra libraries by adding the following code next to the other library includes, near the top of the HTML file:
  2. <link href="http://mturk.mit.edu/jquery-ui.css" rel="stylesheet" type="text/css"/>
    <link href="http://mturk.mit.edu/jquery.ui.theme.css" rel="stylesheet" type="text/css" />
    <script src="http://mturk.mit.edu/jquery.min.js"></script>
    <script src="http://mturk.mit.edu/jquery-ui.min.js"></script>
    <script src="http://mturk.mit.edu/RatingBar.js"></script>

    Note: It is recommended that you download these and save them on your own server, as these files may be updated or change location. Also, see the note about mixed content on the TurkSuite Template Generator.

  3. Add the following code to your HIT where you want the rating bar to appear:
    <div style="width: 75%;">
    <b>bad word</b>
    <div style="text-align: right; position: relative; top: -20px">
    <b>good word</b>
    </div>
    <script>
    var rb = new RatingBar("ratingbar");
    rb.write();
    </script>
    </div>

    The resulting rating bar will look like this:

    bad word
    good word

    For more information on how to use the TurkSuite Rating Bar, see the comments in the RatingBar.js library.