User Manual
Computer animation is an excellent medium for capturing the dynamic nature of data structure manipulations and can be used to advantage in the teaching of algorithms and data structures. A major educational issue is the necessity of providing a means for the student to manage the complexity of the material. We have addressed this issue in a multimedia teaching tool called “Algorithms in Action'' by allowing students to view an algorithm at varying levels of detail. Starting with a high-level pseudocode description of the algorithm, with accompanying high-level animation and textual explanation, students can expand sections of the pseudocode to expose more detail. Animation and explanation are controlled in a coordinated fashion, becoming correspondingly more detailed as the pseudocode is expanded. Algorithms in Action was previously implemented as a Java applet, which is no longer used due to changes in the technology landscape. A focus of the current version is to provide AiA is a modern and easy-to-use fashion.
- Clone the source code from https://gitlab.eng.unimelb.edu.au/lceddia/aia.git
- Enter into the project directory and open your terminal.
- Run ‘npm install’ in the terminal which will download all the 3rd party code needed.
- Run ‘npm start’ in the terminal, then the website will be shown in localhost:3000
The user can select a particular algorithm from a list with a general description of the algorithm and learn how the algorithm works.
The user can execute each visible line of the pseudo-code step by step (as in a program debugger) with an accompanying animation of data structures, the functionalities include the move to the next step and back to the previous step.
- Brief Description
The system displays a brief introduction for a selected algorithm, this helps the user to quickly start on learning the algorithm.
- Line by Line
The user can view explanations specific to each line or block of the pseudo-code and try to understand why the algorithm does what it does. The user can record audio explanations of parts of the algorithm that can be clicked on to play
The user can execute the algorithm from start to end at a viewable speed without constantly clicking to run the next line.
The user can change the speed of execution/animation to make sure the whole process will be at the user’s comfortable speed.
The user can expand any section of the pseudo-code into more detail and only focus on learning about the sections of the algorithm that the user feels unfamiliar with.
The user can change the values of the parameters for the algorithm (e.g. the array of data to be sorted) and understand how the algorithm and data structures behave with the different values.
The user can change animation color and text size.
-
Log in to the main interface of AIA, you will see that the entire page is divided into three main parts: left panel, middle panel, and right panel.
-
Click on the algorithm category located in the left panel to expand and display all the algorithms under that category.
-
Click the algorithm you want to learn, then the instructions for use and the brief description of this algorithm will be displayed in the middle panel and right panel.
-
Click the search bar located in the top left corner.
-
Enter the name of the algorithm you want to find in the input box.
-
Click the Enter button on your keyboard, then the algorithm you want to find will appear on the top of the left panel.
-
Select an algorithm.
-
Click the BACKGROUND label on the top of the right panel, then the pseudocode and line by line explanation will be shown in the right panel.
-
Select an algorithm.
-
Click the CODE label on the top of the right panel, and the pseudocode will be shown in the right panel.
-
The code explanation will be given by clicking on the explanation label.
-
Select an algorithm.
-
Click the MORE button, then the extra information for that algorithm will be shown in the right panel.
-
Select an algorithm.
-
Click the play button in the middle panel, the algorithm will be run automatically. Then you can see the process of this algorithm from the animation (in the middle panel) and the pseudocode (in the right panel).
-
Select an algorithm.
-
Press on the slider bar to change the speed from slow (left) to fast (right).
-
Select an algorithm.
-
Click the CODE label to show the algorithm code.
-
Click the extension icon in the code，Then this line of code will be expanded into a more detailed code.
-
Click the ‘Expand All’ button at the bottom of the right panel to expand all pseudocodes together.
-
Click the ‘Collapse All’ button next to the Expand all button to collapse all expandable pseudocodes.
-
Select an algorithm.
-
Click the right arrow located in the middle of the middle panel. Then the middle panel will show the next step of this algorithm by animation, and the explanation and code will show in the right panel.
- If you want to review the previous step of the algorithm execution, please click the left arrow.
-
Select an algorithm.
-
Enter inputs located in the below middle panel.
-
Click the button located near the input （different parament have different button, for example, insert button and search button) to confirm the input
-
Click on the play button to see the behavior of the algorithm with different parameters.
-
Click on the Settings button located at the top of the right panel.
-
Click on the Reduce font size button(left）and the increased font size button(right) to reduce and increase system font size.
-
Click on the Settings button located at the top of the right panel.
-
Click on the round color mode button to change color mode
-
Click on the Settings button located at the top of the right panel.
-
Click on the round theme button to change the theme of the system.
- Click on the About button located at the top of the right panel to view more information about AIA.
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
The software is provided “as is”, without warranty of any kind, expressed or implied, including but not limited to the warranties of merchantability, fitness for a particular purpose, and non-infringement. In no event shall the authors or copyright holders be liable for any claim, damages, or other liability, whether in an action of contract, tort or otherwise, arising from, out of, or in connection with the software or the use or other deadlines in the software.