Hello, I would like to introduce in my questionnaire the possibility to listen to the question, for example by clicking on a button next to each question which contains a recording of the question (which we could make previously for example)
Is this option available on qualtrics? Does someone know the code?
Thank you very much in advance
Hi there, while you could insert Audio files using the Rich Content Editor's insert media, the below code will do what you are describing and with buttons.
In your question's HTML view, insert the below code, changing out the URL with the question recording:
Question Text
Then, add the following JavaScript in the Onload section of the question:
document.getElementById("playBtn").addEventListener("click",function(){
document.getElementById("myAudio").play();
});
document.getElementById("playBtn").addEventListener("touchstart",function(){
document.getElementById("myAudio").play();
});
document.getElementById("pauseBtn").addEventListener("click",function(){
document.getElementById("myAudio").pause();
});
document.getElementById("pauseBtn").addEventListener("touchstart",function(){
document.getElementById("myAudio").pause();
});
<audio src="https://www.learningcontainer.com/wp-content/uploads/2020/02/Kalimba.mp3" id="myAudio"> </audio>
<br>
<button id="playBtn">Play Audio</button>
<button id="pauseBtn">Pause Audio</button>
<br>
Some how the code got formatted into button
Thanks Nam! Some HTML from before the community migration is rendered, but you can get at the original HTML by inspecting the comment element with the browser.
The original code is below. You can add it to the question text using the Rich Content Editor's HTML/Source view <>:
<audio src="https://www.learningcontainer.com/wp-content/uploads/2020/02/Kalimba.mp3" id="myAudio"> </audio>
<br>
<button id="playBtn">Play Audio</button><button id="pauseBtn">Pause Audio</button>
<br>
<br>
Question Text
And the JavaScript for the question in the OnReady section:
document.getElementById("playBtn").addEventListener("click",function(){
document.getElementById("myAudio").play();
});
document.getElementById("playBtn").addEventListener("touchstart",function(){
document.getElementById("myAudio").play();
});
document.getElementById("pauseBtn").addEventListener("click",function(){
document.getElementById("myAudio").pause();
});
document.getElementById("pauseBtn").addEventListener("touchstart",function(){
document.getElementById("myAudio").pause();
});
You could also Insert Media through the Rich Content Editor. This will have an audio element with controls available for the respondent.
Another way to add an audio element so that controls are available for the respondent would be to use the below:
<audio controls>
<source src="https://www.learningcontainer.com/wp-content/uploads/2020/02/Kalimba.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<br>
<br>
Question Text
How would I use this to also add a button to each response option in a multiple choice item?
I am looking for a similar answer but I’d like coloured images for children to click on and hear the audio while remaining on the same page. So far I can get the images which will play media when you click but take you to a new page, or media that doesn’t look fun (or, has text buttons which they may not be able to read).
Leave a Reply
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.