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

Question

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

例如：
1(问题：您想看一个正方形吗？
2(问题：您想看一个圆圈吗？
3(问题：您想要红色吗？
4(问题：您喜欢蓝色吗？
5(问题：您想要它橙色吗？
6(问题：您喜欢黄色吗？

用户将看到第一个问题，然后是"是"按钮和否按钮。如果他们单击"是"，则将向他们展示第三个问题，如果他们单击否，则将向他们展示第二个问题。第三个问题否导致第4Q。不到第二Q导致第五Q，等。最终图像是红色正方形，蓝色正方形，橙色圆圈，黄色圆圈和黑色正方形，并将根据他们在问题中移动的方式显示给用户。

我知道我可以通过对每个问题和一组按钮给出ID，并根据其他问题的答案来显示/隐藏按钮/问题集(然后根据回答的最后一个问题显示最终(，但是我'很好奇是否有一种更干净的方法，也许是某种形式，树木和状态分配？在我的真实版本中，有两个答案可能导致同一状态。

这是我幼稚实现的开始：

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