Styling, Suggestions, and Reasoning

Congratulations on reaching the final unit of this course! You’ve come a long way in building your interactive tutor interface, and now it’s time to give your application a polished, student-centric experience by adding three key features: query suggestions, customizable tutor modes, and an advanced reasoning toggle.

Each addition is designed to improve usability, encourage curiosity, and make the tutor interface both visually appealing and more pedagogically effective.

A modern educational application should do more than simply answer questions. It should guide students, spark inquiry, and adapt to diverse learning needs.

By thoughtfully enhancing the user interface, you empower learners to take charge of their academic journey. In this lesson, you’ll make your tutor interface friendlier and more supportive by introducing several key features:

1. Query Suggestions – Ready-to-use suggestion buttons that help students quickly ask well-formulated academic questions.
2. Tutor Mode Selection – Options for changing the assistant’s teaching style, including a default general assistant mode.
3. Reasoning Toggle – A switch to enable advanced, step-by-step reasoning for deeper explanations.
4. Modern CSS Styling – A visually appealing and responsive design for a professional and accessible user experience.

These additions make the application easier to use and encourage students to explore concepts in greater depth.

Query suggestions are prominent buttons displayed above the chat interface. Each button represents a common academic question or topic, such as help with math, science, or history. By clicking on these buttons, students can instantly populate the input field with a well-formulated question, eliminating the friction of thinking up a prompt from scratch.

This makes it easier for students to ask for explanations, practice exercises, or study strategies, especially if they are unsure how to phrase their query.

To add these suggestion buttons, include the following HTML in our interface:

<nav class="suggestion-nav">
    <button class="suggestion-btn" onclick="usePrompt('Explain the Pythagorean theorem')">Math Help</button>
    <button class="suggestion-btn" onclick="usePrompt('Describe Newton\'s laws of motion')">Science Inquiry</button>
    <button class="suggestion-btn" onclick="usePrompt('What is the significance of historical events in WWII?')">History Analysis</button>
</nav>

This creates a navigation bar with visually distinct buttons for each suggested query.

To make the buttons functional, add the following JavaScript function:

function usePrompt(promptText) {
    messageInput.value = promptText;
    messageInput.focus();
}

This function fills the input box with the selected suggestion and focuses the input, making it easy for students to start their query.

The interface now includes a dropdown menu labeled Tutor Mode, allowing students to select the teaching style that best fits their needs. Whether they want a general explainer, a focused math tutor, or a quizmaster, students can easily switch between these modes before starting a session.

We’ll also add a Default prompt, which is simply a general assistant for open-ended help and guidance. When a new session is created, the selected mode informs the backend which prompt template or persona to apply. This enables differentiated instruction and a more engaging learning environment, as the assistant adapts its responses to suit the student’s preferences.

To implement tutor mode selection, add this HTML to your controls area:

<div class="session-controls">
    <label for="prompt-select">Tutor Mode:</label>
    <select id="prompt-select">
        <option value="default">Default</option>
        <option value="explainer">Explainer</option>
        <option value="math_tutor">Math Tutor</option>
        <option value="quizmaster">Quizmaster</option>
    </select>
    <button type="button" id="new-session-btn" onclick="startNewSession()">New Session</button>
</div>

This provides a dropdown for selecting the tutor mode and a button to start a new session.

To handle the session creation based on the selected mode, we'll also need to update the startNewSession() function:

function startNewSession() {
    if (!localStorage.getItem('studentId')) {
        localStorage.setItem('studentId', 'student-' + Math.random().toString(36).substring(2, 12));
    }
    currentStudentId = localStorage.getItem('studentId');
    const selectedPrompt = promptSelect.value || "default";

    fetch('/api/tutor/create', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({studentId: currentStudentId, promptName: selectedPrompt})
    })
        .then(resp => {
            if (!resp.ok) {
                throw new Error(`HTTP error! status: ${resp.status}`);
            }
            return resp.json();
        })
        .then(data => {
            currentSessionId = data.sessionId;
            messagesContainer.innerHTML = '';
            appendMessage('assistant', `New session started with ${selectedPrompt} prompt. How can I help you today?`);
        })
        .catch(error => {
            console.error('Error starting new session:', error);
            appendMessage('assistant', 'Error: Could not start a new session. Please try again.');
        });
}

This function creates a new session with the selected tutor mode and resets the chat area for the new session.

For students who want more in-depth, step-by-step explanations, the new Reasoning Model toggle is a powerful feature. When enabled, this checkbox signals the application to route queries through a more advanced reasoning AI model.

This can result in more thoughtful, comprehensive answers—ideal for complex problems or for learners who want to see the logic behind a solution. The toggle is placed conveniently near the chat controls, making it easy for students to activate advanced reasoning as needed.

This feature will make use of the /thinking endpoint that we implemented in the last course, ensuring that queries are processed with enhanced reasoning capabilities.

To add the reasoning toggle, include this HTML in your controls:

<div class="reasoning-control">
    <input type="checkbox" id="reasoning-toggle">
    <label for="reasoning-toggle">Use Reasoning Model</label>
</div>

This adds a checkbox that students can use to enable or disable advanced reasoning.

To make the toggle affect which backend endpoint is used, update your query sending logic as follows:

function sendQuery() {
    const query = messageInput.value.trim();
    if (!query) return;
    if (!currentSessionId) {
        appendMessage('assistant', 'Please start a new session first.');
        return;
    }
    appendMessage('user', query);
    messageInput.value = '';
    messageInput.focus();

    const reasoningChecked = document.getElementById('reasoning-toggle').checked;
    const apiEndpoint = reasoningChecked ? '/api/tutor/ask/thinking' : '/api/tutor/ask';

    fetch(apiEndpoint, {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({
            studentId: currentStudentId,
            sessionId: currentSessionId,
            question: query
        })
    })
        .then(resp => {
            if (!resp.ok) {
                return resp.text().then(text => {
                    let errorMsg = `HTTP error! status: ${resp.status}`;
                    try {
                        const errJson = JSON.parse(text);
                        if (errJson && errJson.detail) {
                            errorMsg += ` - ${errJson.detail}`;
                        } else if (errJson && errJson.message) {
                            errorMsg += ` - ${errJson.message}`;
                        }
                    } catch (e) {
                        if(text) errorMsg += ` - ${text.substring(0, 100)}`;
                    }
                    throw new Error(errorMsg);
                });
            }
            return resp.json();
        })
        .then(data => {
            appendMessage('assistant', data.answer);
        })
        .catch(error => {
            console.error('Error sending query:', error);
            appendMessage('assistant', `Error: ${error.message || 'Could not get an answer. Please check the console and try again.'}`);
        });
}

This logic checks the state of the reasoning toggle and chooses the appropriate API endpoint for the query.

To ensure the interface is both attractive and user-friendly, we’ll apply a modern CSS stylesheet. This will bring in responsive layouts, accent colors, and clean visual structure for a professional feel.

A premade CSS file will be provided for you to use in this course. However, in your own application, you may also consider using frameworks like React along with Bootstrap or Tailwind CSS for a more robust and scalable approach to styling and component management.

Add the following CSS to style the suggestion buttons and chat messages:

.suggestion-nav {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 16px 8px;
}

.suggestion-btn {
    background-color: #ffc107;
    color: #212529;
}
.suggestion-btn:hover {
    background-color: #e0a800;
}

.message.user {
    background-color: #007bff;
    color: #fff;
    margin-left: auto;
    border-radius: 6px;
}

.message.assistant {
    background-color: #e9ecef;
    color: #333333;
    margin-right: auto;
}

These styles ensure that suggestion buttons are visually distinct and that user and assistant messages are clearly differentiated in the chat interface.

With these styles, your application becomes visually inviting and easy to use across devices. In the practice exercises, you’ll apply the provided CSS to complete your polished tutor interface.

Congratulations on finishing the entire course! You’ve built a feature-rich, interactive tutor application that is both functional and user-friendly.

In this lesson, you learned how to enhance your tutor application by adding query suggestions. We covered the implementation of suggestion buttons using JavaScript UI components, the usePrompt method, 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!