tutorial.html

<div id="modal" class="modal fade">
	<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, AgeUncal, ErrorP and Site and DataSource 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>
                <a id="startContrib" href="../MedRadiocarbon/newtask" class="btn btn-primary" style="display:none"><i class="glyphicon glyphicon-thumbs-up"></i>Proceed with task</a>
            </div>
        </div>
    </div>
</div>


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