{"id":46,"date":"2010-01-13T17:01:46","date_gmt":"2010-01-14T01:01:46","guid":{"rendered":"https:\/\/blogs.ubc.ca\/jwhitehead\/?page_id=46"},"modified":"2010-04-18T15:20:43","modified_gmt":"2010-04-18T23:20:43","slug":"course-site","status":"publish","type":"page","link":"https:\/\/blogs.ubc.ca\/jwhitehead\/course-site\/","title":{"rendered":"Course Site"},"content":{"rendered":"

You can find my Moodle course at http:\/\/moodle.met.ubc.ca\/course\/view.php?id=126<\/a>.<\/p>\n

The Set-up<\/h4>\n

Read my first reflection on setting up a moodle site.<\/a><\/p>\n

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.<\/p>\n

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.
\nDooh!<\/p>\n

Splash Page<\/h4>\n

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:<\/p>\n

    \n
  1. Internal javascript (js)<\/strong>
    \nAction<\/em>: I used Dreamweaver’s built in image rollover feature.
    \nMoodle Reaction<\/em>: Moodle deleted the javascript and only left me with some text. I got the montage but no rollover
    \nPossible Reason<\/em>: Internal javascript can only live in the head element of html. Moodle only lets you add to the body.<\/li>\n
  2. External javascript (js)<\/strong>
    \nAction<\/em>: I put all the javascript that resided in the head element and put it into an external js file
    \nMoodle Reaction<\/em>: I got the montage but no rollover
    \nPossible Reason<\/em>: 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.<\/li>\n
  3. HTML and CSS<\/strong> version 1.0
    \nAction<\/em>: I explored a couple of CSS web sites and found\u00a0 some simple html and css code.
    \nMoodle Reaction<\/em>: My mouse-off images did not appear even though the mouse-over images did… very strange. It worked locally but not on moodle.
    \nPossible Reason<\/em>: I don’t have the fainest idea, so I just moved on.<\/li>\n
  4. HTML and CSS<\/strong> version 2.0
    \nAction<\/em>: 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.
    \nMoodle Reaction<\/em>: 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.<\/li>\n<\/ol>\n

    I personally have never used iframes before so it was a good learning experience.<\/p>\n

    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.<\/p>\n

    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<\/a><\/p>\n

    I wonder if iframes will work here. Let’s try it.
    \n