Report on Memory Matters (a prototype Web-based learning site)

If you are viewing this page inside frames, you may prefer to remove them to read this report. You might like to read the briefing for the project before reading this report.

Contents

• Description of topic chosen
• Description of design stages
• How interactivity and learning experiences are maximised
• Summary of personal reflections and difficulties
• View the Memory Matters prototype Web-based learning site (opens the site in this window)

Description of topic chosen

From several ideas, I chose the idea of "Memory" which seemed to offer a good opportunity to put into practise some of the web site design theory we have looked at during the Interactive Learning on the Web unit. [Interactive Learning on the Web is a unit on the University of Portsmouth MSc Information Systems course.]

The Memory Matters site is intended to teach knowledge about memory and introduce techniques to improve memory, providing testing on the knowledge aspect and the opportunity to interactively practise memory techniques. The site is intended to stand alone, with no intervention from a human teacher. Site maintenance should be minimal, although it is doubtful whether it could be removed altogether, for reasons given below.

A discussion group allows the exchange of ideas between learners: selected postings could be retained on the server as a permanent reference archive. However, some intervention would be necessary to remove "unsuitable" postings, keep discussions "on track", and keep the archive to a manageable size.

External links have been kept to a minimum, as they need periodic checking to ensure they are still "live". Tools are available which can check links automatically: broken links can then be updated manually. The "extra value" added to the site by external links (for follow-up reading, references, and related sites to stimulate deeper thinking) was judged to be worth the maintenance effort involved.

Description of design stages

1. Chose and researched topic - the subject chosen provides the opportunity to use a variety of media and interactive games (implemented in JavaScript). Research (at my local library and on the Internet) was fairly brief, but yielded a large amount of information.
   
   
2. Decided on aims - to increase knowledge about memory and test that knowledge as it is learnt, and to teach some memory techniques and provide practise in these to improve the learner's own memory.
   
   
3. Defined an audience (age & ability level)- late teen to adult, at around A-level ability level, assuming basic knowledge of using the Internet.
   
   
4. Divided subject into sections and sub-sections. The main topic areas were chosen and decisions taken on how to sub-divide them.
   
   
5. Decided on a suitable structure and navigation method. Some topics need to be studied sequentially, with basic topics laying foundations for the advanced ones ; this tends to suggest a ready-made navigational framework; usually in some form of hierarchy. The sequencing of sections can provide a basis for the link structure. Other topics (such as those in "Memory Matters") can be studied non-sequentially; sections are not inter-dependent (ie. no pre-requisite knowledge is necessary to their understanding). This is likely to influence the method of navigation chosen by the courseware developer. A mind map was chosen for navigation, to impose structure, and to suggest a less sequential choice than the traditional list of links (that said, even images are read left-to-right and top-to-bottom - how do we circumvent such prejudices?)
   
   
6. Considered user orientation (related to the issue of navigation). By orientation I mean how the user distinguishes where he is within the site. I decided to use dark blue section headings on every page, followed by orange sub-section headings. Although differently coloured headings could have been used for each section, this could lead to an inconsistent site style. Colour-blind users also have to be considered, so these colours are tonally different. Another possibility would have been a different icon for each section (in place of the brain image).
   
   
   
7. Screen layout and site features - a 3-frame division of the browser window was chosen. The left-hand frame allows access to the navigation image-map at all times, and similarly, the right-hand frame allows constant access to the notebook feature. The central frame displays the main tutorial content. The reason for using frames was to allow permanent access to the side-frame features without using up valuable screen space.
   
   
8. Implementation of the notebook: the initial idea of using a TEXTAREA to display the notes failed as only the first line printed out, so I decided to create HTML "on-the-fly" using JavaScript - it took a long time to sort out the problem of passing TEXTAREA information to a variable for storage - the first of many problems understanding the JavaScript object model/syntax! The technique is less direct than I would have liked, and still does not allow printing, due to restrictions in the JavaScript security model. A Java applet might better provide the functionality needed, with the possibility of providing basic drawing tools, and a printing facility. Alternatively, the information could be stored on the Web server using CGI scripting, though this would have the disadvantage of being rather slow.
   
   
9. Implementation of the image-map, and other site features are described in the next section.

How interactivity and learning experiences are maximised

• An image map is used for navigation: this takes the form of a "mind map" ( or "Memory Map" to fit the site's theme). Its biggest drawback is inflexibility - adding or removing one link necessitates going "back to the drawing board": both image and HTML MAP tags must be edited. For this reason, I would not recommend image-maps for sites which need frequent revision! (Because of time limitations, I added a hypertext link above the map when I forgot to include a link to the Welcome screen.) There are limits to the ways in which ordinary hypertext links can be presented, although adding additional links is obviously much easier. Despite these problems, the image-map's advantage is that it presents the learner with a restricted number of visual choices showing the overall structure of the site; clicking on any of the section headings opens a pop-up window presenting a second hierarchical layer - the hypertext links to pages in only that section. (Taking the image map idea to its logical conclusion, I could have used an image-map for these links too.)
  
  
  This screenshot shows how clicking on the How Memory Works hotspot on the image map opens a JavaScript pop-up window showing links to all pages in that section. Clicking a hypertext link loads the appropriate page in the browser's central frame and automatically closes the pop-up window.
  
  
• A "slideshow" provides further interactivity: DHTML layers progressively reveal a diagram (under the control of the learner). Within one of the layers is a hypertext link ("The Cocktail Party Phenomenon") which calls a JavaScript pop-up window including image, text and (optional) sound. One problem with using layers is that anything following a layer can overlap it (or leave a huge gap).
  
  
  
  In memoryProcess.htm (left), the code contains a layer named "restOfPage" which comes after the slideshow. Although a position is given for the top point of that layer, how far down the page it comes depends on the font size and style used, (which could be controlled using Cascading Style Sheets) and the width of the browser window or frame containing the page (which is notcontrollable.) If there's a solution to this problem, I didn't find it!
  
  
• To provide the learner with the means of digesting the course material, there are:
  
  
  • "takeaway documents" - some course material is provided in the form of a Word document (process.doc), which incorporates an expanded version of the slideshow text, plus the images. This can be downloaded and/or printed for the student to study off-line. (see memoryProcess.htm)
    
    
    
  • a zip file, so students can download the whole course and study it off-line, though of course they will need to reconnect to the Internet to use external links, or use the discussion group. (Not suitable for a course relying heavily on external links, using audio or video streaming, or conferencing/chat facilities.)
    
    
  • the Memory Jotter, to enable students to easily make notes in their own words, avoiding the need to launch a separate word-processor.
    
    
  • "remote control" pop-up windows linking to external sites (references used to create this site and other sites relating to memory), so the user does not find himself at a dead-end on the final page, and more importantly, so he can broaden the learning experience gained from this site.
    
    
    
    The pop-up window which is opened by clicking on Related sites of interest provides links to outside sites.
    
    The References used to create this site link has the same function; clicking on a link opens that site in the main browser window; the pop-up window remains open so the links are still available to the learner: both windows offer a link to return to Memory Matters at any time.
  
  
• To provide social interaction on a very simple level, cookies store the user's first name and provide a personalised welcome, and also personalise the Memory Jotter. On a deeper level, social interaction is provided by using a discussion group. I tried using the HTML FORM's MAILTO method to send e-mail directly to a Usenet news group (the news server administrator must set up an e-mail to news server gateway), but because of the way forms are processed, the message is received in this format:
  
  

  Student+Name=Gill+Clark&Email+address=dis00000@sis.port.ac.uk&Comments=This+is+a+test%21%09

  
  The message would therefore have to be decoded (in similar fashion to the "MailTo Tamer", pp. 121-122 of David Brooks' "Web Teaching" book) by a server-side script, then automatically remailed to the news server.
  
  An alternative would be to use "HyperNews". "Base articles", laid out as shown below, can be posted, read and replied to like Usenet postings and replies. These articles are stored on the web page server, which dynamically links them to ordinary web pages. The advantage of HyperNews is that postings are accessible from the browser window, and do not require the launch of a separate newsreader application. Source code is available free from http://www.hypernews.org/HyperNews/get/hypernews/source.html (accessed 9.3.98).
  
  
  
  
• To provide assessment, a test (memoryTest.htm) was included. Hints (see below) were provided for all questions (except true/false), with immediate feedback for correct and incorrect answers.
  
  When correct answers are given, reinforcement is sometimes provided in the form of additional text in the "Correct - well done!" pop-up window (below).
  
  I did not have time to implement a scoring system. I would have liked to use cookies to store information on the learner's score, so that if he took the test again, a comparison could be offered between current and past performance.
  
  

  Revision links Follow these links to revise the topics you had problems with in the quiz. The Process of Making a Memory Memory Techniques:mnemonics Done

  Another idea is to use a JavaScript function to add hypertext links to appropriate revision pages when a learner gets an incorrect answer. At the end of the test, he could be presented with a pop-up "remote control" (see previous section) with a list of such links (see mock-up, left).

  
  
• Interaction to teach memory techniques, such as mnemonics, could also have been used. Text, images and sound could demonstrate techniques, and testing could be carried out by asking the learner to memorise a list of words provided only as a sound file, so there was no visual reminder to act as a memory aid.
  
  
• Additional feedback was provided by using the ALT attribute in IMG tags to provide Tooltip-style contextual help when the learner hovers the mouse over images (right).

Summary of personal reflections and difficulties

The majority of time was spent creating sound site structure and consistent visual style. I tried to provide a minimum level of functionality for the Memory Jotter, Memory Map and quiz features. The pages implemented (plus write-up) show the intention for the whole site. Where a particular feature has been omitted through lack of time or resources, I have outlined it in this write-up to show the site's further development potential.

JavaScript and DHTML provide greater opportunities for interactivity and flexibility than standard HTML, but at the expense of complexity and extra development time. Cascading Style Sheets can speed site development however, providing the opportunity to use a harmonious style across a whole site. As with most programming or scripting languages, there is a very steep learning curve. There is a strong case for developing libraries of HTML templates, JavaScript functions and "widgets" for such things as navigation, interactive tutorials, tests, etc. The use of such libraries in developing courseware would ensure a consistent "house style" and would speed development by avoiding some of the complex coding required for interesting interaction. Although JavaScript Style Sheets can avoid a lot of repetitious coding, I wonder whether there is a price to be paid in terms of reaction times: if functions are downloaded when required, the learner might not get feedback so quickly? (It would be interesting to find out the difference between a JavaScript function embedded in a page, and the same function accessed from an external Style Sheet.)

Tools can speed development time significantly. Some are specifically for educational courseware development, such as Lotus' Learning Space, TopClass, or InterBook (see below). Features such as site management are essential for all but the very simplest sites (even a site as small as Memory Matters quickly becomes unwieldy!). Link-checking is also a necessity for all sites, both for internal and external links. Even if a site is relatively static, external links must be regularly checked for breakages.

Of particularly interest are systems which use adaptive hypermedia; multiple paths through learning material are presented according to the learner's level of experience and ability. While retaining the freedom of navigation of the WWW, these systems offer sophisticated learner support, including learner modelling to track the user's progress. One such system is InterBook, (http://www.contrib.andrew.cmu.edu/~plb/InterBook.html) a simple (freeware) tool and server for developing and serving adaptive hypertext. There are also intelligent systems, such as ELM-ART (http://www.psychologie.uni-trier.de:8000/projects/ELM/elm.html), which use intelligent server software (based on LISP, for example) to generate pages and links on-the-fly; these can offer conceptual as well as subject-based paths through courseware, by intelligent modelling of the subject domain.

Another issue is code compatibility, due to differing implementations of DHTML in Internet Explorer 4 and Netscape Navigator 4. With these browsers now freely available to educational users, this should become less of a problem when developing courseware for use within a closed network, as an educational institution can ensure that the appropriate browser is available on its networks. It remains an issue when making available educational web pages on the Internet for general consumption; however, a simple JavaScript function can warn people using an inappropriate browser, perhaps redirecting them to alternative pages, or to a browser download site.

There are many differences between Web courseware and other computer-based learning.

• One major difference is due to bandwidth limitation - this restricts the size of image, sound, video files, etc. that can be realistically made available. Making available self-extracting compressed files of essential material for download may be one way around the problem.
  
  
• Another difference is the lack of social interaction offered by distance learning courses - one of the biggest issues of being a part-time student (I have learnt!) is lack of access to facilities and teaching staff; this is even more of an issue in distance learning. There are times when there is no substitute for face-to-face contact: future improvements in video and sound compression codecs may lead to more widespread adoption of video conferencing for distance learning support.

The social aspects of learning should not be forgotten; one of the most difficult (but crucial) issues in distance learning must be to sustain motivation. Some form of study planning advice seems necessary to support the student-centred learning paradigm: at present this is likely to come from staff and peer support, although developments in intelligent problem-solving support software may provide additional help in the future.

Diagram to show the logical structure of the Memory Matters site.

Green shapes represent pages in one section only.

The pink and blue shapes represent the introduction and summary for other sections - not all pages are shown for the sake of clarity.

View the Memory Matters site

You've read the report, now view the Memory Matters prototype Web-based learning site! (Opens the site in this window.)