Design And Implementation of Interactive Tutorials for Data

Structures

Lewis BarnettDepartment of Mathematics and Computer ScienceUniversity of Richmondlbarnett@richmond.edu

Ross GoreDepartment of Computer ScienceSchool of Engineering and Applied ScienceUniversity of Virginiarjg7v@cs.virginia.edu

Goals

• Focus on "stumbling block" topics

• Provide highly interactive experiences

• Use multiple presentation styles

• Integrate recording of pre/post-test data

• Allow cross-platform deployment

• Construct a flexible underlying framework

Implementation

• Each tutorial is a stand-along Java app

• Framework classes for– Navigation– Help– Preferences– Animation support– Voice-overs– Administering pre/post-tests

Implementation

• Written in Java 1.4.2

• All source code is available

• Each "slide" in a tutorial is a Java class

• Navigation structure is specified in a "slide transition file" which is executed by a finite state machine

MainFrame class provides navigation

Slide class is used for content

History

• Original work funded by NSF

• Summer project, 2 faculty, 2 students

• Produced original framework, CS1 tutorials

• Second phase funded by University of Richmond

• Upgrades to framework, some CS2 tutorials

Topics

• Binary representation of data

• Basic computer organization

• A model of computation

• Program components

• Selection and looping

• Searching

• Sorting

Topics

• Heap sort

• Quick sort

• Objects and references

• Linked lists

Use of Algorithm Animation

• Original tutorials make frequent use of algorithm animation/visualization– Machine language execution– Searching– Sorting

• Recent research has cast some doubt on the effectiveness of algorithm animation as a teaching tool

Recent work in algorithm visualization

• Hundhausen, et. al. (2002)– visualizations with no interaction have little

impact on learning– Students should control execution of

visualization ("movies" aren't so effective)– Predictive exercises improve learning

Recent work in algorithm visualization

• Grissom, et. al. (2003) – Confirmed that increasing levels of interaction

corresponded with increasing levels of understanding

(Full reference: Algorithm Visualization in CS Education: Comparing Levels of Student Engagement, Scott Grissom, Myles F. McNally and Tom Naps, in ACM Symposium on Software Visualization, pp. 87-94, San Diego, California, June 11 – 13, 2003.)

Recent work in algorithm visualization

• Saraiya, et. al. (2004)– Single-stepping (not just control of "playback")

is important– Pseudocode tracing is not as important as

previously thought– Good data sets (rather than student

constructed) are important

Recent work in algorithm visualization

• Hansen, et. al. (2002)– Students using visualizations in a hypermedia

system with multiple explanations of concepts reported larger learning gains.

Design issues for data structures tutorials

• Original animation tools were sprite-based– Planned tutorials would have required too

much image editing

• Original animation sequences had to be completely specified ahead of time– All actions specified in a configuration file

• Insufficient for envisioned linked-list and tree construction "workbench" tutorials

Enhancements

• Repackaging from monolithic application to individual tutorial applications

• Updated animation capabilities to support interactive animations

• New sprite class hierarchy to support types other than image-based animation components

• Web deployment

Enhanced animation

• Modified animation class to accept the addition of new sprites on the fly

• New derived class allows specification of animation as a set of vectors of sprites and motion commands rather than as a configuration file

• Single stepping accomplished via sequences of dynamically generated animations

New sprites

• To build the tutorials on linked structures, we needed sprites that could respond to dynamic changes in animations

• Specifically– sprites to represent nodes that could adjust to

changes in their linkages– sprites that represent connections between

nodes

Sprite class hierarchyAbstractSprite Sprite

ImageSpriteDrawableSprite

NodeSprite ConnectionPoint

HeaderNodeSprite RefNodeSprite ListNodeSprite

RtAngleConnector

UTurnConnector

Interface

Abstract Class

Concrete Class

Implements

Extends

BasicConnector

Sprite class hierarchyAbstractSprite Sprite

ImageSpriteDrawableSprite

NodeSprite ConnectionPoint

HeaderNodeSprite RefNodeSprite ListNodeSprite

RtAngleConnector

UTurnConnector

Interface

Abstract Class

Concrete Class

Implements

Extends

BasicConnector

Sprite class hierarchyAbstractSprite Sprite

ImageSpriteDrawableSprite

NodeSprite ConnectionPoint

HeaderNodeSprite RefNodeSprite ListNodeSprite

RtAngleConnector

UTurnConnector

Interface

Abstract Class

Concrete Class

Implements

Extends

BasicConnector

Sprite class hierarchyAbstractSprite Sprite

ImageSpriteDrawableSprite

NodeSprite ConnectionPoint

HeaderNodeSprite RefNodeSprite ListNodeSprite

RtAngleConnector

UTurnConnector

Interface

Abstract Class

Concrete Class

Implements

Extends

BasicConnector

Sprite class hierarchyAbstractSprite Sprite

ImageSpriteDrawableSprite

NodeSprite ConnectionPoint

HeaderNodeSprite RefNodeSprite ListNodeSprite

RtAngleConnector

UTurnConnector

Interface

Abstract Class

Concrete Class

Implements

Extends

BasicConnector

Sprite class hierarchyAbstractSprite Sprite

ImageSpriteDrawableSprite

NodeSprite ConnectionPoint

HeaderNodeSprite RefNodeSprite ListNodeSprite

RtAngleConnector

UTurnConnector

Interface

Abstract Class

Concrete Class

Implements

Extends

BasicConnector

Example

head

tail

5

HeaderNodeSprite

NodeSprite

(100) (204)

Address of header node Address of node

Example

head

tail

5

(100) (204)

BasicConnectorSprite

RtAngleConnectorSprite

Example

head

tail

5

(100) (204)

(204)

(204)

Numeric and visual representationsof pointers

Linked List Tutorial

• Goal was exercises where students construct code for common linked list operations

• Students select from a small set of code fragments to build operations

• Completed code is animated so students immediately see the results

• Incorrect code is animated as well as correct code

List exercises

• Traversing a list (student selects loop condition from a list)

• Insert at front

• Insert at rear

• Finding next to last node

• Other common operations are demonstrated

Life as a case study

• Medium-sized object-oriented software system with source code available– TGT library consists of 60 classes,

approximately 18,000 lines of code– Linked Lists tutorial consists of 30 classes,

approximately 10,000 lines of code

• Used for several student projects• Case study for OOD, Software

engineering

Getting the tutorials

Tutorials and source code are available from the following web site:

www.mathcs.richmond.edu/~lbarnett/TGT/

This work was supported by NSF grant DUE-9652982.