Docs Index

Language environments

Last updated on • Available in French

Pads Interface

Pads support a large number of programming languages and frameworks. Each language has an IDE, a code execution pane and a REPL (where available). 

✅ You can have multiple language environments per pad. You can also add a new language environment at any point during the interview. 

To add a new language environment to the pad, click on the “+” button on the left side of the screen. You’ll see a list of languages and frameworks to choose from.

The language selection environment is displayed, there is 1 near the add a language button in the left tab menu and a 2 next to the "add environment" tab at the top of the screen.

Once you select your desired language or framework, a new tab will open with the example code or app for that particular language:

Example "hello world" code is in the left input window and the program output is in the right pad window.

Multi-file frameworks

CoderPad offers two types of language environments — single file like the OCaml pad you see above, and multi-file frameworks like in this Node example:

A multifile pad for node.js.

With multi-file frameworks you’ll not only have access to the standard code editor, but you’ll also see additional features that make front-end and back-end engineer interviewing more realistic.

File tree and code editor

When you click on any file in the file tree (1), the file will display in the code editor (2) for you to edit as needed. To add add a new folder or file to the file tree, simple click on the folder or file icon, respectively.

The left side of a pad is shown with a #1 next to the readme.md file name in the file tree, a #2 in the code editor showing the contents of the file, and a #3 pointing to the add file and folder buttons at the top of the file tree.

Output window

In addition to viewing the rendered code in the output window (4), you also can access your private interview notes or API Requests client (1). You can also copy the URL (2) from the URL bar to paste into a new tab/window, or use the pop-out button (3) to do the same.

The output screen with a 1 next to the api client tab, a 2 next to the url, a 3 next to the popout icon, and a 4 in the rendered output UI.

✅ The API client is only available with backend frameworks.

Server logs, console logs, interactive shell, and API request history

The bottom portion of the right side of the pad consists of the following:

(1) Server logs. You can restart the server by clicking on the Restart button (5)

(2) An interactive shell. You can use this shell to install external packages using npm or pip3.

(3) Console logs.

(4) Request history for the API client.

In the top left, from left to right, are the server, shell, console, and request history tabs. in the top right of this window is the restart button.

To find more information on using multi-file frameworks, check out the Engineer’s guide to multi-file frameworks.

Switching Languages

You can switch between environments at any time during the interview. Simply click back to the other environment and the code you’ve written there previously will display.

✅ Any code you write in a language environment will be saved in that tab, so you never have to worry about losing your code.

When you switch from Plain Text or Markdown to a coding language, any existing text  from those languages will be copied over to the new language environment as code comments:

All other languages store your code in separate language files. When you switch between non-Plain Text/Markdown languages, the prior code is saved in its language environment, but is not copied over to the next language environment. To view code in a previously used language environment, switch back to it.

❗When you switch between environment tabs, all other pad participants will also be switched over to the same environment along with you. Give other pad participants a heads up when you are about to switch environments. 

Auto vs manual file save

In the multi-file language frameworks (both front-end and back-end) you’ll see a toggle to disable the current hot reload/auto-save functionality. This setting is at the pad level, so changing the setting will also change it for all other pad participants.

The default setting is the current auto-save behavior. If you toggle to “manual save”, you’ll need to click the Save button (or the ⌘ + S/ CTRL + S keyboard shortcut) to save file changes and see them appear in the right hand pane.

Auto-save file is turned off and the "Run" button has been changed to a "save" button.

Adding a question

To add a question to the pad, click the Questions button on the left side of the screen. Then click the Select A Question tab. You’ll see tabs for your Organization‘s questions, My Content, and Examples questions, mirroring the Question Bank. You can search or filter questions by language.

Once you’ve added a question, you can change the language on that tab, by clicking the 3 dots on the tab then choosing “Language”. This may be convenient if a candidate wants to use a language that the question was not originally written in. Switching languages on the tab ensures that any attached resources like databases or files can still be accessed from the question tab.

The language switch menu is presented displaying a list of languages.

Language information

✅ Only select languages will have an Info tab. For multi-file frameworks like Node and React, you can view the framework information in the README.MD file included in the project file tree.

You can access more information about the language environment by hovering over the language name in the Environments menu, or by clicking on the three vertical dots next to the language tab you’d like more info on, and then selecting Info.

In the left tab menu there is a 1 next to the vertical ellipses of python and a 2 next to the "info" tab of the menu.
The python 3 info page is shown in the pad.

Database Adaptors

Interview’s environments supply common language-specific database adaptors and ORMs for use in assessments. 

⚠️Note that most languages do not have support for database adaptors.

To select a package for your language, first select the three vertical dots next to the language you’d like to add an adapter to. Then click on the Database adapters drop down menu to see the adaptors for that particular language.

Environment option drop down with a 1 next to the vertical ellipses, a 2 next to database adapters, and a 3 next to the adapter options.

❗ This will erase/replace any code you have previously written in this tab.

Drawing Mode

Drawing mode is now accessed from the tab navigation:

The draw mode option is highlighted in the left tab menu.