Play sound on click, then go to page

Hello!
I am making an quiz in HTML with questions and 4 answers by each question. By clicking on correct answer, I want to play a short sound, then go to next html page. How can I do it to play sound on click? Please help!

Is this for a challenge or something you are doing on your own?

I think you’d need an onClick event handler or listener in Javascript to do that.

The onClick would play the sound then in the function, after the call to play the sound, have it redirect to to the next page.

Here’s a simple example…

Audio play() Method

You’d have to modify it so instead of a buttons, it is a radio button where the radio button that plays sound onClick is wrapped in an anchor tag.

Then you’d need logic in your function to redirect to next page.

Only problem I could see though is if user is clever, they could view the page source and see that radio button with the anchor tag or see that one radio button has a different id and cheat the quiz…

Thank you for your reply! Can you please describe this more detailed? I pasted my HTML code below. The right answer is Rumena (in row 30) which is linked to next page (ilona2.html)… So the sound should play when someone clicks on that answer (Rumena) and then go to ilona2.html . I hope you understand what I mean…

<!DOCTYPE html>
<html lang="en">
  <head>
    <title></title>
	
<style>

h1 {
  color: red;
  margin-left: 0px;
  margin-top: 602px;
  opacity: 0.8;
  border-top: 5px solid black;
}

</style>
	
</head>
  
<body background="ilona001.jpg"" topmargin="0" leftmargin="0" vlink="white" alink="white" link="white">

<h1>
<table width="100%" border="0" cellpadding="0" cellspacing="0" border="2px" background="transparentbg1.png">
<tr height="40px">
<td colspan=2 ><div align="center"><span style="font-family: 'Times New Roman'; font-weight: bold; font-style: normal; text-decoration: none; font-size: 14pt; color: white;">Katera barva je v novinarskem svetu "rezervirana" za trace?</span></div></td>
</tr>

<tr>
<td width="650px"><div align="center"><span style="font-family: 'Times New Roman'; font-weight: bold; font-style: normal; text-decoration: none; font-size: 16pt; color: #FFFFFF;"><font color="#C0C0C0"><a href="../index.html">A:</font>&nbsp; Rdeca</a></span></div></td>
<td width="650px"><div align="center"><span style="font-family: 'Times New Roman'; font-weight: bold; font-style: normal; text-decoration: none; font-size: 16pt; color: #FFFFFF;"><font color="#C0C0C0"><a href="ilona2.html">B:</font>&nbsp; Rumena</a></span></div></td>
</tr>

<tr height="50px">
<td width="650px"><div align="center"><span style="font-family: 'Times New Roman'; font-weight: bold; font-style: normal; text-decoration: none; font-size: 16pt; color: #FFFFFF;"><font color="#C0C0C0"><a href="../index.html">C:</font>&nbsp; Modra</a></span></div></td>
<td width="650px"><div align="center"><span style="font-family: 'Times New Roman'; font-weight: bold; font-style: normal; text-decoration: none; font-size: 16pt; color: #FFFFFF;"><font color="#C0C0C0"><a href="../index.html">D:</font>&nbsp; Zelena</a></span></div></td>
</tr>
</tr>
<tr>
<td> &nbsp; </td>
<td>&nbsp; </td>
</tr>
</table>
</h1>

</body>
</html>

Have you studied JavaScript or ReactJS?

I think it would be easier to understand how to do it if you have learned these things.

Not sure about doing it in ReactJS because I have not learned it.

The problem with using links (anchor tags) is they require an href="" attribute , so as soon as the link is clicked it will go to the next page immediately and you won’t hear the sound.

You would want to stay on the current page (the quiz page) long enough to hear the sound if correct answer was chosen, or a popup or message if wrong answer was chosen, and then be directed to the next page.

Unless someone else knows a better way to deal with that link problem, my idea is use radio buttons.

Then have a button that when pressed, goes to a JavaScript function that checks which radio button is selected. Then it plays a sound if correct, then pops an alert… correct or incorrect. Then if you click OK it goes to some other page based on correct or incorrect answer.

Alert popups can be kind of annoying in the real world. But this is just for demonstration purposes.

Something like this:

Then with JavaScript you could write an onclick event handler to use a function in a script tag to play the sound and redirect after a delay.

The code below is a just an example to illustrate how it would work…

You’d have to play around with it and do some research to figure out how to make it actually work for your purpose.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Quiz</title>
  </head>

  <body>
<!--
    need to put some sound file in same directory as your index.html
    and change name to <yoursound.snd> (for whatever sound file you use)
!-->
    <audio id="myAudio">
      <source src="ding.mp3" type="audio/mpeg">
    </audio>

  <script>
      let snd = document.getElementById("myAudio");
      const myFunction = function () {
        if(document.getElementById("b").checked){
          snd.play();
          alert("The answer was correct! Click OK to go to next page");
          //for demo purpose clicking OK redirects to freeCodeCamp
          window.location.href = "http://www.freecodecamp.org";
          //window.location.href = "ilona2.html";
        } else {
          alert("The answer was incorrect! Click OK to go to next page.");
          //for demo purpose clicking OK redirects to Google
          window.location.href = "https://www.google.com/search?q=Katera+barva+je+v+novinarskem+svetu+%22rezervirana%22+za+trace%3F";
          //window.location.href = "index.html";
        }
      };
     </script>

    <div align="center">
      <span style="font-family: 'Times New Roman'; font-weight: bold; font-style: normal; text-decoration: none; font-size: 14pt; color: black;">Katera barva je v novinarskem svetu "rezervirana" za trace?
      </span>
    </div>
      <input type="radio" name="myButton" id="a" value="a"><label for="a">A: Rdeca  </label><br />
      <input type="radio" name="myButton" id="b" value="b"><label for="b">B: Rumena </label><br />
      <input type="radio" name="myButton" id="c" value="c"><label for="c">C: Modra  </label><br />
      <input type="radio" name="myButton" id="d" value="d"><label for="d">D: Zelena </label><br /><br />
      <input onclick="myFunction()" type="button" value="Send"></button>

I don’t know if there’s a better or easier way to do it in ReactJS. Could probably make it more fancy with some JQuery and CSS too.

Maybe someone else has a better idea.

That’s the best help I can give you right now. Good luck! :smiley:

And like I said in the beginning…

The problem with this approach is, unless you are just doing this for your own learning purposes…

If it was a real quiz and someone knew HTML and Javascript, they could just view the page source, see that script is checking for value “b”, and use that information to cheat the quiz.

I realized there’s also a way to do what you originally wanted by overriding the default behavior of the link with JQuery.

Idea is, make a JQuery function that delays the link from loading the next page. In that function, call the play() method to play the sound, and then handle the link delay.

The flow:

  • Assign a class to the anchor tag
  • User clicks link
  • Link override function is called by JQuery based on the anchor tags class name
  • Sound plays
  • After some specified time, say a 1 second delay (in milliseconds, so 1000)
    it goes to the next page specified in the href="" attribute of the anchor tag

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.