使用动态问题更改向用户显示的内容

Question

我想在网页中作为用户提出一系列问题，然后根据他们的回答为他们提供一个页面。但是，我不想将它们重定向到单独的表单/页面。

例如：
1）问题：你想看一个广场吗？
2）问题：你想看一个圆圈吗？
3)问：你想要红色吗？
4)问：你喜欢蓝色吗？
5)问：你想要橙色吗？
6)问：你喜欢黄色吗？

用户会看到第一个问题，然后是一个是按钮和一个否按钮。如果他们单击是，那么它将向他们显示第三个问题，如果他们单击否，那么它将向他们显示第二个问题。第 3 个问题的“否”导致第 4 个问题。第 2 个问题的“否”导致第 5 个问题，依此类推。 最终图像是红色方块、蓝色方块、橙色圆圈、黄色圆圈和黑色方块，并将根据用户通过问题的方式显示给用户。

我知道我可以通过为每个问题和一组按钮提供一个 ID 来做到这一点，并根据其他问题的答案使用 JS 显示/隐藏按钮/问题集（然后根据回答的最后一个问题显示最终结果），但我'我很好奇是否有更清洁的方法可以做到这一点，也许是某种形式、树和状态分配？在我的真实世界版本中，两个答案可能导致相同的状态。

这是我幼稚实现的开始：

<div id="b1">
<h5 id="q1">Question: Do you want to see a Square?</h5>
<button id="ay1">Yes</button><button id="an1">No</button>
</div>
<div class ="box" id="b2"><h5 id="q2">Question: Do you want to see a Circle?</h5>
<button id="ay2">Yes</button><button id="an2">No</button>
</div>
<div class ="box" id="b3"><h5 id="q3">Question: Do you want it Red?</h5>
<button id="ay3">Yes</button><button id="an3">No</button>
</div>

还有一个jsFiddle 的想法

Answer 1

var shape, colour;
$("#an1").click(function() {
    $("#b1").fadeOut();
    $("#b2").fadeIn();
});
$("#ay1").click(function() {
    $("#b1").fadeOut();
    $("#b3").fadeIn();
    shape="Square";
});
$("#ay2").click(function() {
    $("#b2").fadeOut();
    $("#b3").fadeIn();
    shape="Circle";
});
$("#an2").click(function() {
    $("#b2").fadeOut();
    $("#b1").fadeIn();
});
$("#ay3").click(function() {
    $("#b3").hide();
    colour="red";
    show();
});
$("#an3").click(function() {
    $("#b3").fadeOut();
    $("#b4").fadeIn();
});
$("#ay4").click(function() {
    $("#b4").hide();
    colour="blue";
    show();
});
$("#an4").click(function() {
    $("#b4").fadeOut();
    $("#b5").fadeIn();
});
$("#ay5").click(function() {
    $("#b5").hide();
    colour="orange";
    show();
});
$("#an5").click(function() {
    $("#b5").fadeOut();
    $("#b6").fadeIn();
});
$("#ay6").click(function() {
    $("#b6").hide();
    colour="black";
    show();
});
$("#an6").click(function() {
    $("#b6").fadeOut();
    $("#b3").fadeIn();
});
function show() {
    var div="<div id='myShape' class='" + shape + "' style='background: " + colour + "'></div>";
    document.body.innerHTML+=(div);
}

.box {
position: absolute;
}
#myShape {
    width: 100px;
    height: 100px;
    background: beige;
}
.Circle {
    border-radius: 50%;
}
.Red {
    background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class ="box" id="b1"><h5 id="q1">Question: Do you want to see a Square?</h5>
<button id="ay1">Yes</button><button id="an1">No</button>
</div>
<div class ="box" id="b2" hidden><h5 id="q2">Question: Do you want to see a Circle?</h5>
<button id="ay2">Yes</button><button id="an2">No</button>
</div>
<div class ="box" id="b3" hidden><h5 id="q3">Question: Do you want it Red?</h5>
<button id="ay3">Yes</button><button id="an3">No</button>
</div>
<div class ="box" id="b4" hidden><h5 id="q4">Question: Do you want it Blue?</h5>
<button id="ay4">Yes</button><button id="an4">No</button>
</div>
<div class ="box" id="b5" hidden><h5 id="q5">Question: Do you want it Orange?</h5>
<button id="ay5">Yes</button><button id="an5">No</button>
</div>
<div class ="box" id="b6" hidden><h5 id="q6">Question: Do you want it Black?</h5>
<button id="ay6">Yes</button><button id="an6">No</button>
</div>