Hi, Jana,
here both options I mentioned before
1. Initially you hide the question text (where you add an id), the "question-valid-container", the "answer-container" and the "next"-button.
After the end of the audio you hide the audio and show everything you hided before.
The script
Code:
<div id="theQuestion">Wie gefällt es denn so?</div>
<div id="theAudio">
<audio controls="" id="myaudio">
<source src="https://mysurvey.de/userfiles/myaudio.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
</div>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
var aud = document.getElementById("myaudio");
aud.volume=0.3; // Adapt to your needs
aud.onended = function() {
$('#theAudio').hide();
$('#ls-button-submit').show();
$('.question-valid-container').show();
$('.answer-container').show();
$('#theQuestion').show();
}
});
</script>
<style type="text/css">
.question-valid-container,
.answer-container,
#theQuestion,
#ls-button-submit {
display:none;
}
</style>
2. You use two questions.
A text display with the audio and the question of your desired type.
After the end of the audio the "next"-button is triggered to proceed to your question.
The script
Code:
<audio controls="" id="myaudio">
<source src="https://mysurvey.de/userfiles/myaudio.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
<script>
$(document).ready(function() {
var aud = document.getElementById("myaudio");
aud.volume=0.3;
aud.onended = function() {
$('#ls-button-submit').show().trigger('click');
}
});
</script>
<style type="text/css">#ls-button-submit {
display:none;
}
</style>
Joffm
Topic Author
