Hello everyone, My name is TJ and I have little experience with HTML but absolutely none with Javascript. Right now I am experimenting with binding a sound to a click event for a fake test I am designing. I am experimenting as I am learning and this is frustrating me. Can someone tell where I am making mistake to get this sound to play. Thank you in advance. Oh here is the code I have done so far. Please ignore the notes…
<ol>
<li>
<button id="photoshop">Adobe Photoshop</button>
</li>
<br>
<li>
<button id="illustrator">Adobe Illustrator</button>
</li>
<br>
<li>
<button id="indesign">Adobe InDesign</button>
</li>
<br>
<li>
<button id="muse">Adobe Muse
</button>
</li>
</ol>
<div id="message"></div>
<audio id="wronganswer" preload="auto">
<source src="https://www.freesound.org/people/freki3333/sounds/131594/"></source>
</audio>
<script type="text/javascript">
var boo = $("wronganswer")[0];
$("#photoshop").click(function(){
// code for incorrect sound
boo.Play("wronganswer");
// code for incorrect message
send_message("incorrect");
});
$("#illustrator").click(function(){
send_message("correct");
});
$("#indesign").click(function(){
send_message("incorrect");
});
$("#muse").click(function(){
send_message("incorrect");
});
// we create this function because we don't want to repeat the same code
// DRY principle - Don't Repeat Yourself
function send_message(message) {
// put here the message code
$("#message").html(message);
}
function wrong_reply_sound(boo) {
// TODO: put the code here
}
</script>
<!DOCTYPE html>
<html>
<head>
<title>Mock Test</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/buzz/1.1.10/buzz.min.js">
<script src="https://code.jquery.com/jquery-2.2.3.js" integrity="sha256-laXWtGydpwqJ8JA+X9x2miwmaiKhn8tVmOVEigRNtP4=" crossorigin="anonymous">
</script>
</head>
<body>
<h1>Question #1</h1>
<p>If a client wanted to design a logo using a vector based medium, what program would be the best choice?</p>
<ol>
<li>
<button id="photoshop">Adobe Photoshop</button>
</li>
<br>
<li>
<button id="illustrator">Adobe Illustrator</button>
</li>
<br>
<li>
<button id="indesign">Adobe InDesign</button>
</li>
<br>
<li>
<button id="muse">Adobe Muse
</button>
</li>
</ol>
<div id="message"></div>
<audio id="wronganswer" preload="auto">
<source src="https://www.freesound.org/people/freki3333/sounds/131594/"></source>
</audio>
<script type="text/javascript">
var boo = $("wronganswer")[0];
$("#photoshop").click(function(){
// code for incorrect sound
boo.Play("wronganswer");
// code for incorrect message
send_message("incorrect");
});
$("#illustrator").click(function(){
send_message("correct");
});
$("#indesign").click(function(){
send_message("incorrect");
});
$("#muse").click(function(){
send_message("incorrect");
});
// we create this function because we don't want to repeat the same code
// DRY principle - Don't Repeat Yourself
function send_message(message) {
// put here the message code
$("#message").html(message);
}
function wrong_reply_sound(boo) {
// TODO: put the code here
}
</script>
</body>
</html>
I wanted to thank you because I finally got it to work. You have no idea of how much of a moral victory this was for me even though for some of you guys this is a minor task. Once again thank you for taking the time out to help