Setting Up the Interface

Welcome to the first lesson of our course on developing a personal tutor web application with Java and Spring Boot! In this lesson, we will focus on setting up a basic tutor interface using Spring Boot and HTML. This is an essential step in creating a user-friendly web application that enhances the learning experience. A well-designed interface is crucial for engaging students and ensuring they can interact with the tutor seamlessly.

Spring Boot is a popular Java framework for building web applications. It simplifies the process of creating stand-alone, production-grade web services and applications. In this lesson, you will learn how to serve a static HTML page as the main interface for your tutor application and how to organize your project files according to Java web development conventions.

To help you better visualize the interface we're building, here's a simple mockup of how the tutor web page will look after following the steps in this lesson:

+------------------------------------------------------+
|          Welcome to Your Personal Tutor              |
|        What would you like to learn today?           |
+------------------------------------------------------+
|                                                      |
|  [Conversation appears here as messages]             |
|                                                      |
|  [User] Hello, can you help me with math?            |
|  [Assistant] Sure thing! Let's get started with ...  |
|                                                      |
+------------------------------------------------------+
| [ Type your question... ]                            |
| [Send] [New Session]                                 |
+------------------------------------------------------+

• The header is at the top, welcoming the user.
• The messages area is in the center, where the conversation between the student and tutor appears.
• At the bottom, there is an input field for typing questions, a Send button, and a New Session button.

In Java web development, serving dynamic or static HTML pages is a common requirement. Frameworks like Spring Boot make it easy to serve HTML files as the user interface for your application. For dynamic content, Java web frameworks often use templating engines such as Thymeleaf, JSP (JavaServer Pages), or FreeMarker. These engines allow you to:

• Insert dynamic variables into HTML
• Use control structures like loops and conditionals
• Create reusable components and layouts
• Apply filters and format data during rendering

In this lesson, we are serving a static HTML file as the tutor interface. If you want to insert dynamic content in the future, you can use a templating engine like Thymeleaf, which integrates seamlessly with Spring Boot. With these tools, you can build interactive and dynamic web applications that provide a personalized experience for each user.

In a typical Spring Boot project, static resources such as HTML, CSS, and JavaScript files are placed in the src/main/resources/static directory. This directory is where Spring Boot looks for static files to serve directly to the browser.

Here is how your project structure should look:

deepseektutor/
│
├── src/
│   └── main/
│       ├── java/
│       │   └── com/
│       │       └── codesignal/
│       │           └── deepseektutor/
│       │               └── HomeController.java
│       └── resources/
│           ├── static/
│           │   └── tutor.html
│           └── application.properties
└── ...

The static directory is used for files that should be served as-is, such as HTML, CSS, and JavaScript. By placing your tutor.html file in this directory, Spring Boot will automatically make it available at the corresponding URL.

For example, you will be able to access your tutor interface at http://localhost:8080/tutor.html. If you set up a controller to forward the root URL (/) to tutor.html, you can also access it at http://localhost:8080/.

To serve your tutor interface, you need to set up a basic Spring Boot application. By default, in local environments, your static HTML file will be viewable at http://localhost:8080/tutor.html.

For the purposes of the our environment, a simple HomeController is included to ensure the root URL (/) forwards to your tutor.html file. By returning "forward:/tutor.html" in the controller, we are essentially creating a custom mapping that tells Spring Boot to serve the tutor.html file whenever a user visits the root URL.

package com.codesignal.deepseektutor;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class HomeController {
    @GetMapping("/")
    public String home() {
        return "forward:/tutor.html"; // CodeSignal Environment Setup
    }
}

This kind of custom mapping can also be useful in real-world applications when you want to set a specific HTML page as the landing page for your site, or when you need to redirect users to a particular interface regardless of the entry point URL.

The HTML template for the tutor interface begins with the basic structure of an HTML document. This includes the <!DOCTYPE html> declaration, which defines the document type and version of HTML being used. The <html> tag wraps the entire content of the page, and within it, the <head> section is defined.

<!DOCTYPE html>
<html>
<head>
    <title>Your Personal Tutor</title>
    <link rel="stylesheet" href="/style.css">
</head>
</html>

In the <head> section, we set the title of the page to "Your Personal Tutor", establishing the foundation for the tutor interface.

Moving into the <body> of the document, we start with a header section that sets the tone for the tutor interface. This section is designed to welcome students and encourage them to engage with the personal tutor.

<!DOCTYPE html>
<html>
<!-- Head section... -->
<body>
    <div class="header">
        <h1>Welcome to Your Personal Tutor</h1>
        <p>Ask any question and receive personalized guidance!</p>
    </div>
</body>
</html>

The header includes a main heading (<h1>) and a paragraph (<p>), providing a friendly introduction to the tutoring service. This sets the stage for the interactive elements that follow.

Following the header, we define the tutor container, which is the core of the user interface. This section is responsible for displaying the conversation and providing input elements for student interaction.

<!DOCTYPE html>
<html>
<!-- Head section... -->
<body>
    <!-- Header section... -->
    <div id="chat-container">
        <div id="messages"></div>
        <div class="input-container">
            <div class="input-wrapper">
                <input type="text" id="message-input" placeholder="Type your question...">
            </div>
            <button onclick="sendQuery()">Send</button>
            <button id="new-session-btn" onclick="startNewSession()">New Session</button>
        </div>
    </div>
</body>
</html>

The #messages div is where the conversation between the student and tutor will appear, while the input field and buttons allow students to type and send questions. The "Send" button triggers the sendQuery function, and the "New Session" button clears the conversation history, preparing the interface for a new tutoring session.

After setting up the HTML structure, we move on to adding interactivity to our tutor interface using JavaScript. This is done by placing a script section at the bottom of the HTML document, where we'll define the necessary JavaScript functions.

<!DOCTYPE html>
<html>
<!-- Head section... -->
<body>
    <!-- Header section... -->
    <!-- Tutor container and input elements... -->
    <script>
        // JavaScript functions will be defined here
    </script>
</body>
</html>

In this section, we create a script block within our HTML code to define JavaScript functions that enable interactivity in the tutor interface. By using plain JavaScript, we can directly manipulate HTML elements and handle user events. Placing the script at the end of the document ensures that all HTML elements are fully loaded before the script runs, preventing errors that might occur if the script tries to access elements that haven't been rendered yet. This approach allows us to seamlessly integrate JavaScript into our HTML, enhancing the functionality of our web application.

Before implementing the functions that handle tutor interactions, it's important to obtain references to the necessary DOM elements. This allows us to manipulate these elements directly within our JavaScript code.

<script>
    // Get references to the messages container and message input field
    const messagesContainer = document.getElementById('messages');
    const messageInput = document.getElementById('message-input');
</script>

By retrieving references to the messagesContainer and messageInput elements at the top of the script, we can easily update the tutor interface and handle student input. Note that this approach assumes the script is placed at the end of the <body> section, after all DOM elements have been rendered. This ensures that the elements exist when the script runs. The messagesContainer is where the conversation will be displayed, and the messageInput is the field where students type their questions. These references are crucial for implementing the interactive functions that follow.

With the necessary DOM elements initialized, we can proceed to create functions that enhance the interactivity of our tutor interface. The startNewSession function is designed to clear the conversation history, allowing students to begin a fresh tutoring session. This function is triggered when the "New Session" button is clicked.

<script>
    function startNewSession() {
        // Clear the conversation history
        messagesContainer.innerHTML = '';
    }

    // Start a session automatically when the page loads
    document.addEventListener('DOMContentLoaded', startNewSession);
</script>

The startNewSession function clears all messages from the tutor interface's display, providing a clean slate for students to start a new learning session. This functionality is essential for visually resetting the conversation and enhancing the user experience by allowing multiple interactions without refreshing the page. It's important to note that this function, for now, only handles the visual clearing of the chat area. The corresponding backend logic to clear the session state will be implemented in a later lesson.

Additionally, by adding an event listener for the DOMContentLoaded event, we ensure that the startNewSession function is automatically called when the page finishes loading. This means the tutor interface is always initialized with a clean state, ready for student interaction as soon as the page is accessed. This approach enhances the learning experience by ensuring the tutor is ready to use immediately upon loading.

Note that, since the script is placed at the end of the <body>, the DOM elements are already available when the script runs, so this event listener is a safe way to ensure initialization regardless of script placement.

To effectively display the conversation in our tutor interface, we use the appendMessage function. This function creates a new message element, assigns it a CSS class based on the message's origin (user or assistant), appends it to the conversation container, and ensures the view scrolls to the latest message.

<script>
    function appendMessage(role, content) {
        // Create a new div element for the message
        const messageDiv = document.createElement('div');
        
        // Assign a class to the message based on its role (user or assistant)
        messageDiv.className = `message ${role}`;
        
        // Set the text content of the message
        messageDiv.textContent = content;
        
        // Append the message to the messages container
        messagesContainer.appendChild(messageDiv);
        
        // Scroll the messages container to the bottom to show the latest message
        messagesContainer.scrollTop = messagesContainer.scrollHeight;
    }
</script>

The appendMessage function is crucial for dynamically adding messages to the tutor interface. It creates a new <div> element for each message, assigns a class to differentiate between student and tutor messages, and appends it to the messagesContainer. This function also ensures that the conversation view automatically scrolls to the bottom, keeping the latest messages in view.

Building on the appendMessage function, the sendQuery function handles student input and updates the tutor interface. It processes the student's question, displays it, and simulates a response from the tutor. This function is triggered when the "Send" button is clicked or when the student presses Enter without holding Shift.

<script>
    function sendQuery() {
        // Retrieve and trim the input value
        const query = messageInput.value.trim();
        
        // If the query is empty, do not proceed
        if (!query) return;

        // Add student question to display
        appendMessage('user', query);

        // Clear the input field after sending the query
        messageInput.value = '';

        // For now, just echo the query back
        setTimeout(() => {
            appendMessage('assistant', `You asked: ${query}`);
        }, 500);
    }
</script>

The sendQuery function is responsible for capturing the student's input, ensuring it's not empty, and then displaying it in the tutor interface using the appendMessage function. After sending the question, it clears the input field to prepare for the next question. It also simulates a response from the tutor by echoing the student's question back after a short delay, demonstrating basic interactivity in the tutoring application.

To enhance user experience, we can allow students to send questions by pressing the Enter key. This functionality is implemented by listening for the Enter key press event (keydown) on the input field.

<script>
    // Handle Enter key
    messageInput.addEventListener('keydown', function(e) {
        if (e.key === 'Enter' && !e.shiftKey) {
            // Prevent the default form submission behavior
            e.preventDefault();
            // Send the query when Enter key is pressed
            sendQuery();
        }
    });
</script>

This code snippet listens for the keydown event on the messageInput field. When the Enter key is pressed without the Shift key, it prevents the default behavior (which would be to insert a newline) and calls the sendQuery function. This allows students to quickly send questions using the keyboard, improving the tutor interface's usability.

In this lesson, we covered the essential steps for setting up a basic tutor interface using Spring Boot and HTML. We explored how Spring Boot serves static HTML files and how JavaScript is used to handle student interactions. By understanding the integration between Spring Boot, HTML, and JavaScript, you have laid the groundwork for building a dynamic web application for personalized tutoring. As you move on to the practice exercises, focus on reinforcing these concepts and experimenting with the code to deepen your understanding. This foundational knowledge will be crucial as we continue to enhance the personal tutor's capabilities in future lessons.