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!
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.
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.
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.
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.
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.
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!
Upon pressing on the gear icon in the top right of your “Me” section, you will be presented with a number of options:
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.
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.
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:
Will log you out of the account you are currently signed into.
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.
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.
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.
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.
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.
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.
This will turn the object clockwise the number of degrees that you fill into the white bubble.
Here is a coded example.
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