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 -->

<!--
Task DOM for loading the S3 Images
It uses the class="skeleton" to identify the elements that belong to the
task.
-->

<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 SoundCloud.</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">

            <form id="magicData" role="form">

                <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 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
                    try to transcribe what is being said into the text 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 card 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.
                </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('britishMuseumSoundCloud').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);
			wavesurfer.load('https://britishmuseum-soundcloud.s3-eu-west-1.amazonaws.com/' + 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();
					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('britishMuseumSoundCloud');


</script>

<style type="text/css">
    .btn-answer {
    margin-top: 10px;
    margin-bottom: 10px;
    }
    .btn-group {
    margin-bottom: 0px
    }


</style>