{"id":8899,"date":"2022-08-30T11:22:12","date_gmt":"2022-08-30T18:22:12","guid":{"rendered":"https:\/\/coderpad.io\/?post_type=doc&#038;p=8899"},"modified":"2024-08-22T10:28:57","modified_gmt":"2024-08-22T17:28:57","slug":"code-playback","status":"publish","type":"doc","link":"https:\/\/coderpad.io\/resources\/docs\/screen\/candidate-reports\/code-playback\/","title":{"rendered":"Code playback"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Reviewing candidate code<\/h2>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<lite-youtube\n    videoid=\"fUbtr35YfAg\"\n            params=\"rel=0\"\n        style=\"background-image: url('https:\/\/i.ytimg.com\/vi\/fUbtr35YfAg\/maxresdefault.jpg');\">\n  <a href=\"https:\/\/youtu.be\/fUbtr35YfAg\" class=\"lty-playbtn\" title=\"Play Video\" target=\"_blank\" rel=\"noopener\">\n            <span class=\"lyt-visually-hidden\">Play Video: Code Playback<\/span>\n      <\/a>\n<\/lite-youtube>\n\n<\/div><\/figure>\n\n\n\n<blockquote class=\"wp-block-quote\">\n<p>\ud83d\udcbb You can explore playback yourself with <a href=\"https:\/\/www.codingame.com\/work\/code-replay-demo\/18911594\/16737\" target=\"_blank\" rel=\"noopener\">this interactive demo<\/a>.<\/p>\n<\/blockquote>\n\n\n\n<p><\/p>\n\n\n\n<p>When a candidate finishes a test and you receive their test report, you can find out more about how they code and problem solve by using the code playback feature.<\/p>\n\n\n\n<p>For programming, game, and free-text questions, Screen makes a recording of all your candidate\u2019s coding activity during a test. You can watch how your candidate built their algorithm, when they left the environment, when and what they pasted from external sources, and what happened when they ran their code.&nbsp;<\/p>\n\n\n\n<p>To see this, first go to your candidate\u2019s detailed report and pick a programming question you want to know more about.<\/p>\n\n\n\n<p>Then click the play button \u25b6\ufe0f at the bottom of the screen to see the playback.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"920\" src=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2022\/08\/image-64.png\" alt=\"The playback screen with candidate code at the top and a highlighted &quot;play&quot; symbol at the bottom.\" class=\"wp-image-15901\" srcset=\"https:\/\/coderpad.io\/wp-content\/uploads\/2022\/08\/image-64.png 1024w, https:\/\/coderpad.io\/wp-content\/uploads\/2022\/08\/image-64-300x270.png 300w, https:\/\/coderpad.io\/wp-content\/uploads\/2022\/08\/image-64-768x690.png 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Speed up or slow down the playback (from x0.5 to x8 seconds) by clicking the number in the bottom left. You can also pause the recording at any time.&nbsp;<\/p>\n\n\n\n<p>The timeline has different color segments:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Green <\/strong>when your candidate runs or submits code.<\/li>\n\n\n\n<li><strong>Orange<\/strong> when your candidate is writing code.<\/li>\n\n\n\n<li><strong>Red <\/strong>when your candidate pastes code.<\/li>\n\n\n\n<li><strong>Dark grey<\/strong> when your candidate leaves or comes back to the test.<\/li>\n\n\n\n<li><strong>Light grey<\/strong> to show how long your candidate spent outside of the Screen test.<\/li>\n<\/ul>\n\n\n\n<p>Click <strong>Run this code<\/strong> to run the candidate&#8217;s code at any time.<\/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\/run-this-code.jpg\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"919\" src=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2022\/08\/run-this-code-1024x919.jpg\" alt=\"The playback screen with candidate code at the top portion of the screen. In the top right an arrow points to the &quot;run this code&quot; button&quot;.\" class=\"wp-image-15661\" srcset=\"https:\/\/coderpad.io\/wp-content\/uploads\/2022\/08\/run-this-code-1024x919.jpg 1024w, https:\/\/coderpad.io\/wp-content\/uploads\/2022\/08\/run-this-code-300x269.jpg 300w, https:\/\/coderpad.io\/wp-content\/uploads\/2022\/08\/run-this-code-768x690.jpg 768w, https:\/\/coderpad.io\/wp-content\/uploads\/2022\/08\/run-this-code.jpg 1370w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n<\/div>\n\n\n<p>You will then see the code editor open in a new tab where you can test your candidate\u2019s solution by selecting <strong>Test Your Code<\/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\/08\/image-114.jpg\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"486\" src=\"https:\/\/coderpad.io\/wp-content\/uploads\/2022\/08\/image-114-1024x486.jpg\" alt=\"The code editor for a particular coding exercise is displayed along with candidate code. An arrow points to the bottom of the screen at the &quot;run all tests&quot; button.\" class=\"wp-image-40567\" srcset=\"https:\/\/coderpad.io\/wp-content\/uploads\/2022\/08\/image-114-1024x486.jpg 1024w, https:\/\/coderpad.io\/wp-content\/uploads\/2022\/08\/image-114-300x143.jpg 300w, https:\/\/coderpad.io\/wp-content\/uploads\/2022\/08\/image-114-768x365.jpg 768w, https:\/\/coderpad.io\/wp-content\/uploads\/2022\/08\/image-114-1536x730.jpg 1536w, https:\/\/coderpad.io\/wp-content\/uploads\/2022\/08\/image-114-18x9.jpg 18w, https:\/\/coderpad.io\/wp-content\/uploads\/2022\/08\/image-114.jpg 1920w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n<\/div>\n\n\n<p>The result appears in the <strong>Console output<\/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\/08\/image-114.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"486\" src=\"https:\/\/coderpad.io\/wp-content\/uploads\/2022\/08\/image-114-1024x486.png\" alt=\"The code editor for a particular coding exercise is displayed along with candidate code. In the bottom left the &quot;console output&quot; window is highlighted. \" class=\"wp-image-40569\" srcset=\"https:\/\/coderpad.io\/wp-content\/uploads\/2022\/08\/image-114-1024x486.png 1024w, https:\/\/coderpad.io\/wp-content\/uploads\/2022\/08\/image-114-300x143.png 300w, https:\/\/coderpad.io\/wp-content\/uploads\/2022\/08\/image-114-768x365.png 768w, https:\/\/coderpad.io\/wp-content\/uploads\/2022\/08\/image-114-1536x730.png 1536w, https:\/\/coderpad.io\/wp-content\/uploads\/2022\/08\/image-114-18x9.png 18w, https:\/\/coderpad.io\/wp-content\/uploads\/2022\/08\/image-114.png 1920w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n<\/div>\n\n\n<p><\/p>\n","protected":false},"parent":8897,"menu_order":0,"template":"","class_list":["post-8899","doc","type-doc","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/doc\/8899","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":33,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/doc\/8899\/revisions"}],"predecessor-version":[{"id":40571,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/doc\/8899\/revisions\/40571"}],"up":[{"embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/doc\/8897"}],"wp:attachment":[{"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/media?parent=8899"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}