template.html

<!-- Add scripts etc -->
<script src="https://code.jquery.com/ui/1.8.1/jquery-ui.min.js" type="text/javascript"
        xmlns="http://www.w3.org/1999/html"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handsontable/0.12.6/handsontable.full.min.js"
        type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.2.1/ol.min.js" type="text/javascript"></script>
<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="/static/vendor/fancybox/jquery.fancybox.pack.js" type="text/javascript"></script>

<!-- Add style sheets -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.2.1/ol.css" type="text/css">
<link rel="stylesheet" href="/static/vendor/fancybox/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen"/>
<link rel="stylesheet" media="screen"
      href="https://cdnjs.cloudflare.com/ajax/libs/handsontable/0.12.6/handsontable.full.min.css">

<!-- Start of the survey modals -->
<div id="survey" class="modal fade" data-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title">Do you want to help us?</h4>
            </div>
            <div class="modal-body">
                Thanks for contributing one task for the project. We are interested in knowing how you found out about
                us.
                <strong>Could you please answer two questions in a short survey?</strong>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">
                    Skip
                </button>
                <a class="btn btn-large btn-success"
                   href="https://docs.google.com/forms/d/1Kgw8cvcufm-77PC2t_PL_b4y1_Tb9wJseimmb3cQIn4/viewform?embedded=true">Of
                    course!
                    Take me to the survey!</a>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div><!-- /.modal -->

<div id="survey25" class="modal fade" data-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title">Congratulations for completing 25 tasks!</h4>
            </div>
            <div class="modal-body">
                Thanks for contributing 25 tasks for the project. Now that you have been using MicroPasts for a while,
                we would like to know how you found it. <strong>Could you please answer a few questions in a short
                survey?</strong>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">
                    Skip
                </button>
                <a class="btn btn-large btn-success"
                   href="https://docs.google.com/forms/d/1uczUGGYbrQ2FQfTtM8j4vfGr2qwcCMW6PLwzfvZZ6kI/viewform?embedded=true">Of
                    course! Take me to the survey!</a>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div><!-- /.modal -->

<!-- End of the survey modals -->

<!-- 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-error" 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="rcData">
    <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>
    <p>Report supplied courtesy of the Archaeology Data Service. See <a href="http://archaeologydataservice.ac.uk/advice/termsOfUseAndAccess" target="_blank">terms and conditions</a>.</p>
    <!-- The pdf section -->
    <div class="row">
        <div id="mypdf">
            <iframe id="pdfImage" width="75%" height="400px" class="pdf" src=""></iframe>
        </div>
    </div>
    <!-- End of pdf section -->
    <!-- The data entry section using html table -->
    <div class="row">
        <h4>Input any radiocarbon dates in this report:</h4>
        <div id="rcTable" class="handsontable"></div>
        <button class="btn btn-success btn-answer" value='Yes'>
            Submit your dates
        </button>
        <!-- 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="progress" 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>Gathering radiocarbon dates from fieldwork reports</h3>
            </div>

            <!-- Step 1 of the tutorial -->
            <div id="0" class="modal-body" style="display:none">
                <p>
                    This project is simple and quick to do. It asks you to look through fieldwork reports written by commerical
                    archaeological units across the UK who conduct desktop assessments, watching briefs,
                    surveys and full-scale excavations in advance of modern development projects. 
                    Often you don't need to read through the whole thing, just search for key words, 
                    but the full text is there if you are interested.
                    Radiocarbon dates are sometimes taken as part of UK commercial archaeological fieldwork, but have as yet not been gathered
                    systematically from these reports.
                    The tasks for this crowd-sourcing project can be completed on a desktop computer or
                    laptop (but not on a tablet or phone). You can use any web browser, although
                    we recommend Firefox for the best report-searching functions. For any given task, you will be
                    presented with a multi-page fieldwork report. Scroll or search through it until you find mention of a
                    radiocarbon date. We are
                    looking for the following information for each date (if available):
                </p>
            </div>
            <div id="1" class="modal-body" style="display:none">
                <p>
                    You will see that we wish you to fill in information about any dates in the spreadhseet columns
                    provided below the report.
                    Brief remarks on the intended role of each column are provided below:
                </p>
                <ol>
                    <li>
                        LabCode: This is the code assigned by the radiocarbon laboratory.
                        For example, for the first date in the example image below your could write "SUERC-16897
                        (GU-16061)".
                    </li>
                    <li>
                        AgeBP: This is probably the tricky bit. We are looking for the 'uncalibrated' date if
                        possible, seomtimes call the ' C14 Age BP' (BP is before present) of the
                        'conventional age' or the 'uncalibrated age'. The date is often followed by a "±" symbol and
                        then a measure of its accuracy or error (see below).
                        For the first date in the example image below, the AgeBP would be "915". Sometimes a
                        'calibrated' date or dates are mentioned (often expressed as a range BC/AD).
                        You can put these in the Comments column, but please look for an uncalibrated date (which
                        should be present most of the time) to place in the AgeBP column
                        (or otherwise leave the column blank)./li>
                    <li>
                        Error: This is the instrument error associated with the uncalibrated radiocarbon measurment,
                        usually express immediately after a ± symbol.
                        For example in the first date in the example below, you might write "35".
                    </li>
                    <li>
                        dC13: This is a common extra measurement used to correct the sampel for different fractions
                        of different carbon isotopes. It is often referred to as "δ13C and in ‰ units".
                        Please simply put the decimal number, not any unit symbols etc. So for example, for the
                        first date in the image below, you would put "-22.2" in the dC13 column.
                    </li>
                </ol>
                <img src="http://micropasts-other.s3.amazonaws.com/other/exampledates.png" class="img-polaroid"
                     alt="An example of two radiocarbon mentioned in a fieldwork report." width="75%"/>
            </div>

            <div id="2" class="modal-body" style="display:none">
                <p>
                    You will see that we wish you to fill in information about any dates in the spreadhseet columns
                    provided below the report.
                    Brief remarks on the intended role of each column are provided below:
                </p>
                <ol>

                    <li>
                        Material: Please enter the material the sample was taken on. For example this is often
                        "bone" or "charcoal" or "grain".
                        Please also put any informaiton about the species, for example "wheat","human" or "oak".
                        Always retain the original wording: if the species is "Hordeum" which refers to barley (as
                        in the example below), please write "Hordeum".
                        If it is says "barley", write "barley". Try to separate material and species by a colon, so
                        for example "grain: Hordeum".
                    </li>
                    <li>
                        SiteName: Please give the name of the site here, complete with county name as well if
                        present
                        (hint: of the site name is in th title of the report)
                    </li>
                    <li>
                        SiteContext: This is for anything relating to the feature on a site from which the sample
                        was taken
                        (e.g. "outer ring ditch", "pit 236" or, in the example below, "context 4/5")
                    </li>
                    <li>
                        Comments: You make your own remarks here if you like and/or add further information about
                        a particular date you think is useful. For example, sometimes the type of bone (e.g. radius,
                        ulna) will be mentioned, or a field sample number.
                    </li>
                </ol>
                <img src="http://micropasts-other.s3.amazonaws.com/other/exampledates.png" class="img-polaroid"
                     alt="An example of two radiocarbon mentioned in a fieldwork report." width="50%"/>
            </div>

            <div id="3" class="modal-body" style="display:none">
                <p>
                    Just a few more tips before you start:
                </p>
                <ol>
                    <li>
                        KeyPoint: We don't want to you to read through everything laboriously. Jus look for radiocarbon dates. For example, 
                        with the Firefox browser and some others, click on the pdf page then type CTRL-F (or CMD-F on a Mac). This will bring up a 
                        search function. Search for keywords such as "radiocarbon" or "±" (the plus-minus symbol often associated with dates). 
                        If you find no dates, then simply submit a blank spreadsheet.
                    </li>
                    <li>
                        Sometimes dates are not as nicely tabulated as in the previous example image, but 
                        instead they are just mentioned in the main text. In such cases,
                        just do your best to add whatever information about the date that you can find in the text.
                    </li>
                    <li>
                        If for one of the columns in your spreadsheet you cannot find information (e.g. if no
                        mention is made of dC13 values),
                        then just leave that column blank in what you submit.
                    </li>
                    <li>
                        You can add or remove rows from the spreadsheet by right-clicking in an empty cell fo the
                        table.
                        (or on a Mac computer, holding the ctrl-button and clicking).
                    </li>
                </ol>
            </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();
		}
		if (step == 2) {
			$("#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>
	function loadUserProgress() {
		pybossa.userProgress('RadiocarbonHunt').done(function(data) {
			console.log(data);
			console.log("Total answers done for user: " + data.done);
			if ((data.done == 1) && ($.cookie('surveyRadiocarbonHunt') == undefined)) {
				$("#survey").modal('show');
				$.cookie('surveyRadiocarbonHunt', 'shown', {
					path : '/'
				});
			}
			if ((data.done >= 25) && ($.cookie('survey25RadiocarbonHunt') == undefined)) {
				$("#survey25").modal('show');
				$.cookie('survey25RadiocarbonHunt', 'shown', {
					path : '/'
				});
			}
			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'});
		});
	}

	pybossa.taskLoaded(function(task, deferred) {
		if (! $.isEmptyObject(task)) {
			loadUserProgress();
			deferred.resolve(task);
		} else {
			deferred.resolve(task);
		}
	});
	$(window).resize(function() {
		console.log('Window resized');
	});

	pybossa.presentTask(function(task, deferred) {
		if (!$.isEmptyObject(task)) {
			$("#question").html(task.info.question);
			$('#task-id').html(task.id);
			$("#pdfImage").attr('src', task.info.url_b);
			var data = [[]];
			var config = {
				data : data,
				minRows : 5,
				minCols : 8,
				minSpareRows : 1,
				minSpareCols : 0,
				maxRows : 20,
				autoWrapRow : true,
				autoWrapCol : true,
				autoColumnSize : true,
				colHeaders : ['LabCode', 'AgeBP', 'Error', 'dC13', 'Material', 'SiteName', 'SiteContext', 'Comments'],
				contextMenu : ['row_below', 'remove_row', 'undo', 'redo'],
				stretchH : 'all'
			};
			$("#rcTable").handsontable(config);

			$('.btn-answer').off('click').on('click', function(evt) {
				evt.preventDefault();
				var answer = $(evt.target).attr("value");
				if ( typeof answer != 'undefined') {
					task.answer = $("#rcData").serializeJSON();
					console.log(task.answer);
					var handsontable = $("#rcTable").data('handsontable');
					var data = handsontable.getData();
					console.log(data);
					task.answer = data;
					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);
						deferred.resolve();
					});
				} else {
					$("#error").show();
				}
			});
			$("#loading").hide();
		} else {
			$(".skeleton").hide();
			$("#loading").hide();
			$("#finish").fadeIn(500);
		}
	});
	pybossa.run('RadiocarbonHunt'); 



</script>

<style type="text/css">
    #mypdf:-moz-full-screen {
    height: 100%;
    }
    #mypdf:-webkit-full-screen {
    height: 100%;
    }
    #mypdf:-ms-fullscreen {
    height: 100%;
    }
    #mypdf:full-screen {
    height: 100%;
    }
    #rcTable {
    width: 100%;
    }
    .btn-answer {
    margin-top: 10px;
    margin-bottom: 10px;
    }
    .btn-group {
    margin-bottom: 0px
    }
</style>