Can't display the questions in div

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> &nbsp;
	 					<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> &nbsp;
	 					<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;
      });
    })
  }

I have replaced the PHP code with the HTML equivalent, and used my own mp3 files and things seem to work on the page. The scripting code appropriately disables the play button and shows the appropriate time.

It looks like there’s nothing of JS interest happening here. Shall I move this to the PHP forum?

3 Likes

Yes, there is a JavaScript

Yes there is, and the JS works flawlessly by all accounts.

That leaves the PHP to be investigated, which is why this thread is here in the PHP forum now.

I saw this, but I don’t really understand the question being asked.