Saturday, July 26, 2008

Presenting Google Docs inside of a Flexpage Course.

For content rich sites, and to provide a simplified, web-site like navigational flow through interactive content in Moodle, we built a new Moodle course format called "Flexpage". In the previous tutorials, we discussed how to load files from Google Docs into Moodle resources. These resources can be presented within the Flexpage course format, which alleviates the use of pop-ups (a problem some students have in content rich courses is that when there are many resource pop-ups, non-technical users may have a hard time understanding how to close the windows, and/or not understand how to use the browser's "Back" button to navigate back through pages to get back to the course) - the Flexpage format was designed to reduce some of these common navigational problems.

Code and tutorial links:
This tutorial assumes a site where the optional Flexpage course format has been properly installed. You can download Flexpage from here: tutorials for the Flexpage format are located here: You can see a great example of the Flexpage format in use on Cisco Systems Entrepreneurship Institute:

In the previous tutorials, we saw how to add files from Google Docs to a standard Moodle installation in various ways. If you followed this tutorial on your own, demo, Moodle installation (and as a responsible Moodler you would try new things on your demo installation before trying them on your production installation, right!?), you can install the Flexpage course format on your demo server and then use the same files you added in the previous tutorials.

1) If your course is currently in Topics (the default Moodle format) or other format, then switch it to the Page format, by clicking "Settings",

and then choose "Page" from the drop down menu. Make sure you also have one of the Flexpage compatible themes (page, or moodlerooms in the download) installed and set your course to use it, to fully utilize the Flexpage features described in this tutorial.

2) Choose the "Page Format" and then scroll down and click "Save Changes".

Unlike Moodle's standard formats, which come pre-loaded with certain blocks, the Page format presents you with a' tabula rosa', literally, a blank page. Relax, that is what it supposed to do.

3) To create your first page, click the "Turn editing on" button, and then click the "Add Page" tab. Give the page a name, and set the various settings as needed, then "Save changes". For a full tutorial on the Flexpage format, click here:

Now we are ready to add some of our GoogleDocs content to the page(s) we will create in our course. If you have installed the Page format on your demo Moodle installation, and switched the course you added the demo content to to Flexpage format, then your content will already be loaded and ready to load in the Flexpage. If you have not loaded content in your Flexpage demo course, then skip down to step below to see how to do this.

4) To add content that was previously added into a Topics format course, choose the Moodle resource from the "Add existing activity" drop down.

We'll add the Google Presentation resource we created back in the previous tutorial.

When we first add this, everything looks pretty much the same as it did in the standard course, huh?

This is because the resource is set to display in a New window. If you click it, that is what it will do. So lets see where the magic is.

5) Click the edit icon next to the name of the resource (make sure 'Turn editing on' is checked').

This opens the resource editing screen we covered previously.

6) Scroll down to the "Window" settings, and choose "Same window". This tells the Flexpage course format to render the resource on the page, rather than make a link to it.

7) Click "Save and return to course".

Now the resource is displayed in the course:
Click "Turn editing off" to see the resource as students will see it.

8) Now lets add another page. We'll add this page as a 'child page' of the Google Docs page. See the Flexpage tutorials discussed above for more information on Child pages and Parent pages.

We get another blank page.

9) Now, choose the "Mid Semester Evaluation" we added previously from the "Add existing activity" drop down.

Again, it just shows a link.
10) Click the edit button as we did above for the Presentation, and set the resource to show in the same window.

The form is embedded in the course.

That is pretty neat, but we still don't have a way to navigate around the course. Lets add a menu.

11) Click the Manage Activities tab.

This shows us an overview of all the modules and resources that have been added to the course so far.

12) To add a menu, choose "Page menu" from the "Add an activity..." drop down.

13) This opens the menu editing screen, here you can give the menu a name (1), and lets check the use as tab (2) box to have the menu show as a tab. Check that visibility is set to "Show" (3), and finally, click the "Save and display" button.
Now we'll see the empty menu, ready to have pages added.

14) To add pages, click the "Edit" tab.

We can put all sorts of stuff in a menu, but for now, lets just add the Google Docs page we created in step above.

15) To do that, choose "Google Docs" from "Add format page" drop down, and then click "Add links".

Now we can see the Page has been added to the menu.

As you learned in the Flexpage tutorial, you can add more pages to the menu, external links, etc. The pages can be re-ordered in the menu, using standard Moodle move icons. The same page can be added to multiple menus, also. Since we added the Form page as a child page of the Google Docs page, it shows up automatically (currently the 'moodlerooms' theme is set to show parent pages all in capitals, this can be changed in the theme css).
Since we set the menu to show as a tab in step above, we can now see the tab, and click it to return to the course.
Of course, we could also use the Moodle breadcrumbs.

16) Back on the course page, we have some options now. We can also add the menu to the page, for example. Perhaps we don't want it as a tab, or perhaps we want it to be in both places (for instance, so people without javascript can still navigate easily).

17) The menu will show up below the presentation resource, by default, but we can click the standard Moodle move arrow to move it over to the left column.

Now we can click the child page (in this case the "Form Page") link to go to the child page.

18) Now this is a new page, so we have to add the menu to it also (remember that tabula rosa thing:-). Someday it would be nice to be able to have a module show on all Flexpages pages, wouldn't it?

Anyway, easy enough to add the menu to this page,
and notice that now it is highlighted on our page (since that is the page we are on). The colors, etc. are all managed in the theme css.

One nice thing about this is that our navigation after sending the form is perhaps a bit nicer, now once we submit the form we are still on the same page and can use the menu or the tab to go to other pages.

Adding a new Moodle resource to a Flexpage course:

So now lets see how to add a brand new activity from Google Docs to a Flexpage Moodle site. First of course I need to have a Google Docs file to put in the course.

19) This time, lets put in a regular Document (Writely) file. I've got one in my Google Docs, so I'll go publish it by checking the box next to it's name (1) and choosing "Publish" from the "More actions" drop down menu (2).

I like to check the "Automatically re-publish" checkbox (1), so that when I update the document the latest version is published. Either way, click the OK button on the pop-up. This publishes the document for anyone who knows the URL.

As we've seen before, Google Docs gives you the link to the document. Now, you could just copy this link, and paste it into a "Link to file or website" resource type, as we've done before. Part of the reason I've gotten you comfortable with iframes, though, is because I want to embed this document in a Flexpage, rather than just link to it. Putting it in the Flexpage means that the document can be presented 'in-context', in the course's navigation.

19) So, copy the link, and lets move on!

20) Now we'll go back into your Moodle course, turn editing on, and click "Manage Activities":

Give the new resource a name, as we've done before.

This is where things get a bit tricky. You'll need to write the iframe code, and then insert the link to the file from above.

Here is some sample iframe code:

<iframe width="720" height="400" frameborder="0" src="" marginheight="0" marginwidth="0">Loading...</iframe>

Switch to code view, as we've done in previous tutorials. Next, paste in the iframe code from above. Finally, look where you see the src tag:


The link (URL) to the document is between the quote marks, after the src= (in green above). Replace the URL from the sample code with the URL that Google provided you when you published the document in step 19 above.

20) Now scroll down and set the "Window" settings to "Same window" as we've done before. Click the "Save and return to course" button.

21) Now we'll create a new page to put the file on, as we've done previously. Set the settings as you like, and then click "Save Changes".

22) Now add the resource we just created to the page.

And you can see the page in Moodle.

You see the edit toolbars, because I am still logged in to Google Docs. This is a also a nice benefit of using the iframe, since we are actually loading the page from our Google Docs account, I can edit the document directly from within my Flexpage in Moodle. Of course your students won't be logged into your Google Docs account, so to see what your students will see, sign out of your Google Docs account.

23) If you are logged in, click "Sign out". Of course, with Google Docs you can give your students write access to the document, so they can also edit, but that is a later tutorial:-).

Now you can see the page in non-editing view.

Now, we've created a page, and added a file from Google Docs to the page. Next, we'll add the page to the menu.

24) To do so, go into Manage Activities, and click on the edit icon next to your page menu, as we did in step above.

25) Choose the page you've just added, and click "Add links".

Now the page will show up in your menu. For one last thing, (if as we haven't done enough!), lets move the page from below the "Google Docs" link in the menu, to above it. Moving menu items around in the Page Menu uses the standard Moodle 'move' icons.

26) Click the move icon next to the page ("The Great Vasa") in the below image.

27) Click the empty box where you would like the menu to go.

Now when you look at the drop down menu, the page shows up first.

Summary: Flexpage provides a way to present content rich courses within a navigation and menu-ing system that is easy for users to get around in. Documents from Google Docs can be placed in Flexpages to enables teachers to have a free content authoring and publishing system. Flexpage also enables the placement of various modules such as Discussion forums and Quizzes on the same page as the content that is being discussed.