A key part of making a personal tutor web application user-friendly is helping students know what kinds of questions they can ask. Sometimes, students may not be sure how to phrase their questions or may need inspiration on what to ask next. By providing query suggestions—predefined prompts that students can select with a single click—you can guide users toward productive interactions and make the tutoring experience smoother and more engaging. In this lesson, you'll learn how to add these helpful suggestions to your tutor interface.

To add query suggestions, we will include buttons in our HTML file. Each button will represent a common type of request a student might have, such as asking for an explanation, requesting practice exercises, or seeking study strategies. When a student clicks a button, the corresponding question will be sent to the tutor automatically.

We will place these buttons inside a div element with the class suggestions, positioned above the chat area and input field. This makes the suggestions easy to find and use.

Here is how you can add these buttons to your HTML:

The buttons use the onclick attribute to call the usePrompt function with a specific prompt. The three buttons provided are:

• "Explain a Concept" for step-by-step guidance on difficult topics
• "Practice Exercises" for sample questions to practice a topic
• "Study Strategy" for advice on preparing for a test

This setup allows students to interact with the tutor more efficiently by selecting from these predefined requests.

The usePrompt function is responsible for handling what happens when a student clicks a suggestion button. When a button is clicked, the function takes the prompt text and places it into the input field. Then, it sends the prompt as a query, just as if the student had typed it themselves.

Here's how the function is implemented:

This makes it easy for students to quickly send common questions, improving the overall experience and helping them get the assistance they need.

In this lesson, you learned how to make your tutor application more helpful by adding query suggestions. You added suggestion buttons, created a function to handle them, and connected everything to your chat interface. This makes your application easier to use and helps guide students toward useful questions.

As you move on to the practice exercises, try experimenting with different prompts and see how you can further improve the interface. In the next unit, you will learn how to style your application to make it more visually appealing. Keep up the great work!