I'm trying to develop a "game". You have different paths you can follow, like a storyline where you can decide the next step and I've created a Json like you can see below.
Now, the user receives a question and two options and the answer will influence the next question and answers. Like a tree structure.
I can't understand how I can travel to a Json childrens like this. I have this so far:
{
"label": null,
"question": "Vamos começar a noite??",
"children": [
{
"label": "Sim",
"question": "Jantamos onde?",
"children": [
{
"label": "Casa",
"question": "Qual?",
"children": [
{
"label": "Minha",
"question": null,
"children": null
},
{
"label": "Tua",
"question": null,
"children": null
}
]
},
{
"label": "Restaurante",
"question": "Qual?",
"children": [
{
"label": "Temudus",
"question": null,
"children": null
},
{
"label": "Pancinhas",
"question": null,
"children": null
}
]
}
]
},
{
"label": "Não",
"question": "Tens a certeza?",
"children": [
{
"label": "Sim",
"question": "Vais para casa?",
"children": [
{
"label": "Em princípio sim",
"question": null,
"children": null
},
{
"label": "Talvez não",
"question": null,
"children": null
}
]
},
{
"label": "Não",
"question": "Vamos à praça?",
"children": [
{
"label": "Siga",
"question": null,
"children": null
},
{
"label": "Nem pensar",
"question": null,
"children": null
}
]
}
]
}
]
}
$(document).ready(function() {
$.ajax({
dataType: "json",
url: "..." ,
}).done(function ( data ) {
console.log(data);
//these are the first question and answers. And this works!!
$('#titulo').html(data.question);
$('#0').html(data.children[0].label);
$('#1').html(data.children[1].label);
//when the user clicks on one of the options
$('.all_options').bind('click', function () {
var op = event.target.id;
console.log(op);
if(op == '0'){
}else{
}
});
});
});
Thanks