jQuery Forum

I am having trouble with outputting audio elements from a Json array with Jquery. Here is my Json array which contains images, text and audio:

"questions": [ { // Question 1 "q": "<img height=100 width=100 src=\"js/Question1Option4.png\" />", "correct": "<p>Bag</p>", "audio": "<audio src=\" js/Question1.mp3\" ></audio>" }, { // Question 2 "q": "<img height=100 width=100 src=\"js/Question2Option2.png\" />", "correct": "<p>Eraser</p>", // no comma here "audio": "<audio src=\" js/Question2.mp3\" ></audio>" }, { // Question 3 "q": "<img height=100 width=100 src=\"js/Question3Option4.png\" />", "correct": "<p>Pencil</p>", // no comma here "audio": "<audio src=\" js/Question3.mp3\" ></audio>" }, ]

My jquery script appends the image, text and audio for each question one after another. It also appends divs with function buttons for revealing and playing the text and audio elements on click:

for ( i in questions ) { if ( questions . hasOwnProperty ( i )) { var question = questions [ i ];

var questionHTML = $ ( '<li class="question" id="question' + ( count - 1 ) + '"></li>' );

questionHTML . append ( '<table><tr ><td class="column-1"><div class="q";><h3><br>' + count + '. ' + question . q + '</h3></div></td><td class="column-2"><div class="correct"><h3>' + count + '. ' + question . correct + question . audio + '<div input class="playSound" type="submit"><button>Play</button></div>' + ' </h3></td></tr></table>' )


The relevant stuff is in the appending of the text and audio within the "correct" div towards the end of "QuestionHTML.append" The text and audio elements are appended along with buttons to reveal and play those elements respectively.

As a result, the image and text elements are each outputted in order along with "Play" buttons for the purposes of playing the corresponding audio element.

Issue: How do I create a function for the "Play" buttons to play their respective audio elements on click?

The audio elements were correctly appended from json as shown by this function:

$ ( ".playSound" ). click ( function () {
$ ( "audio" )[ 0 ]. play ();
});

But here, each "Play" button only plays the audio element that is designated in the $("audio")[X] brackets. I have tried to create functions with ".this" and ".each" but these result in each "Play" button playing every audio element at the same time.

So yeah, how do I create a general function for multiple buttons that identifies and plays the correct audio element based on its order within the json array? Any guidance or clues would be most helpful

Thanks guys

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

Hi all,

I have been tinkering around with the Slick Quiz plugin (www.github.com/QuickenLoans/SlickQuiz). Apparently it can be modified to output sound files as well as text and images.

The js outputs a question (and also answers) from the json file (js extension) in the following manner(this works):

      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>');

      The json file is structured in the following manner:

    "questions": [
        { // Question 1
            "q": "<img height=100 width=100 src=\"js/Question1.png\" />",
            "a": [
                {"option": "<img height=100 width=100 src=\"js/Question1.png\" />", "correct": false},
                {"option": "<img height=100 width=100 src=\"js/Question2.png\" />", "correct": false},
                {"option": "<img height=100 width=100 src=\"js/Question3.png\" />", "correct": true},
                {"option": "<img height=100 width=100 src=\"js/Question4.png\" />", "correct": false} // no comma                   here
            ],
......

I have attempted to substitute the  image/text question for a sound file in the following manner:

json:

    "questions": [
        { // Question 1
            "src": "Test1.mp3",
            "a": [
                {"option": "<img height=100 width=100 src=\"js/Question1.png\" />", "correct": false},
                {"option": "<img height=100 width=100 src=\"js/Question2.png\" />", "correct": false},
                {"option": "<img height=100 width=100 src=\"js/Question3.png\" />", "correct": true},
                {"option": "<img height=100 width=100 src=\"js/Question4.png\" />", "correct": false} // no comma                   here
            ],
......

json:
      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( '<audio autoplay>' + count + '. ' + question.src + '</audio>' );


This is not working at the moment. I guess that the two lines above the modified line also need to be modified. But I am not sure how or to what purpose. Any directions, suggestions or links for parsing (correct term?) sound files from the json file in place of text questions would be very helpful. Thanks heaps for your time.

Howdy,

I have put the following "Q&A" divs together:

<div class="Questions">
<div class="bat"><div class="firstheader"><button>Question1</button></div><div class="Question"><div id=Question > <div id="Answer"><div id="Answer1Output"></div><div id="ShowAnswer1" href="javascript:void(0);"><button>Show Answer</button></div></div></div></div><div class="Space" style= "height: 80px"></div></div>

    <div class="cat"><div class="header"><button>Question2</button></div><div class="Question"><div id=Question > <div id="Answer"><div id="Answer2Output"></div><div id="ShowAnswer2" href="javascript:void(0);"><button>Show Answer</button></div></div></div></div><div class="Space" style= "height: 80px"></div></div>

    <div class="cat"><div class="header"><button>Question3</button></div><div class="Question"><div id=Question > <div id="Answer"><div id="Answer3Output"></div><div id="ShowAnswer3" href="javascript:void(0);"><button>Show Answer</button></div></div></div></div><div class="Space" style= "height: 80px"></div></div>
</div>

Here are the functions for these divs on load (also including "slide" functions for the "header" class to reveal the subsequent "question" class on-click. Note that the first "bat" div is shown, but the second and third "cat" divs are randomized and hidden.

$(function() {
    $("div.Questions").randomize("div.cat");
    $(".header").hide();
});

$(function() {
  $(".Question").hide();
  $(".header").click(function()
  {
    $(this).next(".Question").slideToggle(500);
  });
 
  $(".firstheader").click(function()
  {
    $(this).next(".Question").slideToggle(500);
  }); 
 
});

(function($) {
$.fn.randomize = function(childElem) {
  return this.each(function() {
      var $this = $(this);
      var elems = $this.children(childElem);
      elems.sort(function() { return (Math.round(Math.random())-0.8); }); 
      $this.remove(childElem); 
      for(var i=0; i < elems.length; i++)
        $this.append(elems[i]);     
  });   
}
})(jQuery);

And here is an on-click function for revealing the "Answer" output in the top "bat" div. It is also meant to reveal the "header" button for the hidden "cat" div directly below the "bat" div:

$("#ShowAnswer1").click(function(){
$("#Answer1Output").show();
$(this).closest(".cat").next(".header").show();  
$("#ShowAnswer1").hide();         
})

ATM, this function shows the "bat" div answer output successfully, but fails to show the "header" button for the "cat" div directly below it. Does anybody know why it fails to do this?

Thanks heaps in advance

SITUATION
Howdy, I have made a function which sends parsed xml elements into two adjacent boxes in random order. The first box contains questions and the  second box contains answers. The answers are hidden to begin with, but there is a click function which reveals the answers when the user is ready.  

Here is the xml file structure:

<?xml version="1.0" encoding="UTF-8"?>
<Questions>

    <Question>
        <QuestionOutput>Question</QuestionOutput>
        <AnswerOutput>Answer</AnswerWord>
    </Question>

    <Question>
        <QuestionOutput>Question</QuestionOutput>
        <AnswerOutput>Answer</AnswerWord>
    </Question>

    <Question>
        <QuestionOutput>Question</QuestionOutput>
        <AnswerOutput>Answer</AnswerWord>
    </Question>

</Questions>

Here is the HTML that the output goes into. (I should put the "Answers" button somewhere else, but I am not worried about it atm.

<div class="containWidth">
    <div class="container">
        <div class="box"><div id="Questions"></div></div>
        <div class="box"><div id="Answers"></div></div>
        <div class="box"><a id="ShowAnswersOutput" href="javascript:void(0);"><button>Answers</button></a></div>               
    </div>
</div>

Here is the script:

 $.ajax({
            url: x,
            type: 'GET',
            dataType: 'xml',
            success: parseXML
       });
})

<!--Shuffle-->
    $.shuffle = function(arr) {
    for(
    var j, x, i = arr.length;
    i;
    j = Math.floor(Math.random() * i), x = arr[--i], arr[i] = arr[j], arr[j] = x
    );
    return arr;
    }
    $.fn.shuffle=function(){
    return $.shuffle(this)
    }
   
<!--Display Questions & Answers-->
    function parseXML(xml) {
                         
        var QuestionsOutput = '';
        var AnswersOutput = '';
                            
        $(xml).find('Question').shuffle().each(function(){               
        QuestionsOutput += $(this).find('QuestionOutput').text() + '<br />' + '<br />';
        AnswersOutput += $(this).find('AnswerOutput').text() + '<br />' + '<br />';   
        })
   
        $('#Questions').html(QuestionsOutput);
        $('#Answers').hide().html(AnswersOutput);

        $('#ShowAnswersOutput').click(function(){
        $('#AnswersOutput').show();
        })   
       
        }

QUESTION
The above function works, but I don't like how the click function reveals all of the answers at the same time. I want separate click functions, for each outputted question and (hidden) answer, that the user clicks to reveal said answer. E.g if an xml file contained 5 question & answer elements, 5 questions would be outputted and 5 "answer" buttons would be adjacent to each question (each one revealing the answer to it's particular question).

I am using a" container" class in the html because it appears to keep the questions and answers aligned. I am guessing that it will need to be replaced with something that divides the xml elements into their own little areas to be manipulated individually. I don't have the foundational knowledge for that kind of thing. Any suggestions or directions would be really helpful.

Thanks guys

This is a follow up to the post here.

http://forum.jquery.com/topic/making-a-multi-level-selection-menu-not-a-navigation-menu-with-jquery.

I have managed to solve my initial problem, but I am now having difficulty with another...

Thanks to a link in the previous post, I have been able to create a multi-level menu with the "jquery.chained.mini" plugin. Here is the html and js script that I have made (the "chained" function is right at the bottom:

<form name = "LoadCategory">
<select id = "Level1">
<option value = "">--</option>   
<option value = "Life">Life</option>
<option value = "Movement">Movement</option>
<option value = "Thought">Thought</option>
<option value = "Time">Time</option>
</select>



<select id = "Level2">
<option value = "">--</option>
<option value = "Life1" class = "Life">Life1</option>
<option value = "Life2" class = "Life">Life2</option>
<option value = "Movement1" class = "Movement">Movement1</option>
<option value = "Movement2" class = "Movement">Movement2</option>
<option value = "Thought1" class = "Thought">Thought1</option>
<option value = "Thought2" class = "Thought">Thought2</option>
<option value = "Time1" class = "Time">Time1</option>
<option value = "Time2" class = "Time">Time2</option>
</select>
</form>
</div>

<a id="LoadQuestions" href="javascript:void(0);">________LoadQuestions________</a>
</div>

<script type="text/javascript" charset="utf-8">

$(function(){
$("#Level2").chained("#Level1");
});

This works well for me, but I am now unable to connect the user's selection to the jQuery parse function. The below is my original attempt to connect the selection with the parse function. I have tried many variations on it, but to no avail:

$("#LoadWords").click(function()
{

var x;
(function selFile()
{
var p = document.LoadCategory.Load.value;

    if (p == "Life1" ) {x = "Life1.xml"}
    if (p == "Life2" ) {x = "Life.2xml"}           
    if (p == "Movement1" ) {x = "Movement1.xml"}
    if (p == "Movement2" ) {x = "Movement2.xml"}       
    if (p == "Thought1" ) {x = "Thought1.xml"}               
    if (p == "Thought2" ) {x = "Thought2.xml"}           
    if (p == "Time1" ) {x = "Time1.xml"}   
    if (p == "Time2" ) {x = "Time2.xml"}       
})();


 $.ajax({
            url: x,
            type: 'GET',
            dataType: 'xml',
            success: parseXML
       });
})

I'd be grateful for some directions or advice on this matter or on what I am doing. Cheers guys, hope you have a good weekend.

Hi there, I am looking for a solution regarding html selection menus. I have been working on a question and answer framework. The user selects an XML file (containing the questions and answers) and a Jquery function parses the contents of that XML file back onto the screen. Below is the html and jQuery structure that I have been using:

<body>
<form name = "LoadCategory">
<select name = "Load">
<option value = "Life">Life</option>
<option value = "Movement">Movement</option>
<option value = "Thought">Thought</option>
<option value = "Time">Time</option>
</select>
</form>


<a id="LoadQuestions" href="javascript:void(0);">________LoadQuestionst________</a>

<br>

<script language = "javascript">

$("#LoadQuestions").click(function()
{

var x;
(function selFile()
{
var p = document.LoadCategory.Load.value;
    if (p == "Life") {x = "Life.xml"}       
    if (p == "Movement") {x = "Movement.xml"}
    if (p == "Thought") {x = "Thought.xml"}               
    if (p == "Time") {x = "Time.xml"}   
})();


 $.ajax({
            url: x,
            type: 'GET',
            dataType: 'xml',
            success: parseXML
       });
})

    $.shuffle = function(arr) {
    for(
    var j, x, i = arr.length;
    i;
    j = Math.floor(Math.random() * i), x = arr[--i], arr[i] = arr[j], arr[j] = x
    );
    return arr;
    }
    $.fn.shuffle=function(){
    return $.shuffle(this)
    }
   
    function parseXML(xml) {
    var questions = '';
    var answers = '';
    $(xml).find('Questions').shuffle().each(function(){
    questions += $(this).find('Question').text() + '<br />';
    answers += $(this).find('Answer').text() + '<br />';
    })
    $('#output').html(questions);
    $('#output2').html(answers);
    }

    function toggle() {
    var ele = document.getElementById("output2");
    var text = document.getElementById("displayText");
    if(ele.style.display == "block") {
        ele.style.display = "none";
        text.innerHTML = "show";
    }
    else {
        ele.style.display = "block";
        text.innerHTML = "hide";
    }
    }
</script>

The jQuery function has been working really well for me. My problem is with the html option-select form. I have loads and loads of XML q & a files now. If I add select-option values for each one of them, the list would be too long and no fun for the user. The XML files need to be divided into separate groups and subgroups for the user.

So I would like create a multi-level/hierarchical selection menu with sub-levels that appear horizontally - essentially a menu like the multi-level navigation menus that can can be created with CSS:

http://www.bloggermint.com/2011/06/pure-css3-multi-level-drop-down-navigation-menu/

So am I able to use jQuery (or a mixture of jQuery and another method) to create a multi-level selection menu? For the avoidance of doubt, the below structure is not adequate:

http://cryptexo.wordpress.com/2010/07/23/multi-level-select-box-in-simple-html/
 
Cheers guys, Andrew

Hi guys, I am a typical noob who is trying to create a question and answer application with Jquery. At the moment, I have a function which allows a user to (1) select a category of questions and (2) bring up all the question and answer nodes from the XML document that corresponds to the category.

At the moment, every time I call the function, the new XML data is appended in the divs BENEATH the XML data that was appended previously. I do not want this to happen.

When I call the function, I want the new XML data to REPLACE the XML data that was appended previously. For example, the user selects category 1, clicks the button and gets  all of the questions and answers (hidden by a toggle blocker) for category 1. The user then selects category 3, clicks the button again and the category 1 question and answers are replaced by the category 3 questions and answers.

Here is the format for my xml files -

<Category>

    <QandA>
        <Question>Question</Question>
        <Answer>Answer</Answer>
    </QandA>

    <QandA>
        <Question>Question</Question>
        <Answer>Answer</Answer>
    </QandA>

    <QandA
        <Questions>Question</Question>
        <Answer>Answer</Answer>
    </QandA>

</Category>

Here is the HTML form and javascript code -

<form name = "LoadCategory">
<select name = "Load">
<option value = "testFile2">TestFile1</option>
<option value = "testFile3">TestFile2</option>
<option value = "testFile4">TestFile3</option>
</select>
<br>
<br>
</form>


<a id="clickme" href="javascript:void(0);">click me</a>

 

<script type="text/javascript">

   
$("#clickme").click(function()
{

var x;
(function selFile()
{
var p = document.LoadCategory.Load.value;
    if (p == "testFile2") {x = "TestFile2.xml"}       
    if (p == "testFile3") {x = "TestFile3.xml"}           
    if (p == "testFile4") {x = "TestFile4.xml"}   
})();


 $.ajax({
            url: x,
            type: 'GET',
            dataType: 'xml',
            success: parseXML
       });
})

function parseXML(xml)
{
    //find every question and print the question
    $(xml).find("QandA").each(function()
    {
        $("#output").append($(this).find("Question").text() + "<br />");
    });
   
    //find every question and print the question
    $(xml).find("QandA").each(function()
    {
        $("#output2").append($(this).find("Answer").text() + "<br />");
    });   
   
}

    function toggle() {
    var ele = document.getElementById("output2");
    var text = document.getElementById("displayText");
    if(ele.style.display == "block") {
        ele.style.display = "none";
        text.innerHTML = "show";
    }
    else {
        ele.style.display = "block";
        text.innerHTML = "hide";
    }
    }
</script>

I am sorry that this post was so long-winded. I think that the answer lies with not using the append method, but nothing else seems to work besides the append method. I'd be grateful for any help or guidance. Cheers guys!