Skip to content

Instantly share code, notes, and snippets.

@BlazerYoo

BlazerYoo/mturk.html

Created July 4, 2024 03:52
Show Gist options
  • Save BlazerYoo/a31c5f7ccc079b1df82d2427392e61b7 to your computer and use it in GitHub Desktop.
Save BlazerYoo/a31c5f7ccc079b1df82d2427392e61b7 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. BlazerYoo created this gist Jul 4, 2024.
    67 changes: 67 additions & 0 deletions mturk.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,67 @@
    <!-- For help on using this template, see the blog post: https://blog.mturk.com/editing-the-survey-link-project-template-in-the-ui-7c75285105fb#.py7towsdx --><!-- HIT template: SurveyLink-v3.0 --><!-- The following snippet enables the 'responsive' behavior on smaller screens -->
    <meta content="width=device-width,initial-scale=1" name="viewport" />
    <section class="container" id="SurveyLink"><!-- Instructions -->
    <div class="row">
    <div class="col-xs-12 col-md-12">
    <div class="panel panel-primary"><!-- WARNING: the ids "collapseTrigger" and "instructionBody" are being used to enable expand/collapse feature -->
    <h4 class="panel-heading"><strong>Survey Link Instructions</strong></h4>

    <div class="panel-body" id="instructionBody">
    <p>This is a short survey that asks you to look at an image of wildlife in social media and answer questions. Expected time commitment: less than 10 mins.</p>

    <p>Please answer all questions. To rate from strongly disagree to strongly agree, use your mouse to click on the appropriate number.</p>

    <p><strong>Make sure to leave this window open as you complete the survey. </strong> When you are finished, you will return to this page to paste the code into the box.</p>
    </div>
    </div>
    </div>
    </div>
    <!-- End Instructions --><!-- Survey Link Layout -->

    <div class="row" id="workContent">
    <div class="col-xs-12 col-md-6 col-md-offset-3"><!-- Content for Worker -->
    <table class="table table-condensed table-bordered">
    <colgroup>
    <col class="col-xs-4 col-md-4" />
    <col class="col-xs-8 col-md-8" />
    </colgroup>
    <tbody>
    <tr>
    <td><label>Survey link:</label></td>
    <td><a class="dont-break-out" href="http://[example.com/survey345.html]" target="_blank">http://example.com/survey345.html</a></td>
    </tr>
    </tbody>
    </table>
    <!-- End Content for Worker --><!-- Input from Worker -->

    <div class="form-group"><label for="surveycode">Provide the survey code here:</label> <input class="form-control" id="surveycode" name="surveycode" placeholder="e.g. 123456" required="" type="text" /></div>
    <!-- End input from Worker --></div>
    </div>
    <!-- End Survey Link Layout --></section>
    <!-- Please note that Bootstrap CSS/JS and JQuery are 3rd party libraries that may update their url/code at any time. Amazon Mechanical Turk (MTurk) is including these libraries as a default option for you, but is not responsible for any changes to the external libraries --><!-- External CSS references -->
    <link crossorigin="anonymous" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" integrity="sha384-IS73LIqjtYesmURkDE9MXKbXqYA8rvKEp/ghicjem7Vc3mGRdQRptJSz60tvrB6+" rel="stylesheet" /><!-- Open internal style sheet -->
    <style type="text/css">#collapseTrigger{
    color:#fff;
    display: block;
    text-decoration: none;
    }
    #submitButton{
    white-space: normal;
    }
    .image{
    margin-bottom: 15px;
    }
    /* CSS for breaking long words/urls */
    .dont-break-out {
    overflow-wrap: break-word;
    word-wrap: break-word;
    -ms-word-break: break-all;
    word-break: break-all;
    word-break: break-word;
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
    }
    </style>
    <!-- Close internal style sheet --><!-- External JS references --><script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js" integrity="sha384-s1ITto93iSMDxlp/79qhWHi+LsIi9Gx6yL+cOKDuymvihkfol83TYbLbOw+W/wv4" crossorigin="anonymous"></script>