Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

Allow deselecting a chosen problem card by clicking it again

Open Beginner friendly
  • Is something wrong?
#392 4 comments 0 reactions 1 assignee View on GitHub

Maintainers usually reply within 1 day

@woohsin is already working on this.

Since Oct 21, 2026.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
68/100
Issue type
Feature
Clarity
Clearly specified
Activity status
Active
Tech stack
rust
Domain
frontend

Research direction

Start at the landing page code that renders the “Choose a specific problem instead” section and handles problem card clicks. Trace how the selected problem is stored and how the default recommended problem is chosen. Toggle the current selection off on a second click while keeping the section open; done when selecting a card and clicking it again restores the default.

Written by the indexing model from the issue text.

Description

Here is the detailed analysis of the current lobby selection flow and the consolidated proposal based on web/app.js.

1. Current Implementation Analysis

  • Event Listener & State (web/app.js:246-254):
    In web/app.js, cards are derived from [data-problem] buttons and initialized with mark(card.button, false). Clicking a card executes:

    for (const card of cards) {
  card.button.addEventListener("click", () => {
    manualProblem = true;
    setProblem(card);
    setDuration(suggestedDuration(new Set([card.difficulty])));
    nodes.recommendation.textContent = `Selected problem: ${title(card)}.`;
  });
}

  • The Issue:
    The listener unconditionally sets manualProblem = true, updates problem = card, marks the button via mark(card.button, true) inside setProblem(), and updates the recommendation prompt. It does not check whether manualProblem && problem === card. Clicking the active card re-applies the manual override.

  • Fallback Behavior:
    recommend(note = "", mode = "recommend") returns early without updating recommendation elements whenever manualProblem is active. Currently, the only way a candidate can revert to the automatic recommendation engine is by clicking #random-problem (nodes.randomProblem), which resets manualProblem = false and calls recommend("", "random"), or by reloading the page.

2. Consolidated Proposal

  1. Toggle Selection on Card Click:
    Update the click handler in web/app.js to inspect whether the clicked card is already active (manualProblem && problem === card):

    • When selecting a new card: Preserve the current behavior (manualProblem = true, setProblem(card), update duration, and set nodes.recommendation.textContent).

    • When clicking the currently selected card: Toggle it off by resetting manualProblem = false, clearing the card mark via mark(card.button, false), clearing or resetting problem = null, and invoking recommend() to restore the default overdue/unseen recommendation and lobby controls.

    for (const card of cards) {
  card.button.addEventListener("click", () => {
    if (manualProblem && problem === card) {
      manualProblem = false;
      mark(card.button, false);
      problem = null;
      recommend();
      return;
    }
    manualProblem = true;
    setProblem(card);
    setDuration(suggestedDuration(new Set([card.difficulty])));
    nodes.recommendation.textContent = `Selected problem: ${title(card)}.`;
  });
}

  2. Orthogonality with #394:
    Issue #394 moves details.problem-picker below the setup panels and adjusts .lobby .problem-grid in web/styles.css. Because card event binding in web/app.js queries [data-problem] buttons directly and operates on problem and manualProblem state flags, this toggle logic does not depend on DOM hierarchy or CSS layout, making it completely orthogonal to and forward-compatible with #394.

3. Test Plan

Add browser-level Playwright tests in tests/browser/lobby.test.js:

  1. Verify clicking a .problem-card applies .selected, sets aria-pressed="true", and displays "Selected problem: ..." in nodes.recommendation.

  2. Verify clicking the same active card removes .selected, resets aria-pressed="false", clears manualProblem, and restores the default recommendation prompt.

  3. Verify launching an interview after deselecting proceeds with the recommended practice problem without an explicit ?problem= query parameter.

Dominant language
Rust
Stars
177
Forks
100
Avg merge
1d 8h
Merged PRs (30d)
168

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from sysprog21/codetrial

All issues in sysprog21/codetrial

Similar issues

More Rust issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.