我在测试中构建了一个小测验，我必须添加第二级问题，我不知道有人可以帮助我吗？
调用我的第二个数组问题的最佳方法是什么？ 谢谢你的帮助！
var niveaux = [
{
"title": "Niveau 1",
"questions": [
{
"question" : "1: En fait, le Grand Paris, c’est quoi ?",
"image" : "",
"choices" : [
"La fin de la banlieue.",
"Un projet réunissant Paris et la petite couronne.",
"Ça n’existera jamais !"
],
"correct" : "Un projet réunissant Paris et la petite couronne.",
"explanation": "Le grand Paris existe-t-il ? En tout cas il est en train de se faire. Certains y voient la fin des banlieues de Paris. D’autres aimeraient que Paris aille jusqu’au Havre. Tout çà n’est ni faux ni vrai. La réponse la plus sûre c’est qu'il réunira Paris et les communes autour.",
},
{
"question" : "2: Du coup tout le monde s’y met. Selon Ludivine, le Grand Paris c'est la transformation de l’Île-de-France en une seule ville, le Grand Paris. T’en penses quoi ?",
"image" : "/Q2.png",
"choices" : [
"L'Île de France... C'est quoi ?",
"Elle a en partie raison",
"C’est totalement faux !"
],
"correct" : "C’est totalement faux !",
"explanation" : "Ludivine doit réviser ses cours d'éducation civique. L’Ile de France c’est une Région. Le Grand Paris ce sera une métropole c’est à dire un regroupement des villes des 3 départements de la petite couronne (92, 93, 94) et de Paris(75) soit au moins 124 communes.",
},
{
"question" : "3: Mince alors !! Jean a perdu son livret de présentation du Grand Paris. Lui qui voulait impressionner ses potes en annonçant la date de lancement de la métropole du Grand Paris !! D’après toi, laquelle de ces dates est la bonne?",
"image" : "/Q3.png",
"choices" : [
"1 janvier 2016",
"1 janvier 2017",
"1 janvier 2018"
],
"correct" : "1 janvier 2016",
"explanation" : "La Métropole existe depuis le 1er janvier 2016. C’est une loi très récente, la loi \"Maptam\" votée en décembre 2013, qui l’a décidée. Elle va progressivement passer à l'action et son Président sera élu à partir de 2020.",
},
{
"question" : "4: Anna cherche désespérément comment s'appelle le nouveau métro automatique du Grand Paris. A ton avis, tu dirais quoi toi ? ",
"image" : "/Q4.png",
"choices" : [
"L'Autometro",
"Le Grand Paris Express",
"Le Pari'Metro"
],
"correct" : "Le Grand Paris Express",
"explanation" : "Le Grand Paris ce sera aussi un nouveau grand réseau de transport en commun : le Grand Paris Express. Métro entièrement automatique, il dessinera un grand 8 autour de Paris avec 205 km de voies et 68 nouvelles gares.",
},
{
"question" : "5: Mamadou qui cherche un appartement depuis 5 ans se demande si avec la Métropole du Grand Paris, il y aura plus de logements. Tu sais ça toi: combien de logements par an faut-il construire en Île-de-France ?",
"image" : "/Q5.png",
"choices" : [
"50 000 logements",
"70 000 logements",
"100 000 logements"
],
"correct" : "70 000 logements",
"explanation" : "Les objectifs pour l'Île-de-France sont de construire 70 000 logements par an (contre un peu moins de 40 000 aujourd'hui) dont environ 37 000 dans la Métropole du Grand Paris soit presque le double de ce qui est construit actuellement. « C’est l’objectif mais y parviendra-t-elle ? » pourrait te répondre Mamadou » ",
},
{
"question" : "6 : Nolwen et Mouloud débattent pour savoir qui a eu cette idée folle du grand Paris. D'après Nolwen c'est à Nicolas Sarkozy que l'on doit cette idée. Mouloud est certain que c'est l'un de ces hommes : lequel ?",
"image" : "/Q6.png",
"choices" : [
"Napoléon III",
"Louis XVI",
"François Hollande"
],
"correct" : "Napoléon III",
"explanation" : "Même si c'est Nicolas Sarkozy qui l'a remise au goût du jour, l'idée de base est née sous Napoléon III d'après les plans du baron Haussman: il imaginait déjà étendre la capitale depuis Saint-Germain-en-Laye à l'ouest, à Marne-la-Vallée à l'est: la métropole du Grand Paris d’aujourd’hui ne va pas aussi loin.",
},
{
"question" : "7 : Abdou en est persuadé: le professeur Barban va demander d’expliquer pourquoi faire le Grand Paris ? A ton avis qui a raison?",
"image" : "/Q7.png",
"choices" : [
"Ludivine pense que c'est parce qu'il faut rééquilibrer l'économie en Île de France.",
"Mouloud est sûr à 100% que c'est parce que la banlieue c'est moche donc faut la dissoudre dans Paris qui est plus beau !",
"Samira a étudié l'histoire, elle dit que c'est parce que depuis toujours dans l'histoire Paris s'étend."
],
"correct" : "Samira a étudié l'histoire, elle dit que c'est parce que depuis toujours dans l'histoire Paris s'étend.",
"explanation" : "Paris en effet s'est toujours construite par ajouts successifs de territoires et de communes alentours, au moins jusqu’au XIXème siècle.",
},
{
"question" : "8: Mais Ludivine relance le débat… et est certaine qu’il y a d’autres raisons ?",
"image" : "/Q8.png",
"choices" : [
" Elle ajoute que c’est pour être plus fort économiquement que les autres capitales du monde",
" Mamadou dit que c’est à cause du logement : y en a pas assez de construit chaque année ! Et des transports : le RER est saturé et il marche mal !",
"Tous les 2 ont raison !"
],
"correct" : "Tous les 2 ont raison !",
"explanation": "Il y a plusieurs explications: le problème économique, celui des transports, du logement et du pouvoir(qui décide de quoi?) sont aussi importants, ce sont les 4 enjeux les plus fréquemment cités pour justifier le projet du Grand Paris. D’autres pensent que ce sont avant tout les questions d’environnement et d’inégalités qui sont importantes.",
},
{
"question" : "9: Antoine lui n’est pas d’accord du tout. Il reste convaincu que le Grand Paris c’est du flan. A ton avis pourquoi?",
"image" : "/Q9.png",
"choices" : [
"Il dit que c’est magouille politique et compagnie.",
"Il a trouvé un logement facilement lui!",
"Il pense que le Grand Paris ça va rien changer aux inégalités."
],
"correct" : "Il pense que le Grand Paris ça va rien changer aux inégalités.",
"explanation" : "Le Grand Paris oppose souvent ceux qui sont pour et ceux qui sont contre. Ceux qui sont pour y voient le retour de la croissance tandis que ceux qui sont contre pensent souvent que ça ne va rien changer aux inégalités sociales voire que la situation va empirer.",
},
{
"question" : "10: Selon Rosa, avec le Grand Paris Express il y aura 7 nouvelles lignes de métro automatique pour le métro parisien. Et d'après-vous ?",
"image" : "/Q10.png",
"choices" : [
"4",
"6",
"12"
],
"correct" : "4",
"explanation" : "Le nouveau réseau de transport apportera 4 nouvelles lignes de métro automatique autour de Paris: les lignes 15, 16, 17, 18.",
},
{
"question" : "11: Jean dit qu’il doit se rendre à l'aéroport d'Orly depuis Saint-Denis. Il prétend qu'avec le Grand Paris Express il pourra le faire avec un seul ticket",
"image" : "/Q11.png",
"choices" : [
"Non, il en faudrait au moins 2 répond Abdou",
"Jasmine assure que ce sera possible.",
"Au fait c'est quoi l'intérêt si je prends jamais l'avion ? demande Eliot."
],
"correct" : "Jasmine assure que ce sera possible.",
"explanation" : "Le nouveau réseau de transport prévoit en dehors des 4 nouvelles lignes de métro, le prolongement de la ligne 11 jusqu’à Noisy Champs et… celui de la ligne 14 de St Denis Pleyel jusqu’à Orly à l’horizon… 2027 !",
},
{
"question" : "12: D’après Amin en 2016, révolution dans les transports: ça sera la fin des zones! Avec le Grand Paris il n’y aura plus qu’une seule zone! Tu lui réponds quoi toi?",
"image" : "/Q12.png",
"choices" : [
"Calomnie, ça va pas non ! Les zones, ça existera toujours.",
"C’est vrai mais c’est la Région Île-de-France qui l'a décidé.",
"Tout à fait, le 1er ministre l’a décidé."
],
"correct" : "C’est vrai mais c’est la Région Île-de-France qui l'a décidé.",
"explanation" : "Ce n’est pas le nouveau réseau de transport Grand Paris Express ni la Métropole du Grand Paris qui peut décider de la fin des zones mais la Région Île-de-France qui dirige le STIF, le syndicat des transports de la région Île-de-France. Le dézonage est appliqué depuis septembre 2015.",
}
]
},
{
"title": "Niveau 2",
"questions": [
{
"question" : "1: ",
"image" : "",
"choices" : [
"",
"",
""
],
"correct" : "",
"explanation": "",
},
{
"question" : "2: ",
"image" : "",
"choices" : [
"",
"",
""
],
"correct" : "",
"explanation" : "",
},
{
"question" : "3: ",
"image" : "",
"choices" : [
"",
"",
""
],
"correct" : "",
"explanation" : "",
},
{
"question" : "4: ",
"image" : "",
"choices" : [
"",
"",
""
],
"correct" : "",
"explanation" : "",
},
{
"question" : "5: ",
"image" : "",
"choices" : [
"",
"",
""
],
"correct" : "",
"explanation" : "",
},
{
"question" : "6: ",
"image" : "",
"choices" : [
"",
"",
""
],
"correct" : "",
"explanation" : "",
},
{
"question" : "7: ",
"image" : "",
"choices" : [
"",
"",
""
],
"correct" : "",
"explanation" : "",
},
{
"question" : "8: ",
"image" : "",
"choices" : [
"",
"",
""
],
"correct" : "",
"explanation": "",
},
{
"question" : "9: ",
"image" : "",
"choices" : [
"",
"",
""
],
"correct" : "",
"explanation" : "",
},
{
"question" : "10: ",
"image" : "",
"choices" : [
"",
"",
""
],
"correct" : "",
"explanation" : "",
},
{
"question" : "11: ",
"image" : "",
"choices" : [
"",
"",
""
],
"correct" : "",
"explanation" : "",
},
{
"question" : "12: ",
"image" : "",
"choices" : [
"",
"",
""
],
"correct" : "",
"explanation" : "",
}
]
}
];
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\": Un conseil: le jour de l'exposé, reste couché et invente un truc, que t'était à Tombouctou avec des tchétchènes aux trousses, que t'étudiais la métropole en Amazonie sur une pirogue en plastique du Burundi, en tout cas rencarde toi ou bouge de région ou tu vas pas comprendre ce qu'il va t'arriver !");
}
else if(result < 50){
$("#explanation").text("Peut mieux faire. Tu as obtenu le niveau \"FAIBLARD\": T'as intérêt de réviser un peu sinon ça va charcller, tu vas te prendre un gros vent! Le Grand Paris c'est pas vraiment ta tasse de thé on dirait !!");
}
else if(result < 90){
$("#explanation").text("Bravo !! Tu as obtenu le niveau \"TOP\": Franchement c'est déjà assez balaise comme score! T'es déjà un vrai grand parisien (on blague, c'est pas une insulte)! Les doigts dans le nez tu vas le passer l'exposé! Attention aux questions pièges du professeur Barban!");
}
else if(result == 100){
$("#explanation").text("Félicitation !!! Tu as obtenu le niveau \"CRAQUE\": C'est bon tu peux faire le malin devant les copains, le Grand Paris n'a pas de secret pour toi tu risques même d'impressionner le professeur Barban! Mais où est-ce que t'as appris tout ça? Sur metropop.org?</a>");
}
$(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(' ').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();
});
/***********************************************************/
/* Quizz Frame */
/***********************************************************/
#frame {
max-width:100% !important;
max-height:100% !important;
width:auto;
height: auto;
background: url(/Fond-bleu.png);
border-radius: 30px;
margin-top:5%;
padding-bottom:10px;
}
h1 {
font-family:'londontwo';
text-align:center;
padding-top:30px;
width:auto;
color: #ffbe92;
margin-top:-50px;
}
#question {
font-family:'londonbetween';
font-size:14pt;
padding:0;
width:auto;
max-width:500px;
text-align:center;
line-height:18pt;
margin:auto;
color: #fff;
opacity:1.4;
}
#reload{
float:right;
margin-right:20px;
margin-top:27px;
}
img.question-image {
display:block;
max-width:600px;
max-height:340px;
margin:10px auto;
border-radius: 10px;
opacity:1.2;
width:auto;
height:auto;
}
#choice-block {
display:block;
list-style:none;
width:auto;
margin:0;
padding:0;
margin-top: -2%;
margin-left: -3.5%;
color: #000;
font-family:'londonmm';
}
#submitbutton {
float:right;
margin-top:-60px;
margin-right:10px;
font-family:'londontwo';
}
#submitbutton:hover {
color:#fff;
}
#explanation {
font-size:1.2em;
margin:0px auto;
padding:20px;
width:75%;
color:#fff;
font-family:'londonmm';
}
.choice-box {
max-width:500px;
width:auto;
height:auto;
display:block;
text-align:center;
font-size:1.2em;
background:#f6f5fb;
font-family:'londonmm';
margin:10px auto;
margin-left:auto;
margin-right:auto;
opacity:0.7;
padding:10px 0;
cursor:pointer;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 30px;
}
@media (min-width:480px) {
#frame {
padding:10px 10px 10px 10px;
}
#question {
font-family:'londonbetween';
font-size:14pt;
padding:0;
width:auto;
max-width:500px;
text-align:center;
line-height:18pt;
margin:auto;
color: #fff;
opacity:1.4;
}
img.question-image {
max-width:100%;
max-height:100%;
width:auto;
height:auto;
}
#choice-block {
width:auto;
padding:5px 5px 5px 5px;
}
#submitbutton {
margin-top:-20px;
}
#explanation {
font-size:1.2em;
margin:0px auto;
padding:10px;
width:100%;
}
}
@media (max-width:480px) {
#frame {
padding:10px 10px 10px 10px;
}
#question {
font-family:'londonbetween';
font-size:14pt;
padding:0;
width:auto;
max-width:500px;
text-align:center;
line-height:18pt;
margin:auto;
color: #fff;
opacity:1.4;
}
img.question-image {
max-width:100%;
max-height:100%;
width:auto;
height:auto;
}
#choice-block {
width:auto;
padding:5px 5px 5px 5px;
}
#submitbutton {
margin-top:-20px;
}
#explanation {
font-size:1.2em;
margin:0px auto;
padding:10px;
width:100%;
}
}
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<div class="global">
<div id = "frame"
role = "content" >
<div class="bar"></div>
<a id="reload" href="javascript:window.location.reload();">
<i class="fa fa-refresh fa-2x"></i>
</a>
</div>
</div>
</html>
答案 0 :(得分：1)
调用第二个数组的最佳方法是使用
$.each(niveaux.questions, function(index, question){
//You will get your question one by one here
//Rendering logic needs to be written here
});
通过这个，你将逐一得到所有问题。