Wyzwania i lekcje

Tutor IDE oferuje rozbudowany system wyzwan obejmujacy trzy typy zadan: lekcje krok po kroku, CSS Battle oraz lekcje interaktywne. Nauczyciel przypisuje wyzwania uczniom indywidualnie, grupom lub calym sciezkom nauki. Uczniowie rozwiazuja zadania w edytorze, zdobywaja punkty doswiadczenia i sledza swoje postepy.

---

Lekcje (wyzwania standardowe)

Lekcje to zadania programistyczne z gotowym szablonem kodu i instrukcjami. Uczen otwiera lekcje, czyta polecenie i pisze rozwiazanie w edytorze.

Jak to dziala?

1. Nauczyciel przypisuje lekcje -- wybiera wyzwanie i przypisuje je konkretnemu uczniowi lub calej grupie
2. Uczen otwiera zadanie -- w dashboardzie pojawia sie przypisana lekcja z instrukcja i kodem startowym
3. Uczen pisze rozwiazanie -- pracuje w edytorze, korzysta z podgladu na zywo i asystenta AI
4. System sprawdza automatycznie -- jesli nauczyciel skonfigurowal reguly auto-oceny, wynik jest obliczany natychmiast po wyslaniu
5. Nauczyciel ocenia prace -- przglada rozwiazanie ucznia, dodaje recenzje kodu i wystawia ocene

Ocenianie

Nauczyciel ocenia kazde rozwiazanie:

• Punkty (0--100) -- ocena liczbowa za jakosc rozwiazania
• Komentarz -- pisemna informacja zwrotna, wskazowki i pochwaly
• Termin oddania -- nauczyciel moze ustawic date, do ktorej uczen powinien ukonczyc zadanie
• Auto-ocena -- opcjonalne automatyczne sprawdzenie na podstawie zdefiniowanych regul (patrz sekcja Reguly auto-oceny)

Uczen widzi swoja ocene, komentarz nauczyciela oraz adnotacje do kodu w panelu dashboardu.

Wlasciwosci wyzwan

Kazde wyzwanie posiada nastepujace atrybuty:

• Kategoria -- HTML, CSS, JS, HTML+CSS lub Python
• Poziom trudnosci -- 1 (poczatkujacy), 2 (sredniozaawansowany), 3 (zaawansowany)
• Tworca (created_by) -- pole sledzace, kto stworzyl dane wyzwanie
• Flaga is_global -- wyzwania globalne sa dostepne dla wszystkich organizacji
• Flaga is_active -- pozwala dezaktywowac wyzwanie bez jego usuwania

---

CSS Battle

CSS Battle to wyzwania, w ktorych uczen odwzorowuje obrazek docelowy za pomoca HTML i CSS. To doskonaly sposob na cwiczenie stylowania -- uczen uczy sie pozycjonowania elementow, kolorow, ksztaltow i gradientow.

Jak wyglada zadanie?

• Po lewej stronie widoczny jest obrazek docelowy -- wzor do odwzorowania
• Po prawej uczen pisze kod w dwoch zakladkach: index.html i style.css
• Pod edytorem wyswietla sie podglad na zywo -- efekt kodu ucznia obok wzoru

Pliki startowe

Kazde zadanie CSS Battle rozpoczyna sie z gotowymi plikami:

• index.html -- <div></div> (fragment body, nie pelny dokument)
• style.css -- reset body + pusty selektor div, gotowy do wypelnienia

System automatycznie opakowuje te fragmenty w pelny dokument HTML do podgladu.

Konfiguracja canvasu

Kazde zadanie CSS Battle moze miec wlasne wymiary canvasu:

• Szerokosc (canvas_width) -- domyslnie 400px
• Wysokosc (canvas_height) -- domyslnie 300px
• Nauczyciel ustawia wymiary przy tworzeniu zadania

Automatyczna ocena

System porownuje obraz ucznia z obrazem docelowym piksel po pikselu i oblicza wynik dopasowania (0--100%):

• 100% -- idealnie! Obraz ucznia jest identyczny z wzorem
• 80--99% -- bardzo dobrze, drobne roznice
• 50--79% -- dobry poczatek, ale sa widoczne roznice
• Ponizej 50% -- warto sprobowac jeszcze raz

Bonusy XP za CSS Battle

Za dobre wyniki w CSS Battle uczen zdobywa dodatkowe punkty doswiadczenia:

• 90%+ dopasowania -- bonus +50 XP
• 100% dopasowania (pixel-perfect) -- bonus +100 XP

Narzedzia pomocnicze

• Suwak porownania -- uczen moze przesuwac suwak, aby nalozyc swoj obraz na wzor i zobaczyc, gdzie sa roznice
• Paleta kolorow -- kolory uzyte w obrazku docelowym wyswietlane sa jako klikalne probki, dzieki czemu uczen nie musi zgadywac wartosci kolorow. Kolory sa automatycznie wyodrebniane z kodu docelowego.
• Podglad na zywo -- kazda zmiana w kodzie natychmiast aktualizuje podglad

---

Lekcje interaktywne

Lekcje interaktywne to trzeci typ wyzwan, laczacy teorie z praktyka w jednym, ustrukturyzowanym doswiadczeniu. Uczen przechodzi przez kolejne bloki treści, zdobywajac wiedze i natychmiast ja testujac.

Typy blokow

Kazda lekcja interaktywna sklada sie z uporzadkowanej sekwencji blokow:

Blok teorii (theory)

• Bogato sformatowany tekst z naglowkami, listami i wyroznieniami
• Przyklady kodu z podswietlaniem skladni
• Ilustracje i diagramy
• Idealne do wprowadzenia nowego zagadnienia lub wyjasnienia koncepcji

Blok quizu (quiz)

• Pytania testowe sprawdzajace zrozumienie teorii
• Rozne formaty pytan (jednokrotny wybor, wielokrotny wybor)
• Natychmiastowa informacja zwrotna po udzieleniu odpowiedzi
• Uczen musi odpowiedziec poprawnie, aby kontynuowac

Blok zadania kodowania (code_task)

• Uczen pisze i uruchamia kod w edytorze
• Zadanie jest powiazane z wczesniej omowiona teoria
• Automatyczne sprawdzenie poprawnosci rozwiazania
• Podpowiedzi dostepne w razie trudnosci

Progresja przez bloki

• Uczen przechodzi przez bloki w ustalonej kolejnosci -- nie mozna przeskakiwac
• Kazdy blok musi byc ukonczony przed przejsciem do nastepnego
• Postep jest zapisywany automatycznie -- uczen moze wrocic do lekcji w dowolnym momencie
• Po ukonczeniu wszystkich blokow lekcja jest oznaczona jako ukonczona

Przykladowy przebieg lekcji interaktywnej

Lekcja: Wprowadzenie do CSS Flexbox

1. Teoria -- Co to jest Flexbox? Wyjasnienie display: flex, osi glownej i poprzecznej
2. Quiz -- "Ktora wlasciwosc ustawia kierunek osi glownej?" (pytanie jednokrotnego wyboru)
3. Zadanie -- "Ustaw trzy elementy w rzedzie za pomoca Flexbox"
4. Teoria -- Wlasciwosci justify-content i align-items
5. Quiz -- "Jaka wartosc justify-content rozklada elementy rownomiernie?"
6. Zadanie -- "Wycentruj element pionowo i poziomo w kontenerze"

---

Sciezki nauki

Sciezki nauki to uporzadkowane sekwencje wyzwan tworzace pelny program nauczania. Zamiast przypisywac pojedyncze wyzwania, nauczyciel moze przypisac cala sciezke, a uczen przechodzi przez nia krok po kroku.

Dostepne jezyki

Sciezki nauki sa dostepne dla trzech jezykow programowania:

• HTML+CSS -- od podstaw HTML po zaawansowane layouty CSS
• JavaScript -- od zmiennych i petli po interaktywne aplikacje
• Python Turtle -- programowanie grafiki zolwiem (idealne dla mlodszych uczniow)

Poziomy trudnosci

Kazda sciezka jest podzielona na trzy poziomy:

• Poczatkujacy -- podstawowe koncepcje, proste zadania, duzo wsparcia
• Sredniozaawansowany -- bardziej zlozone zadania, mniej podpowiedzi
• Zaawansowany -- wyzwania wymagajace samodzielnego myslenia i kreatywnosci

Mechanizm bram (gates)

Niektore kroki w sciezce sa oznaczone jako bramy (is_gate). Bramy to kluczowe zadania, ktore uczen musi ukonczyc, zanim bedzie mogl przejsc dalej:

• Bramy zapewniaja, ze uczen opanowal podstawy przed przejsciem do trudniejszych zadan
• Nauczyciel widzi, ktorzy uczniowie utkneli na bramach
• Zadania miedzy bramami moga byc wykonywane w dowolnej kolejnosci

Postep ucznia

Kazdy uczen widzi swoj postep w kazdej przypisanej sciezce:

• Pasek postepu -- wizualny wskaznik procentowy ukonczenia sciezki
• Wskazniki krokow -- kazdy krok sciezki ma wlasny znacznik (ukonczony, biezacy, zablokowany)
• Procentowe ukonczenie -- np. "Ukonczyles 12 z 20 zadan (60%)"

Przypisywanie sciezek

Nauczyciel przypisuje cale sciezki uczniom lub grupom:

1. Otworz panel Wyzwania w panelu administracyjnym
2. Wybierz zakladke Sciezki nauki
3. Wybierz sciezke -- np. "HTML+CSS: Poczatkujacy"
4. Przypisz do ucznia, grupy lub wielu uczniow naraz
5. Monitoruj postepy -- sledz, ktorzy uczniowie ukonczyli poszczegolne kroki

Przykladowa sciezka: HTML+CSS dla poczatkujacych

Krok	Typ	Tytul	Brama?
1	Lekcja interaktywna	Czym jest HTML?	Nie
2	Wyzwanie standardowe	Moja pierwsza strona	Tak
3	Lekcja interaktywna	Tagi i atrybuty	Nie
4	Wyzwanie standardowe	Lista zakupow w HTML	Nie
5	Wyzwanie standardowe	Galeria zdjec	Tak
6	Lekcja interaktywna	Wprowadzenie do CSS	Nie
7	CSS Battle	Kolorowy kwadrat	Nie
8	Wyzwanie standardowe	Stylowa wizytowka	Tak

---

Reguly auto-oceny

Nauczyciel moze skonfigurowac automatyczne kryteria oceny dla kazdego wyzwania. System sprawdza rozwiazanie ucznia natychmiast po wyslaniu i oblicza wynik na podstawie zdefiniowanych regul.

Typy regul

Typ reguly	Opis	Przyklad
output_match	Wynik dzialania kodu musi dokladnie pasowac do oczekiwanego	Oczekiwany output: Hello World!
contains_element	Kod HTML musi zawierac okreslony element	Wymagany element: <ul> z co najmniej 3 elementami <li>
css_property	Okreslony element musi miec dana wlasciwosc CSS	Element .container musi miec display: flex
code_contains	Kod zrodlowy musi zawierac okreslony fragment	Kod musi zawierac addEventListener
regex_match	Kod lub wynik musi pasowac do wyrazenia regularnego	Pattern: function\s+\w+\(.*\)

Konfiguracja regul

Kazda regula posiada:

• Typ -- jeden z powyzszych typow
• Wartosc oczekiwana -- co dokladnie ma byc sprawdzone
• Punkty -- ile punktow uczen zdobywa za spelnienie tej reguly
• Podpowiedz (opcjonalna) -- wskazowka wyswietlana uczniowi, jesli regula nie jest spelniona

Przykladowa konfiguracja

Wyzwanie: "Stworzlistę zakupów"

Regula	Punkty	Podpowiedz
contains_element: strona zawiera <ul>	20 pkt	"Uzyj tagu <ul> do stworzenia listy"
contains_element: lista ma min. 5 elementow <li>	30 pkt	"Dodaj co najmniej 5 elementow do listy"
contains_element: strona zawiera <h1>	20 pkt	"Dodaj naglowek strony"
css_property: ul ma list-style-type	15 pkt	"Zmien styl punktorow listy w CSS"
css_property: body ma font-family	15 pkt	"Ustaw wlasna czcionke dla strony"

Przebieg auto-oceny

1. Uczen wysyla rozwiazanie -- klika przycisk "Oddaj"
2. System sprawdza reguly -- kazda regula jest weryfikowana osobno
3. Obliczanie wyniku -- suma punktow za spelnione reguly
4. Natychmiastowa informacja zwrotna -- uczen widzi, ktore reguly spelnil, a ktore nie (z podpowiedziami)
5. Nauczyciel moze nadpisac -- reczna ocena nauczyciela zawsze ma priorytet nad auto-ocena

Podglad auto-oceny

Nauczyciel moze przetestowac reguly auto-oceny na dowolnym rozwiazaniu ucznia:

• Otworz rozwiazanie ucznia w panelu
• Kliknij "Podglad auto-oceny"
• System pokaze, ktore reguly sa spelnione, a ktore nie
• Przydatne do weryfikacji, czy reguly sa poprawnie skonfigurowane

Ocena zbiorcza

Nauczyciel moze ocenic wiele rozwiazan naraz:

• Zaznacz uczniow w tabeli
• Kliknij "Ocen zaznaczonych"
• Zastosuj auto-ocene do wszystkich wybranych rozwiazan
• Opcjonalnie dodaj wspolny komentarz

---

Recenzje kodu

Nauczyciel moze przeprowadzac szczegolowe recenzje kodu rozwiazan uczniow, dodajac adnotacje do konkretnych linii kodu.

Przebieg recenzji

Kazde rozwiazanie ma status recenzji:

1. Oczekuje (pending) -- rozwiazanie zostalo wyslane, czeka na recenzje
2. W trakcie recenzji (in_review) -- nauczyciel rozpoczal przegladanie kodu
3. Ukonczone (completed) -- recenzja jest gotowa, uczen moze zobaczyc adnotacje

Adnotacje do kodu

Nauczyciel dodaje adnotacje bezposrednio do konkretnych linii kodu ucznia:

Typy adnotacji

• Sugestia (suggestion) -- propozycja ulepszenia kodu, np. "Mozesz uzyc forEach zamiast petli for"
• Problem (issue) -- blad lub problem do naprawienia, np. "Ten selektor nie celuje w prawidlowy element"
• Pochwala (praise) -- pozytywna informacja zwrotna, np. "Swietne uzycie zmiennych CSS!"

Jak to wyglada dla ucznia?

• Uczen otwiera swoje rozwiazanie w edytorze
• Linie z adnotacjami sa podswietlone kolorami:
  • Zolty -- sugestia
  • Czerwony -- problem
  • Zielony -- pochwala
• Po kliknieciu podswietlonej linii uczen widzi tresc adnotacji
• Uczen moze poprawic kod na podstawie uwag nauczyciela

Wiele recenzji

Kazde rozwiazanie moze miec wiele recenzji -- np. pierwsza recenzja po pierwszym wyslaniu, druga po poprawkach ucznia. Historia recenzji jest zachowana, dzieki czemu widac postep ucznia w czasie.

Przykladowy przebieg

1. Uczen wysyla rozwiazanie zadania "Galeria zdjec"
2. Nauczyciel otwiera rozwiazanie i zmienia status na "W trakcie recenzji"
3. Nauczyciel dodaje adnotacje:
   • Linia 5 (problem): "Brakuje atrybutu alt w tagu <img>"
   • Linia 12 (sugestia): "Uzyj gap zamiast margin w Flexbox"
   • Linia 18 (pochwala): "Dobry dobor kolorow!"
4. Nauczyciel oznacza recenzje jako ukonczona
5. Uczen widzi adnotacje w edytorze i poprawia kod
6. Uczen wysyla poprawione rozwiazanie
7. Nauczyciel przeprowadza druga recenzje

---

Dziennik ocen (Gradebook)

Dziennik ocen to kompleksowy widok podsumowujacy wyniki wszystkich uczniow w jednym miejscu.

Widok macierzowy

Dziennik ocen wyswietla dane w formie macierzy: wyzwania x uczniowie:

• Kolumny -- kazde wyzwanie to osobna kolumna
• Wiersze -- kazdy uczen to osobny wiersz
• Komorki -- wynik ucznia za dane wyzwanie (punkty, procent lub status)

Kolory komorek sygnalizuja status:

• Szary -- nie przypisano lub nie rozpoczeto
• Zolty -- w trakcie
• Zielony -- ukonczone i ocenione
• Czerwony -- po terminie

Filtrowanie

Nauczyciel moze filtrowac widok wedlug:

• Wyzwania -- pokaz tylko wybrane wyzwania lub cala sciezke
• Ucznia -- szukaj konkretnego ucznia po imieniu
• Statusu -- pokaz tylko nieukonczone, ukonczone lub po terminie
• Grupy -- pokaz uczniow z wybranej grupy

Eksport CSV

Nauczyciel moze wyeksportowac dane z dziennika ocen do pliku CSV:

• Kliknij przycisk "Eksportuj CSV"
• Plik zawiera: imie ucznia, nazwe wyzwania, wynik, date oddania, status
• Idealny do importu do zewnetrznych systemow oceniania lub arkuszy kalkulacyjnych

Operacje zbiorcze

Z poziomu dziennika ocen nauczyciel moze:

• Ocenic zbiorczowo -- zastosowac auto-ocene do wielu rozwiazan naraz
• Przypisac zbiorczowo -- przypisac wyzwanie wielu uczniom jednoczesnie
• Eksportowac wybrane -- wyeksportowac tylko zaznaczone wiersze do CSV

---

Zarzadzanie wyzwaniami (perspektywa nauczyciela)

Tworzenie wyzwan

Nauczyciel moze tworzyc wlasne wyzwania z poziomu panelu administracyjnego:

1. Otworz zakladke Wyzwania w panelu admina
2. Kliknij "Nowe wyzwanie"
3. Wypelnij formularz:
   • Tytul i opis zadania
   • Kategoria (HTML, CSS, JS, HTML+CSS, Python)
   • Poziom trudnosci (1--3)
   • Typ: lekcja standardowa, CSS Battle lub lekcja interaktywna
   • Pliki startowe (szablon kodu)
   • Reguly auto-oceny (opcjonalnie)
4. Zapisz i przypisz uczniom

Widocznosc wyzwan (dwupoziomowe zarzadzanie)

System stosuje dwupoziomowe zarzadzanie materialami:

• Wlasciciel organizacji tworzy wyzwania i przypisuje je nauczycielom
• Nauczyciele widza tylko wyzwania, ktore sami stworzyli (created_by) lub ktore zostaly im przypisane przez wlasciciela
• Wlasciciel widzi wszystkie wyzwania w organizacji
• Nauczyciel moze rowniez tworzyc wlasne wyzwania -- beda widoczne tylko dla niego i wlasciciela

To pozwala wlascicielowi kontrolowac, ktore materialy sa dostepne dla poszczegolnych nauczycieli, przy jednoczesnym umozliwieniu nauczycielom tworzenia wlasnych materialow.

Przypisywanie wyzwan

1. Otworz Panel admina -- przejdz do zakladki Wyzwania (Challenges)
2. Wybierz typ -- przelacz miedzy zakladkami Lekcje, CSS Battle i Lekcje interaktywne
3. Przypisz wyzwanie -- wybierz konkretnego ucznia lub cala grupe
4. Ustaw termin (opcjonalnie) -- okresl date oddania zadania
5. Sprawdz postepy -- przegladaj rozwiazania uczniow, ich wyniki i statusy
6. Ocen prace -- zastosuj auto-ocene lub recznie ocen z komentarzem i adnotacjami

Podglad wynikow

W panelu nauczyciel widzi:

• Liste uczniow przypisanych do danego wyzwania
• Status kazdego ucznia: nierozpoczete, w trakcie, ukonczone
• Wynik punktowy (dla lekcji -- ocena nauczyciela lub auto-ocena, dla CSS Battle -- wynik automatyczny)
• Status recenzji kodu: oczekuje, w trakcie, ukonczone
• Date oddania pracy
• Pasek postepu sciezki nauki (jesli wyzwanie jest czescia sciezki)

---

Przykladowy przebieg pracy

Scenariusz: Kurs HTML+CSS dla klasy

1. Wlasciciel tworzy sciezke nauki "HTML+CSS: Poczatkujacy" z 20 zadaniami
2. Wlasciciel przypisuje sciezke nauczycielowi Pani Kowalskiej
3. Pani Kowalska przypisuje sciezke swojej grupie "Klasa 5A"
4. Uczniowie rozpoczynaja od pierwszego kroku -- lekcji interaktywnej "Czym jest HTML?"
5. Po ukonczeniu lekcji interaktywnej uczniowie przechodza do wyzwania "Moja pierwsza strona" (brama)
6. System automatycznie ocenia rozwiazania na podstawie regul auto-oceny
7. Pani Kowalska przeklada recenzje kodu wybranych rozwiazan, dodajac adnotacje
8. Uczniowie poprawiaja kod na podstawie adnotacji
9. Pani Kowalska sprawdza postepy w dzienniku ocen i eksportuje raport CSV
10. Uczniowie, ktorzy ukonczyli brame, automatycznie odblokuja nastepne zadania w sciezce