Banner: This is a Free Feature

The Code Editor, or IDE (Integrated Development Environment), is where students will go to write their programs! Students can write code, run code, check code, reset their code, change font size, view assignment details, access help documents, correspond with teachers and share their program. 

From a teacher view you can go to the Code Editor to check student code, view solutions, view help documents, code history, download programs and view grades.  

Screenshot of the navigation tabs in the Code Editor, including Output, Test Cases, Docs, Assignment, Grade and More.

View Documents in Code Editor

If you are on any editor page on CodeHS, we provide a handy "Docs" tab to give you a quick reference to information you may need to finish your program. To find the docs, just click the "Docs" tab on the right side of the screen.

Screenshot of the Code Editor with the Docs tab highlighted

View Code History

The Code History tab is a way for teachers and students to see all of the changes and revisions that have been made to a certain program with a timestamp, and allows you to revert a program to any previously saved version.  It is accessible on any exercise page under the More > History tabs in the top right corner.

Screenshot of the Code Editor with the Code History tab highlighted

The History tab is a great tool to aid in cheat detection, as teachers can assume that exercises (particularly more complex exercises) that are solved in very few code runs/saves are often attributable to borrowed or copied code. 

Actions that cause an entry to be created in the History tab

  1. Student runs code

  2. Student clicks save

  3. Student pastes text in the editor

  4. It's been a minute and none of things have happened but the code has changed

View Grades

Students can view their grades directly from the Grade Tab. As a teacher you can also award credit to students from the Grade Tab.  See Grading Single Assignments for more info.

Print Your Code

You can print your code by clicking More > Print. After you click the blue Print button, a new page will open up, nicely formatted for printing and pop up a dialog to print it out.

Share Your Program

You can share your program by clicking More > Share. You can then click the “Create Share Link” button, and instantly have a link to send to others for them to run your program.

An option on the Share Tab is whether the share link is “Active.” If you change your mind about sharing your program and don’t want other people to be able to visit the share link, you can toggle the “Active” switch to Off. As the author, you will still be able to view that shared program page, but no one else can.

GIF shows using right hand tabs in code editor to send messages and access resources

Managing Files

Some program types allow you to use create and use multiple files in your program. Read more about managing multi-file programs here.

Screenshot of multi-file program management window in the Code Editor

Editor Settings

Students can change their default Code Editor settings. To access the settings, clicking the gear icon in the upper left corner of any editor.

  • Editor Font: adjusts the font size of the student's code

  • Console Font: adjusts the font size of the console on the right

  • Editor Theme: allows students to change the color scheme of the Code Editor to a higher contrast theme, such as Terminal or Monokai

  • Console Theme: change the output console to Light or Dark Mode

  • Autocomplete: automatically adds closing brackets while typing code

  • Blocks/Text Settings: toggle block coding

  • Wrap Lines: separates lines of code so that they are fully visible within the editor window

Gif of editor and console settings
Gif showing Karel Program editor settings

Navigating Assignments in the Code Editor

Use the bottom navigation bar in the Code Editor to navigate to other assignments in your current Module or to return home to your Assignments page.

  • Use the home icon to return to your Assignments page for this course

  • Click the Module name to view all of the Lessons and Activities in the current Module

  • Expand a Lesson to view and navigate to an assignment.

    This gif shows how to use the bottom navigation bar to view a list of lessons and assignments and navigate to an assignment.

Code Editor SettingsVideo Demo

View the Using the IDE CodeHS Webinar to learn more.

Still have questions? Contact our team at hello@codehs.com to learn more!

Did this answer your question?