Skip to content
Advertisement

Create Quiz from Json tree structure

I am creating a quiz in JavaScript and jQuery. The json is having question and answers. The structure of json is like tree type structure. I have problem while accessing child nodes when user clicks on options. Here is the fiddle

https://jsfiddle.net/281knp60/5/

The json looks like

var json = 
        {
            "question": "What would you like to have today?",
            "answers": [
            {
                "name": "tea",
                "child":{
                    "question":"How would you like the tea ?",
                    "answers":[{
                        "name":"Cold",
                        "child":{
                            "question":"Cold",
                            "answers":[{
                                "name":"Mint"
                            },{
                                "name":"Lemon"
                            }]
                        }
                        
                    },{
                        "name":"Hot"
                    },{
                        "name":"Normal"
                    }]
                }
                
            },
            {
                "name": "coffie"
            },
            {
                "name": "cold Drink"
            }
            ]
        }

Here my code is:

 $(document).ready(function(){
       $("#question").html(json.question);
       for(var i=0; i<json.answers.length; i++){
           let html = '<div class="answers_css">'+json.answers[i]['name']+'</div>'
           $(".answers").append(html)
       }
       $('.answers').on('click', '.answers_css', function() {
         let clickedVal = $(this).html();
         console.log(json)
         let clickedObj = filterJson(clickedVal)['child'];
         console.log(clickedObj)
         $("#question").html(clickedObj.question);
         $(".answers").empty();
         for(var i=0; i<clickedObj.answers.length; i++){
           let html = '<div class="answers_css">'+clickedObj.answers[i]['name']+'</div>'
         
           $(".answers").append(html)
       }
       })
    })
    function filterJson(value){
        //console.log(json.answers)
        var filteredArr = json.answers.find(o => o.name === value);
        console.log(filteredArr)
        return filteredArr
    }

Advertisement

Answer

You are just handling condition for specific number of times, and thus once the number of questions are greater than the handled condition then your code throws error.

So, instead of handling all the questions by yourself, you can reassign the json once an answer is selected.

This is the updated JS code for your issue:

$(document).ready(function(){
    display();
})
    
function display() {
    $("#question").html(json.question);
    for(var i=0; i<json.answers.length; i++){
        let html = '<div class="answers_css">'+json.answers[i]['name']+'</div>'
        $(".answers").append(html)
    }   
}

function filterJson(value){
    //console.log(json.answers)
    var filteredArr = json.answers.find(o => o.name === value);
    return filteredArr
}
    
$('.answers').on('click', '.answers_css', function() {
    let clickedVal = $(this).html();
    let clickedObj = filterJson(clickedVal)['child'];
    json = clickedObj;
    $(".answers").empty();
    if (json && json.question && json.answers) display();
})
Advertisement