Here is my problem. I want to create a questionnaire.
这是我的问题。我想创建一份调查问卷。
How are you? A)Button "Good" B)Button "Bad"
你好吗? A)按钮“好”B)按钮“坏”
i.e. user click button B.)
即用户点击按钮B.)
Alert Window is shown and notifying user about his/her last choice. New Question and Buttons appear on the same page. Essentially, users will go through the set of questions on the same page.
显示警报窗口并通知用户他/她的最后选择。新问题和按钮出现在同一页面上。从本质上讲,用户将在同一页面上查看这组问题。
Why are you Bad? A)Button "Some Txt" B.)Button "Some Txt"
你为什么不好? A)按钮“Some Txt”B。)按钮“Some Txt”
How can I show new question and new buttons on the same page. The concept should follow some kind of decision tree logic.
如何在同一页面上显示新问题和新按钮。该概念应遵循某种决策树逻辑。
Solutions, advises or "where-to-check hints" appreciated. Please, help me!
解决方案,建议或“在哪里检查提示”赞赏。请帮我!
<!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>
4 个解决方案
#1
0
You might want to explore JQuery a bit.
您可能想稍微探索一下JQuery。
Particularly something around the .click() API https://api.jquery.com/click/
特别是围绕.click()API的东西https://api.jquery.com/click/
Are you intending to do this just on the client side? I would recommend doing this through a client/server model thou e.g. Angular(Client) -> NodeJS(Server)
你打算在客户端这样做吗?我建议通过客户端/服务器模型这样做,例如Angular(客户端) - > NodeJS(服务器)
That is, having the question generation logic in node and let the client consume the questions however it is not impossible to do everything on the client.
也就是说,在节点中使用问题生成逻辑并让客户端使用问题,但是在客户端上执行所有操作并非不可能。
So you code will be something like
所以你的代码就像是
<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>
#2
0
You will need to use some javascript to hide/show your different steps. With JQuery for example you can do something like that:
您将需要使用一些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>
Don't forget to add the JQuery library to make it work. The function can also be replaced by .click from JQuery.
不要忘记添加JQuery库以使其工作。该函数也可以用来自JQuery的.click替换。
I hope this will help.
我希望这将有所帮助。
#3
0
WORKING CODE FOR YOU . I have added 2 level question only ... you can add more questions.
为你工作的代码。我只添加了2级问题...你可以添加更多问题。
点击查看工作演示
<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>
点击查看工作演示
I have done question changes for both button of question 1 only... rest you can add . Include the jquery file
我已经对问题1的两个按钮进行了问题更改...其余的你可以添加。包括jquery文件
#4
0
In my solution buttons' texts are changed. A decision tree of object is followed.
在我的解决方案按钮的文本被更改。遵循对象的决策树。
<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>
#1
0
You might want to explore JQuery a bit.
您可能想稍微探索一下JQuery。
Particularly something around the .click() API https://api.jquery.com/click/
特别是围绕.click()API的东西https://api.jquery.com/click/
Are you intending to do this just on the client side? I would recommend doing this through a client/server model thou e.g. Angular(Client) -> NodeJS(Server)
你打算在客户端这样做吗?我建议通过客户端/服务器模型这样做,例如Angular(客户端) - > NodeJS(服务器)
That is, having the question generation logic in node and let the client consume the questions however it is not impossible to do everything on the client.
也就是说,在节点中使用问题生成逻辑并让客户端使用问题,但是在客户端上执行所有操作并非不可能。
So you code will be something like
所以你的代码就像是
<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>
#2
0
You will need to use some javascript to hide/show your different steps. With JQuery for example you can do something like that:
您将需要使用一些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>
Don't forget to add the JQuery library to make it work. The function can also be replaced by .click from JQuery.
不要忘记添加JQuery库以使其工作。该函数也可以用来自JQuery的.click替换。
I hope this will help.
我希望这将有所帮助。
#3
0
WORKING CODE FOR YOU . I have added 2 level question only ... you can add more questions.
为你工作的代码。我只添加了2级问题...你可以添加更多问题。
点击查看工作演示
<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>
点击查看工作演示
I have done question changes for both button of question 1 only... rest you can add . Include the jquery file
我已经对问题1的两个按钮进行了问题更改...其余的你可以添加。包括jquery文件
#4
0
In my solution buttons' texts are changed. A decision tree of object is followed.
在我的解决方案按钮的文本被更改。遵循对象的决策树。
<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>