After making modifications to the QuickQuiz code found at https://github.com/UrbanInstitute/quick-quiz, I have replaced the img with an embedded mp4 video that loads from a JSON file. Additionally, I switched from using the original SweetAlert library to SweetAlert2. My goal now is to pause the playback of each video when any one of the four quiz buttons, identified by the class "quiz-btn btn", is clicked. These buttons trigger the SweetAlert2 dialog using swal.Fire.
I attempted to include scripts on the page in order to achieve this:
document.querySelector("#quiz > div > div.item.active > div.quiz-answers > div:nth-child(1)").addEventListener("click",function() {
document.querySelector("#quiz > div > div.item.active > div.ncc.text-center > video").pause();});
I also tried:
$('.quiz-button btn').on('click', function() {
$('#video').attr('src', ''); });
I added these directly into the code but only managed to stop the first video from playing when the buttons were clicked. Unfortunately, the subsequent videos did not stop playing. Any assistance would be greatly appreciated. Thank you in advance.