Skip to content

Code Editor

Description and Purpose

Learning Environment (LE) layout components are interactive modules that typically replicate a real-world tool and allow learners to take specific actions in the exercise. Depending on which components are used in an exercise, different tests and checkpoint functionality may be available.

A Code Editor is an LE layout component that can contain and interpret code for any programming language or framework supported in the LE (Python, Kotlin, Ruby, Ruby on Rails, and more). The programming language selected for the workspace type is the language that code should be written in within the Code Editor.

Note: A Code Editor should render syntax highlighting for the language or framework it supports. If the syntax highlighting is incorrect, flag this to your production team.

Content Location

This is a Layout Component that can be added to an exercise in a lesson, a project, or a code challenge assessment.

An exercise, represented as a rectangle, contains four other rectangles labeled narrative, checkpoints, Code Editor, and Output Terminal.

Component Selection in Author

To use a Code Editor in the LE, click “Select Layout” and choose from any of the following options:

  • Code Editor: This layout is useful for exercises that require users to code without expecting them to see any output when running the code.
  • Code Editor, Image: This layout is useful for exercises that want to show a diagram or visual and also require users to code without expecting them to see any output when running the code.
  • Code Editor, Output Terminal: This layout is useful for exercises that expect output to a console when code is run.
  • Code Editor, SQL Preview: This layout is useful for exercises that require the user to see the results of a SQL query. The SQL Preview component displays both the output of a SQL query, as well as the schema of the tables queried. This will use a SQLite database and sqlite files.
  • Code Editor, Terminal: This layout is useful for exercises that require the user to type commands into the command line and write code.
  • Code Editor, Web Browser: This layout is useful for exercises that teach web development as well as exercises where an image is the expected output of running code (e.g. Numpy, Pandas, Matplotlib).
  • Terminal, Web Browser: This layout is useful for exercises that require the user to access the command line and view or go to a web page.
  • Code Editor, Output Terminal, Web Browser: This layout is useful for exercises that expect the user to run code and see the output while also being able to display a web page or visualization.
  • Code Editor, Read-Only Code Editor, Output Terminal: This layout is useful for exercises that output compiled code into another code file and additionally produce relevant output to the console.
  • Code Editor, Read-Only Code Editor, Terminal: This layout is useful for exercises that output compiled code into another code file and additionally require the user to run commands.
  • Code Editor, Read-Only Code Editor, Web Browser: This layout is useful for exercises that output compiled code into another code file and need to show a website. A lot of SASS exercises use this.
  • Code Editor, Terminal, Image: This layout is useful for exercises that expect the user to write code, run commands, and also want to show a diagram or visual.
  • ​​Code Editor, Output Terminal, Terminal: This layout is most useful for exercises that expect the user to write code, run commands directly, and see standard output on behind-the-scenes build steps that happen when the “Run” button is clicked.
  • Code Editor, Terminal, Web Browser: This layout is useful for web development or data science exercises that require learners to write or run code, run commands, and see a website or visualization.

Fields in Author

Default Files

The files specified here are opened as tabs by default in the Code Editor. The order the files appear in the list will be the order in which the tabs show in the editor.

Add File + Button

This button will create a new field that will allow a new file to be added to the list of default files.

  • Necessary, but not relevant code (for example, a dataset or CSS file), should be hidden from the learner.

File Name Input Field

Input the name of the file you want to appear.

  • The filename must follow the naming conventions for that workspace type. For example, a JavaScript file should contain the .js extension with a name that’s all lowercase.
  • The file must have the proper folder and file extensions. This means prepending directory names (i.e. views/filename.html)) and appending file extensions (script.py) as necessary.
  • All files listed must be checked in the LE using “Preview” to ensure they are properly visible to the learner. If a file location is listed incorrectly in the list of default files, an error popup will appear for the learner.

Delete Button

This button appears as a red trash can. Press this button to delete the file from the list of default files.

Disable Navigator

When this setting is turned on, learners cannot see the file navigator. The file navigator exposes the folder structure and files of the workspace and allows learners to create new files or directories.

Enable Autosave

When turned on, Code Editor will not have a "Run" button and will save learner changes automatically.

  • If using a Terminal as well, enabling this setting and the Terminal’s “Prevent Triggering Checkpoints After Commands” settings will cause a “Check Work” button to replace the “Run” button. In this case, the “Check Work” button must be used by the learner to run any checkpoint tests.

Examples