JavaScriptを使用した動的調査

JavaScriptを使用して動的サーベイウェブページを作成したいとします。
私は表示タイプが "none"に設定されている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

？フレームワークを使用して測量を動的に作成することができます。 – cosmoonot

私は自分自身で動的なjavascriptを作成する方法を知りたいが、私はjavascriptに慣れていない静かな原因を開始する方法がわからない。 – Ottospara

チャンスは誰もあなたのためにコード化することはありません。特定の問題が発生したときには、自分でコードを作成し、ここに来る必要があります（何かが期待通りに機能せず、その理由を理解できません）。 –

あなたがこれを行うことができます方法のトンがあります。すばやくアプローチするには、ユーザーを次にどこに連れて行くかを示すボタンに情報を入力することです。ここでは、表示する次のパネルのidと一致する各ボタンにdata-nextの値を追加しました。また、CSSのクラスを表示/非表示に切り替えることもできます。 https://surveyjs.io/使用しないのはなぜ

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

ありがとう私は知っている多くの方法がありますが、私はデータのようなそのようなプロパティを追加することができないことを理解できませんでした。 CSSクラスを追加して、表示されたHTMLを操作することができます。これはstyle.display属性を設定することで行いました。 – Ottospara

@オットパラ問題ありません。その場合、私はJavaScriptの初心者のチュートリアルを取ることをお勧めします。オンラインでは無料のものがたくさんあります。スタックオーバーフローbtwへようこそ。 –

JavaScriptを使用した動的調査

答えて

関連する問題