{"id":2933,"date":"2021-10-14T10:28:16","date_gmt":"2021-10-14T17:28:16","guid":{"rendered":"https:\/\/coderpad.io\/?post_type=doc&#038;p=2933"},"modified":"2025-03-12T10:20:22","modified_gmt":"2025-03-12T17:20:22","slug":"creating-and-editing-a-question","status":"publish","type":"doc","link":"https:\/\/coderpad.io\/resources\/docs\/interview\/question-bank\/creating-and-editing-a-question\/","title":{"rendered":"Creating and editing questions"},"content":{"rendered":"\n<p>To add a new question to Interview&#8217;s Question Bank, start on the <a href=\"https:\/\/app.coderpad.io\/dashboard\/questions\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Question Bank<\/strong><\/a> page and click the <strong>Create Question<\/strong> button at the top right of the screen.<\/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-71.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-71-1024x500.png\" alt=\"The question bank screen with the &quot;create question&quot; button at the top right of the screen.\" class=\"wp-image-32751\" srcset=\"https:\/\/coderpad.io\/wp-content\/uploads\/2023\/03\/image-71-1024x500.png 1024w, https:\/\/coderpad.io\/wp-content\/uploads\/2023\/03\/image-71-300x146.png 300w, https:\/\/coderpad.io\/wp-content\/uploads\/2023\/03\/image-71-768x375.png 768w, https:\/\/coderpad.io\/wp-content\/uploads\/2023\/03\/image-71-1536x750.png 1536w, https:\/\/coderpad.io\/wp-content\/uploads\/2023\/03\/image-71-18x9.png 18w, https:\/\/coderpad.io\/wp-content\/uploads\/2023\/03\/image-71.png 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n<\/div>\n\n\n<p>Alternatively, you can create a question from an existing tab by clicking on the vertical ellipses (three dots) next to the language and then clicking on <strong>Save code as draft question<\/strong>.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"401\" height=\"300\" src=\"https:\/\/coderpad.io\/wp-content\/uploads\/2021\/10\/image-2.png\" alt=\"A tab menu item is open with the &quot;create question from tab&quot; item highlighted.\" class=\"wp-image-40818\" srcset=\"https:\/\/coderpad.io\/wp-content\/uploads\/2021\/10\/image-2.png 401w, https:\/\/coderpad.io\/wp-content\/uploads\/2021\/10\/image-2-300x224.png 300w, https:\/\/coderpad.io\/wp-content\/uploads\/2021\/10\/image-2-16x12.png 16w\" sizes=\"auto, (max-width: 401px) 100vw, 401px\" \/><\/figure>\n<\/div>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/coderpad.io\/wp-content\/uploads\/2021\/10\/image.png\"><img loading=\"lazy\" decoding=\"async\" width=\"751\" height=\"325\" src=\"https:\/\/coderpad.io\/wp-content\/uploads\/2021\/10\/image.png\" alt=\"Save as draft pop up. it reads: &quot;a snapshot of the code in this pad will be saved as a draft question. the draft editor will open in a new window. you can finish editing, add instructions and more, and finalize your question from the drafts tab.\" class=\"wp-image-40815\" srcset=\"https:\/\/coderpad.io\/wp-content\/uploads\/2021\/10\/image.png 751w, https:\/\/coderpad.io\/wp-content\/uploads\/2021\/10\/image-300x130.png 300w, https:\/\/coderpad.io\/wp-content\/uploads\/2021\/10\/image-18x8.png 18w\" sizes=\"auto, (max-width: 751px) 100vw, 751px\" \/><\/a><\/figure>\n<\/div>\n\n\n<p>Once you click <strong>Save<\/strong>, you&#8217;ll be taken to the <em>Drafts<\/em> tab in the question bank. Here you can customize the question &#8212; including changing the name of the question &#8212; by clicking on the <strong>Edit Draft<\/strong> button at the bottom of the screen.<\/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-6.png\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"479\" src=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2023\/04\/image-6-1024x479.png\" alt=\"The question bank is shown with the question draft that was created from the pad tab open.\" class=\"wp-image-33320\" srcset=\"https:\/\/coderpad.io\/wp-content\/uploads\/2023\/04\/image-6-1024x479.png 1024w, https:\/\/coderpad.io\/wp-content\/uploads\/2023\/04\/image-6-300x140.png 300w, https:\/\/coderpad.io\/wp-content\/uploads\/2023\/04\/image-6-768x359.png 768w, https:\/\/coderpad.io\/wp-content\/uploads\/2023\/04\/image-6-18x8.png 18w, https:\/\/coderpad.io\/wp-content\/uploads\/2023\/04\/image-6.png 1494w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n<\/div>\n\n\n<p>You&#8217;ll then be guided step-by-step through your question creation process.<\/p>\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=\"#setup-interview-context\">Setup Interview Context<\/a><\/li><li class=\"\"><a href=\"#add-take-home-test-cases-optional\">Add Take-Home Test Cases (optional)<\/a><\/li><li class=\"\"><a href=\"#add-code-elements\">Add Code Elements<\/a><\/li><li class=\"\"><a href=\"#add-whiteboard-starter-drawing\">Add whiteboard starter drawing<\/a><\/li><li class=\"\"><a href=\"#edit-starter-code\">Edit starter code<\/a><\/li><li class=\"\"><a href=\"#creating-multi-file-questions\">Creating multi-file questions<\/a><\/li><li class=\"\"><a href=\"#drafts-and-collaboration\">Drafts and Collaboration<\/a><\/li><li class=\"\"><a href=\"#using-a-question-in-a-pad\">Using a question in a pad<\/a><\/li><li class=\"\"><a href=\"#edit-an-existing-question\">Edit an existing question<\/a><\/li><\/ul><\/nav><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"setup-interview-context\">Setup Interview Context<\/h2>\n\n\n\n<p>Here you will select which types of interviews your question will be used in: \u201cLive Question\u201d, &#8220;Take-Home&#8221;, or both.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><a href=\"https:\/\/coderpad.io\/wp-content\/uploads\/2023\/12\/image-2.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"650\" src=\"https:\/\/coderpad.io\/wp-content\/uploads\/2023\/12\/image-2-1024x650.png\" alt=\"The set up interview context screen. Here you enter the title, add a starter drawing, language environment, difficulty, internal description, and if you want to allow others to edit the question.\" class=\"wp-image-37565\" srcset=\"https:\/\/coderpad.io\/wp-content\/uploads\/2023\/12\/image-2-1024x650.png 1024w, https:\/\/coderpad.io\/wp-content\/uploads\/2023\/12\/image-2-300x190.png 300w, https:\/\/coderpad.io\/wp-content\/uploads\/2023\/12\/image-2-768x487.png 768w, https:\/\/coderpad.io\/wp-content\/uploads\/2023\/12\/image-2-18x12.png 18w, https:\/\/coderpad.io\/wp-content\/uploads\/2023\/12\/image-2.png 1117w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n<\/div>\n\n\n<p>If you\u2019ve only selected \u201cTake-Home\u201d, you can opt to add test cases. Test cases will allow you to test a candidate\u2019s Take-Home code against certain requirements.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote\">\n<p>\u2705More information on test cases can be found in the <a href=\"https:\/\/coderpad.io\/resources\/docs\/interview\/question-bank\/test-cases\/\" target=\"_blank\" rel=\"noreferrer noopener\">Test Cases feature guide here<\/a>.<\/p>\n<\/blockquote>\n\n\n\n<p>Regardless of interview type, you\u2019ll then be asked to add the following information for the question:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Include starter drawing<\/strong> &#8211; Turning on this toggle allows you to add a drawing or diagram to your question, <a href=\"#starter-drawing\">which you&#8217;ll edit in the third stage<\/a>.<\/li>\n\n\n\n<li><strong>Title <\/strong>&#8211; What you\u2019ll see in the Question Bank to identify this question. To keep your questions well organized, we recommend coming up with a standard schema for the title of your questions. An example: <code>[Senior Engineer] - Turn this CSV into an Array of Objects<\/code>.<\/li>\n\n\n\n<li><strong>Environment<\/strong> &#8211; The programming language or framework the question is expecting a solution in.<\/li>\n<\/ul>\n\n\n\n<blockquote class=\"wp-block-quote\">\n<p>\u2705 You can select <em>Markdown <\/em>or <em>Plain Text<\/em> to create a language-agnostic question.<\/p>\n<\/blockquote>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Difficulty level<\/strong> &#8211; Used by interviewers to note the question difficulty level.<\/li>\n\n\n\n<li><strong>Internal description<\/strong> &#8211; Notes on the question for internal reference in the Question Bank &#8211; include more info about this question for your colleagues.<\/li>\n<\/ul>\n\n\n\n<p>You can also choose to share the draft with your colleagues and allow them to edit the question by clicking on the checkbox at the bottom of the page. You can collaborate with your teammates on the question by sharing the link to the draft.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"add-take-home-test-cases-optional\">Add Take-Home Test Cases (optional)<\/h2>\n\n\n\n<blockquote class=\"wp-block-quote\">\n<p>\u2705If you selected your question to only be used in live interviews, this step will not be present. Skip to <a href=\"#code-elements\" data-type=\"internal\" data-id=\"#code-elements\">adding code elements to your question<\/a> if this is the case<\/p>\n<\/blockquote>\n\n\n\n<p>Test cases are a way to verify a candidate\u2019s solution against a set of return values given a set of inputs.<\/p>\n\n\n<div class=\"wp-block-image is-resized\">\n<figure class=\"aligncenter\"><a href=\"https:\/\/coderpad.io\/wp-content\/uploads\/2021\/10\/img_616768d555770.png\"><img decoding=\"async\" src=\"https:\/\/coderpad.io\/wp-content\/uploads\/2021\/10\/img_616768d555770.png\" alt=\"The &quot;add take-home test cases&quot; page with the solution function signature and test cases displayed. \"\/><\/a><\/figure>\n<\/div>\n\n\n<p>To learn more about test cases, what a function signature is, and how to add and remove test cases, <a href=\"https:\/\/coderpad.io\/resources\/docs\/resources\/docs\/interview\/quick-start-guides\/interviewers\/resources\/docs\/interview\/quick-start-guides\/interviewers\/resources\/docs\/interview\/quick-start-guides\/interviewers\/take-home-projects\/test-cases\/\" data-type=\"URL\" data-id=\"https:\/\/coderpad.io\/resources\/docs\/resources\/docs\/interview\/quick-start-guides\/interviewers\/resources\/docs\/interview\/quick-start-guides\/interviewers\/resources\/docs\/interview\/quick-start-guides\/interviewers\/take-home-projects\/test-cases\/\">please see our docs on test cases<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"add-code-elements\">Add Code Elements<\/h2>\n\n\n\n<p>Next, you&#8217;ll add supporting documentation, files, and databases.<\/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\/02\/image-58.png\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"546\" src=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2023\/02\/image-58-1024x546.png\" alt=\"The &quot;add code elements&quot; page where you enter candidate instructions &amp; follow-on instructions, interview guide\/solution for coworkers, custom databases, and custom files. \" class=\"wp-image-31134\" srcset=\"https:\/\/coderpad.io\/wp-content\/uploads\/2023\/02\/image-58-1024x546.png 1024w, https:\/\/coderpad.io\/wp-content\/uploads\/2023\/02\/image-58-300x160.png 300w, https:\/\/coderpad.io\/wp-content\/uploads\/2023\/02\/image-58-768x410.png 768w, https:\/\/coderpad.io\/wp-content\/uploads\/2023\/02\/image-58-18x10.png 18w, https:\/\/coderpad.io\/wp-content\/uploads\/2023\/02\/image-58.png 1528w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n<\/div>\n\n\n<p><strong>Candidate instructions<\/strong> &#8211; The instructions that will be shown to the candidate. This field is markdown enabled. Filling out the <em>Candidate Instructions<\/em> will ensure that the candidate will be able to view the test instructions no matter what language they select.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote\">\n<p>\ud83d\uddbc\ufe0fTo add an image to the Candidate Instructions, you simply have to enter the image Markdown into the Candidate Instructions text box. Use the following markdown format: <code>![Image title](External image link)<\/code>. Note that the image must be externally hosted and public.&nbsp;<\/p>\n<\/blockquote>\n\n\n\n<p id=\"follow-on-instructions\"><strong>Add Follow-On Instructions<\/strong> &#8211; Selecting this button allows you to create iterative or progressive questions  (up to five more) for your candidates. This lets you start with a simple task and then have the candidate build upon that first task with subsequent tasks to better demonstrate their skill set.<\/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\/02\/image-59.png\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"361\" src=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2023\/02\/image-59-1024x361.png\" alt=\"A second question has been added under &quot;candidate instructions - part 2&quot; section. below that header is a trashcan to delete the question and a toggle to make the quesiton visible to candidates.\" class=\"wp-image-31136\" srcset=\"https:\/\/coderpad.io\/wp-content\/uploads\/2023\/02\/image-59-1024x361.png 1024w, https:\/\/coderpad.io\/wp-content\/uploads\/2023\/02\/image-59-300x106.png 300w, https:\/\/coderpad.io\/wp-content\/uploads\/2023\/02\/image-59-768x271.png 768w, https:\/\/coderpad.io\/wp-content\/uploads\/2023\/02\/image-59-18x6.png 18w, https:\/\/coderpad.io\/wp-content\/uploads\/2023\/02\/image-59.png 1442w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n<\/div>\n\n\n<p>You can select the <strong>Instructions visible to candidates<\/strong> toggle to make the questions visible to the candidates when they first enter the pad. Alternatively you can turn this toggle on\/off in the pad itself during the interview:<\/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-17.png\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"396\" src=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2023\/03\/image-17-1024x396.png\" alt=\"an interview pad is displayed. on the right side of the pad under &quot;instructions&quot; the &quot;not visible to candidate&quot; toggle for instructions part 2 is shown.\" class=\"wp-image-32230\" srcset=\"https:\/\/coderpad.io\/wp-content\/uploads\/2023\/03\/image-17-1024x396.png 1024w, https:\/\/coderpad.io\/wp-content\/uploads\/2023\/03\/image-17-300x116.png 300w, https:\/\/coderpad.io\/wp-content\/uploads\/2023\/03\/image-17-768x297.png 768w, https:\/\/coderpad.io\/wp-content\/uploads\/2023\/03\/image-17-18x7.png 18w, https:\/\/coderpad.io\/wp-content\/uploads\/2023\/03\/image-17.png 1306w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n<\/div>\n\n\n<p>In the <strong>Interview Guide\/Solution<\/strong> text box you\u2019re also able to add guidance for interviewers or the solution the candidate is expected to code, via a markdown enabled note. This helps give the interviewer tips on what to look for in a candidate\u2019s solution, as well as providing the interviewer with potential edge cases or tests to reference as they move through the interview.<\/p>\n\n\n\n<p>Interview questions also support <a href=\"https:\/\/coderpad.io\/resources\/docs\/interview\/databases\/\"><strong>Custom Databases<\/strong><\/a> and <a href=\"https:\/\/coderpad.io\/resources\/docs\/interview\/custom-files\/\"><strong>Custom Files<\/strong><\/a> that you can attach to make your questions more representative of your production codebase.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote\">\n<p>\u26a0\ufe0fIf you&#8217;re creating a question that has a custom database attached to it your candidates will lose access to that database if they switch to a language that is not the one the question was created in. For example, if you create a question in MySQL, the candidate cannot switch to PostgreSQL otherwise they will lose access to the MySQL database in the pad.<\/p>\n<\/blockquote>\n\n\n\n<p>If you have selected one of our most commonly used languages: Java, Javascript, Python 2 &amp; 3, C++, Ruby, C#, or if you have selected PostgreSQL or MySQL from as the default language choice, then you can use a <a href=\"https:\/\/coderpad.io\/resources\/docs\/interview\/databases\/\">Full-Stack database<\/a> with your question. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"add-whiteboard-starter-drawing\">Add whiteboard starter drawing<\/h2>\n\n\n\n<p>If you enabled the <strong>Include starter drawing<\/strong> toggle during the first step, then you&#8217;ll see the <em>Add whiteboard starter drawing<\/em> screen for the third step.<\/p>\n\n\n\n<p>Here you can use the Excalidraw-powered interface to create any diagrams you&#8217;d like to include with your interview question.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><a href=\"https:\/\/coderpad.io\/wp-content\/uploads\/2021\/10\/image-4.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"486\" src=\"https:\/\/coderpad.io\/wp-content\/uploads\/2021\/10\/image-4-1024x486.png\" alt=\"The drawing mode editor screen. There is an image of a database symbol and a box labelled&quot; api1&quot; with a two-way arrow pointing between them.\" class=\"wp-image-42315\" srcset=\"https:\/\/coderpad.io\/wp-content\/uploads\/2021\/10\/image-4-1024x486.png 1024w, https:\/\/coderpad.io\/wp-content\/uploads\/2021\/10\/image-4-300x143.png 300w, https:\/\/coderpad.io\/wp-content\/uploads\/2021\/10\/image-4-768x365.png 768w, https:\/\/coderpad.io\/wp-content\/uploads\/2021\/10\/image-4-1536x730.png 1536w, https:\/\/coderpad.io\/wp-content\/uploads\/2021\/10\/image-4-18x9.png 18w, https:\/\/coderpad.io\/wp-content\/uploads\/2021\/10\/image-4.png 1920w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n<\/div>\n\n\n<p>To access your diagram in a pad, simply open the pad with your question and then select the <strong>Drawing<\/strong> button on the left side of the pad.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><a href=\"https:\/\/coderpad.io\/wp-content\/uploads\/2021\/10\/image-4.jpg\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"505\" src=\"https:\/\/coderpad.io\/wp-content\/uploads\/2021\/10\/image-4-1024x505.jpg\" alt=\"A pad with the drawing mode screen open.\" class=\"wp-image-42312\" srcset=\"https:\/\/coderpad.io\/wp-content\/uploads\/2021\/10\/image-4-1024x505.jpg 1024w, https:\/\/coderpad.io\/wp-content\/uploads\/2021\/10\/image-4-300x148.jpg 300w, https:\/\/coderpad.io\/wp-content\/uploads\/2021\/10\/image-4-768x379.jpg 768w, https:\/\/coderpad.io\/wp-content\/uploads\/2021\/10\/image-4-1536x758.jpg 1536w, https:\/\/coderpad.io\/wp-content\/uploads\/2021\/10\/image-4-18x9.jpg 18w, https:\/\/coderpad.io\/wp-content\/uploads\/2021\/10\/image-4.jpg 1920w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"edit-starter-code\">Edit starter code<\/h2>\n\n\n\n<p>Finally, it\u2019s important to add starter code and review your question.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote\">\n<p>\u2757If your question included <a href=\"#test-cases\" data-type=\"internal\" data-id=\"#test-cases\">test cases<\/a>, the \u201cstarter code\u201d section will be automatically pre-populated with the expected function signature, and cannot be modified.<\/p>\n<\/blockquote>\n\n\n\n<p>In the left-side coding window you can add any templates or code scaffolding you&#8217;d like to be available to the candidate.<\/p>\n\n\n\n<p>Once you complete that step (if needed), you can verify that the other parts of the pad &#8212; like the candidate instructions test cases &#8212; are as you want them to be.<\/p>\n\n\n\n<p>Remember, this is a fully functional pad displayed as the candidate would see it: just hit <strong>Run<\/strong> and you can review and run code, see program output, and verify test-cases passing when intended. <\/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-16.png\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"514\" src=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2023\/03\/image-16-1024x514.png\" alt=\"The test preview page with the starter code on the left and the program output screen on the right. \" class=\"wp-image-32228\" srcset=\"https:\/\/coderpad.io\/wp-content\/uploads\/2023\/03\/image-16-1024x514.png 1024w, https:\/\/coderpad.io\/wp-content\/uploads\/2023\/03\/image-16-300x151.png 300w, https:\/\/coderpad.io\/wp-content\/uploads\/2023\/03\/image-16-768x385.png 768w, https:\/\/coderpad.io\/wp-content\/uploads\/2023\/03\/image-16-18x9.png 18w, https:\/\/coderpad.io\/wp-content\/uploads\/2023\/03\/image-16.png 1287w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n<\/div>\n\n\n<blockquote class=\"wp-block-quote\">\n<p>\u2705Keep in mind that the preview pad will not display hidden test cases in this view to accurately show what a candidate will see. To review hidden test cases, return to the test cases step.<\/p>\n<\/blockquote>\n\n\n\n<p>Once you&#8217;ve finished setup of your app, click <strong>Save<\/strong> and <strong>Promote To Active Question<\/strong> to add your question to the Question Bank.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<p><br><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"creating-multi-file-questions\">Creating multi-file questions<\/h2>\n\n\n\n<p>Start by navigating to the <a href=\"https:\/\/app.coderpad.io\/dashboard\/questions\" target=\"_blank\" rel=\"noreferrer noopener\">Question Bank in your dashboard<\/a> and then click <strong>Create Question<\/strong>.<\/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-18.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-18-1024x500.png\" alt=\"The question bank screen with the &quot;create question&quot; button at the top right of the screen.\" class=\"wp-image-32234\" srcset=\"https:\/\/coderpad.io\/wp-content\/uploads\/2023\/03\/image-18-1024x500.png 1024w, https:\/\/coderpad.io\/wp-content\/uploads\/2023\/03\/image-18-300x146.png 300w, https:\/\/coderpad.io\/wp-content\/uploads\/2023\/03\/image-18-768x375.png 768w, https:\/\/coderpad.io\/wp-content\/uploads\/2023\/03\/image-18-1536x750.png 1536w, https:\/\/coderpad.io\/wp-content\/uploads\/2023\/03\/image-18-18x9.png 18w, https:\/\/coderpad.io\/wp-content\/uploads\/2023\/03\/image-18.png 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n<\/div>\n\n\n<blockquote class=\"wp-block-quote\">\n<p>\u2757<em>Select only \u201cLive Question\u201d at this time for framework questions \u2013 support for Take-Homes will be available at a later time<\/em>.<\/p>\n<\/blockquote>\n\n\n\n<p>You may need to remove the default language in the <strong>Environment <\/strong>field in order to change the question language. To do so, simply click on the x next to the language.<\/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\/11\/image-8.png\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"117\" height=\"66\" src=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2022\/11\/image-8.png\" alt=\"In the &quot;environment&quot; section React is shown with an x highlighted next to it.\" class=\"wp-image-23797\" srcset=\"https:\/\/coderpad.io\/wp-content\/uploads\/2022\/11\/image-8.png 117w, https:\/\/coderpad.io\/wp-content\/uploads\/2022\/11\/image-8-18x10.png 18w\" sizes=\"auto, (max-width: 117px) 100vw, 117px\" \/><\/a><\/figure>\n<\/div>\n\n\n<p>Then, in <strong>Environment <\/strong>field, choose one of the multi-file supported frameworks (ex: React, NodeJS, Vue, etc.).<\/p>\n\n\n\n<p><\/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-23.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"604\" src=\"https:\/\/coderpad.io\/wp-content\/uploads\/2023\/11\/image-23-1024x604.png\" alt=\"The language selection list is shown.\" class=\"wp-image-37294\" srcset=\"https:\/\/coderpad.io\/wp-content\/uploads\/2023\/11\/image-23-1024x604.png 1024w, https:\/\/coderpad.io\/wp-content\/uploads\/2023\/11\/image-23-300x177.png 300w, https:\/\/coderpad.io\/wp-content\/uploads\/2023\/11\/image-23-768x453.png 768w, https:\/\/coderpad.io\/wp-content\/uploads\/2023\/11\/image-23-18x12.png 18w, https:\/\/coderpad.io\/wp-content\/uploads\/2023\/11\/image-23.png 1194w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n<\/div>\n\n\n<p>Next, fill in all other fields as you normally would in the rest of Step 1 and in Step 2.<\/p>\n\n\n\n<p>In Step 3, you&#8217;ll see your starter template. <strong>These files can be directly edited in this view.<\/strong> You can add files and folders, delete or rename existing files, etc. in order to build out the starting environment you want the candidate to work with.<\/p>\n\n\n\n<p>You can also update the provided README file to share any additional info with candidates, or you can return to Step 2 and provide additional info for your candidates in the Candidate Instructions field.<\/p>\n\n\n\n<figure class=\"wp-block-video aligncenter\"><video height=\"768\" style=\"aspect-ratio: 1660 \/ 768;\" width=\"1660\" autoplay controls loop muted src=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2022\/08\/questiongif.mp4\"><\/video><\/figure>\n\n\n\n<p>You&#8217;ll be able to preview changes to your app in real time in Step 3 by pressing the Run button.<\/p>\n\n\n\n<p>Once you&#8217;ve finished setup of your app, click <strong>Save<\/strong> and <strong>Promote To Active Question<\/strong>.<\/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\/08\/image-13.png\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"477\" src=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2022\/08\/image-13-1024x477.png\" alt=\"The question preview window with a pop up that says &quot;Question saved as a draft!&quot; You can then select either to promote to active question or view drafts in the drafts tab.\" class=\"wp-image-12042\" srcset=\"https:\/\/coderpad.io\/wp-content\/uploads\/2022\/08\/image-13-1024x477.png 1024w, https:\/\/coderpad.io\/wp-content\/uploads\/2022\/08\/image-13-300x140.png 300w, https:\/\/coderpad.io\/wp-content\/uploads\/2022\/08\/image-13-768x358.png 768w, https:\/\/coderpad.io\/wp-content\/uploads\/2022\/08\/image-13-1536x716.png 1536w, https:\/\/coderpad.io\/wp-content\/uploads\/2022\/08\/image-13.png 1655w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n<\/div>\n\n\n<p>Then you can create a pad from this question or load it into a pad, just like for any other 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-57.png\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"470\" src=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2022\/11\/image-57-1024x470.png\" alt=\"The multifile UI with the READme.md file displayed.\" class=\"wp-image-24260\" srcset=\"https:\/\/coderpad.io\/wp-content\/uploads\/2022\/11\/image-57-1024x470.png 1024w, https:\/\/coderpad.io\/wp-content\/uploads\/2022\/11\/image-57-300x138.png 300w, https:\/\/coderpad.io\/wp-content\/uploads\/2022\/11\/image-57-768x352.png 768w, https:\/\/coderpad.io\/wp-content\/uploads\/2022\/11\/image-57-1536x704.png 1536w, https:\/\/coderpad.io\/wp-content\/uploads\/2022\/11\/image-57-18x8.png 18w, https:\/\/coderpad.io\/wp-content\/uploads\/2022\/11\/image-57.png 1904w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n<\/div>\n\n\n<blockquote class=\"wp-block-quote\">\n<p>\u2705 At this time the questions and associated app will be need to be set up for a specific frontend framework, you will not be able to automatically load a Vue question into an Angular Pad.&nbsp;<\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"drafts-and-collaboration\">Drafts and Collaboration<\/h2>\n\n\n\n<p>We&#8217;ve added draft functionality to questions. A new draft is created in your Question Bank <strong>Drafts <\/strong>tab as soon as you complete the first question creation step.&nbsp;<\/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\/09\/image-12.png\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"343\" src=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2022\/09\/image-12-1024x343.png\" alt=\"A draft tab of the question bank shows a list of questions in draft along with their creators and error statuses.\" class=\"wp-image-16703\" srcset=\"https:\/\/coderpad.io\/wp-content\/uploads\/2022\/09\/image-12-1024x343.png 1024w, https:\/\/coderpad.io\/wp-content\/uploads\/2022\/09\/image-12-300x101.png 300w, https:\/\/coderpad.io\/wp-content\/uploads\/2022\/09\/image-12-768x258.png 768w, https:\/\/coderpad.io\/wp-content\/uploads\/2022\/09\/image-12-1536x515.png 1536w, https:\/\/coderpad.io\/wp-content\/uploads\/2022\/09\/image-12.png 1598w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n<\/div>\n\n\n<p>As you progress through the steps of creating a question, it continues to be saved on each step. This means you don&#8217;t have to create the entire question in a single session, you can come back to it later on.<\/p>\n\n\n\n<p>Once you&#8217;re done editing you&#8217;re draft, click <strong>Save <\/strong>to finalize it- you can then choose to view the draft in your drafts tab, or publish it as an active question ready to be used in interviews.&nbsp;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><a href=\"https:\/\/coderpad.io\/wp-content\/uploads\/2021\/10\/img_616768fa24fef.png\"><img decoding=\"async\" src=\"https:\/\/coderpad.io\/wp-content\/uploads\/2021\/10\/img_616768fa24fef.png\" alt=\"A draft tab of the question bank shows a list of questions in draft. On of the questions has the row dropdown selected with the &quot;preview question&quot;, &quot;publish&quot;, and &quot;delete&quot; options displayed.\"\/><\/a><\/figure>\n<\/div>\n\n\n<p><br><\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<p><br><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"using-a-question-in-a-pad\">Using a question in a pad<\/h2>\n\n\n\n<p>There are two ways to add a question to a pad &#8212; create a pad with the question or add the question from within the pad:<\/p>\n\n\n\n<p id=\"creating-a-pad-with-a-question\"><strong>1. Creating a pad with a question<\/strong><\/p>\n\n\n\n<p>You can create a pad directly from the Question Bank. Simply find the question that you would like to use and click the <strong>Create Live Pad<\/strong> or <strong>Create Take-Home<\/strong> button. <\/p>\n\n\n<div class=\"wp-block-image is-resized\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2022\/05\/image-16.png\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"799\" height=\"535\" src=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2022\/05\/image-16.png\" alt=\"The question bank, some rows have a &quot;Create take home&quot; button, some have &quot;create live pad&quot;, and others have a &quot;Create pad&quot; button that lets you select either a live pad or a take home.\" class=\"wp-image-7207\" srcset=\"https:\/\/coderpad.io\/wp-content\/uploads\/2022\/05\/image-16.png 799w, https:\/\/coderpad.io\/wp-content\/uploads\/2022\/05\/image-16-300x201.png 300w, https:\/\/coderpad.io\/wp-content\/uploads\/2022\/05\/image-16-768x514.png 768w\" sizes=\"auto, (max-width: 799px) 100vw, 799px\" \/><\/a><\/figure>\n<\/div>\n\n\n<p>A new pad will be created with your question preloaded. You can also preview the question from the expanded view.<\/p>\n\n\n\n<p id=\"using-a-question-in-a-pad\"><strong>2. Add a question from within the pad<\/strong><\/p>\n\n\n\n<p>It\u2019s simple to load a question from the IDE view. Once you&#8217;re in the pad, click on the <strong>Questions<\/strong> button (1) and then find the question you want by scrolling down the list, using the search bar, or using the pre-built filters (2).<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><a href=\"https:\/\/coderpad.io\/wp-content\/uploads\/2021\/10\/image-3.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"486\" src=\"https:\/\/coderpad.io\/wp-content\/uploads\/2021\/10\/image-3-1024x486.png\" alt=\"\" class=\"wp-image-40821\" srcset=\"https:\/\/coderpad.io\/wp-content\/uploads\/2021\/10\/image-3-1024x486.png 1024w, https:\/\/coderpad.io\/wp-content\/uploads\/2021\/10\/image-3-300x143.png 300w, https:\/\/coderpad.io\/wp-content\/uploads\/2021\/10\/image-3-768x365.png 768w, https:\/\/coderpad.io\/wp-content\/uploads\/2021\/10\/image-3-1536x730.png 1536w, https:\/\/coderpad.io\/wp-content\/uploads\/2021\/10\/image-3-18x9.png 18w, https:\/\/coderpad.io\/wp-content\/uploads\/2021\/10\/image-3.png 1920w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n<\/div>\n\n\n<p>Once you select the question, you can preview it on the right screen (3). If you want to append that question to a language or question that you already have open, then select the <strong>Append question to current tab<\/strong> box. When you&#8217;re finished, click <strong>Add Question<\/strong> to add the question to the pad (5).<\/p>\n\n\n\n<p><\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"edit-an-existing-question\">Edit an existing question<\/h2>\n\n\n\n<p>If you want to update an existing question, navigate to the question you want to edit in the Question Bank, select the additional options menu, and then select <strong>Edit<\/strong>:<\/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-56.png\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"200\" src=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2023\/03\/image-56-1024x200.png\" alt=\"A question bank row is shown the the question options dropdown shown: preview question, edit, edit a copy, and delete. \" class=\"wp-image-32371\" srcset=\"https:\/\/coderpad.io\/wp-content\/uploads\/2023\/03\/image-56-1024x200.png 1024w, https:\/\/coderpad.io\/wp-content\/uploads\/2023\/03\/image-56-300x59.png 300w, https:\/\/coderpad.io\/wp-content\/uploads\/2023\/03\/image-56-768x150.png 768w, https:\/\/coderpad.io\/wp-content\/uploads\/2023\/03\/image-56-18x4.png 18w, https:\/\/coderpad.io\/wp-content\/uploads\/2023\/03\/image-56.png 1334w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n<\/div>\n\n\n<p>This will load your existing question data into <a href=\"https:\/\/coderpad.io\/resources\/docs\/interview\/question-bank\/creating-a-question\/\">the question wizard<\/a><a href=\"https:\/\/coderpad.io\/resources\/docs\/interview\/question-bank\/creating-a-question\/\" data-type=\"URL\" data-id=\"https:\/\/coderpad.io\/resources\/docs\/interview\/question-bank\/creating-a-question\/\">,<\/a> and you can make updates as needed.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote\">\n<p>\u2757Keep in mind that <a href=\"https:\/\/coderpad.io\/resources\/docs\/resources\/docs\/interview\/quick-start-guides\/interviewers\/resources\/docs\/interview\/quick-start-guides\/interviewers\/resources\/docs\/interview\/quick-start-guides\/interviewers\/take-home-projects\/test-cases\/\">test cases<\/a> are currently only available for take-homes questions. If you add live interview type to an existing question with test cases, it will remove the test cases.<\/p>\n\n\n\n<p>If you\u2019ve toggled the question type and accidentally removed test cases, you can close the tab before saving on the final step &#8211; this will revert your changes and bring the test cases back.<\/p>\n<\/blockquote>\n","protected":false},"parent":1929,"menu_order":0,"template":"","class_list":["post-2933","doc","type-doc","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/doc\/2933","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":106,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/doc\/2933\/revisions"}],"predecessor-version":[{"id":42317,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/doc\/2933\/revisions\/42317"}],"up":[{"embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/doc\/1929"}],"wp:attachment":[{"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/media?parent=2933"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}