The Definitive Guide to Hopscotch

What is Hopscotch?

Hopscotch is a programming language developed by Hopscotch Technologies (The Hopscotch Team or THT), designed to allow beginner programmers to code small projects, games and art! It’s extremely simple, easy to learn and allows its users to drag and drop blocks to create code that can be played at the press of a button.

Why is it called Hopscotch?

It is called Hopscotch, because like the street game, you have to make it before you can play it!

The Team

I do not have permission to post their names and/or images so here is a link to the source of that screenshot where information on The Hopscotch Team can be found

For more information, visit this link.

Welcome to Hopscotch!

This is a short section with information on the Hopscotch menus and interface.

Me

This part of the Hopscotch app can only be accessed by you. It is for your projects, your notifications and your liked projects to easily be accessed as described below.

Drafts

This is where all of your draft projects will go. Anything that you’re working on that isn’t quite ready to be shown to the wonderful Hopscotch community can go here.

Published

The opposite of “Drafts”, the Published menu is where all your online projects can be found. Here you will be able to access them as though you were any other user and any edits you make once a project is published won’t be saved unless it is reposted.

Notifications

Here is where you will find messages or Notifications telling you when your published projects have been liked or when a fellow Hopscotcher has followed you.

thanks @FearlessPhoenix, @tankt2016 & @SilverDolphin

Favorites

Just like how “Notifications” shows you when other people like your posts, Favorites shows you what posts you have liked in the past.

As simple as it sounds!

Settings

Upon pressing on the gear icon in the top right of your “Me” section, you will be presented with a number of options:

Help

When you press on “Help”, you’ll be given the following options:

Watch Video Tutorials

Click this link to be taken to the Hopscotch YouTube Channel where you can learn more about Hopscotch and how to use the app.

Get Help With Hopscotch

If you click this link you will be taken to the website below which is filled with information about different aspects of the Hopscotch app.

Get Help With Account

This will open up an email creation bubble where you can type an email voicing your concerns to THT.

Remember that the more clear and detailed you are, the easier it will be for them to help you and solve your problem.

The Hopscotch Team are always working super hard so please be patient while waiting for them to respond.

Report a Problem

Similarly to “Get Help With Account”, this will open an email template in which you can provide The Hopscotch Team a description of the problem or but you experienced and clear instructions as to recreate it or an explanation of what you were doing leading up to the problem.

About

This will give you a little bubble with some general information about your device and the account you are signed in on. This will vary for everybody so I have not provided a screenshot.

Educator Resources

This isn’t for the majority of the app’s users and is reserved for people who wish to use Hopscotch in an educational / school environment.

Please visit the link through the app if you are an educator or ask any questions you have here. There’s no reason why we can’t teach the teachers.

Subscribe to Hopscotch

Information on the Hopscotch Subscription Service and how to sign up for it. I have provided screenshots below:

Privacy

Log Out

Will log you out of the account you are currently signed into.

Create

The Create button is what you press when you want to start a new project. You will be given three very straightforward options. Even before creating your new draft, Hopscotch’s intuitive and easy-to-learn design choices shine through.

Start from scratch

This will take you to a completely empty version of the Hopscotch editor. You’re on your own here and it’s an excellent place for those who want to try out their own unique code and art projects.

Get started with code

This is the best place to get started learning how to code. Here you will be given a variety of videos that will play on the side of the Hopscotch editor so that you can code along with the video and learn the basic concepts and building blocks that make Hopscotch work. These will be explored in other sections of this guide.

an example of a video playing on the side of the editor

Build a game

Once you know how Hopscotch’s basics function, you can then begin to be guided through the process of piecing together all of the code into a full project / game.

These video tutorials function the same way as the “Get started with code” tutorials in that the video plays on the side of the editor allowing you to code while it plays. Some of the videos are locked for those who have the subscription but there is a wide variety of options making it worth a shot if the free tutorials aren’t enough.

Play

This is where the real magic of the Hopscotch community can be found. Not only can you make and play your own projects, but everyone else’s published projects are right here for you to play.

Featured

The first page you will open to is the “Featured” page which is updated by the @hopscotch-curators. This is where projects are are well made are put so that they can be easily seen and recognised by everyone who logs into the app.

You can nominate a project for Featured in whichever “Nominations for Featured” topics is open.

Search Bar

In the top left corner of the screen there is a magnifying glass or “explore button” which you can press to open up a search bar. Below the search bar, you will notice a number of subcategories including “Featured”.

When you type something into the search bar, the app will give you the option to search for a project or for another Hopscotcher.

here, I searched “pixel art” under projects

in this screenshot, I searched for “KaFeJe” or @KVJ on the forum under Hopscotchers

When you press on somebody’s profile, you are able to see all of their projects, all of their liked projects and you are also able to follow them and see if they are following you.

Blocks

For all coded examples , I have provided a way to adjust all changeable values at the bottom of the screen. Change the value and hit the block to see how it affects the square.

Movement Blocks
Move Forward

When this block is used, the object it affects will increase its X Position by whichever number is filled into it.

Here is a coded example.

Turn

This will turn the object clockwise the number of degrees that you fill into the white bubble.

Here is a coded example.

Set Position

This block is super easy to use, change the X value and the Y value and when it is activated, the object will teleport to that position. Here is a coded example.

Work in progress

28 Likes

First post cool topic

This is helpful!

4 Likes

I hope it will be.

I’m working on “Blocks” atm

2 Likes

no not fair I wanted first post

but Jojo this is seriously awesome, I haven’t seen anything like this! All the tutorials I have seen are for the forum! It’s really original!!

Coolio!

3 Likes

Yeah I was making something like this 2 years ago but I forgot about it until I couldn’t edit it anymore. It only explained blocks though, not the profile

3 Likes

Apparently not.

@GameCodingCrazy123, could you link me to your old topic for inspiration? If yours was nicer or better laid out than mine, I can try to use those elements.

2 Likes

wow, this looks like a really cool and useful topic, jojo!

2 Likes

Ok but it’s not laid out better lol

1 Like

I bet this will be really helpful to new users!

1 Like

Thanks everyone for your support.

4 Likes

Awesome! As others said, I see many forum guides, but there are not really many for Hopscotch.

2 Likes

Thank you!

I just edited in another block.

Do you know of any way that I can get to the bottom of the editor without having to scroll?

There’s a lot of text to scroll through.

1 Like

if your on a computer you can click the j key!

2 Likes

What about on the iPad?

On computer I can just use autoscroll.

1 Like

on a ipad you can use the little scrollie thing that lets you go through posts quickly

aka this one

1 Like

No, I mean to scroll through the editor. Not the topic.

whoops sorry for misunderstanding!

Honestly I don’t think there is a way, sorry!

1 Like

That’s okay. I’ll find a way or just do it manually.

Just added “Set Position”.

1 Like

I love this! I find it especially cool that each folder opens a bunch of new tabs. it’s like the guide is blossoming in front of you!

4 Likes