Getting Started With HTML

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

<b> Bold Text </b> <i> Italics Text </i>
<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
Use the beginning part of your 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 glide command will let a sprite move smoothly across the stage.
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: 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: wait 2 seconds say I'm a sprite. say Lets be friends! 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: 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. go to x: 0, y: 0 say jump for 2 seconds change x by -20 change x by 20 change y by 20 change y by -20 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 When you are on the site, register with your AFSE 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.moveDown() 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: 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() 5. Write a program that will store the name of a magic item and then attack it forever: item = self.findNearestEnemy() self.attack(item) Page 16

https://thimble.webmaker.org/
CSS Syntax 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: Get the Color 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 { 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= " <img src=" </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 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. say Hello! for 2 secs wait 2 seconds pen down move 50 pen up Page 24

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 turn left 90 5. Write a program that will draw a letter with random colors and in random places on the screen. forever go to x:(pick random -200 to 200) y: (pick random -200 to 200) set pent color to (pick random 1 to ) point in direction 180 Page 24

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 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. Create a table showing earnings and expenses. 2. 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 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 Backwoods Forest Apprentice – 70% Sarven Desert and Cloudrip Mountain Practitioner – 85% Kelvintaph Glacier and Bonus Level Professional – 100% 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 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. 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() 4. Write a program that will store the name of an enemy and then attack it forever. enemy = self.findNearestEnemy() 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. 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 = " Click Here </a> <br /> What color? <button onclick="alert('Right!');"> blue </button> <br /> <button onclick="alert('Wrong!');"> red </button> </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:  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 = " 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
(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=" 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 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. Apprentice – 70% Add multiple costumes to the sprites and set them to advance during runtime. Practitioner – 85% 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. 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 re-appearing some place else on the canvas. 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 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) 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=" </head> <body> <script type="application/processing"> //Place Example Graphics Here </script><canvas></canvas> <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> <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);
Page 1.4.4

Setting Third Canvas <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);
noStroke(); fill(200,50,50); rect(40,50,90,200); <head> <title>Happy Drawing</title> <script type="text/javascript" src=" <script type="text/javascript" src=" </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> size(600, 600); background(255,255,255); stroke(0,0,255); strokeWeight(1); 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); <center> size(300, 1600); background(100,100,100); stroke(255,255,0); strokeWeight(10); </center> size(1200, 500); background(50,50,255); strokeWeight(2); fill(255,0,0); triangle(200,100,200,300,400,200); stroke(255,0,255); fill(0,255,0); triangle(100,125,100,275,200,200); </body> Page 1.4.6

Quiz Answers 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=" </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> </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

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 to find the homes. Use 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 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 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 Explain what a mortgage is.
A mortgage is when some one takes out a loan to pay for a home. How did we find a current mortgage rate? In the example given, we clicked on the Chase web site. 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

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. 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) #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) #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) #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) 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() #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) 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.forward(y*size) 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; } <html> <head> <title>Write Your Name Here. Don't write "your name" write your name!</title> <script type="text/javascript" src=" </head> <body> <script type="application/processing"> //The first canvas with the sun and line 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> //The second canvas with the star size(600, 600); background(255,255,255); stroke(0,0,255); strokeWeight(1); 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); <center> //The third canvas with the car size(300, 1600); background(100,100,100); stroke(255,255,0); strokeWeight(10); 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); </center> //A fourth canvas with an aeroplane size(1200, 500); background(50,50,255); strokeWeight(2); fill(255,0,0); triangle(200,100,200,300,400,200); stroke(255,0,255); fill(0,255,0); triangle(100,125,100,275,200,200); </body> </html> 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 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”. 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

Bridge Design and Documentation
Start the program by typing “bridge” in the search bar under the windows icon or get the program from this link if you don’t have it. We will be recording our progress on a document that will include five bridges and their descriptions. It is easier to work off of the example document and edit it than to create our own document. Page 3.5.1

Bridge Types A bridge that immediately collapses is a Fail Bridge. The test truck does not even try to cross because it is obviously broken. A beautiful bridge is any bridge that the designer likes the look of AND the truck is able to get across. A splash bridge is a trick structure that lets the truck get on the bridge but then collapses when the truck is half way across. Page 3.5.2

Competitive Bridges In reality, money drives which design gets picked before being build. Make a bridge that costs as little money as possible, but still gets the truck across. Students who have the least costly bridge will win. Make a bridge that costs the MOST money. Students who have the most costly bridge will win. Page 3.5.3

Software Tools Joints is where beams join together and are represented by round dots. Beams connect the joints. There is a selection bar to allow a designer to change settings of beams. There is an eraser to remove beams or joints. The program has a design mode and test mode and we can switch by pressing the icons. Page 3.5.4

Most Expensive Bridge (>100m)
Longer beams need more steel More beams cost more money, but be careful you can only make 120 of them Certain kinds of steel cost more so pick from the 3 types Hollow pipes tend to cost LESS There are some costs involved in the excavation so try the settings for a new bridge Page 3.5.5

Least Expensive Bridge (<200k)
We want to make a bridge that meets the MINIMUM requirements to get the truck across, but costs the least amount of money. To do this, check the percentages of stress on the individual beams as you minimize the cost of the beam. A beam with .99 stress is almost breaking. That’s a GOOD thing, because it is optimized to cost while meeting minimum safety. Page 3.5.6

Quiz Example Explain the goals of the splash bridge, fail bridge, beautiful bridge, expensive bridge and inexpensive bridge. Splash bridge has the truck fall, fail bridge falls down right away, a beautiful bridge is any bridge that works, an expensive bridge is more than 100 million and an inexpensive bridge is less than 200 thousand Page 3.5.7

Explain how the Word document should be set up for this project.
We were assigned to create a document with 5 pictures and 5 paragraphs. The document should then be uploaded to our drive and shared so that anyone with the link can see. This document should then be submitted on the class web site. Explain why a beam with .99 failure is a good value for an inexpensive bridge. A beam that is still safe and is about to fail is ideal for optimizing cost in this simulation Page 3.5.8

Python Alphanumeric Font
fontSize = 74 cursor = turtle.Turtle() cursor.setposition(-240,240-fontSize) cursor.speed(500) cursor.width(fontSize/5) def enterCheck(): pos = cursor.position() if (pos[0] > 245-fontSize): cursor.setposition(-240,pos[1] - fontSize*1.2) Page 4.5.1

def letterA(): #made by Bunin cursor. left(90) cursor
def letterA(): #made by Bunin cursor.left(90) cursor.forward(fontSize/2) cursor.right(90) cursor.forward(-fontSize/2) cursor.forward(fontSize) Page 4.5.2

cursor.forward(fontSize/4) cursor.pendown() enterCheck() letterA()
cursor.left(90) cursor.penup() cursor.forward(fontSize/4) cursor.pendown() enterCheck() letterA() #12 Alphanumerics shown is apprentice #24 Alphanumerics shown is practitioner #36 Alphanumerics shown is professional #you may work with up to 6 people #you must credit each letter with the creator #you must contribute as many or more letters than anyone else in your program Page 4.5.3

Work Distribution Plan
Page 4.5.4

Communication Strategies
For this project, it is recommended that we share code via and/or Google Docs. There are tools such as Github that are great for this. However, take caution when solving a problem within a limited time not to try to learn a tool that takes too long to learn. Page 4.5.5

How To Submit Make certain that each alphanumeric procedure has a comment designating the original author. Putting your name on a procedure some one else wrote will result in an automatic loss of credit for the project. Each project must contain the submitting student as the main contributor. This means that we must have created 7 letters on our own to gain full professional designation. The program must be shared and submitted on the class web site. Page 4.5.6

Quiz Example How does a turtle named cursor turn left? cursor.left(90)
How does a turtle named cursor move forward? cursor.forward(100) How does a turtle named cursor make a square which each side 10 pixels? cursor.forward(10) cursor.right(90) Page 4.5.7

#36 Alphanumerics shown is professional
Write a comment that will explain how a student can earn the professional level for this project. #36 Alphanumerics shown is professional Write the code for the enterCheck() procedure as given in this unit. def enterCheck(): pos = cursor.position() if (pos[0] > 245-fontSize): cursor.setposition(-240,pos[1] - fontSize*1.2) Page 4.5.8

Mr. Happy’s Quest For our original canvas, we had designed a child’s background using simple shapes. For this project, we will add objects that a game player (child) can move around using the arrow keys on the keyboard. In the example, a smiley face has begun to be created Page 1.6.1

Bouncy Obstacles Example
size(800,600); var x = 400; var t = 5; var hx = 200; var hy = 200; void draw() { background(100,100,100); //bouncy ball designs fill(255,255,255); ellipse(x,150,200,200); fill(0,0,0); ellipse(x,450,200,200); x=x+t; if(x>800) t = -t; if(x<0) t = -t; text("Hello!", 50, 50); Page 1.6.2

The Draw Function and Mr. Happy
//draw mr happy noStroke(); fill(255,255,0); ellipse(hx,hy,100,100); stroke(0,0,0); ellipse(hx-20,hy-20,10,10); ellipse(hx+20,hy-20,10,10); //ADD A MOUTH WITH A BLACK ELLIPSE AND A RECTANGLE TO ERASE THE TOP HALF OF THE ELLIPSE } Page 1.6.3

Make Our Own Designs Page 1.6.4

keyPressed() Function Example
void keyPressed() { if (keyCode == UP) hy = hy - 20; if (keyCode == DOWN) hy = hy + 20; //ADD LEFT RIGHT } Page 1.6.5

Simulated Contract Complete the three sprite designs on paper with a drawing showing each of 9 simple shapes (ellipse, line, rect and triangle) starting with one simple shape and adding ONE additional shape per drawing (55 Points) Implement the 9 shape onto a canvas for the avatar (15 points) the target sprite (15 points) and the damage/negative sprite (15) points. Page 1.6.6

Quiz Example size(800,600); //sets the canvas size
var x = 400; //the left/right location var t = 5; //a speed variable void draw() //draw graphics repeatedly { //start of drawing background(100,100,100); //BG color gray fill(255,255,255); //inside shape color to white Page 1.6.7

ellipse(x,150,200,200); //draw a circle at x,150 fill(0,0,0); //inside shapes drawn in black ellipse(x,450,200,200); //draw a circle at x, 450 x=x+t; //add t to x to make x “move” if(x>800) t = -t; //change “move” direction if hit the if(x<0) t = -t; //edge of the screen text("Hello!", 50, 50); //place text “Hello!” at 50,50 } //end of drawing section Page 1.6.8

Grumpy Fowls For this project, we'll be using conditionals statements and boolean expressions to make Grumpy Fowls. Grumpy Fowls is a much better version of another game you might already know of. Remix the Grumpy Fowls Starter Project Sign in to Scratch. Open the Remixable Starter Version of Grumpy Fowls on Scratch. Page 2.6.1

Build Grumpy Fowls Go to the top right corner of the Remixable Starter Version of Grumpy Fowls and click on REMIX. After you've remixed the Grumpy Fowls Starter Version, it's time to get to work on the game mechanics! The goal of Grumpy Fowls is to have the grumpy fowl hit the pigs and avoid the brick wall. The player can try to hit the 1 Point Pig by tapping the right arrow key (→) once. The player can try to hit the 2 Point Pig by tapping the down arrow key (↓) once. The player can try to hit the 3 Point Pig by tapping the up arrow key (↑) once. If the player hits the pig, the grumpy fowl should tell the player how many points she gets! Page 2.6.2

Hit the Pigs and Ignore the Wall!
Write the code that moves the grumpy fowl towards each pig and, if she is touching the pig, tells the player how many points she scored! For this requirement you can ignore the brick wall! For example, if she hits the 2 Point Pig, she should say "Two points” Write the code that moves the grumpy fowl towards the 1 Point Pig and, if she hits the 1 Point Pig, makes her say "One point". Write the code that moves the grumpy fowl towards the 2 Point Pig and, if she hits the 2 Point Pig, makes her say "Two points". Write the code that moves the grumpy fowl towards the 3 Point Pig and, if she hits the 3 Point Pig, makes her say "Three points". Page 2.6.3

Avoid the Wall! Alter your code for each pig so that before the grumpy fowl reaches the pig, she first checks to see if she hits the brick wall. If she does hit the wall, she should say "Ouch!" and return to her starting position. Otherwise she should keep moving towards a pig, and, if she hits the pig, tell the player how many points she scored. Page 2.6.4

Be a Game Developer Add a new feature to the game of your choosing while making sure that the pigs and wall are still part of the game. TO GET CREDIT FOR THIS FEATURE, IT MUST INVOLVE WRITING CODE THAT USES CONDITIONALS IN NEW AND INTERESTING WAYS. Page 2.6.5

Game Improvement Ideas
In case you can't think of anything, here are just a few ideas: Keep score! In addition to telling the player how many points she gets for hitting a pig, tell the player her total points! Add lives! Make the game more difficult by having the player die if she hits the wall multiple times. Add levels! Add some variety to the game by adding an additional level with different pigs, different obstacles, or different controls. Page 2.6.6

Quiz Example 1. What requirements need to be met in order to earn apprentice level for this project? Write the code that moves the grumpy fowl towards the 1 Point Pig and, if she hits the 1 Point Pig, makes her say "One point", if she hits the 2 Point Pig, makes her say "Two points "if she hits the 3 Point Pig, makes her say "Three points". Page 2.6.7

2. What requirements need to be met in order to earn practitioner level for this project? Alter your code for each pig so that before the grumpy fowl reaches the pig, she first checks to see if she hits the brick wall. If she hits she says "Ouch!" and returns to start. Otherwise she should keep moving towards a pig as normal. 3. What requirements need to be met in order to earn professional level for this project? Just make the game a real game that people will want to play and earn us millions of dollars. Page 2.6.8

Profile Page - Novice sites.google.com
Find previous profile or create a new blank Click the pencil icon to edit the site Insert a table that is 2 by 10 or add 2 by 5 to existing table Place screen shots in every other box and paragraphs in every other box 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 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.6.1

Profile Page – Apprentice
Add screen shots and linked sentences for 15 CS or other subject projects. Linked Sentence Screenshot Page 3.6.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.6.3

Profile Page - Professional
Increase the number of posted projects with links, paragraphs and screen shots to 20. Projects that were done and posted online may be used even if they were not a CS project. Page 3.6.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.6.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.6.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.6.8

Python: EarSketch The Georgia Institute of Technology has created a music program called EarSketch. It allows us to use Python to create songs using algorithms. Sound can be an important part of a program to enhance the user’s experience. If you like music, you can earn a good living doing the technical part of the music like the way Young Guru works with Jay-Z. Page 4.6.1

from earsketch import * # Intro Content drum1 = HIPHOP_DUSTYGROOVE_018 drum2 = TECHNO_LOOP_PART_006 bass = ELECTRO_ANALOGUE_BASS_002 music = TECHNO_CLUB5THPAD_001 introList = [drum1, drum2, bass, music] # Verse Content drum5 = HIPHOP_DUSTYGROOVE_005 music3 = TECHNO_POLYLEAD_003 scratch = DUBSTEP_PERCDRUM_004 bass1 = ELECTRO_ANALOGUE_BASS_005 verseList = [drum5, music3, scratch, bass1] # Chorus Content drum3 = HIPHOP_DUSTYGROOVE_012 drum4 = TECHNO_LOOP_PART_004 music1 = DUBSTEP_BASS_WOBBLE_002 chorusList = [drum3, drum4, music1] Page 4.6.2

# Functions for Sections of Music def intro(list): for track in range(1, 5): mediaIndex = track - 1 measure = (track * 2) - 1 fitMedia(list[mediaIndex], track, measure, 9) def verse(list, start, end): for index in range(0, len(list)): track = index + 1 fitMedia(list[index], track, start, end) for measure in range(start, end): track = len(list) + 1 makeBeat(drum5, track + 1, measure, ' ') if measure % 4 == 0: makeBeat(drum5, track, measure, ' ') def chorus(list, start, end): for music in range(0, len(list)): tracks = music + 1 fitMedia(list[music], tracks, start, end) Page 4.6.3

♪ Page 4.6.4

def bridge(list, start, end): beat1 = ' ' beat2 = '2+++' panValues = [0, -100, 100] for measure in range(start, end): makeBeat(list, 1, measure, beat1) makeBeat(list, 2, measure, beat2) rhythmEffects(1, PAN, LEFT_RIGHT, panValues, measure, beat1) fitMedia(TECHNO_LOOP_PART_006, 3, start, end) setEffect(1, PAN, LEFT_RIGHT, -100, start, 0, end) def fadeOut(start, end): for track in range(1, 7): setEffect(track, VOLUME, GAIN, 0, start, -60, end) Page 4.6.5

# Setup Remix init() setTempo(121) # Music intro(verseList) verse(verseList, 9, 17) chorus(chorusList, 17, 25) verse(verseList, 25, 33) chorus(chorusList, 33, 41) bridge(chorusList, 41, 49) chorus(chorusList, 49, 57) chorus(chorusList, 57, 65) fadeOut(57, 65) setEffect(3, PITCHSHIFT, PITCHSHIFT_SHIFT, 0, 1, 0, 49) setEffect(3, PITCHSHIFT, PITCHSHIFT_SHIFT, 1, 49, 1, 65) finish() Page 4.6.6

Quiz Example 1. How can we earn apprentice, practitioner and professional for this project? Apprentice will have at least two sounds loaded with fitMedia() on 2 tracks Practitioner will have apprentice plus a for loop that uses a makeBeat() function. Professional will have practitioner and the song is divided into 3 or more functions Page 4.6.7

from earsketch import * init() setTempo(120)
2. Write a program that will have two sound files placed on track 2 and 3. The sound on track 2 should go from measure 1 to 3 and the sound on track 2 should go from 2 to 3. from earsketch import * init() setTempo(120) sound = DUBSTEP_BASS_WOBBLE_001 track = 1 start = 1 end = 3 fitMedia(sound, track, start, end) sound = DUBSTEP_BASS_WOBBLE_002 track = 2 start = 2 finish() Page 4.6.8

//avoid mr cloud of doooom
if (distance(hx,hy,x,100)<50) alive = false; function distance(x1,y1,x2,y2){ var d = 0; d = (x2-x1)*(x2-x1) + (y2-y1)*(y2-y1); d = Math.sqrt(d); //text(d,10,10); return d; } Page 1.7.1

var alive = true; //let Mr
var alive = true; //let Mr. happy move for the mouse too hy=mouseY; hx=mouseX; //change Mr. Happy if hits cloud if (!alive) fill(255,0,0); if (alive) rect(hx-40,hy-15,80,30); Page 1.7.2

//little pinkpink star stroke(255-random(1,80),0,255-random(1,80));
var targetX = 300; var targetY = 300; var targetSize = 100; strokeWeight(3); //little pinkpink star stroke(255-random(1,80),0,255-random(1,80)); //top left part of little pink star line(mouseX,mouseY+-100,mouseX,mouseY+00); line(mouseX,mouseY+-80,mouseX-20,mouseY+00); line(mouseX,mouseY+-60,mouseX-40,mouseY+00); line(mouseX,mouseY+-40,mouseX-60,mouseY+00); line(mouseX,mouseY+-20,mouseX-80,mouseY+00); line(mouseX,mouseY+0,mouseX-100,mouseY+00); Page 1.7.3

<title>Gabrielle's Fun Games</title>
if(mousePressed && distance(targetX, targetY,mouseX,mouseY)<50){ //fire mah lasers! strokeWeight(10); stroke(random(1,255),0,0); line(mouseX+100, mouseY+200, random(1,600), random(1,600)); line(mouseX+100, mouseY, random(1,600), random(1,600)); targetSize--; if (targetSize<5){ targetX = random(1,600); targetY = random(1,600); targetSize = 100; } //draw target fill(0,255,0); ellipse(targetX, targetY, targetSize,targetSize); <head> <title>Gabrielle's Fun Games</title> <script type="text/javascript" src=" <script type="text/javascript" src=" </head> <center> <body> <script type="application/processing"> size(800,600); var x = 400; var t = 5; var hx = 200; var hy = 200; void draw() { background(0,0,255); //mr green grass stroke(0,255,0); strokeWeight(100); line(1200,550,0,550); noStroke(); //mr clouds fill(255,255,255); ellipse(x,100,200,100); fill(200,0,100+random(1,100)); ellipse(x,450,200,100); x=x+t; if(x>900) x = -100; //mr happy fill(255,255,0); ellipse(hx,hy,100,100); fill(0,0,0); ellipse(hx-20,hy-20,10,10); ellipse(hx+20,hy-20,10,10); ellipse(hx+0,hy+15,80,50); rect(hx-40,hy-15,80,30); void keyPressed() { if (keyCode == UP) hy = hy - 20; if (keyCode == DOWN) hy = hy + 20; if (keyCode == LEFT) hx = hx - 20; if (keyCode == RIGHT) hx = hx + 20; </script><canvas tabindex="0" id="__processing3" width="800" height="600" style="image-rendering: -webkit-optimize-contrast !important;"></canvas> <br> size(600, 600); strokeWeight(1); var x = 300; var y = 0; background(255,255,255); //top left part of star stroke(255,0,0); line(x,y+0,300,300); line(x,y+20,280,300); line(x,y+40,260,300); line(x,y+60,240,300); line(x,y+80,220,300); line(x,y+100,200,300); line(x,y+120,180,300); line(x,y+140,160,300); line(x,y+160,140,300); line(x,y+180,120,300); line(x,y+200,100,300); line(x,y+220,80,300); line(x,y+240,60,300); line(x,y+260,40,300); line(x,y+280,20,300); line(x,y+300,0,300); //top right part of star stroke(255,255,0); line(x,y+20,320,300); line(x,y+40,340,300); line(x,y+60,360,300); line(x,y+80,380,300); line(x,y+100,400,300); line(x,y+120,420,300); line(x,y+140,440,300); line(x,y+160,460,300); line(x,y+180,480,300); line(x,y+200,500,300); line(x,y+220,520,300); line(x,y+240,540,300); line(x,y+260,560,300); line(x,y+280,580,300); line(x,y+300,600,300); //bottom left part of star line(x,y+600,300,300); line(x,y+580,320,300); line(x,y+560,340,300); line(x,y+540,360,300); line(x,y+520,380,300); line(x,y+500,400,300); line(x,y+480,420,300); line(x,y+460,440,300); line(x,y+440,460,300); line(x,y+420,480,300); line(x,y+400,500,300); line(x,y+380,520,300); line(x,y+360,540,300); line(x,y+340,560,300); line(x,y+320,580,300); //bottom right part of star stroke(0,0,255); line(x,y+580,280,300); line(x,y+560,260,300); line(x,y+540,240,300); line(x,y+520,220,300); line(x,y+500,200,300); line(x,y+480,180,300); line(x,y+460,160,300); line(x,y+440,140,300); line(x,y+420,120,300); line(x,y+400,100,300); line(x,y+380,80,300); line(x,y+360,60,300); line(x,y+340,40,300); line(x,y+320,20,300); if(x>600) t = -t; if(x<0) t = -t; if (keyCode == LEFT) x = x - 25; if (keyCode == RIGHT) x = x + 25; if (keyCode == UP) y = y - 25; if (keyCode == DOWN) y = y + 25; </script><canvas></canvas> size(400, 800); var keyX = 0; var keyY = 0; var y =100; var x =100; var t = .1; void draw(){ background(100,100,100); //make the yellow lines line(200,y+0,200,y+50); line(200,y+100,200,y+150); line(200,y+200,200,y+250); line(200,y+300,200,y+350); line(200,y+400,200,y+450); line(200,y+500,200,y+550); line(200,y+600,200,y+650); line(200,y+700,200,y+750); line(200,y+800,200,y+850); y = y + 5; if(y>70) y = 0; //car vrooom fill(50,50,50); rect(keyX+x+15,keyY+200,100,30); rect(keyX+x+15,keyY+100,100,30); rect(keyX+x+20,keyY+50,90,200); rect(keyX+x+50,keyY+50,30,200); x = x + t; if(x>8) t = -t; if (keyCode == LEFT) keyX = keyX - 15; if (keyCode == RIGHT) keyX = keyX + 15; if (keyCode == UP) keyY = keyY - 15; if (keyCode == DOWN) keyY = keyY + 15; size(1200,600); var laserOn = false; var laserTimeOut = 20; var timeCount = 0; var by=200; tx = 400; x = 0; background(0,255,255); //tree fill(100,75,0); rect(tx-10,500,25,200); ellipse(tx,475,100,100); tx = tx - 10; if (tx < 0) tx = 1400; //cloud ellipse(tx-250,90,166,127); ellipse(tx-150,100,95,77); ellipse(tx-350,100,95,77); ellipse(tx-350,90,166,127); ellipse(tx-450,100,95,77); //LASERS!!!!! strokeWeight(3); //jet fill(255,0,0); triangle(keyX+x+100,100+keyY,keyX+x+100,300+keyY,keyX+x+300,200+keyY); triangle(keyX+x+200,100+keyY,keyX+x+200,300+keyY,keyX+x+400,200+keyY); fill(255,192,203); triangle(keyX+x+300,100+keyY,keyX+x+300,300+keyY,keyX+x+500,200+keyY); x= x+2; if (x>1200) x = -100; if (keyCode == "32")laserOn = true; </body> </center> Page 1.7.4

Preparing Data Types and Abstractions
Our program upgrade declares a variable called alive and a function called distance. These resources must be available to be used many times. Each time the program updates the screen (many times per second) it uses the data and the abstraction. The definition of these resources should be prepared just ONE time. They will be used many times. Page 1.7.5

The Main Loop Our program is run in a main graphics loop called draw(). It is of data type void because it does not return any information. The draw function is designed to be run many times. The order of the graphics statements changes the program. For example, we set the color of Mr. Happy to yellow and followed it with a conditional to change color to red if !alive (not alive). Page 1.7.6

Quiz Example 1. How can we earn apprentice, practitioner and professional for this project? Apprentice will apply the teacher’s Mr. Happy example to have the avatar respond to collision Practitioner will finish apprentice and apply the teacher’s Baby Star example to have the star respond to collision Professional will finish apprentice and practitioner and change the example to the student’s original graphics Page 1.7.7

Comment the following code to explain what it does in this program
var alive = true; //track if collision hy=mouseY; //draw graphic at mouseY hx=mouseX; //draw graphic at mouseX if (!alive) fill(255,0,0); //color to red if dead if (alive) rect(hx-40,hy-15,80,30); //rect if alive //see if avatar collided with cloud graphic if (distance(hx,hy,x,100)<50) alive = false; Page 1.7.8

App Design Brainstorm ideas for creating an app that will teach people something you know. Page 3.7.1

Divide two journal pages into quarters
Don’t write these directions, DO these directions Each of the 8 corners should contain a sketch/words for what an app screen will look like Page 3.7.2

This slide intentionally left blank – students will have two pages of notes with their paper scaffolding app (don’t write this). Page 3.7.3

Write what you learn about moqups here. Page 3.7.6

Quiz Example Explain what we were required to do for brainstorming.
We brainstormed at least 5 ideas of what we can do to teach some one and then finished filling the page with ideas presented by peers in the class. Explain what we were required to create for paper prototyping We divided 2 pages into quarters for a total of 8 sets of drawings and text describing an app that we are going to create. Page 3.7.7

Explain how the Moqups design is being evaluated for apprentice, practitioner and professional levels. Apprentice: an original design with at least 4 separate app screens shown that partially explain a potential app Practitioner: an original design with at least 8 separate app screens that show a viable app that solves a problem Professional: an interactive set of at least 8 app screens that show a whole solution to a real problem Page 3.7.8

Getting Started With HTML

Similar presentations

Presentation on theme: "Getting Started With HTML"— Presentation transcript:

Similar presentations

About project

Feedback

Log in

Auth with social network:

Getting Started With HTML

Similar presentations

Presentation on theme: "Getting Started With HTML"— Presentation transcript:

Similar presentations

About project

Feedback