javascript will not generate from array

Question

i believe I have a working javascript functions that should generate a list of questions and choices on a single page, but will not run and no errors are running on chrome console.

-At the moment I have two functions function createQuestions & createChoices -I do have some extra variables at the top for the later stages, but right now I just want to display the questions and answers.

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

Answer 1

Looks like you're missing some function calls and not calling the correct variable.

try this:

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

javascript will not generate from array

Question

1 answers

solution1
0 2017-02-23 23:41:38

javascript will not generate from array

Question

1 answers

solution1 0 2017-02-23 23:41:38

solution1
0 2017-02-23 23:41:38