Katkat
Back

Implement a React flag loader with typewriter effect

RampSoftware Engineer · Online Assessment
MediumSoftware EngineerOnline AssessmentSoftware Engineering Fundamentals

Last updated

This question evaluates front-end engineering skills including React and TypeScript component design, DOM inspection and extraction, HTTP fetching and parsing, asynchronous timing for typewriter animations, resource cleanup, and testability with Mocha; domain: Software Engineering Fundamentals; level: practical application.

Scenario

You are given a small React + TypeScript project with a Mocha test runner (and an autograder). The task is a practical front-end mini-project (not algorithm-heavy).

Requirements

Implement a React component (and any helper utilities you need) to retrieve and display a hidden flag.

1) Retrieve the flag

Support both retrieval modes:

  • DOM mode: Extract the flag from the current document.

  • The flag is stored in an element that matches:

  • data-flag="..." (attribute contains the full flag string), OR

  • an element with id="flag" whose textContent is the flag.

  • The element may be hidden (e.g., display:none, hidden, etc.). You must still find it.

  • HTTP mode: Fetch the flag from a URL.

  • GET <flagUrl> returns either:

  • JSON: { "flag": "FLAG{...}" }, or

  • plain text: FLAG{...}

2) Display the flag using a typewriter effect

Once the flag is obtained, display it character-by-character in the UI.

  • Render output in a container like: <div data-testid="flag-output">...</div>
  • Typewriter speed: one character every 50ms (you may expose this as a prop for testability).
  • When typing finishes, the full flag must remain visible.

3) Ensure the animation runs only once

Even if the component re-renders (state/props changes), the typewriter animation must not restart once it has completed.

4) Engineering constraints

  • Avoid memory leaks: timers and in-flight requests must be cleaned up on unmount.
  • Be mindful of browser vs Node test environments (e.g., document may not exist in some tests).

5) Testing (Mocha + TypeScript)

Write Mocha tests (or structure your code so it passes an autograder) to validate:

  • DOM extraction works for both data-flag and #flag cases.
  • HTTP mode parses both JSON and plain-text responses.
  • Typewriter effect reveals characters over time and completes.
  • Animation runs only once (does not restart after re-render).

Deliverables

  • A React component (e.g., FlagViewer) and helper functions.
  • Mocha tests (or equivalent verification hooks) ensuring the behavior above.