Audio mode: native themed player, relabeled stats, opt-in transcript output

[skuzi]

Summary

Three audio-mode improvements for the GTA typing-assessment port, all with the shared serializer (stats.js) left untouched.

1. Native audio player, themed to the design system

Replaces the custom Play/Replay buttons with the browser's native <audio controls> player — play/pause, seek, elapsed / total time, volume, and playback speed (via its menu) — matching the original assessment's player. Styling is intentionally light (size + rounded corners + a tinted panel via ::-webkit-media-controls-panel) inside the existing design-system card. Speech synthesis remains the fallback when no config.audio.src is set.

2. Relabel the audio results dashboard

In audio (free-transcription) mode the two error stats are edit distances against the hidden transcript, not keystroke/uncorrected errors as in classic mode. They're now labeled "Character errors" (char edit distance) and "Word errors" (word edit distance / WER) so the numbers read correctly next to the accuracy %.

3. Opt-in transcript output (includeTranscript task flag)

When a task's config.json sets "includeTranscript": true, AudioGame.submit() saves the stats plus the expected and submitted transcriptions to stats.txt, so a grader can compare the actual transcription (as the original grader did) — not just the numbers. Implementation notes:

• The transcript persistence lives in the audio module (audio-game.js), reusing the exported saveStatistics for the numbers, so stats.js (the shared serializer) is untouched and unaffected for the base task / other modes.
• completion.js skips its own save when a transcript save ran, so it isn't overwritten.
• Surfacing the transcripts in STDOUT is done by a task-level .codesignal script override (kept out of this repo / the shared base task).

Config example (audio task):

{ "gameType": "audio", "keyboard": false, "showStats": true,
  "realTimeStats": ["time", "chars"], "includeTranscript": true,
  "audio": { "src": "https://.../clip.mp4" } }

Testing

• npm run build passes.
• Drove it in a browser end-to-end: the native player loads/plays the real clip (0:38), transcription is scored, dashboard shows relabeled "Character errors"/"Word errors", and with includeTranscript on the saved stats.txt contains both transcripts (and none when off). No console errors.

🤖 Generated with Claude Code

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: bb7af84d-0107-4264-8838-cee5c2908191

📥 Commits

Reviewing files that changed from the base of the PR and between dfe1aa8 and 782cd93.

📒 Files selected for processing (7)

• AGENTS.md
• README.md
• client/completion.js
• client/games/audio-game.js
• client/help-content.html
• client/index.html
• client/typing-simulator.css

---

📝 Walkthrough

Walkthrough

Audio dictation now uses native audio controls for configured clips and speech synthesis as a fallback. Submission can append expected and submitted transcriptions to stats.txt when includeTranscript is enabled, while completion flow avoids overwriting those results. Audio dashboard labels distinguish character and word errors. Documentation and help text describe the new configuration, playback controls, fallback behavior, and transcript output.

Possibly related PRs

• CodeSignal/learn_typing-simulator-game#2: Also changes the audio dictation implementation and audio-game.js submission and playback flow.

Suggested reviewers: diegochine

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title concisely captures the three main audio-mode changes in the PR.
Description check	✅ Passed	The description matches the PR changes and explains the native player, relabeled stats, and transcript output.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}