使用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進行動態調查

回答

相關問題