Design And Implementation of Interactive Tutorials for Data Structures Lewis Barnett Department of Mathematics and Computer Science University of Richmond [email protected]Ross Gore Department of Computer Science School of Engineering and Applied Science University of Virginia [email protected]
33
Embed
Design And Implementation of Interactive Tutorials for Data Structures
Design And Implementation of Interactive Tutorials for Data Structures. Ross Gore Department of Computer Science School of Engineering and Applied Science University of Virginia [email protected]. Lewis Barnett Department of Mathematics and Computer Science - PowerPoint PPT Presentation
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Design And Implementation of Interactive Tutorials for Data
Structures
Lewis BarnettDepartment of Mathematics and Computer ScienceUniversity of [email protected]
Ross GoreDepartment of Computer ScienceSchool of Engineering and Applied ScienceUniversity of [email protected]
• 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: