Speichern von Quizfragen in Array von Objekten

Ich versuche, ein kleines Quiz-Programm in JavaScript zu erstellen. Alle Fragen sind in einem Array enthalten, und jede Frage ist ein Objekt, das die Frage selbst enthält, Auswahlmöglichkeiten für den Benutzer zur Auswahl und Antwort. Quiz führt eine Schleife durch das Array mit allen Fragen und druckt die Frage und die Optionen aus, aus denen der Benutzer auswählen kann. Ich möchte eine Auswahl an Radioknöpfen haben. Ich kämpfe, um herauszufinden, wie Radioknöpfe mit dem Fragewahltext bevölkert werden. Irgendeine Idee wie kann man das bitte machen?Speichern von Quizfragen in Array von Objekten

 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>

Quelle

2016-05-16 knight

Haben Sie schon gehört von Angularjs? Ich denke, es wird dir helfen – yossico

@yossico: Denkst du nicht, dass "Angular" zu groß dafür ist? –

Können Sie ein JSFiddle-Beispiel bereitstellen, damit ich Ihnen helfen kann? –

Sie können Ihre JS-Code wie unten vereinfachen:

 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")); 
 
     
 
     }

Quelle

2016-05-16 11:06:07

Wenn Sie mehr Erklärung muss ich es schaffen wird.

<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>

Quelle

2016-05-16 10:55:09

Ihre Lösung ist für mich ziemlich verständlich. Meine Hauptprobleme sind, wenn ich versuche, die Optionsfelder für solche Optionen zu füllen> radiobutton.value = Auswahl [i]; es funktioniert nicht. Kannst du bitte wie kann ich Auswahlmöglichkeiten Text Radio-Buttons hinzufügen. Danke – knight

Optionsfeld hat ein Wertattribut, aber kein Textattribut. Sie fügen Text neben dem Radiobutton in einem Bereich oder einfach als nächstes an. Erste Wahl –

Deshalb verwende ich radio.value = options [i]; aber es funktioniert nicht aus irgendeinem Grund. – knight

Speichern von Quizfragen in Array von Objekten

Antwort

Verwandte Themen