2017-02-23 30 views
2

Я верю, что у меня есть рабочие функции javascript, которые должны генерировать список вопросов и вариантов на одной странице, но не запускаться и ошибок на консоли хром не будет.javascript не будет генерировать из массива

-На момент у меня есть две функции, функции createQuestions & createChoices -I есть некоторые дополнительные переменные в верхней части для более поздних стадиях, но сейчас я просто хочу, чтобы отобразить вопросы и ответы.

//end screen counters 
 
var incorrectCounter = 0; 
 
var correctCounter = 0; 
 
var notAnsweredCounter = 0; 
 
var quiz = $('#quiz'); 
 
var index = 0; 
 

 
//empty array to push each selected answer to 
 
var userGuess = []; 
 
var answerKey = ["html", "css", "jquery", "none of the above"]; 
 

 

 

 
//function that runs the questions and possible choices at start up 
 
$(window).ready(function startUp() { 
 

 
    //all questions and choices are in a large array 
 
    var questionArray = [{ 
 
    questions: "what did we learn in week 1?", 
 
    //smaller array within the large array for each possible answer for each question 
 
    choices: ["html", "css", "jquery", "javascript", "none of the above"] 
 
    }, { 
 
    questions: "what did we learn in week 2?", 
 
    choices: ["html", "css", "jquery", "javascript", "none of the above"] 
 
    }, { 
 
    questions: "what did we learn in week 4?", 
 
    choices: ["html", "css", "jquery", "javascript", "none of the above"] 
 
    }, { 
 
    questions: "what did we learn in week 5?", 
 
    choices: ["html", "css", "jquery", "javascript", "none of the above"] 
 
    }]; 
 

 
    function createQuestions(index) { 
 
    var trivia = $('<div>', { 
 
     id: 'question' 
 
    }); 
 

 
    var header = $('<h2>Question ' + (index + 1) + ':</h2>'); 
 
    trivia.append(header); 
 

 
    var question = $('<p>').append(questions[index].question); 
 
    trivia.append(question); 
 

 
    var radioButtons = createChoices(index); 
 
    trivia.append(radioButtons); 
 

 
    return trivia; 
 
    index++; 
 

 
    } 
 

 
    function createChoices(index) { 
 
    var radioList = $("<ul>"); 
 
    var item; 
 
    var input = ""; 
 
    for (i = 0; i < questionArray[index].choices.length; i++) { 
 
     item = $('<li>'); 
 
     input = '<input type="radio" name="answer" value=' + i + ' />'; 
 
     input += question[index].choices[i]; 
 
     item.append(input); 
 
     radioList.append(item); 
 
    } 
 
    return radioList; 
 
    index++; 
 
    } 
 

 
    //End of the start up function 
 
});
<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>Trivia Game: Easy Ver.</title> 
 
    <link href="assets/images"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
    <link href="assets/css/style.css" rel="stylesheet" type="text/css"> 
 
    <!--Here is the jquery code --> 
 
    <script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script> 
 
</head> 
 

 
<body> 
 

 
    <!--Start of main container --> 
 
    <div id="maincontainer" class="container"> 
 
    <h1>Basic Trivia Game</h1> 
 

 
    <div> 
 
     Time Remaining: 
 
     <p id="timerDiv">00:00 Test</p> 
 
    </div> 
 

 
    <div class="container weekDiv"> 
 

 
     <p id="quiz">still a test?</p> 
 
    </div> 
 

 
    <div> 
 
     <button id="submit">Submit Answers test</button> 
 
    </div> 
 
    <br /> 
 

 
    <!--End of main container --> 
 
    </div> 
 

 
    <!--Test for adding a footer via javascript --> 
 
    <div id="footer"> 
 
    HTML test, will be replaced (footer) 
 
    </div> 
 

 

 
    <script src="assets/javascript/app.js" type="text/javascript"></script> 
 
</body> 
 

 
</html>

+0

Вы могли бы использовать библиотеку шаблонов вместо создания его вручную? например, усы. – giubueno

+0

prof никогда не говорил, что мы не могли, но я не думаю, что это цель задания –

+0

Будете ли вы генерировать эти вопросы один за другим? –

ответ

0

Похоже, вы пропустили некоторые вызовы функций и не вызывая правильную переменную.

попробовать это:

//end screen counters 
var incorrectCounter = 0; 
var correctCounter = 0; 
var notAnsweredCounter = 0; 
var quiz = $('#quiz'); 
var index = 0; 

//empty array to push each selected answer to 
var userGuess = []; 
var answerKey = ["html", "css", "jquery", "none of the above"]; 


//function that runs the questions and possible choices at start up 
$(window).ready(function startUp() { 

    //all questions and choices are in a large array 
    var questionArray = [{ 
    questions: "what did we learn in week 1?", 
    //smaller array within the large array for each possible answer for each question 
    choices: ["html", "css", "jquery", "javascript", "none of the above"] 
    }, { 
    questions: "what did we learn in week 2?", 
    choices: ["html", "css", "jquery", "javascript", "none of the above"] 
    }, { 
    questions: "what did we learn in week 4?", 
    choices: ["html", "css", "jquery", "javascript", "none of the above"] 
    }, { 
    questions: "what did we learn in week 5?", 
    choices: ["html", "css", "jquery", "javascript", "none of the above"] 
    }]; 

    function createQuestions() { 
    var trivia = $('<div>', { 
     id: 'question' 
    }); 

    var header = $('<h2>Question ' + (index + 1) + ':</h2>'); 
    trivia.append(header); 

    var question = $('<p>').text(questionArray[index].questions); 
    trivia.append(question); 

    var radioButtons = createChoices(index); 
    trivia.append(radioButtons); 

    quiz.append(trivia); 
    } 

    function createChoices(index) { 
    var radioList = $("<ul>"); 
    var item; 
    var input = ""; 
    for (i = 0; i < questionArray[index].choices.length; i++) { 
     item = $('<li>'); 
     input = '<input type="radio" name="answer" value=' + i + ' />'; 
     input += questionArray[index].choices[i]; 
     item.append(input); 
     radioList.append(item); 
    } 
    return radioList; 
    } 

    createQuestions(); 

    //End of the start up function 
});