Merge pull request #52 from brylie/add-i18n

Add translation support and update language strings

app/home/templates/home/home_page.html

@@ -8,7 +8,7 @@
 {% endblock extra_css %}
 
 {% block content %}
-<h1>{% trans "Welcome to our language lesson chat!" %}</h1>
+<h1>{% translate "Welcome to our language lesson chat!" %}</h1>
 
-<p>{% trans "Join our interactive platform to enhance your language skills through conversations and games." %}</p>
+<p>{% translate "Join our interactive platform to enhance your language skills through conversations and games." %}</p>
 {% endblock content %}

app/lessons/templates/lessons/chat_interface.html

@@ -1,5 +1,7 @@
+{% load i18n %}
+
 <section id="chat-interface" class="border rounded p-3">
-    <h2>Practice Dialogue</h2>
+    <h2>{% translate "Practice Dialogue" %}</h2>
     <form id="chat-form" hx-post="{{ page.url }}" 
         hx-trigger="submit"
         hx-target="body"
@@ -8,18 +10,20 @@ <h2>Practice Dialogue</h2>
         {% csrf_token %}
         <div class="input-group">
             <input type="text" name="user_message" id="user-message-input" 
-                class="form-control" placeholder="Type your message..." 
+                class="form-control" placeholder="{% translate 'Type your message...' %}" 
                 maxlength="{{ max_message_length }}"
-                aria-label="Enter your message">
+                aria-label="{% translate 'Enter your message' %}">
             <input type="hidden" name="response_key_concept" id="response-key-concept" value="{{ addressed_key_concept }}">
-            <button class="btn btn-primary" type="submit">Send</button>
+            <button class="btn btn-primary" type="submit">{% translate "Send" %}</button>
         </div>
-        <small id="char-count" class="form-text text-muted">0 / {{ max_message_length }}</small>
+        <small id="char-count" class="form-text text-muted">
+            {% blocktranslate %}{{ current }} / {{ max }} characters{% endblocktranslate %}
+        </small>
     </form>
 
     <div id="suggested-responses-container">
         {% include "lessons/suggested_responses.html" %}
     </div>
 
-    <a href="{{ page.url }}?{{start_over_param}}=true" class="btn btn-outlineprimary btn-lg">Start Again</a>
-</section>
+    <a href="{{ page.url }}?{{start_over_param}}=true" class="btn btn-outline-primary btn-lg">{% translate "Start Again" %}</a>
+</section>

app/lessons/templates/lessons/chat_lesson.html

@@ -1,5 +1,5 @@
 {% extends "base.html" %}
-{% load wagtailcore_tags wagtailimages_tags static %}
+{% load wagtailcore_tags wagtailimages_tags static i18n %}
 
 {% block title %}{{ page.title }}{% endblock %}
 
@@ -13,16 +13,16 @@ <h1 class="mb-4">{{ page.title }}</h1>
                 <div class="col-12">
                     <div class="d-flex justify-content-between flex-wrap">
                         <div class="mb-2">
-                            <strong>Location:</strong> {{ page.location }}
+                            <strong>{% translate "Location:" %}</strong> {{ page.location }}
                         </div>
                         <div class="mb-2">
-                            <strong>Language:</strong> {{ page.language }}
+                            <strong>{% translate "Language:" %}</strong> {{ page.language }}
                         </div>
                         <div class="mb-2">
-                            <strong>Difficulty Level:</strong> <span class="badge bg-primary">{{ page.get_difficulty_level_display }}</span>
+                            <strong>{% translate "Difficulty Level:" %}</strong> <span class="badge bg-primary">{{ page.get_difficulty_level_display }}</span>
                         </div>
                         <div class="mb-2">
-                            <strong>Estimated Time:</strong> {{ page.estimated_time }} minutes
+                            <strong>{% translate "Estimated Time:" %}</strong> {% blocktranslate with time=page.estimated_time %}{{ time }} minutes{% endblocktranslate %}
                         </div>
                     </div>
                 </div>
@@ -40,14 +40,15 @@ <h1 class="mb-4">{{ page.title }}</h1>
             {% if page.cover_photo %}
                 <div class="mb-4 position-relative">
                     <div class="image-container">
-                        {% image page.cover_photo width-1200 class="img-fluid rounded w-100" alt="Cover image for {{ page.title }}" %}
+                        {% image page.cover_photo width-1200 as cover_image %}
+                        <img src="{{ cover_image.url }}" class="img-fluid rounded w-100" alt="{% translate 'Cover image for' %} {{ page.title }}" width="{{ cover_image.width }}" height="{{ cover_image.height }}">
                     </div>
                     <div id="chat-bubble" class="chat-bubble">
                         <div id="chat-content"></div>
                     </div>
                     <div id="chat-throbber" class="chat-throbber d-none">
                         <div class="spinner-border text-primary" role="status">
-                            <span class="visually-hidden">Loading...</span>
+                            <span class="visually-hidden">{% translate "Loading..." %}</span>
                         </div>
                     </div>
                 </div>
@@ -97,7 +98,7 @@ <h1 class="mb-4">{{ page.title }}</h1>
         chatForm.addEventListener('htmx:beforeRequest', function(event) {
             if (userMessageInput.value.length > maxLength) {
                 event.preventDefault();
-                alert(`Message exceeds maximum length of ${maxLength} characters.`);
+                alert("{% blocktranslate %}Message exceeds maximum length of {{ max_message_length }} characters.{% endblocktranslate %}");
                 return;
             }
             userMessageInput.value = '';

app/lessons/templates/lessons/chat_response.html

@@ -4,9 +4,7 @@
     </div>
 {% else %}
     <div class="assistant-message">
-        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chat" viewBox="0 0 16 16">
-            <path d="M2.678 11.894a1 1 0 0 1 .287.801 11 11 0 0 1-.398 2c1.395-.323 2.247-.697 2.634-.893a1 1 0 0 1 .71-.074A8 8 0 0 0 8 14c3.996 0 7-2.807 7-6s-3.004-6-7-6-7 2.808-7 6c0 1.468.617 2.83 1.678 3.894m-.493 3.905a22 22 0 0 1-.713.129c-.2.032-.352-.176-.273-.362a10 10 0 0 0 .244-.637l.003-.01c.248-.72.45-1.548.524-2.319C.743 11.37 0 9.76 0 8c0-3.866 3.582-7 8-7s8 3.134 8 7-3.582 7-8 7a9 9 0 0 1-2.347-.306c-.52.263-1.639.742-3.468 1.105"/>
-        </svg>
+        <i class="bi bi-chat-left-text-fill"></i>
         {{ assistant_message }}
     </div>
 {% endif %}

app/lessons/templates/lessons/chat_summary.html

@@ -1,14 +1,14 @@
 {% extends "base.html" %}
-{% load wagtailcore_tags wagtailimages_tags %}
+{% load wagtailcore_tags wagtailimages_tags i18n %}
 
-{% block title %}Lesson Complete: {{ page.title }}{% endblock %}
+{% block title %}{% translate "Lesson Complete:" %} {{ page.title }}{% endblock %}
 
 {% block content %}
 <div class="container mt-5">
-    <h1 class="mb-4"><i class="bi bi-mortarboard-fill"></i> Lesson Summary: {{ page.title }}</h1>
+    <h1 class="mb-4"><i class="bi bi-mortarboard-fill"></i> {% translate "Lesson Summary:" %} {{ page.title }}</h1>
 
     <section aria-labelledby="key-concepts-heading">
-        <h2 id="key-concepts-heading" class="mt-5 mb-3"><i class="bi bi-key-fill"></i> Key Concepts</h2>
+        <h2 id="key-concepts-heading" class="mt-5 mb-3"><i class="bi bi-key-fill"></i> {% translate "Key Concepts" %}</h2>
         <div class="row row-cols-1 row-cols-md-3 g-4">
             {% for concept in key_concepts %}
                 <div class="col">
@@ -29,7 +29,7 @@ <h2 id="key-concepts-heading" class="mt-5 mb-3"><i class="bi bi-key-fill"></i> K
     <div class="row mt-5">
         <div class="col-lg-7 mb-4 mb-lg-0">
             <section aria-labelledby="chat-transcript-heading">
-                <h2 id="chat-transcript-heading" class="mb-3"><i class="bi bi-chat-quote-fill"></i> Chat Transcript</h2>
+                <h2 id="chat-transcript-heading" class="mb-3"><i class="bi bi-chat-quote-fill"></i> {% translate "Chat Transcript" %}</h2>
                 {% if transcript.messages.all %}
                 <div>
                     <div class="p-2">
@@ -53,32 +53,32 @@ <h2 id="chat-transcript-heading" class="mb-3"><i class="bi bi-chat-quote-fill"><
                 </div>
                 {% else %}
                 <div class="alert alert-info" role="alert">
-                    No chat transcript available.
+                    {% translate "No chat transcript available." %}
                 </div>
                 {% endif %}
             </section>
         </div>
 
         <div class="col-lg-5">
             <section aria-labelledby="practice-more-heading">
-                <h2 id="practice-more-heading" class="mb-4"><i class="bi bi-clipboard2-check-fill"></i> Practice More</h2>
+                <h2 id="practice-more-heading" class="mb-4"><i class="bi bi-clipboard2-check-fill"></i> {% translate "Practice More" %}</h2>
                 <div>
                     <div class="p-2">
                         <div class="row mb-3">
                             <div class="col-md-8">
-                                <h3 class="card-title"><i class="bi bi-arrow-counterclockwise"></i> Restart Chat</h3>
-                                <p class="card-text mb-md-0">Practice the conversation again to reinforce your learning.</p>
+                                <h3 class="card-title"><i class="bi bi-arrow-counterclockwise"></i> {% translate "Restart Chat" %}</h3>
+                                <p class="card-text mb-md-0">{% translate "Practice the conversation again to reinforce your learning." %}</p>
                             </div>
                             <div class="col-md-4 d-flex align-items-start justify-content-md-end mt-3 mt-md-0">
                                 <a href="{{ page.url }}?{{start_over_param}}=true" class="btn btn-primary w-100">
-                                    <i class="bi bi-play-circle-fill" aria-hidden="true"></i> Restart
+                                    <i class="bi bi-play-circle-fill" aria-hidden="true"></i> {% translate "Restart" %}
                                 </a>
                             </div>
                         </div>
 
                         {% if page.minigames %}
-                            <h3 class="card-title mt-4"><i class="bi bi-person-workspace"></i> Interactive Exercises</h3>
-                            <p class="card-text">Reinforce your learning with these interactive activities:</p>
+                            <h3 class="card-title mt-4"><i class="bi bi-person-workspace"></i> {% translate "Interactive Exercises" %}</h3>
+                            <p class="card-text">{% translate "Reinforce your learning with these interactive activities:" %}</p>
                             <ul class="list-group list-group-flush">
                                 {% for block in page.minigames %}
                                     <li class="list-group-item">
@@ -91,7 +91,7 @@ <h4 class="mb-0"><i class="bi bi-puzzle-fill"></i> {{ block.value.title }}</h4>
                                             </div>
                                             <div class="col-md-4 d-flex justify-content-md-end mt-3 mt-md-0">
                                                 <a href="{{ page.url }}?{{ minigame_param }}={{ forloop.counter }}" class="btn btn-success w-100">
-                                                    <i class="bi bi-arrow-right-circle-fill"></i> Start
+                                                    <i class="bi bi-arrow-right-circle-fill"></i> {% translate "Start" %}
                                                 </a>
                                             </div>
                                         </div>

app/lessons/templates/lessons/combined_htmx_response.html

@@ -1,3 +1,5 @@
+{% load i18n %}
+
 <input type="hidden" name="response_key_concept" id="response-key-concept" value="{{ addressed_key_concept }}" hx-swap-oob="true">
 
 <div hx-swap-oob="true" id="chat-content">
@@ -13,7 +15,7 @@
         {% if addressed_key_concept in valid_key_concepts and addressed_key_concept != no_key_concept %}
             <div class="key-concept-used">
                 <i class="bi bi-info-circle-fill"></i>
-                Key Concept: {{ addressed_key_concept }}
+                {% translate "Key Concept:" %} {{ addressed_key_concept }}
             </div>
         {% endif %}
     {% endif %}
@@ -25,4 +27,4 @@
 
 <div id="suggested-responses-container" hx-swap-oob="true">
     {% include "lessons/suggested_responses.html" with suggestions=suggestions %}
-</div>
+</div>

app/lessons/templates/lessons/key_concepts_grid.html

@@ -12,18 +12,8 @@ <h2 class="mb-3">Key Concepts</h2>
                 <div class="card-body p-2">
                     {% if concept.concept in addressed_key_concepts %}
                     <p class="card-text mb-0 text-center text-light">
-
-                        <svg 
-                            xmlns="http://www.w3.org/2000/svg"
-                            width="24" 
-                            height="24" 
-                            fill="white" 
-                            class="animated-checkmark"
-                            viewBox="0 0 16 16">
-                                <path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0"/>
-                        </svg> 
-
-                        {{ concept.concept }}
+                        <i class="bi bi-check animated-checkmark">
+                        {{ concept.concept }}</i>
                     </p>
                     {% else %}
                     <p class="card-text mb-0 text-center">

app/lessons/templates/lessons/suggested_responses.html

@@ -1,19 +1,27 @@
+{% load i18n %}
+
 {% if suggestions %}
     <div class="suggestions">
-        <strong>Suggested responses:</strong><br>
+        <strong>{% translate "Suggested responses:" %}</strong><br>
         {% for suggestion in suggestions %}
-            <span class="suggestion">{{ suggestion.text }}</span>
+            <button class="btn btn-default suggestion" tabindex="{{ forloop.counter }}">
+                {{ suggestion.text }}
+            </button>
         {% endfor %}
     </div>
     <script>
-        const userMessageInput = document.getElementById('user-message-input');
-        const suggestions = document.querySelectorAll('.suggestion');
-        suggestions.forEach(suggestion => {
-            suggestion.addEventListener('click', function() {
-                userMessageInput.value = suggestion.textContent;
-                userMessageInput.focus();
+        /* We use an IIFE here to avoid redefining variables in the global scope */
+        (function() {
+            const userMessageInput = document.getElementById('user-message-input');
+            const suggestions = document.querySelectorAll('.suggestion');
+            suggestions.forEach(suggestion => {
+                suggestion.addEventListener('click', function() {
+                    if (userMessageInput) {
+                        userMessageInput.value = this.textContent;
+                        userMessageInput.focus();
+                    }
+                });
             });
-        });
-        console.log('suggestions loaded');
+        })();
     </script>
 {% endif %}

app/minigames/templates/minigames/minigame.html

@@ -1,18 +1,18 @@
 {% extends "base.html" %}
-{% load wagtailcore_tags %}
+{% load wagtailcore_tags i18n %}
 
-{% block title %}{{ page.title }} - {{ minigame.value.title }}{% endblock %}
+{% block title %}{{ page_title }} - {{ minigame_title }}{% endblock %}
 
 {% block content %}
 <div class="container mt-5">
-    <h1>{{ page.title }} - {{ minigame.value.title }}</h1>
+    <h1>{{ page_title }} - {{ minigame_title }}</h1>
 
     <div class="minigame-container">
         {% include_block minigame %}
     </div>
 
     <div class="mt-4 mb-4">
-        <a href="{{ page.url }}?chat_summary=true" class="btn btn-primary">Back to Summary</a>
+        <a href="{{ page.url }}?chat_summary=true" class="btn btn-primary">{% translate "Back to Summary" %}</a>
     </div>
 </div>
 {% endblock %}