Author Archives: Sean

Measuring tube homework worksheet

Similar to the clock face worksheet, here’s a simple generator for a measuring tube homework worksheet. Every time you click on the link below, you will download a new randomly-generated measuring tube worksheet with 6 questions on it. The measuring tubes are drawn with vector graphics to make sure they look good when printed.

Download a PDF measuring tubes worksheet ready to print.

Clock face worksheet

With a little extra effort the clock face generator can produce a worksheet with several different clock faces on a page. The page is produced with Freemarker / LaTeX. Producing vector graphics for inclusion in the LaTeX document instead of bitmaps is done with FreeHEP.

Just in case you missed it, this link will download a PDF document for you with different times every time!


Tell the time with online clock face test

Yet another homework-inspired addition to the API – a clock face image generator. My son brought home a worksheet from school with badly-drawn clock faces on it. On some clock faces the minute hand was pointing to the “6” (half-past) while the hour hand pointed directly at the 3, when it should have pointed either half way between 2-3 or half way between 3-4.

The clock-face image URL creates a random clock face if no arguments are present. Query arguments are ‘time’ to specify time in milliseconds since midnight. A ‘resolution’ argument controls the resolution of randomly-generated times and also to hide the seconds hand for anything greater than second. Values for ‘resolution’ are one of [second, minute, fives, quarter, half, hour]. The ‘width’ argument is a 3-digit size in pixels of the generated image.

A .json API URL returns some data useful for embedding the clock face as an interactive test:

What is the time?

Online audio spelling test

Another homework-inspired application. My daughter brings home lists of words to learn for spelling tests. I help her practice by reading out the words and giving an example just in case the word alone isn’t clear or the word has homophones. We’ve been checking words at wiktionary and even uploading audio where a pronunciation file is wanted.

We thought if we made the spelling test word list interactive, it might be quite nice to share it with friends at school, so I knocked together a little add-your-own-spelling interface to create entries for spelling tests and some crude javascript to automate the presentation of a spelling test on a web page.


Once you’ve applied for a token and username, you ‘login’ to the spelling test editor by providing your email address and the token sent to you. For each spelling word, provide an example text containing the word and two files: one of the word spoken alone and one of it spoken in your example phrase.

I use audacity to record and edit my sound files. An example work flow is:

  1. Write down all words and example phrases in a text editor.
  2. Start recording
  3. Allow a few seconds of silence
  4. Speak the word
  5. Be silent for a second or so
  6. Speak the example text
  7. Be silent for a second or so
  8. Repeat from 4 for the next word
  9. Be silent for a few seconds
  10. Stop recording
  11. Select one of the longer silences
  12. (in Audacity) use Effects…Noise Removal to set the selection as the noise profile
  13. Select the whole recording
  14. (in Audacity) use Effects…Noise Removal to remove noise.
  15. If the silences in your recording are still noisy, repeat from 11 with the other long silence
  16. Select a word with at least 0.5 seconds of silence either side
  17. (in Audacity) use File…Export Selection to create a mp3 file like ‘theword.mp3’
  18. Select the example sound with at least 0.5 seconds of silence either side
  19. (in Audacity) use File…Export Selection to create an mp3 file like ‘theword-example.mp3’
  20. Repeat from 16 for all the words you’ve recorded

Once you have your audio file, uploading them is a simple matter of copy-pasting from the text file and selecting the audio files from where you saved them. When you ‘Update a word’ you’ll get a link like Sean:sequence which you can use to check the audio files uploaded OK and the word occurs in the example text.

Embedding in a web page.

My javascripting isn’t the best, so see the page source of Emily’s blog for the way I did it. I create a JSON object containing the username/spelling pairs for the spelling object, use some javascript/jQuery to create the rows in the spelling test table and SoundManager2 to handle the playback of the audio when the links are clicked.

To create each spelling test, all I have to do is copy a small amount of HTML and change the JSON object to include the new spellings. There’s a search facility for existing spellings – feel free to add your own and use the spellings already uploaded.

Here’s a sample in this WordPress blog:

Spelling Example Spell it! Check Result

Simple web form generator to PDF

Recently I was asked how to complete a Refugee Action Microsoft Word application form by someone who had no Microsoft software. Nothing I tried (third party applications, web-based document editors) was able to even lay out the form correctly, let alone edit the fields without causing damage to the document structure. Here is a PDF version of Refugee Action’s Word document generated by LibreOffice. Some of the formatting / form control issues present in the original document when opened by non-Word applications are present in the PDF.

Organisations with a web presence should be collecting form data with HTML to accommodate the widest possible audience of WWW users and styling it for physical presentation in a portable format (such as PDF) as a separate activity. Separating the data from the form presentation also offers the opportunity of directly importing form data into office databases.

I’ve thrown together a little demo in Firtl’s sandpit to demonstrate a form-filler service.  I chose a text-based Document/Section/Field scheme and created a text file to describe the fillable form. I use a zip file for export / import, but it would be straightforward to provide import/export in other (CSV, XML, JSON etc) formats.

The URL of a form definition is passed to the form-filler service as the ‘def’ query parameter. See how the Refugee Action application looks as a web-based form here. The form submission controls (at the bottom of the web page) allow you to ‘Update’ the page, ‘Download PDF’ and ‘Download Zip’. ‘Update’ does mostly nothing except in the case of image upload: it shows a thumbnail of the uploaded image. It could easily provide some generic validation such as ensuring mandatory fields are filled and checking data types (date / number etc).

The ‘Download PDF’ button uses the form data, the document definition file and some server-side LaTeX to produce a static PDF document containing the form data. The ‘Download Zip’ button allows you to download just the form data on its own. It allows users to save the form content and upload it later (see bottom of every form-filler page for upload form) to continue editing. I tested the form-filler on an Android smartphone by creating the Zipped form content on my desktop PC and then sending it to the Android device via email.

The web forms are plain HTML so should work perfectly with any recent* browser. The Refugee Action demo has their logo applied with a simple CSS stylesheet specified in the form definition file. If no stylesheet is specified, some default styles are included in the page source. Note that the styles apply only to the web form and not to the generated PDF.

Firtl’s form-filler service uses HTTP POST to send form data to the web service, so it’s not possible to provide a clickable link to a convincing example of the PDF-generation in action. Instead I’ve uploaded my test form data zip file to this blog. Download the zip file, navigate to the foot of the demonstration form, select the downloaded zip file and click ‘Upload’. You should see nearly every form field filled with test data. Clicking on the ‘Download PDF’ button should give you the completed document.

The Refugee Action example demonstrates almost all the features built into this basic form generation demo. I’ve included a couple more examples below.

Note that there’s currently nothing stopping you hosting your own form definition file and using the form-filler service to generate web forms, zipped form content and PDF documents. I’d appreciate a mention if you do!

Hello, World (form definition file is here)

Maths Test (form definition file is here)

*’recent browser’ – I tested this on a 2007 Nokia 6500 Classic’s S40 browser. Editing the document, creating the zip and downloading the PDF worked perfectly. The Nokia has no software for viewing zips or PDFs, but can still send them as MMS or email attachments. Try editing a Word document on a phone like that!