currikicdn.s3-us-west-2.amazonaws.com · web viewcreative coding class will act as the first in the...

Creative Coding

Summer 2017

WritersDan StiglitzJames Ng

SupervisorRobert Soel

BELLMORE-MERRICKCENTRAL HIGH SCHOOL DISTRICT

BOARD OF EDUCATION 2017-2018

Nancy Kaplan, Ed.D., President

Nina Lanci, Vice President

Marion Blane

Steve Enella John Ferrara

Wendy Gargiulo Janet GollerGina Piskin

CENTRAL ADMINISTRATION

John DeTommasoSuperintendent of Schools

Mara Bollettieri, Psy.D.Deputy Superintendent

Kate FreemanMichael Harrington

Assistant Superintendents

Table of Contents

1. Introduction to Creative Coding 2. Rational for coding curriculum development; summary presentation slides3. Scope and sequence 4. Unit outlines and sample lessons

a. Digital Citizenshipb. Maze code c. Hatchd. Pythone. Website Development

Introduction to Creative Coding

The purpose of this curriculum is to provide an additional technology option for incoming 7th grade students at both Merrick and Grand Avenue Middle schools. Students will have an opportunity to take a course sequence that links technology and family consumer science classes. The Creative Coding class will act as the first in the sequence to introduce students to the basics of computer coding which will prepare them to leverage their new computer skills in a family and consumer science class that will focus on 21st century learning and communication in the context of an entrepreneurship curriculum. The overall goal of the coding class is to inspire students to learn how to code while building problem-solving skills essential to success in STEAM disciplines.

At the start of Creative Coding, students are introduced to key ideas of cyber safety. Students will discuss proper usage of the Internet, how to control their digital footprint and how sharing online can lead to both positive and negative consequences.

All students in Creative Coding will join an online coding community in the KidOYO learning platform called “OYOclass”. As members of OYOClass, students will have access to wide variety of activities and lessons in multiple coding languages. The teacher will act as a guide to introduce key concepts and ideas, while students will have many options within the online modules to choose their activities. The course content will increase in depth and sophistication as the student’s work through the various task and challenges in Maze Code, Hatch, Python, and Web. Each course section builds upon the next leading into a capstone of web development in HTML.

Throughout the semester, students will work through coding challenges and receive digital badges as they acquire skills. Each badge represents a micro-credential that has all of the information linked to the project completed, link to the project as well as the person who approved the project completion. These micro-credentials are something that the students can take with them after the completion of the course and use at any level to demonstrate their knowledge of coding. The day-to-day lessons of Creative Coding are closely integrated with the resources on the OYOclass learning platform. The lessons will include teacher-guided digital presentations, online video tutorials, any many structured learning games and activities written into the OYOclass website. Along the way, students’ work is monitored by online mentors in the digital OYOclass community. In addition to conducting daily lessons, the classroom teachers have the role of mentors along with a network of trained college CS students and professional computer scientists employed by KidOYO. The mentor network provides timely feedback as students work on challenges and earn digital badges in various computer languages.

***Online educational resources in the OYOclass learning platform are proprietary materials of the KidOYO organization and will not appear in this curriculum guide. ***

Rational for Coding Curriculum Development(Summary of Presentation Slides)

Creative Coding Scope and Sequence

Unit 1 - Digital Citizenship Acceptable Use Policy Internet Safety Cyberbullying

Unit 2 - Maze Code Completion of levels 1-12 Using loops, “if” statements Beyond level 12, writing statements in basic code Working beyond to level 24 for mastery

Unit 3 - Hatch Getting to know Hatch Controlled movements Creating a multi-level maze Creating an interactive game with feedback

Unit 4 - Python Print statements and variables Using turtle to draw shapes and designs Python pixel art using code

Unit 5 - Web Site Development Introduction to HTML

o Creating new sites o Adding/editing pages

Navigation bar Inserting images/links Inserting projects created throughout semester

Unit overview- Digital Citizenship

Big Idea: Communication

Conceptual Rationale:We live in an Internet based world. Students are spending more and more time on websites,social media and more. With this increasing time on the computer students need to have a greater understanding on the proper usage, pitfalls and ways to protect themselves and information online.

Established Goals: NYS Learning Standards for Math, Science, and Technology

Standard 5: TechnologyNYS Learning Standards for English Language Arts

Standard 1: Language for Information and Understanding Standard 4: Language for Social Interaction

Time Frame: Approximately 6 class periods

Essential Questions: What is appropriate use for a school

computer? How can you protect yourself on the

Internet? Why is cyber-bullying such a big

problem? How can we control our digital

footprint?

Students will understand... There are things that they can and

cannot do on school computers. That the Internet is very useful but can

pose many risks. Not all people on the Internet are who

they say they are and can cause harm to them.

That proper computer and Internet usage can prevent harm to their computer and themselves.

Students will know... What is appropriate and

inappropriate when using district computers and connectivity.

What cyberbullying is, how to identify it, and how to prevent it.

How to safely use the Internet and other related resources.

That unsafe computer and Internet usage can cause harm to their computer and themselves.

Students will be able to... Recognize appropriate and safe

computer and Internet usage. Determine the appropriate actions if

they find themselves in an unsafe situation.

Explain how cyber-bullying can be more harmful to someone than “regular” bullying.

Student Orientation / Teaching Strategies: Teacher directed instruction and demonstration Hands on individual involvement Cooperative learning and sharing Utilization of teacher website Application of Common Core Standards including reading and writing

Assessment: Quizzes and final presentation Satisfactory completion of assigned tasks Successful application of newly acquired skills and prior knowledge


Sample lesson plan - Cyberbullying

Big Idea: Digital Citizenship

Topic: Social Networking


Standard 5: Technology

Time Frame: Approximately 1 class period

Aim: What rules should we follow when adding “friends” on online networks?

Motivation: Why do you think they want you to put so much information up about you on these sites? Do you think people monitor that information?

ER- to get followers, to seem popular, so show off

Essential Questions: How can students be safe online? How can you identify a person

online?

Students will understand... The dangers of using the Internet to

interact with strangers. The pitfalls of online communication

Students will know... Not all people online are who they

say they are. Ways in which to try to identify

people online.

Students will be able to... Effectively attempt to identify people online Describe proper interactions with other

people online.

Misunderstandings: Everything online is easily removedPeople online are only there to talk and share information with youEverybody online just wants to be friends and talk to you

Student Orientation / Teaching Strategies: Teacher directed instruction and demonstration Hands on individual involvement Cooperative learning and sharing Internet video with question prompts Application of Common Core Standards including reading and writing

Learning Experiences:Procedure: Whole Class

Watch the “Post-to-be Private” video. Ask students: What are some positive aspects of social networking sites?

Keeps you connected to friends and family, encourages, creative self-expression, sharpens writing skills.

Is everyone really “friends” online?

Why do people want to build up their friends/followers list? To feel popular or well-liked.

What is Slick trying to tell Allie about having her profile set to private? Even if your profile is set to private, you should still think before you post

and add only people you know in real-life to your friends list. Discuss as a class the risks and guidelines that can be set when accepting

someone as a friend online.

Student Activity: Divide the students into groups of two or three (making 10 groups). Pass out the envelopes. Tell the students that each group has profile from a social networking site that is

set to private. Have students read the shared profile on the outside of the envelope. Students in their groups decide whether to accept this person as a “friend” on

their own profile. Then they write down why they would or would not befriend this person. Have each group open the envelopes to see if the new friend’s actual identity

matched the shared profile.o Ask students to raise their hands if the person’s identity inside their

envelope was different than the person profiled on the outside.Have students talk about the differences between the profiles on the outside and the true identity.

People who are on the Internet do not always tell the truth about who they are. Anyone can ask to be your friend online, even when your profile is set to private. In pairs, have the students discuss: Even if your profile is set to private, what can

someone still find out about you?o Someone can still find out your name, age, location, sometimes screen

name, and see your picture. Anyone can request to be your friend; it’s up to you to accept or deny them. What rules can you follow to stay safer on your social networking site?

Only accepting friends that you know in real life, not sharing personal information that reveals your location or how to contact you, making sure your friends don’t post revealing information about you, and keeping your blog information private.

Summary/Wrap-up:Have students give examples to help persuade their friend.

If time allows, students could have students read the letters out loud and vote on whether they convinced the rest of the class.

Homework:Students may finish the letter at home if they have not completed it.

Assessment: Students will write a persuasive letter encouraging their fictional friend, depending on the

scenario they’ve chosen, to rethink their behavior.o Students should write at least 3 persuasive reasons to tell their friend to stop.


Unit overview - Maze Code

Big Idea: Blocky Language Coding

Conceptual Rationale:As an introduction to coding, students will use the blocks to organize commands to control the cursor. This will serve as an introduction to the language, order or operations and basic commands that can be performed in other coding languages.




Essential Questions: What is coding? How can we manipulate the turtle

using block coding? How can we translate block coding

into future languages?

Students will understand... Ways to manipulate the turtle to move in

directions. Programming is a language and series

of commands

Students will know... How to move left, right, back and

forward. How to create loops How to create if paths.

Students will be able to... Move the cursor through the different

levels of the mazes. Use different coding blocks to complete

tasks. Discover ways to create mazes on their

own

Student Orientation / Teaching Strategies: Teacher directed instruction and demonstration Hands on individual involvement Cooperative learning and sharing Utilization of Oyo classroom community

Assessment: Satisfactory completion of assigned tasks Satisfactory completion of 12 levels to acquire Maze Challenge Badge in Oyo

community. Successful application of newly acquired skills in future lesson modules.


Sample lesson plan - Maze Code

Big Idea: Introduction to Coding

Topic: Maze Code




Aim: How can we use Maze Code as an introduction to coding in the real world?

Motivation: Think about games in which you give basic commands to tell something or someone to do something? What types of commands do you use?

Essential Questions: How do we effectively give

commands in Blocky coding language.

Students will understand... Basic programming language using

Blocky style coding.

Students will know... How to use Block codes to control

the cursor. How to use back, forward, left, right

and loops.

Students will be able to... Complete the first 12 levels of Maze

Code. Use loops, if path and directional

blocks to complete the mazes.

Misunderstandings: The order in which the blocks are organized can be a challenge.Students may confuse the directions in which they have to turn.There are a limited number of blocks that can be used to complete certain tasks.


Learning Experiences:Procedure:

Discuss with students the motivation question of how we give commands. Ask them to think about the way in which we tell people or things to perform tasks.

We are now going to using a form of coding called “Blocky”Each block represents a command for that object to move. You have to create a list of blocks that tell the object to move from the beginning to the X at the end.

Student Activity:Students will log into their Oyo accounts and open up the Maze Code appOnce there, they can begin the levels. Each level grows progressively to be more difficult, while also including new blocks and skills.

Students needing assistance can talk to students around them, the teacher as well as the “Hint” button on the page.

Summary/Wrap-up:As students progress at their own pace the teacher should be circulating the room and checking for understanding. Students can move ahead at their own pace from levels 1-24.After successfully completing 12 levels, they can submit for the Maze Challenge badge.

Homework:Continue to work up to level 12 on Maze Code.

Assessment:Completion of the first 12 levels of Maze Code and receiving the Maze Code badge on the Oyo community.


Unit overview - Hatch!/Scratch

Big Idea: Learning The Building Blocks of Programming through Hatch

Hatch is a block based program used to help students learn how to code where the scripts are embedded into the blocks. The use of the blocks assist students in their learning by laying the foundation for understanding sequencing and problem solving in coding.




Aim: What is Hatch!/Scratch

Essential Questions: How Hatch!/Scratch are foundations to

learning programming What can be used to make programming

more efficient (lines of code needed/blocks needed)

Students will understand... Blocks are scripts Sequential Problem Solving Different statements and how to

integrate them into their program

Students will know... What a sprite is How to use different block types to

program with Hatch!/Scratch What scripts are What loops are

Students will be able to... Use block based programming to

create games, puzzles Use advanced blocks to make

their program more efficient Create, save and share their

project Work with backdrops Earn badges by completing

challenges

Student Orientation / Teaching Strategies:

Teacher directed instruction and demonstration Hands on individual involvement Cooperative learning and sharing Internet video with question prompts Application of Common Core Standards including reading and writing

Assessment: Earning badges from completing Hatch! Challenges


Sample lesson plan - Hatch/Scratch

Big Idea: Programming through scripts embedded into blocks

Topic: Using Hatch to draw




Aim: How to draw basic shapes with Hatch!

Motivation: Begin class with completed work and demonstrate the functionality on screen or have

students operate the keyboard and mouse to run the hatch program Have more advanced hatch projects for show and tell

Essential Questions: What can you do with the different blocks

found in Hatch What are script

Students will understand... Different types of blocks How scripts are embedded into

blocks How to use loops

Students will know... What a sprite is What a loop is

Students will be able to... Control/change the sprite Change color, direction and draw

Misunderstandings:



1. Log into the system and demonstrate Hatch!2. Show completed hatch challenges and demonstrate their function3. Monitor student progress as they are lead through a sequence of basic

programming to make the sprite do simple movements like forward, left and right, pen up and down, etc.

Student Activity:1. Students log into computers and program their sprite to complete the given tasks

in order to complete challenges.2. Students will follow steps to make their sprite do simple movements

Summary/Wrap-up:1. Ask higher level questions to enhance understanding of what is actually going on

in the programming 2. Propose questions that will lead students to the next level of programming such

as color or color change and fill color

Assessment: Complete Hatch!2 assessment challenge (draw a hexagon and octagon)


Unit overview - Python

Big Idea: Python is a versatile popular programming language

Python is a popular programming language that is used by many companies

Python can be used to make automated scripts, data analysis, web programming (especially back-end web development), and even making games. There are many libraries out there that have been made by various people and can be used simply by installing them and importing them into your own code. You can install it onto your own machine and use any text editor or even command-line to use it.

Python Mini is an OYOClass app allowing you to use and see immediate results in your browser but it isn’t fully capable of everything Python has to offer.


Standard 2: Information SystemsStandard 5: TechnologyStandard 7: Interdisciplinary Problem Solving

NYS Learning Standards for English Language ArtsStandard 1: Language for Information and Understanding Standard 4: Language for Social Interaction


Essential Questions: What is Python and Python Mini

Students will understand... What Python Mini is What libraries are

Students will know... How to start Python Mini How to use Python Mini to complete

appropriate challenges How to access Python Mini Libraries How to use the libraries in to complete

their challenges

Students will be able to... Start, make and save a new file Write and share basic programs

with Python mini Write print statements and

comments Apply loops in their program Draw with Turtles Access libraries


Assessment: Earning Badges from completing Python Mini Challenges


Sample lesson plan - Python Mini

Big Idea: Python is a versatile popular programming language

Topic: Drawing with Turtle


Standard 2: Information SystemsStandard 5: TechnologyStandard 7: Interdisciplinary Problem Solving

NYS Learning Standards for English Language ArtsStandard 1: Language for Information and Understanding Standard 4: Language for Social Interaction


Aim: How to Draw in Python Mini with Turtle

Motivation: Begin class with completed work and demonstrate the functionality on screen or have

students operate the keyboard and mouse to run python Have more advanced python projects for show and tell

Essential Questions: What is a turtle?

Students will understand... What the turtle library is

Students will know... How to import turtle How to program turtle

movements and draw with turtle

Students will be able to... Program the turtles movements (left, right,

positive, negative, rotations, pen up and down and relocate position)

Change colors and fill color

Misunderstandings: Mistakes will be made in spelling and syntax



1. Explaining what turtle is and demonstrating what the turtle does2. Step by step lead students through importing a turtle and the proper way to write

the code necessary to complete the challenge

Student Activity:1. Students will name their turtle 2. Students will program the turtles movements (right, left, pen up and down, colors,

filling, circles and positioning)

Summary/Wrap-up:1. Question students regarding similarities and differences between python and

hatch2. Ask leading questions to enhance understanding of Python programming

language or take questions down during class to be addressed at the end of class

Assessment:

Completing the Spiralgraph Challenge after a series of Python Lesson Activities


Unit overview - Website Development

Big Idea: Communication and Website Development

Conceptual Rationale:Websites are useful for presenting and organizing information and students should have the basic skills needed to utilize this medium. Through the use of a student website portfolio, all student work will be organized and maintained in one central location.



Time Frame: Approximately 5 class periods (Can be non-consecutive)

Essential Questions: How can using a website be

helpful? What are important aspects of

any website?

Students will understand... The use of HTML coding to create a

website

Students will know... How to create a website using

HTML editing language How to design and organize a

website for publishing

Students will be able to... Create a basic website to showcase their

projects throughout the semester

Student Orientation / Teaching Strategies: Teacher directed instruction and demonstration Hands on individual involvement Cooperative learning and sharing Utilization of student created websites Utilization of teacher website Application of Common Core Standards including reading and writing

Assessment: Satisfactory completion of assigned tasks Satisfactory completion of website portfolio tasks Successful application of newly acquired skills and prior knowledge


Sample lesson plan - Web Design

Big Idea: Introduction to HTML

Topic: Web Development- HTML




Aim: How can we create a website to share our work on the Internet?

Motivation: What are some things that make you want to go to one site over another?

Essential Questions: Why do people create websites? What are key elements of a website? How can we use coding to design and

build a website?

Students will understand... How to organize a website Why designing a website can be

helpful

Students will know... Basic coding language before they

begin HTML 5 coding language The purpose of using websites

Students will be able to... Create an introduction message Insert a photo on the homepage of

their website.

Misunderstandings:



Begin with students responses of what make them choose one site over another.Pull up some of the students websites they spend time and discuss why they go there over other ones. (Reminder, school appropriate sites)

Student Activity:Students will log into the Kidoyo platform and open up the OyoWebsite App.Once inside they will think about the question posed prior of what are key elements of a website.

Menu, introductions, logos, headlines, fonts, pictures, colors, layoutStudents will setup their own subdomain on the Oyo platform. ***They should use a nickname or screen name since they will be a publically accessible website.

After they have chosen their name of the site they can now put on their first introduction message on their site.

Students will click on New File and a create a new sidebar tab called , Index.htmlThis will act as the homepage of the website. Subsequent pages can be named whatever is desired or needed.

Using the Oyo webeditor has directions in the lesson one of the Oyo class Web Introduction

Menu BarThe area marked red in the screenshot above is the menu bar. The menu bar has several buttons that each have a unique functionality.

+New File - Creates a new HTML, CSS or JS file. It also allows you to upload image and audio files to your website.

Magnifying Glass Icon - Searches a file within your subdomain. It useful once you have many of them.

Gear Icon - Change your subdomain or link your custom domain to your OYO Website. Save - Save the current file. Preview - View the current file. Rename - Rename the current file. Download - Download the current file. You can take it with you to another host server. Delete - Delete the current file. Visit My Site - View your website's index.html, your website's homepage.

Summary/Wrap-up:

Once students have created their introduction and message, if they have time they can save photos that they want to upload on their site during the coming lessons.

Make sure that they download and save them to their computer and not just copy them. They can create a folder in Google Drive or in their profile to work on organization.

Homework:Not necessary unless students run out of time.

Assessment:Completion and creation of a website within the subdomain, index page and welcome message.


currikicdn.s3-us-west-2.amazonaws.com · web viewcreative coding class will act as the first in the...

Documents