Autor: Ondřej Kořínek

Průběh výuky

Příspěvek uvádí možnost uvedení do problematiky v prostředí blokově orientovaném programovacím jazyku. Žáci by již měli mít zkušenosti s vytvářením např. vývojových diagramů nebo by již mohli mít zkušenosti s daným blokovým prostředím, ale to není úplně nutné. Žáci by se případně měli v daném prostředí lehce zorientovat sami. Daný příklad má za cíl procvičit následující řídící konstrukce: sekvenci, větvení a cyklus s neznámým počtem opakování. Další informace pro vyučujícího, zadání pro žáky a ukázky řešení jsou uvedeny dále v příspěvku.

Zadání: Vytvořte program „Fotbalový zápas“ v prostředí Code.org®, které naleznete na stránce https://code.org/ v sekci Vytvoř: Ukázat všechny projekty. Dále v sekci Začít nový projekt zvolte View full list a vyberte správný projekt. Který to bude?

Požadavky na „Fotbalový zápas“

• Hráč se bude moci ovládat šipkami vlevo a vpravo.
• Míč se bude odrážet od zdi a od hráče.
• Pokud míč skončí v bráně, připíše se bod hráči.
• Pokud hráč mine míč, bod se připíše protihráči.
• Rychlost hráče i míče bude náhodná.
• Pokud některý z hráčů získá bod, tak se v zápasu pokračuje. Počet gólů v zápasu není omezen.
• Dobrovolný úkol: Přidejte příslušné zvukové efekty.

Otázky k „Fotbalovému zápasu“, v závorce jsou uvedeny označené výstupy:

1. Na základě požadavků bude nutné použít všechny „možnosti“, které jsou v Pracovním prostoru? Pokud ne, které „možnosti“ nebudou potřeba? (I-9-2-01)
2. Podle požadavků na „Fotbalový zápas“ se pokuste nakreslit vývojový diagram a podle tohoto vývojového diagramu sestavte pomocí příslušných bloků funkční projekt v prostředí Code.org. (I-9-2-02, I-9-2-05)
3. Níže je uvedený obrázek 1 vývojového diagramu, který by měl odpovídat požadavkům zápasu. Jakým způsobem se liší vaše řešení z předchozího bodu od níže navrženého? Je daným algoritmem znázorněným vývojovým diagramem řešen problém zápasu, tj. jeho požadavky? Pokud ne, v čem je v daném vývojovém diagramu problém? (I-9-2-01, I-9-2-03, I-9-2-06)

Obrázek 1 – Vývojový diagram 1

4. Na obrázku 2 je uveden vývojový diagram, který vylepšuje předchozí verzi. Splňuje druhý vývojový diagram požadavky fotbalového zápasu, tj. je již správně řešen problém zápasu? Změny oproti předchozímu obrázku jsou vyznačeny zeleně. (I-9-2-03, I-9-2-06)
5. Nakreslete vývojový diagram, který by řešil beze zbytku požadavky fotbalového zápasu. Jakou další řídící konstrukci je nutné do vývojového diagramu přidat a proč? Neuvažujeme, že bychom museli stále ošetřovat ovládání (šipka vlevo a šipka vpravo) a zasažení míče. Tento úkol je náročnější, může být vyřešen žáky při skupinové práci ve skupinkách. (I-9-2-03)

Obrázek 2 – Vývojový diagram 2

Příprava na výuku

• Všechny úkoly je možné si vyzkoušet předem na stránce https://code.org/, kde se zvolí možnost Vytvoř: Ukázat všechny projekty, viz obrázek 3.

Obrázek 3 – Vytvoření projektu

• Na nové stránce se zvolí možnost View full list, viz obrázek 4.

Obrázek 4 – Zvolení možnosti View full list

• Vybere se kategorie Hry s událostmi s možností Sporty, viz obrázek 5.

Obrázek 5 – Vybrání projektu Sporty

Organizace práce

1. Žáci si podle návodu zkusí samostatně otevřít projekt. Po přečtení a pochopení zadání se budou snažit odpovědět na první otázku v předcházející kapitole Průběh výuky v podkapitole Otázky k „Fotbalovému zápasu“. Základní ukázka projektu po jeho vybrání je na obrázku 6. Správná odpověď na zadanou otázku je, že je potřeba použít všechny možnosti (zelené bloky v obrázku 6 vpravo).

Obrázek 6 – Výřez prázdného projektu Sporty

1. Žáci by měli nejdříve navrhnout řešení pomocí vývojového diagramu, případně mohou obdržet Vývojový diagram 1 a podle něho mohou zkusit sestavit program. Řešení obrázku 1 v projektu Sporty je uvedeno na obrázku 7.

Obrázek 7 – Řešení vývojového diagramu 1 v prostředí Code.org v projektu Sporty

1. Pokud žáci dostali k dispozici v předchozím bodě vývojový diagram, tak v tomto bodu mohou odpovědět na otázky, jestli sestavený program odpovídá požadavkům zápasu.

Správné odpovědi:

• V daném vývojovém programu chybí správné vybrání prostředí scény
• Chybí správné nastavení hráče
• Chybí správné nastavení rychlosti míče i hráče
• V možnostech když míč mine hráče a když je míč v brance chybí, hoď nový míč, aby se program stále opakoval. Tyto možnosti mohou zkusit žáci doplnit samostatně a potom si zkontrolovat s řešením na obrázku 2 – vývojový diagram 2. Řešení tohoto bodu 3 je uvedeno na obrázku 8.

Obrázek 8 – Řešení vývojového diagramu 2 v prostředí Code.org v projektu Sporty

1. Ve druhém vývojovém diagramu není řešeno opakování jednotlivých částí po hození nového míče, tj. na rozdíl od vývojového diagramu, ve kterém není řešeno opakování, je v projektu Sporty řešení opakování pomocí cyklu, které není na první pohled zřejmé. Zde by si žáci měli uvědomit, k čemu je dobré opakování některé činnosti
2. Vývojový diagram, kdyby se měly stále opakovat jednotlivé části, by byl složitý, proto bude ukázka řešení pomocí vývojového diagramu trochu zjednodušená. Opakování je bráno pouze v úvahu, když má nějaký hráč získat bod, v jiných případech ne. 

Správné řešení:

• Do vývojového diagramu je přidána proměnná novýMíč, jejíž hodnota je nastavená na hodnotu 0.
• Pokud se míč dostane do branky, nebo když hráč míč mine, tak je hodnota proměnné novýMíč zvýšena o hodnotu 1 (je možné žákům vysvětlit) a ostatní podmíněné příkazy v daném průchodu cyklem se již neprovedou.
• Když se vše provede a jsme na konci cyklu, aby se cyklus zopakoval, hodnota proměnné novýMíč je nastavená na hodnotu 0 a přidá se nový míč a cyklus se stále opakuje.
• Proměnná novýMíč je přidána pouze do vývojového diagramu, v sestaveném programu to je řešeno způsobem, který není patrný a je součástí projektu.

Obrázek 9 – Řešení vývojového diagramu s cyklem s podmínkou na začátku

Na co si dát pozor

• Nejdříve by žáci měli navrhnout algoritmus řešení ve formě vývojového diagramu, tj. měli by si nejdříve možné řešení rozmyslet. I když je příklad jednoduchý, žáci by měli mít návyk si nejdříve vše důkladně rozmyslet, navrhnout řešení a teprve potom ho realizovat, aby dokázali dále programovat v nějakém vyšším programovacím jazyku.
• Vývojové diagramy neuvažují možnost použití cyklů, protože jednotlivé činnosti by se měly stále opakovat, kromě vývojového diagramu na obrázku 9. Vývojové diagramy by byly složité a nepřehledné.
• Vývojové diagramy odpovídají řešení, které je uvedeno na obrázku 8, kde jednotlivé zelené bloky obsahují slovíčko když, tj. podmíněný příkaz.
• Pokud budou žáci vytvářet vývojový diagram, vhodné je i jeho nakreslení, vytvoření v on-line nástroji pro ně může být složité nebo s ním již musejí mít nějaké zkušenosti.

Alternativní řešení

• Daný příklad je vhodnější pro chlapce, dívky mohou vyzkoušet jiný sport, než je fotbal, případně mohou zvolit jiný, podobný projekt, např. Flappy apod.

Literatura a zdroje

• Vývojové diagramy jsou vytvořeny v on-line nástroji, který je dostupný na adrese: https://online.visual-paradigm.com/drive/#diagramlist:proj=0&new=Flowchart
• Zvolený projekt je on-line veřejně dostupný na adrese: https://studio.code.org/projects/public
• Screeny obrázků, slouží pouze pro rychlejší vyhledání zvoleného projektu, jsou vytvořeny z výběru projektu na stránce https://studio.code.org/

Jednotlivá řešení jsou vytvořena autorem příspěvku.