Question

这是我的问题。我想创建一份调查问卷。

你好吗？ A）按钮＆＃34;好＆＃34; B）按钮＆＃34;坏＆＃34;

即。用户单击按钮B。）

显示警报窗口，并通知用户他/她的最后选择。新问题和按钮出现在同一页面上。基本上，用户将在同一页面上查看这组问题。

你为什么不好？ A）按钮＆＃34;一些Txt＆＃34; B.）按钮＆＃34;一些Txt＆＃34;

如何在同一页面上显示新问题和新按钮。这个概念应遵循某种决策树逻辑。

解决方案，建议或＆＃34;在何处检查提示＆＃34;赞赏。拜托，帮助我！

<!doctype html>
<html>

<head>
<meta charset="utf-8">
<title>Hello</title>

<script type="text/javascript">
    function buttonclickgood() {
        alert('you have clicked Good');
    }
</script>
<script type="text/javascript">
    function buttonclickbad() {
        alert('you have clicked Bad');
    }
</script>

</head>
<p>How are you?</p>
<input type="button" value="Good!" onclick="buttonclickgood()"/> 
<input type="button" value="Bad!" onclick="buttonclickbad()"/> 

<body>
</body>
</html>

Answer 1

您可能想稍微探索一下JQuery。

特别是围绕.click（）API的东西 https://api.jquery.com/click/

您打算只在客户端执行此操作吗？我建议您通过客户端/服务器模型执行此操作，例如Angular（客户端） - ＆gt;的NodeJS（服务器）

也就是说，在节点中生成问题生成逻辑并让客户端使用问题但是在客户端上执行所有操作并非不可能。

所以你的代码就像

<script src="../script/jquery-2.1.4.js"></script>
<script>
    $(document).ready(function() {
    <!-- maybe let say define your data (questions) here -->
    var data = 
      [ 
          {
             <!--example ... --> 
          }
      ] 
    $("#btn_1").click(function() {
          <!-- do some logic with the data above. Process it then print the new question by update your text -->
          $('#TxtArea').val(data); 
    });

</script>

Answer 2

您需要使用一些javascript来隐藏/显示您的不同步骤。以JQuery为例，您可以这样做：

    <script type="text/javascript">
        $(document).ready(function() {
            $(".step").hide();
            $(".step-1").show();
        });

        function buttonclick(nextStep)
        {
            $(".step").hide();
            $(".step-"+nextStep).show();
        }
    </script> 

    <div class="step step-1">
        <p> Question 1 </p>
        <input type="button" class="button" value="Good!" onclick="buttonclick(2)"/> 
        <input type="button" class="button" value="Bad!" onclick="buttonclick(2)"/> 
    </div>
    <div class="step step-2">
        <p> Question 2 </p>
        <input type="button" class="button" value="Good!" onclick="buttonclick(3)"/> 
        <input type="button" class="button" value="Bad!" onclick="buttonclick(3)"/> 
    </div>
    <div class="step step-3">
        <p> Question 3 </p>
        <input type="button" class="button" value="Good!" onclick="buttonclick(1)"/> 
        <input type="button" class="button" value="Bad!" onclick="buttonclick(1)"/> 
    </div>

不要忘记添加JQuery库以使其工作。该函数也可以用JQuery中的.click替换。

我希望这会有所帮助。

Answer 3

为您工作的代码。我只添加了2级问题...你可以添加更多问题。

Click for working demo

 <div id="first">
    <p id ="text">How are you?</p>
    </div>


    <input type="button" id="b1" value="Good!" /> 
    <input type="button" id="b2" value="Bad!"/> 

   <script>
    $("#b1").click(function(){

        if($("#b1").val()=="Good!")
        {
       $("#text").text("Good To hear that ! Do you want to spread a smile ?");
            $("#b1").val("Yes");
             $("#b2").val("No");
        }


    });


    $("#b2").click(function(){

        if($("#b2").val()=="Bad!")
        {
       $("#text").text("Ohh Sad ! Do you want my help ?");
            $("#b1").val("Yes");
             $("#b2").val("No");
        }


    }); </script>

Click for working demo

我已经对问题1的两个按钮进行了问题更改...其余的你可以添加。包括jquery文件

Answer 4

在我的解决方案按钮中，文本已更改。遵循对象的决策树。

<input type="button" id="left" value="good" onclick="buttonclick(this.value)"/> 
<input type="button" id="right" value="bad" onclick="buttonclick(this.value)"/> 
<script type="text/javascript">

decision_tree = {
    'bad': {
        'some A': 'done',
        ' some B' : 'done'
    },
    'good': {
        'yes': {
            'like':'done',
            'dont like':'done'
        }, 
        'no':'done'
    }
};

left = document.getElementById("left");
right = document.getElementById("right");
st = decision_tree;
function buttonclick(v) {
    alert('you have clicked ' + v);
    if(st[v] == 'done'){
        alert('you are done with questionnaire');
        left.style.visibility = 'hidden';
        right.style.visibility = 'hidden';
    } else{
        console.log(st[v]);
        left.setAttribute("value",Object.keys(st[v])[0]);
        right.setAttribute("value",Object.keys(st[v])[1]);
        st = st[v];
    }

}
 </script>

单击按钮后如何显示新按钮？

4 个答案: