使用Javascript进行动态调查

我想用JavaScript创建一个动态的survery网页。
我有10个问题，显示类型设置为“无”期望的第一个/实际问题displaytype是“块”。每个问题都是一个肯定的问题。用户选择查看下一个问题的答案是相关的。
我知道如何建立这个静态，但我想为这个问题提供一个动态的解决方案。
任何人都可以帮忙吗？
这里是我的问题的模式使用Javascript进行动态调查

示例代码：

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>10 Questions</title> 
 
    <script> 
 
    ... 
 
    </script> 
 
</head> 
 
<body> 
 
    <header>A Dynamic Questionaire.</header> 
 
    <section> 
 
     <article> 
 
     <hgroup> 
 
      <h1>Questionaire</h1> 
 
      <h2>Anwer the questions in order as they appear.</h2> 
 
     </hgroup> 
 
     <div id="Question1" style="display:block;"> 
 
      1. 
 
      <button type="button" id="btnYes1">Yes</button> 
 
      <button type="button" id="btnNo1">No</button> 
 
     </div> 
 
     <div id="Question2" style="display:none;"> 
 
      2. 
 
      <button type="button" id="btnYes2">Yes</button> 
 
      <button type="button" id="btnNo2">No</button> 
 
     </div> 
 
     <div id="Question3" style="display:none;"> 
 
      3. 
 
      <button type="button" id="btnYes3">Yes</button> 
 
      <button type="button" id="btnNo3">No</button> 
 
     </div> 
 
     <div id="Question4" style="display:none;"> 
 
      4. 
 
      <button type="button" id="btnYes4">Yes</button> 
 
      <button type="button" id="btnNo4">No</button> 
 
     </div> 
 
     <div id="Question5" style="display:none;"> 
 
      5. 
 
      <button type="button" id="btnYes5">Yes</button> 
 
      <button type="button" id="btnNo5">No</button> 
 
     </div> 
 
     <div id="Question5" style="display:none;"> 
 
      6. 
 
      <button type="button" id="btnYes6">Yes</button> 
 
      <button type="button" id="btnNo6">No</button> 
 
     </div> 
 
     <div id="Question5" style="display:none;"> 
 
      7. 
 
      <button type="button" id="btnYes7">Yes</button> 
 
      <button type="button" id="btnNo7">No</button> 
 
     </div> 
 
     <div id="Question5" style="display:none;"> 
 
      8. 
 
      <button type="button" id="btnYes8">Yes</button> 
 
      <button type="button" id="btnNo8">No</button> 
 
     </div> 
 
     <div id="Question5" style="display:none;"> 
 
      9. 
 
      <button type="button" id="btnYes9">Yes</button> 
 
      <button type="button" id="btnNo9">No</button> 
 
     </div> 
 
     <div id="Question5" style="display:none;"> 
 
      10. 
 
      <button type="button" id="btnYes10">Yes</button> 
 
      <button type="button" id="btnNo10">No</button> 
 
     </div> 
 
     </article> 
 
    </section> 
 
    </body> 
 
</html>

来源

2017-04-08 Ottospara

为什么不使用https://surveyjs.io/？您可以使用框架动态构建您的调查。 – cosmoonot

我想知道如何通过我自己创建动态javascript，但我不知道如何开始，因为我对JavaScript并不熟悉。 – Ottospara

这里没有人会为你编码。你应该自己编写代码并在你遇到特定问题时来到这里（某些事情不像你期望的那样工作，你不知道为什么）。 –

有一吨的你能做到这一点的方式。快速的方法是在按钮中放入一些信息，指明下一位接下来的用户。所以在这里，我在每个按钮上添加了一个data-next值，该值与要显示的下一个面板的id相匹配，并且我在CSS中切换一个类以显示/隐藏面板。

var buttons = document.getElementsByTagName('button'), 
 
    questions = document.getElementsByTagName('div'); 
 
for (var i = 0; i < buttons.length; i++) { 
 
    var button = buttons[i]; 
 
    button.addEventListener('click', function() { 
 
    var target = this.getAttribute('data-next'); 
 
    for (var j = 0; j < questions.length; j++) { 
 
     var question = questions[j]; 
 
     if (question.id == target) { 
 
     question.classList.add('show'); 
 
     } else if (question.classList.contains('show')) { 
 
     question.classList.remove('show'); 
 
     } 
 
    } 
 
    }); 
 
}

div { 
 
    display: none; 
 
} 
 
.show { 
 
    display: block; 
 
}

<div id="Question1" class="show"> 
 
    1. 
 
    <button type="button" data-next="Question2">Yes</button> 
 
    <button type="button" data-next="Question3">No</button> 
 

 
</div> 
 
<div id="Question2"> 
 
    2. 
 
    <button type="button" data-next="Question4">Yes</button> 
 
    <button type="button" data-next="Question5">No</button> 
 
</div> 
 
<div id="Question3"> 
 
    3. 
 
    <button type="button" data-next="Question6">Yes</button> 
 
    <button type="button" data-next="Question6">No</button> 
 
</div> 
 
<div id="Question4"> 
 
    4. 
 
    <button type="button" data-next="Question10">Yes</button> 
 
    <button type="button" data-next="Question10">No</button> 
 
</div> 
 
<div id="Question5"> 
 
    5. 
 
    <button type="button" data-next="Question10">Yes</button> 
 
    <button type="button" data-next="Question10">No</button> 
 
</div> 
 
<div id="Question6"> 
 
    6. 
 
    <button type="button" data-next="Question7">Yes</button> 
 
    <button type="button" data-next="Question8">No</button> 
 
</div> 
 
<div id="Question7"> 
 
    7. 
 
    <button type="button" data-next="Question9">Yes</button> 
 
    <button type="button" data-next="Question9">No</button> 
 
</div> 
 
<div id="Question8"> 
 
    8. 
 
    <button type="button" data-next="Question9">Yes</button> 
 
    <button type="button" data-next="Question9">No</button> 
 
</div> 
 
<div id="Question9"> 
 
    9. 
 
    <button type="button" data-next="Question10">Yes</button> 
 
    <button type="button" data-next="Question10">No</button> 
 
</div> 
 
<div id="Question10"> 
 
    10. 
 
</div>

来源

2017-04-08 19:14:57

谢谢我知道有很多方法，但无法弄清楚我可以添加像data这样的属性 - 接下来。并且可以通过添加的CSS类操作显示的HTML - 我通过设置style.display Attribute来完成此操作。 – Ottospara

@Ottospara没问题。在这种情况下，我会建议在JavaScript上采用一些初学者教程。网上有很多免费的。欢迎来到Stack Overflow btw。 –

使用Javascript进行动态调查

回答

相关问题