Adding Query Suggestions to Your Tutor Interface with ERB

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:

<div class="suggestions">
  <button class="suggestion-btn" onclick="usePrompt('I need help understanding a difficult concept. Could you guide me through it step-by-step?')">Explain a Concept</button>
  <button class="suggestion-btn" onclick="usePrompt('Could you help me practice this topic with some sample questions?')">Practice Exercises</button>
  <button class="suggestion-btn" onclick="usePrompt('I need to prepare for a test on this subject. What should I focus on?')">Study Strategy</button>
</div>

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.

This setup allows students to interact with the tutor interface more efficiently by selecting from these predefined learning assistance requests, making the educational experience more supportive and structured.