爲隨機問題測驗添加答案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

你可以將你的問題和答案存儲在一個數組o bjects

每個對象都擁有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

這裏是例如找你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