Here is my code
<form method="POST" action="processes/csr_listening_test_results.php">
<div class="card">
<div class="card-body p-2">
<button class = "waves-effect waves-light btn btn-primary" type="button" name="button" id = "btn1" onclick = 'playAudio("../audio/Tofel_Listening_Test_1_(5 questions with answers).mp3" ,"1")'> Play</button>
<label id = "audioTime1"> </label>
<h6>Active Listening Skill Test #1</h6>
<div id="test_one" class="applicantQuestions e1">
<!-- <audio class="audio_test_one" id="audio_test_one" autoplay><source src='../audio/Tofel_Listening_Test_1_(5 questions with answers).mp3' type='audio/mpeg'></audio>
<button type="button" class="btn btn-sm btn-primary" id="play_audio_one" title="Play Audio"><span class="m-1"><i class="fas fa-play hvr-pop"></i></span></button> -->
<!-- <div class="font-weight-bold" id="timer_test_one"></div> -->
<?php
$test_one=array("Question #1: What was the woman’s problem?"=>array("She does not have enough time to finish writing her paper.","She is concerned about receiving a poor grade in history.","She is confused by her professor`s’ response to her paper.","She doesn`t think her professor graded her paper fairly."),"Question #2: What is the conversation mainly about?"=>array("A place that is special.","Problems with families.","Plans for a school vacation.","A popular beach resort."),"Question #3: What is the woman mainly discussing?"=>array("Her courses in child development.","Her internship at a children`s agency.","How to look for a job after graduation.","How to organize a political campaign"),"Question #4: What problem does the man have?"=>array("He has difficulty remembering some terms.","He is not skilled at climbing trees.","He will not able to take the botany quiz.","He can`t decide which botany course to take."),"Question #5: How does the woman help the man?"=>array("She shows him how to put words in alphabetical order.","She tells him that memorization is not a good way to study.","She gives him a list of names beginning with “P” and “X”","She suggests that he imagine a tree with key letters on it."));
$i=0;
foreach ($test_one as $test_one_key => $test_one_value) {
$i++;
echo "<div class='row m-1'>
<div class='col-md-6'>
<label class='font-weight-bold'>".$i. "." .$test_one_key."</label>
</div>";
$j=0;
foreach ($test_one_value as $test_one_choices) {
$j++;
echo "<div class='col-md-8'>
<div class='custom-control custom-radio'>
<input type='radio' class='custom-control-input' name='exam_answer".$i."' id='exam_answer".$i."".$j."' value='".$test_one_choices."'>
<label class='custom-control-label' for='exam_answer".$i."".$j."'>".$test_one_choices."</label>
</div>
</div>";
}
echo "</div>";
}
?>
</div>
<!--Test II-->
<hr>
<button class = "waves-effect waves-light btn btn-primary" type="button" name="button" id = "btn2" onclick = 'playAudio("../audio/Tofel_Listening_Test_2_(5 questions with answers).mp3" ,"2")'> Play</button>
<label id = "audioTime2"> </label>
<h6>Active Listening Skill Test #2</h6>
<div id="test_two" class="applicantQuestions e2">
<!-- <audio class="audio_test_two" id="audio_test_two"><source src='../audio/Tofel_Listening_Test_2_(5 questions with answers).mp3' type='audio/mpeg'></audio>
<button type="button" class="btn btn-sm btn-primary" id="play_audio_two" title="Play Audio"><span class="m-1"><i class="fas fa-play hvr-pop"></i></span></button> -->
<!-- <div id="timer_test_two"></div> -->
<?php
$test_two=array("Question #1: What is the talk mainly about?"=>array("The best places to park on campus.","Services of the Safety and Security Office.","The increasing need for campus security.","Reporting criminal incidents on campus."),"Question #2: What is the topic of the lecture?"=>array("Traditions of American Indian Lectures.","How religion, art, and culture are related.","Different ways to view American culture.","The vision quest of the Plains Tribes."),"Question #3: Which of the following best describes the organization of the talk."=>array("Reasons to buy property-liability insurance.","Instructions for buying life insurance.","A classification of insurance.","A history of insurance."),"Question #4: What is the lecture mainly about?"=>array("How ancient rivers created deserts.","How scientists work in the desert.","How to walk on sand dunes.","How sand dunes shift position."),"Question #5: What is the lecture mainly about?"=>array("Research in pain management.","The benefits of exercise.","Why people have faith in doctors.","The chemistry of the human brain."));
$i=5;
foreach ($test_two as $test_two_key => $test_two_value) {
$i++;
echo "<div class='row m-1'>
<div class='col-md-6'>
<label class='font-weight-bold'>".$i. "." .$test_two_key."</label>
</div>";
$j=0;
foreach ($test_two_value as $test_two_choices) {
$j++;
echo "<div class='col-md-8'>
<div class='custom-control custom-radio'>
<input type='radio' class='custom-control-input' name='exam_answer".$i."' id='exam_answer".$i."".$j."' value='".$test_two_choices."'>
<label class='custom-control-label' for='exam_answer".$i."".$j."'>".$test_two_choices."</label>
</div>
</div>";
}
echo "</div>";
}
?>
</div>
<button class="btn btn-success waves-effect btnSubmit b1" type="submit" name="btnSubmit">Submit</button>
</div>
</div>
</form>
var audioList = [];
function playAudio(audioName , buttonName) {
var listHolder = "e"+buttonName;
var submitBtns = "b"+buttonName;
var myAudio = new Audio(audioName);
audioList.push(myAudio);
audioList.forEach(aud => {
aud.pause();
aud.currentTime = 0;
});
myAudio.play();
document.querySelectorAll('.waves-effect').forEach(myBtn =>{
myBtn.disabled = false;
});
document.getElementById("btn"+buttonName).disabled = true;
myAudio.addEventListener('loadedmetadata' , function() {
this.setAttribute("ontimeupdate" , Math.floor(this.duration / 60));
this.addEventListener("timeupdate" , function(){
let seconds = Math.floor(this.currentTime);
let fullDuration = Math.floor(this.duration - 1);
if(parseInt(seconds) == parseInt(fullDuration)) {
document.querySelectorAll("."+listHolder).forEach(myList => {
myList.style.display = "block";
});
document.querySelectorAll("."+submitBtns).forEach(myList => {
myList.style.display = "block";
});
document.getElementById("audioTime" + buttonName).innerHTML = "Please Answer Questions Below!";
}
var currentMinute = Math.floor(this.currentTime / 60);
var currentSeconds = Math.floor(this.currentTime - currentMinute * 60);
var minuteDuration = Math.floor(this.duration / 60);
var secondsDuration = this.duration - minuteDuration * 60;
secondsDuration = Math.floor(secondsDuration);
if(minuteDuration <=9 ){
minuteDuration = "0"+minuteDuration;
}
if(secondsDuration <=9 ){
secondsDuration = "0"+secondsDuration;
}
if(currentSeconds <=9 ){
currentSeconds = "0"+currentSeconds;
}
if(currentMinute <=9 ){
currentMinute = "0"+currentMinute;
}
var toDisplay = ` | ${currentMinute}:${currentSeconds} - ${minuteDuration}:${secondsDuration}`;
document.getElementById("audioTime" + buttonName).innerHTML = toDisplay;
});
})
}