Electronics Tutorial Website

During my studies at the University of Waikato, I rebuilt an online electronics tutorial site for first-year students. It let students practise answering questions and gave lecturers tools to write and organise the course material. I rewrote much of the PHP code, restructured the MySQL database and redesigned the interface.

Before

After

The site was retired by the university and the domain no longer resolves. An archived copy of the front page is preserved by the Internet Archive.

View archived site

Answering questions:

Backend:

Almost all of the existing code was replaced. My HTML generation library for PHP (PHP-HTMLifier) was used throughout to generate pages. This library removes the need to spread echo statements throughout an otherwise HTML document, making the code much easier to read and maintain. The SQL database had redundant fields removed and inconsistent field names made consistent. New linker tables were added to remove data duplication and facilitate simpler updates.

One thing I really liked about Django was the way database tables are handled directly as Python classes. This lets the programmer work with a row as an object rather than writing a query for each operation. Imitating this, I implemented wrappers around database tables that handled rows the same way. This made dealing with the database much cleaner and simpler.

The following code snippet gives an example of how compact the page generation logic has been made. Note the $section = new Section($sectionId) line, which creates and fetches the relevant question from the database. If fields within the object are changed during run-time, they are automatically saved to the database when the object is destroyed.

<?php
// This code creates the practise tutorial page.
//
// It loads our bootstrapping code, checks the client is logged in,
// retrieves any GET variables and parses them (with safety checks),
// checks the user is allowed to practise on this section,
// gets a suitable question for the client to practise with and
// renders the page using the PHP-HTMLifier renderer.
//

include(dirname($_SERVER['DOCUMENT_ROOT']).'/lib/functions.php');
$client->require_loggedIn();

$sectionId = getVar('get', 'section', 'int', True);

if ($client->current_section &lt;= $sectionId) redirect('/messages/?msg=mustPass');
else $section = new Section($sectionId);

$question = $objectFactory->question_client_getNext_practise($client, $section);

$page = new BasePage($section->name, $client);
$page->append(View::question_header($section, $question));
$page->append(View::pose_question($question, True));

Course editor:

The site had to make it easy for lecturers to add new content.

Usability improvements made here were

• Navigation between questions within the editor, without using the back button.
• Asynchronous saving and image uploading to prevent interruptions while adding content.
• Automatic answer shuffling - so the content editor doesn't have to worry about correct answer position patterns.