A random question button should not ignore the room

The interesting part of an icebreaker generator is not Math.random(). It is deciding which questions should reach that line.

In the current Break The Ice implementation, the homepage picker has three settings: Work, Parties, and Team meetings. There is also an Any group option. This is a small interaction, but it makes the random output less arbitrary. A question about a party playlist belongs in a different pool from a question about a crowded calendar.

This is a development note about our Fun Icebreaker Questions generator, with a few details that are useful for other small random-content tools.

Select the pool before selecting the item

A category change should immediately produce a question from the new category. It is frustrating to choose Parties and keep looking at the work question from the previous state.

In React, the change handler passes the new category into the picker function directly. Calling setCategory(nextCategory) and then relying on the old state value in that same handler would use the previous render's category.

Here is the important shape, simplified:

function onCategoryChange(nextCategory) {
  setCategory(nextCategory);
  chooseQuestion(nextCategory);
}

That explicit argument matters more than adding another animation to the button. The interface has just made a promise about context; the next piece of text needs to keep it.

Avoid the immediate repeat, but describe the guarantee accurately

The picker removes the current question from the candidate array before selecting the next question:

const candidates = nextPool.filter(item => item !== question);
const choices = candidates.length ? candidates : nextPool;
const next = choices[Math.floor(Math.random() * choices.length)];

This prevents the most visible disappointment: pressing Another question and seeing the same sentence. The fallback also handles a pool containing only one item.

It does not promise that a question will never repeat during the session. A previous question can return after an intervening draw. For a facilitator working through an entire deck, a shuffled queue with a cursor would offer a different guarantee. For a quick homepage picker, excluding the current item keeps the implementation simple.

That distinction is worth putting into product language. “Another question” fits this behavior. “Never see a repeat” would not.

Treat copying as an action that can fail

A copy button is useful because the question often travels somewhere else: a meeting agenda, a video-call chat, or a host's notes.

The current component waits for navigator.clipboard.writeText before showing Copied. If the clipboard call fails, the page leaves the question visible and asks the person to select it manually. Drawing another question clears both the success and error states.

Without that reset, a new question can inherit the old question's Copied label. The data changed, but the feedback still describes a previous action. Small tools are full of this kind of state dependency.

Context is also a content decision

An office prompt can joke about software or inboxes without asking someone to expose a real conflict. A party prompt can use the snacks and music already in the room. A team prompt can invite a tiny win or a working preference.

The practical review is to read each question with its selected category visible. Could a person answer in one sentence? Does the question depend on backstory strangers will not have? Can somebody pass without becoming the center of attention?

These checks are more useful than making the array longer for its own sake. The randomizer can only select what it has been given.

If you are building a similar tool, try three manual checks: switch categories while watching the displayed question, draw several times to check immediate repeats, and test the clipboard failure state. They cover three different promises: relevance, change, and usable feedback.

Prepared with AI assistance from the project's current implementation. The product link above is our own project.