tutorial.html

<div class="row">
    <div class="col-md-12">
        <div id="modal" class="modal fade">
            <div class="modal-dialog">
                <div class="modal-content">
                    <!-- Modal header -->
                    <div class="modal-header">
                <h3>How to transcribe the index cards</h3>
            </div>

            <!-- Step 1 of the tutorial -->
            <div id="0" class="modal-body" style="display:none">
                <p>
                    Transcription of these index cards should be straighforward!
                </p>
                
                <p>An example card can be seen below, and you can see the clearly laid out text.
                
                <img src="https://c1.staticflickr.com/1/791/41017652412_209155f353.jpg" />

            </div>

            <!-- Step 2 of the tutorial -->
            <div id="1" class="modal-body" style="display:none">
                <p>
                    The fields we would like you to transcribe are:
                </p>
  <ul>              
    <li>Name and date</li>
<li>Seal type</li>
<li>Society Reference</li>
<li>Dimensions</li>
<li>Description</li>
<li>Inscription</li>
<li>References</li>
<li>Comments</li>

</ul>
                
                           </div>
                           
                           <div id="2" class="modal-body" style="display:none">
                <p>
                    The cards can be read in the following way:                </p>
  
  <img src="https://c1.staticflickr.com/1/802/39250604820_33506c29f2_z.jpg" />
  
  <p>Therefore the example card reads in this way:</p>
  
  <img src="https://c1.staticflickr.com/1/806/41059233011_14890a465f.jpg" />
  
  <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" data-dismiss="modal" href="../middleEastPostcards/newtask" class="btn btn-primary"
                           style="display:none"/><i class="glyphicon glyphicon-thumbs-up"></i> Let's start!</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

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