Question

I am using jQuizMe, the jQuery plugin for quizzes, and I want to get the quiz questions out of a database. So I thought that I could use an ajax call to fetch the questions and process them to mimic a JSON-like array. I would then like to take that AJAX responseData and store it (as a JSON-like array) in a javascript variable.

Here is the code:

$(document).ready(function() {
    var quiz = new Array();
    $.get("/base/GameList/GetGameQuestions/StatesAndCapitalsGame.aspx", function(data)  {
        quiz = data;
    });

    var options = {
        intro: "Find out if you know which Capital is for which State.",
        allRandom: true,
        title: "State Capitals Quiz",
        fxType: 1
    };
    var lang = {
        praise: "Great job, right!"
    };

    $("#quizArea").jQuizMe(quiz, options, lang);

});

And the data that is coming back looks like this:

{
    multiList: [
        { ques: "What is the capital of Alabama?",
          ans: "Montgomery",
          ansSel: ["Hamptonville", "Ellenville", "Somerville"]
        },
        { ques: "What is the capital of New Jersey?",
          ans: "Trenton",
          ansSel: ["Hamptonville", "Ellenville", "Somerville"]
        }
    ]
};

I was thinking this probably would not work correctly because it is just assigning this response to the quiz variable as a string, but I was hoping you all could guide me in the right direction.

Thanks!

EDIT:
I solved this by using what Groo suggested (in a modified form). Thanks for all your suggestions everyone!

$(document).ready(function() {
function runQuiz(quiz) {
   var options = {
       quizType: "multiList",
       intro: "Find out if you know which Capital is for which State.",
       allRandom: true,
       title: "State Capitals Quiz",
       fxType: 1
   };
   var lang = {
       praise: "Great job, right!"
   };
    var stuff = new Array();
    stuff = eval('(' + quiz + ')');
   $("#quizArea").jQuizMe(stuff, options, lang);
}

    $.get("/base/GameList/GetGameQuestions/StatesAndCapitalsGame.aspx", function(data)  {
        runQuiz(data);
    });
});

Answer 1

You can add dataFilter and error handlers for a jQuery.ajax call, to check how your JSON data looks like when received:

var runQuiz = function(quiz) {
   var options = {
       intro: "Find out if you know which Capital is for which State.",
       allRandom: true,
       title: "State Capitals Quiz",
       fxType: 1
   };
   var lang = {
       praise: "Great job, right!"
   };

   $("#quizArea").jQuizMe(quiz, options, lang);
}

$.ajax({
      type: "POST",
      url: "/base/GameList/GetGameQuestions/StatesAndCapitalsGame.aspx",
      data: { },
      contentType: "application/json; charset=utf-8",
      dataType: "json",
      timeout: 15000,
      dataFilter: function(data, type) {
          // alert(data);
          return data;
      },
      error: function(xhr, textStatus, errorThrown) {
          // alert(textStatus + ' ' + errorThrown);
      },
      success: runQuiz
 });

For debugging purposes, you can uncomment the handler for dataFilter event, to get the raw JSON string that your web service is returning.