<div class="fadein">
<div class="system-message">
📢 NOVÝ BODOVÝ SYSTÉM AKTIVIT !!! 📢
</div>
(live: 1s)[Dobrovolný bodovací systém na škole.
"Může lehce vylepšit známku na konci roku," říká učitelka.]
(live: 1.5s)[<span class="warning">Lehce.</span> Pár bodů navíc. Žádný zázrak]
(live: 2s)[Většina třídy kývá. Proč to nezkusit?]
(live: 3s)[Za úkoly body. Za body odznaky. Za odznaky... <span class="pulse">uznání</span>.]
(live: 4s)[(text-style: "blur")[Zní to nevinně.]]
(live: 5s)[<div class="linkbox">
[[<span class="positive">▶ Zaregistrovat se do systému</span>->Uvod do tematu]]
</div>]
</div><div class="fadein">
(text-colour: #00ff00)[SYSTÉM AKTIVOVÁN]
Aplikace se otevírá. (live: 1s)[Barevné rozhraní.] (live: 2s)[|link>[<span class="pulse">(link: "▶ První úkol")[(replace: ?link)[(show: ?ukol)]]</span>]]
|ukol)[První úkol
<div class="system-message">
📋 Úkol #001: Základní aktivita
Odměna: 10 bodů
</div>
(live: 0.5s)[Klikáš. Plníš. Odesíláš.]
(live: 1.5s)[To nebylo těžké. Vlastně to bylo... (text-colour: #51cf66)[zábavné?]]
(live: 2.5s)[<div class="linkbox">
[[▶ Pokračovat->První úspěch]]</div>]]
</div><div class="achievement pulse">
🏆 PRVNÍ ÚSPĚCH! 🏆
</div>
(text-size: 2)[(text-colour: yellow)[DING!]](live: 1s)[
<div class="system-message positive">
✨ Gratulujeme! Zlatý odznak za aktivitu! ✨
+50 bodů
</div>
](live: 2s)[Obrazovka [exploduje] konfetami. U tvého jména září <span class="pulse positive">⭐ zlatá hvězda</span>.](live: 3s)[
<div class="chat-message">
💬 Kamila: "Wow, zlatý odznak! Paráda!"
</div>
](live: 4s)[Úsměv. Teplo v hrudi. <span class="positive">Tohle je příjemné.</span>]
(live: 4s)[<div class="linkbox">
[[▶ Pokračovat dál->Příchod žebříčku]]
</div>]
<div class="notification pulse">
🆕 NOVÁ FUNKCE: ŽEBŘÍČEK
</div>(live: 1s)[
<div class="leaderboard severe-corrupted">
1. Tomáš (250 bodů)
2. Petra (230 bodů)
3. Natálie (225 bodů)
<span class="pulse">4. TY ( 210 bodů)🔴</span>
5. Jakub (205 bodů)
</div>
](live: 2s)[Chat <span class="shake">exploduje</span>:]
(live: 2.5s)[<div class="chat-message">💬 "Vidíš to?" "Jsem osmý!" "Musím zabrat!"</div>]
(live: 3s)[Srdce zrychlí. <span class="warning">Čtvrtý není špatný.</span> Ale co kdyby... <span class="pulse warning">třetí?</span>]
(live: 4s)[<div class="linkbox">
[[<span class="warning pulse">▶ Zkusit se dostat na třetí místo</span>->Zlepšení pozice]]]</div>(text-style: "fade-in-out")[Hodiny u obrazovky.] Úkol za úkolem.
(live: 2s)[
<div class="notification positive">
📈 POSUN V ŽEBŘÍČKU!
</div>](live: 3s)[
<div class="leaderboard">
<span class="pulse positive">🥈 2. MÍSTO! 🥈</span>
TY - 320 bodů
</div>](live: 4s)[<div class="chat-message">💬 Alex: "Druhý! Teď to dotáhni na vrchol!"</div>](live: 5s)[Radost. Ale taky... <span class="warning shake">tlak?</span> Ostatní jsou <span class="danger">hned za tebou</span>.](live: 6s)[<div class="linkbox">
[[▶ Udělat si náskok->Varovná notifikace]]</div>]<div class="notification danger blink">
⚠️ POZOR! ⚠️
</div>
(text-size: 1.2)[<span class="shake danger">Natálie je jen 3 body za tebou!</span>]
(live: 1s)[Žaludek se sevře.] (live: 2s)[Kontroluješ žebříček.] (live: 3s)[<span class="glitch">Je to pravda.</span>]
(live: 3s)[<span class="danger" style="font-size: 2em">3</span>] (live: 3.5s)[<span class="shake">pitomý BODY</span>]
(live: 4s)[<div class="linkbox">
[[<span class="empty">▶ Nějak to dopadne</span>->Pokles v žebříčku]]
[[<span class="danger pulse">▶ Rychle další úkol!</span>->Mechanické hraní]]</div>]<div class="notification danger">
📉 POKLES V ŽEBŘÍČKU
</div>
<div class="leaderboard corrupted">
<span class="danger blink">5. místo</span>
</div>
(text-style: "shudder")[Včera druhý.] (text-colour: red)[Dneska pátý.]
(live: 2s)[<div class="chat-message danger">
💬 "Co se děje?"
💬 "Ztrácíš to?"
💬 <span class="shake">"Myslel jsem, že jsi lepší..."</span>
</div>](live: 3s)[Frustrace <span class="danger">pálí v hrudi</span>. Tolik práce. <span class="glitch">K ničemu.</span>](live: 4s)[<div class="linkbox">
[[<span class="empty">▶ Rezignovaně pokračovat</span>->Mechanické hraní]]</div>]<div class="corrupted">
(text-colour: grey)[Den 23.]
(text-style: "blur")[Budík.Telefon.] <span class="empty">Aplikace. (link: "<span class='glitch'>▶ Úkoly</span>")[
(replace: ?seq)[(text-style: "fade-in-out")[Klik.] (link: "▶ Klik")[(text-style: "fade-in-out")[Klik.] (link: "▶ Klik")[(text-style: "fade-in-out")[Klik.] (link: "▶ Klik")[(text-style: "fade-in-out")[Body.]
(show: ?chat)]]]]
]</span>
[]<seq|
|chat)[(live: 1s)[
<div class="chat-message empty">
💬 "Bavilo tě to?"
</div>
](live: 2s)[(text-colour: grey)["Co?"]](live: 3s)[
<div class="chat-message empty">
💬 "Ten úkol, za zlatou hvězdu. ⭐"
</div>
](live: 4s)[Zlatou hvězdu? <span class="empty">[Ani už to neregistruju......]</span>](live: 5s)[<div class="linkbox">
[[<span class="empty">▶ Dál</span>->Stress Doubt]]</div>]
]
</div><div class="leaderboard severe-corrupted pulse">
1. Petra <span class="blink">(847 bodů)</span>
2. Jakub (834 bodů)
<span class="danger glitch">5. TY (768 bodů)</span>
</div>
(live: 1s)[<div class="chat-message">💬 "Kde jsi? Nejsi ani v top 3!"</div>]
(live: 2s)[<div class="chat-message">💬 "Myslel jsem, že jsi lepší..."</div>]
(live: 3s)[<div class="corrupted">
(text-colour: red)[3:00 ráno.] Oči pálí. <span class="shake danger">Musíš dohnat.</span>
<span class="glitch">(link: "▶ DOKONČI ÚKOL.")[(set: $klik1 to true)(rerun: ?timeline)]</span>
|timeline>[
(if: $klik1 is true)[MUSÍŠ.
<br>3:47. (link: "▶ Další úkol.")[(set: $klik2 to true)(rerun: ?timeline)]]
(if: $klik2 is true)[Další úkol.
<br>4:15. <span class="shake">(link: "▶ Ještě jeden.")[(set: $klik3 to true)(rerun: ?timeline)]</span>]
(if: $klik3 is true)[Ještě jeden.
<br>5:00. Žebříček: <span class="danger blink">4. místo.</span>
<br><br>Jenže ráno je to zase: <span class="danger" style="font-size: 2em">5. místo.</span>
<div class="linkbox">
[[<span class="danger glitch">▶ VÍC! MUSÍŠ MÁKNOUT VÍC!</span>->Burnout Path]]
[[<span class="empty">▶ Stačí už. Vypnout telefon.</span>->Pokus o odpojení]]
]]
</div></div>]Zavíráš aplikaci. Už jsi fakt unavený.
(live: 1s)[<div class="notification danger shake">
🚨 BZZT! "Petra dokončila bonus! +50 bodů!"
</div>]
(live: 2s)[<span class="danger">Vina.</span> Zatímco ty odpočíváš, ostatní <span class="shake">jedou</span>.]
(live: 3s)[(text-style: "shudder")[Proč to děláš?]]
(live: 4s)[<span class="empty">Protože všichni ostatní to dělají...</span>]
(live: 5s)[<div class="linkbox">
[[<span class="danger">▶ Pokusit se dohnat ostatní</span>->Žebříčková horečka]]
[[<span class="warning">▶ Vypnout telefon</span>->Pokus o odpojení]]</div>]<div class="severe-corrupted">
(text-style: "blur")[Den] (text-style: "blur")[splývá] <span class="glitch">s nocí.</span>(live: 2s)[
<div class="chat-message danger">
💬 "Vypadáš hrozně."
</div>(text-colour: grey)["Hm."]
](live: 3s)[<div class="chat-message danger">💬 "Kdy jsi naposledy normálně spal?"</div>(text-colour: grey)["Nevím."]
](live: 4s)[Ruce se <span class="shake danger">třesou</span>. Ale jsi třetí! Ne, počkat. <span class="danger blink">Čtvrtý.</span>]
(live: 5s)[<span class="glitch danger" style="font-size: 1.5em">Něco v tobě praskne.</span>]
(live: 6s)[<div class="linkbox">
(text-colour: grey)[[[▶ Pokračovat dál jako zombie->Leaderboard Peer Pressure]]]
[[<span class="danger glitch">▶ Už na to fakt nemám....</span>->Leaderboard Anxiety Spiral]]
</div>]
</div><div class="severe-corrupted">
Chat:
<div class="chat-message danger shake">
💬 "LOL ani nejsi v top 10"
💬 "Co se ti stalo?"
💬 <span class="glitch">"Petra má o 300 bodů víc"</span>
</div>
(live: 2s)[
<div class="notification warning">
👩🏫 Učitelka: "Tvé známky klesají. Jsi v pořádku?"
</div>
](live: 3s)[<span class="empty">"Jo,"</span> <span class="danger">lžeš.</span>]
(live: 4s)[<span class="danger glitch">3:47 ráno.</span> Další úkol. Oči pálí. <span class="danger" style="font-size: 1.5em">Musíš.</span> <span class="glitch danger" style="font-size: 2em">MUSÍŠ být lepší.</span>]
(live: 5s)[<div class="linkbox">[[<span class="danger glitch shake" style="font-size: 1.5em">▶ KOLAPS</span>->Leaderboard Anxiety Spiral]]</div>]
</div><div class="severe-corrupted glitch">
<span class="danger shake" style="font-size: 2em">4:23 ráno.</span>
(text-style: "shudder")[Telefon v ruce.] (text-style: "rumble")[Prsty ťukají.]
<div class="notification danger blink shake">
"🚨 Jen 5 bodů do bronzu!"
</div>
(live: 2s)[(text-style: "blur")[Hlava se točí.] <span class="danger glitch">Telefon padá.</span>]
(live: 3s)[<span class="shake">Ležíš.</span> <span class="danger shake">Třeseš se.</span> <span class="danger" style="font-size: 1.5em">Srdce buší</span> <span class="glitch danger" style="font-size: 2em">DIVOCE</span>.]
(live: 4s)[(text-style: "blur")[Toto není hra.]]
(live: 5s)[<span class="danger glitch shake" style="font-size: 1.5em">Toto je past.</span>]
(live: 6s)[<div class="linkbox">
[[<span class="empty glitch" >▶ Uvědomění</span>->Reflection End]]
</div>]
</div>
<div class="fadein">
(text-style: "fade-in-out")[Ticho.]
(live: 2s)[Měsíce honby za body. Za odznaky. Za pozice.]
(live: 3s)[A co ti to dalo?]
(live: 4s)[<span class="empty">Kruhy pod očima.</span>]
(live: 5s)[<span class="empty">Ztracené přátele.</span>]
(live: 6s)[<span class="empty">Zhoršené známky.</span>]
(live: 7s)[<span class="danger">Úzkost, která neodchází.</span>]
(live: 8s)[
<div class="notification">
Aplikace stále svítí. <span class="blink">⚠️ "Vrať se! Čekají tě nové výzvy!"</span>
</div>
]
(live: 9s)[<span class="empty">Ne.</span> <span class="positive">Už ne.</span>]
(live: 9s)[<div class="linkbox">
[[▶ Konec->Konec]]</div>]
</div><div class="fadein">
(text-colour: grey)[Příběh končí.]
(live: 2s)[Systém běží dál. Žebříčky se aktualizují.]
(live: 3s)[Noví hráči nastupují.]
(live: 4s)[<span class="empty">Ty už nejsi mezi nimi.</span>]
(live: 6s)[
CHCEŠ TO ZKUSIT ZNOVU?
](live: 7s)[<div class="linkbox">
[[<span class="warning">▶ Ano, zkusím to znovu</span>->Nové pořádky]]
[[▶ Ne, stačí. Chci se dozvědět něco o tom co jsem právě teď zažil->Závěrem]]</div>]
<div class="system-message">
📱 TELEFON VYPNUT
</div>
(live: 2s)[(text-colour: green)[Den 1:] <span class="shake warning">Panika.</span> Co když...?]
(live: 3s)[(text-colour: yellow)[Den 2:] Slunce svítí. Jídlo chutná.]
(live: 4s)[(text-colour: orange)[Den 3:] Zvědavost vyhrává a zapínáš telefon](live: 5s)[
<div class="notification danger blink">
47 NOVÝCH NOTIFIKACÍ
</div>
](live: 6s)[<div class="leaderboard corrupted"><span class="danger glitch shake">12. MÍSTO Z 20</span>
</div>](live: 7s)[
<div class="notification danger">
⚠️ Systém ti odebral body za neaktivitu
-150 bodů
</div>
]
(live: 8s)[Srdce <span class="shake danger">buší</span>. Všechno to úsilí...]
(live: 8s)[
<div class="linkbox">
[[<span class="danger shake">▶ Doženu co se dá</span>->Leaderboard Anxiety Spiral]]
[[<span class="positive">▶ Definitivně skončit</span>->Alternativní konec]]</div>]<div class="fadein positive">
<div class="system-message positive">
✓ APLIKACE SMAZÁNA
</div>
(live: 2s)[
<div class="chat-message empty shake">
💬 Kde jsi?" "Proč nehraješ?"
💬 <span class="glitch">"Petra má o 300 bodů víc"</span>
</div>]
(live: 3s)[Ale pomalu... <span class="positive">Klid.</span> Knihy. Sport. Přátelé.]
(live: 4s)[
Potkáváš Jakuba. <span class="empty">Kruhy pod očima.</span>
<span class="danger">"Jsem první,"</span> šeptá.
Nezní šťastně.
]
(live: 5s)[<span class="positive">"Gratuluji,"</span> říkáš.]
(live: 6s)[Víš něco, co on ještě ne:]
(live: 7s)[<span class="positive pulse">Vyhrát znamená vědět, kdy přestat hrát.</span>]
(live: 8s)[<div class="linkbox">
[[<span class="positive">▶ Konec</span>->Konec]]</div>]
</div><div class="fadein">
<div class="system-message" style="border-color: #6b5b95; color: #b8a9c9;">
💡 REFLEXE ZÁŽITKU
</div>
(live: 1s)[Právě jsi prošel/a příběhem, který ti umožnil zažít <span style="color: #ffd93d">tlak gamifikovaných systémů</span> z první ruky. Konkrétně tlak sociálního srovnávání.]
(live: 2s)[Co zpočátku vypadalo jako <span class="positive">zábavná výzva</span> plná odznaků, notifikací a žebříčků, se postupně změnilo v <span class="danger">závod s časem</span>, s ostatními i se sebou.]
(live: 3s)[<div style="border-left: 3px solid #6b5b95; padding-left: 15px; margin: 20px 0; opacity: 0.9;">
Cílem bylo ukázat, jak mohou i běžné prvky gamifikace ovlivňovat <span style="color: #ff6b6b">emoce</span>, <span style="color: #ffd93d">chování</span> a <span style="color: #51cf66">vnímání vlastního úspěchu</span>, pokud jsou navrženy bez ohledu na duševní pohodu.
</div>]
(live: 4s)[Nebylo cílem tě soudit ani ti říct, co je správné. Jen ti nabídnout zážitek, který tě přiměje zamyslet se:](live: 5s)[<div class="reflection-question">
<span class="glitch" style="animation: glitch 5s infinite; opacity: 0.7;">Co všechno jsme ochotni obětovat,</span>
<span style="font-size: 1.2em; color: #ffd93d;">abychom zůstali na vrcholu žebříčku?</span>
</div>](live: 6s)[<div style="margin-top: 30px; opacity: 0.7; font-style: italic;">
Dole najdeš odkaz na můj článek k prožitému tématu:
<span class="glitch">
<a href="https://www.andoftheworld.com/sem2_seminar_dark_patterns/" target="_blank" style="font-size: 1.2em; color: #ffd93d; text-decoration: none; transition: all 0.3s;" onmouseover="this.style.color='#51cf66'" onmouseout="this.style.color='#ffd93d'">🔗 Hraj, sbírej, trp: Etické dilema moderní gamifikace</a></span>
<span class="glitch">
<a href="https://www.andoftheworld.com/sem_2_praxe" target="_blank" style="font-size: 1.2em; color: #ffd93d; text-decoration: none; transition: all 0.3s;" onmouseover="this.style.color='#51cf66'" onmouseout="this.style.color='#ffd93d'">🔗 Reflexe tohoto zážitku - "Žebřík nikam"</a></span>
</div>]
(live: 7s)[<div class="linkbox" style="border-color: #6b5b95; text-align: center;">
[[<span style="color: #b8a9c9;">▶ Zkusit si vše znovu</span>->Nové pořádky]]
</div>]
</div><div class="intro-container">
<div class="title-glitch" style="text-align: center; font-size: 2em; margin-bottom: 20px;">
[ŽEBŘÍK NIKAM<BR>AUTOR: PAVEL ANDRAŠŠÍ]
</div><div style="text-align: center; font-style: italic; opacity: 0.7;">
Studentský projekt v rámci 2. semestru studia DIS na FF MU (KISK), 2025.
</div>(live: 1s)[<div class="warning-box" style="border: 1px solid #ff0000; background: rgba(255,0,0,0.1); padding: 15px; margin: 20px 0; text-align: center;">
⚠️ <span class="blink">VAROVÁNÍ</span> ⚠️
<br>
<span style="font-size: 0.9em; opacity: 0.8;">Tento interaktivní zážitek simuluje psychologické dopady špatného designu gamifikace v systému odměn a sociálního srovnávání.
Může vyvolat pocity stresu, úzkosti a frustrace.</span>
</div>](live: 2s)[<div style="color: #51cf66; text-align: center; margin: 20px 0;">
== CO TĚ ČEKÁ? ==
</div>](live: 3s)[
Začneš s <span class="positive">nadšením</span>
Zažiješ <span class="warning">soutěživost</span>
Skončíš v <span class="danger">pasti</span>
](live: 4s)[<div class="instructions" style="background: rgba(255,255,255,0.03); border: 1px solid #333; padding: 20px; margin: 20px 0;">
<span style="color: #6b5b95;">JAK NA TO?</span>
- Čti pozorně a klikej na volby, které tě povedou dál. Všechny interaktivní elementy jsou označené ikonou " ▶ "
- Sleduj své pocity počas průchodu zážitkem
- Pamatuj: <span class="warning">není cílem vyhrát</span>
<div style="text-align: center; margin-top: 15px; opacity: 0.7;">
⏱️ Doba hraní: 10-15 minut
</div>
</div>](live: 5s)[<div style="text-align: center; font-style: italic; opacity: 0.7;">
"Kolik bodů potřebuješ, abys byl/a šťastný/á?"
</div>](live: 6s)[<div class="linkbox" style="text-align: left;">
[[▶ JDEME NA TO!->Nové pořádky]]
</div>]
</div>