クイズの質問をオブジェクトの配列に格納する

JavaScriptで小さなクイズプログラムを作成しようとしています。すべての質問は配列に含まれ、各質問は、質問自体、選択して回答するための選択肢を含むオブジェクトです。クイズはすべての質問配列をループし、ユーザーが選択できる質問とオプションを表示します。私は選択肢がラジオボタンになりたい。ラジオボタンに質問の選択肢のテキストを入力する方法を理解するのには苦労しています。どのようにすればいいのですか？クイズの質問をオブジェクトの配列に格納する

 var userChoices = document.getElementsByTagName('input[type:radio]'); 
 
     var questions = 
 
     [ 
 
     { 
 
      question: "What is the capital of United Kingdom?", 
 
      choices: ["Manchester", "Birmingham", "London", "Birmingham"], 
 
      answer: 2 
 
     }, 
 
     
 
     { 
 
      question: "What is the capital of United States?", 
 
      choices: ["California", "New York", "Miami", "Florida"], 
 
      answer: 1 
 
     } 
 
     
 
     
 
     ]; 
 
     
 
     for (var i = 0; i < questions.length; i++) { 
 
     var question = questions[i].question; 
 
     document.write (question); 
 
     var options = questions[i].choices; 
 
     for (var opt in options) { 
 
      for (var radios in userChoices) { 
 
      userChoices[radios].value = options[opt]; 
 
       
 
      } 
 
     } 
 
     
 
     }

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body> 
 
    
 
    <input type="radio" name="choices"><br> 
 
    <input type="radio" name="choices"><br> 
 
    <input type="radio" name="choices"><br> 
 
    <input type="radio" name="choices"><br> 
 
    
 
    </body> 
 
</html>

出典

2016-05-16 knight

はあなたがAngular.jsのことを聞いたことがありますか？私はそれがあなたを助けるだろうと思う – yossico

@yossico：あなたは「角度」がこれには大きすぎるとは思わない？ –

JSFiddleのサンプルを提供してもらえますか？ –

あなたは、以下のようなあなたのJSコードを簡素化することができます。

 var questions = 
 
     [ 
 
     { 
 
      question: "What is the capital of United Kingdom?", 
 
      choices: ["Manchester", "Birmingham", "London", "Birmingham"], 
 
      answer: 2 
 
     }, 
 
     
 
     { 
 
      question: "What is the capital of United States?", 
 
      choices: ["California", "New York", "Miami", "Florida"], 
 
      answer: 1 
 
     } 
 
     
 
     
 
     ]; 
 
     
 
     for (var i = 0; i < questions.length; i++) { 
 
     var question = questions[i].question; 
 
     document.write (question); 
 
     var options = questions[i].choices; 
 
     document.body.appendChild(document.createElement("br")); 
 
     var name = "radio"+i; 
 
     for (var opt in options) { 
 
     
 
      var radioEle = document.createElement("input"); 
 
      radioEle.type = "radio";   
 
      radioEle.value = options[opt]; 
 
      radioEle.name = name; 
 
      document.body.appendChild(radioEle); 
 
      var label = document.createElement("Label"); 
 
      label.innerHTML = options[opt]; 
 
      document.body.appendChild(label); 
 
      document.body.appendChild(document.createElement("br")); 
 
     } 
 
     
 
     document.body.appendChild(document.createElement("br")); 
 
     
 
     }

出典

2016-05-16 11:06:07

あなたは、私はそれを提供しますより詳細な説明が必要な場合。

<script> 

    window.onload = function() { 

     var questions = 
     [ 
     { 
      question: "What is the capital of United Kingdom?", 
      choices: ["Manchester", "Birmingham", "London", "Birmingham"], 
      answer: 2 
     }, 

     { 
      question: "What is the capital of United States?", 
      choices: ["California", "New York", "Miami", "Florida"], 
      answer: 1 
     } 


     ]; 

     var container = document.getElementById('container'); 
     for (var i = 0; i < questions.length; i++) { 
      var questionContainer = document.createElement('DIV'); 
      questionContainer.textContent = questions[i].question; 

      var options = questions[i].choices; 
      for (var opt in options) { 
       //create radiobutton 
       //append radiobutton to a div 
      } 
      container.appendChild(questionContainer); 
     } 
    }; 
</script>

出典

2016-05-16 10:55:09

あなたのソリューションは私にはかなり理解できます。私の主な問題は、radiobutton.value = choices [i]のような選択肢のラジオボタンを設定しようとするときです。それは動作しません。ラジオボタンに選択肢のテキストを追加するにはどうすればいいですか？ありがとう – knight

ラジオボタンには値属性がありますが、テキスト属性はありません。ラジオボタンの横にあるテキストをスパンまたはその次に追加します。 –

なぜ私はradio.value = options [i]を使用しているのですか。何らかの理由で動作していません。 – knight

クイズの質問をオブジェクトの配列に格納する

答えて

関連する問題