Hello, I have 22 audiofile which has to be listen to only once, each audio is on each own page. Based on
I have made a js function, which I put in the header of the document. This is how the function looks:
<script>
function playAudio(buttonNum) {
var button = document.getElementById("audiobutton"+buttonNum); //grab button id
var audio = document.getElementById("audiofile"+buttonNum); //grab audio id
audio.play(); //play the audio once
button.style.visibility = "hidden"; //hide the button so that it can't be played anymore
}
</script>
this is how html looks for the audio and button on the first page:
<button type="button" id="audiobutton1">Play Audio</button>
<audio src="https://brown.co1.qualtrics.com/CP/File.php?F=F_b71Dx0QXwJXSTj0" id="audiofile1"> </audio>
this is on the second page:
<button type="button" id="audiobutton2">Play Audio</button>
<audio src="https://brown.co1.qualtrics.com/CP/File.php?F=F_b71Dx0QXwJXSadfaef0" id="audiofile2"> </audio>
etc.
and this is how I call the function in js associated with the above question html
Qualtrics.SurveyEngine.addOnload(function()
{
var buttonNum=1;
jQuery("#audiobutton1").on("click", playAudio(buttonNum));
});
and for the second page it is
Qualtrics.SurveyEngine.addOnload(function()
{
var buttonNum=2;
jQuery("#audiobutton2").on("click", playAudio(buttonNum));
});
But what happens is this:
1. Button is already hidden.
2. Correct Audio stats to play automatically, on itself - but it does it twice, with the slight delay, so voices overlap!
What do I do wrong?
Thank you.