Sunday, June 1, 2008

Create a D2L Homepage with Widgets

To add a Javascript widget to your Desire2Learn course, you first have to enable your own custom homepage, as opposed to the default page established by your institution.

Creating Your Homepage

Click on the Edit course link.

Select the Homepages option.

Click on New Homepage. Give your homepage a name. Click on Save to save the homepage.

Then, click on the Content/Layout tab in order to add content to your homepage - but first, click on the Panel Sizes button, which is just below the Edit Homepage button.

You need to decide on the proportion for the three panels (I usually have the center panel wider than the right and left panels):
Next, click on Add Widget for each area of the page in which you want to add content. Widgets include both Desire2Learn features, as well as widgets you create yourself. Usually I just add content to the panels and do not use the Header or Footer area, but that is all up to you. Notice that some Desire2Learn items, such as "News," appear as widgets. You can come back later and modify the content at any time.

When adding widgets, you can click on all the widgets you want to appear in the panel, and then click Save at the bottom. All the widgets you clicked will be added to that panel. You can reorder the widgets using the tiny dropdown menu next to the title of each widget, and you can always add more widgets. If you want to remove a widget, you can also do that using the tiny dropdown menu.

Next, click on Homepages again along the top of the screen, and you should see the new page you have created in addition to the default institutional page. To make your new homepage the current active page for your course, click on the Set button, and confirm your choice when prompted.

Creating Widgets and Adding to Homepage

Now that you have created a homepage, you can also create widgets to add to that homepage, following the procedure outline above.

To create widgets, click on Edit Course, and then select the Widgets option. Click New Widget to add a widget. In the Properties tab, give your widget a name, and click save. Then click on Content tab to add content to your widget.

If your widget will be a static widget, displaying the same content all the time, you can just put the content into the editing box, using either the Basic or the Advanced HTML editor.

If you want to create a dynamic widget containing a javascript, click on the HTML code icon that appears in the bottom far-left of the HTML editing window - I'm honestly not sure what the icon is supposed to represent - on my screen it looks like a page with a blue blob on it; any guesses what that blue blob is supposed to be? Anyway, it's the icon on the far left:
This will open up a new screen, where you can paste in your javascript.

When you are done, make sure you click Update at the bottom of the window. That will close the window, and return you to the HTML editor. Now, make sure you click on Save so that your script is saved. It will be "invisible" in the design view - but you will see the content displayed when you add the widget to your homepage.

Now, click on Edit Course, and go to your Homepages. Click on the name of your homepage to edit the Content/Layout. Click on the Content/Layout tab, and select the area of the page where you want to add your new widget. Click Add Widget and then click the check-box next to the widget. Then click Save to add the widget to that area of your homepage.

To adjust the position of the widget, use the up-down options in the tiny dropdown menu to the right of the title of the widget (see the screenshot above for the little dropdown menu next to each widget).

Then, click on Course Home in order to see your widget in action!

It should also be possible to add a javascript directly into the News area of Desire2Learn, but the HTML Editing options there are broken. Desire2Learn is working on a fix for this problem, and I will post something here as soon as they have solved it. If you have a course which previously used javascripts in the News area, you will see that those scripts are no longer working, but I hope that the problem will be taken care of soon!

Some dynamic content may not display if you are reading this blog via RSS or through an email subscription. You can always visit the How-To Tech Tips blog to see the full content, and to find out how to subscribe to the latest posts.