Building a Basic Tutor Interface with Express and JavaScript

Building a Basic Tutor Interface with Express and JavaScript | CodeSignal Learn

Setting Up the Basic Tutor Interface

Welcome to the first lesson of our course on developing a personal tutor web application with JavaScript and Node.js! In this lesson, we will focus on setting up a basic tutor interface using Express (a popular Node.js web framework) 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.

Basic Tutor Interface Mockup

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: text +------------------------------------------------------+ | 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.

HTML Rendering with Express and Template Engines

Express is a minimal and flexible Node.js web application framework that provides a robust set of features for building web applications. When building web apps with Express, you can serve static HTML files directly or use a template engine to generate dynamic HTML. A template engine allows you to insert dynamic data into your HTML files, use control structures like loops and conditionals, and reuse components. Some popular template engines for JavaScript include EJS, Pug, and Handlebars . For simple applications, you can serve static HTML files. For more dynamic content, you can use a template engine. In this lesson, we'll focus on serving a static HTML file to keep things straightforward.

Join the 1M+ learners on CodeSignal

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

Creating the Public Directory

To serve HTML files and other static assets (like CSS and JavaScript) in an Express application, it's common practice to create a public directory in your project. This directory will store all your static files that will be sent to the browser. text app/ │ ├── main.js ├── public/ │ └── tutor.html └── ... app/ │ ├── main.js ├── public/ │ └── tutor.html └── ... The public directory is placed at the root level of your project, making it easily accessible from your main application file. This organization follows the conventional structure for web applications and keeps your static files separate from your application logic.

Setting Up Static File Serving in Express

Once you have your directory structure in place, you need to configure Express to serve static files from the public directory. This is done using the built-in express.static middleware. JavaScript// server.js const express = require('express'); const path = require('path'); const app = express(); const PORT = 3000; // Serve static files from the "public" directory app.use(express.static(path.join(__dirname, 'public'))); // Start the server app.listen(PORT, () => { console.log(`Server is running at http://localhost:${PORT}`); });// server.js const express = require('express'); const path = require('path'); const app = express(); const PORT = 3000; // Serve static files from the "public" directory app.use(express.static(path.join(__dirname, 'public'))); // Start the server app.listen(PORT, () => { console.log(`Server is running at http://localhost:${PORT}`); }); With this setup, any file placed in the public directory can be accessed directly from the browser. For example, public/tutor.html will be available at http://localhost:3000/tutor.html.

Rendering HTML Files in Express

To display the tutor interface, you can simply open the tutor.html file in your browser, or you can set up a route in Express to serve it as the homepage. JavaScript// server.js const express = require('express'); const path = require('path'); const app = express(); const PORT = 3000; // Serve static files from the "public" directory app.use(express.static(path.join(__dirname, 'public'))); // Serve tutor.html at the root URL app.get('/', (req, res) => { res.sendFile(path.join(__dirname, 'public', 'tutor.html')); }); app.listen(PORT, () => { console.log(`Server is running at http://localhost:${PORT}`); });// server.js const express = require('express'); const path = require('path'); const app = express(); const PORT = 3000; // Serve static files from the "public" directory app.use(express.static(path.join(__dirname, 'public'))); // Serve tutor.html at the root URL app.get('/', (req, res) => { res.sendFile(path.join(__dirname, 'public', 'tutor.html')); }); app.listen(PORT, () => { console.log(`Server is running at http://localhost:${PORT}`); }); Now, when you visit http://localhost:3000/, the browser will display your tutor interface.

HTML Structure and Header

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. HTML <!DOCTYPE html> <html> <head> <title>Your Personal Tutor</title> </head> </html> <!DOCTYPE html> <html> <head> <title>Your Personal Tutor</title> </head> </html> In the <head> section, we set the title of the page to "Your Personal Tutor", establishing the foundation for the tutor interface.

Body and Header Section

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. HTML <!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> <!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.

Tutor Container and Input Elements

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. HTML <!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> <!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.

JavaScript for Interactivity

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

Initializing DOM Elements

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. HTML <script> // Get references to the messages container and message input field const messagesContainer = document.getElementById('messages'); const messageInput = document.getElementById('message-input'); </script> <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, we can easily update the tutor interface and handle student input. 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.

startNewSession Function

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. HTML <script> function startNewSession() {// Clear the conversation history messagesContainer.innerHTML = '';} // Start a session automatically when the page loads document.addEventListener('DOMContentLoaded', startNewSession); </script> <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 currently clears all messages from the tutor interface visually, providing a clean slate for students to start a new learning session. In future lessons, we will also clear the conversation history from our backend system to ensure a true reset, and we will replace the simulated responses with actual AI-generated answers instead of simply echoing the user's input. This functionality is essential for resetting the conversation and enhancing the user experience by allowing multiple interactions without refreshing the page. 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.

appendMessage Function

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. HTML <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> <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.

sendQuery Function

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. HTML <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> <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.

Handling the Enter Key

To enhance the 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 on the input field. HTML <script> // Handle Enter key messageInput.addEventListener('keypress', 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> <script> // Handle Enter key messageInput.addEventListener('keypress', 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 keypress 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.

Building a Basic Tutor Interface with Express and JavaScript

Setting Up the Basic Tutor Interface

Basic Tutor Interface Mockup

HTML Rendering with Express and Template Engines

Join the 1M+ learners on CodeSignal

Creating the Public Directory

Setting Up Static File Serving in Express

Rendering HTML Files in Express

HTML Structure and Header

Body and Header Section

Tutor Container and Input Elements

JavaScript for Interactivity

Initializing DOM Elements

startNewSession Function

appendMessage Function

sendQuery Function

Handling the Enter Key

Summary and Preparation for Practice