Slick Quiz Plugin - audio tags/playing audio

Slick Quiz Plugin - audio tags/playing audio


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.