self.moveLeft() - Welcome To My Course Web Page!
advertisement
Getting Started With HTML
HTML code needs an editor for a programmer
to be able to use. We can use Notepad on a
PC or TextEdit on a Mac . However, it is also
recommended that students use an online
editor to make it easier to show others what
has been done such as a Google Doc or
https://thimble.webmaker.org/
Page 1
Basic HTML Commands
• A section of HTML text should start and end with
<html> and </html>
• Inside the <html> should be a <head> and
</head>
• After the <head> and inside the <html> should be
a <body> and </body>
• Large text such as a title or heading should be
inside <h1> </h1> The number can be from 1 to 6
• <p> and </p> are used for paragraph text
Page 1
• Ordered lists start and end with <ol> and </ol>
• Each list item starts and ends with <li> and </li>
• An unordered list Is the same as the ordered list
except use <ul> and </ul>
• <hr /> will make a nice line across the screen to
separate sections
• <br /> has the page display a “break” to make a
new line. Use a few of them to make extra blank
lines.
Page 2
•
•
•
•
<b> Bold Text </b>
<i> Italics Text </i>
<u> Underlined Text </u>
A <div> command creates a division that we can
format in a way we choose such as
<div align
= "center"> We can change the “center” to
“left” or “right” or “justified” to get different
placement.
• Show an image with <img src="picture link text"
/>
• <p>
Paragraph Text
</p>
Page 2
Rubric – Each Item Worth One Point
•
•
•
•
•
Begin assigned work on time
Work on assigment the entire class period
Write most of the notes
Write all of the notes
Complete planning exercise
Page 3
• Submit a web page with any part that is
correct.
• Apply most of the teacher's model to create a
web page on the quiz.
• Apply teacher's model to create an HTML web
page on the quiz.
• Expand upon the teacher's example in a
unique way that solves a non-trivial problem.
• Independently research additional commands
that have not been presented in class to
improve upon the teacher's basic format.
Page 3
Quiz Answer
<html>
<head>
</head>
<body>
<ol>
<li> First ordered Line Text </li>
<li> Second ordered Line Text </li>
</ol>
<ul>
<li> First Unordered Line Text </li>
<li> Second Unordered Line Text </li>
</ul>
Page 4
<hr />
<br />
<b> Bold Text </b>
<i> Italics Text </i>
<u> Underlined Text </u>
<div align = "center">
<h1> Heading Text </h1>
<img src="picture link text" />
<p>
Paragraph Text
</p>
</div>
</body>
</html>
Page 4
Getting Started With Scratch
• https://scratch.mit.edu
• Use the beginning part of your email as your
account name such as jsmith32423 if your
name was John Smith.
• Click create to start a new project.
• Edit the stage, sprites and scripts to do what
you want.
Page 5
Planning Our Life’s Story
• Our life has a past a present and a future. We
may focus on any part of our life that we
choose.
• Take a plain piece of paper and fold it into
fourths. Front and back, we now have 8
boxes.
• Draw and write out your story. Include as
many details as possible.
• Items that appear in your program but not in
the plan, may not receive credit.
Page 5
Scratch Commands
• The When Flag Clicked event is a good way to
start because it gives the user a way to begin
the program.
• The Move command lets a sprite change its
location.
• The Say command lets a sprite put text on the
screen as if they were speaking.
• The Wait command has the sprite stop and
wait. This is important to get timing correct.
Page 6
• The if on edge, bounce command lets us have
a sprite bounce off the wall.
• The point in direction command lets us
choose where the sprite should face based on
the 360 degree system.
• The turn commands let the sprite face more
to the right and more to the left
• The change x by and change y by let the
programmer move a sprite’s position by an
incremental amount
• The glide command will let a sprite move
smoothly across the stage.
Page 6
Sprite Configuration
• The happy little pictures that move around the
screen are objects that are called sprites.
• We can edit how the sprite looks by changing
its costume.
• We can even upload our own pictures to make
any costume we want.
• A sprite can have multiple costumes to show
them making different kind of gestures or any
kind of image change that still represents the
same sprite.
Page 7
Sprite Timing
• It is important to have our sprites timed
correctly.
• If a sprite does not get used at the beginning
of the story, it may need a long delay using the
Wait command.
• Getting the hang of when and how to pause is
an important concept for the
director/author/programmer to master.
• It will work out better if a careful plan has
been drawn out.
Page 7
Quiz Answers
1. Write a program that will have the sprite say "Hello!" when the green flag is clicked.
when clicked
say Hello!
2. Write a program that will enable a sprite to move the right by 40 steps every time
the green flag is clicked and bounce if it hits a wall:
when clicked
move 40 steps
if on edge, bounce
3. Write a program that has a sprite introduce its self by saying 3 things. Each
statement should last two seconds AND have a two second pause with no text
showing for the current sprite:
when clicked
say Hello!
wait 2 seconds
say I'm a sprite.
wait 2 seconds
say Lets be friends!
wait 2 seconds
Page 8
4. Write a program that will have a sprite glide to the four corners of the canvas/stage:
when clicked
glide 1 secs to x: -240, y:180
glide 1 secs to x: 240, y:180
glide 1 secs to x: 240, y:-180
glide 1 secs to x: -240, y:-180
5. Write a program that will enable a sprite instantly to go to location 0,0 and then move left
by 20 steps and then move right by 20 steps and then move up by 20 steps and then move
down by 20 steps. Have the sprite say "jump" for two seconds at each of the 5 locations.
when clicked
go to x: 0, y: 0
say jump for 2 seconds
change x by -20
say jump for 2 seconds
change x by 20
say jump for 2 seconds
change y by 20
say jump for 2 seconds
change y by -20
say jump for 2 seconds
Page 8
Getting Started With PowerPoint
A new PowerPoint presentation will start with
a title slide alone. To add more slides, click
the “New Slide” button towards the top left
corner when on the “Home” tab or press
<control> + <m> to use a hotkey. It is a good
idea to add the total number of slides when
you first start. If you click the bottom of the
icon, there are different kinds of slides
available.
Page 9
Adding Titles and Pictures
The title should go towards the top of the
slide. The title and text can be rearranged to
make it look nicer. Keep the title short and in
larger font. Be sure to stay on theme with
both pictures and text. For a picture, click on
“Insert” and “ClipArt”.
Page 9
Adding Text
Each slide in this project will contain 5
sentences. This will clearly explain the
student’s thoughts. The first sentence should
explain the topic. The middle three sentences
should give specific information or details.
The final sentence should sum up the
thoughts of the paragraphs.
Page 10
Planning
Every good project starts with a good plan. If
done carefully, we can create our plan as a
work in progress right on the PowerPoint
presentation. There should be 10 or more
slides so start by adding 9 slides. Put a title on
each page. Put a picture on each page.
Finally, with a title and picture already there
write a 5+ sentence paragraph on each page.
Page 10
Target Audience
Our target audience is not just our teacher,
but also potential employers and colleges that
may want to see who we are or who we
thought we were when we were freshmen in
high school. It’s okay to have fun, but also
present yourself as a professional. Be
prepared to present to the class.
Page 11
Screen Shots
On PC computers, press the print screen
button and you will get an image of the screen
in memory. Then, paste it onto the project or
onto an editor for cropping (Paint). This is a
good way to show work that we have done
and it is recommended that students make
slides based on the previous projects to give
examples of success.
Page 11
Quiz Answers
1. Explain the two ways a computer operator can create a new slide in
PowerPoint: (1 sentence)
A computer operator can either click on the new slide button or they can use
the <control> + <m> hotkey.
2. Explain the amount of information that is appropriate for one slide: (1
sentence)
About one paragraph or 5 sentences or 5 bullets is a good amount of
information for one PowerPoint slide.
3. Explain the difference between PowerPoint and a Google Apps
Presentation: (2 sentence)
PowerPoint is a part of MSOffice and runs on the local machine. Google Apps
Presentation is a part of Google and runs on the Google servers through a
cloud service.
Page 12
4. Explain the 3 basic parts of a slide and how the presentation is
useful to us. (1 paragraph)
PowerPoint is a useful program for a person giving a presentation.
It is a good format for displaying pictures for a group to see. The
slides can have the titles of topics so that the audience knows the
current subject. The slides can have text to give details about the
subject. I can use PowerPoint to present to my class or to a group
of business professionals.
5. Explain how a student should handle files created by PowerPoint (1
paragraph)
It is important to understand how files work with the locally running
PowerPoint program. The files will first be saved locally on the
school. This means they will not be accessible from the rest of the
world. The files should also be stored in a way that will make it
useful in other places by putting it on a flash drive or saving them to
an online folder such as a teacher web site or our Google Drive. We
will be able to keep our files if we care for them properly.
Page 12
Code Combat - Python
• We have to learn Python so we may as well do
it playing CodeCombat. Check it out on
http://www.codecombat.com. When you are
on the site, register with your AFSE email and
pick a reasonable name that fits the fantasy
genre such as Kate the Hero of Kithgar or
Bousterous Bill. Remember, our long term
goal is to use this as part of our portfolio of
success so use names that sound professional.
Page 13
Moving Around
• In object orientated programming, we name an
object and a method. In this case, the object is
the self and we want to move so the method is
called move and the direction. We include the
parentheses () because some times we will send
more information when calling a method. Maybe
we want to move twice so the method would
accept the parameter of 2. The four basic move
commands: self.moveRight(), self.moveleft(),
self.moveDown(), self.moveUp().
Page 13
Attacking Stuff
• Some times there is stuff in the game that has
to go such as an ogre, or a box that is hiding
our treasure or a door in the way. When you
hate on something and want to solve the
problem with a sword, use the attack method
on the self object with: self.attack("door") to
bust the door down or change the text “door”
to whatever you want to die.
Page 14
Escape The Dungeons of Kithgar
• You start out in the Dungeon of Kithgar. If you
escape the dungeon, you pass with the leet
“apprentice” status for grade credit. Don’t
worry about going off side paths, buying extra
stuff or trying to make it complicated. If you
escape the dungeon you get credit. No need
to buy a higher level account.
Page 14
Blackwood Forest
• When you escape the Dungeon, you will find
your self continuing the adventure in
Blackwood Forest. We will use conditionals to
make decisions and have our warrior be a
little more smart about what they smash and
what they avoid. A conditional is the “if”
statement. Students who beat Blackwood
Forest will be considered a practitioner.
Page 15
Sarven Desert
• The truly perseverant adventurer will make it
to the Sarven Desert. There are great perils
and treasures to be found. We will learn to
use Python to do arithmetic and expand our
warrior instinct to fight smarter. The
professional level grade means you have to
beat Sarven Desert.
Page 15
Quiz Answers
1. Write a program that will enable a sprite to move in the shape of a rectangle:
self.moveRight()
self.moveRight()
self.moveDown()
self.moveLeft()
self.moveLeft()
self.moveUp()
2. Write a program that will enable a sprite to attack a "door" and keep attacking it forever:
loop:
self.attack("door")
3. Write a program that will enable a sprite to move in the shape of a square and repeat the square
movement forever:
loop:
self.moveRight()
self.moveDown()
self.moveLeft()
self.moveUp()
Page 16
4. Write a program that will enable a sprite to move in the shape of a
figure 8 and repeat the figure 8 movement forever:
loop:
self.moveUp()
self.moveRight()
self.moveDown()
self.moveLeft()
self.moveDown()
self.moveRight()
self.moveUp()
self.moveLeft()
5. Write a program that will store the name of a magic item and then
attack it forever:
item = self.findNearestEnemy()
loop:
self.attack(item)
Page 16
CSS Syntax
https://thimble.webmaker.org/
A CSS rule has an element and one or more declarations that
let the coder choose properties. Put the style tag and its
child components in the <head> section of the page. For
example, we can make large, centered, blue text:
<style>
h1 {
text-align: center;
font-size: 80px;
color: blue;
}
</style>
Page 17
CSS Values
• Get the Size you want:
font-size: 80px;
font-size: 2.5em;
font-size: 150%;
• Get the Color you want:
color: blue;
color:rgb(255,0,0);
color: #0000FF;
Page 17
The HTML Head and Body
• Each web page should have one head and one
body. Sometimes when students combine
examples, they create a monster with multiple
head sections and/or multiple bodies. Avoid
this to avoid confusion. Inside the head we
will use the <title> tag and the <style> tag.
The tile is the small text on the top of the
window, not what is on the page.
Page 18
Planning
• “If I had an hour to solve a problem I'd spend
55 minutes thinking about the problem and 5
minutes thinking about solutions.” - Einstein
• Throwing together whatever thought pops in
our head is how an amateur makes a web
page. If we want to organize real solutions to
real problems in a professional way, we need
to take the time to research and plan.
Page 18
Precise Coding
• Each tag has a beginning and an end. Some
tags have it built in together such as the <br />
tag or the <hr /> tag. Many designate settings
for a section such as <b> and </b>. Avoid
shortcuts such as <br> which will work much
of the time, but can create problems later.
Also, follow the convention of using
<!DOCTYPE html> at the beginning to make
our code compatible with more systems.
Page 19
Readable Coding
• Spacing counts. It may seem like a good idea
to just slop whatever tags we want on a page,
but that can make it very difficult to
understand. Each type of coding has
requirements and conventions of how to
space things out so that we can read what is
happening. Taking what seems like a shortcut
by haphazardly spacing can create headaches
later.
Page 19
Quiz Answer
<!DOCTYPE html>
<html>
<head>
<title> Title on Top of Window</title>
<style>
h1 {
text-align: center;
font-size: 80px;
color: blue;
}
h2 {
text-align: center;
font-size: 2.5em;
color: rgb(255,0,0);
}
Page 20
p {
text-align: left;
font-size: 150%;
color: #0000FF;
}
</style>
</head>
<body>
<h1> Heading Text for an on Page Title</h1>
<hr>
<br />
<h2> Smaller Sub-heading</h2>
<p>
Paragraph text
</p>
<a href= "http://www.math.com">
<img src="http://www.scottbunin.com/math.png">
</a>
</body>
</html>
Page 20
Drawing With Scratch
• By using the pen and move methods, we can
make a sprite move around the screen and
add color to the stage. We can draw anything
we want and even make complex graphics. To
start with, we will be making our initials and
our name. Eventually, we can make the
screen covered with fun colors and shapes
with settings that change quickly and
randomly.
Page 21
Apprentice
• To obtain the apprentice level, a student must
have their letters appear on the screen and
appear in random places. The apprentice may
should have their entire name (10 letters)
appear just and use the forever loop. See the
posted video and note that this can be done
by a dedicated student in one work session.
Page 21
Practitioner
• First complete the apprentice level.
• The practitioner should create an original
work of art that includes random shapes of
squares and rectangles appearing on the
screen.
• The shapes should be created by the same
sprite and be in addition to the name letters.
Page 22
Professional
• First complete the practitioner level.
• The professional must create an original work
of art that displays creativity that will impress
with our coding skills.
• The letters in the name should be rounded
instead of blocks.
• The shapes should also include circles.
Page 22
The Power of Loop
• Under the control tab, we find the ability to
have the computer repeat something a bunch
of times or even do it forever and ever. In the
example shown, the computer will say I love
you 10 times. Use the “forever” loop and it
will love you always or until some one has
enough and turns off the computer.
Page 23
The Power of Random
• The random method can enable a
programmer to put drawings in random places
and apply random settings such as color,
placement and line width. If applied carefully,
the screen can explode with happy colors of
joy. Here are two examples:
Page 23
Quiz Answers
1. Write a program that will have a sprite start at 0,0 and move forward 50 pixels
when clicked
go to x: 0 y:0
move 50 steps
2. Continue the program from the previous problem. Have the sprite move forward and turn left
3 times to move in a square.
turn left 90
move 50 steps
turn left 90
move 50 steps
turn left 90
move 50 steps
3. Write a program that has a sprite introduce its self by saying hello for 2 seconds, pausing 2
seconds and then draw a line 50 pixels long and finally, pick the pen up.
when clicked
say Hello! for 2 secs
wait 2 seconds
pen down
move 50
Page 24
pen up
4. Write a program that will draw the shape shown assuming the sprite starts facing right and is
already at the correct starting position with the correct width and color settings.
when clicked
move 50 steps
turn right 90
move 50 steps
turn left 90
move 50 steps
turn right 90
move 50 steps
turn left 90
move 50 steps
5. Write a program that will draw a letter with random colors and in random places on the
screen.
when clicked
forever
go to x:(pick random -200 to 200) y: (pick random -200 to 200)
set pent color to (pick random 1 to 16000000)
point in direction 180
turn left 90
turn left 90
move 50 steps
Page 24
turn left 90
Do I Have A Right
• The game is based of a site called Icivics. A
student can find the site from any computer
by searching for “icivics do I have a right”. The
game will prompt for a registration. This
requires an email address. Students need not
waste their time with registering. Instead,
click the button that says [NO THANKS].
Page 25
Constitutional Amendments
1. “Freedom of Expression” and “Freedom of Religion”
gives people the right to express them selves in
written or spoken words and worship how they
please.
2. The right to “bare ordinary weapons.” Americans
can buy rifles and certain kinds of small arms.
3. The right to keep soldiers out of private homes.
4. Protects from illegal search from the police.
5. Protects from Double Jeopardy (2nd trial).
5. Keep Private Property. Even if the government has
to take it they pay for it.
6. Speedy Trial means court cases have to start
quickly.and to an Impartial Jury or peers.
Page 25
8. prevents cruel and unusual punishment
13. outlaws slavery.
14. amendments says that all people should be
treated as equal in the eyes of the law
15. enables voting regardless of race
19. enables voting regardless of gender.
26. sets the age for voting at 18.
Page 26
Data Entry Into Excel
• The worksheet’s cells will contain information gained
from the end of the workday in the law firm
simulation. Set up the top of each column labels as
“Day, Prestige Earned, Prestige After Spending, Cases
Won, Cases Lost, Case Revenue”. On the left side, days
1 through 7 are numbered. There will be a certain
amount of prestige score spent during the end
of the day. Students
will record both before
and after
values for spending.
Page 26
Charts
• Under the Insert tab, Microsoft Excel will
allow a user to create a graphic representation
of the data. This is very important for
analyses and presentation. A person can
often understand a picture faster and easier
than a set of numbers. By using graphs
instead of numbers, the worksheet will be
more efficient.
Page 27
Rubric
For each of 5 game attempts:
1.
2.
3.
4.
Create a table showing earnings and expenses.
Create a chart displaying the data from the table.
Write a 5 sentence paragraph explaining the chart.
Include a screen shot showing the score from the
game.
Then, summarize the progress made and explain what
business strategies enabled success.
Page 27
Quiz Answers
1. Explain the constitutional rights we studied for this unit. (15 rights)
1 – Freedom of expression lets us speak and write how we want
1 – Freedom of religion lets people worship what they want to
2 – Right to bare arms and purchase certain guns and rifles
3 – Right to keep soldiers out of our private homes
4 – Illegal search and seizure protection from government officials
5 – Double Jeopardy criminal cases are avoided
5 – Keep private property from the government
6 – Speedy trial so that prisoners can say their case quickly
6 – Impartial jury so that a person gets a fair trial
Page 28
8 – Freedom from cruel or unusual punishment
13 – Slavery is outlawed or any kind of forced labor or human ownership
14 – People are all treated equally in the eyes of the law
15 – Citizens of all races get an equal vote
19 – Both men and women can vote
26 – People vote at age 18
2. Explain how Microsoft Excel helps us to analyze business data. (1 Paragraph)
Microsoft Excel helps us record data, analyze data, and present data in a way that is
easy to communicate using charts. By creating a table with labels and data, we can
keep accurate records for our business or any financial activity. With formulas, we can
program the computer to create numeric output for analysis and comparison. By
using charts, we can present our findings in a graphical way that makes it easy for
people to understand our ideas. I can use Excel or another spreadsheet program
when I need to organize numerical information in a way that is useful.
Page 28
Code Combat: The Next Level!
• Warrior of the light, our journey will continue
to defeat the forces of darkness! Thou shall
be paid with grades upon completion as
follow:
Kithgard Dungeon and Apprentice – 70%
Backwoods Forest
Sarven Desert and
Practitioner – 85%
Cloudrip Mountain
Kelvintaph Glacier and Professional – 100%
Bonus Level
Page 29
Python Review
self.moveRight()
self.moveleft()
self.moveDown()
self.moveUp()
self.attack("door")
enemy = self.findNearestEnemy()
moveXY(20,20)
loop:
if enemy:
self.attack(enemy)
Page 29
Python New
• Your avatar can use real time input in the form
of flags. The code can look for flags and
respond accordingly if set up correctly. For
example, you may want to have a warrior
move to a flag and help the villagers in a
specific area. This kind of code is essential for
a programmer because it allows us to do
different things depending on what the end
user selects.
Page 30
I’m Stuck!
• 1. Look on the web page at
http://www.codecombat.com for help,
commends and clues.
• 2. Save your game money for when you get
stuck and beat the board with a shiny new
piece of equipment.
• 3. If the person next to you has already
defeated that part, ask them for a quick tip.
• 4. Google it. The answers are all posted.
Page 30
Python Variables Example
taunt = ("Haha, you're dead now!")
self.say("Hello!")
loop:
enemy = self.findNearestEnemy()
count = 0
if enemy:
self.attack(enemy)
count = count + 1
else:
self.say(taunt)
Page 31
Runtime User Input
loop:
flag = self.findFlag()
if flag:
if flag.color is "green":
self.moveXY(flag.pos.x, flag.pos.y)
if flag.color is "black":
self.buildXY("fire-trap", flag.pos.x, flag.pos.y)
self.pickUpFlag(flag)
Page 31
Quiz Answers:
1. Write a program that will enable a sprite to attack a
“Door" and keep attacking it forever.
loop:
self.attack(“Door")
2. Write a program that will enable a sprite to move in
the shape of a square and repeat the square
movement forever.
loop:
self.moveRight()
self.moveDown()
self.moveLeft()
self.moveUp()
Page 32
3. Write a program that will enable a sprite to move in the shape of a figure 8 and
repeat the figure 8 movement forever.
loop:
self.moveUp()
self.moveRight()
self.moveDown()
self.moveLeft()
self.moveDown()
self.moveRight()
self.moveUp()
self.moveLeft()
4. Write a program that will store the name of an enemy and then attack it forever.
enemy = self.findNearestEnemy()
loop:
self.attack(enemy)
5. Write a program that will forever attack nearby enemies if they exist and will attack
a “Chest” if there are no enemies.
loop:
if self.findNearestEnemy():
self.attack(self.findNearestEnemy())
else:
self.attack(“Chest”)
Page 32
Responsive HTML
A web page that responds to the user depending
on what they do can be a very powerful tool for
the programmer. Our web page will use HTML,
CSS and JavaScript. The script responds with the
alert command which creates a popup. There are
many other scripts we could create:
<button onclick="alert('Answer 1 is correct.');">
(1) Blue.
</button>
Page 33
CSS Example
In the head section of our HTML we can choose settings including
style and a title. The title creates a small text on the top of the web
page window. Element rules with multiple lines should be
indented. Single rules can be placed on one line:
<head>
<style>
p{
font-size: 200%;
color: red;
}
button {font-size: 100%;}
</style>
<title> My Quiz </title>
</head>
Page 33
HTML Body Tags
In the body, create a paragraph with the <p> tag and put
questions that are answered with buttons that have alerts
attached to the onclick events. Be sure to link some one
before and after so the user can keep practicing.
<p>
<a href = "http://site.com"> Click Here </a> <br />
What color?
<button onclick="alert('Right!');"> blue </button> <br />
<button onclick="alert('Wrong!');"> red </button>
<a href = "http://site.com"> Click Here </a> <br />
</p>
Page 34
Apprentice: Post an online web page with 10
questions designated by the teacher, a link to
the previous question set and a link to a later
question set.
Practitioner: Comment out the apprentice
version and rewrite the code to include popup
responses that say which answer is correct
and which are not.
Professional: Comment out the previous
versions and create a new version with
detailed explanations on why the answers are
right or wrong. Make the page contain an
original, aesthetically pleasing design.
Page 34
Using Comments
• Comments can be useful to disable sections of
code or to write messages to help a
programmer. In this case, we are required to
keep old versions inside an HTML comment. A
professional will have three versions of the
web page and only one of them enabled for
the end user to see:
<!-- Old version of code -->
Page 35
Make Sure The Links Work
• Part of this project is to create a chain of quiz
questions. A link at the beginning goes to the
previous set of questions and a link at the end
will go to the next set. Be sure to test out
your link and each link on your neighbor’s
page. If their link doesn’t work by the last day
of the project, it could break the chain so you
may need to skip them and find the next
person.
Page 35
Quiz Answer
<!DOCTYPE html>
<html>
<head>
<style>
p {font-size: 200%;}
button {font-size: 100%;}
</style>
<title> My Quiz </title>
</head>
<body>
<p>
<a href = "http://www.myfriendsite.com/friendname.html">
Left Friend Quiz
</a> <br /> <br />
1 Which statement describes a situation that would reduce the stability of a
forest ecosystem? <br />
<button onclick="alert('Answer 1 is correct because a predator is important
in controlling an ecosystem.');">
(1) A fierce predator is removed from the ecosystem.
</button> <br />
<button onclick="alert('Answer 2 is wrong because constant producers will
not reduce stability in the ecosystem.');">
Page 36
(2) The number of producers remains constant in the
ecosystem.
</button> <br />
<button onclick="alert('Answer 3 is wrong because organisms
always interact with an ecosystem and this will not
reduce stability.');">
(3) Organisms frequently interact within the
ecosystem.
</button> <br />
<button onclick="alert('Answer 4 is wrong because the sun is a
normal part of ecosystems and will not reduce
stability.');">
(4) The energy in the ecosystem flows from the Sun.
</button> <br /> <br />
<a href="http://www.myfriendsite.com/friend2name.html">
Right Friend Quiz
</a>
</p>
</body>
</html>
Page 36
Using Scratch
• Scratch is useful because it is a fully functional
programming language that enables us to
make a web app quickly. We can use scratch
to win Hackathons. Scratch is a part of Snap,
which is used to program robots. Other
languages have advantages such as run speed
and portability. However, Scratch is best for
developing and posting an online program
quickly.
Page 2.3.1
Animating Scratch Sprites
• The sprites in scratch come with one or more
costumes. We can edit costumes and then
create a simple program to have the costumes
change at regular intervals. This gives the
illusion of in-place movement for very little
work:
Page 2.3.2
Scratch User Input
• A great way to have the user control a
program is to have the program continuously
monitor and respond to the mouse-pointer.
By using the following example, a sprite will
follow the mouse as a user moves around the
screen:
Page 2.3.3
Scratch Collision Monitoring
• Scratch makes it easy to respond to sprites
colliding with each other. The following
example has a sprite move around, bouncing
off walls and responds when the user’s sprite
collides with it:
Page 2.3.4
Scratch Variables
• Score and level are classic variables that any
game will use. Also, experiment with things
such as speed which could increase as levels
increase. We could also create a loop to
repeat a certain number of times and clone
new sprites to make the game even more
powerful and interesting while it’s running.
Making a game enjoyable to play takes a lot of
testing and changing. It’s worth the effort.
Page 2.3.5
Rubric
Create a holiday card that is customized to Apprentice – 70%
be sent to some one you care about.
Share the project and submit it. Use
multiple sprites to make the card
functional and aesthetically pleasing.
Add multiple costumes to the sprites and
Practitioner – 85%
set them to advance during runtime.
Create a game with a mouse controlled
avatar that is fun to play with collision
objects to avoid and to acquire.
Professional – 100%
Page 2.3.6
Quiz Answer Example
1. Define what a sprite is, what a costume is and what the stage is in Scratch.
A sprite is an object that has a costume and methods
A costume is one of multiple pictures a sprite can have
The stage is the background that has a picture that can be changed
2. Write a program that will have a sprite start at 0,0 and move forward 50
pixels
When flag clicked
go to x: 0 y:0
move 50 steps
3. Write a program that will enable a sprite to continuously rotate through its
costumes.
When flag clicked
forever loop
next costume
wait 0.1 secs
Page 2.3.7
4. Write a program that will enable a sprite to follow the user's mouse
while it rotates through its costumes.
When flag clicked
forever loop
go to Mouse-Pointer
next costume
wait 0.1 secs
5. Write a program that will enable a sprite to respond to a collision from a
user's mouse controlled sprite by adding to a score variable and reappearing some place else on the canvas.
When flag clicked
forever loop
move 10 steps
if on edge, bounce
if touching Reindeer ? then
change score by 1
go to x pick random -200 to 200 y: pick -150 to 150
turn left pick random 1 to 360 degrees
Page 2.3.8
Profile Page - Novice
•
•
•
•
•
•
sites.google.com
create a site with a blank template
click the pencil icon to edit the site
insert a table that is 2 by 5
in the top right box place a screen shot from a CS project
go to the project, press print screen, run the paint program, crop
the image, save the image to the local computer, insert image on
the web page
• place a sentence in the upper left box of the table that describes
what you did and link the sentence to the project using the chain
link icon
• save the page, share with anyone who has the link
• submit the page on the teacher's class website by clicking the
"submit a project link"
Page 3.3.1
Profile Page – Apprentice
• Add screen shots and linked sentences for
another 5 CS projects.
Linked Sentence
Screenshot
Screenshot
Linked Sentence
Linked Sentence
Screenshot
Screenshot
Linked Sentence
Linked Sentence
Screenshot
Page 3.3.2
Profile Page – Practitioner
• Introduce your self with a paragraph at the
beginning of the page. Expand each
description sentence in the table to be a
paragraph explaining what you have done in
the specific project. Find and implement the
options to improve the aesthetics of the pages
through templates or color changes.
Page 3.3.3
Profile Page - Professional
• Double the number of posted projects with
links, paragraphs and screen shots to 10.
Projects that were done and posted online
may be used even if they were not a CS
project.
Page 3.3.4
Google Sites Positives
• The page is fast to setup and create
• It uses the Google account that we already
have
• It is easy to set up themes
• Security is flexible and relatively easy to
manage by letting us share the information
with those we want to see it and keep it from
those who don’t.
Page 3.3.5
Google Sites Negatives
• It doesn’t let us add CSS and JavaScript
• The HTML is only partially accessible
• The formatting of the page is restricted by the
way the program is set up making many of the
pages look similar
• We are not able to develop offline
• The development can be hindered by slow
Internet connections
Page 3.3.6
Quiz
1. Explain why it is important to configure sharing options on
a Google Sites web page.
When we make a Google Sites page it starts out as private
and no one can see it until we configure the settings.
2. Describe how someone can create a new Google Sites web
page.
Login to Google account, go to sites.google.com, click create,
name the site, click create.
3. Summarize what a student needs to do to accomplish the
practitioner level in this project.
All of the items in the novice and apprentice levels. An
introduction paragraph and a paragraph for each work
displayed. Improved page aesthetics
Page 3.3.7
4. Explain why a Google Sites web page will be a good
choice when security is important.
Google has built in security measures to enable the
author to decide who does and does not see the
information
5. Explain why a Google Sites web page will be a poor
choice when there is limited or no Internet Access.
Google sites requires an internet connection to use. If
the connection is slow, the work will be slow and we
may be better off developing with a local application on
the computer.
Page 3.3.8
Python – Codesters - Castle
• On codesters.com log in as an individual
without a class code and create a new project.
• The online utility enables us to create, edit
and post documents with very little work on
our end. Be sure to save work, mark it as
shared and keep track of the links of projects
to submit to teachers, employers and colleges.
The work is evidence of our ability, so take
care to keep track of it.
Page 4.3.1
Python Drawing Commands
The objects we will be using are called Turtle and
they are useful as a type of sprite.
sprite = turtle.Turtle()
To move without drawing use:
sprite.penup()
To move using X/Y coordinates:
sprite.goto(50, 50)
To move while drawing use:
sprite.pendown()
Page 4.3.2
Driving the Turtle
Using the 360 degree system to set direction:
sprite.setheading(90)
Move forward a desired amount:
sprite.forward(100)
Turn left/right using the desired method:
sprite.right(90)
Page 4.3.3
Apprentice
Page 4.3.4
Practitioner
Page 4.3.5
Professional
Page 4.3.6
Quiz Answers
1. Both Python and Scratch can make Turtle Graphics. Explain why we are learning both.
The two different tools work better depending on the problem you are trying to solve.
2. Write a Python program that will use turtle graphics to draw a line going upwards 100 pixels from
50,50.
sprite = turtle.Turtle()
sprite.penup()
sprite.goto(50, 50)
sprite.pendown()
sprite.setheading(90)
sprite.forward(100)
3. Continue the program from question 2 and have the sprite make a square.
sprite.right(90)
sprite.forward(100)
sprite.right(90)
sprite.forward(100)
sprite.right(90)
sprite.forward(100)
Page 4.3.7
4. Continue the program from questions 1 and 2
and change the Turtle to red using the color name
and green using RGB color codes.
sprite.color("red")
sprite.color(0, 255, 0)
5. The program in questions 1 to 3 made a square
and had a Turtle turn green. However, the square
was not filled with green. Explain how the program
can be changed to create a shape with a solid fill.
Begin the drawing section with sprite.begin_fill()
and finish it with sprite.end_fill()
Page 4.3.8
HTML/CSS/JavaScript/Processing Graphics
<head>
<title>Happy Drawing</title>
<script type="text/javascript"
src="http://www.scottbunin.com/processing.js"></script>
</head>
<body>
<script type="application/processing">
//Place Example Graphics Here
</script><canvas></canvas>
<br>
<br>
</body>
Page 1.4.1
Example Graphics 1
size(800, 600);
background(200,200,200);
fill(200,200,0);
ellipse(700,100,60,80);
stroke(200,0,0);
strokeWeight(4);
line(0,0,800,600);
Page 1.4.2
Setting A Second Canvas
<br>
<br>
<script type="application/processing">
size(600, 600);
background(255,255,255);
stroke(0,0,255);
strokeWeight(1);
//put lines here
</script><canvas></canvas>
Page 1.4.3
Example Graphics 2
line(300,0,300,300);
line(300,20,280,300);
line(300,40,260,300);
line(300,60,240,300);
line(300,80,220,300);
line(300,100,200,300);
line(300,120,180,300);
line(300,140,160,300);
line(300,160,140,300);
Page 1.4.4
Setting Third Canvas
<br>
<br>
<center>
<script type="application/processing">
size(300, 1600);
background(100,100,100);
stroke(255,255,0);
strokeWeight(10);
//put the draw functions here
</script><canvas></canvas>
</center>
Page 1.4.5
Example Graphics 3
line(150,0,150,50);
line(150,100,150,150);
line(150,200,150,250);
noStroke();
fill(200,50,50);
rect(40,50,90,200);
Page 1.4.6
Quiz Answers
1. Describe what is required to earn credit for
the three canvases in this project.
The first canvas should be a unique drawing to
show a background for a child’s video game.
The second canvas should be a star with four
sides as shown in the example code.
The third canvas should be a unique drawing
with a car on a road.
Page 1.4.7
2. Write a web page with an ellipse and a line using HTML and the studied
techniques from this unit.
<head>
<title>Happy Drawing</title>
<script type="text/javascript"
src="http://www.scottbunin.com/processing.js"></script>
</head>
<body>
<script type="application/processing">
size(800, 600);
background(200,200,200);
fill(200,200,0);
ellipse(700,100,60,80);
stroke(200,0,0);
strokeWeight(4);
line(0,0,800,600);
</script><canvas></canvas>
<br>
<br>
</body>
Page 1.4.8
Scratch Loops and Function Blocks
• When the flag is clicked
the canvas will clear and
forever use random
places and random colors
to create rectangles.
• The random place,
random color and
rectangle blocks must be
defined by the
programmer.
Page 2.4.1
Defined Function
Blocks
Page 2.4.2
The Angles and Size of Regular Shapes
• Regular shapes such as the triangle, square,
pentagon, hexagon, and octagon have the sum of
their interior angles add up to 360 degrees. For
example, a square has 4 sides has the same angle
so we turn 360/4 degrees or 90 degrees. 360/8
would an octagon.
• These shapes also have the same lengths on each
of their sides. So to make a triangle, we would
step forward 3 times, move the same distance
each time and turn 360/3 degrees on each line.
Page 2.4.3
Apprentice
• Create your own function block for a triangle,
and a rectangle using appropriately numbered
repeat loops.
• Create your own function blocks for random
color and random places.
• Have a sprite use a forever loop to call the
blocks you have defined forever.
Page 2.4.4
Practitioner
• In addition to the apprentice level, create
programmer defined function blocks for
pentagon, hexagon, octagon and five sided
stars.
Page 2.4.5
Professional
• Complete practitioner and apprentice levels.
• Define and implement a function block for a
shape with 18 side.
• Define and implement a function block for a
circle.
• Add another sprite and have them bounce
around the screen leaving a trail of a randomly
colored shape.
• Upgrade the program so that a users can
enable/disable particular shapes from being
drawn.
Page 2.4.6
Quiz Answer Examples
1. Show an example of a scratch made function
block for a shape with 3 or more sides, a random
place, and a random color.
Page 2.4.7
2. Show an example of how a programmer can
use a forever loop to implement function
blocks from question 1.
3. Explain how a programmer could have a user
enable/disable certain shapes while the
program runs.
Page 2.4.8
Financial Planning Spreadsheets
• A mortgage is when a person takes out a loan
from a bank to buy a home. In this project,
we will select a house, select a bank, and plan
out a mortgage payment schedule. Use
www.trulia.com to find the homes. Use
www.chase.com to find the mortgage rates
under: Products & Services => Mortgages =>
Buy a Home.
Page 3.4.1
Find Your Future House!
• Use the website to pick a favorite home in NYC
and find out the cost. Open up a new
Spreadsheet document and save the
document with your name included in the file
name. Write the information for the most
expensive house and the least expensive that
you would be comfortable living in. To make
the words fit, click the mouse and drag in the
little lines separating the different columns.
Page 3.4.2
• The spreadsheet will automatically copy
formulas and numbers when you select it and
drag the little solid square in the lower right
corner of the selected area. Select the Loan
Amount, Interest Rate and Payment as shown.
Drag the little box downward and watch as
Excel fills in lots of numbers. See how far it
has to be dragged down To get the Loan
Amount to zero for both Favorite and
Cheapest House.
Page 3.4.3
What’s for Lunch?
• Go to http://www.optosfns.org/schoolfood/public1/de
fault.aspx and find the calendar
for HS Lunch.
• To add up the numbers
automatically, select the
information and use the
AutoSum key in the top right
corner on the home tab. The
program does the calculations
and places the totals on the
bottom. Set it up as shown in
order to have proper formatting
for graphing.
Page 3.4.4
Excel: Million Dollar Education
• Go to www.bls.gov/emp/ep_chart_001.htm
to find out information on how education
affects salary.
Add the Unemployment rates and weekly
salary for Doctoral Degrees, Bachelors Degree,
H.S. Diploma and Less Than H.S diploma as
shown to your notes
Page 3.4.5
Monthly and Yearly Salary
• There are 4 weeks in a month and 52 weeks in
a year. Multiply the doctor’s weekly earnings
by 4. To do this, use the equals sign, click on
the doctor’s number for weekly earnings and
use the * for multiplication and the number 4.
Use * 52 for the year.
= <click on 1551> * 4
= <click on 1551> * 52
Page 3.4.6
Quiz Example
1. Explain what a mortgage is.
A mortgage is when some one takes out a loan
to pay for a home.
2. How did we find a current mortgage rate?
In the example given, we clicked on the Chase
web site.
3. According to the data studied, what level of
education is mostly likely to be unemployed?
People who don’t graduate high school are the
most likely to be unemployed.
Page 3.4.7
4. Explain how we can adjust a weekly salary to
show as monthly and yearly in the spreadsheet.
In the spreadsheet, we enter a formula with
the = sign and multiply the weekly salary by 4
and then by 52 to get monthly and yearly.
5. List the 8 level of education in order from most
to least salary earned.
professional, doctoral, masters, bachelors,
associate, high school diploma, less than high
school diploma
Page 3.4.8
Python: Defining and Calling Functions
sprite = turtle.Turtle()
#This defines how to draw a square
def square():
sprite.forward(100)
sprite.left(90)
sprite.forward(100)
sprite.left(90)
sprite.forward(100)
sprite.left(90)
sprite.forward(100)
sprite.left(90)
#This has the computer draw the square
square()
Page 4.4.1
Function Parameters
#this defines how to draw a rectangle
def rect(x, y):
sprite.forward(x)
sprite.left(90)
sprite.forward(y)
sprite.left(90)
sprite.forward(x)
sprite.left(90)
sprite.forward(y)
sprite.left(90)
#this tells the computer to draw a rectangle with a width and height
rect(30,50)
Page 4.4.2
Required Functions (apprentice)
• Create a rect(x, y) function that will draw a
rectangle of any size.
• Create a star function that will draw a five sided
star at the current turtle with a light blue fill.
• Create a function that calls
rect function 3 times and
the star function 4 times
to create the attached
example flag.
Page 4.4.3
Size Modifier Example
#this defines how to draw a rectangle
def rect(x, y, size):
sprite.forward(x*size)
sprite.left(90)
sprite.forward(y*size)
sprite.left(90)
sprite.forward(x*size)
sprite.left(90)
sprite.forward(y*size)
sprite.left(90)
#this tells the computer to draw a rectangle at half normal size
rect(30, 50, .5)
#this tells the computer to draw a rectangle at twice normal size
rect(30, 50, 2)
Page 4.4.4
Update Flag Function for Size
(practitioner)
• When we create graphics we sometimes need
the flag to be larger or smaller. For example, a
flag in the background may be small to give
the illusion of distance. We can multiply each
of our forward() method calls to change based
on a size parameter. For example, instead of
calling sprite.forward(100), we can call
sprite.forward(100*size). This careful
modification can create a much more
powerful function.
Page 4.4.5
Additional Shapes on Flag
(professional)
• Some of the nicest flags contain other shapes
than stars and rectangles. Pick any of the two
examples shown to add to your flag and
improves its looks. If you would like to do a
different shape with a similar difficulty, see
teacher for approval.
Page 4.4.6
Quiz Answer Examples
1. Write a function that will have a sprite go forward and turn left.
def foLe():
sprite.forward(100)
sprite.left(90)
2. Write a function that will have a sprite go forward a variable amount and then turn
left.
def foLe(x):
sprite.forward(x)
sprite.left(90)
3. Write a program that will call a function that has a sprite go forward left. Have it go
forward and left 4 times. What shape does it make?
foLe()
foLe()
foLe()
foLe()
#It makes a square.
Page 4.4.7
4. Write a function that will enable a sprite to make a square and have a variable that will change the
size of the square depending on how the programmer calls the function.
def rect(size):
sprite.forward(100*size)
sprite.left(90)
sprite.forward(100*size)
sprite.left(90)
sprite.forward(100*size)
sprite.left(90)
sprite.forward(100*size)
sprite.left(90)
5. Write a function that will have a sprite make a square using a variable width, a variable height and a
size offset. Use a loop to avoid repetitive code. Then, call the function twice so that the shape is drawn
at half size and double size.
def rect(x, y, size):
for counter in range(2):
sprite.forward(x*size)
sprite.left(90)
sprite.forward(y*size)
sprite.left(90)
rect(30,50,.5)
rect(30,50,2)
Page 4.4.8
Web Programming: Animation
• In our previous example we made ellipses on the
screen using constant variables such as
ellipse(700,100,60,80); which would make an
ellipse at the x/y coordinates of 700,100 have a
with of 60 and a height of 80. For animation, we
will replace some of these constants with
variables. We will then create a system for
changing the variables at regular intervals.
Finally, we will develop a strategy for limiting the
movement so that they stay within a desired area
such as staying on the screen.
Page 1.5.1
Changing Constant to Variable Positioning
size(800, 600);
var x = 700;
var speed = 10;
void draw()
{
ellipse(x,100,60,80);
if (x > 800) speed = -speed;
if (x < 0) speed = -speed;
x = x + speed;
}
Page 1.5.2
Second Example
//The second canvas with the star
size(600, 600);
stroke(0,0,255);
strokeWeight(1);
var x = 300;
var speed = 5;
void draw()
{
background(255,255,255);
line(x,0,300,300);
line(x,20,280,300);
if (x > 800) speed = -speed;
if (x < -200) speed = -speed;
x = x + speed;
}
Page 1.5.3
Apprentice Requirements
• Retrieve the pervious version from project
• Enable an ellipse to bounce left and right on
the screen in the first canvas.
• Upgrade the star so that the lines stretch back
and forth on the screen
• Upgrade the car so that the car moves back in
forth through a small area to simulate
vibration as if the engine was running.
Page 1.5.4
Practitioner Level
• Upgrade the ellipse on the first canvas to bounce
with a variable Y position in addition to the X.
• Upgrade the star so that a second baby star is on
the screen and bounces around like the ellipse
with X and Y variables.
• Upgrade the car so that another car repeatedly
moves from the top of the screen to the bottom
of the screen and starts over at the top again to
make it appear that there is traffic.
Page 1.5.5
Professional Level
• Make sure all graphics assignments from
previous version are complete.
• Upgrade the graphics on the first canvas to be
a beautiful land where children could enjoy a
setting for a game.
• Update the graphics in the star game to have
stars in the background.
• Upgrade the third canvas to have realistic
looking cars.
Page 1.5.6
Quiz Example
1. How should we set the stroke color to blue and
line width to 1 pixel?
stroke(0,0,255);
strokeWeight(1);
2. Explain what the statement x = x + speed; does
for the programs we have been assigned to create.
The variable x is being used to keep track of how
far left and right a graphic appears. The variable
named speed keeps track of how fast the graphics
“move”.
Page 1.5.7
3. Write a JavaScript program that will have an ellipse move around the canvas and bounce on the
edges.
size(800, 600);
var x = 700;
var y = 500
var speedX = 10;
var speedY = 7;
void draw()
{
if (x > 800) speedX = -speedX;
if (x < 0) speedX = -speedX;
if (y > 600) speedY = -speedY;
if (y < 0) speedY = -speedY;
x = x + speedX;
y = y + speedY;
ellipse(x,y,60,80);
}
Page 1.5.8
Scratch: Harry Potter and the
Broadcasted Messages
• In this project we will use broadcast
messaging and receive commands to have
sprites communicate. By clicking the remix
button on the given web page, we can
complete the drama. The show starts when a
user clicks the flag. After that, the sprites
“talk” to one another to cue the next part of
their drama.
Page 2.5.1
Apprentice Objectives
• In this assignment we’ll fix the broadcast driven
Harry Potter project. Right now it's not working.
Harry and Voldemort talk some trash and then
suddenly stop when no send and receive have
been created for the script. For example, when
Voldemort says You have come for your death,
we can add a broadcast block and a receive block
to trigger the next response from Harry. Each of
the given dramatic blocks in the example file
should have a receive block and a broadcast block
until the entire scene plays out.
Page 2.5.2
Shape Graphics Example
Page 2.5.3
Basic Scratch Commands
• The When Flag Clicked event is a good way to
start because it gives the user a way to begin
the program.
• The Move command lets a sprite change its
location.
• The Say command lets a sprite put text on the
screen as if they were speaking.
• The Wait command has the sprite stop and
wait. This is important to get timing correct.
Page 2.5.4
Practitioner Level
• Fix the lightning bolt and add some more
sprites or graphics to make an original magical
duel between the characters. Students may
create new original drawing blocks or use
blocks created in previous projects such as the
“star” block.
Page 2.5.5
Professional Levels
• Introduce at least two additional characters.
Have the story take a bizarre, original twist.
The dialogue should contain at least 30 lines.
Only students who make the audience laugh
out loud or walk away in thoughtful solitude
will get an A.
Page 2.5.6
Quiz Example
1. Write Scratch blocks that will have a sprite
say “hello” when the green flag is clicked and
then send a broadcast that they have said
“hello”.
2. Write scratch blocks that will receive a
“hello” broadcast and say “goodbye.”
Page 2.5.7
3. Define 3 block sets to make a rectangle, have
a sprite go to a random place and choose a
random color.
Page 2.5.8
