Original title:
Výukový nástroj pro analýzu stylových předpisů
Authors:
Mičky, Tomáš ; Ondrušková, Magdaléna (referee) ; Hynek, Jiří (advisor) Document type: Bachelor's theses
Year:
2026
Language:
slo Publisher:
Vysoké učení technické v Brně. Fakulta informačních technologií Abstract:
[slo][eng]
Táto bakalárska práca sa zaoberá problematikou výučby kaskádových štýlov a tvorby webových rozhraní. Začiatočníci v tejto oblasti majú často problémy spojené s vizuálnou disonanciou a chýbajúcou spätnou väzbou pri sémantických alebo logických chybách. Cieľom práce je vytvorenie moderného výukového nástroja, ktorý by tento edukačný proces zefektívnil. Práca sa zaoberá pedagogickými teóriami, kognitívnymi aspektmi učenia sa programovania a princípami gamifikácie. Na základe analýzy existujúcich riešení identifikuje medzeru na trhu. Výsledkom práce je integrovateľné interaktívne prostredie, ktorého jadrom je pokročilý hybridný analytický systém. Toto riešenie kombinuje statickú sémantickú analýzu kódu a dynamickú geometrickú verifikáciu vizuálneho výstupu. Poskytuje študentom okamžitú kontextovú spätnú väzbu, interaktívny inšpekčný mód a využíva gamifikačné prvky na udržanie motivácie používateľa. Riešenie slúži ako vizuálny asistent pre študentov, ale aj ako nástroj pre pedagógov na automatizáciu hodnotenia dizajnovo orientovaných úloh.
This bachelor’s thesis deals with the issue of teaching cascading styles and creating web interfaces. Beginners in this field often have problems associated with visual dissonance and missing feedback for semantic or logical errors. The aim of the thesis is to create a modern teaching tool that would make this educational process more efficient. The thesis deals with pedagogical theories, cognitive aspects of learning programming and principles of gamification. Based on the analysis of existing solutions, it identifies a gap in the market. The result of the thesis is an integrable interactive environment, the core of which is an advanced hybrid analytical system. This solution combines static semantic code analysis and dynamic geometric verification of visual output. It provides students with immediate contextual feedback, an interactive inspection mode and uses gamification elements to maintain user motivation. The solution serves as a visual assistant for students, but also as a tool for educators to automate the assessment of design-oriented tasks.
Keywords:
abstract syntax tree; AST; automated assessment; CSS; e-learning; gamification; geometric verification; HTML; React; static code analysis; web design education
Institution: Brno University of Technology
(web)
Document availability information: Fulltext is available in the Brno University of Technology Digital Library. Original record: http://hdl.handle.net/11012/258805