I want an alarm to sound 5 minutes before the end of an exam using javascript

JavaScript
1

Hi,
I’m afraid I don’t know much about javascript.

I made an online exam for a friend. He asked if I could make a bell ring or a message sound 5 minutes before the end of the exam, so the students don’t wait too long before pressing “Send” or they can’t send their answers.

All I can do is look around, get bits of code and try and make it work!

I have this, but I get no sound. What am I doing wrong??:

<script>
// if later than h, play the sound. It's 10am here now!
// set the minutes later
var h = d.getHours();
if (h > 7){
           // I put a hidden input on the page, with the value of the sound file
			// <input type="hidden" id="musicloc" size="55" value="fullstop.mp3" /> 
    			var sound = document.getElementById("musicloc").value;
    				 playSound(sound);
    			}

    // this should make an audio element and then play the sound			
    function playSound(soundFile) {
    	var audioElement = document.createElement('audio');
   // maybe here the problem? What is 'src'?
    	audioElement.setAttribute('src', soundFile);
    	audioElement.play();
		}

</script>

Very grateful for any tips or pointers!!

2

It works for me. https://jsfiddle.net/1qnLcaw4/

You can use the browser’s network panel to help troubleshoot problems, such as if it has trouble accessing the sound file.

3

I didn’t have:

var d = new Date();

in there, so

var h = d.getHours();

was throwing an error. Fixed that.

But now, Firefox console shows:

Autoplay is only allowed when approved by the user, the site is activated by the user, or media is muted. [19BEsW13.html:259:18](file:///var/www/html/Neil_Exam/FirstYear/19BEsW13.html)

NotAllowedError: The play method is not allowed by the user agent or the platform in the current context, possibly because the user denied permission.

​How do I allow user to play the file??

At the moment I am just trying this on localhost

4

I don’t think that you can, because the web browser is protecting the user from unapproved behaviour.

5

Hi, thanks for your replies!

Apparently, I can’t autoplay the sound file. The user will have to interact with the page, so I have the code below.

I would just like the countdown to start from the beginning of the exam, whenever that is, Neil hasn’t told me yet.

The students will log on at different times, some late. The login will be open 10 minutes before exam begin.

Could you help me modify this to start the countdown from say June 22nd, 10am? The alarm should ring at 10:55am

<script>
let startBtn = document.getElementById("start")
startBtn.onclick = function (e) {
    e.preventDefault()
    let count = document.getElementById("count")
    let interval = window.setInterval(function () {
        count.textContent = --count.textContent;
        if (count.textContent == 0) {
            clearInterval(interval);
            let bell = document.getElementById("bell")
            bell.play()
        }
    }, 5000)
}
</script>

The button is here. This sets a 50 second pause:

<div>
<h2> ATTENTION: BEFORE YOU START, CLICK THIS BUTTON. THEN YOU WILL HEAR A REMINDER 5 MINUTES BEFORE THE EXAM ENDS.</h2> 
<audio id="bell"> <source src="mp3/距离交卷.mp3" /> Your browser does not support the audio element. </audio>
<p id="count" style="font-size: large;">10</p>
<button id="start">Remind After 10 Secs</button>
</div><br>
6

Your code currently waits 50 seconds before playing the sound.

(Hint: 5000 milliseconds = 5 seconds… and the value in the ‘count’ paragraph is 10… 5*10…)

You want to instead make it wait the number of (milli)seconds equal to the Difference between Now (Date.now())and A specified time and date Date.UTC(Y,M,D,H,m,S)…

7

Thanks for your reply!

I am just wondering how to start the countdown at exam begin, say June 22, 10am, irrelevant of when the student clicks the button.

If student wants an alarm 5 minutes before the end of the exam, he or she must click the button, because the sound cannot play without input from the user.

But the countdown can start without user input.

That is similar to how I disable the send button for the exam. I have a line like this at the beginning of my html forms:

<form action="php/getcw19BEsW13.php" method="POST" name="myForm" onsubmit="return checkForExpiration();" >

So I need something like (assuming start is 10am):

var terminate = new Date(“June 22, 2020 10:55:00”);
if(startBtn.click AND terminate){

bell.play()
}

Like I said, I don’t know much about javascript, but I’m pretty sure that can be done.

I have been told, for an expert, it is trivial to alter such javascript on a webpage. I do not think our students have sufficient knowledge to do that , though. I certainly do not know how to change that live in a web browser.

8

It seems that a much more reliable solution is to just set an alarm on your cellphone.

4 Likes
9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.