Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.



Published on

  • Be the first to comment

  • Be the first to like this


  1. 1. AHMED TAREK Cecil College University System of Maryland (USM) AFACCT ‘14 Conference Prince George’s Community College Session: 4.14 – January 09, 2014 3:10 p.m. – 4:20 p.m. E-mail: 1
  2. 2. Presentation Outlines • Initiating student interest in computer programming • Effectiveness consideration for Active Learning Imbued Visual Tools to Student Success • Diverse Visual Programming Tools Available in the Market • Outcomes Analysis for the Active Learning Infused Visual Programming Pedagogy • A Model for Implementing the Blended Visual Programming Tool • The Pros & Cons of the Approach Presented 2
  3. 3. Culminating Student Interest in Computer Programming-1 • As a place for Education, the Community Colleges are open to public (to everyone) living in the community • Hence, the Class Learning Environment in a Community College is diverse • A group of students in the class take real interest in learning about computers and computer programming • On the other hand, it remains as a hurdle for the instructor to bring in real interest to computers and computer programming to a limited number of classroom students • Therefore, the instructor is required to align his/her teaching pedagogy for the entire classroom students • Research and experience shows that students take real interest in computers and computer programming when taught hands-on • Instantaneous output from a computer program is definitely more appealing to the learners compared to their obsolete command-line driven counter parts 3
  4. 4. Culminating Student Interest in Computer Programming-2 • Realize that a picture is worth a thousand statements when it comes to computer programming - at least for the novice to the programming paradigm • Hence, I came up with the idea of combining the active learning pedagogy with Visual Programming as a powerful, motivational tool for teaching computer programming to the start-up learners • This Active Learning integrated Visual Programming approach remains at the heart of this presentation • During the discussion, I will familiarize the audience to a variety of such visual programming tools available for the Active Learning pedagogy in teaching computer programming 4
  5. 5. Effectiveness Analysis of Active Learning Imbued Visual Programming • Among several different factors that would lead to the success of the Blended Teaching Tool, following are the elementary considerations – Designing an effective instructional delivery, which comprises consideration of which portion of the content to be made hands-on and which portion to be made available for Visual Demonstration – Class approach of instructor, which simply means easiness of the instructor in delivering the content to the classroom students using this Compound Teaching Tool – Active Guidance of the Instructor to the Learners – Towards the end of the class, there needs to be an online, hands-on, open book in-class quiz session covering the materials/topics discussed, demonstrated and actively practiced by the students so that students may recall/review the materials learnt during the classroom session – this will implant the day’s learning to the brain of the students • The point is: ‚A Hands-on Visual Learning is Worth a Thousand Spoken Words during the Class Lecture.‛ • The focus is: ‚Class Time Well Spent with Student Learning of the Study Materials.‛ 5
  6. 6. ALICE AS A VISUAL PROGRAMMING TOOL-1 • ALICE is a free Educational Software that teaches students computer programming in a 3D simulated environment • For helping with the simulation, ALICE uses a simulated Camera environment with different possible angles • Students create simulated environment, and then use predefined coding structures for object movements in the simulated environment. 6
  7. 7. ALICE AS A VISUAL PROGRAMMING TOOL-2  Students can create their own story boards and implement the story in ALICE Students can move the objects in several different directions Once the story is fully implemented, they can upload the video to YouTube Following Shows a step-by-step procedure of creating videos in ALICE 7
  8. 8. STORY BOARDING WITH ALICE-1 Let’s try this simple scenario: A submarine gets into trouble. So it floats up to the surface water. Then the troubled submarine tries to approach the shore 8
  9. 9. Story Boarding with ALICE-2 User starts the ALICE 3 software, which requests to select a project background as follows: 9
  10. 10. Story Boarding with ALICE-3 User selects the Sea Surface as follows: 10
  11. 11. Story Boarding with ALICE-4 Next the user looks for a submarine and adds it to the sea The user Names the Submarine as the Yellow Submarine The user selects the ‚Starting Camera View‛ 11
  12. 12. Story Boarding with ALICE-5 The user double clicks on the submarine to change its color The user sets the color of the submarine to yellow The user double clicks on Enter Code to enter ALICE codes 12
  13. 13. Story Boarding with ALICE-6 • At first, the user enters code for rolling the submarine gently to the right • Next the user enters code for turning the submarine gently to the left • Finally, the user enters code for moving the submarine towards the camera • For each of these activities, it can be performed with simple mouse clicks • This grows real intuition, interest and curiosity among students in learning more about computer programs 13
  14. 14. Story Boarding with ALICE-7 • Following screen capture shows that the video is being recorded for uploading to the YouTube. • The screen capture next to it shows that the user can play and replay the video that he/she has created as many times as needed 14
  15. 15. More About ALICE-1 • ALICE is a Carnegie Mellon Project • The software is free and available for download from: • There are free instructional materials to support teaching of Computer Programming through ALICE, Version 3 available for download from: • The instructional materials include –PowerPoint Slides –Representative Projects –Sample Quizzes –Supplemental Videos • Programming in ALICE helps in turning Abstractions into Animations 15
  16. 16. More About ALICE-2 • There are also standard textbooks on ALICE to teach Active, Hands-on Computer Programming through different Visual Aids • Following are couple of the textbooks that are available in the market 16
  17. 17. Visual Basic As A Visual Programming Tool-1 • Visual Basic is a software to perform the Event Driven Programming • Visual Basic communicates with the user through a Graphical User Interface (GUI) • Usually, a GUI contains a Window and a variety of objects that may be displayed on a variety of display devices such as a Monitor screen, iPad screen, Smart phone screen, etc. • There is a software called intelliSense, which is an integral part of Microsoft Visual Basic that can sense the user input and helps with the Visual Basic coding as well as debugging the code • Let’s discuss the step-by-step procedure in working with an interesting Visual Basic program that will promote student interest in computer programming. • Students are to write a simple multiplication program that will input three integer values from three TextBox objects. The VB program will then multiply those numbers, and will display the result of the multiplication in a Label control. 17
  18. 18. Visual Basic As A Visual Programming Tool-2 To begin with the Programming Problem, the students create a New Project in Visual Basic with Windows Forms Application as follows: 18
  19. 19. Visual Basic As A Visual Programming Tool-3 • Students adjust the size of the VB Form using 3 sizing handles in the GUI that pops up • Students change the name of the Form to IntegerMultiplication.vb • Students change the Title of the Form to: Integer Multiplication Form • As a result, they get a GUI as next: • The GUI has a Toolbox Pane to its left 19
  20. 20. Visual Basic As A Visual Programming Tool-4 • The students selects the background color of the Form to Lawn Green • They add three Textboxes in vertical orientation one on top of another, adjusts the sizes and the positions of the three Textboxes as a Group using the Format menu • They add a Label and a Button object to the Form, align those and obtain the following GUI 20
  21. 21. Visual Basic As A Visual Programming Tool-5 • Once satisfied, they save the project as follows. • Before proceeding with writing the VB code, students change the text on the Button to: Click Me to Multiply • Students change text on the Label object to: Results from Multiplication • Students run the stand alone VB Form as a GUI without any code in the program by pressing F5 on the keyboard • The GUI runs and nothing happens as they enter three integers in three Textboxes and click the Button that says: Click Me to Multiply 21
  22. 22. Visual Basic As A Visual Programming Tool-6 • The students get a little bit frustrated but the Instructor assures that their GUI is perfect. However, they will need to write a little bit of Visual Basic code to make their GUI OPERATIONAL • Students simply double click the Button on the GUI that takes them to the VB Coding Window as follows: 22
  23. 23. Visual Basic As A Visual Programming Tool-7 • Beginning at the blinking cursor position, students enter the following VB Code to make their program operational Dim Num1, Num2, Num3, Product As Single Num1 = TextBox1.Text Num2 = TextBox2.Text Num3 = TextBox3.Text Product = Num1 * Num2 * Num3 Label1.Text = Product • Students Press F5. The program runs and provides with the expected output! • The students are happy now! 23
  24. 24. Visual Basic As A Visual Programming Aid-1 • Microsoft’s Visual Basic has a very Powerful set of objects in the Object Toolbox that strongly aids in Visual Programming • One such object is a ListBox control that helps in listing a number of items in a box • VB Programming for a ListBox is pretty simple • Suppose we want to write a VB Program that adds the names of different fruits to a ListBox • Students simply create a VB project named with ListBoxApplication • They resize, rename and adjust the Background color of the form to Aquamarine • They add a ListBox, a TextBox and a Button object to the Form • Resize and position them in the middle of the Form as a group • Save the VB Project as next: • Change the text on Button to read: Click to Enter Fruit Name 24
  25. 25. Visual Basic As A Visual Programming Aid-2 • Students press F5 and get their GUI executing as follows: • Since the VB Program doesn’t have a code in it, nothing happens once they click the Button • Students double click the Button control and enter the following code and save project: Dim item As String Item = TextBox1.Text ListBox1.Items.Add(item) • The GUI become operational, and once they enter the name of a fruit in the TextBox and click the Button, the name goes to the ListBox 25
  26. 26. Visual Basic As A Visual Programming Aid-3 • Following is screen capture of the running VB program with 5 fruit names in the ListBox 26
  27. 27. Visual Basic As A Visual Programming Aid-4 • With Visual Basic, it’s possible to create useful applications, and then deploy those for practical usage. • Following are a few examples. • The first example is a Calculator for Digital Downloads. It calculates the total cost of downloading music with a $0.99 price for each musical download. 27
  28. 28. Visual Basic As A Visual Programming Aid-5 • The second application is about the Wood Cabinet Estimate. It helps to select the kind of wood for a cabinet, and then estimates the total cost of manufacturing using the type of wood selected. 28
  29. 29. Visual Basic As A Visual Programming Aid-6 • The last example is about a Traffic Radar Application. It simulates a Highway Radar Checkpoint, and helps to calculate the average speed at the checkpoint of ten different vehicles that crossed that point, given the posted speed limit at the checkpoint. 29
  30. 30. Java & Visual Programming-1 • Java as a software was evolved after C and C++ and contains strong Visual Programming Flavors for Hands-on, Active Teaching Pedagogy • Just like Visual Basic, Java provides GUI-based Input Dialog Box for data input • Like Visual Basic, Java provides GUI-based Output Box (showMessageDialog Box) for data output • Following Java Program prompts the program user and reads in the length and the width of a rectangle through an Input Dialog Box • Then the Java program calculates the area and the circumference of the rectangle, and displays those to a Message Dialog Box. 30
  31. 31. Java & Visual Programming-2 // Rectangle Program to calculate the area and the circumference from the length & the width inputs import javax.swing.JOptionPane; class Rectangle { public static void main(String args[]) { double length, width, area, circumference; String lengthString, widthString, outputString; lengthString = JOptionPane.showInputDialog("Enter the length: "); length = Double.parseDouble(lengthString); widthString = JOptionPane.showInputDialog("Enter the width: "); width = Double.parseDouble(widthString); area = length*width; circumference = 2.0*length + 2.0*width; outputString = "Length: " + length + "n" + "Width: " + width + "n" + "Area: " + area + " square unitsn" + "Circumference: " + circumference + " units"; JOptionPane.showMessageDialog(null, outputString, "Rectangle", JOptionPane.INFORMATION_MESSAGE); System.exit(0); } 31 }
  32. 32. Java & Visual Programming-3 • Following shows the two input dialog boxes with prompts to input the length and the width of the rectangle from the keyboard: • Following shows the output Message dialog box obtained from executing the Computer program: 32
  33. 33. Java & Visual Programming-4 • Visual Basic provides with a comprehensive ToolBox from where Label, TextBox and other objects are readily available • Java provides with simple Coding Constructs through which Labels, TextBoxes and other GUI objects may be easily created • This initiates student interest in writing Java code to create different GUI-based events • Following Java program creates a simple Window import javax.swing.*; public class Labels extends Jframe { private static final int WIDTH = 350; private static final int HEIGHT = 100; public Labels() { setTitle("Labels, fonts, and colors Demo"); setSize(WIDTH, HEIGHT); setVisible(true); setDefaultCloseOperation(EXIT_ON_CLOSE); } public static void main(String args[]) { Labels demoObject = new Labels(); }} 33
  34. 34. Java & Visual Programming-5 • Following shows the window created by the Java program. • With simple modifications, following shows the window created by the previous Java program with text in its body. 34
  35. 35. Java & Visual Programming-6 • Following is the modified Java code for displaying text in the body of the Window created: • The added parts to the previous coding are colored in red. With simple additions, we may extend Java Graphics import javax.swing.*; import java.awt.*; import java.awt.event.*; public class Labels extends JFrame { private JLabel javaL, programmingL, rocksL; private Container pane; private static final int WIDTH = 350; private static final int HEIGHT = 100; public Labels() { javaL = new JLabel("Java", SwingConstants.CENTER); programmingL = new JLabel("Programming", SwingConstants.CENTER); rocksL = new JLabel("Rocks", SwingConstants.CENTER); setTitle("Labels, fonts, and colors Demo"); pane = getContentPane(); pane.setLayout(new GridLayout(1, 2)); pane.add(javaL); pane.add(programmingL); pane.add(rocksL); setSize(WIDTH, HEIGHT); setVisible(true); setDefaultCloseOperation(EXIT_ON_CLOSE); } public static void main(String args[]) { Labels demoObject = new Labels(); }} 35
  36. 36. Outcomes of the Blended Visual Tool Approach-1 • This blended Visual Programming Approach was applied to 3 different class sections of CSC 109 Introduction to Programming course – 2 in the Spring of 2013 and 1 in the past summer (summer of 2013) • Following summarizes the outcomes: Class Section A (Cumulative 90% - 100%) B (Cumulative 80% - 89%) C (Cumulative 70% - 79%) D (Cumulative 60% - 69%) F (Cumulative 0% - 59%) Total Student Count CSC 109 01 Spring 2013 3 4 6 2 0 15 CSC 109 02 Spring 2013 6 6 3 1 3 19 CSC 109 01 Summer 2013 1 3 0 0 1 5 36
  37. 37. Outcomes of the Blended Visual Tool Approach-2 • Following shows the Overall Statistics from applying the Active Learning Infused Visual Programming approach: Item A (Cumulative 90% - 100%) B (Cumulative 80% - 89%) C (Cumulative 70% - 79%) D (Cumulative 60% - 69%) F (Cumulative 0% - 59%) Total Student Count Total Student Count 10 13 9 3 4 39 Percentage of Total Student Count 25.6% 33.3% 23.1% 7.7% 10.3% 100% 37
  38. 38. Outcomes Analysis-1 Grade Count in Applying the Blended Tool 4 10 3 9 13 • A total of 39 students completed a course that has used the proposed approach • Using the Blended Visual Approach, the total count of ‘A’ was 10, which is over 25% (one quarter) • The count for ‘B’ was 13 (one third), which is considered as the mediocre grade • The count for a ‘C’ grade was 9, which is about 23.1% • Only 3 students achieved a ‘D’ • Only 4 students couldn’t succeed • Previously used Visual Studio 2010. Recently, started to use Visual Studio 2012 A B C D F 38
  39. 39. Outcomes Analysis-2 • Study shows that the students receiving ‘D’ and ‘F’ grades have missed a number of classes as well as in-class, hands-on activities • Students receiving a ‘C’ grade have missed one or two classes during the semester • Those achieving ‘A’ and ‘B’ grades have regularly attended the in-class sessions, and have actively completed the hands-on Visual Programming assignments • Following grading distribution was used for the course (CSC 109) with this experimentation. Activities include on-line quizzes, code tracing exercises, etc. Visual Visual Visual C++ Midterm Basic Visual C++ Activity Final Exam Basic Programm Exam Programm Activities Activities ing ing Percentage Count 15% 15% 25% 10% 25% 10% 39
  40. 40. A Model for Teaching using Active Learning Infused Visual Programming • For each module, the active teaching and learning process may be sub-divided into the following categories – Discuss the core concept in the module. Such as Visual Basic Iterative Structures – Exemplify the concept discussed. Show VB code that uses the Iterative Structure discussed, such as a while loop – Give students exercises relating to the discussion concept and the example demonstrated. Such as, Code Tracing and Error Analysis in Visual Basic code that contains while Repetitive Structure – Show and involve students in Complete Programming Projects that involve the concepts discussed in the module (such as the Iterative Structures discussed) – Students take hands-on, in-class, open-book and open-note online quizzes involving the discussion concepts – Assign reading, and hands-on practice exercises for the next class meeting • Though programming projects, programming exercises, and the online tests are open-book, however, the Midterm and the Final Exams are closed-book & closed-note to verify the depth of learning 40
  41. 41. Pros & Cons of the Blended Teaching Tool PROS • The model presented in this discussion is NOT for the ONLINE LEARNING & STRICTLY FOR THE IN-CLASS, HANDS-ON LEARNING ENVIRONMENT • Students who attend classes regularly, and follow the classroom instructions carefully, actually enjoy the class meeting times and have a very HIGH RATE of SUCCESS! CONS • Off-course, there are Active Teaching & Learning Models for the Online Pedagogy • However, this model doesn’t fit the online, active teaching & learning pedagogy at all • Students who are employed full time, and had to miss classes due to various obligations have had hard time with this approach • The Learning Modules are designed in an Integrated fashion. So missing a module or module-based activities means missing connection to the next module, which would cost them to a hard time in following up & learning 41
  42. 42. Conclusions • A picture is definitely worth a 1,000 words • Visual Programming makes more sense to the students compared to the traditional approach with the Command Line-based Programming • As a result to the Visual Effects through the Programming Tools available with the Modern Programming Languages – Students learn faster – Students understand the underlying concepts better – Students may create powerful applications with preliminary knowledge, which is very interesting for the learners & beginners in computer programming – Since the Visual Tools are readily available, some of which are for FREE (such as ALICE), the ACTIVE LEARNING becomes easier – Active learning is more fascinating and effective for the beginners with computer programming. Therefore, it becomes IMPERATIVE for the Learners to learn the Art of Computer Programming, and it becomes easier for the Instructors to guide and teach the programming courses • The Principal focus of this Active Learning Imbued Visual Programming approach is the Student Learning in the easiest adaptable way & not to give hard time to the students 42
  43. 43. Useful References • JAVA is a free software available for download from the following website URL: • NetBeans is a free editor for Java-based software development (exclusively for the Java platform), and the latest version (NetBeans Integrated Development Environment (IDE) 7.1) is available for free from the following URL: • Another useful Java Editor is jGRASP. The latest version is jGRASP 2.0. The software was developed by the Auburn University in Alabama, and is available for free to the public from the following website: 43
  44. 44. Questions are Welcomed at this Point! 44