javascript - 创建带有逻辑钩子(Hook)的动态测验的方法是什么？

Question

对于我正在开发的网站，我们希望采用一种在其他网站上运行良好的特定设计模式并进行复制。

Sample

我们追求的行为(在伪代码中)

Question 1
{
if yes go to Question2v1
if no go to question2v2
}
Question 2 version 1
{
if yes go to Question3
if no go to Message with try again button that loops to start
}
Question 2 version 2
{
yes message6
no message 7
}
Question 3
{
if yes go to Question4v1
if no go to question4v2
}
Question 4 version 1
{
if yes message2 with try again button
if no message3 with try again
}
Question 4 version 2
{
if yes message 4
if no message 5
}

但是，除了文本和响应发生变化的消息情况外，每个充当问题文本的内容都会被一个简短的动画所替换。

内容是静态的，因此不需要混淆或任何其他内容，因为问题的存在是让客户 self 评估哪个选项适合的快速方法。所有答案都是 bool 值，但具有取决于哪个答案的逻辑钩子(Hook)。

我之前见过一些动态测验，它们通过纯 javascript 或 jquery 插件 (slickquiz) 运行，但我不确定它们是否可以轻松执行此行为？

下面是一个非功能性的模型。这是两个重新设计的单选按钮，与 col-xs-6 类分开 信息:

样式代码(如果您愿意):

<div class="well-inverse well-lg" >
                <div class="text-center">
                    <h3>To help you decide which method applies to your company &ndash; answer the questions below</h3>
                    <hr>
                    <p>Question 1: Was the Company dissolved more than 6 years ago?</p>
                    <small style="font-variant:small-caps;">Placeholder: Real Content to come later </small>
                </div>
                <div class="col-sm-6">
                    <div class="funkyradio">
                        <div class="funkyradio-success">
                            <input type="radio" name="radio" id="radioY">
                            <label for="radioY">Yes</label>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="funkyradio">
                        <div class="funkyradio-danger">
                            <input type="radio" name="radio" id="radioN">
                            <label for="radioN">No</label>
                        </div>
                    </div>
                </div>
            </div>

Answer 1

我想我实际上已经自己解决了这个问题。

只是一组逻辑循环，用于检测是否元素的 ID。

选择按钮后，根据响应更改按钮的 ID。

所以会像

clicked yes first time
change question based on response
change id of yes/no to match this question
e.g from id="q1Yes" to "q2No"
continue loop until user hits an end of chain.
upon end of chain, restart loop if user presses "try again" button

我认为我的问题是我没有将问题分解成足够小的部分。