18041 sujets

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

Besoin d'aide pour un quiz jquery

Bonjour à tous
J'ai construit un quiz dans le cadre de mon apprentissage et je dois lui ajoouter un second niveau de questions et je ne sais pas comment faire qq pourrait il m'aidé?

var niveaux = [
    {
        "title": "Niveau 1",
        "questions": [
            {
                "question" : "1: question 1",

                "image" : "",
                "choices" : [
                    "choix 1",
                    "choix 2",
                    "choix 3"
                ],
                "correct" : "choix 1",
                "explanation": "choix 1",
            },
            {
                "question" : "2: question 2",

                "image" : "",
                "choices" : [
                        "choix 1",
                        "choix 2",
                        "choix 3"
                ],
                 "correct" : "choix 1",
                 "explanation" : "choix 1",
            },
    {
        "title": "Niveau 2",
        "questions": [
            {
                "question" : "1:  question 1",

                "image" : "",
                "choices" : [
                    "choix 1",
                    "choix 2",
                    "choix 3"
                ],
                "correct" : "choix 2",
                "explanation": "choix 2",
            },
            {
                "question" : "2: question 2",

                "image" : "",
                "choices" : [
                        "choix 1",
                        "choix 2",
                        "choix 3"
                ],
                 "correct" : "choix 1",
                 "explanation" : "choix 1",
            }
];

Voila le script dont je me suis servi pour réaliser mon quizz, je parvient à afficher le premier niveau mais pas le deuxième.

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

var quiztitle = niveaux[currentquestion]['title'];
var quiz = niveaux[currentquestion]['questions'];

    $(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 nextQuestion() {
    submt = true;
    $('#explanation').empty();
    $('#question').text(quiz[currentquestion].question);
        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();
}

function processQuestion(choice) {
    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 () {
        choice
        = $(this).attr('data-index');
            $('.choice').removeAttr('style').off('mouseout mouseover');
                $(this).css({
                    'border-color': '#000',
                    'font-weight': 700,
                    'background-color': '#fff'
            });
            if (quiz[currentquestion].choices[choice] == quiz[currentquestion].correct) {
                $('.choice').eq(choice).css({
                    'background-color': '#50D943'
                });
                $('#explanation').html('<strong>VRAI !</strong> ' + htmlEncode(quiz[currentquestion].explanation));
                    score++;
            } else {
                $('.choice').eq(choice).css({
                    'background-color': '#ff0000'
                });
                $('#explanation').html('<strong>FAUX.</strong> ' + htmlEncode(quiz[currentquestion].explanation));
            }
                $("#submitbutton").show();
                if (submt) {
                    submt = false;
                    $('.choice').off('click');
                    $(this).off('click');
                    $('#submitbutton').css({
                         'color': '#fff'
                    });
                    $("#submitbutton").click(function(){
                        $('.choice').off('click', choice);
                        $(this).off('click');
                        processQuestion(choice);
                    });
                }
    });
}

function endQuiz() {
        $('#explanation').empty();
        $('#question').empty();
        $('#choice-block').empty();
        $('#submitbutton').remove();
        $('#question').text("Vous avez " + score + " réponse(s) correcte(s) sur " + quiz.length);

        var result = Math.round(score / quiz.length * 100);
        var g = document.createElement('text');
        g.id = 'text';
        $(g).css({
            'height':'100px',
            'width': '100px',
            'text-align': 'center',
        }).insertAfter('#question');

        if(result < 33){
            $("#explanation").text("Décevant Tu as obtenu le niveau \"CANCRE\"");
        }
        else if(result < 50){
            $("#explanation").text("Peut mieux faire. Tu as obtenu le niveau \"FAIBLARD\"");
        }
         else if(result < 90){
            $("#explanation").text("Bravo !! Tu as obtenu le niveau \"TOP\"");
        }
        else if(result == 100){
            $("#explanation").text("Félicitation !!! Tu as obtenu le niveau \"CRAQUE\"");
        }
      $(document.createElement('div')).addClass('choice-box').attr('id', 'submitbutton').text('Suivant').css({
                'font-weight': '700',
                'padding': '20px 0',
                'line-height': '5%',
                'background': 'none',
            }).appendTo('#frame');
    }

function init() {
    //ajoute titre
    if (typeof quiztitle !== "undefined" && $.type(quiztitle) === "string") {
        $(document.createElement('h1')).text(quiztitle).appendTo('#frame');
    } else {
        $(document.createElement('h1')).text("Quiz").appendTo('#frame');
    }
    //ajoute page et question
    if (typeof quiz !== "undefined" && $.type(quiz) === "array") {
    //ajoute première question
        $(document.createElement('h2')).addClass('question').attr('id', 'question').text(quiz[0].question).appendTo('#frame');
        //ajoute image si présente
        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');
        }
            $(document.createElement('p')).addClass('explanation').attr('id', 'explanation').html('&nbsp;').appendTo('#frame');
            //questions holder
            $(document.createElement('ul')).attr('id', 'choice-block').appendTo('#frame');
            //ajoute choix
            addChoices(quiz[0].choices);
            //ajoute bouton submit
            $(document.createElement('div')).addClass('choice-box').attr('id', 'submitbutton').text('Suivant').css({
                'font-weight': '700',
                'padding': '20px 0',
                'line-height': '5%',
                'background': 'none',
            }).appendTo('#frame');

            $("#submitbutton").hide();
              setupButtons();
        }
    }
    init();
});

Quel est la meilleur façon d'appeler mon second tableau de question?
Je vous remercie de votre aide Smiley biggrin Smiley ravi [/i]
Modifié par samba0 (11 Feb 2016 - 15:54)
Bonjour et bienvenue sur le forum,

Déjà sans rentrer dans le détail de ton problème, plusieurs points à améliorer :
- Ton JSON niveaux n'est pas correct (beaucoup d'erreur sont à corriger, Cf. un validateur sympa)

- Évite au maximum tout ce qui a attrait au style dans le JS (le CSS est fait pour ça), par exemple ça :
$('.choice').on('mouseover', function () {
  $(this).css({
    'background-color': '#e1e1e1'
  });
});
$('.choice').on('mouseout', function () {
  $(this).css({
    'background-color': '#fff'
  });
});

C'est en fait ça :
.choice { background-color:#fff }
.choice:hover { background-color:#e1e1e1 }



Ou encore ça :
$('.choice').on('click', function () {
  // [...]
  $(this).css({
    'border-color': '#000',
    'font-weight': 700,
    'background-color': '#fff'
  });
  // [...]
});

... c'est ça :
$('.choice').on('click', function () {
  // [...]
  $(this).addClass('active');
  // [...]
});

... avec ça :
.choice.active {
  border: 1px solid #000;
  font-weight: bold;
  background-color: #fff;
}

... et ce sont des exemples parmi tant d'autres !

- Sinon, une petite astuce jQuery, ça :
$(document.createElement('h1')).text(quiztitle).appendTo('#frame');

... tu peux aussi l'écrire comme ça :
$('<h1>').text(quiztitle).appendTo('#frame');
// ou comme ça : $('<h1>'+quiztitle+</h1>').appendTo('#frame')

Certes, c'est du détail.

- Pour gagner en lisibilité, sors également toutes les fonctions du $(document).ready()
Modifié par SolidSnake (12 Feb 2016 - 14:14)
Salut Rochel,

Merci infiniment pour ton aide. N'aurait-tu pas une autre ressources car le lien que tu ma passer ne fonctionne pas lorsque je m'y rend sa m'affiche "The resource cannot be found.".
En tous cas c'est très sympa de ta part.
Sujet clos
Aller à