Welcome back! In the previous lesson, you learned how to integrate API requests to create a dynamic tutor interface using Sinatra and ERB templates. This allowed for real-time communication between the student and the server, enhancing the interactivity of our educational application. Today, we will build on that foundation by adding query suggestions to our tutor interface. Query suggestions are predefined prompts that students can select to quickly send common educational questions. This feature not only improves the learning experience by making interactions more efficient but also guides students in formulating their academic inquiries.

To implement query suggestions, we will add buttons to our ERB template. These buttons will represent common learning assistance requests that students might have, such as asking for concept explanations, practice exercises, or study strategies. By clicking on these buttons, students can quickly send these queries without typing them out manually.

We will place these buttons inside a div element with the class suggestions, positioned above the chat container and input elements in the ERB template. This placement ensures that the suggestion buttons are easily accessible to students as they interact with the tutor interface.

Here’s how you can add these buttons in your ERB template:

These buttons are styled with the class suggestion-btn and use the onclick attribute to call the usePrompt function with specific queries. The content of the buttons includes:

• "Explain a Concept" for requesting step-by-step guidance on difficult concepts,
• "Practice Exercises" for requesting sample questions to practice a topic,
• "Study Strategy" for seeking advice on test preparation and focus areas.

The usePrompt function is a crucial part of our query suggestions feature. It takes a predefined prompt as an argument and populates the input field with this prompt. This function is triggered when a student clicks on one of the suggestion buttons.

In your ERB template, you can include the following JavaScript code to define the usePrompt function:

In this function, the prompt parameter is used to set the value of the input field (messageInput). Once the input is populated, the sendQuery function is called to send the question to the server. This seamless integration allows students to quickly send predefined academic questions, enhancing the overall learning experience.

In this lesson, you learned how to enhance your tutor application by adding query suggestions. We covered the implementation of suggestion buttons in your ERB template, the usePrompt function, and the integration of these features. This addition makes your tutor interface more student-friendly and efficient, guiding users toward well-formulated academic questions.

As you move on to the practice exercises, focus on reinforcing these concepts and experimenting with the code. This hands-on practice will deepen your understanding and prepare you for the next unit, where we will focus on styling the interface to make it visually appealing. Keep up the great work, and let's continue building this exciting educational application together!