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: http://development.moodlerooms.com/ tutorials for the Flexpage format are located here: http://development.moodlerooms.com/course/view.php?id=7. You can see a great example of the Flexpage format in use on Cisco Systems Entrepreneurship Institute: http://ciscoinstitute.net/course/view.php?id=76

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: http://development.moodlerooms.com/course/view.php?id=7

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="http://docs.google.com/Doc?id=dfhbhqd7_1267zg8ttfq" 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:

src="http://docs.google.com/Doc?id=dfhbhqd7_1267zg8ttfq"

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.

Putting a custom form into Moodle

Over my years of using Moodle and other LMS's, there have from time to come been requests from teachers (and students:-)) to build forms for gathering information. Building a form used to be a fairly complex task, but Google has made the process much easier by adding a form editor to their free Google Spreadsheets application.

A custom form can be used to gather feedback from students, from users of a site, etc.

1) To begin, create a new Google Spreadsheet


2) When you create the spreadsheet, you will see the "Create a form" link in the upper left. Click the Create a form link.



This opens up the form editing window.

3) Give the form a title (1). Next, add some questions (2).

To add a question, simply give the question a name, add some help text if needed, and then choose the question type from the Question Type dropdown.

Here we are the choosing "Multiple choice" question type.

4) Once you have added the first question, you can click the "Add a question" link to add another question. You can also click the "Duplicate this question" link to make a copy of the first question.

5) Once you have added your questions, then click the "Save" button.

Google enables you to email your forms to people directly, however for this tutorial we are going embed the form into a Moodle resource, as we've done with the previous presentation tutorials.

6) To embed the form, click the "Preview and send" tab. Then click the "Embed" link.

7) Clicking the Embed link opens up a window with the iframe code already selected (remember the iframe code from the Presentation tutorial?). Copy this code for pasting into Moodle.

7.1) On Windows, you can right-click on the iframe code, and choose copy from the right-click menu.

Before we go into Moodle, close the form window and take a look back at your GoogleDocs. If you click on the spreadsheet you created in the first step, in this case "Mid-Semester Evaluation",

you can see the questions you have created are entered in the first row in the Google Spreadsheet. As people fill out the form in Moodle, their answers will show up in the spreadsheet.

---

Now, lets go into our Moodle course, and put the form to work!

As mentioned in the previous tutorials, if you do not have a Moodle site, you can try this out at demo.moodle.org.

8) In your Moodle course, login and then click the "Turn editing on" button, and then choose "Compose a Webpage", from the "Add a resource..." drop down.


9) On the "Compose a web page" screen, give the file a name. For example here I've named it "Mid-Semester Evaluation". It is a good idea to make the name in Moodle the same as the name in GoogleDocs- this will make it easier to manage your data in case you make other forms and spreadsheets.

10) In the "Full text" box, click the code view button.

11) Then paste in the iframe code from GoogleDocs.

12) Finally, scroll down to the Window and Common module settings. Choose "New Window" (1), and then check your visibility settings as described in the previous tutorial. Click the Show Advanced button to try out other Window settings (like GoogleDocs, Moodle is very flexible, and you can always change your settings later if you change your mind).

12.1) Click the "Save and return to course" button.

Now you can see the your new Moodle resource in your Moodle course. Your students will see it now too, if you chose "Show" in the "Common module settings". You can always click the "eye" icon to hide or show it from your students (although if you really want to hide it completely, remember to also go back into GoogleDocs and unpublish the form).

Now, when a student views your course, they see the link to the form:

When they click it, they will get a pop-up window with the form in it, which they can fill out and then hit the "Submit" button.



When the student submits the form, they get a response thanking them.




It is important to remember that Google presently doesn't know who is filling out the form, so this is best used for anonymous forms, or low stakes forms. For instance, in a low stakes form, you could enter a field for the student's name. An example might be signing up for a field trip, study group, etc. Generally, any place where the advanced security, tracking, and grading of Moodle's quiz module are not needed.

Finally, if we return to our GoogleDocs site, and click on the spreadsheet, we can see the student's response:

Note that GoogleDocs has added a timestamp identifying when the response was received.

Other notes:

Custom 'thanks' message:

You can create a custom message for when the form has been filled out back in the "Preview and send" tab.

Linking to the form rather than embedding it:

You can also add the direct link to the form in the Moodle "Link to file or website" resource type.

L1) To do this, use the "Link to file or website" resource type in Moodle instead of "Compose a web page".

L2) Give the resource a name as in Step 9, above, and then put the link (URL) for the form into the "Location" field.

You can get the location link by going back into GoogleDocs, opening the spreadsheet, and then choosing the "Embed form" link from the "Share this form" drop down.

L3) Copy the link, and then paste it into the "Location" field in step above.

L4) When you have entered the link, click the "Save and return to course" button.

The student's view is similar,

although if you have chosen to allow users to see the previous responses, they can see them at the bottom of the form if you use the link to file method rather than the embed form method.

Letting the students see other's responses:

If you check the "Let people see existing responses in the live form" option, students can see other responses in the form, if they scroll to the bottom:

If you don't want the people submitting the form to see the other responses, then go into GoogleDoc's, into the "Preview and Send" tab, and uncheck that setting.

Setting the form display size:

In Google's iframe tag, there are height and width options. For best results set these to the same height and width as your New window settings in Moodle.

Replace the default numbers in the iframe, in this case with 700x700.

Click "Show Advanced" (2) if it is hidden, and then type in the new numbers for the width and height (1)

The main thing with the window size settings, is to make sure that the entire form is visible to students, if possible. If the window size is smaller than the form size, the student's may miss the "Submit" button at the bottom. If the form is just going to be much bigger than the window (for instance in the case of a long form), make sure to tell the students to scroll down until they see the submit button

Summary:
Google Spreadsheets forms are a nice way to create forms and gather data from your site's users. They are not a replacement for Moodle's Quiz or Data module, as they don't currently capture which Moodle user entered the form, limit the number of responses, etc.

Have fun trying out Google's forms in Moodle!