app/assets/templates/tour_experiment.html
<div ng-controller="VirtualBirdTourCtrl" id="virtualBirdTourContainer">
<style type="text/css">
/*
div.vbt_annotation div.playOverlay
{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: rgba(50,50,50,0.3);
}
div.vbt_annotation div.playOverlay button
{
width: 14px;
height:14px;
display:block;
margin: 116px auto 0 auto;
border: 1px solid #7a903c;
border-radius: 4px;
-webkit-border-radius: 4px;
-ms-border-radius: 4px;
-moz-border-radius: 4px;
-o-border-radius: 4px;
}
div.vbt_annotation div.vbt_options button {
float: left;
margin: 2px;
}
*/
/* background */
#content-wrapper {
background-color: rgba(255, 255, 255, 0.85);
border-radius: 0 0 4px 4px;
-webkit-border-radius: 0 0 4px 4px;
-ms-border-radius: 0 0 4px 4px;
-moz-border-radius: 0 0 4px 4px;
-o-border-radius: 0 0 4px 4px;
}
/* side info and map */
.sideInfo {
float: right;
margin: 3px;
}
.extraInfo {
font-weight: normal;
}
.backgroundExtraInfo {
font-size: 11px;
}
#locationMap {
width: 100%;
height: 300px;
}
#transitionMap {
width: 100%;
height: 550px;
margin: 6px 0 10px 0;
}
img.simpleImage {
max-width: 150px;
max-height: 150px;
margin: 3px;
border-radius: 4px;
-webkit-border-radius: 4px;
-ms-border-radius: 4px;
-moz-border-radius: 4px;
-o-border-radius: 4px;
}
.sectionTitle {
padding: 0;
margin: 1px 0 2px 0;
}
.verifyInstructions {
font-size: 20px;
border-top: 1px solid #7b903c;
padding: 3px 0 0 0;
text-align: center;
}
.attribution {
padding: 0;
margin: 2px;
display: inline-block;
font-size: 10px;
font-style: italic;
}
/* annotations */
.annotation {
background-color: rgb(208, 208, 208);
border: 1px solid #7a903c;
border-radius: 4px;
-webkit-border-radius: 4px;
-ms-border-radius: 4px;
-moz-border-radius: 4px;
-o-border-radius: 4px;
position: relative;
z-index: 0;
overflow: hidden;
float: left;
padding: 0;
margin: 5px;
cursor: default;
width: 262px;
}
.frequencyLines {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.frequencyLines div {
position: absolute;
width: 100%;
border-width: 0;
border-bottom: 1px dotted #e8e7e4;
height: 15px;
color: white;
background-color: transparent;
text-align: left;
}
.frequencyLine01 {
left: 0;
top: 217px;
}
.frequencyLine02 {
left: 0;
top: 194px;
}
.frequencyLine03 {
left: 0;
top: 171px;
}
.frequencyLine04 {
left: 0;
top: 147px;
}
.frequencyLine05 {
left: 0;
top: 124px;
}
.frequencyLine06 {
left: 0;
top: 101px;
}
.frequencyLine07 {
left: 0;
top: 78px;
}
.frequencyLine08 {
left: 0;
top: 54px;
}
.frequencyLine09 {
left: 0;
top: 31px;
}
.frequencyLine10 {
left: 0;
top: 8px;
}
.annotationImage {
position: relative;
margin: 0 auto;
height: 256px;
overflow: hidden;
}
.annotationImage img {
z-index: 1;
height: 256px;
margin: 0 auto;
}
.annotationEventBound {
opacity: .9;
filter: alpha(opacity=90);
position: absolute;
z-index: 2;
border: 1px solid #51FF00;
}
.annotationActions {
background-color: #d4deb8;
background: linear-gradient(#d4deb8, #adc7a5);
background: -webkit-linear-gradient(#d4deb8, #adc7a5);
background: -ms-linear-gradient(#d4deb8, #adc7a5);
background: -moz-linear-gradient(#d4deb8, #adc7a5);
background: -o-linear-gradient(#d4deb8, #adc7a5);
border-top: 1px solid #7b903c;
overflow: hidden;
height: 29px;
}
.annotationActions ul {
list-style-type: none;
padding: 0;
margin: 0;
}
.annotationActions ul li {
float: left;
}
.annotationActions ul li label {
position: relative;
margin: 2px;
font-size: 11pt;
z-index: 2;
display: block;
padding: 2px 6px;
border: 1px solid #adc7a5;
border-radius: 4px;
-webkit-border-radius: 4px;
-ms-border-radius: 4px;
-moz-border-radius: 4px;
-o-border-radius: 4px;
background-color: #f5ffd9;
background: linear-gradient(#f5ffd9, #d4deb8);
background: -webkit-linear-gradient(#f5ffd9, #d4deb8);
background: -ms-linear-gradient(#f5ffd9, #d4deb8);
background: -moz-linear-gradient(#f5ffd9, #d4deb8);
background: -o-linear-gradient(#f5ffd9, #d4deb8);
}
.annotationActions ul li input {
position: absolute;
left: 20px;
top: 50%;
width: 10px;
height: 10px;
margin: -5px 0 0 0;
outline: 0 !important;
z-index: 1;
display: none;
}
.annotationActions ul li label:hover {
box-shadow: 0px 0px 8px #adc7a5;
-webkit-box-shadow: 0px 0px 8px #adc7a5;
-ms-box-shadow: 0px 0px 8px #adc7a5;
-moz-box-shadow: 0px 0px 8px #adc7a5;
-o-box-shadow: 0px 0px 8px #adc7a5;
border: 1px solid #adc7a5;
}
.annotationActions input[type="radio"]:checked+label,
.annotationActions button:active {
color: #97764A;
background-color: #ADC7A5;
background: linear-gradient(#ADC7A5, #d4deb8);
background: -webkit-linear-gradient(#ADC7A5, #d4deb8);
background: -ms-linear-gradient(#ADC7A5, #d4deb8);
background: -moz-linear-gradient(#ADC7A5, #d4deb8);
background: -o-linear-gradient(#ADC7A5, #d4deb8);
border: 1px solid #7b903c;
}
.annotationActions input[type="radio"]:checked+label b {
color: #97764A;
}
/* example annotations */
.exampleContainer {
overflow: hidden;
}
/* Annotations to verify */
.verifyContainer {
clear: both;
overflow: hidden;
/*
background-color: rgba(212, 222, 184, 0.6);
border-radius: 4px;
-webkit-border-radius: 4px;
-ms-border-radius: 4px;
-moz-border-radius: 4px;
-o-border-radius: 4px;
*/
}
.annotationResponses {
position: absolute;
top: 0;
left: 0;
text-align: center;
font-size: 16px;
margin: 0;
padding: 10px 5px 0 5px;
z-index: 10;
height: 286px;
color: #7a903c;
/*
background-color: #ADC7A5;
background: linear-gradient(#ADC7A5, #d4deb8);
background: -webkit-linear-gradient(#ADC7A5, #d4deb8);
background: -ms-linear-gradient(#ADC7A5, #d4deb8);
background: -moz-linear-gradient(#ADC7A5, #d4deb8);
background: -o-linear-gradient(#ADC7A5, #d4deb8);
*/
/* rgba(212, 222, 184, 0.5) #D4DEB8 */
/* rgba(173, 199, 165, 0.5) #ADC7A5 */
/* http://stackoverflow.com/questions/2293910/css3-transparency-gradient */
background: #ADC7A5; /* Old browsers */
background: -moz-linear-gradient(top, rgba(173,199,165,0.7) 0%, rgba(212,222,184,0.7) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(173,199,165,0.7)), color-stop(100%,rgba(212,222,184,0.7))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(173,199,165,0.7) 0%,rgba(212,222,184,0.7) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(173,199,165,0.7) 0%,rgba(212,222,184,0.7) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(173,199,165,0.7) 0%,rgba(212,222,184,0.7) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(173,199,165,0.7) 0%,rgba(212,222,184,0.7) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3adc7a5', endColorstr='#b3d4deb8',GradientType=0 ); /* IE6-9 */
}
.annotationResponses ul {
list-style-type: none;
padding: 0;
margin: 0;
}
/* transition map */
#transitionMap h1 {
margin: 10px 0;
}
#transitionMap h2 {
margin: 5px 0;
}
#transitionMap p {
margin: 3px;
}
.mapAttribution {
padding: 0;
display: block;
font-size: 10px;
font-style: italic;
color: grey;
}
p.instructionDisplay {
text-align: center;
font-size: 14px;
max-width: 1000px;
margin: 5px auto 10px auto;
}
#activityContainer p {
margin: 0 0 0 5px;
}
</style>
<div ng-show="showTransitionMap()">
<h2 class="sectionTitle" style="margin-top:15px;">
<span ng-show="firstStop()">Welcome to this virtual bird walk!</span>
<span ng-show="middleStops()">On to the next waypoint!</span>
</h2>
<div ng-show="firstStop()">
<p class="instructionDisplay">
Hello! Welcome to this virtual bird tour. The tour consists of
{{results.locationSpeciesOrder.locations.length}} waypoints.
The first waypoint is {{results.steps[step - 1].toLocation.name}}.
The map below shows your movement from one waypoint to the next.
The order we'll be moving in is shown by the lines on the map.
There are arrows on the lines that show the direction of movement.
</p>
<p class="instructionDisplay">
At each waypoint, we'll pause and look around. We'll learn about two
birds at each waypoint. There will be information about the bird,
and you'll be able to demonstrate what you know. For each bird, we
have some audio recordings that may or may not contain the call of the bird.
</p>
<p class="instructionDisplay">
Click "Move to Waypoint" to continue.
Read about {{results.steps[step - 1].toLocation.name}}, then click "Continue the Virtual Bird Tour"!
</p>
</div>
<p ng-show="middleStops()">
On to the next waypoint! We're going to {{results.steps[step - 1].toLocation.name}} next.
Click "Move to Waypoint" to continue.
Read about {{results.steps[step - 1].toLocation.name}}, then click "Continue the Virtual Bird Tour"!
</p>
<div style="width:140px;height:20px;margin: 0 auto;">
<button style="display:block;margin: 0 auto;" ng-click="moveToWaypoint()" ng-hide="showContinueButton">
Move to Waypoint
</button>
</div>
<div style="width:130px;height:20px;margin: 0 auto;">
<button style="display:block;margin: 0 auto;" ng-click="nextStep()" ng-show="showContinueButton">
Continue the Virtual Bird Tour
</button>
</div>
<br>
<div id="transitionMap"></div>
</div>
<div ng-hide="showTransitionMap()" id="activityContainer">
<h2 class="sectionTitle" style="margin-top:15px;">
{{currentSpecies.commonName}}
<em class="extraInfo">
{{currentSpecies.scientificName}}
</em>
<em class="extraInfo backgroundExtraInfo">
(Conservation Status: {{currentSpecies.conservationStatus}})
</em>
</h2>
<div style="overflow:hidden;width:45%;float:right;min-width:620px;">
<div style="float: left; width: 50%;margin: 5px 3px 5px 5px;">
<h3 class="sectionTitle">Description</h3>
<p style="margin:3px 0 0 0;">{{currentSpecies.description}}</p>
<a ng-href="{{currentSpecies.descriptionAttributionLink}}"
target="_blank" class="attribution">Source: {{currentSpecies.descriptionAttribution}}</a>
</div>
<div style="float: right; width: 42%;">
<h3 class="sectionTitle">Currently at {{currentLocation.name}}
<br><em class="extraInfo">({{currentLocation.environmentType}})</em>
</h3>
<div id="locationMap"></div>
</div>
<div style="float: left;margin: 5px;width:160px;">
<h3 class="sectionTitle">Photograph</h3>
<a ng-href="{{currentSpecies.faunaImageAttributionLink}}" target="_blank"
class="attribution">Source:
{{currentSpecies.faunaImageAttribution}}</a><br>
<img class="simpleImage" alt="Species image"
ng-src="{{currentSpecies.faunaImage}}"
title="Image of {{currentSpecies.commonName}}">
</div>
<div style="float: left;margin: 5px;width:160px;">
<h3 class="sectionTitle">Distribution</h3>
<a ng-href="{{currentSpecies.distributionImageAttributionLink}}" target="_blank"
class="attribution">Source:
{{currentSpecies.distributionImageAttribution}}</a><br>
<img class="simpleImage" alt="Species distribution map"
ng-src="{{currentSpecies.distributionImage}}"
title="Distribution map for {{currentSpecies.commonName}}">
</div>
</div>
<div class="exampleContainer" style="width:47%;overflow:hidden;">
<h3 class="sectionTitle">Examples</h3>
<div ng-repeat="currentAnnotation in currentExamples" class="annotation"
id="annotationExample{{currentAnnotation.id}}"
directhref="{{currentAnnotation.directlink}}">
<div class="annotationImage" style="width: {{currentAnnotation.spectrogramWidthPx}}px">
<img ng-src="{{currentAnnotation.spectrogramImage}}" alt="spectrogram">
<div class="annotationEventBound"
style="top: {{currentAnnotation.boundTopPx}}px; left: {{currentAnnotation.boundLeftPx}}px; width: {{currentAnnotation.boundWidthPx}}px; height: {{currentAnnotation.boundHeightPx}}px;">
</div>
</div>
<div class="frequencyLines">
<div class="frequencyLine10">10</div>
<div class="frequencyLine09">9</div>
<div class="frequencyLine08">8</div>
<div class="frequencyLine07">7</div>
<div class="frequencyLine06">6</div>
<div class="frequencyLine05">5</div>
<div class="frequencyLine04">4</div>
<div class="frequencyLine03">3</div>
<div class="frequencyLine02">2</div>
<div class="frequencyLine01">1</div>
</div>
<div class="annotationActions">
<audio ng-audio="verifyAnnotation.audioInfo" id="annotationAudio{{currentAnnotation.id}}"
preload="auto">
<source type="audio/webma" ng-src="{{currentAnnotation.audioWebm}}">
<source type="audio/webm" ng-src="{{currentAnnotation.audioWebm}}">
<source type="audio/oga" ng-src="{{currentAnnotation.audioOga}}">
<source type="audio/ogg" ng-src="{{currentAnnotation.audioOga}}">
<source type="audio/mp3" ng-src="{{currentAnnotation.audioMp3}}">
</audio>
<ul>
<li>
<button ng-click="playAudio('annotationAudio'+currentAnnotation.id, 'example')"><i
class="icon-play" title="Play Audio" ></i>
</button>
</li>
</ul>
<span style="font-size: 14px;font-weight: bold;display: inline-block;margin: 5px 0 0 5px;height:18px;">Example</span>
</div>
</div>
</div>
<div class="verifyContainer">
<h3 class="sectionTitle verifyInstructions">Are there {{currentSpecies.commonName}}
calls in these audio recordings?</h3>
<p style="margin:3px 0 3px 0;text-align:center;">
<span style="font-size:14px;font-weight:bold;">Play the audio, and look at the spectrograms.</span>
Then indicate your opinion by responding
<em>'Yes'</em> if the audio recording contains any {{currentSpecies.commonName}} calls;
<em>'No'</em> if there are no {{currentSpecies.commonName}} calls in the audio recording;
<em>'Unsure'</em> if you can't tell either way.
<br><span style="font-size:14px;font-weight:bold;">You need to record an answer for each audio recording.</span>
Click "Done" when you are satisfied with your answers to see what other people's opinions were. Then click "Next" to move on.
</p>
<div style="width:55px;height:20px;margin: 0 auto;">
<button title="Done" ng-show="userHasMadeSelectionForAllVerifyAnnotations()" ng-click="verifyDone()">Done
</button>
<button title="Next" ng-show="doneButtonClicked" style="display:block;width: 55px;margin: 0 auto;" ng-click="nextStep()">Next
</button>
</div>
<br>
<div ng-repeat="currentAnnotation in currentVerify" class="annotation"
id="annotationVerify{{currentAnnotation.id}}"
directhref="{{currentAnnotation.directlink}}">
<div ng-show="doneButtonClicked" class="annotationResponses">
<p style="margin-bottom: 15px;">A total of <b>{{currentAnnotation.otherPeopleTotal}}</b> other people have also given their
opinion on whether this annotation is a <b>{{currentSpecies.commonName}}</b>. Of those, </p>
<ul>
<li><b>{{currentAnnotation.otherPeopleYes | number:0 }}%</b> answered ✔ Yes</li>
<li><b>{{currentAnnotation.otherPeopleNo | number:0 }}%</b> answered ✘ No</li>
<li><b>{{currentAnnotation.otherPeopleUnsure | number:0 }}%</b> answered <b>?</b> Unsure</li>
</ul>
</div>
<div>
<div class="annotationImage" style="width: {{currentAnnotation.spectrogramWidthPx}}px">
<img ng-src="{{currentAnnotation.spectrogramImage}}" alt="spectrogram">
<div class="annotationEventBound"
style="top: {{currentAnnotation.boundTopPx}}px; left: {{currentAnnotation.boundLeftPx}}px; width: {{currentAnnotation.boundWidthPx}}px; height: {{currentAnnotation.boundHeightPx}}px;">
</div>
</div>
<div class="frequencyLines">
<div class="frequencyLine10">10</div>
<div class="frequencyLine09">9</div>
<div class="frequencyLine08">8</div>
<div class="frequencyLine07">7</div>
<div class="frequencyLine06">6</div>
<div class="frequencyLine05">5</div>
<div class="frequencyLine04">4</div>
<div class="frequencyLine03">3</div>
<div class="frequencyLine02">2</div>
<div class="frequencyLine01">1</div>
</div>
<div class="annotationActions">
<audio ng-audio="verifyAnnotation.audioInfo" id="annotationAudio{{currentAnnotation.id}}"
preload="auto">
<source type="audio/webma" ng-src="{{currentAnnotation.audioWebm}}">
<source type="audio/webm" ng-src="{{currentAnnotation.audioWebm}}">
<source type="audio/ogg" ng-src="{{currentAnnotation.audioOga}}">
<source type="audio/mp3" ng-src="{{currentAnnotation.audioMp3}}">
</audio>
<ul>
<li title="Play Audio">
<button ng-click="playAudio('annotationAudio'+currentAnnotation.id, 'toVerify')"><i
class="icon-play" title="Play Audio" ></i></button>
</li>
<li title="This recording does contain a call from the species I'm looking for">
<input id="annotationVerifyResponse{{currentAnnotation.id}}Yes" type="radio"
name="annotationVerifyResponse{{currentAnnotation.id}}"
class="annotationVerifyResponseYes"
ng-click="responseSelected(currentAnnotation.id, 'yes')"
ng-model="$parent.currentStepResults.responses['response'+currentAnnotation.id]"
title="This recording does contain a call from the species I'm looking for" value="yes">
<label for="annotationVerifyResponse{{currentAnnotation.id}}Yes">✔ Yes</label>
</li>
<li title="This recording does not contain the species I'm looking for">
<input id="annotationVerifyResponse{{currentAnnotation.id}}No" type="radio"
name="annotationVerifyResponse{{currentAnnotation.id}}"
class="annotationVerifyResponseNo"
ng-click="responseSelected(currentAnnotation.id, 'no')"
ng-model="$parent.currentStepResults.responses['response'+currentAnnotation.id]"
title="This recording does not contain the species I'm looking for" value="no">
<label for="annotationVerifyResponse{{currentAnnotation.id}}No">✘ No</label>
</li>
<li title="I'm not sure if this recording contains a call from the species I'm looking for or not">
<input id="annotationVerifyResponse{{currentAnnotation.id}}Unsure" type="radio"
name="annotationVerifyResponse{{currentAnnotation.id}}"
class="annotationVerifyResponseUnsure"
ng-click="responseSelected(currentAnnotation.id, 'unsure')"
ng-model="$parent.currentStepResults.responses['response'+currentAnnotation.id]"
title="I'm not sure if this recording contains a call from the species I'm looking for or not"
value="unsure">
<label for="annotationVerifyResponse{{currentAnnotation.id}}Unsure"><b>?</b> Unsure</label>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>