{"id":835,"date":"2021-02-24T19:50:10","date_gmt":"2021-02-25T03:50:10","guid":{"rendered":"https:\/\/coderpad.local\/?post_type=doc&#038;p=722"},"modified":"2023-11-10T07:41:05","modified_gmt":"2023-11-10T15:41:05","slug":"pads","status":"publish","type":"doc","link":"https:\/\/coderpad.io\/resources\/docs\/interview\/pads\/","title":{"rendered":"Pads"},"content":{"rendered":"\n<blockquote class=\"wp-block-quote\">\n<p>\u2705 If you&#8217;re looking for the quickstart guide for <strong>live Interview pads<\/strong>, <a href=\"https:\/\/coderpad.io\/resources\/docs\/interview\/quick-start-guides\/interviewers\/live-interview-pads\/\">you can find that here<\/a>. You can find the quickstart guide for <a href=\"https:\/\/coderpad.io\/resources\/docs\/interview\/interviewers\/resources\/docs\/interview\/quick-start-guides\/interviewers\/resources\/docs\/interview\/quick-start-guides\/interviewers\/resources\/docs\/interview\/quick-start-guides\/interviewers\/take-home-projects\/\"><strong>Take-Home pads<\/strong> here<\/a>.<\/p>\n<\/blockquote>\n\n\n\n<p>A \u201cpad\u201d is the collaborative interview session where the candidate will write and run code. It consists of a code editor on the left side and output on the right side. <strong>You should make a new pad for each interview.<\/strong> <\/p>\n\n\n\n<blockquote class=\"wp-block-quote\">\n<p>\u2705 The right window will also contain test case results, private interviewer notes, and candidate instructions depending on the type of pad you create and the role of the user.<\/p>\n<\/blockquote>\n\n\n\n<div class=\"wp-block-rank-math-toc-block\" id=\"rank-math-toc\"><nav aria-label=\"Table of Contents\"><ul><li class=\"\"><a href=\"#add-your-starter-code\">Add your starter code<\/a><ul><li class=\"\"><a href=\"#drag-and-drop-files\">Drag and drop files<\/a><\/li><\/ul><\/li><li class=\"\"><a href=\"#execute-the-code\">Execute the code<\/a><\/li><li class=\"\"><a href=\"#program-output\">Program Output<\/a><\/li><li class=\"\"><a href=\"#reviewing-interview-results\">Reviewing interview results<\/a><\/li><li class=\"\"><a href=\"#pad-status\">Pad status<\/a><\/li><\/ul><\/nav><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"add-your-starter-code\">Add your starter code<\/h2>\n\n\n\n<p>You can add starter code either when you <a href=\"https:\/\/coderpad.io\/resources\/docs\/interview\/question-bank\/creating-and-editing-a-question\/\" target=\"_blank\" rel=\"noreferrer noopener\">create a question<\/a> or directly into an open pad.<\/p>\n\n\n\n<p>For any of the non-framework or single-file languages you can just type your starter code directly into the editor:<\/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-15.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"500\" src=\"https:\/\/coderpad.io\/wp-content\/uploads\/2023\/11\/image-15-1024x500.png\" alt=\"A single file pad with code highlighted in the code editor on the left of the pad.\" class=\"wp-image-37273\" srcset=\"https:\/\/coderpad.io\/wp-content\/uploads\/2023\/11\/image-15-1024x500.png 1024w, https:\/\/coderpad.io\/wp-content\/uploads\/2023\/11\/image-15-300x146.png 300w, https:\/\/coderpad.io\/wp-content\/uploads\/2023\/11\/image-15-768x375.png 768w, https:\/\/coderpad.io\/wp-content\/uploads\/2023\/11\/image-15-1536x750.png 1536w, https:\/\/coderpad.io\/wp-content\/uploads\/2023\/11\/image-15-18x9.png 18w, https:\/\/coderpad.io\/wp-content\/uploads\/2023\/11\/image-15.png 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"drag-and-drop-files\">Drag and drop files<\/h3>\n\n\n\n<p>For multi-file languages, you can also add your starter code to the editor OR you can use our drag-and-drop feature to load multiple files and folders into the pad &#8212; perfect if you have interview questions already set up in your desktop or code repository. <\/p>\n\n\n\n<p>Simply drag the files or folders into the file tree on the left side of the screen and you&#8217;ll see them load into the file tree ready for use by you or your candidate:<\/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\/2023\/04\/dragndrop.mp4\"><\/video><\/figure>\n\n\n\n<p>Some things to keep in mind if you use the drag and drop feature:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>While most file types are accepted, you won&#8217;t be able to load any file with binary characters. This includes things like images or compiled apps.<\/li>\n\n\n\n<li>When uploading a file with the same name as an existing file, you&#8217;ll have the option to replace or keep both.<\/li>\n\n\n\n<li>Certain files that are prepopulated by CoderPad cannot be removed. Any packaging or build files (like <code>package.json<\/code>, <code>vite.config.ts<\/code>, etc.) are necessary for the application to run and as such you will not see an option to remove them from the file tree &#8212; though you can still edit them as needed.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"execute-the-code\">Execute the code<\/h2>\n\n\n\n<p>In order to run code in any language, simply hit on the <strong>Run <\/strong>button in the top left hand corner of a pad. <\/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\/03\/image-11.png\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"500\" src=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2023\/03\/image-11-1024x500.png\" alt=\"An example pad with code in the left window and interviewer notes in the right window. A big green run button is in the top left.\" class=\"wp-image-32170\" srcset=\"https:\/\/coderpad.io\/wp-content\/uploads\/2023\/03\/image-11-1024x500.png 1024w, https:\/\/coderpad.io\/wp-content\/uploads\/2023\/03\/image-11-300x146.png 300w, https:\/\/coderpad.io\/wp-content\/uploads\/2023\/03\/image-11-768x375.png 768w, https:\/\/coderpad.io\/wp-content\/uploads\/2023\/03\/image-11-1536x750.png 1536w, https:\/\/coderpad.io\/wp-content\/uploads\/2023\/03\/image-11-18x9.png 18w, https:\/\/coderpad.io\/wp-content\/uploads\/2023\/03\/image-11.png 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n<\/div>\n\n\n<p>We also give a handy <a href=\"https:\/\/coderpad.io\/resources\/docs\/interview\/pads\/keyboard-shortcuts\/\" target=\"_blank\" rel=\"noreferrer noopener\">keyboard shortcut<\/a> if you don\u2019t want to take your hands off the keyboard.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"program-output\">Program Output<\/h2>\n\n\n\n<p id=\"block-35635794-2248-47fd-bd77-6066226bc2e0\">As soon as you click on the <strong>Run <\/strong>button, your code will be executed and showcase the program output in a REPL window. If there are any errors in the code that is executed, the errors will also show in the output window.<\/p>\n\n\n\n<p id=\"block-7515cb3e-0208-4729-9e33-09b5397e6442\">To clear the output of the REPL at any time, simply click on the <strong>Reset <\/strong>button, located in the top right hand corner of a pad. This will not reset any code in the left hand pane, it will simply clear the output within the REPL.<\/p>\n\n\n\n<p id=\"block-9f7f0562-606e-45e1-8c83-8bf7003c0136\">For some languages (Ruby, Python, Javascript) &#8211; the REPL carries over variables from the left pane, and are available in the REPL. For other languages (Clojure, Erlang, OCaml, Perl, R, MySQL, PostgreSQL) the REPL is \u201cdisconnected\u201d from the left pane.<\/p>\n\n\n\n<p id=\"block-08f8935e-dcbc-4507-98fd-17406706df20\">Any code written into the REPL isn\u2019t saved\/visible in playback.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"reviewing-interview-results\">Reviewing interview results<\/h2>\n\n\n\n<p>A record of everything the candidate types in the pad will be permanently saved for your team to <a href=\"https:\/\/coderpad.io\/resources\/docs\/interview\/pads\/playback-mode\/\" target=\"_blank\" rel=\"noreferrer noopener\">review and share afterwards<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"pad-status\">Pad status<\/h2>\n\n\n\n<p>In the <strong>Pads List<\/strong> in your dashboard you&#8217;ll notice that each pad is assigned a <em>Status<\/em>:<\/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\/12\/image-18.png\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"342\" src=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2022\/12\/image-18-1024x342.png\" alt=\"A pads list with the status column highlighted.\" class=\"wp-image-27613\" srcset=\"https:\/\/coderpad.io\/wp-content\/uploads\/2022\/12\/image-18-1024x342.png 1024w, https:\/\/coderpad.io\/wp-content\/uploads\/2022\/12\/image-18-300x100.png 300w, https:\/\/coderpad.io\/wp-content\/uploads\/2022\/12\/image-18-768x256.png 768w, https:\/\/coderpad.io\/wp-content\/uploads\/2022\/12\/image-18-18x6.png 18w, https:\/\/coderpad.io\/wp-content\/uploads\/2022\/12\/image-18.png 1447w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n<\/div>\n\n\n<p>The pad status flow is as follows:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>Live interview pads<\/th><th>Take-home pads<\/th><\/tr><\/thead><tbody><tr><td><strong>Not started<\/strong>: Pad created and there has been little-to-no participant action.<\/td><td><strong>Not started<\/strong>: Pad created with no candidate action.<\/td><\/tr><tr><td><\/td><td><strong>Opened<\/strong>: A candidate has opened the pad.<\/td><\/tr><tr><td><strong>Started<\/strong>: At least two pad participants have joined the pad at some point AND at least two detectable actions have been performed (e.g., typing code + running code).<\/td><td><strong>Started<\/strong>: At least five minutes must have passed AND at least two detectable actions have been performed (e.g., typing code + running code).<\/td><\/tr><tr><td><\/td><td><strong>Ready for Review<\/strong>: Either the candidate has submitted the pad or the time limit has been reached and the pad was automatically submitted.<\/td><\/tr><tr><td><strong>Ended<\/strong>: The <em>End Interview<strong> <\/strong><\/em>button has been clicked OR the pad has been auto-ended due to account settings.<\/td><td><strong>Reviewed<\/strong>: The <em>Finish Review<\/em> button has been clicked on the playback review page.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p><\/p>\n","protected":false},"parent":16734,"menu_order":2,"template":"","class_list":["post-835","doc","type-doc","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/doc\/835","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":26,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/doc\/835\/revisions"}],"predecessor-version":[{"id":40761,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/doc\/835\/revisions\/40761"}],"up":[{"embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/doc\/16734"}],"wp:attachment":[{"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/media?parent=835"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}