psiturk/example/templates/ad.html

<!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>
        <meta charset="utf-8" />
		<title>Psychology Experiment</title>
		<link rel="stylesheet" href="/static/css/bootstrap.min.css" type="text/css" />
        <link rel="icon" href="/static/favicon.ico" />
		<style type="text/css">
			/* 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 {
			    width: 140px;
			    padding: 2px;
			    border: 1px solid #ccc;
			    margin-right: 1em;
			}

            #container-not-an-ad { /* obtuse name because pesky ad-blocker extensions */
				background: white;
			    margin: 30px;
			}

			h1 {
				margin-top: 0px;
			}
		</style>
	</head>
	<body>
		<div id="container-not-an-ad" class="media">
			<div class="media-left pull-left" href="#">
						<!-- 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="media-body">

							<!-- 
								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 take 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 type="text/javascript">
									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+'');
							  		}
							    </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>
	</body>
</html>