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

2. Basic HTML Commands A section of HTML text should start and end with and Inside the should be a and After the and inside the should be a and Large text such as a title or heading should be inside The number can be from 1 to 6 and are used for paragraph text Page 1

3. Ordered lists start and end with and Each list item starts and ends with and An unordered list Is the same as the ordered list except use and will make a nice line across the screen to separate sections has the page display a “break” to make a new line. Use a few of them to make extra blank lines. Page 2

4. Bold Text Italics Text Underlined Text A command creates a division that we can format in a way we choose such as We can change the “center” to “left” or “right” or “justified” to get different placement. Show an image with Paragraph Text Page 2

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

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

7. Quiz Answer First ordered Line Text Second ordered Line Text First Unordered Line Text Second Unordered Line Text Page 4

8. Bold Text Italics Text Underlined Text Heading Text Paragraph Text Page 4

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

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

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

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

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

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

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

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

17. 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 + 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

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

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

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

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

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

23. 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 + 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

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

25. 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. http://www.codecombat.com Page 13

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

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

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

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

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

31. 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: loop: self.moveRight() self.moveDown() self.moveLeft() self.moveUp() Page 16

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

33. 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 section of the page. For example, we can make large, centered, blue text: h1 { text-align: center; font-size: 80px; color: blue; } Page 17 https://thimble.webmaker.org/

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

35. 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 tag and the tag. The tile is the small text on the top of the window, not what is on the page. Page 18

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

37. Precise Coding Each tag has a beginning and an end. Some tags have it built in together such as the tag or the tag. Many designate settings for a section such as and. Avoid shortcuts such as which will work much of the time, but can create problems later. Also, follow the convention of using at the beginning to make our code compatible with more systems. Page 19

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

39. Quiz Answer Title on Top of Window h1 { text-align: center; font-size: 80px; color: blue; } h2 { text-align: center; font-size: 2.5em; color: rgb(255,0,0); } Page 20

40. p { text-align: left; font-size: 150%; color: #0000FF; } Heading Text for an on Page Title Smaller Sub-heading Paragraph text Page 20

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

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

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

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

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

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

47. 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 pen up Page 24

48. 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 move 50 steps turn left 90 move 50 steps Page 24

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

50. 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 (2 nd 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

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

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

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

54. 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. 3.Write a 5 sentence paragraph explaining the chart. 4.Include a screen shot showing the score from the game. Then, summarize the progress made and explain what business strategies enabled success. Page 27

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

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

57. 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: Page 29 Kithgard Dungeon and Backwoods Forest Apprentice – 70% Sarven Desert and Cloudrip Mountain Practitioner – 85% Kelvintaph Glacier and Bonus Level Professional – 100%

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

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

60. I’m Stuck! 1. Look on the web page at http://www.codecombat.com for help, commends and clues. http://www.codecombat.com 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

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

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

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

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

65. 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: (1) Blue. Page 33

66. 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: p { font-size: 200%; color: red; } button {font-size: 100%;} My Quiz Page 33

67. HTML Body Tags In the body, create a paragraph with the 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. Click Here What color? blue red Click Here Page 34

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

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

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

71. Quiz Answer p {font-size: 200%;} button{font-size: 100%;} My Quiz Left Friend Quiz 1 Which statement describes a situation that would reduce the stability of a forest ecosystem? (1) A fierce predator is removed from the ecosystem. Page 36

72. (2) The number of producers remains constant in the ecosystem. (3) Organisms frequently interact within the ecosystem. (4) The energy in the ecosystem flows from the Sun. Right Friend Quiz Page 36