Parse JSON object and reveal with a "show" function

Parse JSON object and reveal with a "show" function


Hi,
I am attempting to use Jquery plugin script to parse/output elements from a JSON file. The script that I have so far can parse one set of elements, but not a corresponding set. The JSON file structure is as follows:

    "questions": [
        { // Question 1
            "q": "<img height=100 width=100 src=\"js/Question1.png\" />",
            "correct": "<p>Answer1</p>"
        },

        { // Question 2
            "q": "<img height=100 width=100 src=\"js/Question2.png\" />",
            "correct": "<p>Answer2</p>"
        },
]

On Load, the "q" and "correct" objects are successfully looped through in the following manner. The "q" objects are parsed and the "correct" objects are parsed and hidden:

                for (i in questions) {
                    if (questions.hasOwnProperty(i)) {
                        var question = questions[i];
                                         
                        var questionHTML = $('<li class="question" id="question' + (count - 1) + '"></li>');
                        questionHTML.append('<div class="questionCount">Question <span class="current">' +                               count + '</span> of <span class="total">' + questionCount + '</span></div>');
                        questionHTML.append('<h3>' + count + '. ' + question.q + '</h3>');                     
                        questionHTML.append('<h3>' + count + '. ' + question.correct.hide + '</h3>');                  

                        questionHTML.append('<a href="#" class="button checkAnswer">' +                                                       plugin.config.checkAnswerText + '</a>');
                       

                        // Append question & answers to quiz
                        quiz.append(questionHTML);

                        count++;
                       
                    }
                }

Note above that a "checkAnswer" button is appended. This button is for displaying the "correct" object next to each "q" object. 


When the "Start" function is clicked, each "q" and (hidden) "correct" object, with their "check answer" button, is displayed one after another:

            startQuiz: function(startButton) {
               
                $(startButton).fadeOut(300, function(){
           
                    var Question = $(_element + ' .questions li');

                    if (Question.length) {
                        Question.fadeIn(500);
                    }
                });
            },

The above script successfully parses the "q" objects one after another, keeps the "correct" objects hidden and appends a "check answer" button to each set.

Question:
How can I create a function for the "check answer" buttons to show their respective "correct" objects on click? The "correct" objects have already been parsed from the JSON file, so it is just a matter of revealing each "correct" object with a "show" function. But I have had no luck creating such a function thus far. Any hints or advice would be really appreciated.

Thanks very much
Andrew