You can find my Moodle course at http://moodle.met.ubc.ca/course/view.php?id=126.
The Set-up
Read my first reflection on setting up a moodle site.
Setting up the LMS was straight forward except I wasn’t sure what to name the course site. I named the course site with my name so it would be easy for peers/prof to find it. In a real situation, I would name the site with a course code and title.
I originally locked the course. I was exploring the settings and set up an enrollment key. This caused issues when my professor tried to see my quiz. I remember seeing other courses that I couldn’t get into but I didn’t clue in that others couldn’t get into mine.
Dooh!
Splash Page
I am a PhotoShop user so I absolutely loved the chance to make a photo-montage for my splash page. It took quite a few hours to create but I enjoyed every moment. The montage has 12 separate images. I use a mask and opacity setting for each image to get the layered effect. I sliced up the image into 8 pieces and exported them and jpegs. For the rollover effect, I increased the opacity for the 3 images I wanted to highlight and then exported them. Of course, the interaction caused me headaches. Here is a list (in order) of what I did to make the image rollovers work … and how it turned out:
- Internal javascript (js)
Action: I used Dreamweaver’s built in image rollover feature.
Moodle Reaction: Moodle deleted the javascript and only left me with some text. I got the montage but no rollover
Possible Reason: Internal javascript can only live in the head element of html. Moodle only lets you add to the body. - External javascript (js)
Action: I put all the javascript that resided in the head element and put it into an external js file
Moodle Reaction: I got the montage but no rollover
Possible Reason: I rarely use external js files so I probably call the function incorrectly. I looked at several tutorials and tried several times to get it to work. - HTML and CSS version 1.0
Action: I explored a couple of CSS web sites and found some simple html and css code.
Moodle Reaction: My mouse-off images did not appear even though the mouse-over images did… very strange. It worked locally but not on moodle.
Possible Reason: I don’t have the fainest idea, so I just moved on. - HTML and CSS version 2.0
Action: I uploaded everything (html, css and images) up on my web server. I created an iframe on the moodle splash page and used an absolute path (the web address to the web page on my web server) in the frame.
Moodle Reaction: Moodle displayed the GUI with no problems although I do notice that since the images are not preloaded, the browser has a slight delay loading the over images. This is not noticeable locally or from the web page on my server.
I personally have never used iframes before so it was a good learning experience.
One of my peers can not see the contents of the iframe. I believe her service provider (her school) thinks I my website is malicious. I bet their IT folks just block anything that is in an iframe as a standard rule of thumb… not sure but that would be my guess.
For those that can’t see my GUI on moodle, you can find it at see the resulting GUI http://www.jdwwebdesign.com/masters/moodle/page.html
I wonder if iframes will work here. Let’s try it.
It works!… but this blog keeps erasing the code. So far I have pasted the iframe element into the HTML 4 times. I do flip back and forth between the ‘Visual’ and ‘HTML’ tabs while editing. I wonder if that is doing it? Does anyone know?
Technology is great when it works.
Using a Moodle Background Image
Did you notice I use a background image in the iframe that matches the background image of the wood theme in moodle? In the CSS, I use an absolute path to the image which is loaded on the moodle server.
This is how I did it…
- I view the source code of my moodle home page. In the head lies the path (also known as url or address) to the external style sheet for the wood theme.
- I type the path into the address bar of the browser and go to the location. The external CSS appears in the browser window.
- I then read the CSS and find the url of the background image. There are 5 backgrounds images for the wood theme. The paths are relative so I have to figure out where the images are on the moodle site (what folders they are in).
- I change the url in the address bar of the browser to call the image and poof, the image appears in the browser. I could have taken the image but why, when it is already on the site. I merely use the absolute url and put it in my external css.
I know this sounds confusing but it is really quite simple to do as long as you know how to read HTML&CSS and understand relative & absolute paths. WYSIWYGs are not always the easiest ways of doing things. I find they restrict you and your abilities to figure things out. People are often in a hurray and want the quick fix. When you take the time to learn to do something properly, it ends up saving you time in the long run
Time Released Module
The time released module isn’t what I expect. I am an experienced Desire2Learn user so I am expecting the same sort of functionality in Moodle. That is not the case. Since it is my first time using the lesson activity, I use a very basic lesson in my CSS placement review module. I let the user move on to the next page once they have answered a question correctly. The module acts as a review of 3 key concepts in css. The questions are not challenging but they reinforce the concepts and differences of external, internal and embedded styles. I tried to include my Links video, (the same video in the HTML & CSS module) but I was having trouble getting the embedded object to work. I tried using an iframe as I did with the splash page but it was a no go.
HTML and CSS Modules
I reflect on these modules in my posting Addicted to Moodle. Basically, the File Management module is completely contained inside moodle and the HTML & CSS module is linked to an external site. I wanted to see the challenges of both ways of doing things. The linking to the external site was the easiest but moodle can’t track the students progress. I can’t tell if the student visited all the pages. The internal module was more time consuming. I built it externally first and then uploaded the files into moodle. I have to play with the external css to make the colours work. Obviously the colours for the external module do not work at all. The external module does contain a couple of videos that I made with Camtasia studio. Loading videos on moodle is problematic due to the file size restrictions.
Discussion forum
I have built several discussion forums but only 2 are built for groups.
- The Group Wiki Discussions.
Each group can only see their own group, the other group discussions are invisible. The wiki is built for group presentations so giving a group their own discussion area helps facilitate the team building outside of the public wiki - Most useful CSS properties Forum.
Each group works in their own group, but can also see the other groups discussions.
I did manage to populate the groups with people.
Asynchronous Activity
I use a wiki for an asynchronous, Digital Literacy JigSaw . I found the wiki easy to set up but definitely different from other wikis. I tried a blog 1st with no luck. I noticed other classmates tried as well but no one had success. I think it is because the way moodle is set up for our ETEC 565 class.
Overall
Building a course site on moodle is great experience. Not only does it help the resume but it gives me the chance to see how other LMSs work. I now have experience and can build courses on Desire2Learn, WebCT and Moodle. The hands on experience let me explore and try several different things. I often failed and had to redo things. Failing always helps me problem solve and when I problem solve I learn so much more. I would rather do and fail than talk about “doing”.