CEIS 100 Week 6 Lab Assignment Help | Devry University

CEIS 100 Week 6 Lab Assignment Help | Devry University 



Week 6 Lab

HTML and Scratch Programming

 

 

Lab Report
DeVry University
College of Engineering and Information Sciences

Exercise Title:Animation Programming


OBJECTIVES

Get a basic understanding of programming animation.


ASSUMPTIONS

In this lab, you will access Scratch from your Raspberry Pi desktop and create an environment where a character will animate on your screen.

 

 

Part A:

SHORT TUTORIAL

1.      Turn on your Raspberry Pi computers and log in.

 

2.      Use startx to access the desktop.


3.To start Scratch, double click on the Scratch icon image 1.      or select it from the Programs menu at the bottom left of the screen.

4.      The screen is divided into four areas.

·         Stage (top right)

·         Sprite list (bottom right)

·         Scripts Area (tall middle panel)

·         Blocks Palette (left)


image


5.      Sprite List—these are the characters in the game. You can make these characters do things.

 

6.      Blocks Palette—essentially, this is the programming language. These are commands that you can use to animate your sprite.

 

7.      Scripts Area—this is where you create your program. Essentially, it is just a matter of pulling blocks from the Block Palette into this area to create your program.

 

8.      Stage—this is where all of the action takes place.

 

9.      Experimenting with Scratch is quite easy and a lot of fun. Try out different blocks. You can do that by simply clicking on them in the Blocks Palette. For example, if you click on the block “move 10 steps,” you will see your sprite move forward. If your sprite ends in a position on the screen that you don’t want, you can simply mouse over the sprite and move it to another area.

 

10.      Not all blocks will work. Some have to be combined with other blocks. Also, be patient.  There could be a significant lag between clicking on one command and then trying another.

 

11.      Creating a script is easy. Just drag a block from the blocks Palette to the scripts area. You will note that the blocks seem to fit into one another like a puzzle. And you can easily grab one and move it around. Below is a short script that I created. If you read the blocks, it simply.



image


sets the sprite to x position 0 and y position 0 on the screen. The sprite then moves forward 45 steps, turns clockwise 15 degrees, and moves another 45 steps. And so on. By clicking on the “set y to 0” block, the script activates, and I can see the sprite move according to these directions.


 

12.      You can save your work simply by using File and Save As at the top of your screen. You can also create a link. 


PROCEDURE

 

1.      Research the Internet for more information on Scratch.

2.      Create a script that animates two objects on the screen.

Take a screenshot of your game below and share your project online. This will give you a link to share.


Part B

1. Createa website with the Raspberry Pi, showing off your scratch project.

2. In this lab, we will create a simple website with the Pi. We will be using HTML and creating a website to advertise your new scratch game.


Some of the commands that we will use are below (from webmonkeyhttp://www.webmonkey.com/2010/02/html_cheatsheet/ ):

Basic Tags

<html></html> Creates an HTML document

<head></head> Sets off the title and other information that isn’t displayed on the web page itself

<body></body> Sets off the visible portion of the document

Body Attributes

<body bgcolor="pink"> Sets the background color, using name or hex value

<body text="black"> Sets the text color, using name or hex value

<body link="blue"> Sets the color of links, using name or hex value

<body vlink="#ff0000"> Sets the color of followed links, using name or hex value

<body alink="#00ff00"> Sets the color of links on click

Text Tags

<p></p> Creates paragraph text

<hl></hl> Creates the largest headline

<h6></h6> Creates the smallest headline

<b></b> Creates bold text

<i></i> Creates italic text

<tt></tt> Creates teletype, or typewriter-style text

<cite></cite> Creates a citation, usually italic

<em></em> Emphasizes a word (with italic or bold)

<strong></strong> Emphasizes a word (with italic or bold)

<font size="3"></font> Sets size of font, from 1 to 7

<font color="green"></font> Sets font color, using name or hex value

<ul></ul> Creates a bulleted list

<li></li> Precedes each list item, and adds a number or symbol depending upon the type of list selected

<imgsrc="name"> Adds an image

Links

<a href="URL"></a> Creates a hyperlink

<a href="mailto:EMAIL"></a> Creates a mailto link

<a href="URL"><imgsrc="URL"> </a> Creates an image/link

<a name="NAME"></a> Creates a target location within a document

<a href="#NAME"></a> Links to that target location from elsewhere in the document

 

We will start to create a simple website. Turn on your Raspberry Pi. Click on Menu-> Accessories-> Text Editor. This will open the text editor. You can type all of your code in here. Save it in your /home/pi home directory as mywebpage.html.

The example below is about the scratch project that I created. Type the following code into the text editor. Replace "your name" with your name.You will notice that each opening tag also has a closing tag. Be sure that when you are creating your website that you include a closing tag.

<html>

<head>

<title>Your name website</title>

</head>

<body>

<h1>My Scratch Program</h1>

</body>

</html>

 

Save it as mywebpage.html. Open the web browser by going to Menu->Internet->Web Browser. Click on the gear in the upper right-hand corner and choose Open. 

image 


Choose the mywebpage.html.Open the webpage. (Note: On some browsers, pressing ctrl + o will allow you to open a file.)You should see something like the following:


image


Now we want to add some more elements:

We will add paragraph text, change the text color, add bold or italics for emphasis, add a list, a hyperlink, and an image. The image must be in the same directory as the mywebpage.html. We will use the tags listed above to accomplish these tasks.

<html>

<head>

<title>Gina Cooper's website</title>

</head>

<body>

<h1>My Scratch Project</h1>

 

<p>Check out my <b>awesome</b> game that I made with scratch! I thought it would be fun to have a bee chase a cat in scratch, so I added an additional sprite (the bee) and a <font color="orange">desert background.</font></p>

 

<p>In my game, the cat will move around in circles, then move towards the mouse. While it moves, a pen will draw the route. The bee will follow the cat. Hopefully, the cat won't get stung! Here is the link to my project:

<a href= "https://scratch.mit.edu/projects/83947834/"> link</a></p>

 

<ul>Some of the actions in scratch that I chose are:

<li>Repeat loop (5 times)</li>

<li>Forever Loop</li>

<li>Pointing towards the other sprite</li>

</ul>

 

<p>I also took a screenshot of my game, too! I hope that you enjoy playing it! </p>

 

<imgsrc="scratch.png">

</body>

</html>

 

The following image is the web page in the browser. Add in your own information and create your website on the Pi! Take a screenshot using scrot, and paste the code and screenshot below:

image






Answer Detail

Get This Answer

Invite Tutor