tutorial.html

<div class="row">
    <div class="col-md-12">
        <div id="modal" class="modal hide fade">
            <div class="modal-header">
                <h3>SoundCloud tutorial</h3>
            </div>
            <div id="0" class="modal-body" style="display:none">
                <p><strong>Hi!</strong> This is a <strong>demo project</strong> that shows how you can do sound recognition on audio clips using the PyBossa framework in Crowdcrafting.org.
               </p> 
            </div>
            <div id="1" class="modal-body" style="display:none">
                <p>The application is really simple. It a sound clip from <a href="http://www.soundcloud.com">SoundCloud</a> and asks you this question: <strong>Is this a Hip-Hop song?</strong></p>
                <img src="http://i.imgur.com/HZVoivo.png" class="img-thumbnail"/>
                <p>You will have 3 possible answers:
                <ul>
                    <li>Yes,</li>
                    <li>No, and</li>
                    <li>I don't know</li>
                </ul>
                </p>
                <p>
                </p>
                <p>All you have to do is to play the sound clip and choose on of the three possible answers and you will be done. This demo project could be adapted for more complex pattern recognition problems.</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="../soundcloud/newtask" class="btn btn-primary" style="display:none"><i class="fa fa-thumbs-o-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 == 1 ) {
            $("#nextBtn").hide();
            $("#startContrib").show();
        }
        $("#" + step).show();
    }

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