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

问题描述 投票:-2回答:1

我需要一个网页,其中包含针对用户的测试,根据每个答案,他们将确定下一个问题。我的网络应用程序在Flask上,所以我可以使用某种路由到不同的html temlpates。但相反,我想使用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>
javascript web
1个回答
1
投票

那么你想要一个动态表单,根据其他问题的答案询问后续问题?就像许多就业形式上的问题一样:

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

If yes...跟进问题仅在上一个问题回答是的时出现,如果回答否则隐藏。

我认为可能应该有工具允许你这样做,但要自己完成这个,你需要做三件事:

  1. 挂钩表单的所有适当区域,以便在表单答案发生变化时执行代码。
  2. 将表单中的答案状态与您拥有的任何条件进行比较(然而您已经存储了该条件)并确定现在应该显示/隐藏表单的哪些方面。
  3. 显示/隐藏表单的相应部分。这可以通过css display:none;样式或通过实际注入/删除dom元素来完成。

对这些步骤进行一些研究,并确定您希望使用哪些方法来实现目标。祝你好运!

© www.soinside.com 2019 - 2024. All rights reserved.