YOLO in score history Copilot++ gogogo

api/models.py

@@ -1,6 +1,7 @@
 from django.db import models
 
 from core import models as core_models
+from django.contrib.auth.models import User
 
 
 class Challenge(core_models.CoreBaseModel):
@@ -10,3 +11,12 @@ class Challenge(core_models.CoreBaseModel):
 
 class ChallengeGroup(core_models.CoreBaseModel):
     challenges = models.ManyToManyField(Challenge)
+
+class TypingSpeed(core_models.CoreBaseModel):
+    user = models.ForeignKey(User, on_delete=models.CASCADE)
+    challenge = models.ForeignKey(Challenge, on_delete=models.CASCADE)
+    speed = models.IntegerField()  # Speed in symbols per minute
+    accuracy = models.FloatField()  # Accuracy as a percentage
+
+    class Meta:
+        ordering = ['-created_at']

api/serializers.py

@@ -13,3 +13,8 @@ class ChallengeGroupSerializer(serializers.ModelSerializer):
     class Meta:
         model = models.ChallengeGroup
         fields = "__all__"
+
+class TypingSpeedSerializer(serializers.ModelSerializer):
+    class Meta:
+        model = models.TypingSpeed
+        fields = ['id', 'user', 'challenge', 'speed', 'accuracy', 'created_at']

api/urls.py

@@ -8,6 +8,7 @@
 router = routers.DefaultRouter()
 router.register(r"challenges", views.ChallengeViewSet)
 router.register(r"challenge_groups", views.ChallengeGroupViewSet)
+router.register(r"typing-speeds", views.TypingSpeedViewSet)
 
 urlpatterns = [
     path("v1/", include(router.urls)),

api/views.py

@@ -11,3 +11,10 @@ class ChallengeViewSet(viewsets.ModelViewSet):
 class ChallengeGroupViewSet(viewsets.ModelViewSet):
     queryset = models.ChallengeGroup.objects.all()
     serializer_class = serializers.ChallengeGroupSerializer
+
+class TypingSpeedViewSet(viewsets.ModelViewSet):
+    queryset = models.TypingSpeed.objects.all()
+    serializer_class = serializers.TypingSpeedSerializer
+
+    def perform_create(self, serializer):
+        serializer.save(user=self.request.user)

frontend/templates/frontend/tutor.html

@@ -243,6 +243,22 @@
                     setShowEnglish(true);
                     setShowAccuracy(true);
 
+                    // Send typing speed data to the backend
+                    fetch('../api/v1/typing-speeds/', {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json',
+                            'X-CSRFToken': csrftoken
+                        },
+                        body: JSON.stringify({
+                            challenge: currentChallenge.id,
+                            speed: calculatedSpm,
+                            accuracy: calculatedAccuracy
+                        })
+                    }).then(response => response.json())
+                        .then(data => console.log('Typing speed saved:', data))
+                        .catch(error => console.error('Error saving typing speed:', error));
+
                     setTimeout(() => {
                         const nextIndex = (currentChallengeIndex + 1) % challengeIds.length;
                         setCurrentChallengeIndex(nextIndex);
@@ -294,6 +310,42 @@ <h1 className="text-3xl font-bold mb-6 text-center">Hangul Typing Tutor</h1>
                         )}
                         <p className="text-sm text-gray-500 mt-2">{debug}</p>
                     </div>
+                    <TypingHistory />
+                </div>
+            );
+        }
+
+        function TypingHistory() {
+            const [history, setHistory] = React.useState([]);
+
+            React.useEffect(() => {
+                fetch('../api/v1/typing-speeds/')
+                    .then(response => response.json())
+                    .then(data => setHistory(data))
+                    .catch(error => console.error('Error fetching typing history:', error));
+            }, []);
+
+            return (
+                <div className="mt-8">
+                    <h2 className="text-xl font-bold mb-4">Your Typing History</h2>
+                    <table className="w-full">
+                        <thead>
+                            <tr>
+                                <th>Date</th>
+                                <th>Speed (SPM)</th>
+                                <th>Accuracy (%)</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {history.map(entry => (
+                                <tr key={entry.id}>
+                                    <td>{new Date(entry.timestamp).toLocaleString()}</td>
+                                    <td>{entry.speed}</td>
+                                    <td>{entry.accuracy}</td>
+                                </tr>
+                            ))}
+                        </tbody>
+                    </table>
                 </div>
             );
         }