Question

我需要一个网页，其中包含针对用户的测试，根据每个答案他们将确定下一个问题。我的网络应用程序在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>

Answer 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...跟进问题仅在上一个问题的答案是肯定时显示，如果答案否则隐藏。

我认为可能应该有工具允许你这样做，但要自己完成这项工作，你需要做三件事：

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

对每个步骤进行一些研究，并确定您希望使用哪些方法来实现目标。运气最好！

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

1 个答案: