Interactive Design - Some strategies

[Home] [Design Goals] [Content] [Interface Design] [Interactivity] [Cost] [Site Map]

 

One of my main goals was to ensure the site should have a degree of interactivity to keep users coming back.

Some other examples of interactive activities which have been included are

This page will provide details of how you can create some of these for your website.

Online Jigsaw Puzzles - How to Sheet Jigsaw

Click here to download this Online Jigsaw Help Sheet in pdf format

Jigzone is a place on the Internet where you can create your own online jigsaw puzzles from scanned student artwork or digital photos. Once you have created the puzzle your audience can solve the puzzles online by clicking and dragging the pieces into place.

Puzzles are presented in such a way that users can interact significantly. They can

1. Register online as a Jigzone member at http://www.jigzone.com/.

Registration is free. You will then have your personalised Jigzone area where you can upload your photos and create your own jigsaws.

2. Prepare your photos for uploading. All pictures to be uploaded should be

Note: Photos which have a file size greater than 20KB will be automatically compressed, which could result in a loss of picture quality.

3. Now you're ready to create !

4. Now you are ready to share your puzzles . You have 3 options

5. Try some puzzles for yourself.

Top

Interactive Puzzles

 

The interactive puzzles contained on the website are designed using a suite of software applications called the "Hot Potatoes" Suite developed for educators by a group called ³Half-baked Software², from the University of Victoria in Canada.

What is "Hot Potatoes"?

The "Hot Potatoes" suite includes six applications, enabling you to create six different types of interactive puzzles for the World Wide Web: multiple-choice; short-answer; jumbled-sentence; crossword; matching/ordering and gap-fill exercises . Users are provided with feedback in the form of hints; checks and/or progress scores as they proceed through the quizzes.

The software automates the process. You enter your data in the fields provided , the software then uses the data files to generate the webpages as html or dhtml pages which include the necessary javascript to make the quiz pages interactive.

Software Compatibility

The software is available in both Windows and Mac versions and the tutorials are straightforward. Users can be creating puzzles in a few minutes.

Using Hot Potatoes

I used three of the programs - J QUIZ for the Multiple Choice quiz; J CROSS for the Crossword Puzzle; and
J MATCH for the Author and Title Match up game.

In each instance I found some limitations.

For example, invariably I found that I was unable to edit the original data files once I had generated the web page and saved and closed the file. Thus, if I made an error in data entry, sometimes had to re-create the whole quiz..

In addition, it was important when saving the pages to create a folder and to save all associated files (ie the data files and html files) inside the same folder.

Incorporating the Quiz pages into your site

Some experience of Web authoring was, however, a definite advantage. The completed pages were very plain in appearance. Once I had generated the webpages it was possible to open the pages in Dreamweaver and edit the fonts; page colours and properties and to insert images, other text and navigation to incorporate the puzzles within my site. This enabled me to make the puzzle pages more attractive and consistent in appearance with the rest of the site

Obtaining the software

Hot Potatoes is not freeware, but it is free of charge for non-profit educational users who make their pages available on the web. Other users must pay for a licence.

Details of Hot Potatoes licencing terms and pricing on the Half-Baked Software Website at http://web.uvic.ca/hrd/halfbaked/

 

Try the Puzzles

Try the puzzles now if you wish

Harry Potter Trivia Quiz _ a multiple choice quiz

Harry Potter Crossword

Match Mate : an Author Title Match Up Game

Top

Reader Interest Survey - An online form

As part of the Book Selection Strategies section of the website I wanted to include a survey which would encourage the children to reflect on their personal interests and reading preferences before engaging in a conference or seeking assistance with selection from an adult.

Once the form is completed, the users clicks on the submit button and the data is sent to a third party internet site which in turn sends the data to the KIDZ BOOK ZONE email address. An acknowledgement page was also created to provide feeback

In order to create the form I utilised the instructions contained in Chapter 12 in the computer reference resource:

Visual Quickstart Guide : Dreamweaver for Windows & Macintosh 3 by J Tarin Towers. Peachpit Press.2000

Creating the form

In creating the form I utilised the software Dreamweaver 3. I selected the Objects Palette which contains a Form Objects menu.I then consciously experimented with all 5 available form objects: Single and multi line Text Fields; Checkboxes; Radio Buttons and Drop Down Lists.

Each form field in the form is also known as an Input Item. Each Input Item is represented in the form results by a name (Field identifier) and a value (Content of the field). The Field dentifier is especially important in ensuring that the data recorded and submitted is clear to the recipient. For each Input Item the Properties Inspector is used to add the Field Name and Values.

At the end of the form are 2 buttons . These are also inserted using the Objects Palette> Form Objects. The Submit Button sends the form to the form handler. Reset Buttons clear the form and resets it to its original state.

 

Making it Go

In order to make the form work you need to add a CGI or custom script or Form Handler. In this instance I placed the following script into the source code of my page to submit the data to a third party server available for free on the Internet. The site processes the data and emails me the results almost instantaneously.

 

The code used is included here. Download the CGI Script as a PDF document. To determine the location of the script use the "View HTML Source" from the Window Drop Down Menu.

Once the submit button is selected the data is immediately sent to my email adddress specified in the script.

Making it "pretty"

Once completed I used Dreamweaver's standard Page Formatting options to format fonts, colour the page using page properties and add images and other navigational features and incorporate the survey page into the website. The background was made by selecting a small graphic image which was tiled on a coloured background.

[Home] [Design Goals] [Content] [Interface Design] [Interactivity] [Cost] [Site Map]