330 likes | 446 Views
Design And Implementation of Interactive Tutorials for Data Structures. Ross Gore Department of Computer Science School of Engineering and Applied Science University of Virginia rjg7v@cs.virginia.edu. Lewis Barnett Department of Mathematics and Computer Science
E N D
Design And Implementation of Interactive Tutorials for Data Structures Ross Gore Department of Computer Science School of Engineering and Applied Science University of Virginia rjg7v@cs.virginia.edu Lewis Barnett Department of Mathematics and Computer Science University of Richmond lbarnett@richmond.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
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
BasicConnector Sprite class hierarchy AbstractSprite Sprite ImageSprite DrawableSprite NodeSprite ConnectionPoint UTurnConnector HeaderNodeSprite RefNodeSprite ListNodeSprite RtAngleConnector Interface Abstract Class Implements Concrete Class Extends
BasicConnector Sprite class hierarchy AbstractSprite Sprite ImageSprite DrawableSprite NodeSprite ConnectionPoint UTurnConnector HeaderNodeSprite RefNodeSprite ListNodeSprite RtAngleConnector Interface Abstract Class Implements Concrete Class Extends
BasicConnector Sprite class hierarchy AbstractSprite Sprite ImageSprite DrawableSprite NodeSprite ConnectionPoint UTurnConnector HeaderNodeSprite RefNodeSprite ListNodeSprite RtAngleConnector Interface Abstract Class Implements Concrete Class Extends
BasicConnector Sprite class hierarchy AbstractSprite Sprite ImageSprite DrawableSprite NodeSprite ConnectionPoint UTurnConnector HeaderNodeSprite RefNodeSprite ListNodeSprite RtAngleConnector Interface Abstract Class Implements Concrete Class Extends
Sprite class hierarchy AbstractSprite Sprite ImageSprite DrawableSprite NodeSprite ConnectionPoint BasicConnector UTurnConnector HeaderNodeSprite RefNodeSprite ListNodeSprite RtAngleConnector Interface Abstract Class Implements Concrete Class Extends
BasicConnector Sprite class hierarchy AbstractSprite Sprite ImageSprite DrawableSprite NodeSprite ConnectionPoint UTurnConnector HeaderNodeSprite RefNodeSprite ListNodeSprite RtAngleConnector Interface Abstract Class Implements Concrete Class Extends
Example Address of node Address of header node (100) (204) head 5 tail NodeSprite HeaderNodeSprite
Example BasicConnectorSprite (100) (204) head 5 tail RtAngleConnectorSprite
Example (100) (204) (204) head 5 (204) tail Numeric and visual representations of 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.