AlgoLab ma cztery zakładki, interaktywny samouczek i działa bez instalacji. W tym artykule opisuję każdą funkcję krok po kroku — od pierwszego uruchomienia, przez pisanie pseudokodu, po rozwiązywanie zadań w trybie diagram blokowy.
Pierwsze uruchomienie — samouczek
Gdy otwierasz AlgoLab po raz pierwszy, automatycznie pojawia się interaktywny samouczek (8 kroków). Podświetla kolejne elementy interfejsu i krótko objaśnia każdy z nich. Możesz go przejść w całości lub pominąć — i wrócić do niego w każdej chwili klikając przycisk 💡 Samouczek w prawym górnym rogu nagłówka.
Samouczek zapamiętuje, że już go widziałeś — nie pojawi się ponownie po odświeżeniu strony.
Zakładka ✏️ Edytor
To główna zakładka aplikacji. Podzielona jest na dwie kolumny:
- lewa — edytor pseudokodu,
- prawa — panel sterowania, dane wejściowe, wyjście i zmienne,
- dolna część — diagram blokowy (synchronizuje się automatycznie).
✔ Pisanie pseudokodu
Wpisz algorytm w edytorze używając polskich słów kluczowych. Składnia podświetla się automatycznie. Oto podstawowe konstrukcje:
czytaj(a)
czytaj(b)
suma <- a + b
pisz(suma)Pełna składnia dostępna jest w zakładce ❓ Pomoc.
✔ Gotowe przykłady
Rozwijalną listę znajdziesz nad edytorem. Dostępne są:
- Silnia
- Ciąg Fibonacciego
- Sortowanie bąbelkowe
- Wyszukiwanie binarne
- Algorytm Euklidesa (NWD)
- Sprawdzanie pierwszości
Po wybraniu przykładu kod wczytuje się do edytora, a diagram generuje się natychmiast.
✔ Uruchamianie algorytmu
Przed kliknięciem ▶ Uruchom dodaj dane wejściowe w polu „Dane wejściowe” (jedno wejście = jedna wartość, dodajesz je przyciskiem Dodaj). Następnie:
- ▶ Uruchom — wykonuje cały algorytm od razu i wypisuje wynik,
- ⏭ Krok — wykonuje algorytm instrukcja po instrukcji (podświetla aktualną linię),
- ⏹ Reset — zatrzymuje wykonywanie i czyści wyjście.
Suwak Prędkość animacji kontroluje tempo kroków w trybie krokowym.
✔ Panel zmiennych
Po prawej stronie, w sekcji „Zmienne”, na bieżąco widać wartości wszystkich zmiennych podczas wykonywania algorytmu. Jeśli zmienna jest tablicą, widoczna jest jako lista indeksowanych elementów.
Diagram blokowy — dwukierunkowa synchronizacja
Diagram blokowy wyświetla się w dolnej części zakładki Edytor i synchronizuje się z kodem automatycznie:
- Edytujesz kod → diagram aktualizuje się po chwili (debounce 800 ms),
- Edytujesz diagram (przeciągasz bloki, dodajesz, usuwasz, łączysz) → kod aktualizuje się po chwili (debounce 500 ms).
✔ Jak dodawać bloki?
Po lewej stronie diagramu znajduje się paleta bloków. Możesz:
- kliknąć blok — pojawi się na środku widocznego obszaru,
- przeciągnąć blok (drag & drop) bezpośrednio na kanwę w wybrane miejsce.
✔ Jak edytować treść bloku?
Kliknij dwukrotnie na blok — pojawi się okno edycji z polem na etykietę i kod bloku. Zatwierdź przyciskiem ✔ OK.
✔ Jak łączyć bloki?
Najedź kursorem na krawędź bloku — pojawi się niebieski punkt połączenia. Kliknij go i przeciągnij do innego bloku. Do usunięcia połączenia kliknij na linię i naciśnij klawisz Delete lub Backspace.
✔ Zoom i nawigacja
Pasek narzędzi nad diagramem zawiera przyciski:
- 🔍+ / 🔍− — przybliż / oddal,
- ⊞ — dopasuj widok do wszystkich bloków (zoom fit),
- 🗑️ Wyczyść — usuwa wszystkie bloki i połączenia.
Uwaga o blokach START i STOP
Bloki START i STOP mają charakter wyłącznie strukturalny — nie generują żadnej linii pseudokodu. Są automatycznie dodawane przy generowaniu diagramu z kodu i wymagane przez schemat blokowy, ale algorytm działa bez nich tak samo.
Zakładka 📊 Wizualizacje
Wizualizator pokazuje animację wykonywania algorytmu krok po kroku — z podświetlaniem aktywnej linii, historią wartości zmiennych i graficzną reprezentacją tablic. Zakładka dostępna jest po wczytaniu kodu w Edytorze.
Przydaje się szczególnie przy algorytmach sortowania i wyszukiwania — możesz zobaczyć dokładnie, co się zmienia w każdej iteracji pętli.
Zakładka 📝 Zadania
Sekcja z 10 zadaniami algorytmicznymi sprawdzonymi automatycznie. Zadania podzielone są według poziomu trudności i kategorii:
| Poziom | Zadania |
|---|---|
| Łatwe | Suma dwóch liczb, Maksimum z trzech liczb, Silnia |
| Średnie | Fibonacci, Liczba pierwsza, NWD (Euklides), Odwróć tablicę |
| Trudne | Suma cyfr, Sortowanie bąbelkowe, Liczba palindromowa |
✔ Jak rozwiązywać zadania?
Po wybraniu zadania z listy po lewej stronie:
- Przeczytaj opis i sprawdź przykłady wejście/wyjście.
- Wybierz tryb rozwiązywania:
— 📝 Pseudokod — klasycznie, w edytorze tekstowym,
— 🔷 Diagram — układasz algorytm z bloków graficznie. - Napisz lub zbuduj rozwiązanie.
- Kliknij ▶ Sprawdź rozwiązanie — aplikacja uruchomi Twój kod na zestawie testów i pokaże wynik.
✔ Tryb diagram w zadaniach
Po przełączeniu na tryb 🔷 Diagram otwiera się mini-edytor bloków:
- paleta bloków po lewej (bez START/STOP — są dodawane automatycznie),
- kanwa SVG z możliwością drag & drop,
- zoom i czyszczenie diagramu.
Jeśli w edytorze pseudokodu był wcześniej kod, AlgoLab spróbuje automatycznie wygenerować z niego diagram na start.
✔ Podpowiedzi i wzorcowe rozwiązania
- 💡 Podpowiedź — pokazuje wskazówkę bez spoilowania całego rozwiązania,
- 👁️ Pokaż rozwiązanie — po potwierdzeniu wczytuje wzorcowe rozwiązanie do edytora.
Ukończone zadania oznaczane są zielonym ✓ na liście. Postęp zapisywany jest w przeglądarce (localStorage) — nie zginie po odświeżeniu strony.
Zakładka ❓ Pomoc
Zawiera pełną dokumentację składni pseudokodu z przykładami dla każdej konstrukcji językowej: przypisanie, wczytywanie, wypisywanie, warunki, pętle, tablice, funkcje i operatory. Warto mieć ją otwartą podczas pierwszych kroków z aplikacją.
Skróty klawiszowe i wskazówki
- Tab w edytorze wstawia 2 spacje (wcięcie),
- Delete / Backspace na zaznaczonym bloku lub połączeniu — usuwa element,
- Kliknięcie bloku na diagramie zaznacza go (obwódka), kliknięcie w pustym miejscu usuwa zaznaczenie,
- Podwójne kliknięcie bloku otwiera edytor etykiety,
- Diagram można przewijać kółkiem myszy (zoom) i przeciągać tło (przesunięcie widoku).
Podsumowanie
AlgoLab łączy edytor pseudokodu, diagram blokowy, interpreter i zadania z auto-oceną w jednym narzędziu działającym w przeglądarce. Niezależnie od tego, czy wolisz pisać kod tekstowo czy budować go z graficznych klocków — obydwa podejścia prowadzą do tego samego wyniku.
Jeśli masz pytania lub pomysły na nowe funkcje — napisz w komentarzu lub skontaktuj się bezpośrednio. AlgoLab jest projektem aktywnie rozwijanym. Kod źródłowy dostępny na GitHubie.
Dodaj komentarz