Skip to content

Image

Description and Purpose

Learning Environment (LE) layout components are different sections within an exercise that might replicate a real-world tool, allow learners to take specific actions in the exercise, or introduce the learners to content in a different format. Depending on which components are used in an exercise, different tests and checkpoint functionality may be available.

An Image component in the LE provides a space for any media, including a static image or GIF. An Image component can stand on its own, on the right side of the narrative and checkpoints, or used in conjunction with other layout components.

Content Location

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

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

Component Selection in Author

To use an Image component in the LE, click “Select Layout” within an Exercise draft in Author and choose from any of the following options:

  • ​​Image: This layout is useful for exercises that require diagrams, static images, or gifs to illustrate a concept.
  • Code Editor, Image: This layout is useful for exercises that pair an explanatory diagram with code that does not need to produce output when run.
  • Terminal, Image: This layout is useful for exercises that require the learner to access the command line and also want to show a diagram or visual.
  • Code Editor, Output Terminal, Image: This layout is useful for exercises that want to show a diagram or visual and require the user to run code.
  • 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.

Fields in Author

URL

Paste the image URL here.

  • Ideally hosted on Codecademy’s CMS and optimized for web.
  • All images linked in this field must be checked in the LE using “Preview” to ensure they are clear and properly visible to the learner. Sometimes PNGs will appear as blurry, but replacing the image with the SVG version will often resolve this issue.
  • Images in lessons should have white text and a transparent background to appear properly on the dark lesson background.

Alt Text

Image alternative text that should follow the guidelines in the diversity, equity, inclusion, & accessibility standards.

  • Be as descriptive as possible. All text in the image should be reflected in the alt text.

Examples