Coming to all courses August 31st Changes to Coding IDE Coming to all courses August 31st

Current User Pain Points “Learning” and “doing” areas are cluttered together The disconnect between “Requirements” and “Tests” leaves students asking, “Why did I get this grade?” Students have a poor user-experience when trying to review their grades Settings, Help, and Tools are spread across the IDE, often hidden and not easily accessible. New features result in additional interface complexity

Learning vs. Doing

Currently, the learning process and the doing process are mixed together, resulting in a cluttered interface and experience.

Now, the “learning” environment is displayed only on the left, while the workspace (“doing”) is displayed only on the right.

The student can also quickly jump to “Workspace” mode to fullscreen their work environment.

Tasks and Checks

Step 2 Step 1 Currently, to check their work, the student must first click the Test button to start a test run.

Then, they need to click Codey to open the list of messages Then, they need to click Codey to open the list of messages. They’re often confused as to which message they should click next.

After clicking into the test result message they are shown a list of the test results.

They can then click the test result They can then click the test result. To exit, they need to click Back, then the red X.

Now, the student can view a list of all the goals for their lab from the Tasks list.

They can then click Check Tasks to verify their work and view the results in real time without additional navigation.

Grading and Submission

Step1 Currently, when a student wants to submit their project for a grade, they first have to click the Grade button.

Step 2 Then they need to click Review, but aren’t shown why their current “Requirements” are receiving a specific grade.

Completed task Incomplete task Score Now, the student always sees the score they can submit for a grade in their Task list. The checks being used to validate their work are clearly displayed on each task.

At any time a student can instantly view their previous submissions and get useful project insights using the Review mode.

Settings and Help

In the current interface, when first loading a lab, the student is given no indication as to where to look for help.

Step1 Step 2 Help is buried under the Settings, along with Review Mode, Share, and Download.

In some cases (like a terminal-only lab), they might not be able to see the Settings icon at all.

Now, the Help icon is always accessible at the bottom left of the screen.

As are the settings.

Working with Files

The directory sidebar is still there, too.

And files in “Lite” beginner projects still behave exactly the same.

Codey

If Codey is enabled (the default), he’ll still provide the students feedback when they complete a task.

What is staying the same Lite vs. Full interface Code editor Terminal Web Browser Full GUI Python GUI Installed software Directory sidebar All test logic Instructional content/colors Debugging and linting functionality Embeds/URLs

There’s more… Professional, “Material” design (standardized by Google) Full ADA compliance Customizable Scalable for new features

Summary of Changes

Result “Learning” and “doing” areas are clearly separated “Tasks” and “checks” framework increases transparency of lesson expectations Grade submission and review processes are seamless Settings, help, and tools are accessible at all times