This section details hows the requirements from iteration one of the project where meet, it also shows that the project minimum requirements where also completed.
6.2.1 Requirement 1.1 - Development of a Moodle Theme
To get the right look and feel for Danum virtual learning environment, their own theme needed to be de- veloped. The designs for this theme can be seen with chapter 5, figure 5.1. The colour and layout chosen match Danum school current Internet website. To implement the theme, one of the existing theme needed to be copied and renamed, formal white theme was selected, copied and renamed to danum school.
Within the newly created folder are five important files that control the outcome of the theme, three of them are Cascading Style Sheets, one to control the colour (ds color.css), one to control lay- out (ds layout.css) and one more to control the fonts used (ds fonts.css). To other files relevant to the appear where header.html which control what appeared at the top of the screen when the
print header()function is called and footer.html which control what appeared at the bottom when print footer() is called.
To control what appeared at the top and bottom of the Moodle virtual learning environment, the header and footer files where both modified. The contents within these files was fairly static, the main bit of dynamic content was the navigational bar. The current logo was replaced with Danum schools logo. The default for Moodle is to have two different headers, one when on the home page and another for when you are else where. It was decided that one header should be used through the virtual learning en- vironment in order to aid consistency. Once both files where updated the appear of the VLE was checked.
When browsing through the VLE is was noticed that the header bar was sometimes cut off, i.e. only half the logo was displayed. To solve this problem the sizes for the header within the ds layout.css file had to be adjusted. The code below illustrated the new height for the header and shows the the header printed on the home page and all other pages are now the same. The sizes for the navigational bar where also adjusted accordingly.
#header-home { height:135px; border-width:0px; border-style:solid;} #header { height:135px; border-width:0px; border-style:solid;}
The next task was to assign the correct colour for the blocks, for the block header, the background colour of dark yellow (#FFC266) and for the body of the block dark blue (#5064A9), these colours match the colour scheme currently used by Danum Internet website. The appearance of the block was then tested, however the calendar block had not changed its style, further updation of the ds layout.css was needed.
To achieve the final look for the front page of the VLE, site description needed to be added. Allow Moodle did allow this to be done formally, the description could only be place either the left or right hand columns and could not be placed within the middle. From reading an extract from William Rice book on Moodle [25] it was discovered that topics could be added to the middle of the page, where a site description or important information could be added.
Before appearance could be classed at finished and the first requirement fully meet, the removal of the jump to drop down menu within the navigation bar needed to be removed, it was felt it was not needed and added to user confusion when using the system, also there was a problem of the jump to menu covering up the login information, meaning users would have to use the back button if they wanted to view a page with their logo information and link to their profile. To prevent the jump to menu being present, all called to print header() had to be modified, the code below shows a example of the call before and after the change. In total around 20 files which called the print header() function needed modification.
Original Call: print header(format string($forum->name), "", "$navigation" .format string($forum->name), "", "", true, $buttontext, navmenu($course, $cm);
New Call: print header(format string($forum->name), "", "$navigation" .format string($forum->name), "", "", true, $buttontext);
6.2.2 Requirement 1.2 - Changes to the categories and course pages
The main changes to the categories and course pages was the additional of department descriptions and the removal of the search options. The main files affected where view.php and category.php
which the course directory. Firstly to remove the search option from both pages the print course search(); deleted where ever it occurred within the files.
For including department descriptions, only the category.php within the course directory was affect, as this was the file responsible for printing individual category (departments) page. The first task was to investigate how the category details where stored, it was found all category details where stored in the table mdl course categories. Within this table there was a column called description of type text, however it never gets updated when different categories are created.
If the page was being displaying in normal mode, then only the description should be printed. To do this a new function was written called lookupDes() taking a category id as it parameter. The function makes use of the get record() function with the dmlib.php. The get record() function was used as it is more secure that writing PHP to carry out the query to the database. Once the description text is retrieved, it is checked to see if it is null and then return as a String by the function. The result of lookupDes()string is printed by category.php.
function lookupDes($id) {
$resources = get_record(’course_categories’, ’id’, $id); $description = $resources->description;
if ($description == null) {
$description = ’Please Enter Some Text’; }
return $description; }
The next stage for this requirement was to enable a user to edit the department description, existing code to make use of the HTML Editor was used and copied into two new functions within newFunction.php. It was important that the HTML Editor with the description within was only shown in the page was in edit mode, the code below shows how this was achieved. The if statement details below use a page variable to check if an administrator user is editing the page, if they are the description is placed within a HTML Editor so it can be edited. If the $adminediting variable was false, the normal description was printed. if ($adminediting) { printTextAreaTop($id); echo $description; printTextAreaBottom(); else {
echo ’<table align="center" width="80%" border="1">’; echo ’<tr><td>’;
echo $description;
echo ’</td></tr></table>’; }
The only thing left to do to satisfy this requirement was do save the updated description to the database, this was achieved using a new function in the newFunctions.php() which took the category ID and end description as a parameter. To update a specific category’s description, the update record() function was function, this required details of the table to be updated and a php class details what record to updated. The second to forth line of the code defines the php classed that can be used by the update record(), the relevant values are then assign to the class. The updated it then sent to the database and an appropriate message is printed if the updated was successful or failed.
function updateDes($id, $description) { class UpdateDes {
public $id;
public $description; } $update = new UpdateDes(); $update->id = $id;
echo ’<p> Description successfully updated!</p>’; } else {
echo ’<p>There was a problem updating the description, please contact your administrator</p>’; }
}
6.2.3 Requirement 1.3 - Changes to the edit course setting page
To toggles the visibility of the advanced options on the edit course setting page, a small javascript func- tion was written. This was placed in cookies.js as this is used by all files which contain the standard header. The code for the function is detailed below, the basic idea is it gets access to the document innerHTML, looking for a specific id for a piece of text and changing it visibility as necessary.
function toggle_visibility(id) { var e = document.getElementById(id); if(e.style.display == ’block’) e.style.display = ’none’; else e.style.display = ’block’; }
For the function to work, edit.html within the courses directed needed to be modified. A link was inserted at the top of the fields to be hidden and another link was placed after all the fields. When the link was clicked, the visibility for the fields would be updated. A new div class was created and given two properties, id and style. The id for the created div was created by the JavaScript function.
<a href="#" onclick="toggle_visibility(’advanced’);"> Show Advanced Options</a><br />
<div id="advanced" style=’display:none;’> Code for printing fields here
<a href="#" onclick="toggle_visibility(’advanced’);"> Hide Advanced Options</a><br /></div>