4.14.tarek

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: atarek@cecil.edu

1

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

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

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

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

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

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

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

Story Boarding with ALICE-2
User starts the ALICE 3 software, which requests to select a project
background as follows:

9

User selects the Sea Surface as follows:

10

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

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

• 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

• 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

More About ALICE-1
• 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
15

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

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

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

18


• 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


• 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

• 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

• 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

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

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

• 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

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

26


• 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


• 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


• 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

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

// 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
}


• 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

• 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); }
{ Labels demoObject = new Labels(); }}
33


• 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

• 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);
}
{
Labels demoObject = new Labels(); }}

35

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

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

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

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

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

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

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

Useful References
• 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/

43

Questions are Welcomed at this Point!

44

4.14.tarek

Recomendados

Recomendados

Más contenido relacionado

Destacado

Destacado (8)

Similar a 4.14.tarek

Similar a 4.14.tarek (20)

Más de afacct

Más de afacct (20)

4.14.tarek