Using a whiteboard as a widget

One of the powerful features of Poodll 3 is the template system. We can use this to create audio and video players, and also to create interactive widgets like tabs and lightboxes. Last week a longtime Poodll user, John, asked how he could display a whiteboard on a page, like they used to do in Poodll 2.  I thought that this would be of interest to others.

In Poodll2 we also had widgets but they were written in PHP and parts of the Poodll plugin, and originally they were not accessible from the HTML editor toolbar. We had to go via the Moodle repository system to use them. (Even now the Poodll widgets repository can be used. But its not recommended, because Poodll Anywhere (for Atto/TinyMCE) in combination with the template system is so much better. ) One of the widgets you could choose in Poodll2 was a standalone whiteboard. It just displayed on the page. The drawing could be not be submitted or saved.

Poodll 3 of course has whiteboards for use as submissions. But we don’t have a standalone whiteboard widget. That is to say, we didn’t …  Because I decided to make up a whiteboard widget in the new template system. First of all I asked John how he wanted to use it. He replied like this ..

We were adding it into our math lessons just to give a place for students to do light scratch work -- exactly as you said, nothing that would be saved. What was in the previous version of moodle was perfect -- we used the simple white board.

So that told me that John did not need all the fancy drawing tools (the old “simple” whiteboard did not have any) and that he was happy with there being no save ability. The simplest of the Poodll whiteboards is “Drawingboard.js” it is lightweight and has a minimal toolbar.  It looks like this …

Since all the javascript and CSS that is required are already in Poodll, this was a relatively simple template to make. Here is the template bundle (right click and choose “save as” to download):

drawingboard

To use the bundle, download it and then drag and drop it over the green “bundle” box on an empty Poodll template’s settings page.

After you “drop” it on the bundle box, the fields on the page will fill in. Make sure you save the page. After that you can insert a whiteboard on the page with a Poodll filter string like this:

{POODLL:type=drawingboard}

or like this

{POODLL:type=drawingboard,width=600,height=400}

Or you can choose it from the Poodll widgets menu on the Atto toolbar.