How to use the Javascript template in Moodles Database Activity Module

There is a javascript template located in the Moodle Database Activity Module so instructors can recognize when students click buttons or hover over textareas, and other such basic functionality.

In the jstemp.jpg, you can see several examples of working javascript.
The first function called fillBoxes() will make the input fields = “Hello World” as you can see in the picture.

document.getElementById(‘field_493’).value = “Hello”

This line searches the document for an element with the id=“field_493” and changes its value to “Hello”.
The getElementById function requires a string parameter to work, in this case being “field_493”.
Most HTML document elements, whether a button, a picture, a string, have an id/class/name that you can fill such a parameter with. You can investigate this by right clicking the website and clicking “Inspect Element” (Chrome/FireFox) or “View Source” (Internet Explorer).

When we inspect the Moodle database website, we see in the picture that the first input field by Url: has the id=‘field_493’. Having found the element, we change the value to “Hello” using javascript, which you can see in inspect.jpg

window.onload = function()

This part of the code indicates that when the website is loading, run this function. So everytime someone loads up the database with this javascript template, the code will run, looking for a field “field_493” and changing its value to “Hello”

Another way to use javascript is in making buttons. Here we want an alert box to pop up when the button is clicked. First, looking at buttonjs.jpg we write the function
alert()
which will accept a string as a parameter to display in the alert window.

We go into our single template singletemplate.png, clicking the ‘<>’ in the editor, and add tags in HTML to create a button on our single template page. We also add the event “onclick” so when the button is clicked, the function “button()” is run. There are tons of events supported by various tags, like “onhover”, “ondoubleclick”, which you can easily google.

Now, as in the file buttonpopup.jpg when we go to our single template, there should be a button, which when clicked will run button(), displaying an alert box.