1. Document that explains the chosen concept to the animator 1

2. Bubble Sort Authors :-Praveen Pal Mentor :- Aruna Adil Course Name: Design and Analysis of Algorithm Level: UG. 2

3. Learning Objectives After interacting with this Learning Object, the learner will be able to: 1.sort an array using Bubble sort. 2.Explain how bubble sort works. 3

4. 2  Bubble sort algorithm is one of the simplest sorting algorithm.  The algorithm gets its name from the way smaller elements "bubble" to the top of the list.  Because of it’s low o(n ) performance it is not often used for large size or even medium size dataset.  Bubble sort works by repeatedly passing through the array to be sorted,each pass finds the largest value and places it to the end of array.  Start from first element of the array & compare each pair of adjacent elements and if first element is greater than the second then swap them.  When this first pass through the array is complete, the bubble sort returns to first element and starts the process all over again. This process completes when entire array is examined and no swaps are needed. Definitions of the components/Keywords: 5 3 2 4 1 4

5.  After each pass total number of comparisons reduced by one.  N number of elements require maximum of n(n-1)/2 comparison.  This sorting technique is also called the “in-place sorting” because it does not require extra space for sorting. Definitions of the components/Keywords: 5 3 2 4 1 5

6. Master layout or diagram Make a schematic diagram of the concept Explain to the animator about the beginning and ending of the process. Draw image big enough for explaining. In above image, identify and label different components of the process/phenomenon. (These are like characters in a fi lm)‏ Illustrate the basic flow of action by using arrows. Use BOLD lines in the diagram, (minimum 2pts.)‏ In the slide after that, provide the definitions of ALL the labels used in the diagram 5 3 2 4 1 INSTRUCTIONS SLIDE 6

7. 7 IMPORTANT NOTE TO THE ANIMATOR: All the instructions/labels or anything WRITTEN in blue are CONTENT NOT TO BE DISPLAYED! All the instructions WRITTEN in black are CONTENT TO BE DISPLAYED! This is not applicable for images as there can be overlapping of these colours there. This should be followed for all the instructions, labels,etc… Kindly keep a note of this while displaying text in the animation.

8. 8 Components 5 3 2 4 1 INSTRUCTIONS SLIDE 0 Array or list 12345678910 1234678 Index 95 Note: 1:blue color represent the array All digit written in white letter in the array are “element” or “value at index n “(n refers to index number ex. value at index 4 = 5)..

9. Master Layout 9 Project OSCAR IDD Template 4.7 All steps will display hereStatus:- Note : Animators are free to change the color and graphics to make animation more effective. 11 841413115 9 01234567 Bubble Sort Put the Start, Pause, Stop, Step, reset,Think button to control animation. Put a slidebar to control the speed of animation. Put a “let me try” button. When “Think” is pressed, the applet will run with a time delay so that user can think about the next step. When “Step” button is pressed, the applet will start, but will stop after every step until the step button is pressed. When “let me try ” button is pressed then array will display(slide 34,35) and user will select pivot by click and to swap value user click on both value which he/she want to swap. The status bar will be removed in “let me try” mode.

10. Step 1: 1 5 3 2 4 First pass I nstruction for the animator T ext to be displayed in the working area (DT) When user click on start display this array. Array to be sorted in ascending order. Start from first index and move left to right. Compare selected index (i) with next (i+1) index. If value at index (i) is greater then the value at index (i+1) then exchange.and increment selected index i by 1; If value at index i is less then or equal to value at index i+1 simply increment selected index by 1; Select the First index (0). Array elements to be sorted. Elements at final position Selected Index values Index which have processed 11 841413 115 9 01234567

11. Step 2: 1 5 3 2 4 First pass I nstruction for the animator T ext to be displayed in the working area (DT) Represent selected index by green color. Blink the next of selected index, with which comparison is going on. Repeat these steps for all slides. Selected index i = 0. Compare value at index i = 0 with value at index i+1 = 1. 11 > 8 exchange. Increment selected index by 1 ; Array elements to be sorted. Elements at final position. Selected Index values Index which have processed 11 841413115 9 01234567 i

12. Step 3: 1 5 3 2 4 First pass I nstruction for the animator T ext to be displayed in the working area (DT) Represent selected index by green color. Blink the next of selected index, with which comparison is going on. Repeat these steps for all slides. Selected index i = 1. Compare value at index i = 1 with value at index i+1 = 2. 11 > 4 exchange. Increment selected index by 1; Array elements to be sorted. Elements at final position. Selected Index values Index which have processed 8 1141413115 9 01234567 i

13. Step 4: 1 5 3 2 4 First pass I nstruction for the animator T ext to be displayed in the working area (DT) Represent selected index by green color. Blink the next of selected index, with which comparison is going on. Repeat these steps for all slides. Selected index i = 2. Compare value at index i = 2 with value at index i+1 = 3. 11 < 14 NO exchange. Increment selected index by 1; Array elements to be sorted. Elements at final position. Selected Index values Index which have processed 8 4111413115 9 01234567 i

14. Step 5: 1 5 3 2 4 First pass I nstruction for the animator T ext to be displayed in the working area (DT) Represent selected index by green color. Blink the next of selected index, with which comparison is going on. Repeat these steps for all slides. Selected index i = 3. Compare value at index i = 3 with value at index i+1 = 4. 14 > 13 exchange. Increment selected index by 1; Array elements to be sorted. Elements at final position. Selected Index values Index which have processed 8 4111413115 9 01234567 i

15. Step 6: 1 5 3 2 4 First pass I nstruction for the animator T ext to be displayed in the working area (DT) Represent selected index by green color. Blink the next of selected index, with which comparison is going on. Repeat these steps for all slides. Selected index i = 4. Compare value at index i = 4 with value at index i+1 = 5. 14 > 11 exchange. Increment selected index by 1; Array elements to be sorted. Elements at final position. Selected Index values Index which have processed 8 4111314115 9 01234567 i

16. Step 7: 1 5 3 2 4 First pass I nstruction for the animator T ext to be displayed in the working area (DT) Represent selected index by green color. Blink the next of selected index, with which comparison is going on. Repeat these steps for all slides. Selected index i = 5. Compare value at index i = 5 with value at index i+1 = 6. 14 > 5 exchange. Increment selected index by 1; Array elements to be sorted. Elements at final position. Selected Index values Index which have processed 8 4111311145 9 01234567 i

17. Step 8: 1 5 3 2 4 First pass I nstruction for the animator T ext to be displayed in the working area (DT) Represent selected index by green color. Blink the next of selected index, with which comparison is going on. Repeat these steps for all slides. Selected index i = 6. Compare value at index i = 6 with value at index i+1 = 7. 14 > 9 exchange. Increment selected index by 1; Array elements to be sorted. Elements at final position. Selected Index values Index which have processed 8 4111311514 9 01234567 i

18. Step 9: 1 5 3 2 4 First pass I nstruction for the animator T ext to be displayed in the working area (DT) Represent selected index by green color. Blink the next of selected index, with which comparison is going on. Represent last index by red color Repeat these steps for all slides. Selected index i = 7. First pass is complete and 14 reaches to it’s final position. Array elements to be sorted. Elements at final position. Selected Index values Index which have processed 8 411131159 14 01234567 i

19. Step 10: 1 5 3 2 4 Second Pass I nstruction for the animator T ext to be displayed in the working area (DT) Represent selected index by green color. Blink the next of selected index, with which comparison is going on. Represent last index by red color Repeat these steps for all slides. start the second pass from the first index. This time 14 will not be consider in comparison because it reaches to it’s final position.. Array elements to be sorted. Elements at final position. Selected Index values Index which have processed 8 411131159 14 01234567

20. Step 11: 1 5 3 2 4 Second Pass I nstruction for the animator T ext to be displayed in the working area (DT) Represent selected index by green color. Blink the next of selected index, with which comparison is going on. Represent last index by red color Repeat these steps for all slides. Selected index i = 0. Compare value at index i = 0 with value at index i+1 = 1. 8 > 4 exchange. Increment selected index by 1 Array elements to be sorted. Elements at final position. Selected Index values Index which have processed 8 411131159 14 01234567 i

21. Step 12: 1 5 3 2 4 Second Pass I nstruction for the animator T ext to be displayed in the working area (DT) Represent selected index by green color. Blink the next of selected index, with which comparison is going on. Represent last index by red color Repeat these steps for all slides. Selected index i = 1. Compare value at index i = 1 with value at index i+1 = 2 4 < 11 NO exchange. Increment selected index by 1 Array elements to be sorted. Elements at final position. Selected Index values Index which have processed 8 411131159 14 01234567 i

22. Step 13: 1 5 3 2 4 Second Pass I nstruction for the animator T ext to be displayed in the working area (DT) Represent selected index by green color. Blink the next of selected index, with which comparison is going on. Represent last index by red color Repeat these steps for all slides. Selected index i = 2. Compare value at index i = 2 with value at index i+1 = 3. 11< 13 NO exchange. Increment selected index by 1 Array elements to be sorted. Elements at final position. Selected Index values Index which have processed 8 411131159 14 01234567 i

23. Step 14: 1 5 3 2 4 Second Pass I nstruction for the animator T ext to be displayed in the working area (DT) Represent selected index by green color. Blink the next of selected index, with which comparison is going on. Represent last index by red color Repeat these steps for all slides. Selected index i = 3. Compare value at index i = 3 with value at index i+1 = 4. 13 > 11 exchange. Increment selected index by 1 Array elements to be sorted. Elements at final position. Selected Index values Index which have processed 8 411131159 14 01234567 i

24. Step 15: 1 5 3 2 4 Second Pass I nstruction for the animator T ext to be displayed in the working area (DT) Represent selected index by green color. Blink the next of selected index, with which comparison is going on. Represent last index by red color Repeat these steps for all slides. Selected index i = 4. Compare value at index i = 4 with value at index i+1 = 5. 13 > 5 exchange. Increment selected index by 1 Array elements to be sorted. Elements at final position. Selected Index values Index which have processed 8 411 1359 14 01234567 i

25. Step 16: 1 5 3 2 4 Second Pass I nstruction for the animator T ext to be displayed in the working area (DT) Represent selected index by green color. Blink the next of selected index, with which comparison is going on. Represent last index by red color Repeat these steps for all slides. Selected index i = 5. Compare value at index i = 5 with value at index i+1 = 6. 13 > 5 exchange. Increment selected index by 1 Array elements to be sorted. Elements at final position. Selected Index values Index which have processed 8 411 5139 14 01234567 i

26. Step 17: 1 5 3 2 4 Second Pass I nstruction for the animator T ext to be displayed in the working area (DT) Represent selected index by green color. Blink the next of selected index, with which comparison is going on. Represent last index by red color Repeat these steps for all slides. Selected index i = 0. No further comparison is possible. 13 reaches to it’s final position. Array elements to be sorted. Elements at final position. Selected Index values Index which have processed 8 411 5913 14 01234567 i

27. Step 18: 1 5 3 2 4 Third Pass I nstruction for the animator T ext to be displayed in the working area (DT) Follow the same steps as given in above slides to complete the whole sorting Second pass is complete and 13 reaches to it’s final position. start the third pass from the first index. This time 13 will not be considered in comparison because it reaches to it’s final position. Array elements to be sorted. Elements at final position. Selected Index values Index which have processed 8 411 5913 14 01234567

28. 28 4 81159 13 14 01234567 4 85911 13 14 01234567 4 58911 13 14 01234567 After 3rd Pass After 4th Pass After 5th Pass

29. 29 4 58911 13 14 01234567 4 58911 13 14 01234567 Sorted After 6th Pass

30. Interactivity and Boundary limits In this section, you will add the ‘Interactivity’ options to the animation. Use the template in the next slide to give the details. Insert the image of the step/s (explained earlier in the Section 3) in the box, and provide the details in the table below. The details of Interactivity could be: Types: Drop down, Slider bar, Data inputs etc. Options: Select one, Multiple selections etc Boundary Limits: Values of the parameters, which won’t show results after a particular point Results: Explain the effect of the interaction in this column Add more slides if necessary 1 2 5 3 4 30

31. Introduction Credits 31 Definitions Test your understanding (questionnaire) ‏ Lets Sum up (summary) ‏ Want to know more… (Further Reading) ‏ Try it yourself Interactivity: Analogy Slide 4 Slide 37 - 40 Slide 41 Electrical Engineering Place an input box to enter the size of array not more than 15. Place an another input box to enter values to be sorted of size specified in above input box. Place an enter button to enter the value.. After entering the selected values, master layout1 procedure is to be done Array Size :Values : : In the input box the user will input all the numerical values that he/she wants to sort. Display array of size entered above as input, with it’s index and values. Allow values to be entered one by one.

32. 1 5 3 2 4 Let me try (allow user to select and sort) I nstruction for the animator T ext to be displayed in the working area (DT) If user click on “let me try” button then display this array and allow user to do all the tasks by own. Give four chances to user to select correct answer after that correct the answer and move the user to next step. If user click four or more time right answer then give a greeting to user “very good you are going right” 68758937 847282 0123456

33. 1 5 3 2 4 Let me try (allow user to select and sort) I nstruction for the animator T ext to be displayed in the working area (DT) user start from the first index, change the color accordingly. Allow user to arrange value,so that larger values moves to higher index after every pass Restrict user to select only correct value on wrong value show the error. Repeatedly pass through the given array and sort the elements. 68758937 847282 0123456

34. INSTRUCTIONS SLIDE Self- Assessment Questionnaire for Learners Please provide a set of questions that a user can answer based on the LO. They can be of the following types: –These questions should be 5 in number and can be of objective type (like MCQ, Match the columns, Yes or No, Sequencing, Odd One Out). –The questions can also be open-ended. The user would be asked to think about the question. The author is requested to provide hints if possible, but a full answer is not necessary. –One can include questions, for which the user will need to interact with the LO (with certain parameters) in order to answer it. 34

35. INSTRUCTIONS SLIDE Please make sure that the questions can be answered by interacting with the LO. It is better to avoid questions based purely on recall. Questionnaire for users to test their understanding 35

36. Question 1: How many maximum comparisons are required to sort an array having 5 elements using bubble sort. Answers: 1. 5 2. 3 3. 4 4. 10 Correct answer: 10 Feedback/Justification to be displayed: If user clicks correct answer then display ____ Correct ____ If user clicks incorrect answer then display ____Incorrect 10 is correct answer, go to the animation again_______. 36Project OSCAR IDD Template 4.7

37. Question 2: which option is correct after applying the second pass of bubble sort on the array. Answers: 1. 4 3 2 8 9 32 2. 4 2 8 3 9 32 3. 4 8 3 2 9 32 4. 8 3 2 9 4 32 Correct answer: 4 2 8 3 9 32 Feedback/Justification to be displayed: If user clicks correct answer then display ____ Correct ____ If user clicks incorrect answer then display ____ Incorrect. 2 is correct answer _______. 37Project OSCAR IDD Template 4.7 4 32 9 2 8 3

38. Question 3: what is running time of bubble sort algorithm. Answers: 1. o(n log n) 2. o(n) 3. o(n ) 4. o(log n) Correct answer: o(n ) is correct answer Feedback/Justification to be displayed: If user clicks correct answer then display ____ Correct ____ If user clicks incorrect answer then display ____ Incorrect. 1 is correct answer because largest or smallest element always give the quadratic run time _______. 38Project OSCAR IDD Template 4.7 2 2

39. Question 4:-bubble sort is fast for? Answers: 1.For large size list. 2. For small size list. 3. works for both large and small size list. 4. None of the above Correct answer: for small size list Feedback/Justification to be displayed: If user clicks correct answer then display ____ Correct ____ If user clicks incorrect answer then display ____Incorrect 2 is correct answer _______. 39Project OSCAR IDD Template 4.7

40. References Website links for further reading: http://en.wikipedia.org/wiki/Quicksort Books: “Introduction to Algorithm” Thomas H. Coremen 40Project OSCAR IDD Template 4.7