Q:

Implement test with a tree structure using JavaScript on a web page

I need a web page with a test for users where depending on each answer they will get certain next question. My web app is on Flask so I could use some kind of routing to different html temlpates. But instead I want to use javascript and change only a piece of html code with a question and answers. Can I use an object like this?: 
var test = {
    "QUESTION_1": {
        "answer_1.1": {
            "answer_1.1_text": "text1.1",
            "QUESTION_1.1": {
                "answer_1.1.1": {
                    "answer_1.1.1_text": "text1.1",
                    "QUESTION_1.1.1": {"..."}
                }
                "answer_1.1.2": {
                    "answer_1.1.2_text": "text1.1.2",
                    "QUESTION_1.1.2": {"..."}
                }
                "answer_1.1.3": {
                    "answer_1.1.3_text": "text1.1.3",
                    "QUESTION_1.1.3": {"..."}
                }                
            }
        }
        "answer_1.2": {
            "answer_1.2_text": "text1.2",
            "QUESTION_1.2": {
                "answer_1.2.1": {
                    "answer_1.2.1_text": "text1.2.1",
                    "QUESTION_1.2.2.1": {"..."}
                }
                "answer_1.2.2": {
                    "answer_1.2.2_text": "text1.2.2",
                    "QUESTION_1.2.2.2": {"..."}
                }
                "answer_1.2.3": {
                    "answer_1.2.3_text": "text1.2.3",
                    "QUESTION_1.2.2.3": {"..."}
                } 
            }
        }
        "answer_1.3": {
            "answer_1.3_text": "text1.3",
            "QUESTION_1.3": {
                "answer_1.3.1": {
                    "answer_1.3.1_text": "text1.3.1",
                    "QUESTION_1.3.1.1": {"..."}
                }
                "answer_1.3.2": {
                    "answer_1.3.2_text": "text1.3.2",
                    "QUESTION_.1.3.2.2": {"..."}
                }
                "answer_1.3.3": {
                    "answer_1.3.3_text": "text1.3.3",
                    "QUESTION_1.3.3.1": {"..."}
                } 
            }
        }
    }
}

So with every answer the user would dive into a new question. 
And how to implement this? Below just a sample of html for one question but this is not dynamic.
<div class="form-check col">
        <label for="q1">Question1</label>
        <p><label class="form-check-label">
                <input class="form-check-input" type="radio" value="answer_1">
                answer_1
        </label></p>
        <p><label class="form-check-label">
                <input class="form-check-input" type="radio" value="answer_2">
                answer_2
        </label></p>
        <p><label class="form-check-label">
                <input class="form-check-input" type="radio" value="answer_3">
                answer_3
        </label></p>

</div>

A:

So you want to have a dynamic form that asks follow up questions based on answers to other questions? Like a question found on many employment forms:
Have you ever been convicted of a crime?
[X] Yes
[ ] No

If yes, please explain:
Well, it happened a long time ago in a galaxy far, far away...

Where the If yes... follow up question only appears when the previous question is answered yes and is hidden if answered no.
I think there probably should be tools to allow you to do this, but to accomplish this yourself, you will need to do 3 things:

Hook into all the appropriate areas of the form so your code executes when the form answers change.
Compare the state of the answers in the form to whatever criteria you have (and however you've stored that criteria) and determine what aspects of the form now should be shown/hidden.
Show/Hide the appropriate sections of the form. This could be done through css display:none; styling or through actually injecting/deleting dom elements.

Do some research into each of those steps and decide what methods you would prefer to use to accomplish your goals. Best of Luck!

