diff --git a/src/actions/__tests__/workspaces.ts b/src/actions/__tests__/workspaces.ts
index d9f9545400..a25d00e5b7 100755
--- a/src/actions/__tests__/workspaces.ts
+++ b/src/actions/__tests__/workspaces.ts
@@ -106,11 +106,13 @@ test('changeSideContentHeight generates correct action object', () => {
 
 test('chapterSelect generates correct action object', () => {
   const chapter = 3;
-  const action = chapterSelect(chapter, playgroundWorkspace);
+  const variant = 'default';
+  const action = chapterSelect(chapter, variant, playgroundWorkspace);
   expect(action).toEqual({
     type: actionTypes.CHAPTER_SELECT,
     payload: {
       chapter,
+      variant,
       workspaceLocation: playgroundWorkspace
     }
   });
diff --git a/src/actions/workspaces.ts b/src/actions/workspaces.ts
index e8ed4676aa..0e98afbc1a 100755
--- a/src/actions/workspaces.ts
+++ b/src/actions/workspaces.ts
@@ -1,5 +1,6 @@
 import { action } from 'typesafe-actions';
 
+import { Variant } from 'js-slang/dist/types';
 import { ExternalLibraryName, Library } from '../components/assessment/assessmentShape';
 import { IPosition } from '../components/workspace/Editor';
 import { IWorkspaceState, SideContentType } from '../reducers/states';
@@ -46,9 +47,14 @@ export const changeExecTime = (execTime: string, workspaceLocation: WorkspaceLoc
 export const changeSideContentHeight = (height: number, workspaceLocation: WorkspaceLocation) =>
   action(actionTypes.CHANGE_SIDE_CONTENT_HEIGHT, { height, workspaceLocation });
 
-export const chapterSelect = (chapter: number, workspaceLocation: WorkspaceLocation) =>
+export const chapterSelect = (
+  chapter: number,
+  variant: Variant,
+  workspaceLocation: WorkspaceLocation
+) =>
   action(actionTypes.CHAPTER_SELECT, {
     chapter,
+    variant,
     workspaceLocation
   });
 
diff --git a/src/components/Application.tsx b/src/components/Application.tsx
index 42062cdf0d..043833c1ad 100644
--- a/src/components/Application.tsx
+++ b/src/components/Application.tsx
@@ -9,18 +9,21 @@ import Material from '../containers/material/MaterialContainer';
 import MissionControlContainer from '../containers/missionControl';
 import Playground from '../containers/PlaygroundContainer';
 import Sourcecast from '../containers/sourcecast/SourcecastContainer';
-import { Role, sourceChapters } from '../reducers/states';
+import { languageURLNames, Role } from '../reducers/states';
 import { stringParamToInt } from '../utils/paramParseHelpers';
 import { ExternalLibraryName, ExternalLibraryNames } from './assessment/assessmentShape';
 import Contributors from './contributors';
 import NavigationBar from './NavigationBar';
 import NotFound from './NotFound';
 
+import { Variant } from 'js-slang/dist/types';
+
 export interface IApplicationProps extends IDispatchProps, IStateProps, RouteComponentProps<{}> {}
 
 export interface IStateProps {
   accessToken?: string;
   currentPlaygroundChapter: number;
+  currentPlaygroundVariant: Variant;
   role?: Role;
   title: string;
   name?: string;
@@ -28,7 +31,11 @@ export interface IStateProps {
 }
 
 export interface IDispatchProps {
-  handleClearContext: (chapter: number, externalLibraryName: ExternalLibraryName) => void;
+  handleClearContext: (
+    chapter: number,
+    variant: Variant,
+    externalLibraryName: ExternalLibraryName
+  ) => void;
   handleEditorValueChange: (val: string) => void;
   handleEditorUpdateBreakpoints: (breakpoints: string[]) => void;
   handleEnsureLibrariesLoaded: () => void;
@@ -90,12 +97,13 @@ const toLogin = (props: IApplicationProps) => () => (
 const parsePlayground = (props: IApplicationProps) => {
   const prgrm = parsePrgrm(props);
   const chapter = parseChapter(props) || props.currentPlaygroundChapter;
+  const variant = parseVariant(props) || props.currentPlaygroundVariant;
   const externalLibraryName = parseExternalLibrary(props) || props.currentExternalLibrary;
   const execTime = parseExecTime(props);
   if (prgrm) {
     props.handleEditorValueChange(prgrm);
     props.handleEnsureLibrariesLoaded();
-    props.handleClearContext(chapter, externalLibraryName);
+    props.handleClearContext(chapter, variant, externalLibraryName);
     props.handleExternalLibrarySelect(externalLibraryName);
     props.handleSetExecTime(execTime);
   }
@@ -112,8 +120,24 @@ const parsePrgrm = (props: RouteComponentProps<{}>) => {
 
 const parseChapter = (props: RouteComponentProps<{}>) => {
   const chapQuery = qs.parse(props.location.hash).chap;
-  const chap = chapQuery === undefined ? NaN : parseInt(chapQuery, 10);
-  return sourceChapters.includes(chap) ? chap : undefined;
+
+  const chap: number = languageURLNames.has(chapQuery)
+    ? languageURLNames.get(chapQuery)!.chapter
+    : chapQuery === undefined
+    ? NaN
+    : parseInt(chapQuery, 10);
+
+  return chap ? chap : undefined;
+};
+
+const parseVariant = (props: RouteComponentProps<{}>) => {
+  const chapQuery = qs.parse(props.location.hash).chap;
+
+  const variant: Variant = languageURLNames.has(chapQuery)
+    ? languageURLNames.get(chapQuery)!.variant
+    : 'default';
+
+  return variant;
 };
 
 const parseExternalLibrary = (props: RouteComponentProps<{}>) => {
diff --git a/src/components/Playground.tsx b/src/components/Playground.tsx
index fae7958ec9..74a40ac452 100755
--- a/src/components/Playground.tsx
+++ b/src/components/Playground.tsx
@@ -5,6 +5,7 @@ import * as React from 'react';
 import { HotKeys } from 'react-hotkeys';
 import { RouteComponentProps } from 'react-router';
 
+import { Variant } from 'js-slang/dist/types';
 import { InterpreterOutput, SideContentType } from '../reducers/states';
 import { LINKS } from '../utils/constants';
 import { ExternalLibraryName, ExternalLibraryNames } from './assessment/assessmentShape';
@@ -70,6 +71,7 @@ export interface IStateProps {
   sharedbAceInitValue: string;
   sharedbAceIsInviting: boolean;
   sourceChapter: number;
+  sourceVariant: Variant;
   websocketStatus: number;
   externalLibraryName: string;
   usingSubst: boolean;
@@ -80,7 +82,7 @@ export interface IDispatchProps {
   handleBrowseHistoryDown: () => void;
   handleBrowseHistoryUp: () => void;
   handleChangeExecTime: (execTime: number) => void;
-  handleChapterSelect: (chapter: number) => void;
+  handleChapterSelect: (chapter: number, variant: Variant) => void;
   handleDeclarationNavigate: (cursorPosition: IPosition) => void;
   handleEditorEval: () => void;
   handleEditorHeightChange: (height: number) => void;
@@ -151,7 +153,10 @@ class Playground extends React.Component<IPlaygroundProps, PlaygroundState> {
       />
     );
 
-    const chapterSelectHandler = ({ chapter }: { chapter: number }, e: any) => {
+    const chapterSelectHandler = (
+      { chapter, variant }: { chapter: number; variant: Variant },
+      e: any
+    ) => {
       if (
         (chapter <= 2 && this.state.hasBreakpoints) ||
         this.state.selectedTab === SideContentType.substVisualizer
@@ -162,12 +167,13 @@ class Playground extends React.Component<IPlaygroundProps, PlaygroundState> {
         this.props.handleReplOutputClear();
         this.props.handleUsingSubst(false);
       }
-      this.props.handleChapterSelect(chapter);
+      this.props.handleChapterSelect(chapter, variant);
     };
     const chapterSelect = (
       <ChapterSelect
         handleChapterSelect={chapterSelectHandler}
         sourceChapter={this.props.sourceChapter}
+        sourceVariant={this.props.sourceVariant}
         key="chapter"
       />
     );
diff --git a/src/components/__tests__/Application.tsx b/src/components/__tests__/Application.tsx
index 7d8cc40d8f..a07d9a432e 100644
--- a/src/components/__tests__/Application.tsx
+++ b/src/components/__tests__/Application.tsx
@@ -5,14 +5,21 @@ import { mockRouterProps } from '../../mocks/components';
 import Application, { IApplicationProps } from '../Application';
 import { ExternalLibraryName, ExternalLibraryNames } from '../assessment/assessmentShape';
 
+import { Variant } from 'js-slang/dist/types';
+
 test('Application renders correctly', () => {
   const props: IApplicationProps = {
     ...mockRouterProps('/academy', {}),
     title: 'Cadet',
     currentPlaygroundChapter: 2,
+    currentPlaygroundVariant: 'default',
     handleLogOut: () => {},
     currentExternalLibrary: ExternalLibraryNames.NONE,
-    handleClearContext: (chapter: number, externalLibraryName: ExternalLibraryName) => {},
+    handleClearContext: (
+      chapter: number,
+      variant: Variant,
+      externalLibraryName: ExternalLibraryName
+    ) => {},
     handleEditorValueChange: (val: string) => {},
     handleEditorUpdateBreakpoints: (breakpoints: string[]) => {},
     handleEnsureLibrariesLoaded: () => {},
diff --git a/src/components/__tests__/Playground.tsx b/src/components/__tests__/Playground.tsx
index 98f279e917..af451d2b3c 100755
--- a/src/components/__tests__/Playground.tsx
+++ b/src/components/__tests__/Playground.tsx
@@ -1,6 +1,7 @@
 import { shallow } from 'enzyme';
 import * as React from 'react';
 
+import { Variant } from 'js-slang/dist/types';
 import { SideContentType } from 'src/reducers/states';
 import { mockRouterProps } from '../../mocks/components';
 import { ExternalLibraryName, ExternalLibraryNames } from '../assessment/assessmentShape';
@@ -22,6 +23,7 @@ const baseProps = {
   sharedbAceIsInviting: false,
   sideContentHeight: 40,
   sourceChapter: 2,
+  sourceVariant: 'default' as Variant,
   externalLibraryName: ExternalLibraryNames.NONE,
   output: [],
   replValue: '',
diff --git a/src/components/assessment/assessmentShape.ts b/src/components/assessment/assessmentShape.ts
index b8b731bf84..ef801ba028 100644
--- a/src/components/assessment/assessmentShape.ts
+++ b/src/components/assessment/assessmentShape.ts
@@ -1,4 +1,4 @@
-import { SourceError } from 'js-slang/dist/types';
+import { SourceError, Variant } from 'js-slang/dist/types';
 
 /*
  * Used to display information regarding an assessment in the UI.
@@ -166,6 +166,7 @@ type ExternalLibrary = {
 
 export type Library = {
   chapter: number;
+  variant?: Variant;
   external: ExternalLibrary;
   globals: Array<{
     0: string;
diff --git a/src/components/missionControl/editingWorkspaceSideContent/DeploymentTab.tsx b/src/components/missionControl/editingWorkspaceSideContent/DeploymentTab.tsx
index dd2a327701..b5e6e95fbe 100644
--- a/src/components/missionControl/editingWorkspaceSideContent/DeploymentTab.tsx
+++ b/src/components/missionControl/editingWorkspaceSideContent/DeploymentTab.tsx
@@ -3,7 +3,7 @@ import { IconNames } from '@blueprintjs/icons';
 import { ItemRenderer, Select } from '@blueprintjs/select';
 import * as React from 'react';
 import { externalLibraries } from '../../../reducers/externalLibraries';
-import { sourceChapters } from '../../../reducers/states';
+import { sourceLanguages, styliseChapter } from '../../../reducers/states';
 
 import { ExternalLibraryName, IAssessment, Library } from '../../assessment/assessmentShape';
 import { controlButton } from '../../commons';
@@ -11,6 +11,8 @@ import { emptyLibrary } from '../assessmentTemplates';
 import { assignToPath, getValueFromPath } from './';
 import TextareaContent from './TextareaContent';
 
+import { Variant } from 'js-slang/dist/types';
+
 interface IProps {
   assessment: IAssessment;
   label: string;
@@ -120,7 +122,7 @@ export class DeploymentTab extends React.Component<IProps, {}> {
         <Divider />
         Interpreter:
         <br />
-        {chapterSelect(deployment.chapter, this.handleChapterSelect)}
+        {chapterSelect(deployment.chapter, deployment.variant, this.handleChapterSelect)}
         <Divider />
         {symbolsFragment}
         <Divider />
@@ -240,14 +242,15 @@ const altEval = (str: string): any => {
   return Function('"use strict";return (' + str + ')')();
 };
 
-function styliseChapter(chap: number) {
-  return `Source \xa7${chap}`;
-}
-
-const chapters = sourceChapters.map(chap => ({ displayName: styliseChapter(chap), chapter: chap }));
+const chapters = sourceLanguages.map(lang => ({
+  chapter: lang.chapter,
+  variant: lang.variant,
+  displayName: styliseChapter(lang.chapter, lang.variant)
+}));
 
 const chapterSelect = (
   currentChap: number,
+  variant: Variant = 'default',
   handleSelect = (i: IChapter, e: React.ChangeEvent<HTMLSelectElement>) => {}
 ) => (
   <ChapterSelectComponent
@@ -259,7 +262,7 @@ const chapterSelect = (
   >
     <Button
       className={Classes.MINIMAL}
-      text={styliseChapter(currentChap)}
+      text={styliseChapter(currentChap, variant)}
       rightIcon={IconNames.DOUBLE_CARET_VERTICAL}
     />
   </ChapterSelectComponent>
diff --git a/src/components/sourcecast/Sourcecast.tsx b/src/components/sourcecast/Sourcecast.tsx
index 50fc66557d..e530d7b429 100755
--- a/src/components/sourcecast/Sourcecast.tsx
+++ b/src/components/sourcecast/Sourcecast.tsx
@@ -3,6 +3,7 @@ import { IconNames } from '@blueprintjs/icons';
 import * as classNames from 'classnames';
 import * as React from 'react';
 
+import { Variant } from 'js-slang/dist/types';
 import { InterpreterOutput, SideContentType } from '../../reducers/states';
 import { ExternalLibraryName } from '../assessment/assessmentShape';
 import Workspace, { WorkspaceProps } from '../workspace';
@@ -57,6 +58,7 @@ export interface IStateProps {
   sideContentHeight?: number;
   sourcecastIndex: ISourcecastData[] | null;
   sourceChapter: number;
+  sourceVariant: Variant;
 }
 
 export interface IDispatchProps {
@@ -140,6 +142,7 @@ class Sourcecast extends React.Component<ISourcecastProps> {
       <ChapterSelect
         handleChapterSelect={chapterSelectHandler}
         sourceChapter={this.props.sourceChapter}
+        sourceVariant={this.props.sourceVariant}
         key="chapter"
       />
     );
diff --git a/src/components/sourcecast/Sourcereel.tsx b/src/components/sourcecast/Sourcereel.tsx
index 28c5b14aa1..8650e6a8b1 100755
--- a/src/components/sourcecast/Sourcereel.tsx
+++ b/src/components/sourcecast/Sourcereel.tsx
@@ -3,6 +3,7 @@ import { IconNames } from '@blueprintjs/icons';
 import * as classNames from 'classnames';
 import * as React from 'react';
 
+import { Variant } from 'js-slang/dist/types';
 import { InterpreterOutput, SideContentType } from '../../reducers/states';
 import { ExternalLibraryName } from '../assessment/assessmentShape';
 import Workspace, { WorkspaceProps } from '../workspace';
@@ -52,6 +53,7 @@ export interface IStateProps {
   sideContentHeight?: number;
   sourcecastIndex: ISourcecastData[] | null;
   sourceChapter: number;
+  sourceVariant: Variant;
   timeResumed: number;
 }
 
@@ -142,6 +144,7 @@ class Sourcereel extends React.Component<ISourcereelProps> {
       <ChapterSelect
         handleChapterSelect={chapterSelectHandler}
         sourceChapter={this.props.sourceChapter}
+        sourceVariant={this.props.sourceVariant}
         key="chapter"
       />
     );
diff --git a/src/components/workspace/controlBar/chapterSelect.tsx b/src/components/workspace/controlBar/chapterSelect.tsx
index b0e3f193f1..204ac30e7c 100644
--- a/src/components/workspace/controlBar/chapterSelect.tsx
+++ b/src/components/workspace/controlBar/chapterSelect.tsx
@@ -3,32 +3,44 @@ import { IconNames } from '@blueprintjs/icons';
 import { ItemRenderer, Select } from '@blueprintjs/select';
 import * as React from 'react';
 
-import { sourceChapters } from '../../../reducers/states';
+import { Variant } from 'js-slang/dist/types';
+import { ISourceLanguage, sourceLanguages, styliseChapter } from '../../../reducers/states';
 
 export type ChapterSelectProps = {
   handleChapterSelect?: (i: IChapter, e: React.ChangeEvent<HTMLSelectElement>) => void;
   sourceChapter: number;
+  sourceVariant: Variant;
   key: string;
 };
 
 export interface IChapter {
   chapter: number;
+  variant: Variant;
   displayName: string;
 }
 
 export function ChapterSelect(props: ChapterSelectProps) {
-  const styliseChapter = (chap: number) => `Source \xa7${chap}`;
-  const chapters = sourceChapters.map(chap => ({
-    displayName: styliseChapter(chap),
-    chapter: chap
-  }));
-  const chapterRenderer: ItemRenderer<IChapter> = (chap, { handleClick }) => (
-    <MenuItem active={false} key={chap.chapter} onClick={handleClick} text={chap.displayName} />
+  const chapters = sourceLanguages.map((lang: ISourceLanguage) => {
+    return {
+      chapter: lang.chapter,
+      variant: lang.variant,
+      displayName: styliseChapter(lang.chapter, lang.variant)
+    };
+  });
+
+  const chapterRenderer: ItemRenderer<IChapter> = (lang, { handleClick }) => (
+    <MenuItem
+      active={false}
+      key={lang.chapter + lang.variant}
+      onClick={handleClick}
+      text={lang.displayName}
+    />
   );
   const ChapterSelectComponent = Select.ofType<IChapter>();
 
   const chapSelect = (
     currentChap: number,
+    currentVariant: Variant,
     handleSelect = (i: IChapter, e: React.ChangeEvent<HTMLSelectElement>) => {}
   ) => (
     <ChapterSelectComponent
@@ -40,11 +52,11 @@ export function ChapterSelect(props: ChapterSelectProps) {
     >
       <Button
         className={Classes.MINIMAL}
-        text={styliseChapter(currentChap)}
+        text={styliseChapter(currentChap, currentVariant)}
         rightIcon={IconNames.DOUBLE_CARET_VERTICAL}
       />
     </ChapterSelectComponent>
   );
 
-  return chapSelect(props.sourceChapter, props.handleChapterSelect);
+  return chapSelect(props.sourceChapter, props.sourceVariant, props.handleChapterSelect);
 }
diff --git a/src/containers/ApplicationContainer.ts b/src/containers/ApplicationContainer.ts
index 62ebd646c3..0ac985ce4d 100644
--- a/src/containers/ApplicationContainer.ts
+++ b/src/containers/ApplicationContainer.ts
@@ -14,6 +14,8 @@ import { ExternalLibraryName } from '../components/assessment/assessmentShape';
 import { externalLibraries } from '../reducers/externalLibraries';
 import { IState } from '../reducers/states';
 
+import { Variant } from 'js-slang/dist/types';
+
 /**
  * Provides the title of the application for display.
  * An object with the relevant properties must be
@@ -27,6 +29,7 @@ const mapStateToProps: MapStateToProps<IStateProps, {}, IState> = state => ({
   role: state.session.role,
   name: state.session.name,
   currentPlaygroundChapter: state.workspaces.playground.context.chapter,
+  currentPlaygroundVariant: state.workspaces.playground.context.variant,
   currentExternalLibrary: state.workspaces.playground.externalLibrary
 });
 
@@ -35,10 +38,15 @@ const workspaceLocation = WorkspaceLocations.playground;
 const mapDispatchToProps: MapDispatchToProps<IDispatchProps, {}> = (dispatch: Dispatch<any>) =>
   bindActionCreators(
     {
-      handleClearContext: (chapter: number, externalLibraryName: ExternalLibraryName) =>
+      handleClearContext: (
+        chapter: number,
+        variant: Variant,
+        externalLibraryName: ExternalLibraryName
+      ) =>
         beginClearContext(
           {
             chapter,
+            variant,
             external: {
               name: externalLibraryName,
               symbols: externalLibraries.get(externalLibraryName)!
diff --git a/src/containers/PlaygroundContainer.ts b/src/containers/PlaygroundContainer.ts
index ccc17de0a4..17bbbd393d 100755
--- a/src/containers/PlaygroundContainer.ts
+++ b/src/containers/PlaygroundContainer.ts
@@ -2,6 +2,7 @@ import { connect, MapDispatchToProps, MapStateToProps } from 'react-redux';
 import { withRouter } from 'react-router';
 import { bindActionCreators, Dispatch } from 'redux';
 
+import { Variant } from 'js-slang/dist/types';
 import {
   beginDebuggerPause,
   beginInterruptExecution,
@@ -59,6 +60,7 @@ const mapStateToProps: MapStateToProps<IStateProps, {}, IState> = state => ({
   sharedbAceInitValue: state.workspaces.playground.sharedbAceInitValue,
   sideContentHeight: state.workspaces.playground.sideContentHeight,
   sourceChapter: state.workspaces.playground.context.chapter,
+  sourceVariant: state.workspaces.playground.context.variant,
   websocketStatus: state.workspaces.playground.websocketStatus,
   externalLibraryName: state.workspaces.playground.externalLibrary,
   usingSubst: state.playground.usingSubst
@@ -75,7 +77,8 @@ const mapDispatchToProps: MapDispatchToProps<IDispatchProps, {}> = (dispatch: Di
       handleBrowseHistoryUp: () => browseReplHistoryUp(workspaceLocation),
       handleChangeExecTime: (execTime: number) =>
         changeExecTime(execTime.toString(), workspaceLocation),
-      handleChapterSelect: (chapter: number) => chapterSelect(chapter, workspaceLocation),
+      handleChapterSelect: (chapter: number, variant: Variant) =>
+        chapterSelect(chapter, variant, workspaceLocation),
       handleDeclarationNavigate: (cursorPosition: IPosition) =>
         navigateToDeclaration(workspaceLocation, cursorPosition),
       handleEditorEval: () => evalEditor(workspaceLocation),
diff --git a/src/containers/academy/grading/GradingWorkspaceContainer.ts b/src/containers/academy/grading/GradingWorkspaceContainer.ts
index 80c327e802..60d5855f33 100644
--- a/src/containers/academy/grading/GradingWorkspaceContainer.ts
+++ b/src/containers/academy/grading/GradingWorkspaceContainer.ts
@@ -76,7 +76,7 @@ const mapDispatchToProps: MapDispatchToProps<DispatchProps, {}> = (dispatch: Dis
       handleBrowseHistoryDown: () => browseReplHistoryDown(workspaceLocation),
       handleBrowseHistoryUp: () => browseReplHistoryUp(workspaceLocation),
       handleChapterSelect: (chapter: any, changeEvent: any) =>
-        chapterSelect(chapter, workspaceLocation),
+        chapterSelect(chapter, 'default', workspaceLocation),
       handleClearContext: (library: Library) => beginClearContext(library, workspaceLocation),
       handleDeclarationNavigate: (cursorPosition: IPosition) =>
         navigateToDeclaration(workspaceLocation, cursorPosition),
diff --git a/src/containers/assessment/AssessmentWorkspaceContainer.ts b/src/containers/assessment/AssessmentWorkspaceContainer.ts
index 5324c4f1dc..e2ede2ccf8 100755
--- a/src/containers/assessment/AssessmentWorkspaceContainer.ts
+++ b/src/containers/assessment/AssessmentWorkspaceContainer.ts
@@ -77,7 +77,7 @@ const mapDispatchToProps: MapDispatchToProps<DispatchProps, {}> = (dispatch: Dis
       handleBrowseHistoryDown: () => browseReplHistoryDown(workspaceLocation),
       handleBrowseHistoryUp: () => browseReplHistoryUp(workspaceLocation),
       handleChapterSelect: (chapter: any, changeEvent: any) =>
-        chapterSelect(chapter, workspaceLocation),
+        chapterSelect(chapter, 'default', workspaceLocation),
       handleClearContext: (library: Library) => beginClearContext(library, workspaceLocation),
       handleDeclarationNavigate: (cursorPosition: IPosition) =>
         navigateToDeclaration(workspaceLocation, cursorPosition),
diff --git a/src/containers/missionControl/EditingWorkspaceContainer.ts b/src/containers/missionControl/EditingWorkspaceContainer.ts
index 1c9302dcc5..8b5a3684d8 100644
--- a/src/containers/missionControl/EditingWorkspaceContainer.ts
+++ b/src/containers/missionControl/EditingWorkspaceContainer.ts
@@ -68,7 +68,7 @@ const mapDispatchToProps: MapDispatchToProps<DispatchProps, {}> = (dispatch: Dis
       handleBrowseHistoryDown: () => browseReplHistoryDown(workspaceLocation),
       handleBrowseHistoryUp: () => browseReplHistoryUp(workspaceLocation),
       handleChapterSelect: (chapter: any, changeEvent: any) =>
-        chapterSelect(chapter, workspaceLocation),
+        chapterSelect(chapter, 'default', workspaceLocation),
       handleClearContext: (library: Library) => beginClearContext(library, workspaceLocation),
       handleDeclarationNavigate: (cursorPosition: IPosition) =>
         navigateToDeclaration(workspaceLocation, cursorPosition),
diff --git a/src/containers/sourcecast/SourcecastContainer.ts b/src/containers/sourcecast/SourcecastContainer.ts
index e9756fb939..079b9e1939 100755
--- a/src/containers/sourcecast/SourcecastContainer.ts
+++ b/src/containers/sourcecast/SourcecastContainer.ts
@@ -67,7 +67,8 @@ const mapStateToProps: MapStateToProps<IStateProps, {}, IState> = state => ({
   replValue: state.workspaces.sourcecast.replValue,
   sideContentHeight: state.workspaces.sourcecast.sideContentHeight,
   sourcecastIndex: state.workspaces.sourcecast.sourcecastIndex,
-  sourceChapter: state.workspaces.sourcecast.context.chapter
+  sourceChapter: state.workspaces.sourcecast.context.chapter,
+  sourceVariant: state.workspaces.sourcecast.context.variant
 });
 
 const location: WorkspaceLocation = 'sourcecast';
@@ -78,7 +79,7 @@ const mapDispatchToProps: MapDispatchToProps<IDispatchProps, {}> = (dispatch: Di
       handleActiveTabChange: (activeTab: SideContentType) => updateActiveTab(activeTab, location),
       handleBrowseHistoryDown: () => browseReplHistoryDown(location),
       handleBrowseHistoryUp: () => browseReplHistoryUp(location),
-      handleChapterSelect: (chapter: number) => chapterSelect(chapter, location),
+      handleChapterSelect: (chapter: number) => chapterSelect(chapter, 'default', location),
       handleDeclarationNavigate: (cursorPosition: IPosition) =>
         navigateToDeclaration(location, cursorPosition),
       handleEditorEval: () => evalEditor(location),
diff --git a/src/containers/sourcecast/SourcereelContainer.ts b/src/containers/sourcecast/SourcereelContainer.ts
index db5ab9220c..9b4e1849e9 100755
--- a/src/containers/sourcecast/SourcereelContainer.ts
+++ b/src/containers/sourcecast/SourcereelContainer.ts
@@ -60,6 +60,7 @@ const mapStateToProps: MapStateToProps<IStateProps, {}, IState> = state => ({
   sideContentHeight: state.workspaces.sourcereel.sideContentHeight,
   sourcecastIndex: state.workspaces.sourcecast.sourcecastIndex,
   sourceChapter: state.workspaces.sourcereel.context.chapter,
+  sourceVariant: state.workspaces.sourcereel.context.variant,
   timeElapsedBeforePause: state.workspaces.sourcereel.timeElapsedBeforePause,
   timeResumed: state.workspaces.sourcereel.timeResumed
 });
@@ -72,7 +73,7 @@ const mapDispatchToProps: MapDispatchToProps<IDispatchProps, {}> = (dispatch: Di
       handleActiveTabChange: (activeTab: SideContentType) => updateActiveTab(activeTab, location),
       handleBrowseHistoryDown: () => browseReplHistoryDown(location),
       handleBrowseHistoryUp: () => browseReplHistoryUp(location),
-      handleChapterSelect: (chapter: number) => chapterSelect(chapter, location),
+      handleChapterSelect: (chapter: number) => chapterSelect(chapter, 'default', location),
       handleDeclarationNavigate: (cursorPosition: IPosition) =>
         navigateToDeclaration(location, cursorPosition),
       handleDeleteSourcecastEntry: (id: number) => deleteSourcecastEntry(id, 'sourcecast'),
diff --git a/src/reducers/__tests__/workspaces.ts b/src/reducers/__tests__/workspaces.ts
index 6c26a1b848..3bf7318d45 100644
--- a/src/reducers/__tests__/workspaces.ts
+++ b/src/reducers/__tests__/workspaces.ts
@@ -492,7 +492,8 @@ describe('END_CLEAR_CONTEXT', () => {
       const context = createContext<WorkspaceLocation>(
         library.chapter,
         library.external.symbols,
-        location
+        location,
+        'default'
       );
 
       expect(result).toEqual({
diff --git a/src/reducers/states.ts b/src/reducers/states.ts
index f52de15dea..1f76aaf4d6 100755
--- a/src/reducers/states.ts
+++ b/src/reducers/states.ts
@@ -1,5 +1,5 @@
 import { Context } from 'js-slang';
-import { SourceError } from 'js-slang/dist/types';
+import { SourceError, Variant } from 'js-slang/dist/types';
 
 import { WorkspaceLocation, WorkspaceLocations } from '../actions/workspaces';
 import { Grading, GradingOverview } from '../components/academy/grading/gradingShape';
@@ -23,7 +23,7 @@ import {
   RecordingStatus
 } from '../components/sourcecast/sourcecastShape';
 import { IPosition } from '../components/workspace/Editor';
-import { DEFAULT_SOURCE_CHAPTER } from '../utils/constants';
+import { DEFAULT_SOURCE_CHAPTER, DEFAULT_SOURCE_VARIANT } from '../utils/constants';
 import { HistoryHelper } from '../utils/history';
 import { createContext } from '../utils/slangHelper';
 
@@ -219,7 +219,42 @@ export enum Role {
  * Defines what chapters are available for usage.
  * For external libraries, see externalLibraries.ts
  */
-export const sourceChapters = [1, 2, 3, 4];
+export interface ISourceLanguage {
+  chapter: number;
+  variant: Variant;
+}
+
+export const sourceLanguages: ISourceLanguage[] = [
+  { chapter: 1, variant: 'default' },
+  { chapter: 2, variant: 'default' },
+  { chapter: 3, variant: 'default' },
+  { chapter: 3, variant: 'non-det' },
+  { chapter: 4, variant: 'default' }
+];
+
+const variantDisplay: Map<Variant, string> = new Map([['non-det', 'Non-Det']]);
+export const languageURLNames: Map<string, ISourceLanguage> = new Map([
+  ['3_Non_Det', { chapter: 3, variant: 'non-det' }]
+]);
+
+export const urlName = (chapter: number, variant: Variant = 'default'): string => {
+  for (const name of languageURLNames.keys()) {
+    const language: ISourceLanguage = languageURLNames.get(name)!;
+    if (language.chapter === chapter && language.variant === variant) {
+      return name;
+    }
+  }
+
+  return chapter.toString();
+};
+
+export const styliseChapter = (chap: number, variant: Variant = 'default') => {
+  let res = `Source \xa7${chap}`;
+  if (variantDisplay.has(variant)) {
+    res += ' ' + variantDisplay.get(variant);
+  }
+  return res;
+};
 
 const currentEnvironment = (): ApplicationEnvironment => {
   switch (process.env.NODE_ENV) {
@@ -256,7 +291,12 @@ export const defaultEditorValue = '// Type your program in here!';
 export const createDefaultWorkspace = (workspaceLocation: WorkspaceLocation): IWorkspaceState => ({
   autogradingResults: [],
   breakpoints: [],
-  context: createContext<WorkspaceLocation>(DEFAULT_SOURCE_CHAPTER, [], workspaceLocation),
+  context: createContext<WorkspaceLocation>(
+    DEFAULT_SOURCE_CHAPTER,
+    [],
+    workspaceLocation,
+    DEFAULT_SOURCE_VARIANT
+  ),
   editorPrepend: '',
   editorSessionId: '',
   editorValue:
diff --git a/src/reducers/workspaces.ts b/src/reducers/workspaces.ts
index bf70d94b96..012dc92d9a 100755
--- a/src/reducers/workspaces.ts
+++ b/src/reducers/workspaces.ts
@@ -268,7 +268,8 @@ export const reducer: Reducer<IWorkspaceManagerState> = (
           context: createContext<WorkspaceLocation>(
             action.payload.library.chapter,
             action.payload.library.external.symbols,
-            workspaceLocation
+            workspaceLocation,
+            action.payload.library.variant
           ),
           globals: action.payload.library.globals
         }
diff --git a/src/sagas/__tests__/workspaces.ts b/src/sagas/__tests__/workspaces.ts
index d76fcd4785..6e88abe5a0 100644
--- a/src/sagas/__tests__/workspaces.ts
+++ b/src/sagas/__tests__/workspaces.ts
@@ -1,5 +1,5 @@
 import { Context, IOptions, Result, resume, runInContext } from 'js-slang';
-import { ErrorSeverity, ErrorType, Finished, SourceError } from 'js-slang/dist/types';
+import { ErrorSeverity, ErrorType, Finished, SourceError, Variant } from 'js-slang/dist/types';
 import { expectSaga } from 'redux-saga-test-plan';
 import { call } from 'redux-saga/effects';
 
@@ -51,6 +51,7 @@ describe('EVAL_EDITOR', () => {
     const editorPostpend = '42;';
     const execTime = 1000;
     const context = createContext();
+    const variant: Variant = 'default';
     const globals: Array<[string, any]> = [
       ['testNumber', 3.141592653589793],
       ['testObject', { a: 1, b: 2 }],
@@ -59,6 +60,7 @@ describe('EVAL_EDITOR', () => {
 
     const library = {
       chapter: context.chapter,
+      variant,
       external: {
         name: ExternalLibraryNames.NONE,
         symbols: context.externalSymbols
@@ -381,6 +383,7 @@ describe('CHAPTER_SELECT', () => {
     const newChapter = 3;
     const library: Library = {
       chapter: newChapter,
+      variant: 'default',
       external: {
         name: 'NONE' as ExternalLibraryName,
         symbols: context.externalSymbols
@@ -397,15 +400,17 @@ describe('CHAPTER_SELECT', () => {
       .call(showSuccessMessage, `Switched to Source \xa7${newChapter}`, 1000)
       .dispatch({
         type: actionTypes.CHAPTER_SELECT,
-        payload: { chapter: newChapter, workspaceLocation }
+        payload: { chapter: newChapter, variant: 'default', workspaceLocation }
       })
       .silentRun();
   });
 
-  test('does not call beginClearContext, clearReplOutput and showSuccessMessage when oldChapter === newChapter', () => {
+  test('does not call beginClearContext, clearReplOutput and showSuccessMessage when oldChapter === newChapter and oldVariant === newVariant', () => {
     const newChapter = 4;
+    const newVariant: Variant = 'default';
     const library: Library = {
       chapter: newChapter,
+      variant: newVariant,
       external: {
         name: 'NONE' as ExternalLibraryName,
         symbols: context.externalSymbols
@@ -422,7 +427,7 @@ describe('CHAPTER_SELECT', () => {
       .not.call(showSuccessMessage, `Switched to Source \xa7${newChapter}`, 1000)
       .dispatch({
         type: actionTypes.CHAPTER_SELECT,
-        payload: { chapter: newChapter, workspaceLocation }
+        payload: { chapter: newChapter, variant: newVariant, workspaceLocation }
       })
       .silentRun();
   });
diff --git a/src/sagas/playground.ts b/src/sagas/playground.ts
index 05c1484b02..7a60ac05fd 100644
--- a/src/sagas/playground.ts
+++ b/src/sagas/playground.ts
@@ -5,7 +5,9 @@ import { put, select, takeEvery } from 'redux-saga/effects';
 import * as actions from '../actions';
 import * as actionTypes from '../actions/actionTypes';
 import { ExternalLibraryName } from '../components/assessment/assessmentShape';
-import { defaultEditorValue, IState } from '../reducers/states';
+import { defaultEditorValue, IState, urlName } from '../reducers/states';
+
+import { Variant } from 'js-slang/dist/types';
 
 export default function* playgroundSaga(): SagaIterator {
   yield takeEvery(actionTypes.GENERATE_LZ_STRING, updateQueryString);
@@ -23,13 +25,19 @@ function* updateQueryString() {
   const chapter: number = yield select(
     (state: IState) => state.workspaces.playground.context.chapter
   );
+  const variant: Variant = yield select(
+    (state: IState) => state.workspaces.playground.context.variant
+  );
+
+  const languageUrlName: string = urlName(chapter, variant);
+
   const external: ExternalLibraryName = yield select(
     (state: IState) => state.workspaces.playground.externalLibrary
   );
   const execTime: number = yield select((state: IState) => state.workspaces.playground.execTime);
   const newQueryString: string = qs.stringify({
     prgrm: compressToEncodedURIComponent(codeString),
-    chap: chapter,
+    chap: languageUrlName,
     ext: external,
     exec: execTime
   });
diff --git a/src/sagas/workspaces.ts b/src/sagas/workspaces.ts
index 02f4448563..3df8f76bf4 100644
--- a/src/sagas/workspaces.ts
+++ b/src/sagas/workspaces.ts
@@ -1,7 +1,16 @@
-import { Context, findDeclaration, interrupt, resume, runInContext } from 'js-slang';
-import { getNames } from 'js-slang';
+import {
+  Context,
+  findDeclaration,
+  getNames,
+  interrupt,
+  Result,
+  resume,
+  runInContext
+} from 'js-slang';
+import { TRY_AGAIN } from 'js-slang/dist/constants';
 import { InterruptedError } from 'js-slang/dist/errors/errors';
 import { manualToggleDebugger } from 'js-slang/dist/stdlib/inspector';
+import { Variant } from 'js-slang/dist/types';
 import { random } from 'lodash';
 import { SagaIterator } from 'redux-saga';
 import { call, delay, put, race, select, take, takeEvery } from 'redux-saga/effects';
@@ -16,7 +25,13 @@ import {
 } from '../components/assessment/assessmentShape';
 import { Documentation } from '../reducers/documentation';
 import { externalLibraries } from '../reducers/externalLibraries';
-import { IPlaygroundState, IState, IWorkspaceState, SideContentType } from '../reducers/states';
+import {
+  IPlaygroundState,
+  IState,
+  IWorkspaceState,
+  SideContentType,
+  styliseChapter
+} from '../reducers/states';
 import { showSuccessMessage, showWarningMessage } from '../utils/notification';
 import {
   getBlockExtraMethodsString,
@@ -64,8 +79,12 @@ export default function* workspaceSaga(): SagaIterator {
     const globals: Array<[string, any]> = yield select(
       (state: IState) => (state.workspaces[workspaceLocation] as IWorkspaceState).globals
     );
+    const variant: Variant = yield select(
+      (state: IState) => (state.workspaces[workspaceLocation] as IWorkspaceState).context.variant
+    );
     const library = {
       chapter,
+      variant,
       external: {
         name: ExternalLibraryNames.NONE,
         symbols
@@ -318,9 +337,14 @@ export default function* workspaceSaga(): SagaIterator {
   ) {
     const workspaceLocation = action.payload.workspaceLocation;
     const newChapter = action.payload.chapter;
+    const oldVariant = yield select(
+      (state: IState) => (state.workspaces[workspaceLocation] as IWorkspaceState).context.variant
+    );
+    const newVariant = action.payload.variant;
     const oldChapter = yield select(
       (state: IState) => (state.workspaces[workspaceLocation] as IWorkspaceState).context.chapter
     );
+
     const symbols: string[] = yield select(
       (state: IState) =>
         (state.workspaces[workspaceLocation] as IWorkspaceState).context.externalSymbols
@@ -328,9 +352,10 @@ export default function* workspaceSaga(): SagaIterator {
     const globals: Array<[string, any]> = yield select(
       (state: IState) => (state.workspaces[workspaceLocation] as IWorkspaceState).globals
     );
-    if (newChapter !== oldChapter) {
+    if (newChapter !== oldChapter || newVariant !== oldVariant) {
       const library = {
         chapter: newChapter,
+        variant: newVariant,
         external: {
           name: ExternalLibraryNames.NONE,
           symbols
@@ -340,7 +365,7 @@ export default function* workspaceSaga(): SagaIterator {
       yield put(actions.beginClearContext(library, workspaceLocation));
       yield put(actions.clearReplOutput(workspaceLocation));
       yield put(actions.debuggerReset(workspaceLocation));
-      yield call(showSuccessMessage, `Switched to Source \xa7${newChapter}`, 1000);
+      yield call(showSuccessMessage, `Switched to ${styliseChapter(newChapter, newVariant)}`, 1000);
     }
   });
 
@@ -496,6 +521,7 @@ export default function* workspaceSaga(): SagaIterator {
 }
 
 let lastDebuggerResult: any;
+let lastNonDetResult: Result;
 function* updateInspector(workspaceLocation: WorkspaceLocation) {
   try {
     const start = lastDebuggerResult.context.runtime.nodes[0].loc.start.line - 1;
@@ -581,15 +607,31 @@ export function* evalCode(
     }
   }
 
+  function call_non_det() {
+    return code.trim() === TRY_AGAIN
+      ? call(resume, lastNonDetResult)
+      : code.includes(TRY_AGAIN) // defensive check: try-again should only be used on its own
+      ? { status: 'error' }
+      : call(runInContext, code, context, {
+          executionMethod: 'interpreter',
+          originalMaxExecTime: execTime,
+          useSubst: substActiveAndCorrectChapter
+        });
+  }
+
+  const isNonDet: boolean = context.variant === 'non-det';
   const { result, interrupted, paused } = yield race({
     result:
       actionType === actionTypes.DEBUG_RESUME
         ? call(resume, lastDebuggerResult)
+        : isNonDet
+        ? call_non_det()
         : call(runInContext, code, context, {
             scheduler: 'preemptive',
             originalMaxExecTime: execTime,
             useSubst: substActiveAndCorrectChapter
           }),
+
     /**
      * A BEGIN_INTERRUPT_EXECUTION signals the beginning of an interruption,
      * i.e the trigger for the interpreter to interrupt execution.
@@ -621,14 +663,24 @@ export function* evalCode(
   }
   yield updateInspector(workspaceLocation);
 
-  if (result.status !== 'suspended' && result.status !== 'finished') {
+  if (
+    result.status !== 'suspended' &&
+    result.status !== 'finished' &&
+    result.status !== 'suspended-non-det'
+  ) {
     yield put(actions.evalInterpreterError(context.errors, workspaceLocation));
     return;
   } else if (result.status === 'suspended') {
     yield put(actions.endDebuggerPause(workspaceLocation));
     yield put(actions.evalInterpreterSuccess('Breakpoint hit!', workspaceLocation));
     return;
+  } else if (isNonDet) {
+    if (result.value === 'cut') {
+      result.value = undefined;
+    }
+    lastNonDetResult = result;
   }
+
   // Do not write interpreter output to REPL, if executing chunks (e.g. prepend/postpend blocks)
   if (actionType !== actionTypes.EVAL_SILENT) {
     yield put(actions.evalInterpreterSuccess(result.value, workspaceLocation));
diff --git a/src/utils/chapterHelpers.ts b/src/utils/chapterHelpers.ts
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/utils/constants.ts b/src/utils/constants.ts
index c898cb75e6..a88a9c5b58 100755
--- a/src/utils/constants.ts
+++ b/src/utils/constants.ts
@@ -14,6 +14,7 @@ export const USE_CHATKIT =
   process.env.REACT_APP_CHATKIT_INSTANCE_LOCATOR !== '';
 export const INSTANCE_LOCATOR = process.env.REACT_APP_CHATKIT_INSTANCE_LOCATOR;
 export const DEFAULT_SOURCE_CHAPTER = 4;
+export const DEFAULT_SOURCE_VARIANT = 'default';
 
 export enum LINKS {
   GITHUB_ISSUES = 'https://github.com/source-academy/cadet-frontend/issues',
diff --git a/src/utils/slangHelper.ts b/src/utils/slangHelper.ts
index 7469c51e02..cf706dccc0 100644
--- a/src/utils/slangHelper.ts
+++ b/src/utils/slangHelper.ts
@@ -1,6 +1,6 @@
 /* tslint:disable: ban-types*/
 import createSlangContext, { defineBuiltin, importBuiltins } from 'js-slang/dist/createContext';
-import { Context, CustomBuiltIns, Value } from 'js-slang/dist/types';
+import { Context, CustomBuiltIns, Value, Variant } from 'js-slang/dist/types';
 import { stringify } from 'js-slang/dist/utils/stringify';
 import { difference, keys } from 'lodash';
 import { handleConsoleLog } from '../actions';
@@ -123,8 +123,13 @@ export const externalBuiltIns = {
  * provides the original function with the required
  * externalBuiltIns, such as display and prompt.
  */
-export function createContext<T>(chapter: number, externals: string[], externalContext: T) {
-  return createSlangContext<T>(chapter, 'default', externals, externalContext, externalBuiltIns);
+export function createContext<T>(
+  chapter: number,
+  externals: string[],
+  externalContext: T,
+  variant: Variant = 'default'
+) {
+  return createSlangContext<T>(chapter, variant, externals, externalContext, externalBuiltIns);
 }
 
 // Assumes that the grader doesn't need additional external libraries apart from the standard