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] | +------------------------------------------------------+ +------------------------------------------------------+ | 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

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]                                 |
+------------------------------------------------------+

text

app/
│
├── app.rb
├── views/
│   └── tutor.erb
└── ...

app/
│
├── app.rb
├── views/
│   └── tutor.erb
└── ...

Ruby

require 'sinatra'

# Route for the main tutor interface
get '/' do
  erb :tutor
end

require 'sinatra'

# Route for the main tutor interface
get '/' do
  erb :tutor
end

Ruby

get '/' do
  erb :tutor, locals: { title: "Your Personal Tutor" }
end

get '/' do
  erb :tutor, locals: { title: "Your Personal Tutor" }
end

ERB

<title><%= title %></title>

<title><%= title %></title>

ERB

<!DOCTYPE html>
<html>
<head>
    <title>Your Personal Tutor</title>
</head>
</html>

<!DOCTYPE html>
<html>
<head>
    <title>Your Personal Tutor</title>
</head>
</html>

ERB

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

ERB

<!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="sendMessage()">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="sendMessage()">Send</button>
            <button id="new-session-btn" onclick="startNewSession()">New Session</button>
        </div>
    </div>
</body>
</html>

ERB

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

ERB

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

ERB

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

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>

ERB

<script>
    function sendMessage() {
        // 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 sendMessage() {
        // 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>

ERB

<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
            sendMessage();
        }
    });
</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
            sendMessage();
        }
    });
</script>

text

app/
│
├── app.rb
├── views/
│   └── tutor.erb
└── ...

Ruby

require 'sinatra'

# Route for the main tutor interface
get '/' do
  erb :tutor
end

Ruby

get '/' do
  erb :tutor, locals: { title: "Your Personal Tutor" }
end

ERB

<title><%= title %></title>

ERB

<!DOCTYPE html>
<html>
<head>
    <title>Your Personal Tutor</title>
</head>
</html>

ERB

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

ERB

<!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="sendMessage()">Send</button>
            <button id="new-session-btn" onclick="startNewSession()">New Session</button>
        </div>
    </div>
</body>
</html>

ERB

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

ERB

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

ERB

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

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

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>

ERB

<script>
    function sendMessage() {
        // 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>

ERB

<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
            sendMessage();
        }
    });
</script>

Setting Up the Basic Tutor Interface

Basic Tutor Interface Mockup

HTML Rendering with Sinatra and ERB

Join the 1M+ learners on CodeSignal

Creating the Views Directory

Setting Up ERB Templates in Sinatra

Rendering Templates and Passing Data in Sinatra

HTML Structure and Header

Body and Header Section

Tutor Container and Input Elements

JavaScript for Interactivity

Initializing DOM Elements

The startNewSession Function

AppendMessage Function

sendMessage Function

Handling the Enter Key

Summary and Preparation for Practice