{"id":3584,"date":"2022-08-01T05:23:48","date_gmt":"2022-08-01T12:23:48","guid":{"rendered":"https:\/\/coderpad.io\/?post_type=doc&#038;p=3584"},"modified":"2026-02-24T07:08:00","modified_gmt":"2026-02-24T15:08:00","slug":"using-pad-features","status":"publish","type":"doc","link":"https:\/\/coderpad.io\/resources\/docs\/interview\/pads\/using-pad-features\/","title":{"rendered":"Using pad features"},"content":{"rendered":"\n<div class=\"wp-block-rank-math-toc-block\" id=\"rank-math-toc\"><nav aria-label=\"Table of Contents\"><ul><li class=\"\"><a href=\"#getting-started\">Getting started<\/a><\/li><li class=\"\"><a href=\"#multi-file-pads\">Multi-file pads<\/a><ul><li class=\"\"><a href=\"#pad-set-up\">Pad set-up<\/a><\/li><li class=\"\"><a href=\"#file-tree-and-code-editor\">File tree and code editor<\/a><\/li><li class=\"\"><a href=\"#the-shell\">The shell<\/a><\/li><li class=\"\"><a href=\"#multi-file-projects\">Multi-file projects<\/a><\/li><li class=\"\"><a href=\"#multi-file-frameworks\">Multi-file frameworks<\/a><ul><li class=\"\"><a href=\"#output-window\">Output window<\/a><\/li><li class=\"\"><a href=\"#server-logs-console-logs-shell-and-api-request-history\">Server logs, console logs, shell, and API request history<\/a><\/li><\/ul><\/li><\/ul><\/li><li class=\"\"><a href=\"#follow-users\">Follow users<\/a><\/li><li class=\"\"><a href=\"#s\">Suspicious behavior notifications<\/a><\/li><li class=\"\"><a href=\"#switching-languages\">Switching Languages<\/a><ul><li class=\"\"><a href=\"#1-switching-languages-within-a-question\">1. Switching languages within a question<\/a><\/li><li class=\"\"><a href=\"#2-switching-languages-to-open-a-new-pad-environment\">2. Switching languages to open a new pad environment<\/a><\/li><\/ul><\/li><li class=\"\"><a href=\"#auto-vs-manual-file-save\">Auto vs manual file save<\/a><\/li><li class=\"\"><a href=\"#adding-a-question\">Adding a question<\/a><\/li><li class=\"\"><a href=\"#language-information\">Language information<\/a><\/li><li class=\"\"><a href=\"#database-adaptors\">Database Adaptors<\/a><\/li><li class=\"\"><a href=\"#drawing-mode\">Drawing Mode<\/a><\/li><\/ul><\/nav><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"getting-started\">Getting started<\/h2>\n\n\n\n<p>Pads support a large number of<a href=\"https:\/\/coderpad.io\/languages\/\"> programming languages<\/a> and frameworks. Each language has an IDE, a code execution pane and a REPL (where available).&nbsp;<\/p>\n\n\n\n<blockquote class=\"wp-block-quote\">\n<p>\u2705 You can have multiple language environments per pad<em>. <\/em>You can also add a new language environment at any point during the interview.&nbsp;<\/p>\n<\/blockquote>\n\n\n\n<p>To add a new language environment to the pad, click on the <strong>Languages<\/strong> button on the left side of the screen. You\u2019ll see a list of languages and frameworks to choose from.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><a href=\"https:\/\/coderpad.io\/wp-content\/uploads\/2023\/11\/image-18.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"603\" src=\"https:\/\/coderpad.io\/wp-content\/uploads\/2023\/11\/image-18-1024x603.png\" alt=\"The language selection environment is displayed\" class=\"wp-image-37279\" srcset=\"https:\/\/coderpad.io\/wp-content\/uploads\/2023\/11\/image-18-1024x603.png 1024w, https:\/\/coderpad.io\/wp-content\/uploads\/2023\/11\/image-18-300x177.png 300w, https:\/\/coderpad.io\/wp-content\/uploads\/2023\/11\/image-18-768x452.png 768w, https:\/\/coderpad.io\/wp-content\/uploads\/2023\/11\/image-18-18x12.png 18w, https:\/\/coderpad.io\/wp-content\/uploads\/2023\/11\/image-18.png 1088w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n<\/div>\n\n\n<p>Once you select your desired language or framework, a new tab will open with the example code or app for that particular language:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><a href=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2022\/11\/image-42.png\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"284\" src=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2022\/11\/image-42-1024x284.png\" alt=\"Example &quot;hello world&quot; code is in the left input window and the program output is in the right pad window.\" class=\"wp-image-24218\" srcset=\"https:\/\/coderpad.io\/wp-content\/uploads\/2022\/11\/image-42-1024x284.png 1024w, https:\/\/coderpad.io\/wp-content\/uploads\/2022\/11\/image-42-300x83.png 300w, https:\/\/coderpad.io\/wp-content\/uploads\/2022\/11\/image-42-768x213.png 768w, https:\/\/coderpad.io\/wp-content\/uploads\/2022\/11\/image-42-1536x426.png 1536w, https:\/\/coderpad.io\/wp-content\/uploads\/2022\/11\/image-42-18x5.png 18w, https:\/\/coderpad.io\/wp-content\/uploads\/2022\/11\/image-42.png 1550w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n<\/div>\n\n\n<p>Now you or your candidate can begin coding! <\/p>\n\n\n\n<p>Whenever anyone makes any edits in the code, you&#8217;ll be able to see their cursor along with a tag that has their name. <\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"multi-file-pads\"><strong>Multi-file pads<\/strong><\/h2>\n\n\n\n<p>CoderPad offers three types of language environments &#8212; single file like the <em>OCaml<\/em> pad you see above, and two types of multi-file pads:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"#multi-file-projects\">Multi-file projects<\/a>, which are non-framework backend languages and include C, C++, C#, Java, Ruby, Go, Python3, TypeScript\/Javascript, and Scala<\/li>\n\n\n\n<li><a href=\"#multi-file-frameworks\">Multi-file frameworks<\/a>, which include frontend and backend frameworks like React, Angular, Node, and Spring.<\/li>\n<\/ul>\n\n\n\n<p>Like single file questions, we recommend the following tips to get the most out of your multi-file pads:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>If you&#8217;re using a blank pad or sandbox, you can use the <strong>Save code as draft<\/strong> button (<a href=\"https:\/\/coderpad.io\/resources\/docs\/interview\/question-bank\/creating-and-editing-a-question\/\">right click on the language icon to pull up this option<\/a>) to turn the pad into a question draft.<\/li>\n\n\n\n<li>You can use multi-file environments for both take-home and live interview pads.<\/li>\n\n\n\n<li>Be aware that if you set up starter code in one language environment, it won&#8217;t automatically copy over to a new language environment if a candidate switches over.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"pad-set-up\"><strong>Pad set-up<\/strong><\/h3>\n\n\n\n<p>To quickly set up your multi-file pad or framework, you can drag and drop files, folders, or complete projects into the file tree. You can also a new folder or file to the file tree by clicking click on the folder or file icon, respectively.<\/p>\n\n\n\n<figure class=\"wp-block-video aligncenter\"><video height=\"776\" style=\"aspect-ratio: 1600 \/ 776;\" width=\"1600\" autoplay controls loop muted src=\"https:\/\/coderpad.io\/wp-content\/uploads\/2023\/09\/dragndrop.mp4\"><\/video><\/figure>\n\n\n\n<p>If you want to save your pad to use in the future, you can click <strong>Save code as a draft question<\/strong> in the pad options to turn the pad into a reusable question which you can access in the <a href=\"https:\/\/app.coderpad.io\/dashboard\/questions\/all\"><em>Questions <\/em>bank<\/a>. <\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><a href=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2023\/04\/image-4.png\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2023\/04\/image-4.png\" alt=\"A tab menu item is open with the &quot;create question from tab&quot; item highlighted.\"\/><\/a><\/figure>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"file-tree-and-code-editor\"><strong>File tree and code editor<\/strong><\/h3>\n\n\n\n<p>All multi-file pads offer a file tree and Monaco-based 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. <\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/coderpad.io\/wp-content\/uploads\/2023\/09\/image-4.png\"><img loading=\"lazy\" decoding=\"async\" width=\"943\" height=\"774\" src=\"https:\/\/coderpad.io\/wp-content\/uploads\/2023\/09\/image-4.png\" alt=\"The left side of a pad is shown with a #1 next to the readme.md file name in the file tree,  and a #2 in the code editor showing the contents of the file.\" class=\"wp-image-36509\" srcset=\"https:\/\/coderpad.io\/wp-content\/uploads\/2023\/09\/image-4.png 943w, https:\/\/coderpad.io\/wp-content\/uploads\/2023\/09\/image-4-300x246.png 300w, https:\/\/coderpad.io\/wp-content\/uploads\/2023\/09\/image-4-768x630.png 768w, https:\/\/coderpad.io\/wp-content\/uploads\/2023\/09\/image-4-15x12.png 15w\" sizes=\"auto, (max-width: 943px) 100vw, 943px\" \/><\/a><\/figure>\n<\/div>\n\n\n<p><\/p>\n\n\n\n<p>Note that once changes have been made to the code, you&#8217;ll also have a code comparison available to you below the file tree &#8212; you can see where additions, subtractions, and changes were made.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><a href=\"https:\/\/coderpad.io\/wp-content\/uploads\/2022\/08\/image-157.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"913\" src=\"https:\/\/coderpad.io\/wp-content\/uploads\/2022\/08\/image-157-1024x913.png\" alt=\"This image is a screenshot of a CoderPad  environment displaying a TypeScript file, App.tsx, with lines of code related to a todo app. On the left is a file explorer showing the project structure, including folders and files such as components, index.css, and package.json. The main code window shows an imported package from lodash, styled components for a wrapper, and initialization of a todo list state with sample tasks like &quot;Buy groceries&quot; and &quot;Reboot computer&quot;. Changes are tracked with color highlights in the code editor.\" class=\"wp-image-42890\" srcset=\"https:\/\/coderpad.io\/wp-content\/uploads\/2022\/08\/image-157-1024x913.png 1024w, https:\/\/coderpad.io\/wp-content\/uploads\/2022\/08\/image-157-300x268.png 300w, https:\/\/coderpad.io\/wp-content\/uploads\/2022\/08\/image-157-768x685.png 768w, https:\/\/coderpad.io\/wp-content\/uploads\/2022\/08\/image-157-13x12.png 13w, https:\/\/coderpad.io\/wp-content\/uploads\/2022\/08\/image-157.png 1137w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"the-shell\"><strong>The shell<\/strong><\/h3>\n\n\n\n<p>You can use the shell to install packages from the terminal using external package managers like <code>npm<\/code> or <code>pip3<\/code>. Any libraries you have installed as part of a question (<a href=\"https:\/\/coderpad.io\/resources\/docs\/interview\/question-bank\/creating-and-editing-a-question\/\">using either the question wizard or the <em>Save code as draft question<\/em> feature<\/a>) will be saved to the question for use by your candidate.<\/p>\n\n\n\n<figure class=\"wp-block-table aligncenter\"><table><thead><tr><th>Multi-file project<\/th><th>Multi-file framework<\/th><\/tr><\/thead><tbody><tr><td><a href=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2023\/08\/image-64.png\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2023\/08\/image-62.png\" alt=\"This image has an empty alt attribute; its file name is image-62.png\"><\/a><\/td><td><a href=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2023\/08\/image-65.png\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2023\/08\/image-63.png\" alt=\"\"><\/a><a href=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2023\/05\/image-8.png\" target=\"_blank\" rel=\"noopener\"><\/a><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<blockquote class=\"wp-block-quote\">\n<p>\u26a0\ufe0f Playback is not currently available for the shell. If using a multi-file language environment, we recommend having the candidate use the <strong>Run<\/strong> button as much as possible to print code to the <em>Program Output<\/em> window, which is recorded with playback.<\/p>\n<\/blockquote>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"multi-file-projects\"><strong>Multi-file projects<\/strong><\/h3>\n\n\n\n<p>In addition to the file tree, multi-file language pads have the following features:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>A Monaco-based code editor<\/li>\n\n\n\n<li>A <strong>Run Main<\/strong>\/<strong>Run Tests<\/strong> button that allows you to switch between running the code and running any test cases associated with the code.<\/li>\n\n\n\n<li>A <em>Program Output <\/em>tab where you can view the results of <strong>Run Main<\/strong> and <strong>Run Tests<\/strong>, a <em><a href=\"https:\/\/coderpad.io\/resources\/docs\/interview\/pads\/private-interviewer-notes\/\">Private Interviewer Notes<\/a><\/em> tab, and an <a href=\"https:\/\/coderpad.io\/resources\/docs\/interview\/pads\/chatgpt-integration\/\"><em>AI Assist<\/em> <\/a>tab.<\/li>\n\n\n\n<li><a href=\"#the-shell\">An interactive shell<\/a>.<\/li>\n<\/ol>\n\n\n\n<blockquote class=\"wp-block-quote\">\n<p>\u2705 You can add different run commands or run more than one file at a time by updating the <code>.cpad<\/code> file.<\/p>\n<\/blockquote>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"493\" src=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2023\/08\/image-66-1024x493.png\" alt=\"\" class=\"wp-image-36227\" srcset=\"https:\/\/coderpad.io\/wp-content\/uploads\/2023\/08\/image-66-1024x493.png 1024w, https:\/\/coderpad.io\/wp-content\/uploads\/2023\/08\/image-66-300x144.png 300w, https:\/\/coderpad.io\/wp-content\/uploads\/2023\/08\/image-66-768x370.png 768w, https:\/\/coderpad.io\/wp-content\/uploads\/2023\/08\/image-66-1536x739.png 1536w, https:\/\/coderpad.io\/wp-content\/uploads\/2023\/08\/image-66-18x9.png 18w, https:\/\/coderpad.io\/wp-content\/uploads\/2023\/08\/image-66.png 1920w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<blockquote class=\"wp-block-quote\">\n<p>\u2705 If you&#8217;ve added a database to your question, we recommend setting up the ORM code as part of the question rather than having the candidate to it &#8212; it saves time and allows the candidate to focus on the more important business logic. You can use the <a href=\"https:\/\/coderpad.io\/resources\/docs\/interview\/pads\/chatgpt-integration\/\"><em>AI Assist<\/em> tab<\/a> to ask ChatGPT to generate ORM code for you.<\/p>\n<\/blockquote>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"multi-file-frameworks\"><strong>Multi-file frameworks<\/strong><\/h3>\n\n\n\n<p>When you select a multi-file framework to code in, you\u2019ll notice a multi-pane window that\u2019s similar to what you\u2019d find in popular IDEs.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>The first pane displays the contents of the active file selected in the file tree.<\/li>\n\n\n\n<li>The second pane renders the output of your application.<\/li>\n\n\n\n<li>The third pane provides an interactive shell, server log output, and a console.<\/li>\n\n\n\n<li>A URL is provided if you\u2019d like to open the rendered app in a separate window.<\/li>\n<\/ol>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><a href=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2022\/09\/image-18.png\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"500\" src=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2022\/09\/image-18-1024x500.png\" alt=\"\" class=\"wp-image-17210\" srcset=\"https:\/\/coderpad.io\/wp-content\/uploads\/2022\/09\/image-18-1024x500.png 1024w, https:\/\/coderpad.io\/wp-content\/uploads\/2022\/09\/image-18-300x146.png 300w, https:\/\/coderpad.io\/wp-content\/uploads\/2022\/09\/image-18-768x375.png 768w, https:\/\/coderpad.io\/wp-content\/uploads\/2022\/09\/image-18-1536x750.png 1536w, https:\/\/coderpad.io\/wp-content\/uploads\/2022\/09\/image-18.png 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n<\/div>\n\n\n<p>With multi-file frameworks you&#8217;ll not only have access to the standard code editor, but you&#8217;ll also see additional features that make front-end and back-end engineer interviewing more realistic.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote\">\n<p>\u2705 You can find more information on each framework and its settings by viewing the <code>README.md<\/code> file located in the file directory.<\/p>\n<\/blockquote>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"output-window\"><strong>Output window<\/strong><\/h4>\n\n\n\n<p>In addition to viewing the rendered code in the output window (4), you also can access your private interview notes or <a href=\"https:\/\/coderpad.io\/resources\/docs\/interview\/pads\/api-client\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>API Requests<\/strong> client<\/a> (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.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2023\/02\/image-28.png\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"797\" height=\"432\" src=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2023\/02\/image-28.png\" alt=\"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.\" class=\"wp-image-30796\" srcset=\"https:\/\/coderpad.io\/wp-content\/uploads\/2023\/02\/image-28.png 797w, https:\/\/coderpad.io\/wp-content\/uploads\/2023\/02\/image-28-300x163.png 300w, https:\/\/coderpad.io\/wp-content\/uploads\/2023\/02\/image-28-768x416.png 768w, https:\/\/coderpad.io\/wp-content\/uploads\/2023\/02\/image-28-18x10.png 18w\" sizes=\"auto, (max-width: 797px) 100vw, 797px\" \/><\/a><\/figure>\n<\/div>\n\n\n<blockquote class=\"wp-block-quote\">\n<p>\u2705 The API client is only available with backend frameworks.<\/p>\n<\/blockquote>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"server-logs-console-logs-shell-and-api-request-history\"><strong>Server logs, console logs, shell, and API request history<\/strong><\/h4>\n\n\n\n<p>The bottom portion of the right side of the pad consists of the following:<\/p>\n\n\n\n<p>1. Server logs. You can restart the server by clicking on the <strong>Restart<\/strong> button in the top right of the window.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2023\/05\/image-7.png\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"945\" height=\"323\" src=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2023\/05\/image-7.png\" alt=\"The server logs.\" class=\"wp-image-33832\" srcset=\"https:\/\/coderpad.io\/wp-content\/uploads\/2023\/05\/image-7.png 945w, https:\/\/coderpad.io\/wp-content\/uploads\/2023\/05\/image-7-300x103.png 300w, https:\/\/coderpad.io\/wp-content\/uploads\/2023\/05\/image-7-768x263.png 768w, https:\/\/coderpad.io\/wp-content\/uploads\/2023\/05\/image-7-18x6.png 18w\" sizes=\"auto, (max-width: 945px) 100vw, 945px\" \/><\/a><\/figure>\n<\/div>\n\n\n<p>2.<a href=\"#the-shell\"> A command shell.<\/a><\/p>\n\n\n\n<p>3. Console logs. You can select the type in the drop-down in the top right of the window.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2023\/05\/image-12.png\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"870\" height=\"297\" src=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2023\/05\/image-12.png\" alt=\"The console window is shown with the log type -- all, log, error, warn, info, and debug -- displayed in a drop down in the top right of the window.\" class=\"wp-image-33852\" srcset=\"https:\/\/coderpad.io\/wp-content\/uploads\/2023\/05\/image-12.png 870w, https:\/\/coderpad.io\/wp-content\/uploads\/2023\/05\/image-12-300x102.png 300w, https:\/\/coderpad.io\/wp-content\/uploads\/2023\/05\/image-12-768x262.png 768w, https:\/\/coderpad.io\/wp-content\/uploads\/2023\/05\/image-12-18x6.png 18w\" sizes=\"auto, (max-width: 870px) 100vw, 870px\" \/><\/a><\/figure>\n<\/div>\n\n\n<p>4. <a href=\"https:\/\/coderpad.io\/resources\/docs\/interview\/pads\/api-client\/#request-history-window\" target=\"_blank\" rel=\"noreferrer noopener\">Request history<\/a> for the API client.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2023\/05\/image-9.png\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"931\" height=\"314\" src=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2023\/05\/image-9.png\" alt=\"API request history window with 5 GET requests and their url paths shown.\" class=\"wp-image-33834\" srcset=\"https:\/\/coderpad.io\/wp-content\/uploads\/2023\/05\/image-9.png 931w, https:\/\/coderpad.io\/wp-content\/uploads\/2023\/05\/image-9-300x101.png 300w, https:\/\/coderpad.io\/wp-content\/uploads\/2023\/05\/image-9-768x259.png 768w, https:\/\/coderpad.io\/wp-content\/uploads\/2023\/05\/image-9-18x6.png 18w\" sizes=\"auto, (max-width: 931px) 100vw, 931px\" \/><\/a><\/figure>\n<\/div>\n\n\n<p>To find more information on using multi-file frameworks, check out the <a href=\"https:\/\/coderpad.io\/resources\/docs\/interview\/quick-start-guides\/multi-file-frameworks-for-engineers\/\" target=\"_blank\" rel=\"noreferrer noopener\">Engineer\u2019s guide to multi-file frameworks<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"follow-users\"><strong>Follow users<\/strong><\/h2>\n\n\n\n<p>Follow any user by clicking on their name at bottom left of the pad. Follow is intended to be hands-off &#8212; if you click or start typing in the editor or file tree you will break out of follow. However, you can interact with the right hand pane tabs without affecting the follow.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote\">\n<p>\u26a0\ufe0f Follow will not change the file view if the followed user only clicks on the file title. It picks up the file change when the followed user clicks into the editor and starts working.<\/p>\n<\/blockquote>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"590\" style=\"aspect-ratio: 758 \/ 590;\" width=\"758\" autoplay controls loop muted src=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2023\/07\/followuser2.mp4\"><\/video><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"s\">Suspicious behavior notifications<\/h2>\n\n\n\n<p><a href=\"https:\/\/coderpad.io\/resources\/docs\/interview\/quick-start-guides\/account-admins\/#track-suspicious-activity\">If it&#8217;s enabled<\/a>, you&#8217;ll see pop-ups appear on your interviewer&#8217;s screen every time a candidate copy\/pastes, copies an entire file, or leaves the CoderPad browser tab.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><a href=\"https:\/\/coderpad.io\/wp-content\/uploads\/2021\/01\/image-11.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"568\" src=\"https:\/\/coderpad.io\/wp-content\/uploads\/2021\/01\/image-11-1024x568.png\" alt=\"Screenshot of a CoderPad coding environment displaying a JavaScript editor on the left and a program output window on the right. The left side features JavaScript code that includes a function and a Lodash method. The right side shows that the environment is running Node.js v20.15.0 with logs displaying real-time shell activity. Below the program output, notifications indicate a user named &quot;John Trampa&quot; entering and leaving the session. At the bottom of the screen, two participants, &quot;ken&quot; and &quot;John Trampa,&quot; are listed, with an option to end the session. The workspace is labeled &quot;Untitled Pad - NNGK27NY.&quot;\" class=\"wp-image-40955\" srcset=\"https:\/\/coderpad.io\/wp-content\/uploads\/2021\/01\/image-11-1024x568.png 1024w, https:\/\/coderpad.io\/wp-content\/uploads\/2021\/01\/image-11-300x166.png 300w, https:\/\/coderpad.io\/wp-content\/uploads\/2021\/01\/image-11-768x426.png 768w, https:\/\/coderpad.io\/wp-content\/uploads\/2021\/01\/image-11-1536x852.png 1536w, https:\/\/coderpad.io\/wp-content\/uploads\/2021\/01\/image-11-18x10.png 18w, https:\/\/coderpad.io\/wp-content\/uploads\/2021\/01\/image-11.png 1920w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"switching-languages\">Switching Languages<\/h2>\n\n\n\n<p>We offer two ways to switch languages:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><a href=\"#1-switching-languages-with-a-question\">Switching languages within a question<\/a> &#8212; use this option to answer a question in a different language.<\/li>\n\n\n\n<li><a href=\"#2-switching-languages-to-open-a-new-pad-environment\">Switching to a new language tab<\/a> &#8212; use this option to start coding in a new blank tab.<\/li>\n<\/ol>\n\n\n\n<p>For either option, you can switch between languages at any time during the interview. Select the previous language or tab to view code you\u2019ve written there.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"1-switching-languages-within-a-question\"><strong>1. Switching languages within a question<\/strong><\/h3>\n\n\n\n<p>If you have a question loaded into the pad and your candidate wants to use a different language to code in, they can use the hover menu.<\/p>\n\n\n\n<p>Hover over the question tab and the options menu will display, including the <strong>Languages<\/strong> drop-down. You can use the search bar to type in a language or select it from the list below.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2023\/05\/image-10.png\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"296\" height=\"618\" src=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2023\/05\/image-10.png\" alt=\"A mouse icon is hovering over a question tab and the drop down menu is shown, including the language menu item with a list of languages below.\" class=\"wp-image-33836\" srcset=\"https:\/\/coderpad.io\/wp-content\/uploads\/2023\/05\/image-10.png 296w, https:\/\/coderpad.io\/wp-content\/uploads\/2023\/05\/image-10-144x300.png 144w, https:\/\/coderpad.io\/wp-content\/uploads\/2023\/05\/image-10-6x12.png 6w\" sizes=\"auto, (max-width: 296px) 100vw, 296px\" \/><\/a><\/figure>\n<\/div>\n\n\n<p>Question instructions will still be available on the right side of the pad.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote\">\n<p>\u2705 When you switch languages in a question, the code from the previous language will automatically be displayed in the new language editor as a comment. This is so you and your candidate don&#8217;t lose your work as you switch between languages.<\/p>\n<\/blockquote>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"2-switching-languages-to-open-a-new-pad-environment\"><strong>2. Switching languages to open a new pad environment<\/strong><\/h3>\n\n\n\n<p>This option will open a new language tab without being associated with a question. Simply click the <strong>Languages<\/strong> option in the left tab menu and select the new language you&#8217;d like to use.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote\">\n<p>\u2757When 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.&nbsp;<\/p>\n<\/blockquote>\n\n\n\n<figure class=\"wp-block-video aligncenter\"><video height=\"782\" style=\"aspect-ratio: 1600 \/ 782;\" width=\"1600\" autoplay controls loop muted src=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2023\/05\/languagesiwtch.mp4\"><\/video><\/figure>\n\n\n\n<blockquote class=\"wp-block-quote\">\n<p>\u2705 Any code you write in a language environment will be saved in that tab, so you never have to worry about losing your code.<\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"auto-vs-manual-file-save\">Auto vs manual file save<\/h2>\n\n\n\n<p>In the multi-file language frameworks (both front-end and back-end) you&#8217;ll see a toggle to disable the current hot reload\/auto-save functionality. This setting is at the <strong>pad level<\/strong>, so changing the setting will also change it for <strong>all other pad participants.<\/strong> <\/p>\n\n\n\n<p>The default setting is the current auto-save behavior. If you toggle to &#8220;manual save&#8221;, you&#8217;ll need to click the <strong>Save <\/strong>button (or the <kbd>\u2318<\/kbd> + <kbd>S<\/kbd>\/ <kbd>CTRL<\/kbd> + <kbd>S<\/kbd> keyboard shortcut) to save file changes and see them appear in the right hand pane.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2022\/12\/image-9.png\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"949\" height=\"323\" src=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2022\/12\/image-9.png\" alt=\"Auto-save file is turned off and the &quot;Run&quot; button has been changed to a &quot;save&quot; button.\" class=\"wp-image-27304\" srcset=\"https:\/\/coderpad.io\/wp-content\/uploads\/2022\/12\/image-9.png 949w, https:\/\/coderpad.io\/wp-content\/uploads\/2022\/12\/image-9-300x102.png 300w, https:\/\/coderpad.io\/wp-content\/uploads\/2022\/12\/image-9-768x261.png 768w, https:\/\/coderpad.io\/wp-content\/uploads\/2022\/12\/image-9-18x6.png 18w\" sizes=\"auto, (max-width: 949px) 100vw, 949px\" \/><\/a><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"adding-a-question\">Adding a question<\/h2>\n\n\n\n<p>To add a question to the pad, click the <strong>Questions <\/strong>button on the left side of the screen. Then click the <strong>Select A Question<\/strong> tab. You&#8217;ll see tabs for your <em>Organization<\/em>&#8216;s questions, <em>My Content<\/em>, and <em>Examples <\/em>questions, mirroring the Question Bank. You can search or filter questions by language.<\/p>\n\n\n\n<figure class=\"wp-block-video aligncenter\"><video height=\"782\" style=\"aspect-ratio: 1600 \/ 782;\" width=\"1600\" autoplay controls loop muted src=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2022\/07\/addingquestion.mp4\"><\/video><\/figure>\n\n\n\n<p>Once you&#8217;ve added a question, you can change the language on that tab, by clicking hovering on the tab then choosing &#8220;Language&#8221;. 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.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2023\/03\/image-50.png\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"214\" height=\"447\" src=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2023\/03\/image-50.png\" alt=\"The language switch menu is presented displaying a list of languages.\" class=\"wp-image-32356\" srcset=\"https:\/\/coderpad.io\/wp-content\/uploads\/2023\/03\/image-50.png 214w, https:\/\/coderpad.io\/wp-content\/uploads\/2023\/03\/image-50-144x300.png 144w, https:\/\/coderpad.io\/wp-content\/uploads\/2023\/03\/image-50-6x12.png 6w\" sizes=\"auto, (max-width: 214px) 100vw, 214px\" \/><\/a><\/figure>\n<\/div>\n\n\n<p>For more details and tips on switching between languages in a question, check out the <a href=\"#1-switching-languages-with-a-question\"><em>Switching Languages<\/em> section<\/a> above.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"language-information\">Language information<\/h2>\n\n\n\n<blockquote class=\"wp-block-quote\">\n<p>\u2705 Only select languages will have a <em>Language Info<\/em> tab. For multi-file frameworks and projects like Node and React, you can view the framework information in the README.MD file included in the project file tree.<\/p>\n<\/blockquote>\n\n\n\n<p>You can access more information about the language environment by hovering over the language name in the left navigation menu and then selecting <strong>Language Info<\/strong>.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><a href=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2023\/03\/image-51.png\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"204\" height=\"154\" src=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2023\/03\/image-51.png\" alt=\"The language options menu is shown with language selection, language info, delete tab, reset tab, and database adapters shown.\" class=\"wp-image-32358\" style=\"width:224px;height:173px\" srcset=\"https:\/\/coderpad.io\/wp-content\/uploads\/2023\/03\/image-51.png 204w, https:\/\/coderpad.io\/wp-content\/uploads\/2023\/03\/image-51-16x12.png 16w\" sizes=\"auto, (max-width: 204px) 100vw, 204px\" \/><\/a><\/figure>\n<\/div>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><a href=\"https:\/\/coderpad.io\/wp-content\/uploads\/2023\/08\/image.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"598\" src=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2023\/08\/image-1024x598.png\" alt=\"The kotlin info page is shown in the pad.\" class=\"wp-image-35773\" srcset=\"https:\/\/coderpad.io\/wp-content\/uploads\/2023\/08\/image-1024x598.png 1024w, https:\/\/coderpad.io\/wp-content\/uploads\/2023\/08\/image-300x175.png 300w, https:\/\/coderpad.io\/wp-content\/uploads\/2023\/08\/image-768x448.png 768w, https:\/\/coderpad.io\/wp-content\/uploads\/2023\/08\/image-1536x897.png 1536w, https:\/\/coderpad.io\/wp-content\/uploads\/2023\/08\/image-18x12.png 18w, https:\/\/coderpad.io\/wp-content\/uploads\/2023\/08\/image.png 1920w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"database-adaptors\">Database Adaptors<\/h2>\n\n\n\n<p>Interview&#8217;s environments supply common language-specific database adaptors and ORMs for use in assessments.&nbsp;<\/p>\n\n\n\n<blockquote class=\"wp-block-quote\">\n<p>\u26a0\ufe0fNote that most languages do not have support for database adaptors.<\/p>\n<\/blockquote>\n\n\n\n<p>To select a package for your language, first hover over the language you\u2019d like to add an adapter to. Then click on the <strong>Database adapters <\/strong>drop down menu to see the adaptors for that particular language.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><a href=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2023\/03\/image-52.png\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"213\" height=\"263\" src=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2023\/03\/image-52.png\" alt=\"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.\" class=\"wp-image-32361\" style=\"width:285px;height:297px\" srcset=\"https:\/\/coderpad.io\/wp-content\/uploads\/2023\/03\/image-52.png 213w, https:\/\/coderpad.io\/wp-content\/uploads\/2023\/03\/image-52-10x12.png 10w\" sizes=\"auto, (max-width: 213px) 100vw, 213px\" \/><\/a><\/figure>\n<\/div>\n\n\n<blockquote class=\"wp-block-quote\">\n<p>\u2757 This will erase\/replace any code you have previously written in this tab.<\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"drawing-mode\">Drawing Mode<\/h2>\n\n\n\n<p>Drawing mode is now accessed from the tab navigation:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/coderpad.io\/wp-content\/uploads\/2023\/11\/image-19.png\"><img loading=\"lazy\" decoding=\"async\" width=\"689\" height=\"582\" src=\"https:\/\/coderpad.io\/wp-content\/uploads\/2023\/11\/image-19.png\" alt=\"A pad displaying the drawing mode window.\" class=\"wp-image-37282\" srcset=\"https:\/\/coderpad.io\/wp-content\/uploads\/2023\/11\/image-19.png 689w, https:\/\/coderpad.io\/wp-content\/uploads\/2023\/11\/image-19-300x253.png 300w, https:\/\/coderpad.io\/wp-content\/uploads\/2023\/11\/image-19-14x12.png 14w\" sizes=\"auto, (max-width: 689px) 100vw, 689px\" \/><\/a><\/figure>\n<\/div>","protected":false},"parent":835,"menu_order":6,"template":"","class_list":["post-3584","doc","type-doc","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/doc\/3584","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/doc"}],"about":[{"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/types\/doc"}],"version-history":[{"count":102,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/doc\/3584\/revisions"}],"predecessor-version":[{"id":44061,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/doc\/3584\/revisions\/44061"}],"up":[{"embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/doc\/835"}],"wp:attachment":[{"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/media?parent=3584"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}