ランダム質問クイズに回答を追加するjavascript

Question

現在、質問と回答をランダム化するJavascriptでクイズを作成しています。ランダム化された質問がありますが、特定の質問に答えるために回答を追加するにはどうすればよいですか？また、私はそうのように、それぞれの答えは、独自のdivの中に置くことにしたい。ここではhttp://imgur.com/a/l9w9j

は、私が持っているコードは、これまでのところです：

var display = document.getElementById("questions"); 
var questions = ['What is the weather like?', 
       'What time of day is it?', 
       'Whats your favourite music?', 
       'Which season is your favourite?', 
       'What colour are your eyes?']; 

var questionTracker = []; 
var questionAmount = 1; 

// Iterate however many times 
for (var i = 0; i < questionAmount; i++) { 
    // Keep creating random numbers until the number is unique 
    do { 
    var randomQuestion = Math.floor(Math.random() * questions.length); 
    } while (existingQuestions()); 

    display.innerHTML += questions[randomQuestion] + '<br>'; 
    // Add the question to the tracker 
    questionTracker.push(randomQuestion); 
} 

// If the current random number already exists in the tracker, return true 
function existingQuestions() { 
    for (var i = 0; i < questionTracker.length; i++) { 
    if (questionTracker[i] === randomQuestion) { 
     return true; 
    } 
    } 
    return false; 
} 

そして、私のHTML：

<div id="questions"> 
</div> 

<div id="answers"> 
<div class="answers-left"> 
     <div class="answer1" tabIndex="1">Sunny</div> 
     <div class="answer2" tabIndex="2">Raining</div> 
    </div> 
    <div class="answers-right"> 
     <div class="answer3" tabIndex="3">Cloudy</div> 
     <div class="answer4" tabIndex="4">Windy</div> 
    </div> 

     <div class="clear"></div> 
    </div> 

Answer 1

彼女配列の代わりにオブジェクトを使うことができます

var questionData= { 
     "questions":[ 
      { 
      "question":"this is hard question to answer", 
      "answers":[ 
        "yes","no","why not","none" 
        ] 
      }, 
      { 
      "question":"this is 2nd hard question to answer", 
      "answers":[ 
        "yes","no","why not","none" 
        ] 
      } 
      ] 
    } 

questionData.map(function(question){ 
    //Here you can write the dom structure that you like 
}) 

Answer 2

あなたの質問と回答は、オブジェクト

各オブジェクトはquestionとanswersプロパティを保持します。 answersは、それぞれの可能な回答を含む配列です。

次のコードは、ランダムなインデックスを見つけるためにMath.random()を使用してランダムな質問をします。このインデックスを使用すると、配列内のオブジェクトを選択し、質問と回答を選択できます。

希望の効果を追加するためにCSSを追加しました。オブジェクト配列で質問を追加しないのはなぜこれが色/サイズ/余白を向上させることが可能/ ...あなたは

var questionElement = document.getElementById("questions"); 
 
var answersElements = document.getElementsByClassName("answer"); 
 
var data = [{ 
 
    question: 'What is the weather like?', 
 
    answers: ['Sunny', 'Raining', 'Cloudy', 'Windy'] 
 
}, { 
 
    question: 'What time of day is it?', 
 
    answers: ['Morning', 'Lunch', 'Evening', 'Night'] 
 
}]; 
 

 
var randomIndex = Math.floor(Math.random() * data.length); 
 

 
questionElement.innerHTML = data[randomIndex].question; 
 

 
for (let i = 0; i < answersElements.length; i++) { 
 
    answersElements[i].innerHTML = data[randomIndex].answers[i]; 
 
}

.answer { 
 
    display: inline-block; 
 
    background-color: #00BCD4; 
 
    margin: 1em; 
 
}

<div id="questions"> 
 
</div> 
 

 
<div id="answers"> 
 
    <div class="answers-left"> 
 
    <div class="answer" tabIndex="1">Sunny</div> 
 
    <div class="answer" tabIndex="2">Raining</div> 
 
    </div> 
 
    <div class="answers-right"> 
 
    <div class="answer" tabIndex="3">Cloudy</div> 
 
    <div class="answer" tabIndex="4">Windy</div> 
 
    </div> 
 

 
    <div class="clear"></div> 
 
</div>

Answer 3

をしたいですか？ここで

var display = document.getElementById("questions"); 
 
var answers = document.getElementById("answers"); 
 
var answersLeft = document.getElementById("answers-left"); 
 
var answersRight = document.getElementById("answers-right"); 
 

 
var questions = [{ 
 
    "q": "What is the weather like?", 
 
    "a": [ 
 
     "Sunny", 
 
     "Raining", 
 
     "Cloudy", 
 
     "Windy" 
 
    ] 
 
    }, 
 
    { 
 
    "q": "What time of day is it?", 
 
    "a": [ 
 
     "Sunny", 
 
     "Raining", 
 
     "Cloudy", 
 
     "Windy" 
 
    ] 
 
    }, 
 
    { 
 
    "q": "Whats your favourite music?", 
 
    "a": [ 
 
     "Sunny", 
 
     "Raining", 
 
     "Cloudy", 
 
     "Windy" 
 
    ] 
 
    }, 
 
    { 
 
    "q": "Which season is your favourite?", 
 
    "a": [ 
 
     "Sunny", 
 
     "Raining", 
 
     "Cloudy", 
 
     "Windy" 
 
    ] 
 
    }, 
 
    { 
 
    "q": "What colour are your eyes?", 
 
    "a": [ 
 
     "Sunny", 
 
     "Raining", 
 
     "Cloudy", 
 
     "Windy" 
 
    ] 
 
    } 
 
]; 
 

 
var questionTracker = []; 
 
var questionAmount = 1; 
 

 
// Iterate however many times 
 
for (var i = 0; i < questionAmount; i++) { 
 
    // Keep creating random numbers until the number is unique 
 
    do { 
 
    var randomQuestion = Math.floor(Math.random() * questions.length); 
 
    } while (existingQuestions()); 
 

 
    display.innerHTML += questions[randomQuestion].q + '<br>'; 
 
    var answersToQ = questions[randomQuestion].a; 
 

 
    for (var j = 0; j < answersToQ.length; j++) { 
 
    var answer = "<p>" + answersToQ[j] + "</p>"; 
 
    if (j % 2 === 0) { 
 
     answersLeft.innerHTML += answer; 
 
    } else { 
 
     answersRight.innerHTML += answer; 
 
    } 
 
    } 
 

 
    // Add the question to the tracker 
 
    questionTracker.push(randomQuestion); 
 
} 
 

 
// If the current random number already exists in the tracker, return true 
 
function existingQuestions() { 
 
    for (var i = 0; i < questionTracker.length; i++) { 
 
    if (questionTracker[i] === randomQuestion) { 
 
     return true; 
 
    } 
 
    } 
 
    return false; 
 
}

<style type="text/css"> 
 
    #answers-left { 
 
    position: relative; 
 
    float: left; 
 
    width: 50%; 
 
    } 
 
    
 
    #answers-right { 
 
    position: relative; 
 
    float: right; 
 
    width: 50%; 
 
    } 
 
    
 
    #answers p { 
 
    background-color: blue; 
 
    width: 50%; 
 
    text-align: center; 
 
    color: #fff; 
 
    cursor: pointer; 
 
    } 
 
</style> 
 

 
<div id="questions"> 
 
</div> 
 

 
<div id="answers"> 
 
    <div id="answers-left"> 
 
    </div> 
 
    <div id="answers-right"> 
 
    </div> 
 
</div>

Answer 4

私は、コードを次のようにあなたのために作られた一例です。 申し訳ありませんが、私はccsルールを作る時間がありませんでしたが、あなたは質問が混ざり合っていて、それらの答えがすべて混じっていることが分かります。 http://devel.vis25.com/test.php

私はたとえば、あなたがここでjQueryとjQueryのテンプレートに

が必要になります、このようなものを使用することをお勧めいたしますjQueryのへのリンクはここjquery tempaltes

をダウンロードしているyou'r tempaltesの一例であるとhtml 。

<html> 
<head> 
<script src="https://devel.vis25.com//Vendors/JqueryUI/external/jquery/jquery.js"></script> 
<script src="http://devel.vis25.com/Vendors/jquery.tmpl.min.js"></script> 
</head> 
<body onload="RenderQuestions();"> 
    <div id="Questions"></div> 
    <script id="Question-Tempalte" type="text/x-jQuery-tmpl"> 
     <div class="Question" id=question-"${ID}"> 
       <div class="Question-text">${QuestionText}</div> 
       <div class="Question-answer-container" id="Question-answer-container-${ID}"></div> 
     </div> 
    </script> 

    <script id="Answer-Tempalte" type="text/x-jQuery-tmpl"> 
     <div class="answer" id="answer-${ID}"> 
       <div class="answer-text" tabIndex="${ID}">${answerText}</div> 
     </div> 
    </script> 
</body> 
</html> 

javascriptでこれを行う。

//Function that is called in body 'onload' event. 
function RenderQuestions(){ 
    //Array of you'r questions as json objects 
    var questions = [ 
     { ID : '1', QuestionText : 'What is the weather like?' }, 
     { ID : '2', QuestionText : 'What time of day is it?' }, 
     { ID : '3', QuestionText : 'Whats your favourite music?' }, 
     { ID : '4', QuestionText : 'Which season is your favourite?' }, 
     { ID : '5', QuestionText : 'What colour are your eyes?' }, 
    ]; 
    //Call shuffle function for your questions, so they are mixed randomly. 
    var ShuffledQuestions = shuffle(questions); 

    //Loop true all of your questions and render them inside of your questions <div> 
    //Allso call functions 'RenderAnswers()' by question id value[ 'ID' ]. 
    $.each(ShuffledQuestions, function(index, value){ 
     $('#Question-Tempalte').tmpl(value).appendTo('#Questions'); 
     RenderAnswers(value[ 'ID' ]); 
    }); 
} 

//Shuffle function return randomly mixed array. 
function shuffle(array) { 
    var currentIndex = array.length, temporaryValue, randomIndex; 
    while (0 !== currentIndex) { 

    randomIndex = Math.floor(Math.random() * currentIndex); 
    currentIndex -= 1; 

    temporaryValue = array[currentIndex]; 
    array[currentIndex] = array[randomIndex]; 
    array[randomIndex] = temporaryValue; 
    } 

    return array; 
} 

//RenderAnswers function takes QuestionID as argument so we can render answer elements for right questions, and we have right answers. 
function RenderAnswers(QuestionID){ 
    var Answers = []; 

    //Check which question are we rendering. 

    //Answers for question ID 1 ('What is the weather like?'). 
    if(QuestionID == 1){ 
     Answers = [ 
      { AnswersID : 1 , answerText : 'Sunny' }, 
      { AnswersID : 2 , answerText : 'Raining'}, 
      { AnswersID : 3 , answerText : 'Cloudy'}, 
      { AnswersID : 4 , answerText : 'Windy'},     
     ]; 
    } 

    //Answers for question ID 2 ('What time of day is it?'). 
    if(QuestionID == 2){ 
     Answers = [ 
      { AnswersID : 1 , answerText : '8:00' }, 
      { AnswersID : 2 , answerText : '12:00'}, 
      { AnswersID : 3 , answerText : '18:00'}, 
      { AnswersID : 4 , answerText : '00:00'},      
     ]; 
    } 

    //Answers for question ID 3 ('Whats your favourite music?'). 
    if(QuestionID == 3){ 
     Answers = [ 
      { AnswersID : 1 , answerText : 'Rock' }, 
      { AnswersID : 2 , answerText : 'pop'}, 
      { AnswersID : 3 , answerText : 'rap'}, 
      { AnswersID : 4 , answerText : 'EDM'},     
     ]; 
    } 

    //Answers for question ID 4 ('Which season is your favourite?'). 
    if(QuestionID == 4){ 
     Answers = [ 
      { AnswersID : 1 , answerText : 'Summer' }, 
      { AnswersID : 2 , answerText : 'Winter'}, 
      { AnswersID : 3 , answerText : ''}, 
      { AnswersID : 4 , answerText : ''},     
     ]; 
    } 

     //Answers for question ID 5 ('What colour are your eyes?'). 
    if(QuestionID == 4){ 
     Answers = [ 
      { AnswersID : 1 , answerText : 'blue' }, 
      { AnswersID : 2 , answerText : 'brown'}, 
      { AnswersID : 3 , answerText : 'green'}, 
      { AnswersID : 4 , answerText : ''},     
     ]; 
    } 

    //Shuffle answers. 
    var ShuffledAnswers = shuffle(Answers); 

    //Renders answer elements for question. 
    $('#Answer-Tempalte').tmpl(ShuffledAnswers).appendTo('#Question-answer-container-'+QuestionID); 
} 

私はあなたを助けることができたホープは、と何でもお気軽に、私は右のあなたの質問を理解していなかったです！

敬具、 Vis25