Home

St. Mary's Catholic High School Computing Dept

@StMarysICT

Introduction To Scratch

Created by Andy Colley using reveal.js


Intro to Scratch by Andy Colley is licensed under a Creative Commons Attribution, Share Alike, Non Commercial 4.0 Unported License.

Contents

  1. Sign Up For Scratch
  2. Using The Scratch Site
  3. Output a message
  4. Challenge Tasks
  5. Input and variables 1
  6. Challenge Tasks
  7. Input and variables 2
  8. Challenge Tasks
  9. Selection
  10. Challenge Tasks
  11. Iteration (Loops)
  12. Challenge Tasks

Signing Up For Scratch

Scratch Logo

Before you can use Scratch - you need to set up an account.

Scroll down for a video that will help you.

Not working? Click here for the video.

Prefer to read the instructions? Scroll down instead.

Creating an account

Go to www.scratch.mit.edu

Click on 'Join Scratch'

Can't see the screenshot? Hold down the 'Alt' key and click on the image.

Think of a sensible username that you won't forget.

Choose a secure password that you will also be able to remember.

Fill in your details. Use your school email address.

If you can't remember it, it's surname_forename@st-maryshigh.wigan.sch.uk

Choose United Kingdom for country.

Ready to go!

You are now ready to start your Scratch work.

Use the arrows at the bottom right of this screen to move right to the next task.

Using the Scratch Site

As this might be your first ever go with Scratch, we have made a video to show you how to use the website.

Scroll down to the next page to watch it.

The Scratch Site - Part 1

This video will show you how to create and rename a project.

Not working? Click here for the video.

When you have finished scroll down for the next task.

The Scratch Site - Part 2

This video will show you how to add sprites and backgrounds.

Not working? Click here for the video.

When you have finished scroll down for the next task.

The Scratch Site - Independent Task

Your task is:

  1. Create a new project.
  2. Call it 2. Practice 2
  3. Rename the cat sprite with a suitable name
  4. Add two new sprites, one from library and one you've drawn yourself. Give them suitabe names.
  5. Change the background and give it a suitable name.

Output - Example Task

Hello_Y7

Output - Example Task

This video will show you how to create a basic output program.

Create a new project called Output - Example and follow the steps in the video.

Not working? Click here for the video.

Output - Challenge Tasks

Pick one of these challenges to make.

Create a new project called output challenge and code the program.

Output Challenges

Input & Variables 1 - Example Task

Hello_Sir

Input & Variables 1- Example Task

This video will show you how to use a variable to store what the user types in.

Create a new project called Input - Example 1 and follow the steps in the video.

Not working? Click here for the video.

Input & Variables - Challenge Tasks 1

Pick one of these challenges to make.

Create a new project called input challenge 1 and code the program.

Input Challenges

Input 2 - Example Task

In this example we will use variables to store number and do some maths with them.

Maths

Input & Variables 2- Example Task

This video will show you how work with variables and operators to make your program do some maths.

Create a new project called Input - Example 2 and follow the steps in the video.

Not working? Click here for the video.

Input & Variables - Challenge Tasks 2

Pick one of these challenges to make.

Create a new project called input challenge 1 and code the program.

Input Challenges

Selection - Example Task

In this example we will use selection to make our program run one of two different commands.

Selection

Selection- Example Task

This video will show you how work with the IF .... ELSE block to create aprogram that can deal with different inputs.

Create a new project called Selection - Example and follow the steps in the video.

Not working? Click here for the video.

Selection - Challenge Tasks

Pick one of these challenges to make.

Create a new project called selection challenge and code the program.

Input Challenges

Iteration - Example Task

In this example we will use iteration to make our program repeat some instructions.

Iteration

Iteration- Example Task

This video will show you how work with the IF .... ELSE block to create aprogram that can deal with different inputs.

Create a new project called Iteration - Example and follow the steps in the video.

Not working? Click here for the video.

Iteration - Challenge Tasks

Pick one of these challenges to make.

Create a new project called iteration challenge and code the program.

Iteration Challenges

Themes

Reveal.js comes with a few themes built in:
Default - Sky - Beige - Simple - Serif - Night
Moon - Solarized

* Theme demos are loaded after the presentation which leads to flicker. In production you should load your theme in the <head> using a <link>.

Global State

Set data-state="something" on a slide and "something" will be added as a class to the document element when the slide is open. This lets you apply broader style changes, like switching the background.

Custom Events

Additionally custom events can be triggered on a per slide basis by binding to the data-state name.


Reveal.addEventListener( 'customevent', function() {
	console.log( '"customevent" has fired' );
} );
					

Slide Backgrounds

Set data-background="#007777" on a slide to change the full page background to the given color. All CSS color formats are supported.

Down arrow

Image Backgrounds

<section data-background="image.png">

Repeated Image Backgrounds

<section data-background="image.png" data-background-repeat="repeat" data-background-size="100px">

Background Transitions

Pass reveal.js the backgroundTransition: 'slide' config argument to make backgrounds slide rather than fade.

Background Transition Override

You can override background transitions per slide by using data-background-transition="slide".

Clever Quotes

These guys come in two forms, inline: “The nice thing about standards is that there are so many to choose from” and block:

“For years there has been a theory that millions of monkeys typing at random on millions of typewriters would reproduce the entire works of Shakespeare. The Internet has proven this theory to be untrue.”

Pretty Code


function linkify( selector ) {
  if( supports3DTransforms ) {

    var nodes = document.querySelectorAll( selector );

    for( var i = 0, len = nodes.length; i < len; i++ ) {
      var node = nodes[i];

      if( !node.className ) {
        node.className += ' roll';
      }
    }
  }
}
					

Courtesy of highlight.js.

Intergalactic Interconnections

You can link between slides internally, like this.

Fragmented Views

Hit the next arrow...

... to step through ...

  1. any type
  2. of view
  3. fragments

Fragment Styles

There's a few styles of fragments, like:

grow

shrink

roll-in

fade-out

highlight-red

highlight-green

highlight-blue

current-visible

highlight-current-blue

Spectacular image!

Meny

Export to PDF

Presentations can be exported to PDF, below is an example that's been uploaded to SlideShare.

Take a Moment

Press b or period on your keyboard to enter the 'paused' mode. This mode is helpful when you want to take distracting slides off the screen during a presentation.

Stellar Links

THE END

BY Hakim El Hattab / hakim.se