Answer Finder FAQ Block for React

Edit ARTICLES at the top of the file: each has an id, the question, its answer and keywords, the words people use for it that the question doesn't. The copy counts the articles from the array. EXAMPLES holds the three starting points shown before the first search.

rank splits your words, drops common ones, cuts each to a stem of five letters and scores every article: a stem in the question counts three, in the keywords two and in the answer one. The best article is the answer, and the next two are "Also try", each with a bar sized against the best one's score. That is all there is: no model, no network request, and the same words always give the same answer. To use a real search or model, replace rank and keep the rest.

So the change from a question to an answer is visible. THINKING is 600 milliseconds, and during it the result area shows a typing indicator and a screen reader hears "Reading 12 help articles". Set it to 0 to answer at once. With reduced motion the dots hold still, but the wait stays so the status is still heard.

No. The result area has a floor height tall enough for an answer with two articles, and it shows the starting points before the first search. A longer answer grows the card, but nothing above it moves.

The result says no article is close to the words typed and offers Start again, which empties the field and returns focus to it. Typing a blank field does nothing.

Find the answer is the block's one Shine Button and submits the form, so Enter inside the field adds a line and Tab then Enter submits. The starting points and Start again are outline and ghost Buttons; "Write to us" is a plain link (href="#"), so point it at your help desk.