tutorial.html

<div class="row">
    <div class="span12">
        <div id="modal" class="modal hide fade">
            <div class="modal-header">
                <h3>Dark Skies Tutorial</h3>
            </div>
            <div id="0" class="modal-body" style="display:none">
                <p><strong><span id="i18n_hi">Hi!</span></strong> <span id="i18n_explain0">Thanks for collaborating in analyzing light pollution.</span>

                <img src="http://i.imgur.com/aJMc6QP.jpg" class="img-polaroid img-responsive"/ >

               </p> 
            </div>
            <div id="1" class="modal-body" style="display:none">
                <p><span id="i18n_explain1">The application is really simple. It loads a photo from</span> <a href="http://www.nasa.gov/mission_pages/station/main/"><span id="i18n_ISS">International Space Station</span></a><span id="i18n_explain2"> and asks you to classify the photo:</span></p>
                <ul>
                    <li><span id="i18n_black">Black</span></li>
                    <li><span id="i18n_city": "City">City</span></li>
                    <li><span id="i18n_stars">Stars</span></li>
                    <li><pan id="i18n_aurora">Aurora</span></li>
		            <li><span id="i18n_astronaut">Astronauts</span></li>
                    <li><span id="i18n_none">None of these</span></li>
                    <li>or <span id="i18n_no_photo">Broken image</span></li>
                </ul>
                </p>
                <p>
                <span id="i18n_explain4">Then if the picture was taken at night, you will have specify if the picture is showing a city and or stars, or even another objects.</span>
                </p>
                <p><span id="i18n_explain5">All you have to do is to click in one or more of the possible answers and you will be done.</span></p>
            </div>
            <div id="2" class="modal-body" style="display:none">
                <p><span id="i18n_exmple1">This is an example of Stars.</span>
                <img src="http://earth.jsc.nasa.gov/DatabaseImages/ESC/small/ISS030/ISS030-E-149149.jpg" class="img-polaroid img-responsive"/>
               </p> 
            </div>
            <div id="3" class="modal-body" style="display:none">
                <p><span id="i18n_exmple2">This is an example of a City.</span>
                <img src="http://earth.jsc.nasa.gov/DatabaseImages/ESC/small/ISS038/ISS038-E-10481.jpg" class="img-polaroid img-responsive"/>
               </p> 
            </div>
             <div id="4" class="modal-body" style="display:none">
                <p><span id="i18n_exmple3">This is an example of an Aurora.</span>
                <img src="http://earth.jsc.nasa.gov/DatabaseImages/ESC/small/ISS030/ISS030-E-116196.jpg" class="img-polaroid img-responsive"/>
               </p> 
            </div>
            <div class="modal-footer">
                <a id="prevBtn" href="#" onclick="showStep('prev')" class="btn"><span id="i18n_previous">Previous</span></a>
                <a id="nextBtn" href="#" onclick="showStep('next')" class="btn btn-success"><span id="i18n_next">Next</span></a>
                <a id="startContrib" href="../darkskies/newtask" class="btn btn-primary" style="display:none"><i class="icon-thumbs-up"></i> <span id="i18n_start">Star now!</span></a>
            </div>
        </div>
    </div>
</div>
<script>
// Default language
var userLocale = "en";
// Translations
var messages = {"en": {
                        "i18n_no_photo": "No photo",
                        "i18n_black": "Black",
                        "i18n_city": "City",
                        "i18n_stars": "Stars",
                        "i18n_aurora": "Aurora",
                        "i18n_astronaut" : "Astronaut",
                        "i18n_none": "None of these",
                        "i18n_explain1" : "The application is really simple. It loads a photo from",
                        "i18n_ISS" : "International Space Station",
                        "i18n_explain2" : "and asks you to classify the photo:",
                        "i18n_explain0" : "Thanks for collaborating in analyzing light pollution.",
                        "i18n_hi" : "Hi!",
                        "i18n_explain4" : "Then if the picture was taken at night, you will have specify if the picture is showing a city and or stars, or even another objects.",
                        "i18n_explain5" : "All you have to do is to click in one of the possible answers and you will be done.",
                        "i18n_exmple1" : "This is an example of Stars.",
                        "i18n_exmple2" : "This is an example of a City.",
                        "i18n_exmple3" : "This is an example of an Aurora.",
                        "i18n_previous" : "Previous",
                        "i18n_next" : "Next",
                        "i18n_start" : "Start now!",
                      },
                "es": {
                        "i18n_no_photo": "No hay foto",
                        "i18n_black": "Negro",
                        "i18n_city": "Ciudad",
                        "i18n_stars": "Estrellas",
                        "i18n_aurora": "Aurora",
                        "i18n_astronaut" : "Astronauta",
                        "i18n_none": "Ninguna de estos",
                        "i18n_explain1" : "La aplicación es muy simple. Carga las imágenes desde",
                        "i18n_ISS" : "Estación Espacial internacional",
                        "i18n_explain2" : "y te pide que clasifiquen la imagen en las siguientes categorías:",
                        "i18n_explain0" : "Gracias por colaborar analizando la contaminación lumínica:",
                        "i18n_hi" : "¡Hola!",
                        "i18n_explain4" : "Si una imagen ha sido tomada de noche, tendras que especificar si la imagen muestra una ciudad o estrellas o quizás otro objeto.",
                        "i18n_explain5" : "Tan solo tienes que marcar en una de las respuestas y estará hecha la clasificación.",
                        "i18n_exmple1" : "Este es un ejemplo de estrellas.",
                        "i18n_exmple2" : "Este es un ejemplo de ciudad.",
                        "i18n_exmple3" : "Este es un ejemplo de aurora.",
                        "i18n_previous" : "Anterior",
                        "i18n_next" : "Siguiente",
                        "i18n_start" : "¡Comenzar!",
                      },                      
                 "fr": {
                        "i18n_no_photo": "Pas de photo",
                        "i18n_black": "Noir",
                        "i18n_city": "Ville",
                        "i18n_stars": "Étoiles",
                        "i18n_aurora": "Aurore boréale",
                        "i18n_astronaut" : "Astronaute",
                        "i18n_none": "Aucun de ceux-ci",
                        "i18n_explain1" : "L'application est très simple. Télécharge les images",
                        "i18n_ISS" : "Station spatiale internationale",
                        "i18n_explain2" : "et vous demande de classer l'image dans les catégories suivantes:",
                        "i18n_explain0" : "Merci de nous aider à analyser la pollution lumineuse:",
                        "i18n_hi" : "Salut!",
                        "i18n_explain4" : "Si l'image a été prise dans la nuit, vous devrez spécifier si l'image montre une ville, une étoile, ou un objet.",
                        "i18n_explain5" : "Vous n'avez qu'à cocher l'une des réponses et le classement sera établi.",
                        "i18n_exmple1" : "Ceci est un exemple d'étoiles.",
                        "i18n_exmple2" : "Ceci est un exemple d'une ville",
                        "i18n_exmple3" : "Ceci est un exemple d'une aurore boréale.",
                        "i18n_previous" : "Précédent",
                        "i18n_next" : "Suivant",
                        "i18n_start" : "Allez-y!",
                      },
                "it": {
                        "i18n_no_photo": "Non ci sono foto",
                        "i18n_black": "Nero",
                        "i18n_city": "Città",
                        "i18n_stars": "Stelle",
                        "i18n_aurora": "Aurora",
                        "i18n_astronaut" : "Astronauta",
                        "i18n_none": "Nessuna di queste",
                        "i18n_explain1" : "L’applicazione è molto semplice. Carica le immagini da",
                        "i18n_ISS" : "Stazione Spaziale Internazionale",
                        "i18n_explain2" : "e ti chiede di classificare l’immagine nelle seguenti categorie:",
                        "i18n_explain0" : "Grazie per la collaborazione sull’inquinamento luminoso:",
                        "i18n_hi" : "Ciao",
                        "i18n_explain4" : "Se un’immagine è stata scattata durante la notte, si dovrà specificare se l’immagine mostra una città, stella o forse un oggetto.",
                        "i18n_explain5" : "Devi solo controllare in una delle risposte e la classificazione sarà fatta.",
                        "i18n_exmple1" : "Questo è un esempio di stelle.",
                        "i18n_exmple2" : "Questo è un esempio di città.",
                        "i18n_exmple3" : "Questo è un esempio di aurora.",
                        "i18n_previous" : "Precedente",
                        "i18n_next" : "Prossimo",
                        "i18n_start" : "Iniziare!",
                      },
                "jp": {
                        "i18n_no_photo": "画像なし",
                        "i18n_black": "黒",
                        "i18n_city": "街",
                        "i18n_stars": "星",
                        "i18n_aurora": "オーロラ",
                        "i18n_astronaut" : "宇宙飛行士",
                        "i18n_none": "確答なし",
                        "i18n_explain1" : "このアプリはとても簡単。画像をここからロードしている：",
                        "i18n_ISS" : "ISS国際宇宙ステーション",
                        "i18n_explain2" : "そして、次の画像の分類を頼んできます：",
                        "i18n_explain0" : "光害分析に貢献していただき、ありがとうございます！",
                        "i18n_hi" : "こんにちは！",
                        "i18n_explain4" : "もし夜に撮られている画像でしたら、その画像が何を表示しているのかを選んでください。",
                        "i18n_explain5" : "選択肢の中から、考えられる可能性の一つを選んでクリックすると完了です。",
                        "i18n_exmple1" : "これが星の画像の例。",
                        "i18n_exmple2" : "これが街の画像の例。",
                        "i18n_exmple3" : "これがオーロラの画像の例。",
                        "i18n_previous" : "前",
                        "i18n_next" : "次",
                        "i18n_start" : "はじめ！",
                      },
               };

// Update userLocale with server side information
 $(document).ready(function(){
     userLocale = document.getElementById('PYBOSSA_USER_LOCALE').textContent.trim();
     i18n_translate();
});


function i18n_translate() {
    var ids = Object.keys(messages[userLocale])
    for (i=0; i<ids.length; i++) {
        console.log("Translating: " + ids[i]);
        document.getElementById(ids[i]).innerHTML = messages[userLocale][ids[i]];
    }
}


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();
    }
    $("#" + step).show();
}

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