tutorial.html

<div id="modal" class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
            <div class="modal-header">
                <h3>Photo-masking tutorial for 3D modelling </h3>
            </div>
            <div id="0" class="modal-body" style="display:none">
                <p>
                    This application is very simple (but does
  not yet work on mobile devices). When you participate, the platform
  will load a photograph of an archaeological artefact.Once the image
  has been loaded, you will be asked to click around the edge of the artefact in order to define a
  polygon outline. Click once every time you wish to add a point along
  the edge of the polygon and your final point will snap back onto the
  one you started with. You can draw one polygon around the entire
  object or instead draw a series of overlapping
  polygons if you prefer. In general, we would like you to draw your polygon(s)
  very slightly inside the actual edge of the artefact. This is
  because we don't want background pixels near this edge to create a
  fuzzy border, and we don't need to worry so much about losing a bit
  of the artefact edge, as the missing few pixels are very likely to
  appear in one of the other photographs (at least 40 overlapping photographs are
  likely to exist for each object to support the construction of the
  3d model). An example of a successful outline is shown below:
                </p>
                <img src="https://farm4.staticflickr.com/3796/13464348955_a06ecab512.jpg" width="500" height="308" class="img-polaroid"
                     alt="An example of an artefact photograph whose outline has been defined " />
            </div>

            <div id="1" class="modal-body" style="display:none">
                <p>
                In a few cases, there might be one or more holes
                in the object shown in the photograph (e.g. inside the loop
                of a handle), and you can
                click on the "Holes" button to be given an opportunity
                to draw these in, as a second step, after you have created the initial outline
                around the object. During the task, you can always return to this tutorial via the "Help" button. 
                </p>
            	<p>
                To find out how the project is progressing, to suggest
                changes to this application or to propose new research
	      ideas based what you have transcribed, please have a look at
                our <a href="http://community.micropasts.org" title="Community forum">community forum</a>.
                </p>
            </div>

            <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="../photomasking/newtask" class="btn btn-primary" style="display:none"><i class="glyphicon glyphicon-thumbs-up"></i> Let's start!</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 == 1 ) {
            $("#nextBtn").hide();
            $("#startContrib").show();
        }
        $("#" + step).show();
    }

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