Embed a PDF file (and more!) in your Moodle course page by using ViewerJS. Cool!

Source: https://www.flickr.com/photos/degu_andre/5364417987/
André Gustavo Stumpf, some rights reserved.

If you ever wanted to embed PDF files inside your Moodle 2.x course page, but didn't know how to, look no further than the uber easy-to-use ViewerJS.

At the end of today's post, you will be able to view PDF files and Ms Office files direct off your Moodle course page. How? Read on!

1. Download the Javascript zip file from here.
2. Unpack the file on your computer. You will see a folder named 'ViewerJS'.
3. Upload (FTP) that folder to your webserver, preferably to www.domainname.com/moodle/ViewerJS
3. Upload one or more PDF documents to your webserver, preferably to a custome folder named pdfs. E.g, at the location www.domainname.com/moodle/pdfs
4. Create a Label resource with the example HTML code below

The softcopy code is given here:

How to embed an OKMindMap inside your blog or Moodle webpage resource.

Hi. In this post, I will show you how to embed an OKMindMap in your website or Moodle webpage resource or label.

This method is different from adding an OKMindMap activity to your Moodle site as mentioned previously in this post. That was a pretty long post wasn't it? Don't worry, this article is short(er) and sweet(er). The method oulined in this article is quite straight-forward and easier to implement that the OKMindMap activity. The advantage of a Moodle activity is that it can be tracked and logged. Warning: a mindmap embedded (as shown in the sections below) in a Moodle label resource or Moodle webpage resource cannot be logged. With that in mind, let's begin!

The window below is an example of an embedded mindmap. One of my mindmaps saved on http://www.okmindmap.com. It is live.Go ahead click on it. Hold and drag your mouse. Click on the tip of any first level node to expand the child nodes.


Here's the embed code of the above window:

<iframe src="http://www.okmindmap.com/map/ODljMGM3YmYtNDk3MC00MjJlLTkyNzAtMDIzYjgzM2I5ZWI5?m=on&g=off" width="600" height="600" ></iframe>

How to embed a website inside your Moodle webpage with iframes and Bitty browser

Bitty Browser is truly an amazing web application. It allows you to embed a website within a website. 

So you can embed an entire working website inside your blog or Moodle site. Its developer is Scott Matthews. But first, a brief comparison between a normal iframed website and a Bitty framed website.

Figure 1. Cnn.com is embedded inside my Moodle coursepage using normal iframe HTML code.
This is an image only.

Figure 2. Cnn.com is embedded inside my Moodle coursepage using Bitty iframe HTML code.
This is an image only.

Embedding PDF files in Moodle – a concise tutorial by @LBCCeLearning

Note: Click here for a more recent, year 2015 post that works on Moodle 2.x.

Hi there!
LBCC eLearning Blog is the “the place to see the latest ideas for online education at Linn-Benton Community College” (follow them @LBCCeLearning).

In a March 2010 post, Eric Bryant explained how to embed a Portable Document Format (PDF) file inside a Moodle course. An embedded PDF file will, in my humble opinion, engage a student more than if he or she were to just see the PDF icon and description on your course page.  Which is how it would appear if you use the standard method of “Add a resource | Link to a file or website”.

If you want a truly embedded PDF, then Eric’s tutorial is for you [link]. The blog post is short, informative and concise. Sample html embed code is provided, and there are screenshots that show the effect of using different settings for each EMBED variable. Thanks, Eric!

There are other ways of embedding PDF files on the Net, but I found that this method (outlined here) works for me. Armed with this knowledge, I proceeded to create a book resource (Moodle 1.9) where each link was a embedded PDF file. It’s a very nice layout (see below for a screen shot of an embedded PDF using embedding!

Sample code to embed PDF content inside your Moodle page is:

<center><embed width="800" height="600" src="http://scm.moodleace.com/file.php/7/download/SM1007_SEPT_2011_Coursework_Assignment.pdf#toolbar=1&navpanes=1&scrollbar=1" quality="low" /></center>

I would love to hear from you If you have found this information useful, and have decided to use PDF embed code in your courses.  If you use a different method or have a favorite Web 2.0 technology to engage students with PDF content within Moodle, please share your experience.

Note: this article was originally posted by the author on Moodlenews.com on 25th March 2011.