tutorial.html

<div class="row">
    <div class="span12">
        <div id="modal" class="modal hide fade">
            <div class="modal-header">
                <h3>Finding antimatter tracks tutorial</h3>
            </div>
            <div id="0" class="modal-body" style="display:none">
                <p><strong>Hi!</strong> Thank you for helping science by identifying tracks from<strong> antiparticles</strong>. </p> 
            </div>
            <div id="1" class="modal-body" style="display:none">
                <p>You will be shown an animation as seen below and be asked to <strong>mark the particle tracks</strong> in the emulsion.
                </p>
                <p>You will be able to pause the animation and increase or decrease its speed.
                </p>
                <div class=row>
                    <div class="span4 offset1"> 
                        <img src="http://www.citizencyberscience.net/t4t-webapp/AEgIS_Public/image_iv00018_ifr32.jpg" class="img-polaroid" class="img-polaroid"/>
                    </div>
                </div>
            </div>

            <div id="2" class="modal-body" style="display:none">
                <p>When you see a track appearing, try to click on its origin in the first frame you can see it (the <strong>"Pause"</strong>, <strong>"Increase speed"</strong> and <strong>"Decrease speed"</strong> buttons may come in handy for that).</p>
                <div>
                    <img src="http://i.imgur.com/fG0K6Cm.png" class="img-polaroid"/>
                </div>
            </div>

            <div id="3" class="modal-body" style="display:none">
                <p>Now you can follow the same procedure to mark the end of the track when you see it dissapear.</p>
                <p>A line will be drawn between the two points.</p>
                <img src="http://i.imgur.com/uYenW1F.png" class="img-polaroid"/>
            </div>

            <div id="4" class="modal-body" style="display:none">
                <p>You can add as many tracks as you are able to identify. Then press <strong> "Save drawn tracks"</strong> to save your progress and move on to the next animation.</p>
                <img src="http://i.imgur.com/RQEBFLH.png" class="img-polaroid"/>
            </div>

            <div id="5" class="modal-body" style="display:none">
                <p>Oh, we almost forgot. The tracks you have marked will be used to build a 3D model of the particles trajectories which can be seen on the front page.</p>
                <div class=row>
                    <div class="span4 offset1">
                        <img src="http://i.imgur.com/CgrKqNJ.png" class="img-polaroid"/>
                    </div>
                </div>
            </div>
            <div id="6" class="modal-body" style="display:none">
                <p>Enjoy your tracking!</p>
            </div>
            <div class="modal-footer">
                <a id="prevBtn" href="#" onclick="showStep('prev')" class="btn">Previous</a>
                <a id="nextBtn" href="#" onclick="showStep('next')" class="btn btn-success">Next</a>
                <a id="startContrib" href="../antimatter/newtask" class="btn btn-primary" style="display:none"><i class="icon-thumbs-up"></i> Try the demo!</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 == 6 ) {
            $("#nextBtn").hide();
            $("#startContrib").show();
        }
        $("#" + step).show();
    }

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