在网页上使用JavaScript实现树结构测试

我需要一个网页，为用户测试，根据每个答案，他们将得到一定的下一个问题。我的web应用程序在Flask上，因此我可以使用某种路由到不同的html终端。但是我想使用javascript，只修改一段带有问题和答案的html代码。我能用这样的物体吗

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": {"..."}
                } 
            }
        }
    }
}

因此，每一个答案，用户都会潜入一个新的问题。 如何实现这一点？下面只是一个问题的html示例，但这不是动态的

<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>

问题1

答复1


答复2


答复(三)

那么您想要一个动态表单，根据其他问题的答案提出后续问题？就像许多就业表格上的一个问题：

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...

其中，

如果是…

后续问题仅在前一个问题回答为是时出现，如果回答为否则隐藏

我认为可能应该有一些工具让您能够做到这一点，但要自己做到这一点，您需要做3件事：

钩住表单的所有适当区域，以便在表单应答更改时执行代码

将表单中答案的状态与您拥有的任何标准（以及存储该标准的方式）进行比较，并确定现在应显示/隐藏表单的哪些方面

显示/隐藏表单的相应部分。这可以通过css

display:none设置样式或通过实际注入/删除dom元素

---

对这些步骤中的每一步都做一些研究，并决定你更喜欢用什么方法来实现你的目标。祝你好运

感谢您的帮助，我将尝试对这些步骤进行研究，如果出现更多问题，我会回来