Resource types

Hiding media controls (for tests)

Picture of Ralph Trimnell
Hiding media controls (for tests)

We're trying to set up computer based language tests. To test listening comprehension we need to prevent students from 'rewinding' audio and listening more than a prescribed number of times...therefore undermining the validity of the test.  Basically, we need to hide the media player controls!

This is easy to do with CSS and JavaScript - hide the audio tag element using css and use a button to trigger a JavaScript function to load and play the audio file. How can I achieve the same result in Moodle 3.1?  

Any suggestions welcome! I'm a newbie here so I apologise if this has been answered before. I've searched the forums but I might have the wrong keywords...

Average of ratings: -
Picture of Marina Glancy
Re: Hiding media controls (for tests)

Hi Ralph,

as a teacher you are able to insert CSS and JS code in the texts, for example it the text of the questions. In order to do it you need to either switch to "HTML/code view" in Atto editor (see here) or disable the atto editor at all in your preferences. Here is some good example

However it will still be possible for the students to open firebug or code inspector, remove all your css/js and listen the audio file as many times as they want. I can't think of any way to prevent it unless you use flash or java applet or maybe there is some other cross-platform non-html solution.

Average of ratings: -
Picture of Ralph Trimnell
Re: Hiding media controls (for tests)

Hi Marina,

Thanks for the info! After a lot of playing around I finally found out what the problem was - using <button onclick="callfunction()">  seems to cause the page to refresh. Using <span onclick="callfunction()">  gets round the problem. I guess there is some kind of conflict with the buttons in the atto framework.

Here's the code in case anyone else has the same problem:

   <audio id="audioTrack"> //leaving out the 'controls' attribute to hide the element

       <source src="path_to_file.mp3" type="audio/mpeg">


<span class="fakeButton" onclick="document.getElementById('audioTrack').play()">Click here to start audio</span>

It's true that the code inspector allows students to cheat, but they will be doing exams in a monitored environment... the aim of moving to computer based is cut down on the marking!

Thanks again,


Average of ratings: Useful (1)