1. FLIPPED CLASSROOM ACTIVITY CONSTRUCTOR – USING WEB PROGRAMMING
E Sirisha
Assistant Professor
Dept of CSE,GVPCOE(A)

2. About Topic
Web programming is used for developing web pages and to create server side applications..
Web programming deals with HTML, Java Script, XML, Servlets, JSP and JDBC.
Web programming will support arrays, regular expressions etc.
Arrays can be two types:
1. One Dimensional Arrays
2. Two Dimensional Arrays

3. Table of Contents SECTION SLIDE # 6 15 ABOUT ME 4 OUT-OF-CLASS SEGMENT
IN-CLASS SEGMENT 15

4. About Me
I E. Sirisha, Assistant Professor, Department of Computer Science of Engineering, Gayatri Vidya Parishad College of Engineering(A), Madhurawada, Visakhapatnam.
I completed my M.Tech with Computer Science and Technology in Andhra University, Maddilapalem, Visakhapatnam.
I completed my B.Tech with Information Technology in Avanthi Institute of Engineering and Technology, Narsipatnam,Visakhapatnam.

5. 3rd year UG Students in Computer Science and Engineering
K Suma Sree
Arrays in Java Script
Web Programming
Computer Science
3rd year UG Students in Computer Science and Engineering
JNTUK

6. About Out-of-Class
Meant mainly for Information-Transmission to student.
Mostly help achieve lower-order cognitive levels (Recall-Understand-Apply)
Teacher takes time to search and locate videos.
Out-of-Class activity should not be too lengthy,
(ideally think of 1 lecture being transferred outside)

7. Out-of-class Activity Design-1
Learning Objective(s) of Out-of-Class Activity
At the end of watching the videos student should be able to
Can write a program using arrays in Javascript(Apply Level)
Can explain the difference between array declaration in JavaScript and other programming languages(Understand Level)
Key Concept(s) to be covered
Arrays in JavaScript
Types of Arrays

8. Guidelines for Video Selection - 1
First check in National Repositories
NPTEL Videos (
NPTEL Youtube Channel (
Second Look in International Repositories
OER Commons (
OCW Consortium (
Open Learning Initiative (

9. Guidelines for Video Selection - 1
Third Look in Internet Video Repositories (filter for Creative Commons License)
Youtube (
Vimeo (

10. Guidelines for Video Selection - 2

11. Out-of-class Activity Design - 2
Main Video Source URL
License of Video
CC-BY-Licence (reuse allowed)
Mapping Concept to Video Source
CONCEPT
VIDEO SEGMENT
DURATION
(in min)
Arrays
V1 – 00:01 – 00:40
0.40
Array Declaration
V2 – 00:41 – 3:22
2:22
Sample Program
V3 – 2:23 – 6:11
3.88
TOTAL DURATION
06.11 min

12. Guideline for Designing Assessments
It is recommended to provide few assessment with each video resource.
The assessment has to be at lower cognitive levels (Recall – Apply), aligned to the learning objectives.
It is recommended that you evaluate these assessments before the in-class to understand the level of students.

13. Out-of-class Activity Design - 3
Aligning Assessment with Learning Objective
Learning Objective
Assessment Strategy
Expected Duration
(in min)
Additional Instructions (if any)
Give definitions based on arrays in JavaScript
Q. 1)Define an Array?
Q.2)What are types of arrays? Q.3) how to declare arrays in JavaScript?
12 minutes
Watch V1 and then answer Q1
Watch V2 and then answer Q2
Watch V3 and then answer Q3

14. Out-of-class Activity Design - 3
Aligning Assessment with Learning Objective
Learning Objective
Assessment Strategy
Expected Duration
(in min)
Additional Instructions (if any)
Give output for arrays in JavaScript program
Q.4 <script>
Var people = [“joseph”,”maria”,”brain”,”susan”];
Document.write(people[1]);
</script>
5minutes
Watch Vedio2 and then answer Q4
Submit answers to the questions before coming to class.
Marks for Submission of this Activity: 10 marks
Total activity duration:
15 minutes

15. About In-Class Segment
Make sure that In-Class segment contain activities for effective learning
In active learning student goes beyond listening, copying of notes.
Execution of prescribed procedures.
Students are required to talk, write, reflect and express their thinking.
Engage students in higher-order thinking (Analyze-Evaluate-Create).
Ensure that students get feedback on their work, either from peers or you.
Ensure to provide summary that connects Out-of-Class and In-Class activities.

16. In-class Activity Design -1
Learning Objective(s) of In-Class Activity
At the end of the class, students will be able to,
Provide outputs for the programs related to arrays in JavaScript (ANALYZE Level)
Implement the programs using arrays in JavaScript (ANALYZE Level)
Key Concept(s) to be covered
Provides outputs for programs using arrays in JavaScript.
Implementation of programs using arrays in JavaScript.

17. In-class Activity Design -2
Active Learning activity(ies) that you plan to do
Problem solving
Explain the strategy by giving details of
1. Questions are given
1. Answers for the questions
Justify why the above is an active learning strategy
Discussions are going on

18. In-class Activity Design -2
Active Learning activity(ies) that you plan to do
Real world problem solving using.
Think-Pair-Share
Concept clarification using.
Peer Instruction

19. In-class Activity Design -2
Peer Instruction Strategy – What Teacher Does
Pose the two PI questions at the start of the class and provide summary of concept of Arrays.
Q 1: Which of the following method can't be used to add array elements in JavaScript. A) push( ) B) shift( ) C) splice( ) D) All are can be used

20. In-class Activity Design -2
Peer Instruction Strategy – What Teacher Does
 Q 2: If an array with five elements a=[1,2,3,4,5]; what will do the expression a.length=0 A) checks length of array is 0 or not B) deletes all elements C) replaces all elements with 0 D) adds 0 at the beginning

21. In-class Activity Design -2
Peer Instruction Strategy – What Student Does
For each question they will first vote individually.
Then they will discuss with peers and come to consensus.
Listen to instructors explanation.

22. In-class Activity Design -2
TPS Strategy – What Instructor does Consider the following code snippet : var a = []; a.unshift(1); a.unshift(22); a.shift(); a.unshift(3,[4,5]); a.shift(); a.shift(); The final output for the shift() is

23. In-class Activity Design -2
TPS Strategy – What Instructor does
Think (~2 minutes)
Instruction: Inputs are given in the program
Think individually and identify the output .

24. In-class Activity Design -2
TPS Strategy – What Instructor does
Pair (~5 minutes)
Instruction: Now pair up and compare your answers. Agree on one final answer.
While students are pairing and discussing, instructor goes to 2~3 sections to see
what they are doing.
Now assuming that two variables A and B, as shown in program, are used as input variables to perform addition operation and gives output

25. In-class Activity Design -2
TPS Strategy – What Instructor does
Share (~8 minutes)
Instructor asks a group to share their answer with class and see whether there are different answers. After sharing is done, instructor gives feedback on the correct solution and how to perform addition operation on given inputs to get desired output.
In the next iteration of TPS, in the Think Phase we ask students to provide outputs for other programs.
In the pair phase we ask students to compare the answers.
In the share phase again the different answers are sought.

26. In-class Activity Design -2
The above activity is an active learning strategy.
Justification-
In the above activities, students are really learn the concept and thinking deeply about the content. They storm their brain beyond mere listening and execution of prescribed steps and also are familiarised in out-of-class and do higher order thinking. Students are involved in the discussions and solving the problems
Feedback-
Feedback from students are collected through peer discussion which was excellent in comparison with teacher centric education.

27. THANK YOU