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.
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
- Learn Swift: Introduction to Conditionals uses an Image component to explain the concept of conditionals.
- Fundamental Math for Data Science uses an Image ) to demonstrate a scalar, vector and matrix.