feat: add code output prediction game

[28106]

Implements issue #644 by adding a Code Output Prediction Game for interview preparation.

Changes
Added CodeOutputGame.jsx
Added JavaScript code-output prediction questions
Added answer selection and scoring
Added timer functionality
Added explanations for answers
Integrated the game into the Cognitive Games page

Closes #644

Adds a Code Output Prediction game with JavaScript questions, answer selection, scoring, timers, explanations, and restart support. Registers the game in CognitiveGamesPage.jsx and redirects unauthenticated users to /login.

[coderabbitai]

📝 Walkthrough

Walkthrough

Adds a timed ten-question JavaScript output quiz with answer feedback, scoring, progression, completion, and restart handling. Registers the game in the cognitive games catalog and adds login redirection for unauthenticated selections.

Changes

Code Output Prediction Game

Layer / File(s)	Summary
Quiz content and round creation frontend/src/components/CodeOutputGame.jsx	Defines JavaScript output questions with answer options and explanations. Creates randomized ten-question rounds.
Quiz flow and interface frontend/src/components/CodeOutputGame.jsx	Adds answer selection, scoring, a 30-second countdown, question progression, correctness feedback, completion state, fallback UI, and restart controls.
Cognitive games catalog integration frontend/src/pages/CognitiveGames/CognitiveGamesPage.jsx	Registers the Code Output Prediction game, redirects unauthenticated selections to /login, and clears the selected game on back navigation.

Estimated code review effort: 4 (Complex) | ~45 minutes

Sequence Diagram(s)

sequenceDiagram
  participant Player
  participant CognitiveGamesPage
  participant CodeOutputGame
  Player->>CognitiveGamesPage: Select Code Output Prediction
  CognitiveGamesPage->>CodeOutputGame: Render selected game
  CodeOutputGame->>Player: Show question, options, and timer
  Player->>CodeOutputGame: Select answer
  CodeOutputGame->>Player: Show correctness and explanation
  CodeOutputGame->>Player: Advance question or show final score

Loading

Possibly related PRs

• Canopus-Labs/PrepPilot#1343: Updates the same CognitiveGamesPage.jsx area while adding a different cognitive game.

Suggested labels: type:feature, type:design

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Out of Scope Changes check	⚠️ Warning	The PR also changes unauthenticated navigation, removes root background styling, and reformats JSX without a linked issue requirement [#644].	Remove unrelated navigation, styling, and formatting changes, or document their requirement in the linked issue.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly identifies the main change: adding a code output prediction game.
Linked Issues check	✅ Passed	The changes implement the requested game, including ten questions, answer selection, scoring, timers, explanations, and catalog registration [#644].
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing Touches 💡 1

⚔️ Resolve merge conflicts 💡

• Resolve merge conflict in branch feat-code-output-game-644

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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

Warning

⚠️ This pull request shows signs of AI-generated slop (description_diff_mismatch). It has been flagged by CodeRabbit slop detection and should be reviewed carefully.

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@frontend/src/pages/CognitiveGames/CognitiveGamesPage.jsx`:
- Around line 22-27: Update the Code Output Prediction entry in the
CognitiveGamesPage configuration to describe only JavaScript snippets, unless
CodeOutputGame is also expanded with Python questions. Keep the existing game
name, icon, and component unchanged.

🪄 Autofix

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 87626844-ede0-4b49-b281-bfb6c61e222c

📥 Commits

Reviewing files that changed from the base of the PR and between 33a3c81 and 214ae5f.

📒 Files selected for processing (2)

• frontend/src/components/CodeOutputGame.jsx
• frontend/src/pages/CognitiveGames/CognitiveGamesPage.jsx

[coderabbitai]

🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win

Correct the supported-language description.

Line 25 states that the game includes JavaScript and Python snippets. frontend/src/components/CodeOutputGame.jsx currently provides JavaScript snippets only. Change the description to JavaScript, or add Python questions before advertising Python support.

Proposed fix

-    desc: "Predict the output of JavaScript and Python code snippets.",
+    desc: "Predict the output of JavaScript code snippets.",

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

	{
	name: "Code Output Prediction",
	icon: Code2,
	desc: "Predict the output of JavaScript and Python code snippets.",
	component: CodeOutputGame,
	},
	{
	name: "Code Output Prediction",
	icon: Code2,
	desc: "Predict the output of JavaScript code snippets.",
	component: CodeOutputGame,
	},

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@frontend/src/pages/CognitiveGames/CognitiveGamesPage.jsx` around lines 22 -
27, Update the Code Output Prediction entry in the CognitiveGamesPage
configuration to describe only JavaScript snippets, unless CodeOutputGame is
also expanded with Python questions. Keep the existing game name, icon, and
component unchanged.

[github-actions]

@28106, please resolve the commit so that it will be merged soon ......