Activate continue button only after two videos in one page played

Question

Hello all,

In a question, I am showing two videos side by side in a table format on the same page. I want the participants to watch both of the videos in the order they want but when they click play on any video it hides the play/pause button. I also want that the continue button is hid until after both videos played till the end. I was able to do it for only one of the videos using the html code provided in the help page, but cannot implement it for two videos on the same page. I'd appreciate your help! I attach the code I tried so far:

<table>      <!-- This is where the table begins -->
<colgroup>   <!-- This is to define the widths of the columns -->
    <col width="50%">   <!-- Column 1 has a width of 50%, col = column -->
    <col width="50%">
</colgroup>
<tr> <!-- This is the beginning of row 1, tr = table row -->
    <td><b>A</b></td>
    <td><b>B</b></td>
</tr>
<tr>  <!-- This is the beginning of row 2, tr = table row -->   
<!-- This is cell 2/1, td = table data -->    
    <td><video width="384" height="216" controls controlsList="nodownload" id="stimulus">
  <source src="event3_causal.ogg" type="video/ogg" />
  <source src="event3_causal.m4v" type="video/m4v" />
  <source src="event3_causal.webm" type="video/webm" />
</video></td>  
<script type="text/javascript">
var video = document.getElementById("stimulus");
// Bedienelemente ausblenden, sobald es abspielt
SoSciTools.attachEvent(video, "play", function(evt) {
  stimulus.removeAttribute("controls");
});
// Weiter-Knopf ausblenden
SoSciTools.attachEvent(window, "load", function(evt) {
  SoSciTools.submitButtonsHide();
});
// Weiter-Knopf am Ende des Videos wieder anzeigen
SoSciTools.attachEvent(stimulus, "ended", function(evt) {
  SoSciTools.submitButtonsDisplay();
});
 </script>
<!-- This is cell 2/2, td = table data -->
    <td><video width="384" height="216" controls controlsList="nodownload" id="stimulus2">
  <source src="event3_noncausal.ogg" type="video/ogg" />
  <source src="event3_noncausal.m4v" type="video/m4v" />
  <source src="event3_noncausal.webm" type="video/webm" />
</video></td>
<script type="text/javascript">
var video = document.getElementById("stimulus2");
// Bedienelemente ausblenden, sobald es abspielt
SoSciTools.attachEvent(video, "play", function(evt) {
  stimulus.removeAttribute("controls");
});
// Weiter-Knopf ausblenden
SoSciTools.attachEvent(window, "load", function(evt) {
  SoSciTools.submitButtonsHide();
});
// Weiter-Knopf am Ende des Videos wieder anzeigen
SoSciTools.attachEvent(stimulus2, "ended", function(evt) {
  SoSciTools.submitButtonsDisplay();
});
 </script>
</tr>
</table>

Answer 1

The challange is usign different variable names. At the moment you write:

var video = document.getElementById("stimulus1");
...
var video = document.getElementById("stimulus2");

That means: The variable video is first set the first player and then, milliseconds later, to the second one. That means that is does not refer to the first video any more.

Please rename this variable in the second part (or in both parts), for example

var video1 = document.getElementById("stimulus1");
...
var video2 = document.getElementById("stimulus2");

Please do not forget to also rename the video in the susequent JavaScript code.