tutorial.html

<div class="row">
    <div class="span12">
        <div id="modal" class="modal hide fade">
            <div class="modal-header">
                <h3>Tutorial de Sevilla Presus 2013</h3>
            </div>
            <div id="0" class="modal-body" style="display:none">
                <p>Por favor, <strong>dedica un segundo a este tutorial</strong> donde te explicaremos cómo participar paso a paso. ¡Qué bueno que quieras participar con nosotros! :)</p>
                <p>Ahora tan solo pulsa en el botón de </i>"Siguiente"</i></p>
            </div>
            <div id="1" class="modal-body" style="display:none">
                <p>La aplicación es realmente sencilla: tras un segundo se carga una página del PDF de presupuestos de Sevilla 2013, tu debes <strong>transcribir a mano al cuadro de texto</strong> y pulsar "Enviar"</p>
                <p>Necesitamos <strong>una línea por cada fila</strong> del PDF que transcribas, y que <strong>separes los campos con punto y coma</strong> ( el caracter ; )</p><br/>
                <img src="https://raw.github.com/openkratio/sevilla-presus13/master/tutoimgs/sevilla-presus13-01.png-50.png">
            </div>
            <div id="2" class="modal-body" style="display:none">
                <p><strong>Importante: </strong> Solo necesitamos las líneas en las que figuran cuantías por concepto.</p><br/>
                <img src="https://raw.github.com/openkratio/sevilla-presus13/master/tutoimgs/sevilla-presus13-02.png-50.png">
            </div>
            <div id="3" class="modal-body" style="display:none">
                <p><strong>Importante:</strong>Ignora tanto los totales como el resto de filas en tu transcripción.</p><br/>
                <img src="https://raw.github.com/openkratio/sevilla-presus13/master/tutoimgs/sevilla-presus13-03.png-50.png">
            </div>
            <div id="4" class="modal-body" style="display:none">
                <p>Para evitarte transcribir a mano puedes <strong>descargar la página en PDF</strong> para así poder copiar/pegar ... ¡pero asegúrate que está bien transcrito y que añades los punto y coma!.</p>
                <p>Nuestra experiencia nos dice que si sigues este método, es <strong>mejor que copies y pegues línea a línea.</strong></p><br/>
                <img src="https://raw.github.com/openkratio/sevilla-presus13/master/tutoimgs/sevilla-presus13-04.png-50.png">
            </div>
            <div class="modal-footer">
                <a id="prevBtn" href="#" onclick="showStep('prev')" class="btn">Anterior</a>
                <a id="nextBtn" href="#" onclick="showStep('next')" class="btn btn-success">Siguiente</a>
                <a id="startContrib" href="../sevilla-presus13/newtask" class="btn btn-primary" style="display:none"><i class="icon-thumbs-up"></i> Participar!</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 == 4 ) {
            $("#nextBtn").hide();
            $("#startContrib").show();
        }
        else {
            $("#startContrib").hide();
            $("#nextBtn").show();
        }
        $("#" + step).show();
    }

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