template.html

<style>
    #tutorial-btn {
	margin-bottom: 20px;
    }
    @media (min-width: 1200px) {
	#image-container {
	    width: calc(1170px/2);
	}
    }
    @media (min-width: 992px) and (max-width: 1199px) {
	#image-container {
	    width: calc(970px/2);
	}
    }
    @media (min-width: 768px) and (max-width: 991px) {
	#image-container {
	    width: calc(750px/2);
	}
    }
    @media (min-width: 768px) {
	#image-container {
	    position: fixed;
	    left: inherit;
	    padding-left: inherit;
	    padding-right: inherit;
	}
	#tutorial-btn {
	    float: right;
	    margin-top: 30px;
	}
    }
</style>

<!-- Image -->
<div class="row skeleton margin-top-lg">
    <div class="col-xs-12 col-sm-6 col-sm-push-6">
	<div id="image-container">
	    <a href="#" id="photo-link"><img alt="Loading" id="photo" src="https://i.imgur.com/GeHxzb7.png"></a>
	</div>
    </div>

    <!-- Question and Answer -->
    <div class="col-xs-12 col-sm-6 col-sm-pull-6">

	<div class="row">
            <div class="col-xs-12 col-sm-8">
                <h1 id="question">What is this item?</h1>
            </div>
            <div class="col-xs-12 col-sm-4">
                <a href="../tutorial" id="tutorial-btn" class="btn btn-inverse"><span class="fa fa-book"></span> Tutorial</a>
            </div>
        </div>

	<div class="row">
	    <div class="col-xs-12">
		<form id="transcription-form" role="form">
		    <div class="form-group">
			<label for="title">Title/s:</label>
			<span rel="popover" data-content="Copy the play's title, with any accents, including any articles such as 'the' at the front. *see the tutorial page to find out how to add accents." class="fa fa-question-circle question-popover"></span>
			<input type="text" id="title" class="form-control" placeholder="Copy the play's title, with any accents, including any articles such as 'the' at the front." autofocus>
		    </div>
		    <div class="form-group">
			<label for="author">Author/s:</label>
			<span rel="popover" data-content="Copy the authors as shown, separating any multiple authors with a semi colon." class="fa fa-question-circle question-popover"></span>
			<input type="text" id="author" class="form-control" placeholder="Copy the authors as shown, separating any multiple authors with a semi colon.">
		    </div>
		    <div class="form-group">
			<label for="date">Date:</label>
			<span rel="popover" data-content="Copy the date as shown (e.g. '6 May 2016')." class="fa fa-question-circle question-popover"></span>
			<input type="text" id="date" class="form-control" placeholder="Copy the date as shown (e.g. '6 May 2016').">
		    </div>
		    <div class="form-group">
			<label for="reference">Reference Number:</label>
			<span rel="popover" data-content="A five digit number, followed by folio numbers or a capital letter (examples: '47300 ff. 941-961' or '43800 B')." class="fa fa-question-circle question-popover"></span>
			<input type="text" id="reference" class="form-control" placeholder="A five digit number, followed by folio numbers or a capital letter.">
		    </div>
		    <div class="form-group">
			<label for="former_reference">License Number and/or Year and Volume:</label>
			<span rel="popover" data-content="Examples: 'License number 43' and/or '1915/42'." class="fa fa-question-circle question-popover">
			</span>
			<input type="text" class="form-control" id="former_reference" placeholder="'License number 43' and/or '1915/42'.">
		    </div>
		    <div class="form-group">
			<label for="other_information">Other Information:</label>
			<span rel="popover" data-content="Transcribe any/all other information here." class="fa fa-question-circle question-popover">
			</span>
			<input type="text" class="form-control" id="other_information" placeholder="Transcribe any/all other information here.">
		    </div>
		    <hr>
		    <div class="text-right" role="group">
			<button class="btn btn-success btn-answer" value="Done"><span class="fa fa-thumbs-o-up"></span> Done</button>
		    </div>
		</form>

		<!-- Feedback items for the user -->
		<div class="text-center">
		    <p>You are working on task: <span class="label label-default" id="task-id">#</span></p>
		</div>
	    </div>
	</div>
    </div>
</div>

<script>
    /** Load the task. */
    pybossa.taskLoaded(function(task, deferred) {
	if (!$.isEmptyObject(task)) {
	    var img = $('<img />');
	    img.load(function() {
		deferred.resolve(task);
	    });
	    img.attr('src', task.info.url_b + "?now=" + new Date().getTime());
	    img.addClass('img-thumbnail img-responsive');
	    task.info.image = img;
	} else {
	    deferred.resolve(task);
	}
    });


    /** Add Latin character map to title and author. */
    $(document).ready(function() {
	$('#transcription-form #title').specialedit('latin');
	$('#transcription-form #author').specialedit('latin');
    });


    /** Present the task. */
    pybossa.presentTask(function(task, deferred) {
	if (!$.isEmptyObject(task)) {
	    $('#photo-link').html('').append(task.info.image);
	    $("#photo-link").attr("href", task.info.link);
	    $('#task-id').html(task.id);
	    $('#transcription-form').trigger("reset");
	    $('html, body').animate({scrollTop:0});
	    $('.btn-answer').off('click').on('click', function(evt) {
		evt.preventDefault();
		if (typeof $(this).attr("value") != 'undefined') {
		    task.answer = {
			'title': $("#title").val(),
			'author': $('#author').val(),
			'date': $('#date').val(),
			'reference': $('#reference').val(),
			'former_reference': $('#former_reference').val(),
			'other_information': $('#other_information').val()
		    }
		    pybossa.saveTask(task.id, task.answer).done(function() {
			deferred.resolve();
			pybossaNotify('Answer saved!', 'success', true);
		    }).fail(function(xhr, status, error) {
			pybossaLogError(new Error(error));
		    });
		} else {
		    pybossaNotify('Error: Answer undefined', 'danger');
		}
	    });
	} else {
	    $(".skeleton").hide();
	    pybossaNotify('Congratulations! You have participated in all available tasks!', 'success');
	}
    });

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