design and implementation of interactive tutorials for data structures
DESCRIPTION
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 PresentationTRANSCRIPT
![Page 1: Design And Implementation of Interactive Tutorials for Data Structures](https://reader036.vdocuments.net/reader036/viewer/2022081519/56812dba550346895d92f069/html5/thumbnails/1.jpg)
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]
![Page 2: Design And Implementation of Interactive Tutorials for Data Structures](https://reader036.vdocuments.net/reader036/viewer/2022081519/56812dba550346895d92f069/html5/thumbnails/2.jpg)
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
![Page 3: Design And Implementation of Interactive Tutorials for Data Structures](https://reader036.vdocuments.net/reader036/viewer/2022081519/56812dba550346895d92f069/html5/thumbnails/3.jpg)
Implementation
• Each tutorial is a stand-along Java app
• Framework classes for– Navigation– Help– Preferences– Animation support– Voice-overs– Administering pre/post-tests
![Page 4: Design And Implementation of Interactive Tutorials for Data Structures](https://reader036.vdocuments.net/reader036/viewer/2022081519/56812dba550346895d92f069/html5/thumbnails/4.jpg)
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
![Page 5: Design And Implementation of Interactive Tutorials for Data Structures](https://reader036.vdocuments.net/reader036/viewer/2022081519/56812dba550346895d92f069/html5/thumbnails/5.jpg)
![Page 6: Design And Implementation of Interactive Tutorials for Data Structures](https://reader036.vdocuments.net/reader036/viewer/2022081519/56812dba550346895d92f069/html5/thumbnails/6.jpg)
MainFrame class provides navigation
![Page 7: Design And Implementation of Interactive Tutorials for Data Structures](https://reader036.vdocuments.net/reader036/viewer/2022081519/56812dba550346895d92f069/html5/thumbnails/7.jpg)
Slide class is used for content
![Page 8: Design And Implementation of Interactive Tutorials for Data Structures](https://reader036.vdocuments.net/reader036/viewer/2022081519/56812dba550346895d92f069/html5/thumbnails/8.jpg)
![Page 9: Design And Implementation of Interactive Tutorials for Data Structures](https://reader036.vdocuments.net/reader036/viewer/2022081519/56812dba550346895d92f069/html5/thumbnails/9.jpg)
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
![Page 10: Design And Implementation of Interactive Tutorials for Data Structures](https://reader036.vdocuments.net/reader036/viewer/2022081519/56812dba550346895d92f069/html5/thumbnails/10.jpg)
Topics
• Binary representation of data
• Basic computer organization
• A model of computation
• Program components
• Selection and looping
• Searching
• Sorting
![Page 11: Design And Implementation of Interactive Tutorials for Data Structures](https://reader036.vdocuments.net/reader036/viewer/2022081519/56812dba550346895d92f069/html5/thumbnails/11.jpg)
Topics
• Heap sort
• Quick sort
• Objects and references
• Linked lists
![Page 12: Design And Implementation of Interactive Tutorials for Data Structures](https://reader036.vdocuments.net/reader036/viewer/2022081519/56812dba550346895d92f069/html5/thumbnails/12.jpg)
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
![Page 13: Design And Implementation of Interactive Tutorials for Data Structures](https://reader036.vdocuments.net/reader036/viewer/2022081519/56812dba550346895d92f069/html5/thumbnails/13.jpg)
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
![Page 14: Design And Implementation of Interactive Tutorials for Data Structures](https://reader036.vdocuments.net/reader036/viewer/2022081519/56812dba550346895d92f069/html5/thumbnails/14.jpg)
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.)
![Page 15: Design And Implementation of Interactive Tutorials for Data Structures](https://reader036.vdocuments.net/reader036/viewer/2022081519/56812dba550346895d92f069/html5/thumbnails/15.jpg)
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
![Page 16: Design And Implementation of Interactive Tutorials for Data Structures](https://reader036.vdocuments.net/reader036/viewer/2022081519/56812dba550346895d92f069/html5/thumbnails/16.jpg)
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.
![Page 17: Design And Implementation of Interactive Tutorials for Data Structures](https://reader036.vdocuments.net/reader036/viewer/2022081519/56812dba550346895d92f069/html5/thumbnails/17.jpg)
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
![Page 18: Design And Implementation of Interactive Tutorials for Data Structures](https://reader036.vdocuments.net/reader036/viewer/2022081519/56812dba550346895d92f069/html5/thumbnails/18.jpg)
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
![Page 19: Design And Implementation of Interactive Tutorials for Data Structures](https://reader036.vdocuments.net/reader036/viewer/2022081519/56812dba550346895d92f069/html5/thumbnails/19.jpg)
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
![Page 20: Design And Implementation of Interactive Tutorials for Data Structures](https://reader036.vdocuments.net/reader036/viewer/2022081519/56812dba550346895d92f069/html5/thumbnails/20.jpg)
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
![Page 21: Design And Implementation of Interactive Tutorials for Data Structures](https://reader036.vdocuments.net/reader036/viewer/2022081519/56812dba550346895d92f069/html5/thumbnails/21.jpg)
Sprite class hierarchyAbstractSprite Sprite
ImageSpriteDrawableSprite
NodeSprite ConnectionPoint
HeaderNodeSprite RefNodeSprite ListNodeSprite
RtAngleConnector
UTurnConnector
Interface
Abstract Class
Concrete Class
Implements
Extends
BasicConnector
![Page 22: Design And Implementation of Interactive Tutorials for Data Structures](https://reader036.vdocuments.net/reader036/viewer/2022081519/56812dba550346895d92f069/html5/thumbnails/22.jpg)
Sprite class hierarchyAbstractSprite Sprite
ImageSpriteDrawableSprite
NodeSprite ConnectionPoint
HeaderNodeSprite RefNodeSprite ListNodeSprite
RtAngleConnector
UTurnConnector
Interface
Abstract Class
Concrete Class
Implements
Extends
BasicConnector
![Page 23: Design And Implementation of Interactive Tutorials for Data Structures](https://reader036.vdocuments.net/reader036/viewer/2022081519/56812dba550346895d92f069/html5/thumbnails/23.jpg)
Sprite class hierarchyAbstractSprite Sprite
ImageSpriteDrawableSprite
NodeSprite ConnectionPoint
HeaderNodeSprite RefNodeSprite ListNodeSprite
RtAngleConnector
UTurnConnector
Interface
Abstract Class
Concrete Class
Implements
Extends
BasicConnector
![Page 24: Design And Implementation of Interactive Tutorials for Data Structures](https://reader036.vdocuments.net/reader036/viewer/2022081519/56812dba550346895d92f069/html5/thumbnails/24.jpg)
Sprite class hierarchyAbstractSprite Sprite
ImageSpriteDrawableSprite
NodeSprite ConnectionPoint
HeaderNodeSprite RefNodeSprite ListNodeSprite
RtAngleConnector
UTurnConnector
Interface
Abstract Class
Concrete Class
Implements
Extends
BasicConnector
![Page 25: Design And Implementation of Interactive Tutorials for Data Structures](https://reader036.vdocuments.net/reader036/viewer/2022081519/56812dba550346895d92f069/html5/thumbnails/25.jpg)
Sprite class hierarchyAbstractSprite Sprite
ImageSpriteDrawableSprite
NodeSprite ConnectionPoint
HeaderNodeSprite RefNodeSprite ListNodeSprite
RtAngleConnector
UTurnConnector
Interface
Abstract Class
Concrete Class
Implements
Extends
BasicConnector
![Page 26: Design And Implementation of Interactive Tutorials for Data Structures](https://reader036.vdocuments.net/reader036/viewer/2022081519/56812dba550346895d92f069/html5/thumbnails/26.jpg)
Sprite class hierarchyAbstractSprite Sprite
ImageSpriteDrawableSprite
NodeSprite ConnectionPoint
HeaderNodeSprite RefNodeSprite ListNodeSprite
RtAngleConnector
UTurnConnector
Interface
Abstract Class
Concrete Class
Implements
Extends
BasicConnector
![Page 27: Design And Implementation of Interactive Tutorials for Data Structures](https://reader036.vdocuments.net/reader036/viewer/2022081519/56812dba550346895d92f069/html5/thumbnails/27.jpg)
Example
head
tail
5
HeaderNodeSprite
NodeSprite
(100) (204)
Address of header node Address of node
![Page 28: Design And Implementation of Interactive Tutorials for Data Structures](https://reader036.vdocuments.net/reader036/viewer/2022081519/56812dba550346895d92f069/html5/thumbnails/28.jpg)
Example
head
tail
5
(100) (204)
BasicConnectorSprite
RtAngleConnectorSprite
![Page 29: Design And Implementation of Interactive Tutorials for Data Structures](https://reader036.vdocuments.net/reader036/viewer/2022081519/56812dba550346895d92f069/html5/thumbnails/29.jpg)
Example
head
tail
5
(100) (204)
(204)
(204)
Numeric and visual representationsof pointers
![Page 30: Design And Implementation of Interactive Tutorials for Data Structures](https://reader036.vdocuments.net/reader036/viewer/2022081519/56812dba550346895d92f069/html5/thumbnails/30.jpg)
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
![Page 31: Design And Implementation of Interactive Tutorials for Data Structures](https://reader036.vdocuments.net/reader036/viewer/2022081519/56812dba550346895d92f069/html5/thumbnails/31.jpg)
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
![Page 32: Design And Implementation of Interactive Tutorials for Data Structures](https://reader036.vdocuments.net/reader036/viewer/2022081519/56812dba550346895d92f069/html5/thumbnails/32.jpg)
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
![Page 33: Design And Implementation of Interactive Tutorials for Data Structures](https://reader036.vdocuments.net/reader036/viewer/2022081519/56812dba550346895d92f069/html5/thumbnails/33.jpg)
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.