app/assets/templates/experiment_base.html
<div id="content" ng-controller="ExperimentsCtrl">
<style>
.isa_info, .isa_success, .isa_warning, .isa_error {
border: 1px solid;
margin: 10px 0px;
padding:10px 10px 10px 50px;
background-repeat: no-repeat;
background-position: 10px center;-moz-border-radius:.5em;
-webkit-border-radius:.5em;
border-radius:.5em;
width: 500px;
}
.isa_info {
color: #00529B;
background-color: #BDE5F8;
background-image: url("/experiment_assets/info.png");
}
.isa_success {
color: #4F8A10;
background-color: #DFF2BF;
background-image:url("/experiment_assets/success.png");
}
.isa_warning {
color: #9F6000;
background-color: #FEEFB3;
background-image: url("/experiment_assets/warning.png");
}
.isa_error {
color: #D8000C;
background-color: #FFBABA;
background-image: url("/experiment_assets/error.png");
}
label input[type="text"], label input[type="email"] {
width: 300px;
}
.progress {
margin-top: -35px;
text-align: center;
}
#experimentConclusion textarea {
width: 800px;
height: 400px;
}
#content h2 {
margin-top: -14px;
}
.survey {
text-align: center;
font-size: x-large;
line-height: 150%;
width: -webkit-calc(800px - 2em);
padding: 1em;
border: 1px solid rgb(123, 144, 60);
border-radius: 5px;
background-color: rgb(212, 222, 184);
}
.survey a {
font-size: xx-large;
}
</style>
<h2>{{spec.experiment}} ยป {{stage}}</h2>
<div id="experimentPreface" ng-show="stage == PREFACE_STAGE">
<p>
</p>
<h3>Instructions</h3>
<ul>
<li ng-repeat="step in spec.instructions" ng-bind-html-unsafe="step"></li>
<li>Please do not leave this page, or close your browser during the experiment, your progress will be lost</li>
<li>
Ensure you have read the experiment <a href="/ParticipantInformation.html" target="_blank" ng-click="popupEthics($event)" style="">ethics statement</a>. <!-- You will need to click the link.-->
<ul>
<li>
<!--<label title="This checkbox will automatically check when the ethics statement has been read">-->
<!--<input type="checkbox" ng-checked="results.ethicsStatementViewed" disabled/>-->
I have read the <a href="/ParticipantInformation.html" target="_blank" ng-click="popupEthics($event)" style="">ethics statement</a>
<!--</label>-->
</li>
<li>
<label>
<input type="checkbox" ng-model="results.consented"/>
I consent to participating in this experiment and I understand I can leave at any time without penalty
</label>
</li>
<li>
<label>
<input type="checkbox" ng-model="results.allowContact"/>
I consent to be contacted (via email) for follow up questions if it is required
</label>
</li>
</ul>
</li>
<!--<li>-->
<!--You need to be signed in to participate in this experiment. Registration is very easy.-->
<!--<div ng-hide="loggedIn" class="isa_warning">You are not signed in yet. <a ng-click="login()">Click</a> to sign in.</div>-->
<!--<div ng-show="loggedIn" class="isa_info">You are signed in as {{userData.email}} </div>-->
<!--</li>-->
<li>
We'd like your contact details. We need to track who participates in the experiment.
<br />We will not distribute your details to anyone. These details will be deleted after the experiment.
<form name="detailsForm">
<label>
<span >Full name</span>
<input type="text" required name="fullName" ng-minlength="1" ng-model="results.name" />
</label>
<br/>
<label>
<span >Email</span>
<input type="email" name="email" required ng-model="results.email" />
</label>
</form>
</li>
<li>
Google Chrome is required for this experiment.
<p ng-show="isChrome()" class="isa_info">You are using chrome</p>
<p ng-hide="isChrome()" class="isa_error">You are NOT using <a href="http://chrome.google.com" target="_blank">Google Chrome</a></p>
</li>
</ul>
<div id="prefaceErrors" class="isa_error" ng-hide="errors.length == 0">
<ul>
<li ng-repeat="error in errors">{{error}}</li>
</ul>
</div>
<button ng-click="verifyPreface()">Start experiment</button>
</div>
<div id="experimentBody" ng-show="stage == EXPERIMENT_STAGE">
<div class="progress">
Experiment step {{step}}/{{spec.experimentSteps.length}} <meter value="{{step}}" max="{{spec.experimentSteps.length}}"></meter>
</div>
<div ng-include src="getPath()"></div>
<!--<button ng-click="step = step + 1">Next</button>-->
</div>
<div id="experimentConclusion" ng-show="stage == FINAL_STAGE">
<p>Thank you very much for participating.</p>
<p ng-show="spec.surveyLink" class="survey">
The experiment is over. However we would <em>really</em> appreciate it if you could complete this short survey.
<br/>
<a ng-href="{{spec.surveyLink}}" target="_blank">Click to go to the survey</a>
<br/>
Thanks so much!
</p>
<p class="isa_info" ng-show="resultsSending">Your results are being saved at the moment. <em>Please do not close the window or navigate away!</em>
<br/>
<progress></progress>
</p>
<p class="isa_success" ng-show="resultsSentSuccessfully == true">Your results have been saved. You may now close this window.
</p>
<div class="isa_error" ng-show="resultsSentSuccessfully == false">
Saving the results failed. We don't know why but something didn't work.
We'd still really like your experiment data, could please email the information you see below?
<br/>
Copy this data:
<label>
<textarea readonly>{{prettyResults}}</textarea>
</label>
<p>
and send to: <a href="mailto:anthony.truskinger@student.qut.edu.au">anthony.truskinger@student.qut.edu.au</a>
</p>
</div>
<p>Below is a copy of the data we have saved</p>
<label>
<textarea readonly> {{prettyResults}} </textarea>
</label>
<div id="summary"></div>
</div>
</div>