03. Vstupy od uživatele

Blok 1Widget je otázka i odpověď zároveň1. Část pro učitele

Toto je jádro celé hodiny. Teď navážeme na myšlenku z první hodiny důkladněji.

Tenhle jeden řádek dělá dvě věci. Nakreslí posuvník na stránku a zároveň vrátí číslo, na kterém posuvník právě stojí. To číslo si uložíme do proměnné a pracujeme s ním dál jako s obyčejným číslem.

Že to opravdu je normální číslo, si můžeš ověřit takhle:

Zamysli se: „Kolikrát se ten řádek se sliderem provede, když posuvníkem pohnu?" Odpověď: celý skript se spustí znovu odshora, takže jednou při každém pohnutí.

Poznámky pro učiteleParametry funkce — technicky pro vás1. Část pro učitele

Tady poprvé narazíte na to, že funkce mají poziční a klíčové parametry.

st.slider("Životy", 0, 100, 72)
#          popisek min max výchozí

Poziční znamená, že záleží na pořadí. Kdyby dítě napsalo st.slider("Životy", 100, 0, 72), dostane chybu, protože minimum nemůže být větší než maximum.

Klíčové parametry se píší se jménem a na pořadí nezáleží:

st.slider("Životy", min_value=0, max_value=100, value=72, step=5)

Když napíšeš jméno parametru, je to jasnější a nemusíš hlídat pořadí. U složitějších funkcí se to vyplatí.

Toto je koncept, který budete potřebovat v 10. hodině u vlastních funkcí. Zasejte semínko už teď.

Blok 2Přehled widgetů1. Část pro učitele

Tahák pro rychlé zopakování:

Widget	Vrací	Použití ve hře
`st.text_input("Jméno")`	text (`str`)	jméno hrdiny
`st.number_input("Věk", 1, 99)`	číslo	přesná hodnota
`st.slider("Síla", 1, 20, 10)`	číslo	statistiky
`st.select_slider("Obtížnost", ["Lehká","Těžká"])`	vybraná položka	obtížnost
`st.selectbox("Povolání", ["Bojovník","Mág"])`	vybraná položka	výběr z nabídky
`st.multiselect("Vybavení", [...])`	seznam vybraných	více voleb najednou
`st.radio("Vzhled", ["🧙","🗡️"])`	vybraná položka	přepínač
`st.checkbox("Má klíč")`	`True` / `False`	ano/ne volba
`st.toggle("Zapnout kouzla")`	`True` / `False`	hezčí checkbox
`st.color_picker("Barva")`	text `"#rrggbb"`	vzhled
`st.button("Zaútočit")`	`True` jen po kliknutí	akce

Blok 3Proč `number_input` a `slider` nejsou totéž1. Část pro učitele

Zamysli se nad otázkou:

Slider je rychlý, ale nepřesný — těžko na něm trefíš přesně 47. Number_input je přesný, ale pomalejší. Ve hře používáme slider tam, kde chceme, aby si člověk hrál, a number_input tam, kde chceme přesnou hodnotu.

Blok 4Nebezpečí: dva widgety se stejným popiskem1. Část pro učitele

Tahle chyba tě může překvapit:

Co se děje na pozadí: Streamlit identifikuje widget podle typu a parametrů. Dva identické widgety mají stejné ID a Streamlit neví, který je který.

Dvě řešení:

Každý prvek na stránce musí být rozeznatelný. Buď má jiný nápis, nebo mu dáme jmenovku pomocí key.

Blok 5Rozpočet bodů — nejlepší cvičení hodiny1. Část pro učitele

Tohle zadání bývá hodně zábavné, protože obsahuje skutečné herní rozhodování.

Proč je CELKEM napsané velkými písmeny:

Velká písmena používáme pro hodnoty, které se během programu nikdy nemění. Je to jen dohoda mezi programátory, Python to nehlídá. Ale kdo to čte, hned pozná, že tohle číslo je pravidlo hry, ne proměnná.

Poznámky pro učiteleČasté chyby1. Část pro učitele

Chyba	Příčina	Řešení
`DuplicateWidgetID`	Dva stejné widgety	Změnit popisek nebo přidat `key="..."`
`StreamlitAPIException: value must be between`	Výchozí hodnota mimo rozsah	`st.slider("X", 0, 10, 50)` → opravit
Číslo se chová jako text	Použili `text_input` místo `number_input`	Přetypovat `int()` nebo změnit widget
Widget je vidět, ale hodnota se nepoužije	Zapomenuté přiřazení do proměnné	`x = st.slider(...)`
Tlačítko nic nedělá	Kód není v `if st.button(...)`	Odsadit

Blok 6Ukázka 1 — Všechny widgety pohromadě2. Ukázky pro projekci

demo/demo1_widgety.py

import streamlit as st

st.title("Katalog ovládacích prvků")

st.subheader("Text")
jmeno = st.text_input("Jméno hrdiny", "Arkon")
pribeh = st.text_area("Příběh postavy", "Narodil se v horách...")

st.subheader("Čísla")
vek = st.number_input("Věk", min_value=1, max_value=999, value=27)
sila = st.slider("Síla", 1, 20, 12)
rozsah = st.slider("Rozsah poškození", 1, 50, (8, 16))

st.subheader("Výběr")
povolani = st.selectbox("Povolání", ["Bojovník", "Kouzelník", "Lupič"])
vzhled = st.radio("Vzhled", ["🧙", "🗡️", "🥷"], horizontal=True)
vybava = st.multiselect("Výbava", ["Meč", "Štít", "Luk", "Lektvar"], ["Meč"])
obtiznost = st.select_slider("Obtížnost", ["Lehká", "Střední", "Těžká"])

st.subheader("Ano / ne")
ma_klic = st.checkbox("Má klíč od věže")
kouzla = st.toggle("Umí kouzlit")

st.subheader("Vzhled")
barva = st.color_picker("Barva pláště", "#7b2cbf")

st.divider()

st.write("**Co widgety vrátily:**")
st.write(f"jmeno = {jmeno!r}  ({type(jmeno).__name__})")
st.write(f"vek = {vek}  ({type(vek).__name__})")
st.write(f"sila = {sila}  ({type(sila).__name__})")
st.write(f"rozsah = {rozsah}  ({type(rozsah).__name__})")
st.write(f"vybava = {vybava}  ({type(vybava).__name__})")
st.write(f"ma_klic = {ma_klic}  ({type(ma_klic).__name__})")
st.write(f"barva = {barva!r}")

Tady se objeví výsledekKlikni na Spustit. Kód vlevo můžeš měnit a spouštět opakovaně klávesami Ctrl+Enter.

Kód vlevo jde upravovat. Tab odsazuje o čtyři mezery.

Blok 7Ukázka 2 — Rozpočet bodů2. Ukázky pro projekci

demo/demo2_rozpocet.py

Tady se objeví výsledekKlikni na Spustit. Kód vlevo můžeš měnit a spouštět opakovaně klávesami Ctrl+Enter.

Kód vlevo jde upravovat. Tab odsazuje o čtyři mezery.

Blok 8Ukázka 3 — Živý náhled postavy2. Ukázky pro projekci

demo/demo3_nahled.py

Tady se objeví výsledekKlikni na Spustit. Kód vlevo můžeš měnit a spouštět opakovaně klávesami Ctrl+Enter.

Kód vlevo jde upravovat. Tab odsazuje o čtyři mezery.

Blok 9Cvičení 1 — Katalog widgetů (15 min)3. Cvičení na hodinu

Tvoje zadání:

Vyzkoušej si všechny ovládací prvky a zjisti, co který vrací.

Přidej st.text_input a hodnotu ulož do proměnné

Přidej st.slider s rozsahem 1 až 20

Přidej st.selectbox alespoň se třemi možnostmi

Přidej st.checkbox a st.color_picker

Pod všechno vypiš hodnoty všech proměnných a jejich typ pomocí type(promenna).__name__

Úroveň	Co má zvládnout
Minimum	Body 1–4, prvky fungují
Rozšíření	Bod 5, výpis typů
Výzva	Přidat `st.multiselect` a `st.slider` se dvěma úchyty (rozsah)

cviceni/cviceni1_widgety.py

Tady se objeví výsledekKlikni na Spustit. Kód vlevo můžeš měnit a spouštět opakovaně klávesami Ctrl+Enter.

Kód vlevo jde upravovat. Tab odsazuje o čtyři mezery.

Pro učitele — na co si dát pozor

Očekávaný výsledek: stránka, kde změna kteréhokoliv prvku hned změní výpis dole.

Řešení 1 — jedna z možných variant

reseni/reseni1_widgety.py

Tady se objeví výsledekKlikni na Spustit. Kód vlevo můžeš měnit a spouštět opakovaně klávesami Ctrl+Enter.

Kód vlevo jde upravovat. Tab odsazuje o čtyři mezery.

Blok 10Cvičení 2 — Rozpočet bodů (20 min)3. Cvičení na hodinu

Tvoje zadání:

Postav obrazovku, kde hráč rozděluje body mezi vlastnosti a nesmí překročit limit.

Vytvoř konstantu CELKEM = 30

Přidej tři slidery: síla, obrana, magie

Spočítej pouzito a zbyva

Zobraz obojí přes st.metric

Pomocí if/elif/else napiš zprávu: přesně vyvážená / zbývá X / překročil jsi o X

Úroveň	Co má zvládnout
Minimum	Body 1–3, čísla se počítají správně
Rozšíření	Body 4–5, barevné zprávy
Výzva	Přidat čtvrtou vlastnost a `st.progress`, který nikdy nepřeteče (`min(x, 1.0)`)

cviceni/cviceni2_rozpocet.py

Tady se objeví výsledekKlikni na Spustit. Kód vlevo můžeš měnit a spouštět opakovaně klávesami Ctrl+Enter.

Kód vlevo jde upravovat. Tab odsazuje o čtyři mezery.

Pro učitele — na co si dát pozor

Očekávaný výsledek: posunutím slideru se okamžitě mění zbývající body i barva zprávy.

Řešení 2 — jedna z možných variant

reseni/reseni2_rozpocet.py

Tady se objeví výsledekKlikni na Spustit. Kód vlevo můžeš měnit a spouštět opakovaně klávesami Ctrl+Enter.

Kód vlevo jde upravovat. Tab odsazuje o čtyři mezery.

Blok 11Cvičení 3 — Generátor jména (20 min)3. Cvičení na hodinu

Tvoje zadání:

Hráč si poskládá jméno hrdiny z částí.

Přidej st.selectbox s první částí jména: Ar, Thal, Zor, Mira

Přidej druhý st.selectbox s koncovkou: -kon, -dor, -ith, -ena

Přidej st.selectbox s přídomkem: Mocný, Tichý, Ohnivý

Slož celé jméno f-stringem a zobraz ho velkým nadpisem

Přidej st.checkbox("Přidat titul"), který před jméno přidá „Lord" nebo „Lady"

Úroveň	Co má zvládnout
Minimum	Body 1–4
Rozšíření	Bod 5 s podmínkou
Výzva	Přidat `st.radio` na volbu Lord/Lady a vypsat délku jména přes `len()`

cviceni/cviceni3_generator_jmena.py

Tady se objeví výsledekKlikni na Spustit. Kód vlevo můžeš měnit a spouštět opakovaně klávesami Ctrl+Enter.

Kód vlevo jde upravovat. Tab odsazuje o čtyři mezery.

Pro učitele — na co si dát pozor

Očekávaný výsledek:

Lord Arkon Ohnivý

Řešení 3 — jedna z možných variant

reseni/reseni3_generator_jmena.py

Tady se objeví výsledekKlikni na Spustit. Kód vlevo můžeš měnit a spouštět opakovaně klávesami Ctrl+Enter.

Kód vlevo jde upravovat. Tab odsazuje o čtyři mezery.

Blok 12Cvičení 4 — Obchod se zbraněmi (25 min)3. Cvičení na hodinu

Tvoje zadání:

Hráč si vybere zbraň a program spočítá, jestli na ni má.

Přidej st.number_input("Tvoje zlato", 0, 999, 120)

Přidej st.selectbox se třemi zbraněmi

Podle vybrané zbraně nastav cenu pomocí if/elif/else

Spočítej, kolik zlata zbude po nákupu

Zobraz zelenou zprávu, když si to hráč může dovolit, jinak červenou

Úroveň	Co má zvládnout
Minimum	Body 1–3
Rozšíření	Body 4–5
Výzva	Přidat `st.checkbox("Sleva pro členy cechu")`, který cenu sníží o 20 %

cviceni/cviceni4_obchod.py

Tady se objeví výsledekKlikni na Spustit. Kód vlevo můžeš měnit a spouštět opakovaně klávesami Ctrl+Enter.

Kód vlevo jde upravovat. Tab odsazuje o čtyři mezery.

Pro učitele — na co si dát pozor

Očekávaný výsledek: změna zlata nebo zbraně okamžitě přepočítá výsledek nákupu.

Řešení 4 — jedna z možných variant

reseni/reseni4_obchod.py

Tady se objeví výsledekKlikni na Spustit. Kód vlevo můžeš měnit a spouštět opakovaně klávesami Ctrl+Enter.

Kód vlevo jde upravovat. Tab odsazuje o čtyři mezery.

Blok 13Cvičení 5 — PyQuest: tvorba postavy (25 min)3. Cvičení na hodinu

Tvoje zadání:

Nahraď v app.py pevně napsané statistiky ovládacími prvky.

Dej všechny prvky pro tvorbu postavy do st.sidebar

Jméno přes text_input, povolání přes selectbox, vzhled přes radio

Tři slidery na sílu, obranu a magii s limitem 30 bodů celkem

Vypočítej max_zivoty = 50 + obrana * 5 a poskozeni = sila * 2 + magie

V hlavní části zobraz kartu postavy s metrikami a herní pole s vybraným vzhledem

Úroveň	Co má zvládnout
Minimum	Body 1–3
Rozšíření	Body 4–5, statistiky se počítají z voleb
Výzva	Přidat `color_picker` na barvu karty a hlášku, když hráč přesáhne limit bodů

cviceni/cviceni5_pyquest_tvorba.py

Tady se objeví výsledekKlikni na Spustit. Kód vlevo můžeš měnit a spouštět opakovaně klávesami Ctrl+Enter.

Kód vlevo jde upravovat. Tab odsazuje o čtyři mezery.

Pro učitele — na co si dát pozor

Očekávaný výsledek: funkční tvorba postavy, kde hráč vidí okamžitý dopad svých voleb.

Řešení 5 — jedna z možných variant

reseni/reseni5_pyquest_tvorba.py

import streamlit as st

st.set_page_config(page_title="PyQuest", page_icon="⚔️")

BODY_CELKEM = 30

with st.sidebar:
    st.header("🧬 Tvorba postavy")
    jmeno = st.text_input("Jméno hrdiny", "Arkon")
    povolani = st.selectbox("Povolání", ["Bojovník", "Kouzelník", "Lupič"])
    vzhled = st.radio("Vzhled", ["🧙", "🗡️", "🥷", "🧝"], horizontal=True)
    barva = st.color_picker("Barva karty", "#3a0ca3")

st.divider()
    st.caption(f"Rozděl {BODY_CELKEM} bodů:")
    sila = st.slider("💪 Síla", 1, 20, 10)
    obrana = st.slider("🛡️ Obrana", 1, 20, 10)
    magie = st.slider("✨ Magie", 1, 20, 10)

pouzito = sila + obrana + magie
zbyva = BODY_CELKEM - pouzito

max_zivoty = 50 + obrana * 5
poskozeni = sila * 2 + magie

st.title("⚔️ PyQuest")

if zbyva < 0:
    st.error(f"Přesáhl jsi limit o {-zbyva} bodů. Uber v postranním panelu.")
elif zbyva > 0:
    st.info(f"Máš ještě {zbyva} nerozdělených bodů.")

st.markdown(
    f"""
    <div style="background:{barva}; color:white; padding:18px; border-radius:14px;
                text-align:center; border:3px solid rgba(255,255,255,.35);">
        <div style="font-size:56px;">{vzhled}</div>
        <div style="font-size:24px; font-weight:bold;">{jmeno}</div>
        <div style="opacity:.85;">{povolani}</div>
    </div>
    """,
    unsafe_allow_html=True,
)

st.write("")

a, b, c, d = st.columns(4)
a.metric("Životy", max_zivoty)
b.metric("Poškození", poskozeni)
c.metric("Obrana", obrana)
d.metric("Magie", magie)

hrdina_x = st.slider("Kde stojí hrdina?", 0, 440, 40)

st.markdown(
    f"""
    <div style="position:relative; width:500px; height:220px;
                background:linear-gradient(#87ceeb 65%, #4a7c1f 65%);
                border:4px solid #333; border-radius:12px;
                overflow:hidden; font-size:40px;">
        <div style="position:absolute; left:{hrdina_x}px; top:115px;">{vzhled}</div>
        <div style="position:absolute; left:400px; top:115px;">🏰</div>
        <div style="position:absolute; left:240px; top:130px;">🌲</div>
        <div style="position:absolute; left:420px; top:10px; font-size:38px;">☀️</div>
    </div>
    """,
    unsafe_allow_html=True,
)

Tady se objeví výsledekKlikni na Spustit. Kód vlevo můžeš měnit a spouštět opakovaně klávesami Ctrl+Enter.

Kód vlevo jde upravovat. Tab odsazuje o čtyři mezery.

Blok 14Domácí úkol na příští hodinu4. Domácí úkol

Přidej do své tvorby postavy alespoň tři nové volby, které mají skutečný vliv na statistiky. Například volba zbraně, která zvýší poškození, nebo brnění, které zvýší životy. Do komentáře napiš, jaké pravidlo jsi vymyslel.

Zobrazit ukázkové řešení domácího úkolu

Toto je jedna z možných variant, jak mohl úkol dopadnout. Tvoje řešení se může lišit a to je v pořádku.

domaci/domaci_ukol03.py

import streamlit as st

st.set_page_config(page_title="PyQuest — domácí úkol 03", page_icon="⚔️")
st.title("⚔️ PyQuest — tvorba postavy")

with st.sidebar:
    st.header("Nastavení hrdiny")
    jmeno = st.text_input("Jméno", "Arkon")
    povolani = st.selectbox("Povolání", ["Bojovník", "Kouzelník", "Lupič"])

st.divider()
    st.subheader("Rozdělení bodů")
    sila = st.slider("💪 Síla", 1, 20, 10)
    obrana = st.slider("🛡️ Obrana", 1, 20, 10)
    magie = st.slider("✨ Magie", 1, 20, 10)

st.divider()
    st.subheader("Nové volby")
    zbran = st.selectbox("Zbraň", ["Dýka", "Meč", "Hůl"])
    brneni = st.selectbox("Brnění", ["Lehké", "Střední", "Těžké"])
    mazlicek = st.selectbox("Mazlíček", ["Žádný", "Vlk", "Sova"])

# Základní statistiky
max_zivoty = 50 + obrana * 5
poskozeni = sila * 2 + magie

# Vliv volby zbraně
if zbran == "Dýka":
    poskozeni += 4
elif zbran == "Meč":
    poskozeni += 8
else:
    poskozeni += 6

# Vliv volby brnění
if brneni == "Lehké":
    max_zivoty += 0
elif brneni == "Střední":
    max_zivoty += 20
else:
    max_zivoty += 40

# Vliv volby mazlíčka
if mazlicek == "Vlk":
    poskozeni += 3
elif mazlicek == "Sova":
    max_zivoty += 15

st.subheader(f"🧙 {jmeno} — {povolani}")

a, b, c = st.columns(3)
a.metric("❤️ Životy", max_zivoty)
b.metric("⚔️ Poškození", poskozeni)
c.metric("🎯 Body", sila + obrana + magie)

st.info(
    f"{jmeno} používá {zbran.lower()}, má {brneni.lower()} brnění "
    f"a doprovází ho {mazlicek.lower()}."
)

Tady se objeví výsledekKlikni na Spustit. Kód vlevo můžeš měnit a spouštět opakovaně klávesami Ctrl+Enter.

Kód vlevo jde upravovat. Tab odsazuje o čtyři mezery.

Blok 15Oficiální dokumentace4. Domácí úkol

Oficiální dokumentace je místo, kam se vyplatí sáhnout, když si chceš ověřit, co který widget vrací, jaké má parametry nebo jak se používá v dalších příkladech. Je v angličtině, ale dobře se v ní hledá podle názvu funkce.

Co jsme použili	Oficiální dokumentace	Co tam najdeš
`st.text_input`	`st.text_input`	textové pole, výchozí hodnotu a další parametry
`st.text_area`	`st.text_area`	víceřádkový textový vstup
`st.number_input`	`st.number_input`	zadávání přesné číselné hodnoty
`st.slider`	`st.slider`	posuvník pro čísla i rozsahy
`st.selectbox`	`st.selectbox`	výběr jedné možnosti ze seznamu
`st.multiselect`	`st.multiselect`	výběr více možností najednou
`st.radio`	`st.radio`	přepínač jedné volby
`st.checkbox` a `st.toggle`	`st.checkbox`, `st.toggle`	booleovské vstupy `True` / `False`
`st.select_slider`	`st.select_slider`	posuvník nad seznamem možností
`st.color_picker`	`st.color_picker`	výběr barvy a hex kód
`st.button`	`st.button`	tlačítko a jeho návratovou hodnotu

Blok 16Navazující cvičení na Umíme informatiku5. Umíme informatiku

Cvičení	Odkaz	Proč se hodí
Programování v Pythonu	umimeinformatiku.cz	Vstupy a výstupy programu
Rozhodovačka	umimeinformatiku.cz	Rychlé ověření pojmů
Tabulky	umimeinformatiku.cz	Práce s hodnotami a jejich vztahy