TechnoKids News and Blog Posts

8 Coding Tips for Scratch Jr

In Scratch Jr, the Start On Bump block offers an opportunity to make fun action scenes. It also lays the foundation for teaching conditional logic, a cornerstone of computational thinking. Learn about how Start On Bump triggers animated sequences. Afterwards, refer to the helpful coding tips for Scratch Jr. This will allow you to support students when they need to troubleshoot their scripts.

What Is Bumping?

coding tips for scratch jr

Start On Bump is a triggering block that allows the programmer to sequence scripts that are activated when a character touches another character. It can cause a character to say something, grow or shrink, move, play a sound, speed up, or stop. One bump can even cause a chain reaction of succeeding bumps to happen.

Most scenes, stories, or games that students create require characters to interact. Start On Bump is a simple way to introduce cause and effect. It lays the groundwork for the logical thinking required in coding activities. Start On Bump is an ideal precursor to the more advanced programming blocks in Scratch, such as if-then, sensing blocks, and variables. It also provides a foundation for writing code in text-based programming languages such as Python.

Sequence events in Scratch Jr using the coding block Start On Bump.

Random Bumping

A great way to introduce students to conditional logic is to create an animated scene that has random bumping. Games often have objects or characters respond when they contact one another. Using the Start On Bump coding block, a spaceship and an alien can be programmed to fly in two different, continuous action sequences. When they happen to touch by chance, the programmer can code the alien to disappear, change course, say something such as “Got me!”, make a sound, or another creative idea. Find this fun activity in TechnoTales, a coding project using Scratch Jr for primary and elementary grades. It’s the Session 4 Skill Review called Under Attack.

Intentional Bumping

The next step is to have characters bump in an purposeful way. Young programmers can use bumps to tell a story or have actions sequence in a timely, meaningful way. An object can move to another and only when it touches, does the resulting action occur. So a monster can walk to an apple and then eat it. Or in a fairy tale, a princess can ask for help and then run to a wizard who then moves to a dragon and, when he gets there, causes the dragon to fly away.

Use the Start On Bump tool to cause a series of actions to occur.

Coding Tips for Scratch Jr Bumping

Triggering a script to run when characters bump can sometimes be difficult. If the characters do not touch, then no action will occur. Moreover, if the characters touch for too long, often an action will happen too many times.

If the characters do not bump, try these ideas:

Increase the number of steps in a script.
Increase the size of a character.
Change the position of a character on the stage.
Turn on the grid to accurately adjust the number of steps.

If the characters touch too long, try these ideas:

Always have the bumped character move one step to get away from the character that touched it. After that you can add different coding blocks.
Decrease the number of steps in a script.
Decrease the size of a character.
Change the position of a character on the stage.

TechnoTales is a new STEM project by TechnoKids Inc. It includes a Teacher Guide and Student Workbook with coding activities using Scratch Jr. Primary and elementary students in Grades 2-4 follow the illustrated, step-by-step instructions to create a modern fairy tale. They learn how to build scripts to animate the story action. Find these coding tips for Scratch Jr and more in this coding project!

Add a Video Using Google Sites

One sure way to make a website engaging for viewers is to add video content. When creating a page with Google Sites, you can almost seamlessly insert a video using YouTube. A huge and easily searchable website, YouTube is a great resource to find theme appropriate clips to share. Here are a few tips for inserting a video using Google Sites into a web page.

Search YouTube FIRST

video using google sites

When creating a web page using Google Sites, under the Insert tab you’ll find the YouTube tool. You can click it to go directly to a window that allows you to enter keywords to search right in YouTube.

But DON’T! The problem is that you’ll see lots of images of results but won’t be able to preview the actual videos.

Instead, open a new tab in the browser and go to YouTube. THEN enter your keywords and browse through the results. When you find one, view the whole video to critically determine if it is what you’re looking for. Be sure not to post a video that you haven’t thoroughly previewed.

Pick a Short Video

With the proliferation of videos online, it takes a really compelling sample to hold the attention of your audience. Check the length of a video. Try to find a clip that is only a minute or two (or less!) long. Of course some topics require longer explanation, but be aware that your viewers may not watch the whole clip unless it is especially fascinating or unique.

When you have found a video you like, copy the URL.

NOW Search YouTube Using the URL

Return to the browser tab that has your Google Sites web project. Now pick the YouTube tool under the Insert tab. In the dialog box that appears, instead of typing keywords, paste the URL you copied from YouTube.

Paste the copied URL from YouTube into the search box

Click Search. Your video will appear, click on it, and then click Select. That’s how easy it is to add a video using Google Sites.

Format the Video

You can now customize the clip:

Click Settings to choose:
- how you want the controls to appear
- the color of the progress bar
- whether the viewer can see the video full screen in another browser tab or will watch it only on your web page
Drag the video to position it on the page.
Hover over the left side of the video to pick Section Background. Choose an option.

Preview the Web Page

Select the Preview tool and see what the video will look like when it’s published. Remember the nifty responsive design feature of Google Apps – click each of the three options: Phone, Tablet, or Large screen to view the layout on different devices. Now you can again preview the whole video clip if necessary.

Add a YouTube video to engage viewers in your website

TechnoSite Web Design Project for Kids

In TechnoSite students become web designers.

All of these tips to add a video using Google Sites and much more are included in TechnoSite, a web design project designed specifically for teachers of elementary grades. Empower your students with STEM skills as they construct professional looking websites for any curriculum topic, area of interest, sport, or hobby. Everything you need is included: Teacher Guide, Student Workbook, Assessment Tools, Sample Websites, and more! Find out TechnoSite details, view samples, and see the project learning objectives here.

Storytelling and Coding for Beginners

Storytelling and coding are the ideal combination when introducing programming concepts to beginners. If you are teaching a STEM unit with primary or elementary students consider designing an animated story using Scratch Jr. Discover the reasons for blending creative writing with coding activities.

Storytelling is Familiar

The structure of a story is familiar to children. They know a story has a beginning, middle, and end. This knowledge provides a foundation for organizing the scripts into manageable chunks. Student can code the action using separate story pages to animate each event. This can reduce a complex idea into a simple task.

Building Scripts is Similar to Writing Sentences

When students write a story, words are put together to form sentences. When they are read by a person, the sentences explain what is happening. This is similar to building scripts. When students write code, commands or blocks are put together to form a script. When the computer reads the script, it knows what action to do. The similarities provide a foundation for understanding how to sequence commands when coding.

Combine creative writing with building scripts.

Animating a Story is Engaging for Students

Coding a story is fun. In the past, students will have written, illustrated, and read stories. However, they may have never animated one. This task will hold their attention, not only because it is new, but because it is so enjoyable. Building scripts to have characters speak and move will engage even the most reluctant writer. Scratch Jr has a library of backdrops and characters that make it easy to make a story come to life.

Coding Follows the Stages of the Writing Process

Coding an animated story has a similar design process as creative writing. First students plan and organize the story idea. They must select a setting, characters, and plot. Next, they build scripts to tell about the events. The content is edited by debugging the scripts to enhance the quality of the storytelling. Upon completion, students publish the coding project to share with an audience.

Transform Reluctant Writers into Coders

Not all students like to express their ideas using text. Coding provides an opportunity to tell a story by building scripts using blocks. The color-coded blocks are sequenced together to control how a character looks and moves. This is a unique way to transform reluctant writers into storytellers.

Storytelling and Coding Activities for Kids

Are you interested in having your elementary students in Grades 2-4 code an interactive story using Scratch Jr? TechnoTales has detailed instructions that explain how to create a modern fairy tale. Each story page introduces a new coding technique. Helpful resources support learning. The project includes a teacher guide, workbook, example videos, coding block flashcards, assessment tools, and more!

TechnoTales is a technology project that blends storytelling and coding.

Web Design For Kids – Google Sites Features to Love

Web design for kids has never been as easy. Google Sites is an ideal app to construct fun, engaging, and useful websites for use in the classroom. Not only is Google Sites free with a Google account, but the tools are simple to use yet students can create professional looking results. Captivate interest and develop essential skills for the future by making websites with your students.

TechnoSite is an all new TechnoKids project that uses Google Sites to transform students into skilled web designers. In this TechnoKids project, they learn how to build a website that includes links to fun places for kids on the World Wide Web. Here are some of the nifty features that we like about web design for kids with Google Sites.

Insert Unique and Fun Elements

web design for kids

Themes
When starting to make a web page, students can choose a theme. This creates a consistent, professional looking site. The font and color can also be chosen to create a one-of-a-kind design. However, there are a limited number of choices so that students are bogged down in making a decision.
Image Carousel
This ‘gadget’ allows you to use a picture frame that with automatically display multiple images. Simply select two or more pictures and insert them into an image carousel. The website viewer can click the arrows to see each picture or it can be set to loop through the set of pictures automatically.
Layouts
To add text and images, a selection can be made from the Layouts gallery. These preset designs contribute a polished, ‘expert’ look to the website.

Elementary students can make professional looking websites using Google Sites.

Customizable Web Page Banner

The banner at the top of the page can include text and a background image. There is a gallery of designs in Google Sites to choose from, or the web page creator can search for an image. Since it’s tricky to find a simple themed picture that looks great in the short and wide banner space, add the keyword wallpaper to the search term. Google Image Search narrows down the results to more appropriate images for the banner.

Set Navigation Mode

By default, the navigation bar automatically appears at the top right of the banner on the Home Page. Navigation settings can be adjusted to move the bar to the left side of the page. This is convenient if the layout or images look better if the page is narrower or simply if the designer wants to personalize the navigation settings.

Add a Logo to Create an Instant Color Theme

To make the website unique, a small logo can be added at the top left of the banner. Search for a simple small image or upload one to suit the webpage topic. The colors from the logo will be automatically used to produce a custom color theme.

Make Quick and Easy Changes

Want to change the order of the pages in the website? It’s easy: under the Page tab, just drag the pages to set the order you want. The navigation bar automatically adjusts too!

Test Responsive Design

With the extensive variety of devices that are commonly used to view web pages, it’s convenient to be able to preview how the website in different modes. When previewing the page, you can switch to see how it will look on a phone, tablet, and large screen. Compare how the layout changes depending on the screen of the device.

Responsive Design in Google Sites allows you to preview what the layout will look like on a wide screen, tablet, or phone.

Web Design for Kids Made Easy

Certainly Google Sites is an outstanding yet simple and intuitive tool for the classroom. The features are fun and powerful yet allow kids to create and publish projects that they will be eager to share. And TechnoSite is the all new TechnoKids project that empowers kids to build STEM skills using Google Sites. Find out more about TechnoSite here.