Question

Please see working code here: http://jsfiddle.net/hrnDG/6/

I would like to modify this code so all possible answers become links to .mp3 files. When the user clicks any of these links, the audio file is played. The user can then select their answer and press submit.

How can I go about doing this? Is there something simple I can apply to my code to get this to work? I’m worried that adding something might disable the right and wrong CSS classes.

Please know: If anyone thinks there is a more efficient/easier way than turning the link into a playable mp3 link, I’m all ears.

Many thanks!

My code:

<form>
<table>
<tr class="q1">                       
    <td>What sounds like a rabbit?</td>
    <td>
        <input class="radiostyle wrong" type="radio" name="answers" value="Java" id="answers_1_Java" />
        <label for="answers_1_Java">A</label></td>
    <td>
        <input class="radiostyle right" type="radio" name="answers" value="JavaScript" id="answers_1_JavaScript" />
        <label for="answers_1_JavaScript">B</label></td>
    <td>
        <input class="radiostyle wrong" type="radio" name="answers" value="Ruby" id="answers_1_Ruby" />
        <label for="answers_1_Ruby">C</label></td>
    <td>
        <input class="radiostyle wrong" type="radio" name="answers" value="C#" id="answers_1_C#" />
        <label for="answers_1_C#">D</label></td>
    <td><input class="submit submit-1" type="submit" value="Submit" /></td>
    <td></td></tr></table></form>​

JS

$('.submit').click(function() {
$(this).closest('tr')
    .find('[name="answers"]')
        .removeClass('checked')
    .filter(':checked')
        .addClass('checked');
return false;
});​

Answer 1

If you can assume that your users have an HTML5 enabled browser, you can add a hidden <audio> element to the page and play it from your script.

<audio hidden="hidden" id="sound">  
  <source src="sound.ogg" type="audio/ogg" />
  <source src="sound.mp3" type="audio/mpeg" />
</audio> 

If the <audio> is supported within their browser, then use JavaScript to start the player by the following code:

document.getElementById("sound").play();