be able to click to an answer only after the audio file has been played once

Question

I am running an experiment in which the participants should first listen to the audio file and only then be able to select the answer that they want to select. The plan button for the audio file, the question and the answer need to be on the same page, so it would not be an option the one of immediately go to another page after the audio file has been played. Plus, participants need to be able to listen to the audio file again, even if they have already answered the question.

How do I do that?

Here the link to the pretest, of you need it to understand the question (the problem I am referring to begins at page 2) https://www.soscisurvey.de/test218115/?act=10WeYmlt3QfhuIJWgUlvjAAy

Thank you!

Answer 1

You can hide the question and only display it when the "ended" event of the <audio> element was fired.

question.style.display = "none";
audio.setEventListener("ended", function() {
  question.style.display = "";
});

Please note that you must define the variables "audio" and "question" before this works. You will need the HTML-IDs of both an `getElementById()" to do so.

Comments

Thank you very much! Another question: where should I insert this code? Directly in the question (e.g., writing the instructions in html with
<script type="text/javascript">
<!--
-->
</script>

To insert javascript or do I have to drag it as text element in the "compose questionnaire" section, as it is written here: https://www.soscisurvey.de/help/doku.php/en:create:dynamic ?

Thank you in advance.

---

> where should I insert this code?

You will have to put it below the question, so that the elements are already loaded when the script runs. For a short JavaScript, you can use a "HTML code" element. For anything that is longer, I recommend a text created in the "list of questions".

Also see: https://www.soscisurvey.de/help/doku.php/en:create:javascript

---

Thank you! It worked, but I still have one problem.
Mine is a multiple choice type of questions. I can hide the button where to click the answer and let it appear when the audio file is played, however, I cannot hide the text label that is associated to the button. I cannot understand how to find the HTML-ID of the text (the one for the button of the first choice is TI101_01a; but it only hides the button and not the text).

Thank you very much

---

Would you mind posting a pretest URL that directly starts on the respective questionnaire page? Finding an HTML ID is easiest by using the developer tools in Firefox or Chrome. You can use the inspector tool and simply click on a page element to see the surrounding HTML source (incl. the HTML IDs).

---

Thank you! I have already done so, but it seams to me that the ID for the label and the button is the same, it changes just the HTML tag.

Anyway, here there is the page: https://www.soscisurvey.de/test218115/?act=wQvflCt6QYwEIgzSslzk86Lh

The buttons to click for the answer is already hidden and appears only after the sound file (associated to the play button) ends. The text "primo", "secondo", "terzo" and so on are the ones to be hidden.

Thank you

---

The links seems not valid (any more)?! Have you properly created the pretest URL in the project settings?

---

Sorry, here it is https://www.soscisurvey.de/test218115/index.php?i=N8RBQOV7O60E&rnd=AMRL

---

Alright, I see the problem. You have put the audio INTO the question. Therefore, you cannot simply hide the whole question.

Easy solution: Create a new "text" in the section that contains the title and the audio HTML. Then you have the question as a separate element, and can hide it (HTML ID "TI01_qst")

Ambitious solution: Start with the "TI01_01a" input and use parentNode unless you find an element with the className "items".

var node = document.getElementById("TI01_01a");
while ((node.parentNode) && (node.className !== "items")) {
  node = node.parentNode.
}
node.style.border = "2px solid red";