tutorial.html

<div id="modal" class="modal fade">
   <div class="modal-dialog">
      <div class="modal-content">
          <div class="modal-header">
                 <h1 class="lead">
                     Photo-tagging Tutorial
                 </h1>
             </div><!-- Modal header -->
             <div id="0" class="modal-body" style="display:none">
                <p>
                    The application is really simple. It loads a photo from our <a href="http://flickr.com/micropasts">Flickr feed</a> and asks you to <strong>tag all the elements that you recognise</strong>. These can be anything from a <i>column</i> to a <i>camel</i>, an activity taking place such as <i>agriculture</i> or <i>transport</i>, a certain cultural group of people such as <i>Bedouin</i> or <i>European</i> - or even specific individuals, and/or more general themes such as simply <i>architecture</i>.
                </p>
                <p>
                    You then hover the mouse over the elements that you identify, and then by clicking and dragging you will draw a box. A text box will appear, in which you will be able to type the name of that element and save it.
                </p>
                <p>
                   If you recognise a specific person in the photo, this is great! Please tag their names in this way: <i>Last name, first name</i>; for example: Horsfield, George.
                </p>
                <p>
                    <img src="https://farm3.staticflickr.com/2918/14443363844_d99632eb9b.jpg" width="100%" alt="An example of the tagging interface"/>
                </p>
                <p>
                    You can do this as many times as you want. If you wish to edit a tag or delete it altogether, you can do this by hovering over the relevant box, and then selecting either the pencil tool for editing, or the 'x' for deleting.
                </p>
                
             </div>
             <div id="1" class="modal-body" style="display:none">
                <p>
                    As you can see, you have four buttons representing four categories of suggested keywords: Activity, Things, Theme and People. Clicking on each one of these will bring up a list of suggested keywords to be used in tagging. You can refer to these lists when tagging each photo, but you can also add your own tags. Both annotating elements on the photograph and selecting keywords from these lists are very helpful.
                </p>
                <p>
                    Additional information incldues the photo's ID (starts with P2008, and appears in almost all photos), the photo's orientation (landscape, portrait, or other if it's a square), as well as comments, if you have anything else you want to mention. If the photo has a caption, please try to transcribe it as accurately as possibly into the transcribe label box.
                </p>
                <p>
                    We would also like your help to give the photograph coordinates and a Pleiades Identifier. If you go to the geo-code section on the right hand side and type a place name (refer to mapping hints for help) you can select the place depicted in the photo. Once you have done this, try choosing a Pleiades Identifier from the drop down list below.
                </p>
                <img src="http://micropasts.org/wp-content/uploads/2014/09/Jerash_Geocoder.png" width="100%" alt="Geocoder view" />
                <p>&nbsp;</p>
                <p>
                    During the task, you can always return to this tutorial via the <i class="glyphicon glyphicon-eye-open"></i> Tutorial 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 tagged, 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="../phototaggingHorsfield/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>