Hacktoberfest 2026：メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

Add an example drawing area to coding interviews

オープン
  • 何か問題がありますか？
#255 コメント 0 件 リアクション 0 件 担当者 1 名 GitHub で見る

メンテナーはふだん 1 日以内に返信

@Chuyutseng がすでに取り組んでいます。

2026年10月8日 から。

  • #262 @Chuyutseng による — オープン

評価

難易度
4/5
見積もり時間
3〜5日
初心者へのやさしさ
55/100
issue の種類
機能追加
明瞭さ
おおむね明確
活発さ
活発
技術スタック
rust
領域
full-stack

調査の方向性

Start by locating the Whiteboard Interview Mode implementation and the interview page layout it diverges from — the proposal explicitly says to reuse the whiteboard's image-export/delivery mechanism for the interviewer view. Map where the editor, test runner and tabs/panels are composed in the interview workspace to decide where the Code | Example tab or expandable panel attaches. Done looks like: a canvas with pen, eraser, rectangle, circle, line, arrow, undo/redo and clear, living alongside the existing editor and test flow, with the current drawing delivered to the interviewer on content change. No file, test or entry point is named in the issue, so scope and layout decisions remain with the maintainer.

索引モデルが issue の本文から書いたものです。

説明

Motivation

During a normal coding interview, candidates often need to explain an example input, output, or data structure before or while writing code.

For problems involving trees, linked lists, graphs, arrays, pointer movement, or intermediate algorithm states, a visual explanation can be clearer than describing everything verbally or drawing ASCII diagrams inside code comments.

CodeTrial already provides a separate Whiteboard Interview Mode, but that mode replaces the editor and test workflow. This proposal is different: it keeps the existing coding interview experience and adds a drawing area that can be used together with the editor and test runner.

The goal is to provide a dedicated space for visually explaining examples and data structures without interrupting the normal coding workflow.

Proposal

Add an example drawing area to the existing coding interview workspace.

The drawing area would be available during a normal coding interview and would not replace the editor, test results, or current interview flow.

Candidates could use it to illustrate:

  • Example inputs and outputs
  • Binary trees and other tree structures
  • Linked lists
  • Graphs
  • Arrays
  • Pointer movement
  • Intermediate states while explaining an algorithm

Drawing tools

The first version could provide the following tools:

  • Pen
  • Eraser
  • Rectangle
  • Circle / ellipse
  • Line
  • Arrow
  • Undo / redo
  • Clear

The pen would still be useful for handwritten values or short labels. For example, a candidate could draw circles for tree nodes, connect them with lines or arrows, and write node values inside the circles.

Interaction with the existing interview

The drawing area should work as an additional part of the normal coding interview rather than as a separate interview mode.

A candidate could, for example:

  1. Read and repeat the problem.
  2. Draw a sample input or data structure in the example area.
  3. Explain the approach while referring to the drawing.
  4. Write the implementation in the existing editor.
  5. Run tests as usual.
  6. Update the drawing when explaining edge cases, pointer movement, or optimization.

How the interviewer sees the drawing

The drawing should also be visible to the interviewer so that it can become part of the interview conversation.

When a candidate refers to a tree node, graph edge, pointer, array position, or intermediate state, the interviewer should be able to inspect the current drawing and understand what the candidate is referring to.

This could potentially reuse the existing image-delivery mechanism from Whiteboard Interview Mode by exporting the current drawing and sending it to the interviewer when the content changes.

The goal is not only to give the candidate a place to sketch, but also to let the interviewer use the drawing as part of the interview context.

Possible layout

The drawing area could be presented as a tab or an expandable panel in the existing interview page so that it does not permanently reduce the space available to the editor.

For example:

  • Code | Example
  • or an expandable Example panel below the page

The exact layout can follow the current interview page design.

Scope

The initial version is intended to support visual explanation during coding interviews rather than provide a full diagram editor.

It does not need to support:

  • Selecting existing objects
  • Moving shapes
  • Resizing shapes
  • Editing text objects
  • Grouping objects
  • Layers
  • Advanced diagram editing features

The main goal is to make common coding interview examples easier to draw, explain, and discuss with the interviewer.

主要言語
Rust
スター
144
フォーク
41
平均マージ
1日 9時間
マージ済み PR（30日）
95

環境構築

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

sysprog21/codetrial のほかの issue

sysprog21/codetrial の issue をすべて見る

似ている issue

Rust の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。