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

<!-- 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 data. Here, continue entering more 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>
          <img src="https://crowdfunded.micropasts.org/assets/logo-head.png"
               height="200" width="200" alt="The MicroPasts Square Logo"/>
          <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="dataentry">
    <!-- Start of Photo DIV (column) -->
    <div class="row">
            	<img id="photo" src="http://micropasts-medrc.s3.amazonaws.com/medbanner.jpg" style="max-width=100%">
    </div>
    <!-- End of Photo DIV (columnt) -->
    <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/category/crowd-sourcing-support"><i
                    class="glyphicon glyphicon-book"></i> Community Help</a>
        </div>
    </div>
    <!-- The dataentry section using html table -->
    <div class="row">
        <h4>Please check first to ensure your dates are not already in <a href="https://github.com/ahb108/MedRadiocarbon/raw/master/MedDates_current.csv">
        	our archive</a>. <br>If they are not, or if you want to correct something, add one or more rows below (max. 100 rows per submission):</h4>
        <div id="addMedDates" class="handsontable"></div>
        <button class="btn btn-success btn-answer" value='Yes'>Submit your dates</button>
    </div>
    <!-- End of the dataentry 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>Tutorial. Submitting Mediterranean radiocarbon dates</h3>
            </div>

            <!-- Step 1 of the tutorial -->
            <div id="0" class="modal-body" style="display:none">
                <p>This crowdsourcing project is a very simple data-checking and data-entry exercise. We expect it
                	will most suitable for, and of interest to, Mediterranean archaeologists 
                	who are familiar with the typical format of radiocarbon dates, and have taken such radiocarbon samples as part of their fieldwork, 
                	have already collated date lists of their own which they are willing to contribute and/or are willing to check for dates mentioned 
                	in existing publications.</p>

                <p>Note that because this application is open ended so it will always be seen as "0% complete". When you agree contribute, 
                	you will be presented with a spreadsheet and a series of pref-defined column headings that are familiar data fields associated 
                	with radiocarbon samples. Although it is perfectly feasible to type all entries directly into this online spreasheet, we suggest 
                	that contributors may wish to create the same  column headings in an on offline spreadsheet first, 
                	do their data entry there, and then paste the result into the online form.</p>
            </div>

            <!-- Step 2 of the tutorial -->
            <div id="1" class="modal-body" style="display:none">
                <p>
                    The first thing to do before entering any dates is to download our existing date listing and check that the dates you propose to enter are
                    not already present. Below is a brief explanation of each of the data fields and any further information about data entry to bear in mind:
                </p>
 				<ul>
                    <li>SampleID -- The code used to uniquely identify a sample by the radiocarbon lab.</li>
                    <li>CRA -- The conventional uncalibrated radiocarbon age Before Present.</li>
                    <li>Error -- The error (to one standard deviation) in the measured uncalibrated age of this sample.</li>
                    <li>DC13 -- A measure of isotopic fractionation of stable isotopes carbon-13 versus carbon-12.</li>
                    <li>Material -- The kind of material from which the sample was taken. Examples of standard terms include "bone", "charcoal", "seed" or "pollen".</li>
                    <li>Species -- Where appropriate, add th species of the material form which the sample was taken (e.g. "Triticum")</li>
                    <li>Site -- The archaeological site from which the sample was taken.</li>
                    <li>Phase -- Any information about the stratigraphic phase within the site from which the sample was taken.</li>
                    <li>Type -- The kind of archaeological site or large-scale context from which the sample was taken (we are not enforcing terms, 
                    	but typical examples might be "settlement", "burial", "terrace", "cave", etc.).</li>
                    <li>Country -- the country to which the site belongs (preferably as a <a href="https://countrycode.org/">three-letter ISO code</a>)</li>
                    <li>Longitude -- Longitude (preferably in decimal degrees with reference to a WGS84 datum)</li>
                    <li>Latitude -- Latitude (preferably in decimal degrees with reference to a WGS84 datum)</li>
                    <li>LocQual -- An estimate of the absolute accuracy of your stated longitude and latitude. Please put 'A' (no quotes) for locations derived from 
                    	GPS or a very fine fix from a satellite image which you think is within ca.10m or so of the correct spot. Use 'B' if you think the location 
                    	is within the nearest kilometre of the correct spot and 'C' if you think your coordinates are coarser than this. 
                    	Leave blank if you have left Lon and Lat blank.</li>
                    <li>Source -- Please say where your dates come from. For example, cite a specific publication or an existing database, or note that the sample is one your took personally. 
                    	In addition to this information, we will be automatically adding the name of the registered crowdsourcing contributor here at a later stage 
                    	(based on the details you provided when you registered on the site), but if you wish this credit to be something else, then add it here as 'ContributedBy: '.</li>
                    <li>Comments -- Please add any other comments about this date in this field. IMPORTANT: if the date you are entering is a proposed correction to an existing date in our 
                    	listing, then please include the word 'Correction' (no quotes) here.</li>
                </ul>
            </div>
            <!-- Step 3 of the tutorial -->
            <div id="2" class="modal-body" style="display:none">
            	<p>
                    The online table that you will see starts off with just 6 rows but more will be added automatically when you get to the bottom or if you paste in multipe rows. Note that there is 
                    maximum of 100 rows. If you have more dates than this please submit them in batches of 100. If you are missing certain information (e.g. Lat and Lon) then you can 
                    leave that particular cell blank and we will try to create these later, but please make sure that SampleID, CRA, Error and Site and Source are present for all entries.
                </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="startContrib" data-dismiss="modal" class="btn btn-primary" style="display:none"/>Proceed with 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();
            $("#startContrib").show();
        }
        $("#" + step).show();
    }

    showStep('next');
    $("#modal").modal('show');
</script>



<!-- Load user progress -->
<script>
    function loadUserProgress() {
        pybossa.userProgress('MedRadiocarbon').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'});
        });
    }
    pybossa.taskLoaded(function(task, deferred) {
        if ( ! $.isEmptyObject(task) ) {
            loadUserProgress();
        	var img = $('<img />');
        	img.load(function() {
            // continue as soon as the image is loaded
            deferred.resolve(task);
        });
        img.attr('src', task.info.url_b).css('height', 460);
        img.addClass('img-thumbnail img-responsive');
        task.info.image = img;
            // 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);
        $('#photo-link').html('').append(task.info.image);
        $("#photo-link").attr("href", task.info.link);
        $('#task-id').html(task.id);
                var data = [[]];
                var config = {
                data: data,
                minRows: 6,
                minCols: 15,
                minSpareRows: 1,
                minSpareCols: 0,
                maxRows: 100,
                autoWrapRow: true,
                autoWrapCol: true,
                autoColumnSize: true,
                colHeaders: ['SampleID', 'CRA', 'Error', 'DC13', 'Material', 'Species', 'Site', 'Phase', 'Type', 'Country', 'Longitude', 'Latitude', 'LocQual', 'Source', 'Comments'],
                contextMenu: ['row_below', 'remove_row', 'undo', 'redo'],
                stretchH: 'all'
                };
                $("#addMedDates").handsontable(config);


                $('.btn-answer').off('click').on('click', function(evt) {
                evt.preventDefault();
                var answer = $(evt.target).attr("value");
                if (typeof answer != 'undefined') {
                    task.answer = $("#dataentry").serializeJSON();
                    console.log(task.answer);
                    var handsontable = $("#addMedDates").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('MedRadiocarbon');
    </script>

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