index.html

<link href="http://crowdcrafting.org/static/vendor/bootstrap.min.css" rel="stylesheet" type="text/css">
<script src="http://crowdcrafting.org/static/vendor/jquery.js"></script>
<script src="http://crowdcrafting.org/static/js/pybossa/pybossa.js"></script>
<script src="vendor/pybossa.js"></script>

<!-- copy and paste from here when uploading to pybossa -->

<link href="http://rgrp.okfnlabs.org/bardomatic/vendor/chosen/chosen.css" rel="stylesheet" />
<link href='http://fonts.googleapis.com/css?family=Quintessential' rel='stylesheet' type='text/css'>

<style type="text/css">
body {
  background-image:url('http://jamesharrimansmith.org/Parchment-full-size_fade.jpg');
  background-size:100% 100%;
  background-repeat:no-repeat;
}

.x-presenter {
  margin-left: 10%;  
  margin-right: 10%;
}

.lead, .excerpt pre, .x-presenter, .x-presenter .btn, .x-presenter h2, .x-presenter h3 {
  font-family: 'Quintessential', cursive;
}

.x-presenter h2 {
  margin: 10px 0;
  line-height:1;
  color:inherit;
  font-size: 50px;
  text-align: center;
  font-weight: bold;
}

.x-presenter .task-id {
  display: none;
}

.excerpt pre {
  margin-left: 150px;
  font-size: 22px;
  line-height: 26px;
  background: transparent;
  border: none;
}

.lead h3 {
  display: inline;
  font-size: 22px; 
  line-height: 26px;
  font-weight: bold;
}

.work-chooser {
  display: inline;
}

.work-chooser .chzn-container {
  font-size: 16px;
  height: 26px;
}

.work-chooser .chzn-container a {
  height: 24px;
}

.work-chooser .chzn-container input {
  height: 26px;
}

.work-chooser .btn {
  font-size: 16px;
}

.btn-dontknow {
  margin-left: 5px;
}

.answer {
  margin-bottom: 20px;
  font-size: 16px;
}

.answer h3 {
  display: inline;
  font-size: 20px;
}

.answer .play {
  font-weight: bold;
}

.answer .speaker {
  font-style: italic;
}
</style>

<script type="text/javascript" src="http://rgrp.okfnlabs.org/bardomatic/vendor/chosen/chosen.jquery.js"></script>

<!--
 * the REAL presenter starts below this line
-->

<div class="x-presenter">
<h2>How well do you know your<br />Shakespeare?</h2>

<div class="answer"></div>

<div style="margin-bottom:1em" class="excerpt"></div>

<div class="lead">
  <h3>What Shakespeare play is this from?</h3>

<div class="work-chooser">
  <select data-placeholder="Choose a Play">
<option value="nochoice"></option>
<option value="alls_well_that_ends_well">All's Well That Ends Well</option>
<option value="antony_and_cleopatra">Antony and Cleopatra</option>
<option value="as_you_like_it">As you Like it</option>
<option value="comedy_of_errors">The Comedy of Errors</option>
<option value="coriolanus">Coriolanus</option>
<option value="cymbeline">Cymbeline</option>
<option value="hamlet">Hamlet</option>
<option value="henry_iv_part_1">Henry IV, Part 1</option>
<option value="henry_iv_part_2">Henry IV, Part 2</option>
<option value="henry_v">Henry V</option>
<option value="henry_vi_part_1">Henry VI Part 1</option>
<option value="henry_vi_part_2">Henry VI, Part 2</option>
<option value="henry_vi_part_3">Henry VI Part 3</option>
<option value="henry_viii">Henry VIII</option>
<option value="john">King John</option>
<option value="julius_caesar">Julius Caesar</option>
<option value="lear">King Lear</option>
<option value="lovers_complaint">A Lover's Complaint</option>
<option value="loves_labours_lost">Love's Labour's Lost</option>
<option value="macbeth">Macbeth</option>
<option value="merry_wives_of_windsor">The Merry Wives of Windsor</option>
<option value="midsummer_nights_dream">A Midsummer Night's Dream</option>
<option value="measure_for_measure">Measure for Measure</option>
<option value="merchant_of_venice">The Merchant of Venice</option>
<option value="much_ado_about_nothing">Much ado about Nothing</option>
<option value="othello">Othello</option>
<option value="passionate_pilgrim">The Passionate Pilgrim</option>
<option value="pericles">Pericles</option>
<option value="phoenix_and_the_turtle">The Phoenix and the Turtle</option>
<option value="rape_of_lucrece">The Rape of Lucrece</option>
<option value="richard_ii">Richard II</option>
<option value="richard_iii">Richard III</option>
<option value="romeo_and_juliet">Romeo and Juliet</option>
<option value="sonnets">Sonnets</option>
<option value="taming_of_the_shrew">The Taming of the Shrew</option>
<option value="tempest">The Tempest</option>
<option value="timon_of_athens">Timon of Athens</option>
<option value="titus_andronicus">Titus Andronicus</option>
<option value="troilus_and_cressida">Troilus and Cressida</option>
<option value="twelfth_night">Twelfth Night</option>
<option value="two_gentlemen_of_verona">Two Gentlemen of Verona</option>
<option value="venus_and_adonis">Venus and Adonis</option>
<option value="winters_tale">The Winter's Tale</option>
  </select>
<button class="btn btn-success btn-yes">Submit</button>
<button class="btn btn-dontknow">I don't know!</button>
</div>

</div> <!-- /lead -->
</div> <!-- presenter -->

<script>
pybossa.setEndpoint('http://crowdcrafting.org');
 
$('.work-chooser select').chosen();

pybossa.url = 'http://crowdcrafting.org/api';
pybossa.taskLoaded(function(task, deferred) {
  deferred.resolve(task);
});

pybossa.presentTask(function(task, deferred) {
  $('.excerpt').html($('<pre />').text(task.info.content));
  $('.task-id').html(task.id);
  $('.btn-dontknow').off('click').on('click', function(evt) {
    evt.preventDefault();
    saveAnswerAndLoad();
  });
  $('.btn-yes').off('click').on('click', function(evt) {
    evt.preventDefault();
    var answer = $('.work-chooser select').val();
    if (answer == 'nochoice') {
      alert("Please choose a play or select 'I don't know'");
    } else {
      saveAnswerAndLoad(answer);
    }
  });
  $('.loading').hide();

  function saveAnswerAndLoad(answer) {
    $('.answer').html('<h3>Answer:</h3> <span class="play">' + task.info['play'] + '</span> &ndash; spoken by <span class="speaker">' + task.info.speaker + '</span>');
    $('.loading').show();
    setTimeout(function() {
        pybossa.saveTask(task.id, answer).done(function() {
          $('.answer').html('');
          deferred.resolve();
        })
      },
      4000
    );
  }
});

pybossa.run('bardomatic');
</script>