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.

spellingtest

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!

Server-side JSON/image creation: partitioning maths homework

Another homework-inspired demo of generating JSON + images on the server. This kind of thing can also easily be done with client side scripting. The advantages of doing it on the server is simplified client-side code (for older / less powerful devices) and nothing valuable on the client side for pirates! Arrr.

A script embedded in the page source requests a JSON response containing a sum with two ‘hundred square’ images showing the summands. Also in the response is an URL for an image showing a method of working out the sum using tens-and-units partitioning.

Enjoy!

What is the sum of ? and ??

Measuring tube question generator

Here’s a little demo of on-the-fly image creation based on a Key Stage 1 homework my daughter brought home. Every time you visit this page you should see a different question. A new question is asked after each time you press the ‘Am I right?’ button.





This page requests a ‘measuring tube’ JSON object from the Firtl server. Server-side code selects a measuring tube template from a set of different capacities and major/minor measurement ‘ticks’, calculates a random fill that lines up nicely with one of the ticks and returns a JSON object containing the fill level and an URL for the image. The image itself is not drawn by the server until it receives the request caused by setting the img’s src attribute.

NBC/NXC on the LEGO NXT “Error: Undefined Identifier printf”

This had me mystified for a few hours: converting some old C code that worked on BrickOS with the gcc toolchain to use the Not-eXactly-C from bricxcc. The c sources must be compiled with the Next Byte Code compiler nbc. The c source file must have the file extension .nxc. I could see in the NXC Programmer’s Guide that printf is listed as a “Standard-C API function“, that nxc has a ‘cstdio API‘ which contains printf and a #include preprocessor command, but I couldn’t find a ‘cstdio.h’ anywhere.

The solution is to check the nbc command line arguments with:

nbc -help

and see the ‘-EF’ switch for ‘Enhanced Firmware’. A command line like:

nbc -EF testprintf.nxc -O=testprintf.rex

will JustWork™