Skip to content

Web Browser

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.

The Web Browser component in the LE provides learners with a real browser through an iframe. It has access to localhost and can be used to view local web pages as well as navigate the files in the workspace. Additionally, this component can also be used to display applets, output a table with data, or output an SVG of a visualization as a result of running some code in the workspace.

Note: Because the Web Browser component relies on an iframe, some websites may not load due to security restrictions, thus it’s important to always confirm that learners are able to access and interact with a site as intended.

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 3 other rectangles labeled narrative, checkpoints, and Web Browser Component.

Component Selection in Author

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

  • Web Browser: This layout is useful for an exercise in which learners will view or go to a web page.
  • 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 view or go to a web page and run commands.
  • Code Editor, Output Terminal, Web Browser: This layout is useful for exercises that expect the learner to run code and see output while also being able to display a website or visualization.
  • 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 webpage. SASS exercises often utilize this layout.
  • 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

URL

URL of the page or file in the workspace to display on initial load.

  • Web pages made locally in the workspace can be accessed at localhost:8000/.
  • Web content in the workspace should be responsive to appeal to various device sizes, as long as the extra code does not impede the purpose of the workspace.
  • All pages linked in this field must be checked in the LE using “Preview” to ensure they are properly viewable in the iframe.

Examples