Jquery Select option

Bonjour tout le monde!!
Je débute en jquery, et un de mes premiers exercice consite à créé un quiz avec au démarrage un select html avec plusieurs option qui sont associer a un tableau. Au clique sur l'une des options je voudrais charger le tableau associer.
Voici le tableau:

var niveaux = [
    {
        "title": "Niveau 1",
        "questions": [
            {
                "question" : "1: Originis exustus carnifex sexu convictus?",

                "image" : "",
                "choices" : [
                    "Originis exustus.",
                    "Originis exustus?",
                    "Originis exustus!"
                ],
                "correct" : "Originis exustus.",
                "explanation": "",
            },
            {
                "question" : "2: Vitae enim accepto anteferre praesertim mihi hodierno publicae?",

                "image" : "",
                "choices" : [
                        "Vitae enim accepto!!",
                        "Vitae enim accepto??",
                        "Vitae enim accepto"
                ],
                 "correct" : "Vitae enim accepto",
                 "explanation" : "",
            }
        ]
    },
    {
        "title": "Niveau 2",
        "questions": [
            {
                "question" : "1: Memineram tantum tantum non spectato pueris sed omittam?",

                "image" : "",
                "choices" : [
                    "Memineram tantum tantum.",
                    "Memineram tantum tantum!!?",
                    "Memineram tantum tantum!?"
                ],
                "correct" : "Memineram tantum tantum!?",
                "explanation": "",
            },
            {
                "question" : "2:  Ego nulla virtute vicissim consecutae ipso indigens?",

                "image" : "",
                "choices" : [
                        "Ego nulla virtute vicissim  [decu]",
                        "Ego nulla virtute vicissim [cligne]",
                        "Ego nulla virtute vicissim..."
                ],
                 "correct" : "Ego nulla virtute vicissim [cligne]",
                 "explanation" : "",
            }
        ]
    }
];

Et ici le script qui gère le quizz:

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

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

$(document).ready(function(){

$("#frame").hide();
$("#submitbutton").hide();

function htmlEncode(value) {
    return $('<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++) {
            $('<li>').addClass('choice choice-box').attr('data-index', i).text(choices[i]).appendTo('#choice-block');
        }
    }
}

function nextQuestion() {
	if(lvlQuestion == 1){
  	$('<h1>').html(quiztitle)
  }
    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) {
    		quiztitle = niveaux[1]['title'];
				quiz = niveaux[1]['questions'];
        endQuiz();
    }else{
    	nextQuestion();
    }
}

function setupButtons() {
    $('.choice').on('click', function () {
        choice = $(this).attr('data-index');
        $('.choice').removeAttr('style').off('mouseout mouseover');
            $(this).addClass('active');
            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();
    $('#question').text("Vous avez " + score + " réponse(s) correcte(s) sur " + quiz[niveaux].length);
    lvlQuestion = 1;
    currentquestion = 0;
    $("#submitbutton").html('Niveau suivant').show();
    $("#submitbutton").click(function(){
        nextQuestion();
        $("#submitbutton").hide().html('Suivant');
    });
        
    var result = Math.round(score / quiz[niveaux].length * 100);
    var g = document.createElement('text');
    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\"");
    };
}

function init() {
    if (typeof quiztitle !== "undefined" && $.type(quiztitle) === "string") {
        $('<h1>').text(quiztitle).appendTo('#frame');
    } else {
        $('<h1>').text("Quiz").appendTo('#frame');
    }
    if (typeof quiz !== "undefined" && $.type(quiz) === "array") {
        $('<h2>').addClass('question').attr('id', 'question').text(quiz[0].question).appendTo('#frame');
        if (quiz[0].hasOwnProperty('image') && quiz[0].image !== "") {
            $('<img>').addClass('question-image').attr('id', 'question-image').attr('src', quiz[0].image).attr('alt', htmlEncode(quiz[0].question)).appendTo('#frame');
        }
            $('<p>').addClass('explanation').attr('id', 'explanation').html('&nbsp;').appendTo('#frame');
            $('<ul>').attr('id', 'choice-block').appendTo('#frame');
            addChoices(quiz[0].choices);
            $('<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();
});

[/i]
Modifié par samba0 (22 Apr 2016 - 11:02)

SolidSnake a écrit :
N'aurais-je pas déjà essayé de t'aider dans un précédent topic sur le sujet sans que tu ne donnes de nouvelles ?

# voix mystérieuse #

SolidSnake donnera-t-il une seconde chance à Samba0 ?
* travelling arriere sur la photo de profil de SolidSnake *
Samba0 trahira-t-il une fois de plus la confiance des membres du forum ?
* travelling avant sur l'ancien post *
La communauté CSS française décidera-t-elle de brûler Samba0 en offrande au dieu W3C ?
* fade linéaire + flou sur une image de barbecue *
La suite la semaine prochain dans * fond musical - texte chanté * Amour, kiwi & Knackss

_laurent a écrit :


# voix mystérieuse #

SolidSnake donnera-t-il une seconde chance à Samba0 ?
* travelling arriere sur la photo de profil de SolidSnake *
Samba0 trahira-t-il une fois de plus la confiance des membres du forum ?
* travelling avant sur l'ancien post *
La communauté CSS française décidera-t-elle de brûler Samba0 en offrande au dieu W3C ?
* fade linéaire + flou sur une image de barbecue *
La suite la semaine prochain dans * fond musical - texte chanté * Amour, kiwi & Knackss

Yes, c'est vendredi ici _laurent je t'engage pour mon prochain sitcom !

_laurent a écrit :
# voix mystérieuse #

SolidSnake donnera-t-il une seconde chance à Samba0 ?
* travelling arriere sur la photo de profil de SolidSnake *
Samba0 trahira-t-il une fois de plus la confiance des membres du forum ?
* travelling avant sur l'ancien post *
La communauté CSS française décidera-t-elle de brûler Samba0 en offrande au dieu W3C ?
* fade linéaire + flou sur une image de barbecue *
La suite la semaine prochain dans * fond musical - texte chanté * Amour, kiwi & Knackss

Comme ça fait plaisir de lire ce genre de connerie le lundi de bon matin, tu as illuminé ma journée.
Idem que Matthieu, je t'embauche pour mon prochain manga.

samba0 a écrit :
Oui effectivement c'était au début de mon quiz. Désoler je suis très peu sur les forums.
Voici le html associé:

<select name="level" id="level">
  <option name="none" id="none" value="none">Aucun</option>
  <option name="niveau_1" id="niv1" value="niveau_1">Niveau 1</option>
  <option name="niveau_2" id="niv2" value="niveau_2">Niveau 2</option>
</select>

Euh, mais ça ne doit pas être pratique pour lire les réponses aux questions que tu poses...

Mais je ne sais toujours pas si ça t'avait aidé ou pas ma dernière réponse.
Et quand je demandais l'HTML, c'est TOUT l'html, ou mieux un codepen ou jsfiddle.