ad.html

This is a very important file. It contains the text of your HTML ad. This is the first thing participants taking your experiment will see. This file exists locally. When you are debugging in local mode, the local file will be used. When you create an ad on the Ad Server, a copy of this file is uploaded to the psiTurk cloud server.

See also

psiturk.org Secure Ad Server
You ad.html file is uploaded and stored on the Secure Ad Server when you create a hit.
Command line tool for creating HITs
Info on how to create a HIT using the command line.

The structure of this file is very particular. There are two ways your ad will be viewed. First, when a potential participants is simply browsing the website, the will see one version of the ad. When the “Accept” the ad, the will see a second version that may include addition information (such as providing the link to launch your actual experiment).

These two types of adds are contained in the same file. Which one is displayed is set by the Jinja template <http://jinja.pocoo.org/docs/> The basic structure is:

{% if assignmentid == "ASSIGNMENT_ID_NOT_AVAILABLE" %}

        HTML/CSS FOR AD BEFORE ACCEPTING

{% else %}

        HTML/CSS FOR AD AFTER ACCEPTING

{% endif %}

Important

You cannot directly reference addition CSS or JS files in the ad since the ad server will host the ad using https://. As a result you need to include all CSS styles you want applied to your ad directly in the file. boostrap.min.css is provided for free by the ad server.

For example, here is an example template that comes with the default stroop example.

<!doctype html>
<!--
        The ad.html has a very specific format.

        Really there are two "ads" contained within this file.

        The first ad displays to participants who are browsing
        the Amazon Mechanical Turk site but have not yet accepted
        your hit.

        The second part of the ad display after the person selected
        "Accept HIT" on the Amazon website.  This will reload the
        ad and will display a button which, when clicked, will pop
        open a new browser window pointed at your local psiTurk
        server (assuming it is running and accessible to the Internet).

        See comments throughout for hints

-->
<html>
        <head>
                <title>Psychology Experiment</title>
                <link rel=stylesheet href="/static/css/bootstrap.min.css" type="text/css">
                <style>
                        /* these tyles need to be defined locally */
                        body {
                            padding:0px;
                            margin: 0px;
                            background-color: white;
                            color: black;
                            font-weight: 300;
                            font-size: 13pt;
                        }

                        /* ad.html  - the ad that people view first */
                        #adlogo {
                            float: right;
                            width: 140px;
                            padding: 2px;
                            border: 1px solid #ccc;
                        }

                        #container-ad {
                            position: absolute;
                            top: 0px; /* Header Height */
                            bottom: 0px; /* Footer Height */
                            left: 0px;
                            right: 0px;
                            padding: 100px;
                            padding-top: 5%;
                            border: 18px solid #f3f3f3;
                            background: white;
                        }
                </style>
        </head>
        <body>
                <div id="container-ad">

                        <div id="ad">
                                <div class="row">
                                        <div class="col-xs-2">
                                                <!-- REPLACE THE LOGO HERE WITH YOUR  UNIVERSITY, LAB, or COMPANY -->
                                                <img id="adlogo" src="{{ server_location }}/static/images/university.png" alt="Lab Logo" />
                                        </div>
                                        <div class="col-xs-10">

                                                        <!--
                                                                If assignmentid is "ASSIGNMENT_ID_NOT_AVAILABLE"
                                                                it means the participant has NOT accepted your hit.
                                                                This should display the typical advertisement about
                                                                your experiment: who can participate, what the
                                                                payment is, the time, etc...

                                                        -->
                                                        {% if assignmentid == "ASSIGNMENT_ID_NOT_AVAILABLE" %}

                                                            <h1>Call for participants</h1>
                                                            <p>
                                                                        The XXX Lab at XXXXX University is looking for online participants
                                                                        for a brief psychology experiment. The only requirements
                                                                        are that you are at least 18 years old and are a fluent English
                                                                        speaker.  The task will that XXXXX minutes and will pay XXXXX.
                                                            </p>
                                                            <div class="alert alert-danger">
                                                                        <strong>This task can only be completed once.</strong>
                                                                        If you have already completed this task before the system will not
                                                                        allow you to run again. If this looks familiar please return the
                                                                        HIT so someone else can participate.
                                                            </div>
                                                            <p>
                                                                    Otherwise, please click the "Accept HIT" button on the Amazon site
                                                                    above to begin the task.
                                                                </p>


                                                        {% else %}

                                                                <!--
                                                                        OTHERWISE
                                                                        If assignmentid is NOT "ASSIGNMENT_ID_NOT_AVAILABLE"
                                                                        it means the participant has accepted your hit.
                                                                        You should thus show them instructions to begin the
                                                                        experiment ... usually a button to launch a new browser
                                                                        window pointed at your server.

                                                                        It is important you do not change the code for the
                                                                        openwindow() function below if you want you experiment
                                                                        to work.
                                                                -->
                                                            <h1>Thank you for accepting this HIT!</h1>
                                                            <p>
                                                                By clicking the following URL link, you will be taken to the experiment,
                                                                including complete instructions and an informed consent agreement.
                                                            </p>
                                                            <script>
                                                                        function openwindow() {
                                                                        popup = window.open('{{ server_location }}/consent?hitId={{ hitid }}&assignmentId={{ assignmentid }}&workerId={{ workerid }}','Popup','toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=no,width='+1024+',height='+768+'');
                                                                        popup.onunload = function() { location.reload(true) }
                                                                        }
                                                            </script>
                                                            <div class="alert alert-warning">
                                                                <b>Warning</b>: Please disable pop-up blockers before continuing.
                                                            </div>

                                                        <button type="button" class="btn btn-primary btn-lg" onClick="openwindow();">
                                                                  Begin Experiment
                                                                </button>


                                                        {% endif %}
                                                        <!--
                                                                endif
                                                        -->
                                        </div>
                        </div>
                </div>
        </body>
</html>