We the Digital Citizens

Introduction to
Block-based Programming

Open Ended

In your own words, what is programming and briefly explain its importance in the human society?

Word Cloud

Let's create a word cloud by answering the question below:

What word comes to your mind when you hear the word "programming" or "coding"?

​What is Programming?

Computer programming or coding is the act of giving instructions to execute a task correctly.

Poll

Do you have a prior idea/experience in coding?

• Yes

• No

​What is Block-based Coding?

Block-based programming employs a visually intuitive approach where codes are represented by dynamic blocks that you can click and drag.


For our class, we will use the platform called mBlock 5.

Open Ended

​What is mBlock 5?

• It is a software tool for STEAM education to allow students to create engaging stories, games and animations, and program hardware like Makeblock robots, Arduino and micro:bit.

• Allows you to sync programs across the platforms on Web, mobile devices or PC.

• You may type mblock.cc to look it up on the internet.

About the Interface

• Stage Area: You can present your designs, connect devices, set your sprites and backgrounds here.

• Blocks Area: You can find the blocks you need by category and color in Blocks area.

• Scripts Area: You can program in the Scripts area by dragging blocks to this area.

• Menu: In this area, you can change the language, open and save files, go to Example Programs and Help.

Red: Stage Area Green: Blocks Area Blue: Scripts Area Yellow: Menu

Create your "Stage"

• In stage programming, you can add backdrops, costumes, and sounds for a stage. In addition, you can design your own sprites.

  
  

What is a "Sprite?"

• Sprites are objects on the stage. You can operate a sprite by programming it.

• On mBlock 5, device programming is separate from stage programming.

• Click the Sprites tab to start stage programming.

How to Add a Sprite

• Click the Sprites tab and click + add.

How to Add a Sprite

• If no sprite in the sprite library interests you, you can paint or upload your own sprite. In the Sprite Library page that appears, you can see Upload and Paint at the top.

How to Upload a Sprite

• Click Upload and select a file from the local disk in the window that appears.

• Note: Currently, only JPG, PNG, and SVG files with a maximum size of 2 MB can be uploaded.

How to Draw Your Own Sprite

• Click Paint.

• Draw your Sprite (in our example, it's a house)

• Name the sprite house, draw the first costume for it, and name the costume normal, as shown in the following figure.

Multiple Choice

Which version of mBlock are we going to use in our class?

• Scratch 2.0

• mBlock 3.0

• mBlock 4.0

• mBlock 5.0

Multiple Choice

Which among the following is NOT a part of the mBock interface?

• Blocks

• Ribbon

• Stage

• Script

Multiple Choice

What is the default Sprite in mBlock 5?

• Cat

• Robotic Car

• Panda

• A Person

Open Ended

In your own opinion, why is it important to learn how to program or create a code? How is it related to Robotics? How can it help the human society?