template.html

<!-- Add scripts etc -->
<script src="/static/js/vendor/jquery.serializeJSON.min.js" type="text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.0/jquery.cookie.min.js"
type="text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.3.2/wavesurfer.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.2.3/plugin/wavesurfer.timeline.min.js"></script>

<!-- Add style sheets -->
<link rel="stylesheet" href="/static/vendor/fancybox/jquery.fancybox.css?v=2.1.5"
type="text/css" media="screen"/>

<!-- Browser not compatible message -->
<div style="display:none;margin-top:15px; height:500px;" id="oldbrowser" class="row">
  <!-- Success and Error Messages for the user -->
  <div class="col-md-8 col-md-offset-1 alert alert-info">
    <strong>Sorry, but your browser does not support the current application. If you want to contribute, please,
      upgrade to a modern web browser like the open source and free alternative <a
      href="http://www.mozilla.org/en-US/firefox/new/">Firefox</a> or <a
      href="https://www.google.com/intl/en/chrome/browser/">Chrome</a></strong>.
    </div>
  </div>
  <!-- End of Row -->
  <!-- end of browser -->

  <!-- Start of messages -->
  <div style="margin-top:15px;">
    <div id="success" class="alert alert-success" style="display:none;">
      <strong>Well done!</strong> You have successfully submitted your contribution.
      Here is another to try if you
      wish!
    </div>
    <div id="loading" class="alert alert-info" style="display:none;">
      <img src="/static/img/loading.gif">Loading next task...
    </div>
    <div id="taskcompleted" class="alert alert-info" style="display:none;">
      <strong>The task has been completed!</strong> Thanks a lot!
    </div>
    <div id="finish" class="alert alert-success" style="display:none;">
      <h2>Congratulations!</h2>
      <p>
        You have participated in all available tasks!
      </p>
      <div class="alert-actions">
        <a class="btn-default btn" href="/">Go back to the home page</a>
        <a class="btn-default btn" href="/app">or, have a look at our
          other applications</a>
        </div>
      </div>
      <div id="error" class="alert alert-danger" style="display:none;">
        <a class="close">×</a>
        <strong>Error!</strong> Something went wrong, please contact the site administrators
      </div>
    </div>
    <!-- End Success and Error Messages for the user -->


    <div class="row skeleton" id="">

      <div class="col-md-12">
        <div class="row">
          <div class="btn-group">
            <button class="btn btn-info btn-xs" data-toggle="modal" data-target="#myModal">
              <i class="glyphicon glyphicon-eye-open"></i> Tutorial
            </button>
            <a class="btn btn-info btn-xs" id="imgLink" target="_blank" data-toggle="tooltip" data-placement="top"
            title="Opens in a new window" href="http://community.micropasts.org/"><i
            class="glyphicon glyphicon-book"></i> Community Help</a>
          </div>
        </div>
      </div>

      <!-- The pdf section -->
      <div class="col-md-12">
        <div class="row">
          <h4>Please help us to transcribe this section of our audioguide</h4>
        </div>
      </div>

      <div class="row">


        <div id="sound" class="col-md-10 center-block">
          <span id="soundCloud">
            <div id="waveform">
              <progress id="progress" class="progress progress-striped" value="0" max="100"></progress>
            </div>
            <script>

              var ctx = document.createElement('canvas').getContext('2d');
              var linGrad = ctx.createLinearGradient(0, 64, 0, 200);
              linGrad.addColorStop(0.5, 'rgba(255, 255, 255, 1.000)');
              linGrad.addColorStop(0.5, 'rgba(183, 183, 183, 1.000)');
              var wavesurfer = WaveSurfer.create({
                container: '#waveform',
                waveColor: linGrad,
                progressColor: 'hsla(200, 100%, 30%, 0.5)',
                cursorColor: '#fff',
                // This parameter makes the waveform look like SoundCloud's player
                barWidth: 3
              });
              wavesurfer.on('loading', function (percents) {
                document.getElementById('progress').value = percents;
              });

              wavesurfer.on('ready', function (percents) {
                document.getElementById('progressWave').style.display = 'none';
                var timeline = Object.create(WaveSurfer.Timeline);

                timeline.init({
                  wavesurfer: wavesurfer,
                  container: '#waveform-timeline'
                });
              });
            </script>

            <div id="waveform-timeline" class="col-md-10 center-block"></div>

            <div class="controls col-md-6 center-block">
              <button class="btn btn-primary" onclick="wavesurfer.skipBackward()">
                <i class="fa fa-step-backward"></i>
                Backward
              </button>

              <button class="btn btn-primary" onclick="wavesurfer.playPause()">
                <i class="fa fa-play"></i>
                Play
                /
                <i class="fa fa-pause"></i>
                Pause
              </button>

              <button class="btn btn-primary" onclick="wavesurfer.skipForward()">
                <i class="fa fa-step-forward"></i>
                Forward
              </button>

              <button class="btn btn-primary" onclick="wavesurfer.toggleMute()">
                <i class="fa fa-volume-off"></i>
                Toggle Mute
              </button>
            </div>
          </span>
        </div>

        <div class="col-md-12">
          <h3>Current Transcription</h3>

          <div>
            <pre>
              <span id="currentTranscription">
                <p>#</p>
              </span>
            </pre>
          </div>
        </div>
        <div class="col-md-12">

          <form id="magicData" role="form">
            <h4>Is this transcription correct?</h4>
            <div class="btn-group" data-toggle="buttons">
              <label class="btn btn-primary">
                <input type="radio" name="valid" value="yes" checked> Yes
              </label>
              <label class="btn btn-danger">
                <input type="radio" name="valid" value="no"> No
              </label>
            </div>

            <div class="form-group">
              <label class="control-label" for="transcription">Transcription</label>
              <textarea rows="3" class="form-control" name="transcription" id="transcription"></textarea>
            </div>

            <div class="form-group">
              <label class="control-label" for="comments">Transcriber's Comments</label>
              <textarea class="form-control" rows="2" id="comments" name="comments"
              placeholder="Add any comments you might have"></textarea>
            </div>


            <button class="btn btn-success btn-answer" value='Yes'>
              Submit your transcription
            </button>
          </form>
        </div>
      </div>
      <!-- End of pdf section -->
      <!-- The data entry section using html table -->
      <div class="row">

        <!-- Feedback items for the user -->
        <p>
          You are working now on task: <span id="task-id" class="label label-warning">#</span>
        </p>
        <p>
          You have completed: <span id="done" class="label label-info"></span> tasks from
          <!-- Progress bar for the user -->
          <span id="total" class="label label-inverse"></span>
        </p>
        <div class="progress progress-striped">
          <div id="progressWave" rel="tooltip" title="#" class="progress-bar" role="progressbar"
          style="width: 0%;"></div>
        </div>
        <!-- End of feedback row -->
      </div>
      <!-- End of the section -->
    </div>
    <!-- End of DOM Skeleton row -->

    <!-- Modal start -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <!-- Modal header -->
          <div class="modal-header">
            <h3>How to transcribe our audio files</h3>
          </div>

          <!-- Step 1 of the tutorial -->
          <div id="0" class="modal-body" style="display:none">
            <p>
              Transcription of our audio is pretty straightforward.
            </p>
            <p>
              All we want you to do, is to listen to the audio snippet you
              are presented with (10 seconds) and check this against the
              automatically derived transcription.
            </p>

            <p>
              If you spot an error, could you put your corrections in the transcription box.
            </p>

          </div>

          <!-- Step 2 of the tutorial -->
          <div id="1" class="modal-body" style="display:none">
            <p>
              The audio player has very simple controls.
            </p>

            <ul>
              <li>Rewind</li>
              <li>Play and pause</li>
              <li>Fast forward</li>
              <li>Mute</li>
            </ul>

            <p>
              The audio will not play until you ask it to do so. Stop it
              whenever you need to do so and rewind and fast forward as required.
              Do not worry if you cannot transcribe everything. Each task
              will be worked on by several people and then these transcriptions
              will be merged via computing scripts for final curatorial approval.
            </p>

            <p>
              Thank you for participating. Your help means a lot to us all.
            </p>
          </div>
          <!-- End of stepped modal body -->

          <!-- Modal footer -->
          <div class="modal-footer">
            <a id="prevBtn" href="#" onclick="showStep('prev')" class="btn btn-default">Previous</a>
            <a id="nextBtn" href="#" onclick="showStep('next')" class="btn btn-success">Next</a>
            <button id="closeBtn" data-dismiss="modal" onclick="showStep('finish')" class="btn btn-primary"
            style="display:none"><i class="glyphicon glyphicon-thumbs-up"></i> Back to task
          </button>
        </div>
      </div>
    </div>
  </div>

  <!-- Client side scripts -->
  <script>
    // Quick fix for IE8
    Modernizr.load({
      test : window.JSON,
      nope : '/static/js/vendor/json2.min.js'
    });






  </script>

  <!-- Step through modals -->
  <script type="text/javascript">
    var step = -1;
    function showStep(action) {
      $("#" + step).hide();
      if (action == 'next') {
        step = step + 1;
      }
      if (action == 'prev') {
        step = step - 1;
      }
      if (step == 0) {
        $("#prevBtn").hide();
      } else {
        $("#prevBtn").show();
      }

      // this line below needs to match the id of the last modal div. If you have 4 divs, you need to
      // change this to step = 3 and if you have 2 you would say step = 1. Id starts at 0.

      if (step == 1) {
        $("#nextBtn").hide();
        $("#closeBtn").show();
      }
      if (action == 'finish') {
        step = 0;
        $("#closeBtn").hide();
        $("#prevBtn").hide();
        $("#nextBtn").show();
      }
      $("#" + step).show();
    }
    showStep('next');
    $("#modal").modal('show');






  </script>

  <!-- Load user progress -->
  <script>

    // This part of the script loads the user's progress through the project

    function loadUserProgress() {
      pybossa.userProgress('deathOnTheNile').done(function(data) {
        console.log(data);
        console.log("Total answers done for user: " + data.done);
        var pct = Math.round((data.done * 100) / data.total);
        $("#progress").css("width", pct.toString() + "%");
        $("#progress").attr("title", pct.toString() + "% completed!");
        $("#progress").tooltip({ 'placement' : 'left' });
        $("#total").text(data.total);
        $("#done").text(data.done);
        $('a[rel]').tooltip({'placement' : 'left'});
      });
    }

    //This part loads the script

    pybossa.taskLoaded(function(task, deferred) {
      if (! $.isEmptyObject(task)) {
        loadUserProgress();
        deferred.resolve(task);
      } else {
        deferred.resolve(task);
      }
    });

    // This part presents the task and then saves the answers

    pybossa.presentTask(function(task, deferred) {
      if (!$.isEmptyObject(task)) {
        console.log(task)
        $('#question').html(task.info.question);
        $('#task-id').html(task.id);
        $('#currentTranscription').html(task.info.currentTranscription);
        wavesurfer.load(task.info.track);
        var data = [[]];
        $('.btn-answer').off('click').on('click', function(evt) {
          evt.preventDefault();
          var answer = $(evt.target).attr("value");
          if ( typeof answer != 'undefined') {
            task.answer = $("#magicData").serializeJSON();
            task.answer.valid = $('input[name=valid]:checked').val();
            console.log(task.answer);
            pybossa.saveTask(task.id, task.answer).done(function() {
              $("html, body").animate( {scrollTop : 0 }, "slow");
              $("#success").fadeIn(500).fadeOut(500);
              $("#loading").fadeIn(500).fadeOut(500);
              $('#magicData')[0].reset();
              deferred.resolve();
            });
          } else {
            $("#error").show();
          }
        });
        $("#loading").hide();
      } else {
        $(".skeleton").hide();
        $("#loading").hide();
        $("#finish").fadeIn(500);
      }
    });
    pybossa.run('deathOnTheNile');
  </script>

  <style type="text/css">
    .btn-answer {
      margin-top: 10px;
      margin-bottom: 10px;
    }
    .btn-group {
      margin-bottom: 0px
    }
    pre {
    white-space: pre-wrap;       /* Since CSS 2.1 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
    }
  </style>