18034 sujets

Questions générales et questions de débutants

Quizz en javascript

Bonjour,

Je travaille sur un quizz en javascript dans le cadre de mon apprentissage, après avoir créé un quizz en js avec une dizaine de questions je dois le faire évoluer.

C'est à dire que je doit rajouté une deuxième serie de questions. Quelqu'un pourrait il me renseigné sur la meilleur façon de procédé pour séparer mon quizz en deux parties?

Merci !


Voilà mon code:

var quiztitle = "Quizz";

var quiz = [
        {
            "question" : "Q1: ici question?",
            
            "image" : "image.png",
            "choices" : [
                            "choix1",
                            "choix2",
                            "choix3"
                        ],
            "correct" : "réponse",
            "explanation": "explication",
        },
        {
            "question" : "Q2: ici question?",
            
            "image" : "image.png",
            "choices" : [
                    "choix1",
                    "choix2",
                    "choix3"
                        ],
             "correct" : "réponse",
             "explanation" : "explication",
        },
        {
           "question" : "Q3: ici question?",
           
           "image" : "image.png",
           "choices" : [
                    "choix1",
                    "choix2",
                    "choix3"
                        ],
            "correct" : "réponse",
            "explanation" : "explication",
        },
        {
            "question" : "Q4: ici question? ",
            
             "image" : "image.png",
            "choices"  : [
                    "choix1",
                    "choix2",
                    "choix3"
                        ],
             "correct" : "réponse",
             "explanation" : "explication",
        },
        {
            "question" : "Q5: ici question?",
            
            "image" : "image.png",
            "choices" : [
                    "choix1",
                    "choix2",
                    "choix3"
                         ],
            "correct" : "réponse",
            "explanation" : "expliaction",
        }
    ];

var currentquestion = 0,
    score = 0,
    submt = true,
    picked;

    $(document).ready(function(){
       $("#submitbutton").hide();

    function htmlEncode(value) {
        return $(document.createElement('div')).text(value).html();
    }
  
    function addChoices(choices) {
        if (typeof choices !== "undefined" && $.type(choices) == "array") {
            $('#choice-block').empty();
            for (var i = 0; i < choices.length; i++) {
                $(document.createElement('li')).addClass('choice choice-box').attr('data-index', i).text(choices[i]).appendTo('#choice-block');
            }
        }
    }
  
/*    function makeNewWindow(param) {
    data = param;

    if (!newWindow || newWindow.closed) {
        newWindow = window.open("","sub","status,height=200,width=300");
        setTimeout("writeToWindow()", 50);  wait a bit to give time for the window to be created 
    } else if (newWindow.focus) {
        newWindow.focus( );  means window is already open
    }
}    
*/
    function nextQuestion() {
        submt = true;
        //alert("nQ");
        $('#explanation').empty();
        $('#question').text(quiz[currentquestion].question);
        //$('#pager').text('Section' + Number(currentquestion + 1) + ' n° ' + quiz.length);
        if (quiz[currentquestion].hasOwnProperty('image') && quiz[currentquestion].image !== "") {
            if ($('#question-image').length === 0) {
                $(document.createElement('img')).addClass('question-image').attr('id', 'question-image').attr('src', quiz[currentquestion].image).attr('alt', htmlEncode(quiz[currentquestion].question)).insertAfter('#question');
            } else {
                $('#question-image').attr('src', quiz[currentquestion].image).attr('alt', htmlEncode(quiz[currentquestion].question));
            }
        } else {
            $('#question-image').remove();
        }
        addChoices(quiz[currentquestion].choices);
        setupButtons();
        //progressBarValue = (Number(currentquestion + 1) / quiz.length) * 100
        //dispProgressBar();
    }
    
    function processQuestion() {
        //alert(choice);
        currentquestion++;
        //alert(currentquestion);
        $("#submitbutton").hide();
            if (currentquestion == quiz.length) {
                endQuiz();
            } else {
                nextQuestion();
            }
    }

    function setupButtons() {
        $('.choice').on('mouseover', function () {
            $(this).css({
                'background-color': '#e1e1e1'
            });
        });
        $('.choice').on('mouseout', function () {
            $(this).css({
                'background-color': '#fff'
            });
        })
        $('.choice').on('click', function () {
            //alert("");
            choice = $(this).attr('data-index');
            $('.choice').removeAttr('style').off('mouseout mouseover');
            $(this).css({
                'border-color': '#222',
                'font-weight': 700,
                'background-color': '#c1c1c1'
            });
            if (quiz[currentquestion].choices[choice] == quiz[currentquestion].correct) {
            $('.choice').eq(choice).css({
                'background-color': '#50D943'
            });
            $('#explanation').html('<strong>Correct!</strong> ' + htmlEncode(quiz[currentquestion].explanation));
            score++;
        } else {
            $('.choice').eq(choice).css({
                'background-color': '#D92623'
            });
            $('#explanation').html('<strong>Incorrect.</strong> ' + htmlEncode(quiz[currentquestion].explanation));
        }
            $("#submitbutton").click(function(){
               alert("click");
                  $('.choice').off('click', choice);
                 $(this).off('click');
                 processQuestion(choice);
             });

            if (submt) {
                //alert("submit");
                submt = false;
                $('.choice').off('click');
                $(this).off('click');
                setTimeout(processQuestion,7000);
            }
        })
    }


    function endQuiz() {
        $('#explanation').empty();
        $('#question').empty();
        $('#choice-block').empty();
        $('#submitbutton').remove();
        $('#question').text("Vous avez " + score + "bonne(s) réponse(s) sur " + quiz.length + " réponses correctes.");
        $(document.createElement('h2')).css({
            'text-align': 'center',
            'font-size': '4em'
        }).text(Math.round(score / quiz.length * 100) + '%').insertAfter('#question');

        var result = Math.round(score / quiz.length * 100);
        var g = document.createElement('img');
            g.id = 'imgId';
            $(g).css({
            'height':'100px',
            'width': '300px',
            'margin-left':'40%'
        }).insertAfter('#explanation');

        if(result < 25){
            $("#imgId").attr("src","https://ouijarrive.files.wordpress.com/2014/12/image-drole-simpsons.jpg");
        }
        else if(result < 50){
            $("#imgId").attr("src","http://florence.apln-blog.fr/files/2014/12/5tqwzxik.gif");
        }
        else if(result < 100){
            $("#imgId").attr("src","http://www.mondespersistants.com/images/screenshots/World_of_Warcraft-306426517.jpg");
        }
        else if(result == 100){
            $("#imgId").attr("src","http://static.skynetblogs.be/media/42106/dyn007_original_351_345_gif__322f81be8c1209615f2355ad5619ac8b.gif");
        }
    }


    function init() {
        //add title
        if (typeof quiztitle !== "undefined" && $.type(quiztitle) === "string") {
            $(document.createElement('h1')).text(quiztitle).appendTo('#frame');
        } else {
            $(document.createElement('h1')).text("Quiz").appendTo('#frame');
        }

        //add pager and questions
        if (typeof quiz !== "undefined" && $.type(quiz) === "array") {
            //add pager
            //$(document.createElement('p')).addClass('pager').attr('id', 'pager').text('Section: ' + quiz.length).appendTo('#frame');
            //add first question
            $(document.createElement('h2')).addClass('question').attr('id', 'question').text(quiz[0]['question']).appendTo('#frame');
            //add image if present
            if (quiz[0].hasOwnProperty('image') && quiz[0]['image'] != "") {
                $(document.createElement('img')).addClass('question-image').attr('id', 'question-image').attr('src', quiz[0]['image']).attr('alt', htmlEncode(quiz[0]['question'])).appendTo('#frame');
            }
            //questions holder
            $(document.createElement('ul')).attr('id', 'choice-block').appendTo('#frame');

            //add choices
            addChoices(quiz[0]['choices']);
            $(document.createElement('p')).addClass('explanation').attr('id', 'explanation').html('&nbsp;').appendTo('#frame');
            setupButtons();
        }
    }

    init();
});
[/i]
Modifié par samba (16 Mar 2015 - 11:01)
Une piste simple si tu veux que ça reste du pur JS et que ça soit un minimum maintenable :
- Mettre tes questions dans des fichiers JSON (c'est a peu près la même syntaxe que la structure de données JS)
- Nommer les fichiers avec un format identique (genre questions-1.json, questions-2.json)
- Au chargement de la page, détecter un paramètre dans l'url (ça peut être un paramètre GET (?quizz=1) ou une ancre (#quizz1) et charger le fichier JSON correspondant en Ajax.

Bien sur tout reste à écrire mais si tu as un minimum de connaissances JS tu devrais t'en sortir rapidement (il y a déjà une bonne partie de faite), et ça te permettra de créer un troisième quizz en 5 minutes la prochaine fois Smiley cligne
Modifié par Freez (16 Mar 2015 - 21:03)
Merci pour les conseils, mais pardonne moi d'être un peu dur d'oreille comme je débute en JS. Donc si j'ai bien compris je créé deux fichiers json, dans mon assets javascript et je les appels avec un GET dans mes routes.

Au fait mon appli est sous rails cela pose t-il un problème?
Non normalement ça n'aura pas d'incidence, tu créés 2 fichiers json contenants tes quizz 1 et 2, et tu viens en charger 1 en fonction de ce qu'il y a en paramètre dans ton URL. Un $.getJSON(urlVersFichier, function(jsonRecupéré){ traitement... }); suffira.
Bonne continuation
Bonjour.

J'arrive un peu en retard, mais je pense que tu peux même mettre ton deuxième quizz dans le même JSON si tu veux (peut-être un peu moins pratique).
{
  "quizz1": {
      ...
  },
  "quizz2": {
      ...
  }
}
Ok j'ai saisi merci infiniment.

Sans vouloir abuder de votre gentillesse, je voudrais aussi intégré une fonction pour appelé une pop-up après un nombre défini de questions.

Auriez vous un conseil ou un tuto qui me l'explique?

Merci de votre aide.
Autre question j'ai appelé mon fichier json comme ceci dans mon index.html.erb:


<script type="text/javascript" src="quiz-one.json"></script>
                <div class="col s12 m4 l4">
                  <div id = "frame"
                   role = "content" >
                     <div class="bar">
                     </div>
                     <a id="reload" href="javascript:window.location.reload();">
                       <img src="http://res.cloudinary.com/dxsgwgbyd/image/upload/v1425032670/bloggif_54f045b1b07a9_qlmbgn.png">
                     </a>
                  </div>
                </div>


Mais dans mon navigateur sa ne me renvoi rien?
J'ai aussi essayer comme ça:

function load() {
	var quiz-one = JSON.parse(quiz-one);
}

Et le html:

<script type="text/javascript" src="quiz-one.json"></script>
Non je pense que tu t'embêtes un peu pour rien la... déjà ton nom de variable qui contient un "-" ça ne risque pas de marcher.
J'aurais plutôt vu un truc comme ça :
$.getJSON('quiz-one.json', function(quizz){
    // et la tu initialise ton quizz
});
Il faut que tu vérifies que ton fichier HTML qui appelle le fichier est bien au même niveau que ton fichier json, si ce n'est pas le cas il faut écrire le chemin vers ton fichier json en partant du dossier contenant ta page HTML.
j'ai créé deux fichier .json dans ma views/home et je les appels dans mon fichier index.html dans la views/home aussi et sa ne fonctionne pas;

Pourriez vous regarder et me dire ce que j'ai mal fait:

quiz.json:

quiz = [
        {
            "question" : "Q1: … ?",
            
            "choices" : [
                            "Choix_1",
                            "Choix_2",
                            "Choix_3"
                        ],
            "correct" : "Choix_1",
            "explanation ": "explication",
        },
        {
            "question" : "Q2...?",
            
            "choices" : [
                    "Choix_1",
                    "Choix_2",
                    "Choix_3"
                        ],
             "correct" : "Choix_1",
             "explanation" : "explication",
        }
    ]


quiztwo.json:

quiz = [
        {
            "question" : "Q1: … ?",
            
            "choices" : [
                            "Choix_1",
                            "Choix_2",
                            "Choix_3"
                        ],
            "correct" : "Choix_1",
            "explanation ": "explication",
        },
        {
            "question" : "Q2...?",
            
            "choices" : [
                    "Choix_1",
                    "Choix_2",
                    "Choix_3"
                        ],
             "correct" : "Choix_1",
             "explanation" : "explication",
        }
    ]


index.html:


<head>
<script>
       $.getJSON('quiz.json', function(quizz) {
         elem = document.getElementById("quizz");    
       });
      </script>
    </head>
<div class="col s12 m4 l4">
                  <div id = "frame"
                   role = "content" >
                     <div class="bar">
                     </div>
                     <a id="reload" href="javascript:window.location.reload();">
                       <img src="http://res.cloudinary.com/dxsgwgbyd/image/upload/v1425032670/bloggif_54f045b1b07a9_qlmbgn.png">
                     </a>
                  </div>
                </div>


Merci beaucoup !!
Modifié par samba (23 Mar 2015 - 15:39)
Sujet clos
Aller à