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

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

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

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.

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

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)

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

Guidelines for Video Selection - 1 First check in National Repositories NPTEL Videos (http://www.nptelvideos.in/) NPTEL Youtube Channel (https://www.youtube.com/user/nptelhrd) Second Look in International Repositories OER Commons (https://www.oercommons.org/) OCW Consortium (http://www.oeconsortium.org/) Open Learning Initiative (http://oli.cmu.edu/)

Guidelines for Video Selection - 1 Third Look in Internet Video Repositories (filter for Creative Commons License) Youtube (https://www.youtube.com) Vimeo (https://vimeo.com/)

Guidelines for Video Selection - 2 https://www.youtube.com./watch?v=nEvBcwlpkBQ https://www.youtube.com./watch?v=Cta5s1QBD8E

Out-of-class Activity Design - 2 Main Video Source URL https://www.youtube.com./watch?v=nEvBcwlpkBQ 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

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.

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

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

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.

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.

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

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

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

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

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.

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

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 .

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

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.

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.

THANK YOU