rve/learning-platform
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: end micro-learning sessions explicitly and route to test

Browse Source 
Every micro-learning format used to call onComplete implicitly — scroll
to the bottom of the explainer, flip the last flashcard, or pick any
scenario option — which yanked users out of the content before they
were done with it.

Replace the implicit triggers with a Finish session button on each
format. The scenario quiz exposes the button only after an option is
chosen so explanations still get read; the flashcard set exposes a
viewed-cards counter next to it.

The topic-reviewed landing screen now offers Back to Station, Try
another format, and Go to test, so finishing a session leads somewhere
useful instead of dead-ending. Drop the unreachable completion box that
the container was rendering underneath the parent's success screen.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
RaymondVerhoef
2026-05-26 14:20:41 +02:00
parent 84e7468841
commit 9b3d7fde8c
5 changed files with 49 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/pages/Leren.jsx
View File

@@ -1,7 +1,7 @@
import { useState, useEffect } from 'react';
import { BookOpen, CheckCircle, ArrowRight, ChevronLeft, Calendar } from 'lucide-react';
import { BookOpen, CheckCircle, ArrowRight, ChevronLeft, Calendar, CheckSquare } from 'lucide-react';
import { motion } from 'framer-motion';
import { Link } from 'react-router-dom';
import { useNavigate } from 'react-router-dom';
import Card from '../components/ui/Card';
import Button from '../components/ui/Button';
import Tag from '../components/ui/Tag';
@@ -14,6 +14,7 @@ import { useMicroLearningCompletions } from '../hooks/useMicroLearningCompletion
const Leren = () => {
const { state } = useApp();
const navigate = useNavigate();
const [assignedTopic, setAssignedTopic] = useState(null);
const [allTopics, setAllTopics] = useState([]);
@@ -96,12 +97,21 @@ const Leren = () => {
<CheckCircle size={80} className="mx-auto text-teal mb-6" />
</motion.div>
<h1 className="text-3xl font-bold mb-4">Topic reviewed!</h1>
<p className="text-fg-muted mb-8">
<p className="text-fg-muted mb-2">
You have successfully completed a micro learning for "<strong>{activeTopic.label}</strong>".
</p>
<div className="flex justify-center gap-4">
<p className="text-fg-muted mb-8">
Ready to put it to the test, or explore another format for this topic?
</p>
<div className="flex flex-wrap justify-center gap-3">
<Button variant="outline" onClick={() => { setView('overview'); setSessionDone(false); }}>
Back to Station
<ChevronLeft size={16} className="mr-2" /> Back to Station
</Button>
<Button variant="outline" onClick={() => setSessionDone(false)}>
Try another format
</Button>
<Button onClick={() => navigate('/test')}>
<CheckSquare size={16} className="mr-2" /> Go to test
</Button>
</div>
</div>