Skip to Content
Article

The Learning Environment

Onboarding doc

What is the Learning Environment (LE)?

The LE, sometimes referred to as the Platform in code, refers to the parts of the site learners interact with while learning. That includes:

When we refer to the LE, we’re most likely discussing the Lesson Exercises section, as its code evaluation services are the most complex part of the site by far.

Lesson Screenshot

Tech Stack

Backend

The Rails server uses the learning_environment/platform_controller to:x

  • Bootstrap the data needed for the LE frontend, including (in some cases) all necessary content items on initial load
  • Render the initial view

The Rails server also does these things:

  • Provide endpoints for recording learner progress (also done through quiz and project controllers)
  • Handle some operations with workspaces on S3 via Management Service (see below)

Frontend

The PlatformRouter routes to scenes on the frontend. It:

  • Contains the route components for each type of content container (program, path, course) which render common views for each content item type

  • Provides a Redux store with actions to update progress, navigate through courses, and run tests against learner code

    Some very old parts of the LE still use Reflux and Mixins… which we are trying to get rid of!

Workspaces

  • Workspace: Folder tarball stored in S3. May contain code, images, database files, and libraries.
  • Initial Savepoint: Workspace associated to an exercise. This is the filesystem a learner gets when opening an exercise in the LE. Workspaces can be associated to multiple exercises.
  • Final Savepoint: For exercises that have a ‘solution’ learners may snap to, this is the workspace that gets populated upon clicking that button.
  • User Workspace: Clone of the default workspace on which the learner makes changes.

How are Exercises Loaded?

  1. Determine current lesson and exercise based on the route

  2. Build exercise grid layout based on the content “components” defined in the exercise data

  3. Render the initial disconnected view

  4. Create a websocket connection to the user’s backend container

  5. Fetch the S3 read/write urls for the user’s workspace for the exercise (the files the user works with in the code editor) and send them to the backend container.

  6. The backend container then fetches the workspace contents from S3, inflates the tarball and saves the files to its file system, and sends the file contents to the LE.

  7. Populate the component grid with data:

    e.g: List of files for the file navigator, and the content for the initial file for the code editor

  8. Enable the LE (show connected status)

Connecting to Code Evaluation

At the root of code evaluation messaging on the client is the WorkspaceStore: A Reflux store that holds a reference to the current code evaluation interface: a WorkshopWorkspaceInterface.

That interface maintains the websocket connection using the workshop-client library.

We’ve recently been adding in a redux-saga version that will eventually replace Reflux.

The purpose of all of this is to link the Learning Environment in the user’s browser to a Docker container in the backend. This container is created and started specifically for this user’s session, and it is destroyed after an hour has elapsed, or the user has been inactive for 10 minutes (whichever comes first).

The files that the user edits in the LE code editor are actually stored, updated, and executed in the file system of that Docker container. The container can also do things like compile code, run unit tests, serve files, run a Rails development server, and simulate a database using SQLite.

For more on how this system works, see the Code Evaluation System onboarding.

Assessments

Beyond traditional Exercise-based code evaluation, the LE also has interactive portions where learners can practice knowledge. These come in three forms:

  • Code Challenges

Ready to Learn More?

Find the course that's right for you! Explore our catalog or get a recommendation.