Setting Up the Basic Tutor Interface with Sinatra and ERB

Setting Up the Basic Tutor Interface

Welcome to the first lesson of our course on developing a personal tutor web application with Sinatra! In this lesson, we will focus on setting up a basic tutor interface using Sinatra 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. Note: In this lesson, we will focus solely on building the user interface for the tutor application. We will not be connecting the interface to any backend chat logic or actual tutor responses yet. The goal is to create the structure and interactivity of the UI, laying the groundwork for integrating real chat functionality in future lessons.

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 Sinatra and ERB

Sinatra is a lightweight web framework for Ruby that makes it easy to build web applications quickly. Sinatra supports rendering HTML content using template engines. One of the most common template engines in Ruby is ERB (Embedded Ruby), which allows you to embed Ruby code directly within your HTML files. With ERB, you can: Insert dynamic Ruby variables into HTML Use control structures like loops and conditionals Create reusable partials for common components By combining Sinatra with ERB, you can efficiently generate dynamic HTML pages while keeping your application logic and presentation separate.

Join the 1M+ learners on CodeSignal

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

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.

ERB

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