2. HAlVis Selection Sort Example Hypermedia Algorithm Visualizations Intelligent & Interactive Systems Laboratory Computer Science & Software Eng. Dept. Auburn University EXIT > >

3. © IIS Lab, Auburn University Contents HAlVis Architecture Analogical Description Detailed Look Algorithm in Action Questions Go EXIT > > < < Go

4. © IIS Lab, Auburn University Architecture > > < < Each algorithm visualization in HAlVis is structured as three main modules and two supporting modules. The first module (Conceptual View) explains the core operations of the algorithm and illustrates them using a familiar, real-world analogy. For instance, the analogy for the Selection Sort algorithm shows a line of people that sort themselves by height. The second module (Detailed View) first presents, side-by-side, the pseudocode description and textual explanation of the algorithm. Technical terms in this explanation are hyperlinked to definitions and additional illustrations of fundamental algorithmic principles in a supporting module (Fundamentals). Subsequently, four representations are presented simultaneously - one is a detailed animation of the operation of the algorithm on a small data set; the second is the pseudocode of the algorithm in which steps are highlighted synchronously with the animation; the third is a verbal explanation of the events occurring in the animation, and the fourth is a scoreboard of variables. The third module (Populated View) presents an animation of the algorithm's operation on a much larger data set. It also allows the user to make predictions about parameters of the algorithm's behavior and compare these against actual values. This facility and questions provided by a supporting module (Questions) are intended as self-assessment tools for the learner. EXIT CONTENTS

5. © IIS Lab, Auburn University Architecture > > < < EXIT CONTENTS

6. © IIS Lab, Auburn University Conceptual View > > < < EXIT CONTENTS NEXT MODULE

7. © IIS Lab, Auburn University Conceptual View > > < < Clicking on the Show Me the First Pass button will start an animation in which the first person in the line asks the question “who is shorter than me?”. Each person down the line answers this question. Each one who is shorter will trade places with the first person. Frames of this animation follow... EXIT CONTENTS NEXT MODULE

8. © IIS Lab, Auburn University Conceptual View > > < < EXIT CONTENTS NEXT MODULE

9. © IIS Lab, Auburn University Conceptual View > > < < EXIT CONTENTS NEXT MODULE

10. © IIS Lab, Auburn University Conceptual View > > < < Clicking on the Show Me the Next Pass button will start an animation in which the second person in the line asks the question “who is shorter than me?”. Each person down the line answers this question. Each one who is shorter will trade places with the first person. This repeats for every person except the last. Frames of this animation follow... EXIT CONTENTS NEXT MODULE

11. © IIS Lab, Auburn University Conceptual View > > < < EXIT CONTENTS NEXT MODULE

12. © IIS Lab, Auburn University Conceptual View > > < < EXIT CONTENTS NEXT MODULE

13. © IIS Lab, Auburn University Conceptual View > > < < EXIT CONTENTS NEXT MODULE

14. © IIS Lab, Auburn University Conceptual View > > < < NEXT MODULE EXIT CONTENTS

15. © IIS Lab, Auburn University Detailed View > > < < PREVIOUS MODULE The Detailed View contains a textual presentation explaining the algorithm’s pseudocode, as the next slide shows. This explanation is hyperlinked to additional multimedia illustrations in a Fundamentals module. The slide after the next illustrates this by showing what happens if the learner clicks on the hyperlink swap. EXIT CONTENTS NEXT MODULE

16. © IIS Lab, Auburn University Detailed View > > < < EXIT CONTENTS NEXT MODULE PREVIOUS MODULE

17. © IIS Lab, Auburn University Fundamentals > > < < EXIT CONTENTS NEXT MODULE PREVIOUS MODULE

18. © IIS Lab, Auburn University Detailed View > > < < Next, the Detailed View presents a panorama of the algorithm’s behavior on a small data set, as the following slide shows. This window is divided into four panes: Execution Animation (upper left): shows the algorithm’s operation on a small data set using a micro-level animation. Algorithm Pseudocode (upper right): steps are highlighted in red, synchronously with the animation. Execution Variables (lower left): shows the changing values of important variables as execution proceeds. Execution Status Messages (lower right): provides explanatory messages about events in the animation. EXIT CONTENTS NEXT MODULE PREVIOUS MODULE

19. © IIS Lab, Auburn University Detailed View > > < < EXIT CONTENTS NEXT MODULE PREVIOUS MODULE

20. © IIS Lab, Auburn University Detailed View > > < < Clicking on the Show Me button will make these four panes come alive! The Control Panel button allows the learner to change various aspects of the animation (see next slide). For example, the animation speed can be changed, its “chunking level” (where it pauses) can be altered, the learner can choose to run the animation with his or her own data, and the sorting order can be switched (ascending or descending). EXIT CONTENTS NEXT MODULE PREVIOUS MODULE

21. © IIS Lab, Auburn University Detailed View > > < < EXIT CONTENTS NEXT MODULE PREVIOUS MODULE

22. © IIS Lab, Auburn University Detailed View > > < < The next slide shows a frame from the Animation. Data items already in place in the array being sorted are grayed out. The two data items being compared are highlighted in red. Also note that the step being animated is highlighted in the Pseudocode, brief explanations appear in the Execution Status Messages, and variable values are shown in the Execution Variables scoreboard. EXIT CONTENTS NEXT MODULE PREVIOUS MODULE

23. © IIS Lab, Auburn University Detailed View > > < < EXIT CONTENTS NEXT MODULE PREVIOUS MODULE

24. © IIS Lab, Auburn University Detailed View > > < < Swapping two data items that are out of order is the most fundamental operation of any sorting algorithm. The next three slides illustrate how this is shown using smooth animation. One data item smoothly moves to the Temp location on the upper right, the second item moves to its place, and then the item in Temp moves to the place vacated by the second item. EXIT CONTENTS NEXT MODULE PREVIOUS MODULE

25. © IIS Lab, Auburn University Detailed View > > < < EXIT CONTENTS NEXT MODULE PREVIOUS MODULE

26. © IIS Lab, Auburn University Detailed View > > < < EXIT CONTENTS NEXT MODULE PREVIOUS MODULE

27. © IIS Lab, Auburn University Detailed View > > < < EXIT CONTENTS NEXT MODULE PREVIOUS MODULE

28. © IIS Lab, Auburn University Detailed View > > < < Occasionally, the animation pauses and “tickler” questions from the Questions module pop up (see next slide). These questions are intended to combat the “hands-on, minds-off” problem of multimedia, by encouraging critical thinking and self-assessment. The learner, however, is not forced to answer the question before proceeding with the animation. EXIT CONTENTS NEXT MODULE PREVIOUS MODULE

29. © IIS Lab, Auburn University Detailed View > > < < EXIT CONTENTS NEXT MODULE PREVIOUS MODULE

30. © IIS Lab, Auburn University Detailed View > > < < The animation has ended... EXIT CONTENTS NEXT MODULE PREVIOUS MODULE

31. © IIS Lab, Auburn University Detailed View > > < < NEXT MODULE EXIT CONTENTS PREVIOUS MODULE

32. © IIS Lab, Auburn University Populated View EXIT > > < < PREVIOUS MODULE NEXT MODULE The next module is the Populated View that shows a macro-level animation (without the minute details) of the algorithm’s operation on a large data set. Note three important features: (1) The learner can make predictions about major parameters of the algorithm’s operation and compare his/her predictions against actual values. (2) The learner can choose to see the algorithm operating on worst-case, best-case or randomly distributed data. (3) The learner can adjust the speed of animation at the beginning or while the animation is in progress. CONTENTS

33. © IIS Lab, Auburn University Populated View EXIT CONTENTS > > < < PREVIOUS MODULE NEXT MODULE The following three slides illustrate the Populated View animation. The first slide shows the data to be sorted (worst-case). Note that the learner has made some predictions and selected the slowest speed. The second slide shows a frame from the animation in progress. Note the color coding that conveys information about data items that have already been sorted and those that are currently being considered. The third slide shows the last frame of this animation. Sorting is complete. The learner can now compare the predictions against actual values.

34. © IIS Lab, Auburn University Populated View EXIT CONTENTS > > < < PREVIOUS MODULE NEXT MODULE

35. © IIS Lab, Auburn University Populated View EXIT CONTENTS > > < < PREVIOUS MODULE NEXT MODULE

36. © IIS Lab, Auburn University Populated View EXIT CONTENTS > > < < PREVIOUS MODULE NEXT MODULE

37. © IIS Lab, Auburn University Questions EXIT CONTENTS > > < < PREVIOUS MODULE The last module poses questions that we call “articulation points” to the learner. These are questions he or she can answer and receive immediate feedback from the system as to whether the answer is correct or not. The next two slides illustrate two types of questions asked: multiple choice and pseudocode correction.

38. © IIS Lab, Auburn University Questions EXIT CONTENTS > > < < PREVIOUS MODULE

39. © IIS Lab, Auburn University Questions EXIT CONTENTS > > < < PREVIOUS MODULE

40. End EXIT CONTENTS < <