Last updated on • Available in French
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.
Once you select your desired language or framework, a new tab will open with the example code or app for that particular language:
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:
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.
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 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
(3) Console logs.
(4) Request history for the API client.
To find more information on using multi-file frameworks, check out the Engineer’s guide to multi-file frameworks.
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.
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.
✅ 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.
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.
❗ This will erase/replace any code you have previously written in this tab.
Drawing mode is now accessed from the tab navigation: