Simplifying User Input with Query Suggestions

Introduction

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.

Enhancing the Tutor Interface with Suggestions

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:

HTML
<!DOCTYPE html>
<html>
<head>
    <title>Tutor Interface</title>
</head>
<body>
    <h1>Welcome to the Tutor</h1>
    <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>
    <div id="chat-container">
        <!-- Chat messages will appear here -->
    </div>
    <input type="text" id="messageInput" placeholder="Type your question here..." />
    <button onclick="sendQuery()">Send</button>
</body>
</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.

Sign up

Join the 1M+ learners on CodeSignal

Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal