Přidání článků jako příklady dobré praxe

content/chci-ucit-online.md

@@ -7,6 +7,7 @@ description = "Zabezpečit kvalitní on-line výuku v době povinně naří
 indexnav = true
 mainimage = "uceni.jpg"
 softwarelist = true
+articlelist = true
 filters = true
 +++
 
@@ -41,3 +42,4 @@ Obzvláště je nutné dodržovat procedury spjaté se státními zkouškami:
 - [Specifikace pro nahrávání a uložení audio/video záznamu státní zkoušky](https://karlovkaonline.cz/chci-zkouset/technicke-komptence-a-kyberbezpecnost/specifikace-pro-nahravani-a-ulozeni-audio-video-zaznamu-statni-zkousky/)
 - [Použití aplikace OBS Studio na nahrávání záznamů distančních státnic](https://karlovkaonline.cz/chci-zkouset/technicke-komptence-a-kyberbezpecnost/pouziti-aplikace-obs-studio-na-nahravani-zaznamu-distancnich-statnic/)
 - [Evidence zánamů distančních státnic v ESSS UK](https://karlovkaonline.cz/chci-zkouset/technicke-komptence-a-kyberbezpecnost/evidence-zaznamu-distancnich-statnic-v-esss-uk/)
+

content/clanky/_index.md

@@ -0,0 +1,3 @@
++++
+page_template="article.html"
++++

content/clanky/casova-narocnost-kurzu/index.md

@@ -0,0 +1,73 @@
++++
+title="Časová náročnost kurzu"
++++
+
+Čas, který studenti věnují předmětu, by měl vycházet z kreditového ohodnocení. Ukáži, jak jsem toto pravidlo aplikoval u dvou předmětů, které jsem v letním semestru vyučoval. U obou předmětů jsem použil stejnou strukturu:
+
+1. video s teoretickým výkladem,
+2. pracovní list,
+3. on-line hodina – konzultace/seminář.
+
+### Polynomická algebra
+
+Předmět je hodnocen 3 kredity a zakončen zápočtem. Výuka probíhala v 11 týdnech. Student by tak měl v souvislosti s předmětem pracovat 7-8 hodin týdně.
+
+Videa s teoretickým výkladem měla délku cca 10-15 minut. Spolu se studiem skript a opakovaným shlédnutím lze očekávat, že student seznámením s teorií trávil cca 1 hodiny týdně.
+
+On-line hodiny měly zpravidla délku 1-2 hodiny. Je zřejmé, že hlavní díl časové dotace (4-6 hodin) bylo nutné směřovat na práci na pracovních listech. Čas, který musí studenti věnovat vyřešení konkrétní úlohy, je velmi individuální a nelze jej dopředu odhadnout. Proto součástí zadání byla vždy žádost o poskytnutí údajů o čase, který byl potřeba řešení úloh věnovat.
+
+Obtížnost úloh byla zpravidla odstupňována tak, že vyřešení úvodní úlohy zabrala 5-10 minut, u náročnějších úloh pak doba potřebná k řešení přesahovala i několik hodin.
+
+<div class="twocolumn">
+<div>
+
+![Výsledek 1](vysledek.png)
+
+</div>
+<div>
+
+![Výsledek 2](vysledek2.png)
+
+</div>
+</div>
+
+U této koncepce výuky bylo s úspěchem použito pravidlo, že je dobré vycházet z toho, co se osvědčilo v rámci prezenční výuky. Studenti dostávali stejně koncipované listy i a prvních (prezenčně realizovaných) hodinách. Jediný rozdíl byl v tom, že na pracovních listech pracovali skupinově v hodině a následně je měli na domácí dopracování. Požadavek na vypracování listu (i když s vysokou časovou náročností) byl v souladu s jejich dosavadní zkušeností s předmětem a vyučujícím. Navíc bylo nastaveno pravidlo pro plnění předmětu tak, že vypracování všech pracovních listů je dostačují pro získání zápočtu.
+
+### Teorie čísel
+
+Předmět je hodnocen 3 kredity a zakončen zkouškou, na jejíž přípravu lze zhruba 10 hodin času. Výuka probíhala v 12 týdnech. Student by tak měl v souvislosti s předmětem pracovat 6-7 hodin týdně.
+
+<div class="twocolumn">
+<div>
+
+Opět byl použit stejný postup jako u předchozího předmětu. V tomto případě ale docházelo u pracovních listů k rozdílům v tom, kolik času bylo nutné jednotlivým úlohám věnovat. Na obrázku je příklad u jedné z úloh, kdy jeden student potřeboval na řešení 90 minut a druhý 180 minut. Nejedná se o neobvyklý rozdíl a v některých případech byly rozdíly ještě větší. V takové situaci je velmi složité přesně vybalancovat obtížnost úloh. Situaci jsem nakonec řešil tím, že po jednom z náročnějších pracovních listů jsem studentům dal odpočinkový týden, aby se časová náročnost vyrovnala a zařadil několik pracovních listů, které bylo možné řešit s využitím výpočetní techniky. Přes to se nakonec podařilo probrat látku ve větším rozsahu (resp. do větších detailů), než tomu bylo v předchozích letech v prezenční podobě.
+
+</div>
+<div>
+
+![Výsledek 3](vysledek3.png)
+
+![Výsledek 4](vysledek4.png)
+
+</div>
+</div>
+
+Jen jako perličku zařazuji pár studentských poznámek:
+
+![Perlička 1](perlicka1.png)
+
+<div class="twocolumn">
+<div>
+
+![Perlička 2](perlicka2.png)
+
+</div>
+<div>
+
+![Perlička 3](perlicka3.png)
+
+</div>
+</div>
+
+*Po dosazení sigmiček nastaly několika hodinové algebraické úpravy a spousta přeškrtaných a počmáraných papírů.*
+

content/clanky/flipped-classroom/index.md

@@ -0,0 +1,48 @@
++++
+title="Flipped classroom"
++++
+
+Čas, který může trávit se studenty během synchronní výuky je velmi vzácný a omezený. Je tedy velice vhodné, pokud studenti jsou připraveni a čas je využit k obousměrné komunikaci. Z tohoto důvodu jsem pro přípravu předmětu Polynomická algebra zvolil velmi jednoduchou strukturu:
+
+<div class="twocolumn">
+<div>
+
+Pro studenty je předpřipravené video, které obsahuje stručný teoretický výklad k textu ve skriptech. Toto video bylo zveřejňováno s předstihem a případně bylo doplněno dalšími studijními zdroji.
+
+</div>
+<div>
+
+<iframe src="https://www.medicalmedia.eu/cs/detail/embed/4288" width="494" height="278" frameborder="0" scrolling="no" allowfullscren style="max-width: 100%"></iframe>
+
+</div>
+</div>
+
+<div class="twocolumn">
+<div>
+
+Studentům byl zadán úkol – pracovní list, na kterém měli aplikovat získané teoretické poznatky:
+	
+Termín odevzdání byl volen před on-line setkáním. Pro představu o náročnosti úloh doplňuji i ukázku jednoho studentského řešení. Vlastní řešení je rozpracováno na 7 stranách a celkem vypracování pracovního listu trvalo 4 hodiny a 20 minut. Časy odpovídají vzrůstající náročnosti zadaných úloh (10 minut, 20 minut, 90 minut, 140 minut).
+
+</div>
+<div>
+
+![Ukázka](vysledek.png)
+
+</div>
+</div>
+
+<div class="twocolumn">
+<div>
+
+Následovala on-hodina, ve které se studenti mohli ptát na věci, které jim nebyli jasné. Na této hodině byly řešeny i ukázkové úlohy a studenti měli možnost se ptát na detaily k jednotlivým krokům řešení. (V průběhu hodin byl při výkladu použit nástroj pro průběžné hlasování, kde mohli studenti označovat, nakolik již dané téma chápou. Na něj jsou v komentáři vyučujícího odkazy.)
+
+Na základě této hodiny pak mohli pracovní list dopracovat.
+
+</div>
+<div>
+
+<iframe src="https://www.medicalmedia.eu/cs/detail/embed/4273" width="494" height="278" frameborder="0" scrolling="no" allowfullscren style="max-width: 100%"></iframe>
+
+</div>
+</div>

content/clanky/zpetna-vazba/index.md

@@ -0,0 +1,38 @@
++++
+title="Zpětná vazba"
++++
+
+Interakce, nebo také poskytování zpětné vazby je jedním z aspektů, které ovlivňují úspěšnost kurz. Frekvence a kvalita interakcí je pro efektivitu kruciální, ovšem poskytování zpětné vazby ze strany vyučujícího je mnohdy velmi náročné na čas. Výzkumy současně ukazují, že mnohem efektivnější je zpětná vazba, kterou dostává student od ostatních studentů, případně interakce přímo s připravenými studijními materiály. Proto mnoho učebních materiálů obsahuje přímo po každé kapitole/lekci kontrolní otázky, které pomohou studentovi v orientaci, o čem kapitola byla a zda si z ní odnesl to, co autor očekává.
+
+<div class="twocolumn">
+<div>
+
+![Tabulka 1](tabulka1.png)
+
+</div>
+<div>
+
+![Tabulka 2](tabulka2.png)
+
+</div>
+</div>
+
+V rámci svého kurzu Polynomická algebra jsem aplikoval podobný způsob interakce jako zpětnou vazbu před plněním kurzu. Použil jsem jednoduchý checklist, který studenti měli zadaný jako jeden z úkolů v LMS Moodle. Tuto formu jsem volil ze dvou důvodů, zaprvé jako zpětnou vazbu pro studenta, checklist nahradil dříve používaný seznam témat ke zkoušce, student si mohl sám projít, jaké výstupy jsou od něj očekávány a následně zapracovat na těch, u kterých si není jist. Dále podobnou zpětnou vazbu považuji za důležitou pro svoji vlastní práci, protože vím, u kterých témat si v současné podobě kurzu studenti osvojují poznatky průběžně (což je mým cílem) a u který až následně při přípravě na zkoušku a zápočet.
+
+<div class="twocolumn">
+<div>
+
+Aby materiál mohl splnit svůj účel, bylo nutné, aby jej studenti vyplnili pravdivě. Proto byli studenti dopředu upozorněni, že checklist bude automaticky hodnocen plným počtem bodů, tedy, že to, jak ho vyplní, nebude mít vliv na jejich následné hodnocení. Pro jistotu, jsem mezi otázky zařadil i jedno téma, které studenti nemohli znát, a to neexistující Bolzan-Lagrangeovu podmínku. Žádný student neodpověděl, že toto téma zná a pouze velmi malý počet, že ji znají částečně.
+
+V kurzu bylo zapsáno 33 studentů, 31 z nich předmět skutečně plnilo a 31 studentů také vypracovalo tento úkol.
+
+S odstupem 2 měsíců, v září 2020, tedy v době, kdy měli všichni studenti předmět splněn, jsem studentům připravil druhý checklist, který obsahoval méně témat a vztahoval se k tématům, které se objevují u státních závěrečných zkoušek. Tento checklist vypracovalo 13 studentů (42 %). U tohoto checklistu byl jasný posun v objemu zvládnutých znalostí. 
+
+</div>
+<div>
+
+![Nový checklist](novy-checklist.png)
+
+</div>
+<div>
+

sass/style.scss

@@ -207,6 +207,26 @@ main {
 			}
 		}
 
+		&.articles {
+			display: grid;
+			grid-template-columns: 1fr 1fr;
+			column-gap: 1em;
+			row-gap: 1em;
+
+			a {
+				padding: .5em 1em;
+				border: 2px solid #fff;
+				border-radius: 1em;
+				text-decoration: none;
+				text-align: center;
+
+				&:hover {
+					color: #d22d40;
+					background-color: #fff;
+				}
+			}
+		}
+
 		div.stats {
 			margin: 3em 0;
 

templates/article.html

@@ -0,0 +1,8 @@
+{% extends "index.html" %}
+
+{% block content %}
+	<section>
+			<h2>{{ page.title }}</h2>
+			{{ page.content | safe }}
+	</section>
+{% endblock %}

templates/page.html

@@ -17,6 +17,18 @@
 	</section>
 	{{ page.content | safe }}
 
+	{% if page.extra.articlelist %}
+		{% set section = get_section(path="clanky/_index.md") %}
+		{% if section.pages %}
+			<h3>Příklady dobré praxe</h3>
+			<section class="articles">
+				{% for page in section.pages %}
+					<a href="{{ page.permalink }}">{{ page.title }}</a>
+				{% endfor %}
+			</section>
+		{% endif %}
+	{% endif %}
+
 	{% if page.extra.softwarelist %}
 		{% set section = get_section(path="software/_index.md") %}
 		{% if section.pages %}

templates/shortcodes/video.html

@@ -0,0 +1,6 @@
+<video controls><source src="{{ src }}"></video>
+{% if url %}
+	<div class="metadata">
+		<a href="{{ url }}">{{ url }}</a>
+	</div>
+{% endif %}