All Collections
Online IDE
Using the Sandbox
Creating and Managing Multi-File Programs
Creating and Managing Multi-File Programs

Add, rename, and delete files in HTML, Java, Python, and other supported programs

Jeremy Keeshin avatar
Written by Jeremy Keeshin
Updated over a week ago

The CodeHS Editor allows you to create programs using multiple files. The following programs have multi-file capabilities:

  • Java:

    • Java (main)

    • Java (console)

    • Java Swing

  • Python:

    • Python 3

    • Python 3 (tkinter)

    • Pygame

    • Python 3 Data Science

    • Python 3 Data Science Graphics

  • HTML:

    • HTML

    • WebDev

    • Firebase

  • Other:

    • C++

    • C

    • Swift

    • Scheme


How to Create Multi-File Programs:

Clicking on the file icon on the left-hand side of the editor allows you to create and manage files for your program.

Image showing file list in code editor

Note:

  • Multi-file programs are not supported with all assignment types or in all programming languages. If the icon above is not shown, multi-file functionality is not supported.

  • Files cannot be deleted or renamed while students are using blocks.

  • Uploading a .zip file will unzip and add all files to the program.


About Files in Multi-File Programs

All programs have a main file, which is the file that's run when hitting the Run button in the code editor. This file has its file name displayed in bold. You can change the main file in your program by hovering over the file name and clicking the down arrow > Change to Main File.

Image showing change to main file functionality

Some programs require specific files in order to run. A good rule of thumb is that if a program comes with files already in place, you should not rename or delete them. If you need additional files, you can always add more!


Using the File Tab Bar

By default, you can use the File Tab Bar to easily view different files in the Code Editor. Clicking a file in the file tree will open it in the bar. Click the x to close the file.

If you prefer to only view the files using the file tree, you can disable the File Tab Bar:

  1. Click the gear icon to open the IDE Settings

  2. Click Other

  3. Toggle off the Show File Tab Bar

Gif showing file tab bar on and off

Creating a New File or Folder

To create a new file or folder:

  1. At the top of the file navigation pane, click New +

  2. Choose File or Folder

  3. Enter the name for your new file or folder and click Add Folder or Add File
    Note: If you are adding a new file, remember to include the extension (.html, .java, etc.)

The icon to the left of the file with change depending on the file type.

Shows new file pop-up menu and addition of new file

Renaming a File

To rename a file, click the down arrow next to the file name and choose Rename. Enter the new file name and click Save. Remember to include the extension!

shows rename file pop up menu and typing

Deleting a File

To delete a file, click the down arrow next to the file name and choose Delete. Click OK to confirm that you want to delete the file.

arrow shows deletion of file

Recovering Deleted Files

If you delete a file by mistake, it can be recovered in the History tab in your code editor.

  1. Go to More > History

  2. Select the timestamp you'd like to go back to

  3. Click Restore from Snapshot

Shows recovering deleted file through more and history tab


Using the URL Bar

When creating HTML programs hosted on CodeHS, you can use the URL Bar to navigate and run your programs. The URL Bar replaces the standard Run bar with one for navigating URLs.

To enable the URL Bar:

  1. Click the Gear ⛭ icon in the upper left corner of your editor to access the Editor Settings

  2. Under Other > Code Running Environment, choose Show URL Bar

  3. When running your program, use the bar to view output from the different pages you've created

Note: You may need to view your web page in the pop-out browser for all links to work.

Image showing different files in IDE

Managing Files in HTML Demo

Managing Files in Java Demo

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

Did this answer your question?