{"id":7600,"date":"2022-06-14T09:32:19","date_gmt":"2022-06-14T16:32:19","guid":{"rendered":"https:\/\/coderpad.io\/?post_type=doc&#038;p=7600"},"modified":"2026-02-25T04:46:27","modified_gmt":"2026-02-25T12:46:27","slug":"playback-mode","status":"publish","type":"doc","link":"https:\/\/coderpad.io\/resources\/docs\/interview\/pads\/playback-mode\/","title":{"rendered":"Playback &amp; Pad Summary"},"content":{"rendered":"\n<p>During an interview, the Interview platform keeps track of every keystroke of every participant within a pad.&nbsp;<\/p>\n\n\n\n<p>Once the interview has been ended, interviewers can replay the entire interview and access the pad summary. This is useful to review a candidate&#8217;s solution, write up feedback and also to share the interview session with other teammates.<\/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=\"#playback-mode\">Playback mode<\/a><ul><li class=\"\"><a href=\"#how-to-access-playback-mode\">How to access Playback Mode<\/a><\/li><li class=\"\"><a href=\"#using-playback-mode\">Using Playback Mode<\/a><\/li><li class=\"\"><a href=\"#suspicious-behavior-notifications\">Suspicious behavior notifications<\/a><ul><li class=\"\"><a href=\"#copy-paste-notifications\">Copy\/paste notifications<\/a><\/li><li class=\"\"><a href=\"#candidate-left-ide-notifications\">Candidate left IDE notifications<\/a><\/li><\/ul><\/li><li class=\"\"><a href=\"#c\">Copy-all notifications<\/a><\/li><\/ul><\/li><li class=\"\"><a href=\"#p\">Pad summary<\/a><\/li><li class=\"\"><a href=\"#s\">Share pad contents<\/a><\/li><\/ul><\/nav><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"playback-mode\">Playback mode<\/h2>\n\n\n\n<blockquote class=\"wp-block-quote\">\n<p>\u26a0\ufe0fOnly code changes on the left window will be shown in the playback. Any code run in the shell (like REPL commands or package installations) will not be displayed in playback mode.<\/p>\n<\/blockquote>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"how-to-access-playback-mode\"><strong>How to access Playback Mode<\/strong><\/h3>\n\n\n\n<p>There are two ways to view playback in the pad.<\/p>\n\n\n\n<p>1. The pad will automatically transition to Playback Mode once the interviewer clicks <strong>End Interview<\/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\/05\/img_628fe1fb16c88.png\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2022\/05\/img_628fe1fb16c88.png\" alt=\"Playback mode screen with an arrow pointing to the play button in the control bar.\"\/><\/a><figcaption class=\"wp-element-caption\">Playback Mode. Start playback with the &#8220;play&#8221; button in the top track, or choose one of the other participant tracks.<\/figcaption><\/figure>\n<\/div>\n\n\n<p>2. It&#8217;s also available in the <em>Pads List<\/em> after the interview has been ended:<\/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-53.png\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"36\" src=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2023\/03\/image-53-1024x36.png\" alt=\"A pads list with an arrow pointing to the playback button of a specific pad row.\" class=\"wp-image-32364\" srcset=\"https:\/\/coderpad.io\/wp-content\/uploads\/2023\/03\/image-53-1024x36.png 1024w, https:\/\/coderpad.io\/wp-content\/uploads\/2023\/03\/image-53-300x11.png 300w, https:\/\/coderpad.io\/wp-content\/uploads\/2023\/03\/image-53-768x27.png 768w, https:\/\/coderpad.io\/wp-content\/uploads\/2023\/03\/image-53-18x1.png 18w, https:\/\/coderpad.io\/wp-content\/uploads\/2023\/03\/image-53.png 1335w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"using-playback-mode\"><strong>Using Playback Mode<\/strong><\/h3>\n\n\n\n<p>Playback mode displays a separate track for each participant in the pad to clearly highlight individual code edits and runs.<\/p>\n\n\n\n<p>You can review the playback for each participant by using the \u201cexpand arrow\u201d (1) and then selecting the participant (3) for which you\u2019d like to view the playback. The top progress bar (2) represents the progress for the selected participant:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2022\/05\/img_628fe1fcd9ef8.png\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2022\/05\/img_628fe1fcd9ef8.png\" alt=\"Playback mode screen with a 1 next to the collapsible arrow on the control bar, a 2 next to the control bar itself, and a 3 next to the different users involved in the playback.\"\/><\/a><\/figure>\n\n\n\n<p>When playback first loads, the top progress bar (2) will display by default the participant with the most code edits.<\/p>\n\n\n\n<p>The track will follow active edits for that participant. Other participants\u2019 edits may show up in the background, but if the active participant is not making any edits, we automatically fast forward through all other edits. To change focus to a different participant&#8217;s edits, click on their track to switch.<\/p>\n\n\n\n<p>You can use your mouse to click or drag the slider on any of the progress bars to skip forward or backward in the playback. Alternatively you can use your arrow keys to move forward or backward as well.<\/p>\n\n\n\n<p>Next to the slider for each individual in the pad you\u2019ll see:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Edits <\/strong>\u2013 Equivalent to a couple keystrokes, depending on typing speed.<\/li>\n\n\n\n<li><strong>Runs <\/strong>\u2013 The number of times the participant ran their code to produce output.<\/li>\n<\/ul>\n\n\n\n<p>Other controls to be aware of:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Back Button<\/strong> \u2013 skips back 5 edits<\/li>\n\n\n\n<li><strong>Speed Control<\/strong> \u2013 can adjust playback speed from 1x-8x<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2022\/05\/img_628fe1fe110a0.png\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2022\/05\/img_628fe1fe110a0.png\" alt=\"Playback mode screen with a 1 next to the rewind button and a 2 next to the playback speed multiplier.\"\/><\/a><\/figure>\n\n\n\n<blockquote class=\"wp-block-quote\">\n<p>\u2705 With the new tabbed UI, The playback will automatically switch between tabs and\/or files in the order that they happened in the interview.<\/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\/2022\/09\/playbackmp4.mp4\"><\/video><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"suspicious-behavior-notifications\"><strong>Suspicious behavior notifications<\/strong><\/h3>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"copy-paste-notifications\"><strong>Copy\/paste notifications<\/strong><\/h4>\n\n\n\n<p>Pasting events from sources outside the pad are highlighted to assist you in detecting potential cheating. <\/p>\n\n\n\n<p>In the playback bar you&#8217;ll see a yellow dot every time a user has copied content from a source outside the pad &#8212; when you hover over it you&#8217;ll see a <em>Code pasted<\/em> message pop up: <\/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-2.png\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"497\" src=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2023\/04\/image-2-1024x497.png\" alt=\"The playback menu is shown. The progress bar is magnified where the mouse hovers over a yellow button with the &quot;code pasted&quot; pop up shown.\" class=\"wp-image-33038\" srcset=\"https:\/\/coderpad.io\/wp-content\/uploads\/2023\/04\/image-2-1024x497.png 1024w, https:\/\/coderpad.io\/wp-content\/uploads\/2023\/04\/image-2-300x146.png 300w, https:\/\/coderpad.io\/wp-content\/uploads\/2023\/04\/image-2-768x373.png 768w, https:\/\/coderpad.io\/wp-content\/uploads\/2023\/04\/image-2-1536x746.png 1536w, https:\/\/coderpad.io\/wp-content\/uploads\/2023\/04\/image-2-18x9.png 18w, https:\/\/coderpad.io\/wp-content\/uploads\/2023\/04\/image-2.png 1920w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n<\/div>\n\n\n<p>You can click on that yellow dot to jump to the paste event to evaluate it to see if it meets your criteria for cheating.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote\">\n<p>\u2705 The notification trigger on external pastes from <strong>outside of the CoderPad Interview code editor<\/strong>. That means that a candidate could copy from the AI Assist tab of Interview and still trigger the copy\/paste notification.<\/p>\n<\/blockquote>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"candidate-left-ide-notifications\"><strong>Candidate left IDE notifications<\/strong><\/h4>\n\n\n\n<p>On the playback bar you&#8217;ll also see orange dots on where the candidate&#8217;s browser is no longer focused on the IDE.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><a href=\"https:\/\/coderpad.io\/wp-content\/uploads\/2022\/06\/image.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"124\" src=\"https:\/\/coderpad.io\/wp-content\/uploads\/2022\/06\/image-1024x124.png\" alt=\"The image shows a playback timeline from a coding or interview session in CoderPad. The timeline represents the activity of a participant named &quot;Cheaty McC...&quot;.\n\n- The timeline is marked with various colored indicators that represent different actions during the session.\n- The cursor is hovering over a red marker on the timeline, and a tooltip appears with the text **&quot;Clicked away for 19 seconds&quot;**. This indicates that the participant left the CoderPad window for 19 seconds at that point in the session.\n- Other markers on the timeline, such as yellow and white dots, likely represent different events or actions taken by the participant.\n\nThe playback controls to the left allow the reviewer to navigate through the timeline, and the indicator shows the playback speed, set to &quot;1x&quot; in this instance.\" class=\"wp-image-40806\" style=\"width:1024px;height:auto\" srcset=\"https:\/\/coderpad.io\/wp-content\/uploads\/2022\/06\/image-1024x124.png 1024w, https:\/\/coderpad.io\/wp-content\/uploads\/2022\/06\/image-300x36.png 300w, https:\/\/coderpad.io\/wp-content\/uploads\/2022\/06\/image-768x93.png 768w, https:\/\/coderpad.io\/wp-content\/uploads\/2022\/06\/image-18x2.png 18w, https:\/\/coderpad.io\/wp-content\/uploads\/2022\/06\/image.png 1169w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n<\/div>\n\n\n<p>As with the copy\/paste notifications, you can click on the orange dot to jump to the &#8220;clicked away&#8221; event to evaluate it to see if it meets your criteria for cheating.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"c\">Copy-all notifications<\/h3>\n\n\n\n<p>This alert will appear when a candidate copies all the code in a file. This will trigger repeatedly if code is copied in different files, or if the same file has its code copied multiple times.&nbsp;This will also be available after the pad is ended in the Pad Summary.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote\">\n<p>\u26a0\ufe0f Pasted code and leaving the IDE does not always equal cheating. While the candidate could be copying code from sources like StackOverflow or ChatGPT, they could also simply be pasting code that they&#8217;ve been writing in their own IDE or editor like Notepad++. Also note that using the browser console will count as a &#8216;left event&#8217; because the console is a technically different browser tab, even though it&#8217;s not rendered that way.<\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"p\">Pad summary<\/h2>\n\n\n\n<p>If you click on the <em>Interview Summary<\/em> tab on the right side of the playback pad, you can see a summarized version of interview details, attendance, code and questions, and suspicious behavior.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><a href=\"https:\/\/coderpad.io\/wp-content\/uploads\/2022\/06\/image-1.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"1005\" src=\"https:\/\/coderpad.io\/wp-content\/uploads\/2022\/06\/image-1-1024x1005.png\" alt=\"Screenshot of pad summary detailing the activities during a coding interview for a Senior Front-End position. Here\u2019s a breakdown of the key sections:\n\nInterview Details: The interview started on 09\/05\/2024 at 10:00 AM PST, titled for a Senior Front-End Interview with Sarah B., lasting a total of 55 minutes.\n\nAttendance:\n\nMasha waited in the waiting room for 12 minutes.\nLuke and Sarah, identified as company participants, joined at different times. Masha joined on 09\/06\/2024 at 12:03 PM PST.\nTalk Time: Masha spoke for 22 minutes, and Sarah spoke for 24 minutes.\n\nCode and Questions:\n\nTab 1 (Ruby): No specific question was used. Masha executed the code 12 times, spending 20 minutes in this tab.\nTab 2 (React): The question involved was related to a Node\/React full-stack shopping cart, with three files edited over 22 minutes.\nDrawing: Masha spent 11 minutes on a drawing section, likely sketching ideas or UI elements.\nSuspicious Behavior:\n\nThe candidate had three left-pad events totaling 12 minutes, though they did not fully leave the pad.\nThere were seven pastes from external sources, totaling 134 lines of pasted code. However, it is noted that no code was pasted directly from external sources.\" class=\"wp-image-41344\" srcset=\"https:\/\/coderpad.io\/wp-content\/uploads\/2022\/06\/image-1-1024x1005.png 1024w, https:\/\/coderpad.io\/wp-content\/uploads\/2022\/06\/image-1-300x295.png 300w, https:\/\/coderpad.io\/wp-content\/uploads\/2022\/06\/image-1-768x754.png 768w, https:\/\/coderpad.io\/wp-content\/uploads\/2022\/06\/image-1-1536x1508.png 1536w, https:\/\/coderpad.io\/wp-content\/uploads\/2022\/06\/image-1-12x12.png 12w, https:\/\/coderpad.io\/wp-content\/uploads\/2022\/06\/image-1.png 1864w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n<\/div>\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"s\">Share pad contents<\/h2>\n\n\n\n<p>Want to share results with team members not on CoderPad? You can download the candidate&#8217;s code either as a <code>.zip<\/code>. or <code>.json<\/code> file by clicking on the kebab icon next to the pad and selecting <strong>Download ZIP<\/strong> or <strong>Download JSON<\/strong>.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><a href=\"https:\/\/coderpad.io\/wp-content\/uploads\/2022\/06\/image-3.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"249\" src=\"https:\/\/coderpad.io\/wp-content\/uploads\/2022\/06\/image-3-1024x249.png\" alt=\"Alt text:\nScreenshot of a CoderPad dashboard showing a list of coding sessions. A red arrow points to the vertical three-dot menu next to one session, which is expanded to reveal options including \u201cDownload Zip\u201d and \u201cDownload JSON,\u201d with \u201cDownload Zip\u201d highlighted.\" class=\"wp-image-42819\" srcset=\"https:\/\/coderpad.io\/wp-content\/uploads\/2022\/06\/image-3-1024x249.png 1024w, https:\/\/coderpad.io\/wp-content\/uploads\/2022\/06\/image-3-300x73.png 300w, https:\/\/coderpad.io\/wp-content\/uploads\/2022\/06\/image-3-768x187.png 768w, https:\/\/coderpad.io\/wp-content\/uploads\/2022\/06\/image-3-18x4.png 18w, https:\/\/coderpad.io\/wp-content\/uploads\/2022\/06\/image-3.png 1441w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n<\/div>\n\n\n<blockquote class=\"wp-block-quote\">\n<p>\u2705 The candidate&#8217;s code is only available to download once the pad has been ended.<\/p>\n<\/blockquote>\n\n\n\n<p><\/p>\n","protected":false},"parent":835,"menu_order":8,"template":"","class_list":["post-7600","doc","type-doc","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/doc\/7600","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":29,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/doc\/7600\/revisions"}],"predecessor-version":[{"id":44099,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/doc\/7600\/revisions\/44099"}],"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=7600"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}