One of the most common “rookie mistakes” in building Moodle course content is copying from a document or web page and pasting directly into the HTML editor (WYSIWYG) window. Behind every formatted document is a set of code that tells the browser or other application how to display the content. These instructions range from font size and color to line spacing and bullet shapes. This code is not visible to you unless you go elsewhere to see it. In an HTML editor, such as those found in Moodle or WordPress, you can switch views.
This view can be a scary place for beginners, so most people (myself included when I was new at this) immediately switch back to a more familiar place; one with icons for Bold, Italic, Underline, bullets, and hyperlinks.
What does it matter? Well, the appearance of websites is controlled by cascading style sheets (CSS). Those files set the font characteristics (color, size, and family), bullet styles, background colors, border colors, and many other aesthetic features of a site. These settings are the defaults so that the user doesn’t have to do so much work and the theme can be changed without affecting the content. (For an explanation of themes and content, read this post.)
You can override the settings in a style sheet through the HTML editor. For instance, if I want to make this text Bold and Bee Gold, I manually change the font by clicking on the bold and the text color icons. Just as you set the default fonts in your desktop applications, you can do that for your Moodle site; this is accomplished through the theme’s CSS. You should keep your overrides to a minimum, though. If you copy/paste directly from other applications, you may be overriding your CSS without knowing it.
An example of how ignorance can be bliss:
I have copied a paragraph from Word into the WYSIWYG window on BeeLearn.com and it looks fine, right?
Appearances can be deceiving! Here’s what it looks like in the HTML code view. Notice all the extra stuff and this isn’t nearly as bad as some of the pages I’ve seen!
What I have essentially done is to override all of the settings of my CSS. I’ve told Moodle that I want that font to look exactly as it does in my Word document. I should be using the default fonts and colors that my CSS sets. If I change my theme (the CSS is part of the theme), my content won’t adjust. My Bold and Bee Gold text will remain that way. The font will stay as Trebuchet, even if I try to make it Georgia. Quotation marks and ampersands might show up as boxes instead of punctuation. Some browsers may not recognize the commands, so they’ll substitute other stuff; stuff I did not want. The code view should look like this:
If and when I change the theme, which might have a dark green background, white font, and white bullets, the content will change with it. The only thing that won’t change is the Bold or Bee Gold that I added manually. Whether I change the theme or not, I can be sure that my content will display nicely on most browsers; something that is not likely with all that crazy formatting behind the scenes.
What should you do if your courses are built in Word, PowerPoint, or some other desktop application?
- Copy/paste from any document (MS Office, PDF, etc.) into Notepad or some other text editor. Some formatting will carry through (like line and page breaks), but most will be scrubbed. Then copy/paste that text into your HTML editor (WYSIWYG). You will have to reformat the bold, italic, etc.
- Copy/paste from your document into the HTML view (the code side). You’ll have to do a lot of formatting, but you won’t have any rogue code. Switch back to the WYSIWYG window to do the formatting.
- In Moodle 1.9, after pasting from Word, click on the Clean Word icon in the WYSIWIG window. In Moodle 2.0, click the paste from Word or paste plain text icons which will bring up a smaller window; paste into that. Your formatting will be “scrubbed” of the bad formatting.
- Copying from another web page is a really bad idea. First and foremost, unless that web page is yours, you do not have the right to copy it! Content is copyrighted by default; there is no need to have a copyright notice. If it specifically states that you may copy it or if it is your page, you still don’t want to copy/paste it. The code is very messy and the appearance very much out of your control. Do not do this!
This might sound like a lot of work (and it is) but you’ll learn tricks and if you’re like me, you’ll get into a rhythym…select all, copy, paste, click, copy, paste, siss boom, bah!
If you’re thinking it would be easier to just link your existing desktop files in your Moodle course and avoid all this hassle, read What eLearning is NOT. Remember, anything worth doing is worth doing well. Creating a clean, robust Moodle course is definitely worth the effort!