tutorial.html

<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>Linked Open Data exercise for Project Andvari</h3>
            </div>

            <!-- Step 1 of the tutorial -->
            <div id="0" class="modal-body" style="display:none">
                <img src="https://pbs.twimg.com/profile_images/457199979115732992/PqXVloa1_200x200.png" class="pull-right"/>
                <p>
                    This application is on behalf of Project Andvari (a US based research project funded by the National Endowment
                    for the Humanities (NEH)), is a simple interface via which users can view a sample object from a
                    collected group and select terms from the supplied RDF thesaurus that appropriately describe the
                    iconographic content of an object.
                </p>
                <p>
                    The application should be able to gather adequate data so that the project team may later assess:
                </p>
                <ol>
                    <li>how many users selected terms for a given object</li>
                    <li>how many terms – per user – were selected for a given object</li>
                    <li>the overall frequency of term usage distributed across all objects</li>
                    <li>what free-text user comments were generated regarding the applicability of the draft thesaurus.</li>
                </ol>
            </div>

            <!-- Step 2 of the tutorial -->
            <div id="1" class="modal-body" style="display:none">
                <p>
                    Taking part in this is very simple. On the right hand side of the interface, an open licenced image
                    will be loaded from one of two starting collections (Kringla and the British Museum) and we would
                    like you to look at the image and decide which terms best describe the object in question. (Ignore backhoes,
                    bulldozers and anything that is not ancient please!)
                </p>
                <p>
                    There are 6 classes that we would like you to think about for each object:
                </p>
                <ol>
                    <li>The abstract art represented</li>
                    <li>Elements of the built environment represented</li>
                    <li>Physical attributes displayed in the image</li>
                    <li>Natural world attributes displayed in the image</li>
                    <li>The object type itself</li>
                    <li>The subject matter of the image</li>
                </ol>
            </div>

            <!-- Step 2 of the tutorial -->
            <div id="2" class="modal-body" style="display:none">
                <p>
                    The dropdown select interfaces allow you to select as many terms as you like for each class. So for
                    instance the image below shows built environment terms chosen.
                </p>
                <img src="http://micropasts.org/wp-content/uploads/2015/03/multiselect.png" />
                <p>
                    Once you have chosen all your terms for each class, think about whether there are any other terms you
                    would suggest for tagging the image and enter these into the terms box as comma separated values. So for
                    instance you might think:
                </p>
                <blockquote>
                    odin, temple, banana
                </blockquote>
                <p>
                    Then also think about any comments relating to the image and the tags you provided and if you feel you
                    need to, enter these into the comments box. That is now complete! So press the submit button and thank
                    you for helping the Andvari team!
                </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"/></a>
                <i class="glyphicon glyphicon-thumbs-up"></i> Let's start!</a>
            </div>
        </div>
    </div>
</div>