4.14.tarek

Active Learning Infused Visual Programming – A Powerful Blended Tool for Teaching Computer

Programming to Beginners

AHMED TAREKCecil College

AFACCT ‘14 Conference, hosted byPrince George’s Community CollegeSession: 4.14 – January 09, 2014 3:10 p.m. – 4:20 p.m.E-mail: [email protected]

1

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

3

• 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

Culminating Student Interest in Computer Programming-1

4

•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

Culminating Student Interest in Computer Programming-2

5

• 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.”

Effectiveness Analysis of Active Learning Imbued Visual Programming

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.

7

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

ALICE AS A VISUAL PROGRAMMING TOOL-2

8

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

STORY BOARDING WITH ALICE-1

9

User starts the ALICE 3 software, which requests to select a project background as follows:

Story Boarding with ALICE-2

10

User selects the Sea Surface as follows:


11

Next the user looks for a submarine and adds it to the seaThe user Names the Submarine as the Yellow Submarine

The user selects the “Starting Camera View”


12

Story Boarding with ALICE-5The 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

13


• 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

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

15

• ALICE is a Carnegie Mellon Project

• The software is free and available for download from: http://www.alice.org

• There are free instructional materials to support teaching of Computer Programming through ALICE, Version 3 available for download from: http://www.alice.org/3.1/materials_introduction.php

• The instructional materials include–PowerPoint Slides–Representative Projects–Sample Quizzes–Supplemental Videos

•Programming in ALICE helps in turning Abstractions into Animations

More About ALICE-1

http://www.alice.org/

http://www.alice.org/

http://www.alice.org/3.1/materials_introduction.php

http://www.alice.org/3.1/materials_introduction.php

16

• 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

More About ALICE-2

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.

18

Visual Basic As A Visual Programming Tool-2To begin with the Programming Problem, the students create a New Project in Visual Basic with Windows Forms Application as follows:

19

• 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

Visual Basic As A Visual Programming Tool-3

20

• 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


21

• 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

22

• 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:


23

• Beginning at the blinking cursor position, students enter the following VB Code to make their program operationalDim Num1, Num2, Num3, Product As SingleNum1 = TextBox1.TextNum2 = TextBox2.TextNum3 = TextBox3.TextProduct = Num1 * Num2 * Num3Label1.Text = Product

• Students Press F5. The program runs and

provides with the expected output!

• The students are happy now!


24

• 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

Visual Basic As A Visual Programming Aid-1

25

• 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


26

• Following is screen capture of the running VB program with 5 fruit names in the ListBox


27

• 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.


28

• 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.


29

• 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.


30

• 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.

Java & Visual Programming-1

31

// Rectangle Program to calculate the area and the circumference from the length & the width inputsimport 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 units\n" + "Circumference: " + circumference + " units"; JOptionPane.showMessageDialog(null, outputString, "Rectangle", JOptionPane.INFORMATION_MESSAGE); System.exit(0); }}


32

• 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:

• 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 Windowimport 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

• Following shows the window created by the Java program.Java & Visual Programming-5

• With simple modifications, following shows the window created by the previous Java program with text in its body.

34

• 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 Graphicsimport 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

• 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:

Outcomes of the Blended Visual Tool Approach-1

Class Section

A (Cumulative 90% - 100%)

B (Cumulativ

e 80% - 89%)

C (Cumulativ

e 70% - 79%)

D (Cumulativ

e 60% - 69%)

F (Cumulative 0% - 59%)

Total Student Count

CSC 109 01 Spring

20133 4 6 2 0 15

CSC 109 02 Spring

20136 6 3 1 3 19

CSC 109 01

Summer 2013

1 3 0 0 1 536

• Following shows the Overall Statistics from applying the Active Learning Infused Visual Programming approach:

Outcomes of the Blended Visual Tool Approach-2

ItemA

(Cumulative 90% - 100%)

B (Cumulativ

e 80% - 89%)

C (Cumulativ

e 70% - 79%)

D (Cumulativ

e 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

• 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

Outcomes Analysis-1

10

13

9

3

4

Grade Count in Applying the Blended Tool

A B C D F 38

• 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.

Outcomes Analysis-2

ActivityMidterm

ExamFinal Exam

Visual Basic

Programming

Visual Basic

Activities

Visual C++

Programming

Visual C++

Activities

Percentage Count

15% 15% 25% 10% 25% 10%

39

• 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

A Model for Teaching using Active Learning Infused Visual Programming

40

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

Pros & Cons of the Blended Teaching Tool

41

• 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

Conclusions

42

• JAVA is a free software available for download from the following website URL:

http://java.com/en/download/index.jsp

• 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:

https://netbeans.org/downloads/7.1/

• 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:

http://www.jgrasp.org/

Useful References

43

http://java.com/en/download/index.jsp

https://netbeans.org/downloads/7.1/

http://www.jgrasp.org/

44

Questions are Welcomed at this Point!

4.14.tarek

Documents

Transcript of 4.14.tarek