Skip to main content

CodeHop: CodeHopJr Interface Guide

Check out these comprehensive guides to effortlessly navigate CodeHopJr!

Written by Sara Jenis
Updated over 2 weeks ago
Banner: CodeHop License Required

Level up your CodeHopJr skills with these handy Interface and Paint Editor Guides! These resources are packed with helpful information to make the most of the editing tools in our ScratchJr-based platform.

Interface Guide

The Interface Guide provides step-by-step instructions on navigating CodeHopJr’s layout, programming blocks, and characters.

💡 View the printable version of the ScratchJr Interface Guide in English or Spanish for easy classroom reference.

What’s Covered in the Interface Guide?

Project Controls

  • Save – Save the current project and exit to the Home page

  • Presentation Mode – Expand the stage to full screen

  • Undo / Redo – Reverse recent actions

Stage & Layout Tools

  • Stage – Where the action takes place (press and hold a character to delete)

  • Grid – Toggle the x-y coordinate grid on or off

  • Change Background – Select or create a stage background

  • Add Text – Add titles and labels

  • Reset Characters – Return characters to their starting positions

Pages & Navigation

  • Pages – Add, delete, or reorder project pages (each page has its own characters and background)

Programming Tools

  • Programming Area – Connect blocks to create scripts

  • Blocks Palette – Drag blocks into the programming area

  • Block Categories

    • Triggering (Yellow)

    • Motion (Blue)

    • Looks (Purple)

    • Sounds (Green)

    • Control (Orange)

    • End Blocks (Red)

  • Green Flag – Start all scripts that begin with a “Start on Green Flag” block

Characters

  • Add, rename, edit, duplicate, move, or delete characters

  • Tap the paintbrush icon to edit a character’s image

  • Drag characters between pages

Encourage students to review the Interface Guide before beginning a new project to build a better understanding of the tools and familiarity navigating the page.

Paint Editor Guide

The Paint Editor Guide helps students create custom backgrounds and characters in CodeHopJr.

💡 View the printable version of the ScratchJr Paint Editor Guide is available in English or Spanish.

What’s Covered in the Paint Editor Guide?

Editing Tools

  • Undo / Redo – Reverse recent changes

  • Cut – Remove a selected shape or character

  • Duplicate – Create a copy

  • Rotate – Rotate around the center

  • Drag – Move and resize shapes

Drawing Tools

  • Shape Tool – Line, circle/ellipse, rectangle, triangle

  • Fill – Fill shapes with selected color

  • Color – Choose drawing and fill colors

  • Line Width – Adjust thickness of lines

Advanced Tools

  • Camera – Fill shapes with a photo

  • Character Name – Edit the character’s name

  • Save – Save changes and exit the Paint Editor

Directing students to the Paint Editor Guide before creative projects can help them better understand design tools and reduce classroom troubleshooting time.


CodeHop Curriculum is included with a CodeHop License. If you believe you should have access to the CodeHop Platform, please reach out to your Customer Success Manager, or send an email to sales@codehs.com.

Did this answer your question?