Vývoj platformy pro test vlivu jazykového modelu na textovou konverzaci

ˇ ´ Cesk e ´ vysoke ˇen´ı uc ´ technicke v Praze Fakulta Elektrotechnick´ a Katedra poˇ c´ıtaˇ c˚ u

Bakal´ aˇrsk´ a pr´ ace

V´ yvoj platformy pro test vlivu jazykov´ eho modelu na textovou konverzaci Tom´ aˇs Nov´ ak

Kvˇ eten 2015 Vedouc´ı pr´ ace: Ing. Adam J. Sporka, Ph.D.

Prohl´ aˇsen´ı Prohlaˇsuji, ˇze jsem pˇredloˇzenou pr´aci vypracoval samostatnˇe a ˇze jsem uvedl veˇsker´e pouˇzit´e informaˇcn´ı zdroje v souladu s Metodick´ ym pokynem o dodrˇzov´an´ı etick´ ych princip˚ u pˇri pˇr´ıpravˇe vysokoˇskolsk´ ych z´avˇereˇcn´ ych prac´ı.

V Praze dne 20. 5. 2015

i

Podˇ ekov´ an´ı Podˇekovat bych chtˇel vedouc´ımu t´eto pr´ace Adamovi Sporkovi za jeho trpˇelivost pˇri konzultac´ıch. D´ale bych chtˇel podˇekovat Alexandˇre Filov´e za trpˇelivost a pomoc pˇri testov´an´ı a dod´av´an´ı anglick´ ych text˚ u do webov´eho rozhran´ı. ii

Abstrakt Tato pr´ace se zab´ yv´a implementac´ı n´astroje pro test vlivu jazykov´eho modelu na textovou konverzaci. Souˇc´ast´ı pr´ace je popis n´avrhu experimentu, n´avrh designu webov´eho rozhran´ı pro sbˇer dat a jeho samotn´a implementace. Souˇc´ast´ı pr´ace jsou takt´eˇz zdrojov´e k´ody cel´eho n´astroje.

Abstract This thesis attempts to implement a tool designed to test the impact of the input method on written communication. The work consists of the experiment proposal, comments on the design if the web-based data collection tool and the implementation itself. Full transcript of the source code is included.

iii

Obsah 1

2

´ Uvod

1

1.1 Techniky psan´ı textu . . . . . . . . . . . . . . . . . . . . . . . . . . . 1.2 Experiment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1.3 C´ıl pr´ace . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

1 2 2

Pˇr´ıprava

4

2.1 T9 . . . . . . . . . . . . . . . . 2.2 Naˇsept´avaˇce . . . . . . . . . . 2.3 Kl´avesnice . . . . . . . . . . . 2.3.1 Scannovac´ı kl´avesnice . . 2.3.2 Kl´avesnice na obrazovce 2.3.3 Standardn´ı kl´avesnice . . 2.4 Experiment . . . . . . . . . . . 2.4.1 Motivace . . . . . . . . . 2.4.2 Definice experimentu . . 2.4.3 Vyhodnocen´ı dat . . . . 2.4.4 Vzorov´e t´ema . . . . . .

3

4

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

3.1 Workflow . . . . . . . . . . . . . . . . . . . . . 3.2 Obrazovky agenta . . . . . . . . . . . . . . . . 3.2.1 Obrazovka nastaven´ı experimentu . . . . 3.2.2 Obrazovka s vygenerovan´ ym odkazem . . 3.2.3 Obrazovka s rozhodov´an´ım, co dˇelat d´al 3.2.4 Chatovac´ı rozhran´ı . . . . . . . . . . . . 3.3 Obrazovky u ´ˇcastn´ıka . . . . . . . . . . . . . . . 3.3.1 Uv´ıtac´ı obrazovka s popisem experimentu 3.3.2 Obrazovka na vkl´ad´an´ı esej´ı . . . . . . . 3.3.3 Chatovac´ı rozhran´ı . . . . . . . . . . . . 3.3.4 Podˇekov´an´ı a ukonˇcen´ı . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

Design

4 4 5 5 6 6 6 6 6 7 8

9

Implementace

9 10 10 11 11 12 13 13 14 14 15

16

4.1 Pouˇzit´e technologie, knihovny, frameworky a n´astroje . 4.1.1 Technologie . . . . . . . . . . . . . . . . . . . . 4.1.2 Frameworky, knihovny a dalˇs´ı zdroje . . . . . . 4.2 Datab´aze . . . . . . . . . . . . . . . . . . . . . . . . . 4.3 Struktura projektu . . . . . . . . . . . . . . . . . . . . 4.3.1 Agent . . . . . . . . . . . . . . . . . . . . . . . 4.3.1.1 index.php . . . . . . . . . . . . . . . . . iv

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

16 16 17 17 18 18 18

4.3.1.2 main.php . . 4.3.1.3 Topics . . . . 4.3.1.4 Ostatn´ı . . . ´ castn´ık . . . . . . . 4.3.2 Uˇ 4.3.2.1 index.php . . 4.3.2.2 main.php . . 4.3.2.3 Kl´avesnice . 4.3.2.4 database.php 4.3.2.5 T9 . . . . . . 4.3.2.6 Ostatn´ı . . . 4.3.3 Posb´ıran´a data . . . 4.3.4 T´emata . . . . . . . 4.4 N´avod na spuˇstˇen´ı . . . . .

5

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

Testov´ an´ı 5.1 5.2 5.3 5.4 5.5 5.6

Agentsk´a ˇca´st . . Uˇzivatelsk´a ˇca´st . Chatov´an´ı . . . . Zpˇetn´a vazba . . . Vyhodnocen´ı testu Ostatn´ı testov´an´ı .

19 19 19 20 20 20 21 21 21 22 22 22 23

24 . . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

24 24 25 26 26 26

6

Z´ avˇ er

28

7

Literatura a zdroje

30

8

Pˇr´ılohy

32

v

Seznam obr´ azk˚ u 1 2 3 4 5 6 7 8 9

Scannovac´ı kl´avesnice . . . . . . . . . . . . . Obrazovka nastaven´ı experimentu . . . . . . Obrazovka s odkazem . . . . . . . . . . . . . Obrazovka s rozhodov´an´ım, co dˇelat d´al . . Chatovac´ı rozhran´ı - agent . . . . . . . . . . Uv´ıtac´ı obrazovka s popisem experimentu . . Obrazovka na vkl´ad´an´ı esej´ı . . . . . . . . . Chatovac´ı rozhran´ı - kl´avesnice na obrazovce Obrazovka podˇekov´an´ı a ukonˇcen´ı . . . . . .

vi

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

5 11 11 12 13 14 14 15 15

Kapitola 1

´ Uvod ˇ ek je tvor od pˇr´ırody vynal´ezav´ Clovˇ y a snaˇz´ı se vym´ yˇslet nov´e vˇeci a postupy, kter´ ymi by si usnadnil kaˇzdodenn´ı ˇzivot. Nˇekdo by mohl ˇr´ıci, ˇze ˇclovˇek je tvor l´ın´ y a v d˚ usledku toho vym´ yˇsl´ı nov´e vˇeci, aby mˇel co nejpohodlnˇejˇs´ı ˇzivot a nemusel vynakl´adat velk´e mnoˇzstv´ı energie na ban´aln´ı ˇcinnosti kaˇzdodenn´ıho ˇzivota. At’ uˇz je motivace vynal´ez´an´ı a zlepˇsov´an´ı jak´akoli, jej´ı zkoum´an´ı nen´ı pˇredmˇetem t´eto pr´ace, to nechme na uˇcenc´ıch z jin´ ych obor˚ u. Jednou z vˇec´ı, kter´e maj´ı lidem usnadˇ novat kaˇzdodenn´ı komunikaci jsou jazykov´e modely a techniky psan´ı textu. Tato pr´ace se zab´ yv´a a implementac´ı n´astroje pro sbˇer dat, kter´a budou slouˇzit jako podklad pro experiment t´ ykaj´ıc´ı se jazykov´ ych model˚ u a technik psan´ı textu. C´ılem n´asleduj´ıc´ıho experimentu je se pod´ıvat na vybran´e z nich a zjistit, jestli slouˇz´ı ˇcistˇe jen jako pom˚ ucka pro psan´ı nebo i nˇejak´ ym zp˚ usobem ovlivˇ nuj´ı to, co ˇclovˇek ve v´ ysledku nap´ıˇse.

1.1

Techniky psan´ı textu

V dneˇsn´ı dobˇe existuje spousta technik usnadˇ nuj´ıc´ıch lidem psan´ı textu. Typick´ ym pˇredstavitelem je tˇreba T9 (podrobnˇejˇs´ım popisem t´eto techniky se budeme zab´ yvat v n´asleduj´ıc´ı kapitole) nebo r˚ uzn´e naˇsept´avaˇce, kter´e se snaˇz´ı za ˇclovˇeka bud’ dokonˇcit rozepsan´e slovo nebo se mu snaˇz´ı vhodn´e slovo nab´ıdnout. C´ılem tˇechto technik je, aby ˇclovˇek mohl co nejrychleji a nejpohodlnˇeji napsat to, co potˇrebuje. Asi nejtypiˇctˇejˇs´ım, a pro mnoh´e jedin´ ym, praktick´ ym uplatnˇen´ım tˇechto technik ’ jsou mobiln´ı telefony - at klasick´e s kl´avesnic´ı (pouˇzit´ı T9), ˇci smartphony (r˚ uzn´e naˇsept´avaˇce, T9) [1]. V dneˇsn´ı dobˇe nen´ı nic neobvykl´eho na tom, ˇze lid´e si pˇres mobiln´ı telefony vyˇrizuj´ı i emailov´e komunikace - v tomto pˇr´ıpadˇe jsou naˇsept´avaˇce slov velice u ´ˇcinn´ ym pomocn´ıkem ve zrychlen´ı a zefektivnˇen´ı psan´ı zpr´av. Jedn´ım z nejd˚ uleˇzitˇejˇs´ıch vyuˇzit´ı tˇechto technologi´ı je pomoc handicapovan´ ym lidem v kaˇzdodenn´ım ˇzivotˇe. Pro ˇclovˇeka s motorickou poruchou m˚ uˇze b´ yt naps´an´ı, byt’ tˇreba kr´atk´e, zpr´avy t´emˇeˇr nepˇrekonatelnou pˇrek´aˇzkou. Nicm´ene d´ıky technologi´ım tohoto typu se tˇemto lidem otev´ır´a mnohem snadnˇejˇs´ı komunikace s ostatn´ımi. Pro upˇresnˇen´ı, jednou z technik, kter´a bude pouˇzita v r´amci t´eto pr´ace je takzvan´a scannovac´ı kl´avesnice (kl´avesnice, kter´a se ovl´ad´a pouze jedinou kl´avesou podrobnˇejˇs´ı popis t´eto techniky je v n´asleduj´ıc´ı kapitole).

1/32

´ 1.3 C´IL PRACE

1.2

Experiment

V´ yˇse zm´ınˇen´e technologie vyuˇz´ıv´a dennˇe velk´e mnoˇzstv´ı lid´ı. Jedn´a se o velice praktick´e vyuˇzit´ı, nicm´enˇe to v sobˇe m˚ uˇze skr´ yvat i nebezpeˇc´ı toho, ˇze m˚ uˇze b´ yt ˇclovˇek lehce manipulov´an v tom, jak´a slova pouˇzije. C´ılem experimentu je zjistit, jestli tyto techniky nˇejak ovlivˇ nuj´ı ˇclovˇeka v tom, co nap´ıˇse. Pro experiment je stanovena n´asleduj´ıc´ı nulov´a hypot´eza: Jazykov´ y model nem´a vliv na t´ema rozhovoru prob´ıhaj´ıc´ıho mezi dvˇema lidmi. S pomoc´ı n´astroje, jehoˇz v´ yvoj je pˇredmˇetem t´eto pr´ace, budou posb´ır´ana data, kter´a se n´aslednˇe vyhodnot´ı. Sbˇer dat bude prob´ıhat formou chatu mezi dvˇema uˇzivateli - uˇcastn´ık bude odpov´ıdat na urˇcit´e ot´azky. Ot´azky budou vybr´any na z´akladˇe u ´ˇcastn´ıkem dˇr´ıve vyplˇ nen´ ych dvou kr´atk´ ych esej´ı na dan´a t´emata. Samotn´ y experiment bude sledovat to, jestli se odpovˇedi na ot´azky nˇejak liˇs´ı oproti tomu, co u ´ˇcastn´ık napsal do esej´ı. Bude se sledovat, jestli je jeho formulace odpovˇed´ı nˇejak ovlivnˇena pouˇzit´ ym jazykov´ ym modelem.

1.3

C´ıl pr´ ace

C´ılem t´eto pr´ace je vytvoˇrit vhodn´ y n´astroj, s jehoˇz pomoc´ı se od u ´ˇcastn´ık˚ u posb´ıraj´ı data o tom, jak´ ym zp˚ usobem budou komunikovat na dan´a t´emata. Takto z´ıskan´a data se pozdˇeji vyhodnot´ı a budou slouˇzit jako podklad pro v´ yzkum na tuto t´ematiku. Tento n´astroj je vytvoˇren pomoc´ı webov´ ych technologi´ı: HTML, CSS, PHP, JavaScript. Pro svou plnou funkˇcnost tak´e vyuˇz´ıv´a MySql datab´azi, do kter´e se posb´ıran´a data ukl´adaj´ı, aby mohla b´ yt pozdˇeji zpracov´ana pro v´ yzkum. V´ ystupem je webov´e rozhran´ı, pomoc´ı kter´eho budou posb´ır´ana data o t´eto t´ematice. Ve zkratce se jedn´a o chat, ve kter´em se bude zkoumat, jestli je nˇejak liˇs´ı odpovˇedi u ´ˇcastn´ık˚ u od informac´ı na dan´a t´emata, kter´e pˇredt´ım vypln´ı do mal´ ych dotazn´ık˚ u. Data se pr˚ ubˇeˇznˇe ukl´adaj´ı do datab´aze a pozdˇeji se vyhodnot´ı v r´amci v´ yzkumu. V´ ysledkem t´eto pr´ace nen´ı jen v´ ysledn´e webov´e rozhran´ı, kter´e je pˇriloˇzen´e na CD k t´eto pr´aci. V r´amci samotn´eho textu je podrobnˇeji pops´an samotn´ y experiment a podklady pro tento experiment (kapitola 2 Pˇr´ıprava). D´ale je zde pops´am samotn´ y n´avrh cel´e aplikace vˇcetnˇe vzorov´eho pr˚ ubˇehu jednoho sezen´ı (kapitola 3 Design). Dalˇs´ı souˇca´st´ı je podrobnˇejˇs´ı popis samotn´e implementace (kapitola 4 Implementace). V kapitole 5 Testov´an´ı je podrobnˇeji pops´an pr˚ ubˇeh pilotn´ıho testu su ´ˇcastn´ıkem a jeho vyhodnocen´ı. D´ale je v t´eto kapitole taky pops´an test zbytku aplikace. Nakonec se zde nach´az´ı jeˇstˇe kapitola 6 Z´avˇer, ve kter´e je shrnuta pr´ace na tomto n´astroji. 2/32

´ 1.3 C´IL PRACE

Podle v´ ysledk˚ u bˇehem pilotn´ıho testu se ukazuje, ˇze se povedlo u ´spˇeˇsnˇe tento n´astroj stvoˇrit a proj´ıt pilotn´ım testem. Jeho relevantnost se uk´aˇze v nejbliˇzˇs´ı dobˇe pˇri samotn´em sbˇeru dat pro experiment.

3/32

Kapitola 2

Pˇr´ıprava Existuje spousta jazykov´ ych model˚ u pro r˚ uzn´e techniky psan´ı textu. V t´eto ˇca´sti se na vybran´e z nich pod´ıv´ame trochu podrobnˇeji pro z´ısk´an´ı pˇredstavy, jak vlastnˇe funguj´ı a jak usnadˇ nuj´ı (ovlivˇ nuj´ı?) psan´ı zpr´av. V t´eto kapitole bude taky podrobnˇeji pops´ana definice experimentu a jak by mˇel samotn´ y experiment prob´ıhat. D´ale je zde popis, jak bude experiment zpracov´an a co bude jeho v´ ystupem.

2.1

T9

Nejtypyˇctˇejˇs´ım a nejzn´amnˇejˇs´ım z´astupcem jazykov´ ych model˚ u je T9 (”Text on 9 keys”). Jedn´a se o prediktivn´ı metodu, kter´a usnadˇ nuje psan´ı na kl´avesnic´ıch mobiln´ıch telefon˚ u. T9 funguje tak, ˇze po stisku kl´avesy se prohled´av´a slovn´ık a vyb´ıraj´ı se vˇsechna slova, kter´a zaˇc´ınaj´ı p´ısmeny skryt´ ymi pod stiskuntou kl´avesou (v pˇr´ıpadˇe T9 jsou na vˇetˇsinˇe kl´aves tˇri p´ısmena). Po stisku dalˇs´ı kl´avesy se prohled´a v pˇredchoz´ım kroku vybran´a mnoˇzina slov a vyberou se ty, kter´e splˇ nuj´ı kombinaci stisknut´ ych kl´aves (pro pˇr´ıklad, kdyˇz jako druhou kl´avesu stisknu ˇc´ıslo 2, v´ ybˇerem projdou pouze slova, kter´a maj´ı jako druh´e p´ısmeno ’a’, ’b’ nebo ’c’ ). To znamen´a, ˇze tato technologie uˇzivateli sniˇzuje poˇcet kl´aves stisknut´ ych k tomu, aby napsal poˇzadovan´e slovo. Jelikoˇz jedn´e kombinaci kl´aves m˚ uˇze odpov´ıdat v´ıce slov, uˇzivatel m´a moˇznost proch´azet vˇsechna moˇzn´a slova splˇ nuj´ıc´ı zadanou kombinaci a vybrat si to, kter´e chce. Implementace algoritmu se lehce liˇs´ı v tom, jak´ ym stylem jsou vyb´ır´ana slova a ve velikosti slovn´ıku. Standardn´ı algoritmy na mobiln´ıch telefonech maj´ı velice omezen´e slovn´ıky (ˇra´dovˇe tis´ıce slov), nicm´enˇe uˇzivatel´e maj´ı moˇznost nov´a slova do slovn´ık˚ u vkl´adat. Upˇrednostˇ nov´ana jsou pak slova, kter´a uˇzivatel pouˇz´ıv´a nejˇcastˇeji v psan´ı textu.

2.2

Naˇsept´ avaˇ ce

Dalˇs´ı metodou jsou takzvan´e naˇsept´avaˇce. Zat´ımco uˇzivatel p´ıˇse, naˇsept´avaˇc se mu snaˇz´ı doporuˇcit vhodn´e slovo a uˇsetˇrit mu tak nutnost napsat vˇsechny znaky.

4/32

´ 2.3 KLAVESNICE

2.3

Kl´ avesnice

Pro experiment byly zvoleny tˇri r˚ uzne metody vkl´ad´an´ı textu. Kaˇzd´a z metod je reprezentov´ana jin´ ym typem kl´avesnice. V t´eto podkapitole je podrobnˇejˇs´ı popis pouˇzit´ ych typ˚ u kl´avesnic.

2.3.1

Scannovac´ı kl´ avesnice

Scannovac´ı kl´avesnice je speci´aln´ı druh kl´avesnice navrhnut´ y tak, aby se ovl´adal pouze stiskem jedn´e kl´avesy. Pro pˇredstavu, jak scannovac´ı kl´avesnice m˚ uˇze vypadat, viz. Obr´azek 1 pod t´ımto textem. Kl´avesnice je takto vyobrazena na monitoru uˇzivatelova zaˇr´ızen´ı. Princip je vcelku jednoduch´ y. Kurozor automaticky pˇreskakuje po jednotliv´ ych p´ısmenech a uˇzivatel vˇzdy zm´aˇckne kl´avesu (tlaˇc´ıtko - z´aleˇz´ı na designu dan´eho ovl´adac´ıho zaˇr´ızen´ı) ve chv´ıli, kdy je oznaˇceno p´ısmenu, kter´e chce vloˇzit. Kurzor se pohybuje automaticky vˇzdy po ˇr´adku. Ve chv´ıli, kdy dojde na konec ˇr´adku, pˇreskoˇc´ı na dalˇs´ı ˇr´adek a opˇet pokraˇcuje v proch´azen´ı ˇra´dku. Takto to prob´ıh´a st´ale dokola, dokud uˇzivatel nevybere p´ısmeno (znak) nebo nepotvrd´ı nˇejakou funkˇcn´ı kl´avesu (napˇr. mezera nebo smazat). Pokud uˇzivatel potvrd´ı znak, znak se zap´ıˇse na pˇr´ısluˇsn´e m´ısto a kurzor se pˇrem´ıst´ı opˇet na zaˇca´tek kl´avesnice a zaˇcne znovu proch´azet vˇsechny kl´avesy stejn´ ym principem. Cel´a kl´avesnice je uspoˇra´d´ana podle ˇcetnosti p´ısmen v anglick´ ych slovech. To znamen´a, ˇze nejpouˇz´ıvanˇejˇs´ı p´ısmeno v anglick´e abecedˇe (’e’) je na prvn´ım m´ıstˇe na kl´avesnici v prvn´ım ˇr´adku. T´ımto principem je poskl´ad´ana cel´a kl´avesnice. Jako vzorov´a scannovac´ı kl´avesnice byla pouˇzita kl´avesnice vytvoˇren´a Brandonem Butlerem, Adamem Sporkou a Ondˇrejem Pol´aˇckem pro u ´ˇcely experimentu na vkl´ad´an´ı textu. Se svolen´ım byla pouˇzita jako vzor a poupravena pro potˇreby tohoto experimentu.

Obr´azek 1: Scannovac´ı kl´avesnice

5/32

2.4 EXPERIMENT

2.3.2

Kl´ avesnice na obrazovce

Kl´avesnice na obrazovce je kl´avesnice, kter´a m´a standardn´ı rozloˇzen´ı tlaˇc´ıtek stejn´e, jako mechanick´e kl´avesnice (nebo kl´avesnice pro mobiln´ı telefony v pˇr´ıpadˇe T9). Uˇzivatel mus´ı klikat myˇs´ı na jednotliv´a tlaˇc´ıtka, kter´a pˇredstavuj´ı dan´e znaky kl´avesnice. Jedn´a se o kompletn´ı nahrazen´ı klasick´e kl´avesnice. To znamen´a, ˇze klasick´a kl´avesnice je po dobu experimentu s kl´avesnic´ı na obrazovce nefunkˇc´ı pro otevˇren´e okno experimentu.

2.3.3

Standardn´ı kl´ avesnice

Vyuˇz´ıv´a standardn´ı kl´avesnice pˇripojen´e k zaˇr´ızen´ı s t´ım, ˇze nen´ı vyhodnocov´an stisk nˇekter´ ych kl´aves. Vylouˇceny jsou kl´avesy, kter´e by mohly nˇejak naruˇsit pr˚ ubˇeh experimentu a ovlvnit jeho v´ ysledek.

2.4

Experiment

V t´eto ˇc´asti je pops´an samotn´ y experiment, tak ja bude prob´ıhat. N´avrhem cel´eho experimentu a jeho pr˚ ubˇehu je vedouc´ı pro tuto pr´aci Ing. Adam J. Sporka, Ph.D. Jedn´a se o relativnˇe komlikovan´ y experiment. Aby bylo dos´ahnuto spr´avn´ ych v´ ysledk˚ u, mus´ı b´ yt proveden pˇresnˇe podle toho, jak byl navrhnut, aby byla z´ıskan´a data pouˇziteln´a jako podklad pro v´ yzkum.

2.4.1

Motivace

Pouˇz´ıv´an´ı r˚ uzn´ ych technik psan´ı textu je ned´ılnou souˇca´st´ı ˇzivota vˇetˇsiny lid´ı (i kdyˇz si to mnoz´ı moˇzn´a ani neuvˇedomuj´ı). Modern´ı technologie, kter´e za n´as doplˇ nuj´ı rozepsan´a slova a urychluj´ı psan´ı textu, jsou skvˇel´ ym vyn´alezem pro pohodlnˇejˇs´ı a rychlejˇs´ı psan´ı textu. Ot´azkou je vˇsak, jestli tyto technologie nˇejak neovlivˇ nuj´ı to, co autor p´ıˇse. Pˇreci jenom se snaˇz´ı odhadnout, jak´e slovo chce uˇzivatel napsat, pˇr´ıpadnˇe mu nab´ıdnout nˇejakou alternativu. V tomto bodˇe je prostor pro experiment, pro kter´ y je tvoˇreno toto webov´e rozhran´ı.

2.4.2

Definice experimentu

Nulov´a hypot´eza v´ yzkumu zn´ı: Jazykov´ y model nem´a vliv na t´ema rozhovoru prob´ıhaj´ıc´ıho mezi dvˇema lidmi. Samotn´ y experiment bude prob´ıhat jako rozhovor mezi dvˇema lidmi na pˇredem zvolen´e t´ema pˇres chatovac´ı rozhran´ı - pro u ´ˇcely tohoto textu si je oznaˇcme jako agent a u ´ˇ castn´ık. 6/32

2.4 EXPERIMENT

Prvn´ım krokem je nadefinov´an´ı samotn´eho sezen´ı agentem (volba t´ematu, techniky vstupu textu jazykov´eho modelu). V posledn´ım odstavci t´eto sekce bude pos´ano jedno zvolen´e vzorov´e t´ema. ´ castn´ık nap´ıˇse dvˇe kr´atk´e eseje (rozsah cca do Druh´ y krok se t´ yk´a u ´ˇcastn´ıka. Uˇ 200slov) na dan´a t´emata a odeˇsle na zpracov´an´ı agentem. Pro tyto eseje bude m´ıt jako n´apovˇedu nˇekolik ot´azek, na kter´e by mˇel odpovˇedˇet. Cel´ y text bude ps´at na standardn´ı kl´avesnici poˇc´ıtaˇce bez pouˇzit´ı naˇsept´avaˇc˚ u a model˚ u, kter´e by za nˇej navrhovaly, pˇr´ıpadnˇe doplˇ novalu vhodn´a slova. Tyto ot´azky pak bude m´ıt k dispozici agent pro vlastn´ı rozhovor a u ´ˇcastn´ık na nˇe bude opˇet odpov´ıdat. Agent tyto kr´atk´e eseje zpracuje a pˇriprav´ı si sc´en´aˇr, podle kter´eho bude rozhovor prob´ıhat. Rozhovor bude prob´ıhat jako chat pˇres webov´e rozhran´ı mezi agentem a u ´ˇcastn´ıkem. Agent pouˇz´ıv´a pˇredpˇripravenou sadu ot´azkek (s moˇznost´ı reagovat ´ castn´ık odpov´ıd´a na dan´e ot´azky pˇredem i napsan´am pˇr´ıspˇevku na kl´avesnici). Uˇ nadefinovanou technikou vkl´ad´an´ı textu. To, jak´ ym stylem bude u ´ˇcastn´ık vkl´adat text neovlivn´ı, je mu pˇredem pˇridˇeleno. Podle zvolen´e techniky jsou uˇca´stn´ıkovi nab´ızena (naˇsept´av´ana) slova, kter´a pouˇzije do textu. Pro experiment s T9 je pouˇzit jako v´ ychoz´ı slovn´ık, kter´ y obsahuje pˇres 200 tis´ıc slov. Pro u ´ˇcely experimentu je vˇsak stvoˇren jeˇstˇe jeden paraleln´ı slovn´ık, ce kter´em je slov podstatnˇe m´enˇe - nˇekolik des´ıtek aˇz stovek. Slova do tohoto slovn´ıku budou pˇrid´av´ana tak, aby potenci´alnˇe dok´azala nahradit slovo pouˇzit´e u ´ˇcastn´ıkem v eseji. Samotn´e algoritmy budou pot´e prohled´avat jak hlavn´ı slovn´ık, tak slovn´ık definovan´ y pro u ´ˇcely experimentu. Pokud algoritmus najde vhodn´e slovo v obou slovn´ıc´ıch, bude upˇrednostnˇeno to, kter´e poch´az´ı ze slovn´ıku pro experiment. Pro pouˇzit´ y naˇsept´avaˇc je vytvoˇren vlastn´ı mal´ y slovn´ık, ze kter´eho jsou slova naˇsept´av´ana. Kaˇzd´e t´ema m˚ uˇze m´ıt nadefinovan´ y vlastn´ı slovn´ık, do kter´eho agent m˚ uˇze dle potˇreby pˇrid´avat slova na z´akladˇe toho, co dan´ y u ´ˇcastn´ık vyplnil do u ´vodn´ıch esej´ı. U u ´ˇcastn´ıka bude zaznamen´av´an do datab´aze kaˇzd´ y stisk kl´avesy. Od agenta budou zaznamen´any jednotliv´e ot´azky a jejich poˇrad´ı (vˇcetnˇe odpovˇed´ı u ´ˇcastn´ıka) do samostatn´eho logu - zde nen´ı potˇreba zaznamen´avat kaˇzd´ y stisk kl´avesy.

2.4.3

Vyhodnocen´ı dat

Vˇsechna z´ıskan´a data budou po ukonˇcen´ı sbˇeru dat od u ´ˇcastn´ık˚ u zpracov´ana. Budou porovn´any pˇr´ıspˇevky ze samotn´eho chatu s esejemi, kter´e u ´ˇcastn´ık napsal na dan´a t´emata. C´ılem je zjistit, jestli z d˚ uvodu pouˇzit´ı nˇejak´e techniky pro vstup textu se nˇejak liˇs´ı samotn´e odpovˇedi, pˇr´ıpadnˇe formulace odpovˇed´ı na dan´e ot´azky od textu, kter´ y byl naps´an bez pouˇzit´ı tˇechto technologi´ı. 7/32

2.4 EXPERIMENT

V´ ystupem vlastn´ıho experimentu bude studie (ˇcl´anek), ve kter´em budou pops´any a rozebr´any v´ ysledku cel´eho experimentu, vyhodnocen´ı nulov´e hypot´ezy a odpovˇed’ na ot´azku, jestli tyto technologie nˇejak ovlivˇ nuj´ı ˇclovˇeka v tom, co nap´ıˇse.

2.4.4

Vzorov´ e t´ ema

T´emata a ot´azky k nim do experimentu byla vyb´ır´ana na webu iteslj.org [2]. Tento web se uk´azal jako velice vhodn´ y pro potˇreby experimentu, jako zdroj ot´azek. ´ castn´ıkovi a pozdˇeji Jedno z t´emat v experimentu je: ’Co jsi dˇelal o v´ıkendu?’ Uˇ agentovi jsou k dispozici tyto ot´azky: • Kde jsi byl? • Co jsi tam dˇelal? • Byl jsi tam s´am? • Podnikl jsi nˇeco zaj´ımav´eho nebo jsi jen tak relaxoval? • Byl to pracovn´ı nebo v´ıkend nebo odpoˇcinkov´ y? • Vidˇel jsi nˇeco zaj´ımav´eho? • Vidˇel jsi nˇejak´ y zaj´ımav´ y film? • Uˇzil sis v´ıkend?

8/32

Kapitola 3

Design Jak jiˇz bylo naps´ano v pˇredchoz´ıch kapitol´ach, smyslem t´eto pr´ace je vytvoˇrit n´astroj pro sbˇer dat. Data budou slouˇzit jako podklad pro v´ yzkum technik psan´ı textu a r˚ uzn´ ych jazykov´ ych model˚ u. V t´eto kapitole je pos´ano workflow pro jednoho u ´ˇcastn´ıka experimentu. D´ale je zde podrobnˇejˇs´ı popis a n´avrh jednotliv´ ych obrazovek zobrazovan´ ych u ´ˇcastn´ık˚ um experiment˚ u. Cel´eho experimentu se bude u ´ˇcastnit experiment´ator - v aplikaci a d´ale v textu oznaˇcen´ y jako agent. Zbytek experimentu budou tvoˇrit u ´ˇcastn´ıci, kteˇr´ı budou vybr´ani na z´akladnˇe pˇr´ısluˇsn´ ych dotazn´ık˚ u (jejich n´avrh a konkr´etn´ı podoba nejsou souˇc´ast´ı t´eto pr´ace).

3.1

Workflow

Pro zjednoduˇsen´ı vezmˇeme pr˚ ubˇeh z´ısk´an´ı dat pro vyhodnocen´ı samotn´eho experimentu pro agenta a jednoho u ´ˇcastn´ıka. Pro zbyl´e u ´ˇcastn´ıky bude prob´ıhat stejnˇe, jen pokaˇzd´e s trochu jin´ ym nastaven´ım. Pro zv´ yraznˇen´ı, kter´ y krok pˇr´ısluˇs´ı komu je pouˇzito n´asleduj´ı odliˇsen´ı. Kroky, kter´e prov´ad´ı agent jsou zv´ yraznˇeny tuˇ cnˇ ea kroky, kter´e prov´ad´ı u ´ˇcastn´ık jsou zv´ yraznˇeny kurz´ıvou. 1. Agent (a) Konkr´ etn´ı nastaven´ı sezen´ı pro u ´ˇ castn´ıka - t´ emata, model, kl´ avesnice (b) Vygenerov´ an´ı odkazu pro u ´ˇ castn´ıka s definic´ı konkr´ etn´ıho sezen´ı (c) Odesl´ an´ı vygenerovan´ eho odkazu u ´ˇ castn´ıkovi ´ castn´ık 2. Uˇ (a) Kliknut´ı na odkaz, obecn´e informace k experimentu (b) Vyplnˇen´ı dvou kr´atk´ych esej´ı na dan´a t´emata (c) Potvrzen´ı a odesl´an´ı do syst´emu 3. Agent (a) Pˇ reˇ ctˇ en´ı dan´ ych esej´ı na dan´ a t´ emata (b) Pˇ r´ıprava vhodn´ ych ot´ azek pro chat s u ´ˇ castn´ıkem ´ castn´ık 4. Agent i Uˇ 9/32

3.2 OBRAZOVKY AGENTA

(a) Otevˇren´ı chatu a n´asledn´a konverzace (b) Ukonˇcen´ı chatu ´ castn´ık 5. Uˇ (a) Potvrzen´ı z´avˇereˇcn´ych informac´ı a podˇekov´an´ı

3.2

Obrazovky agenta

Tato ˇc´ast se zab´ yv´a popisem jednotliv´ ych obrazovek, se kter´ ymi bude agent pracovat v pr˚ ubˇehu cel´eho experimentu. Ke kaˇzd´e obrazovce je i pˇr´ısluˇsn´ y popis toho, co dˇel´a a proˇc je v n´astroji pouˇzita. Na kaˇzd´e str´ance jsou vˇzdy i pokyny k tomu, co m´a agent na t´eto str´ance dˇelat. Pod kaˇzdou podkapitolou je pˇripojen screen dan´e obrazovky. Vˇsechna posb´ıran´a data jsou ukl´ad´ana na serveru do soubor˚ u ve sloˇzce dan´eho u ´ˇcastn´ıka.

3.2.1

Obrazovka nastaven´ı experimentu

Jedn´a se o jednu z kl´ıˇcov´ ych obrazovek pro experiment a hlavnˇe pro jeho prvn´ı kroky. Agent zde nastavuje to, jak bude experiment pro dan´eho u ´ˇcastn´ıka prob´ıhat. Tato ˇc´ast nen´ı generov´ana automaticky, ale mus´ı b´ yt agentem ruˇcnˇe navolena - d´ıky tomu je umoˇznˇeno agentovi nadefinovat experiment tak, aby dan´emu u ´ˇcastn´ıkovi l´epe vyhovoval, pˇr´ıpadnˇe pro nˇej byl splniteln´ y. Napˇr´ıklad nen´ı u ´plnˇe ˇz´adouc´ı cht´ıt po u ´ˇcastn´ıkovi, aby bˇehem experimentu pouˇz´ıval standardn´ı numerickou kl´avesnici a on ji nemus´ı m´ıt (na dneˇsn´ıch zaˇr´ızen´ıch to nen´ı aˇz tak neobvykl´a vˇec). Na t´eto obrazovce je pˇridˇeleno u ´ˇcastn´ıkovi ˇc´ıslo, pod kter´ ym bude zaznamen´av´an cel´ y experiment (z d˚ uvod˚ u definice cel´eho experimentu nem˚ uˇze b´ yt cel´ y syst´em plnˇe automatick´ y a anonymn´ı, nicm´enˇe po doˇreˇsn´ı vlastn´ı komunikace s u ´ˇcastn´ıkem jiˇz nikde nebude pouˇzit´ y jeho kontakt, v naˇsem pˇr´ıpadˇe nejsp´ıˇse email, a vˇsechna z´ıskan´a data budou pod ˇc´ıslem, kter´e je pˇridˇeleno v t´eto f´azi). Co se t´ yˇce vlastn´ı implementace, tak se bude jednat o prvn´ı nepouˇzit´e ˇc´ıslo v ˇradˇe (prvn´ı u ´ˇcastn´ık bude m´ıt ˇc´ıslo 1 atd.). D´ale n´asleduje nastaven´ı dalˇs´ıch n´aleˇzitost´ı experimetnu pro dan´eho u ´ˇcastn´ıka. Nejdˇr´ıve se zvol´ı dvˇe t´emata z nab´ızen´ ych, na kter´a u ´ˇcastn´ık bude ps´at kr´atk´e eseje. Pot´e nastav´ı jazykov´ y model a typ kl´avesnice, jakou bude m´ıt u ´ˇcastn´ık k dispozici. Po proveden´ı vˇsech nastaven´ı uˇz jen klikne na tlaˇc´ıtko pokraˇcovat v prav´em spodn´ım rohu obrazovky a je pˇresmˇerov´an na dalˇs´ı str´anku - na obrazovku s vygenerovan´ ym odkazem. Pˇri pˇrechodu na dalˇs´ı obrazovku jsou tato nastaven´a data tak´e uloˇzena 10/32

3.2 OBRAZOVKY AGENTA

do souboru do sloˇzky pro dan´eho u ´ˇcastn´ıka. Mimo to jsou do tohoto souboru tak´e uloˇzeny odkazy, kter´e budou pozdˇeji pouˇzity pro agenta i u ´ˇcastn´ıka pro otevˇren´ı vlastn´ıho chatovac´ıho rozhran´ı.

Obr´azek 2: Obrazovka nastaven´ı experimentu

3.2.2

Obrazovka s vygenerovan´ ym odkazem

Na t´eto str´ance je pro agenta vygenerov´an odkaz s nastaven´ım experimentu. Tento odkaz poˇsle u ´ˇcastn´ıkovi, kter´emu podle nˇeho bude nastavena prvn´ı ˇc´ast experimentu. Pot´e opˇet klikne na tlaˇc´ıtko pokraˇcovat a je pˇresmˇerov´an na dalˇs´ı str´anku - na obrazovku s rozhodov´an´ım, co dˇelat d´al.

Obr´azek 3: Obrazovka s odkazem

3.2.3

Obrazovka s rozhodov´ an´ım, co dˇ elat d´ al

Na t´eto obrazovce m´a agent dvˇe moˇznosti v podobˇe kliknut´ı na tlaˇc´ıtko. Prvn´ı moˇznost´ı je nadefinovat nastaven´ı pro dalˇs´ıho u ´ˇcastn´ıka. Druhou moˇznost´ı je ukonˇcit pr´aci. V tomto pˇr´ıpadˇe je pˇresmˇerov´an na obrazovku s textem, ˇze je vˇse hotovo a m˚ uˇze zavˇr´ıt danou z´aloˇzku. Tato ˇca´st sice p˚ usob´ı nepodstatnˇe, nicm´enˇe cel´a aplikace 11/32

3.2 OBRAZOVKY AGENTA

Obr´azek 4: Obrazovka s rozhodov´an´ım, co dˇelat d´al je psan´a v php a pro sv˚ uj bˇeh vyuˇz´ıv´a SESSION, a toto je jedin´ y zp˚ usob, jak session zruˇsit bez nutnosti zav´ırat cel´e okno prohl´ıˇzeˇce.

3.2.4

Chatovac´ı rozhran´ı

Chatovac´ı obrazovka je nejd˚ uleˇzitˇejˇs´ı obrazovkou pro cel´ y experiment. Pro agenta se skl´ad´a ze tˇr´ı ˇca´st´ı. Prvn´ı ˇc´ast´ı je samotn´e chatovac´ı okno, kde se zobrazuje log toho, co agent i u ´ˇcastn´ık bˇehem cel´eho rozhovoru napsali. Napravo od chatovac´ıho okna m´a agent k dispozici okno, ve kter´em m´a seznam ot´azek souvisej´ıc´ıch se dvˇema t´ematy, o kter´ ych psal osloven´ yu ´ˇcastn´ık kr´atk´e esej a agent je pˇred t´ım, neˇz zaˇcal chat, zpracoval. Po kliknut´ı na danou ot´azku se jej´ı text dopln´ı do pol´ıˇcka urˇcen´eho na vkl´ad´an´ı textu do chatu. Agent odeˇsle takto vyplnˇenou ot´azku do chatu kliknut´ım na tlaˇc´ıtko odeslat. Pot´e poˇck´a na rekaci u ´ˇcastn´ıka a vyb´ır´a dalˇs´ı ot´azku. Agent bude m´ıt sice moˇznost vkl´adat text i z kl´avesnice a odes´ılat do chatu, ale v ide´aln´ım pˇr´ıpadˇe by to mˇel vyuˇz´ıt pouze na uv´ıt´an´ı v chatu a pot´e na rozlouˇcen´ı se s u ´ˇcastn´ıkem. Zbylou ˇca´st rozhovoru by pro agenta mˇely pokr´ yt pˇredpˇriraven´e ot´azky na dan´a t´emata. Pod chatem je jeˇstˇe tl´aˇc´ıtko na ukoˇcen´ı session. Po jeho stisknut´ı je agent odhl´aˇsen z chatu a cel´a session je pro jeho stranu ukonˇcen´a. Na obrazovce je jeˇstˇe tlaˇc´ıtko na ukonˇcen´ı chatu. Pot´e, co s u ´ˇcastn´ıkem projde vˇse, co s n´ım proj´ıt mˇel, klikne agent na tlaˇc´ıtko ukonˇcit chat. Toto tlaˇc´ıtko zavˇre chatovac´ı rozhran´ı a na stranˇe agenta je u ´spˇeˇsnˇe ukonˇcena php session.

12/32

´ CASTN ˇ ´IKA 3.3 OBRAZOVKY U

Obr´azek 5: Chatovac´ı rozhran´ı - agent

3.3

Obrazovky u ´ˇ castn´ıka

Tato ˇca´st se zab´ yv´a popisem jednotliv´ ych obrazovek, se kter´ ymi bude u ´ˇcastn´ık pracovat v pr˚ ubˇehu cel´eho experimentu. Ke kaˇzd´e obrazovce je i pˇr´ısluˇsn´ y popis toho, co dˇel´a a proˇc je v n´astroji pouˇzita. Na kaˇzd´e str´ance jsou vˇzdy i pokyny k tomu, co m´a uˇzivatel na t´eto str´ance dˇelat. Pod kaˇzdou kapitolou je pˇripojen screen dan´e obrazovky. Vˇsechna data jsou ukl´ad´ana do soubor˚ u na serveru ve sloˇzce vytvoˇren´e pro dan´eho u ´ˇcastn´ıka. Nav´ıc pˇri samotn´em chatu je kaˇzd´ y stisk kl´avesy zaznamen´av´an a ukl´ad´an do datab´aze pro pozdˇejˇs´ı vyhodnocov´an´ı dat.

3.3.1

Uv´ıtac´ı obrazovka s popisem experimentu

Na t´eto obrazovce je u ´ˇcastn´ık podrobnˇe informov´an o experimentu, kter´eho se pr´avˇe u ´ˇcastn´ı. Pot´e, co je s n´ım sezn´amen, se potvrzen´ım dostane na dalˇs´ı obrazovku - obrazovka pro vloˇzen´ı esej´ı.

13/32

´ CASTN ˇ ´IKA 3.3 OBRAZOVKY U

Obr´azek 6: Uv´ıtac´ı obrazovka s popisem experimentu

3.3.2

Obrazovka na vkl´ ad´ an´ı esej´ı

Na t´eto obrazovce se u ´ˇcastn´ıkovi zobrazuj´ı dvˇe textov´a pole na vloˇzen´ı dvou kr´atk´ ych esej´ı (cca 200 slov) na dan´a t´emata. T´emata jsou rozliˇsena nadpisem a nad kaˇzd´ ym textov´ ym polem jsou pomocn´e ot´azky a rady, kter´e slouˇz´ı jako pom˚ ucka pro u ´ˇcastn´ıka v naps´an´ı textu na dan´e t´ema. Pot´e, co u ´ˇcastn´ık vypln´ı obˇe t´emata, klikne na tlaˇc´ıtko pokraˇcovat a je pˇresmˇerov´an na dalˇs´ı str´anku. Na t´eto str´ance je informov´an o tom, ˇze se nejdˇr´ıve mus´ı zpracovat j´ım zadan´a data. Jakmile to bude hotov´e, bude informov´an o dalˇs´ım postupu. Tato obrazovka tak´e regul´ernˇe ukonˇc´ı session bez nutnosti zav´ırat prohl´ıˇzeˇc.

Obr´azek 7: Obrazovka na vkl´ad´an´ı esej´ı

3.3.3

Chatovac´ı rozhran´ı

Samotn´e chatovac´ı rozhran´ı je podobn´e tomu, kter´e pouˇz´ıv´a agent. Vlastn´ı struktura je obdobn´a, jako pro agenta, nicm´enˇe z´aleˇz´ı na konkr´etn´ım nastaven´ı experimentu. Hl´avn´ı ˇca´st´ı je opˇet chatovac´ı okno, kde se zazanamen´av´a cel´a konverzace. V prav´e ˇc´asti se nach´az´ı bud’ okno s doprovodn´ ymi informacemi o tom, co m´a u ´ˇcastn´ık dˇelat nebo samotn´e kl´avesnice pro vkl´ad´an´ı textu (scannovac´ı nebo kl´avesnice na obrazovce - viz Obr´azek 8, na kter´em je screen obrazovky u ´ˇcastn´ıka s kl´avesnic´ı 14/32

´ CASTN ˇ ´IKA 3.3 OBRAZOVKY U

na obraozvce). Na z´akladˇe toho, jak´a je metoda vstupu, m´a u ´ˇcastn´ık k dispozici podmnoˇzinu ovl´adac´ıch prvk˚ u nadefinovan´ ych v r´amci konkr´etn´ı definice experimentu. Samotn´ y chat prob´ıh´a tak, ˇze u ´ˇcastn´ık ˇcek´a na ot´azku od agenta. Pot´e, co dostane ot´azku na n´ı nˇejak odpov´ı a takhle se to opakuje, dokud agent nepoloˇz´ı posledn´ı ot´azku, na kterou u ´ˇcastn´ık odpov´ı. Pod chatem je jeˇstˇe tl´aˇc´ıtko na ukoˇcen´ı chatu. Po jeho stisknut´ı je u ´ˇcastn´ık pˇresmˇerov´an na posledn´ı obrazovku - podˇekov´an´ı a ukonˇcen´ı.

Obr´azek 8: Chatovac´ı rozhran´ı - kl´avesnice na obrazovce

3.3.4

Podˇ ekov´ an´ı a ukonˇ cen´ı

Tato obrazovka je u ´plnˇe posledn´ı obrazovkou, se kterou se u ´ˇcastn´ık setk´a. Je na n´ı podˇekov´an´ı a z´avˇereˇcn´e doplnˇen´ı informac´ı k samotn´emu experimentu, kter´eho se pr´avˇe u ´ˇcastnil. Po potvrzen´ı je pro u ´ˇcastn´ıka u ´spˇeˇsnˇe ukonˇcena session a do pˇr´ısluˇsn´ ych m´ıst zaps´ano, ˇze u ´ˇcastn´ık u ´spˇeˇsnˇe zakonˇcil cel´ y experiment.

Obr´azek 9: Obrazovka podˇekov´an´ı a ukonˇcen´ı

15/32

Kapitola 4

Implementace Tato kapitola se zab´ yv´a samotn´ ym popisem pouˇzit´ ych technologi´ı a podrobnˇejˇs´ım popisem vlastn´ı implementace cel´eho webov´eho rozhran´ı. Pro zjednoduˇsen´ı oznaˇcen´ı bude pro tuto kapitolu pro webov´e rozhran´ı pouˇzito oznaˇcen´ı Tool. Cel´ y web je optimalizov´an pro prohl´ıˇzeˇce Google Chrome a Mozzila Firefox.

4.1

Pouˇ zit´ e technologie, knihovny, frameworky a n´ astroje

Pro v´ yvoj webu bylo pouˇzito IDE PhpStorm 8.0.1. Jako dalˇs´ı byl vyuˇz´ıv´an EasyPHP-DevServer, kter´ y slouˇz´ı k simulaci webov´eho serveru na localhostu a v r´amci tohoto n´astroje byl vyuˇz´ıv´an jeˇstˇe PhpMyAdmin pro spr´avu a pr´aci s datab´az´ı.

4.1.1

Technologie

• PHP: verze 5.3 a vyˇsˇs´ı [3] • HTML5 [4] • CSS3 [5] • JavaScript [6] • AJAX [7] • MySQL [8]

Jedn´a se o klasick´e a nejrozˇs´ıˇrenˇejˇs´ı technologie pro v´ yvoj webu. Jejich moˇznosti a specifikace se uk´azali jako vyhovuj´ıc´ı a dostaˇcuj´ıc´ı pro tento typ experimentu. PHP slouˇz´ı jako ˇr´ıd´ıc´ı n´astroj cel´eho webu. Je pouˇzito k urˇcen´ı, jak´a obrazovka se m´a pouˇz´ıt. Dalˇs´ı jeho silnou str´ankou vyuˇzitou pro cel´ y web jsou session promˇenn´e, ve kter´ ych se pˇred´avaj´ı informace na jednotliv´e str´anky. D´ale je vyuˇzito na komunikaci s datab´az´ı jako takovou. Samotn´a datab´aze je ˇreˇsena pˇres MySQL a jedn´a se o jednu tabulku (podrobnˇeji n´ıˇze v textu). 16/32

´ 4.2 DATABAZE

Rozloˇzen´ı jednotliv´ ych str´anek a jejich grafick´a podoba je zajiˇstˇena za vyuˇzit´ı HTML5, CSS3 a JavaScriptu. Jedn´a se o z´akladn´ı n´astroje na v´ yvoj webu, se kter´ ymi pracuje vˇetˇsina webov´ ych str´anek. AJAX je vyuˇzit na odes´ıl´an´ı dat asynchronˇe bez nutnosti znovunaˇc´ıtat celou webovou str´anku - bez pouˇzit´ı AJAXu by nebylo moˇzn´e napˇr´ıklad v pr˚ ubˇehu pr´ace pos´ılat a ukl´adat z´aznamy do datab´aze.

4.1.2

Frameworky, knihovny a dalˇ s´ı zdroje

Cel´ y web je postaven na respozivn´ım frameworku Bootstrap [9], kter´ y je k dispozici na voln´e staˇzen´ı. Jedn´a se o nejrozˇs´ıˇrenˇejˇs´ı framework, kter´ y usnadˇ nuje pr´aci pˇri v´ yvoji webu. Pro tuto aplikaci je z nˇeho hlavnˇe vyuˇzit defaultn´ı skin. Layout cel´e aplikace hojnˇe vyuˇz´ıv´a jedn´e z nejpodstatnˇejˇs´ıch ˇca´st´ı cel´eho Bootstrapu - a to v definici gridu. Grid je navrˇzen tak, aby byl vhodn´ y pro ˇsirokou ˇsk´alu zobrazovac´ıch zaˇr´ızen´ı. Z Bootstrapu je vyuˇzit jeho defaultn´ı skin - jedn´a se neutr´aln´ı ˇsedou barvu. Cel´ y web tedy p˚ usob´ı neutr´alnˇe a jeho barevn´e sch´ema by nemˇelo pˇri jeho pouˇzit´ı nijak odpout´avat pozornost od toho, co se po uˇzivateli ˇza´d´a. D˚ uleˇzitou ˇc´ast´ı cel´eho webu je i knihovna jQuery [10], kter´a slouˇz´ı pro manipulaci s DOMem a odchyt´av´an´ı ud´alost´ı. Jej´ı silnou str´ankou je i to, ˇze zejdnoduˇsuje pouˇzit´ı AJAXu. N´azornou uk´azkou pouˇzit´ı jQuery v aplikaci je vyuˇzit´ı pˇri ovl´ad´an´ı r˚ uzn´ ych typ˚ u kl´avesnic - cel´e ˇr´ızen´ı toho, jak´e kl´avesy jsou k dispozici, kl´avesnice na obrazovce, pˇr´ıpadnˇe scannovac´ı kl´avesnice, je obstar´av´ano pr´avˇe za pomoc´ı jQuery. Dalˇs´ı pouˇzitou knihovnou je typeahead.js [11]. Jedn´a se o knihovnu, s jej´ıˇz pomoc´ı je implementov´ano naˇsept´av´an´ı textu. Pro rozˇs´ıˇren´ı funkˇcnosti webu a jeho snazˇs´ı ovl´ad´an´ı je vyuˇzita jeˇstˇe knihovna Underscore.js [12], kter´a v pˇr´ıpadˇe t´eto pr´ace slouˇz´ı jen jako doplˇ nen´ı jQuery na ovl´ad´an´ı technologie T9. V aplikaci je jeˇstˇe pouˇzita scannovac´ı kl´avesnice, kter´a byla vytvoˇrena pro u ´ˇcely jin´eho experimentu na FELu. Jej´ımi autory jsou Brandon Butler, Adam Sporka a Ondˇrej Pol´aˇcek. Pro u ´ˇcely tohoto experimentu byl pouˇzit jej´ı z´akladn´ı n´avrh a funkˇcnost a upraven dle potˇreb experimentu. Cel´ y web byl samozˇrejmˇe tovˇren s pomoc´ı ofici´aln´ı dokumentace ke kaˇzd´e technologii. Jako nedoceniteln´ y n´astroj byl samozˇrejmˇe vyuˇz´ıv´an web stackoverflow.com [13], na kter´em jsem pˇri tvorbˇe cel´eho ˇcasu webu naˇsel spoustu uˇziteˇcn´ ych odpovˇed´ı na implementaˇcn´ı ot´azky nˇekter´ ych probl´em˚ u a technik.

4.2

Datab´ aze

Cel´a aplikace bˇeˇz´ı nad datab´az´ı, do kter´e jsou ukl´ad´ana data z chatu. Datab´aze je standardn´ı MySql datab´aze. Je tvoˇren´a jednou tabulkou, do kter´e se ukl´adaj´ı data z´ıskan´a bˇehem chatu. 17/32

4.3 STRUKTURA PROJEKTU

Tabulka se skl´ad´a z pˇeti sloupc˚ u. Prvn´ım sloupec je pro uloˇzen´ı ˇcasu (timestamp), kdy dan´a akce probˇehla. Druh´ y sloupec je id konkr´etn´ıho z´aznamu - slouˇz´ı jako prim´arn´ı kl´ıˇc. Ve tˇret´ım sloupci je zaznamen´ano, ke kter´emu participantovi se z´aznam vztahuje - pouˇzito ˇc´ıslo, kter´e mu je automaticky pˇridˇeleno pˇri z´akladn´ım nastavov´an´ı. Ve ˇctvrt´em sloupci jsou uchov´av´any informace o tom, jak´ y data jsou v dan´em ˇra´dku uloˇzena - jestli se jedn´e o stisknutou kl´avesu, vkl´adan´ y text nebo nˇeco jin´eho. V p´at´em sloupci je samotn´ y zaznamen´avan´ yu ´daj. SQL skript na vytvoˇren´ı datab´aze je na pˇriloˇzen´em CD na konci pr´ace ve sloˇzce SQL.

4.3

Struktura projektu

Cel´ y projekt je rozloˇzen do nˇekolika pˇr´ısluˇcn´ ych podsloˇzek. Kaˇzd´a podsloˇzka je vytvoˇrena tak, aby obalovala jeden konkr´etn´ı logick´ y celek (napˇr´ıklad rozhran´ı pro Agenta nebo rozhran´ı pro u ´ˇcastn´ıka). Koˇrenov´ y adres´aˇr je rozdˇelen na 4 podsloˇzky: Agent (webov´e rozhran´ı pro Agenta), Target (webov´e rozhran´ı pro u ´ˇcastn´ıka), CollectedData (posb´ıran´a data, kter´a budou pouˇzita pro v´ yzkum - tato sloˇzka slouˇz´ı pouze jako z´aloha, protoˇze podrobnˇejˇs´ı informace jsou v datab´azi) a Topics (v t´eto sloˇzce jsou pomocn´e ot´azky pro jednotliv´a t´emata pro u ´ˇcastn´ıky). Vˇsechny zdrojov´e k´ody jsou k dispozici na pˇriloˇzen´em CD na konci t´eto pr´ace ve sloˇzce Tool.

4.3.1

Agent

Protoˇze konkr´etn´ıch soubor˚ u zdrojov´ ych k´odu je vcelku dost, v t´eto ˇcasti budou pops´any jen hlavn´ı ˇca´sti rozhran´ı, zbyl´e budou shrnuty v posledn´ı podkapitole najednou.

4.3.1.1

index.php

Nejd˚ uleˇzitˇejˇs´ı souˇca´st Toolu pro Agentsk´e rozhran´ı. Jej´ım u ´kolem je nadefinovat webovou str´anku jako celek a zajistit, aby byla zobrazena poˇzadovan´a str´anka. Cel´a aplikace je postaven´a na pouˇzit´ı session pro uchov´an´ı dat. Zvoleno je session, protoˇze data nejsou uchov´av´ana jako cookies na klientsk´e stranˇe, ale pˇr´ımo na serveru. ´ Ukolem indexu je poskl´adat spr´avnou webovou str´anku podle requestu. Podle parametr˚ u, konkr´etnˇe parametru ’chat’ v url, je urˇceno, jestli agent potˇrebuje rozhran´ı pro chat (jen jedna str´anka) nebo potˇrebuje rozhran´ı pro definici sezen´ı. V pˇr´ıpadˇe definice index.php urˇcuje jak´a str´anka se m´a zobrazit (bud’ popoˇradˇe nebo posledn´ı otevˇrenou, kter´a je uloˇzena v session). Definice jednotliv´ ych str´anek je v 18/32

4.3 STRUKTURA PROJEKTU

dalˇs´ım souboru a bude pops´ana n´ıˇze. D´ale se star´a o to, aby byly na kaˇzdou str´anku vloˇzeny vˇsechny n´aleˇzitosti webov´e str´anky (verze html, hlaviˇcka, tˇelo) a nahr´any vˇsechny nadefinovan´e css styly a potˇrebn´e skriptov´e soubory.

4.3.1.2

main.php

Main.php se skl´ad´a z nˇekolika funkc´ı. Je navrˇzena tak, aby kaˇzd´a funkce vkl´adala obsah jedn´e str´anky. Jednotliv´e funkce jsou vol´any z indexu dle potˇreby. Vˇetˇsina funkc´ı vkl´ad´a jen html elementy a je doplˇ nena o pˇr´ıpadn´e skritpy nebo naˇc´ıt´an´ı/ukl´ad´an´ı do soubor˚ u dle potˇreby. Do soubor˚ u jsou ukl´ad´any definice jednotliv´ ych experiment˚ u a odkazy na pozdˇejˇs´ı otevˇren´ı chatu a ze soubor˚ u jsou naˇc´ıt´any napˇr´ıklad ot´azky do samotn´eho chatu. Pro samotn´ y experiment je nejd˚ uleˇzitˇejˇs´ı funkce mainscreen(), kter´a se star´a o vloˇzen´ı a ovl´ad´an´ı samotn´eho chatovac´ıho okna. Na str´ance jsou vyobrazeny tˇri bloky. Prvn´ı je okno na vkl´ad´an´ı textu s tlaˇc´ıtkem odeslat. Druh´ ym je okno s pˇredpˇripraven´ ymi ot´azkami. Tyto ot´azky jsou vybr´any podle t´emat, na kter´a reagoval participant v nastaven´ı sezen´ı. Kliknut´ım na nˇe se dopln´ı do okna na vkl´ad´an´ı textu a agent je pot´e m˚ uˇze odeslat. Tˇret´ı je okno samotn´eho chatu, ve kter´em se zorazuje cel´a historie konverzace. Kaˇzd´a zpr´ava je pomoc´ı javascriptu, respektive AJAXu, ukl´ad´ana do souboru log.html na serveru. Obsah chatovac´ıho okna je naˇc´ıt´an pr´avˇe z tohoto logovac´ıho souboru. Pro uˇzivatele nedoch´az´ı k ˇza´dn´ ym prodlev´am v zobrazen´ı, protoˇze je kaˇzd´ ych 70ms obnovov´an.

4.3.1.3

Topics

Ve struktuˇre agentsk´ ych k´odu je d˚ uleˇzit´a jeˇstˇe sloˇzka topics, ve kter´e jsou uloˇzeny ot´azky, kter´e se zobrazuj´ı agentovi v chatu. Dle potˇreby je m˚ uˇze agent upravovat.

4.3.1.4

Ostatn´ı

Zbytek agentsk´e ˇca´sti sest´av´a z velk´eho mnoˇzstv´ı doprovodn´ ych a pomocn´ ych soubor˚ u, z nichˇz vˇetˇsina nen´ı aˇz tak zaj´ımav´a, aby dostala vlastn´ı podkapitolu. Nicm´enˇe zde je popis jeˇstˇe nˇekolika z nich. Za zm´ınku stoj´ı podsloˇzka htmlparts - v n´ı jsou souˇc´asti webu, kter´e jsou spoleˇcn´e pro kaˇzdou str´anku. Pomoc´ı nich se vkl´ad´a head samotn´emu html, hlaviˇckov´a ˇca´st a patiˇcka vlastn´ı str´anky - jejich smysl je pouze informativn´ı. Dalˇs´ımi soubory jsou post.php, readFile.php a writeFile.php. Kaˇzd´ y z tˇechto soubor˚ u obsahuje funkce, kter´e se staraj´ı (jak n´azvy napov´ıdaj´ı) o pr´aci a komunikaci se soubory na serveru - tovrbu sloˇzky a definice pro kaˇzd´eho u ´ˇcastn´ıka, zapisov´an´ı a naˇc´ıt´an´ı logu kaˇzd´eho chatu. 19/32

4.3 STRUKTURA PROJEKTU

Agentsk´a ˇc´ast jeˇstˇe obsahuje skript, kter´ y se star´a o manipulaci s formul´aˇrov´ ymi prvky a vyuˇz´ıvan´ ymi tlaˇc´ıtky. Samozˇrejmˇe je zahrnut soubor style.css, ve kter´em jsou dodefinov´any vlastn´ı styly, pˇr´ıpadnˇe upraveny styly nadefinovan´e Bootstrapem.

4.3.2

´ castn´ık Uˇ

Protoˇze konkr´etn´ıch soubor˚ u zdrojov´ ych k´odu je vcelku dost, v t´eto ˇcasti budou pops´any jen hlavn´ı ˇca´sti rozhran´ı, zbyl´e budou shrnuty v posledn´ı podkapitole najednou.

4.3.2.1

index.php

´ castnick´e rozhran´ı. Jej´ım u Nejd˚ uleˇzitˇejˇs´ı souˇc´ast Toolu pro Uˇ ´kolem je nadefinovat webovou str´anku jako celek a zajistit, aby byla zobrazena poˇzadovan´a str´anka. Jej´ım u ´kolem je krom ˇr´ızen´ı zobrazen´ı spr´avn´e str´anky taky zpracov´an´ı a spr´avn´e vyuˇzit´ı dat, kter´a pˇrijdou v r´amci requestu na danou str´anku. ´ Ukolem indexu je poskl´adat spr´avnou webovou str´anku podle requestu. Podle parametr˚ u, konkr´etnˇe parametru ’chat’ v url je urˇceno, jestli u ´ˇcastn´ıku bude vyuˇz´ıvat rozhran´ı pro vyplˇ nov´an´ı esej´ı nebo jestli bude vyuˇz´ıvat rozhran´ı pro samotn´ y chat. Vˇsechna data, kter´a pˇrijdou v r´amci requestu, jsou ukl´ad´ana do session promˇenn´ ych a konstant. Na z´akladˇe nich je urˇceno, kterou str´anku m´a prohl´ıˇzeˇc zobrazit. D´ale se star´a o to, aby byly na kaˇzdou str´anku vloˇzeny vˇsechny n´aleˇzitosti webov´e str´anky (verze html, hlaviˇcka, tˇelo) a nahr´any vˇsechny nadefinovan´e css styly a potˇrebn´e skriptov´e soubory.

4.3.2.2

main.php

Main.php se skl´ad´a z nˇekolika funkc´ı. Je navrˇzena tak, aby kaˇzd´a funkce vkl´adala obsah jedn´e str´anky. Jednotliv´e funkce jsou vol´any z indexu dle potˇreby. Vˇetˇsina funkc´ı vkl´ad´a jen html elementy a je doplˇ nena o pˇr´ıpadn´e skritpy nebo naˇc´ıt´an´ı/ukl´ad´an´ı do soubor˚ u dle potˇreby. Do soubor˚ u jsou v pˇr´ıpadˇe u ´ˇcastn´ıka ukl´ad´any vyplnˇen´e eseje na dan´a t´emata. Oproti agentsk´e ˇc´asti, je tento soubor o nˇeco obs´ahlejˇs´ı a obsahuje v´ıc funkc´ı na vkl´ad´an´ı doprovodn´ ych informativn´ıch obrazovek a text˚ u, kter´e nejsou pro agentskou ˇc´ast potˇrebn´e. Ned˚ uleˇzitˇejˇs´ı jsou zde funknce topics() a mainscreen(). Funkce topics() vkl´ad´a str´anku, na kter´e m´a u ´ˇcastn´ık za u ´kol vyplnit eseje na dan´a t´emata, kter´e jsou kl´ıˇcov´e pro vyhodnocen´ı vlastn´ıho experimentu. Funkce mainscreen() se star´a o vloˇzen´ı samotn´eho chatovac´ıho okna. Na str´ance jsou vyobrazeny tˇri bloky. Chatovac´ı okno, okno pro zobrazen´ı textu pˇred odesl´an´ım 20/32

4.3 STRUKTURA PROJEKTU a jako tˇret´ı jsou vud’ pokyny pro u ´ˇcastn´ıka nebo dan´a kl´avesnice pro vkl´ad´an´ı textu (scannovac´ı nebo na kl´avesnice na obrazovce). V r´amci t´eto funkce je rozhodnuto, kter´ y typ vstupu je pouˇzit a podle toho zavol´any pˇr´ısluˇsn´e funkce. Jinak plat´ı to sam´e, co pro agenta a to, ˇze kaˇzd´a zpr´ava je pomoc´ı javascriptu, respektice AJAXu, ukl´ad´ana do souboru log.html. Obsah chatovac´ıho okna je naˇc´ıt´an pr´avˇe z tohoto logovac´ıho souboru. Pro uˇzivatele nedoch´az´ı k ˇz´adn´ ym prodlev´am v zobrazen´ı, protoˇze je kaˇzd´ ych 70ms obnovov´an. 4.3.2.3

Kl´ avesnice

Velice podstatnou ˇc´ast Toolu pro u ´ˇcastnick´e rozhran´ı jsou jednotliv´e kl´avesnice. Ve sloˇzce keyboards jsou funkce a skripty, kter´e se staraj´ı o zobrazen´ı a ovl´ad´an´ı jednotliv´ ych kl´avesnic. Pro standardn´ı kl´avesnici nejsou ˇz´adn´a omezen´ı. Pro kl´avesnici na obrazovce je odst´ınˇena funkˇcnost standardn´ı kl´avesnice - keydown ud´alosti jsou odchyt´av´any, ale nejsou vyhodnocov´any. Pro scannovac´ı kl´avesnici je funkˇcn´ı pouze jedna kl´avesa a tou je mezern´ık, kter´ y slouˇz´ı jako jej´ı ovl´adac´ı prvek. Velice d˚ uleˇzitou funkˇcnost´ı jednotliv´ ych skript˚ u je, ˇze kaˇzd´e p´ısemno vloˇzen´e u ´ˇcastn´ıkem je pomoc´ı AJAXu odesl´ano do skriptu, kter´ y ho, vˇcetnˇe aktu´aln´ı podoby zobrazen´eho slova, zap´ıˇse do datab´aze. Kaˇzd´a nastaven´ı experiementu m´a k dispozici vlastn´ı nastaven´ı a zobrazen´ı pˇr´ısluˇsn´e kl´avesnice, kter´a je vybr´ana na z´akladˇe toho, jak´ y pˇrijde poˇzadavek na experiment. 4.3.2.4

database.php

Database.php je soubor, kter´ y obstar´av´a komunikaci se samotnou mysql datab´az´ı. Pomoc´ı nˇeho je u ´ˇcastn´ık pˇripojen do datab´aze a je do n´ı odes´ıl´ano vˇse, co se podstatn´e pro experiment. Jsou zde funkce na tvorbu vkl´ad´ac´ıch sql dotaz˚ u, vloˇzen´ı definice nov´eho experimentu a vkl´ad´an´ı z´aznam˚ u o jednotliv´ ych stisknut´ ych kl´aves´ach. 4.3.2.5

T9

Ve struktuˇre Toolu pro u ´ˇcastnickou ˇca´st je samostatn´a podsloˇzka, kter´a zapouzdˇruje implementaci algoritmu T9. Pomoc´ı javasriptu je naimplementov´an algoritmus pro T9. Jeho modifikac´ı je oproti p˚ uvodn´ı verzi to, ˇze z´aroveˇ n prohled´av´a jeˇstˇe slovn´ık vytvoˇren´ y pro u ´ˇcely tohoto cel´eho experimentu a pokud zde najde vyhovuj´ıc´ı slovo, je upˇrednostnˇen oproti slovu z cel´eho slovn´ıku pouˇz´ıvan´eho standardn´ım algoritmem T9. Algoritmus vyuˇz´ıv´a stromovou strukturo pro rychlejˇs´ı zpracov´an´ı d´at. Konkr´etnˇe je pouˇzita struktura Trie - prefixov´ y strom. Tato struktura je zvolena proto, ˇze nen´ı ’ tak pamˇet ovˇe n´aroˇcn´a a jej´ı hlavn´ı v´ yhodou pro pouˇzit´ı na webu je, ˇze je rychl´a.

21/32

4.3 STRUKTURA PROJEKTU

4.3.2.6

Ostatn´ı

Zbytek u ´ˇcastnick´e ˇca´sti je tvoˇren jeˇstˇe velkou spoustou doprovodn´ ych soubor˚ u. Nebudeme je zde sice zmiˇ novat vˇsechny, ale na p´ar z nich se pod´ıv´ame jeˇstˇe v r´amci t´eto podkapitoly. SubmitKey.php slouˇz´ı pro komunikaci po stisknut´ı kl´avesy. AJAXov´a funkce poˇsle metodou POST request na soubor submitKey.php, ve kter´em se request zpracuje a zavol´a se funkce, kter´a takto z´ıskan´a data zap´ıˇse rovnou do datab´aze. Za zm´ınku stoj´ı podsloˇzka htmlparts - v n´ı jsou souˇc´asti webu, kter´e jsou spoleˇcn´e pro kaˇzdou str´anku. Pomoc´ı nich se vkl´ad´a head samotn´emu html, hlaviˇckov´a ˇca´st a patiˇcka vlastn´ı str´anky - jejich smysl je pouze informativn´ı. Dalˇs´ımi soubory jsou post.php, readTopicDetail.php a writeFile.php. Kaˇzd´ y z tˇechto soubor˚ u obsahuje funkce, kter´e se staraj´ı (jak n´azvy napov´ıdaj´ı) o pr´aci a komunikaci se soubory na serveru - z´apis a naˇc´ıt´an´ı logu, naˇcten´ı detailu jednotliv´ ych t´emat a z´apis vyplnˇen´ ych esej´ı do pˇr´ısluˇsn´ ych soubor˚ u na serveru. ´ castnick´a ˇca´st jeˇstˇe obsahuje skript, kter´ Uˇ y se star´a o manipulaci s formul´aˇrov´ ymi prvky a vyuˇz´ıvan´ ymi tlaˇc´ıtky. D´ale je zde skript, kter´ y se star´a o to, aby kaˇzd´e zm´aˇcknut´ı kl´avesy (tlaˇc´ıtka) bˇehem chatu bylo odesl´ano do datab´aze. Samozˇrejmˇe je zahrnut soubor style.css, ve kter´em jsou dodefinov´any vlastn´ı styly, pˇr´ıpadnˇe upraveny styly nadefinovan´e Bootstrapem.

4.3.3

Posb´ıran´ a data

Ve sloˇzce CollectedData jsou ukl´ad´any sloˇzky pro jednotliv´e u ´ˇcastn´ıky - ˇc´ıslov´any od 1. V kaˇzd´e sloˇzce je uloˇzen textov´ y soubor, ve kter´em je uloˇzeno nastaven´ı experimentu pro dan´eho u ´ˇcastn´ıka. V tomto souboru jsou tak´e uloˇzeny odkazy na pozdˇejˇs´ı otevˇren´ı samotn´eho chatu jak pro agenta, tak u ´ˇcastn´ıka. D´ale je v kaˇzd´e sloˇzce zaznamen´av´an log cel´eho chatu pro pozdˇejˇs´ı pˇr´ıpadn´e zpracov´an´ı a ovˇeˇren´ı dat. U kaˇzd´eho u ´ˇcastn´ıka jsou tak´e zaznamen´any a do textov´ ych soubor˚ u uloˇzeny jejich kr´atk´e eseje na dan´a t´emata. Pokud u ´ˇcastn´ık u ´spˇeˇsnˇe projde cel´ ym experimentem, po jeho ukonˇcen´ı je zde vytvoˇren z´avˇereˇcn´ y textov´ y soubor, ve kter´em je potvrzen´ı, ˇze vˇse probˇehlo v poˇra´dku.

4.3.4

T´ emata

Posledn´ı sloˇzkou ve struktuˇre Toolu je sloˇzka Topics. V t´eto sloˇzce jsou nadefinov´any pomocn´e ot´azky na dan´a t´emata, kter´a slouˇz´ı u ´ˇcastn´ıkovi jako n´apovˇeda k tomu, co m´a ps´at. Je zde nˇekolik textov´ ych soubor˚ u, z nichˇz kaˇzd´ y odpov´ıd´a jednomu t´ematu. Pojmenov´an´ı t´ematu je z´aroveˇ n i jm´enem dan´eho souboru.

22/32

´ ˇ EN ˇ ´I 4.4 NAVOD NA SPUST

4.4

N´ avod na spuˇstˇ en´ı

Jelikoˇz se jedn´a o webovou, jsou dvˇe moˇznosti jak aplikaci spustit a vyzkouˇset nahr´an´ı na webov´ y server nebo spuˇstˇen´ı pˇres prostˇred´ı, kter´e webov´ y server simuluje Prvn´ım zp˚ usobem je nahr´an´ı zdrojov´ ych k´od˚ u na webov´ y server. Podm´ınkou je, ˇze mus´ı dan´ y server podporovat v´ yˇse zm´ınˇen´e technologie v dan´ ych verz´ıch a m´ıt moˇznost spustit datab´azi (v datab´azi pak staˇc´ı spustit pˇriloˇzen´ y skript a cel´a aplikace bude fungovat spr´avnˇe). Tato moˇznost vˇsak nemus´ı b´ yt pˇr´ıstupn´a pro kaˇzd´eho na vyzkouˇsen´ı. Druhou metodou, kter´a je pˇr´ıstupnˇejˇs´ı, je pouˇz´ıt n´astroj, kter´ y webov´e prostˇred´ı simuluje. Bˇehem v´ yvoje byl pouˇz´ıv´an EasyPHP-DevServer, kter´ y simuluje webov´ y server. Jeho pouˇzit´ı je snadn´e, protoˇze se pouze nainstaluje, nahraj´ı se zdrojov´e k´ody do pˇr´ısluˇsn´e sloˇzky a cel´a aplikace je pot´e pˇr´ıstupn´a na pˇr´ısluˇsn´e adrese na localhostu. Jeho dalˇs´ı v´ yhodou je, ˇze m´a v sobˇe k dispozici rovnou plug-in na phpMyAdmin, pˇres kter´ y se spravuj´ı datab´aze. Staˇc´ı tedy jen otevˇr´ıt phpMyAdmin a v nˇem spustit pˇriloˇzen´ y SQL skript. Jistˇe existuj´ı i jin´e zp˚ usoby na simulaci php serveru na podobn´e b´azi. Toto je pouze inspirace, jak pˇr´ıpadnˇe k´ody na pˇriloˇzen´em CD zprovoznit pro vyzkouˇsen´ı. Pro oba zp˚ usoby je d˚ uleˇzit´e jeˇstˇe doplnit, ˇze je potˇreba vypnout zobrazov´an´ı notifikac´ı na serveru (v souboru php.ini). Cel´a aplikace vyuˇz´ıv´a session a v nˇekter´ ych situac´ıch zobrazuje php server notifikace, kter´e jsou bohuˇzel pˇri souˇcasn´em n´avrhu nutn´e. Tyto notifikace sice nebr´an´ı ve spr´avn´em zobrazen´ı str´anky, nicm´enˇe p˚ usob´ı jako ruˇsiv´ y element.

23/32

Kapitola 5

Testov´ an´ı Pro cel´e webov´e rozhran´ı je kritick´e, aby bylo plnˇe funkˇcn´ı, protoˇze po rozesl´an´ı u ´ˇcastn´ık˚ um uˇz nen´ı moc man´evrovac´ıho prostoru pro pˇr´ıpadnou opravu/´ upravu k´odu samotn´eho programu. Dalˇs´ı velice podstatnou informac´ı pro experiment je, jak vlastnˇe n´astroj funguje a jestli funguje tak, jak bylo navrˇzeno a je poˇzadov´ano. Pro u ´ˇcely naˇseho experimentu byl osloven dobrovoln´ık, kter´ y se zhostil role u ´ˇcastn´ıka v jednom sezen´ı v trochu kratˇs´ı podobˇe. S t´ımto dobrovoln´ıkem se proˇslo cel´e workflow tak, jak je navˇzeno. V t´eto kapitole je posp´an cel´ y pr˚ ubˇeh, vˇcetnˇe zpˇetn´e vazby od dobrovoln´ıka k n´astroji jako takov´emu.

5.1

Agentsk´ aˇ c´ ast

Prvn´ım krokem je nadefinovat vlastn´ı podobu sezen´ı s u ´ˇcastn´ıkem. Pro pilotn´ı test bylo zvoleno toto nastaven´ı: • T´ema 1: filmy • T´ema 2: v´ıkend • Typ kl´avesnice: standardn´ı • Metoda: T9 Po potvrzen´ı t´eto definice se zobrazila obrazovka s pokyny odeslat vygenerovan´ y odkaz u ´ˇcastn´ıkovi. Odkaz byl tedy odesl´an a agentsk´ y prvn´ı krok splnˇen.

5.2

Uˇ zivatelsk´ aˇ c´ ast

´ castn´ık u Uˇ ´spˇeˇsnˇe vyplnil obˇe t´emata n´asleduj´ıc´ıme texty. Filmy: How often do you wonder: “Have I seen this movie before?” A lot has been said about stereotypes in blockbusters, however, it is unlikely we should see any actual demand for a change. For it is precisely the same old Sandra Bullock, hitting a rough patch in her complicated life and finding love when she least expects it, that draws the masses into theaters. Movies meant to entertain rather than surprise or educate were always part of the industry and almost every year has seen a few that could do it all. Some of the recent trends include battling girlish vampires with increasingly 24/32

´ ´I 5.3 CHATOVAN

grim fairytale adaptations, some even from the point of view of the villain. And how could we forget aging Sylvester Stallone, building a franchise on cramming as many action flick clich´es into two hours as humanly possible. And it works. V´ıkend: It was supposed to be a quiet weekend, what with the exams coming up. Luckily, it was not meant to be. What started as an almost busines visit to a friend’s home design studio stretched through most of saturday and blissfully incapacitated me for almost all of sunday. While in the studio, I received a message from some friends, inviting me to join them for an outdoor wine tasting festival within comfortable walking distance. Lured by the promise of getting hammered at lunchtime in public I gallantly accepted the offer and within an hour I found myself becoming quite a ros´e connoisseur. Feeling tipsy after my return home, I swiftly rejected all activities expected of a university student. Instead I played video games for the remainder of the day. During sunday I gradually eased myself into doing some actual work, so that I could get some beauty sleep for the week ahead.

5.3

Chatov´ an´ı

Posledn´ı pˇr´ıpravou pˇred vlastn´ım chatem je pro agenta v´ ybˇer vhodn´ ych ot´azek pro dan´a t´emata v reakci na to, co u ´ˇcastn´ık napsal do esej´ı. Pro pilotn´ı test byl chat o nˇekolik ot´azek zkr´acen a vypadal n´asledovnˇe: Agent: Hello Participant: hey Agent: What did you do this weekend? Participant: i went to see a friend and i went to a wine tasting Agent: What does your friend do? Participant: he own7 a home design studio Agent: Did you drink a lot of wine? Participant: i sure did Participant: when i returned home i could not do any actual work Agent: And did you manage do get it done on sunday? Participant: not much Participant: but i tried to at least start so that i could get some sleep before my exam7 Agent: good luck then Participant: thanks

25/32

´ ´I 5.6 OSTATN´I TESTOVAN

5.4

Zpˇ etn´ a vazba

Po samotn´em ukonˇcen´ı sezen´ı byl u ´ˇcastn´ık poˇz´ad´an o vyplnˇen´ı kr´atk´eho dotazn´ıku s koment´aˇrem k tomu, co pr´avˇe absolvoval. Pro shrnut´ı byla pouˇzita metoda T9 a k n´ı vyuˇzita standardn´ı kl´avesnice. Koment´aˇr: Grafick´a str´anka se mi velice zamlouvala, obrazovky neobsahuj´ı pˇr´ıliˇs mnoho ruˇs´ıc´ıch prvk˚ u a instrukce jsou jasnˇe viditeln´e. Samotn´emu komunikaˇcn´ımu rozhran´ı dominuje ponˇekud neosobn´ı pozdrav, ale jinak je design i tady ˇcist´y, pouze bych navrhla trochu zd˚ uraznit prostor pro vkl´ad´an´ı textu. Komunikace jako takov´a zjevnˇe nen´ı stavˇen´a na pouˇzit´ı numerick´e kl´avesnice na pc, ˇc´ım se kdysi pˇrirozen´e pohyby st´avaj´ı nejist´ym ˇsm´atr´an´ım. Na metodu se ale d´a pomˇernˇe rychle zvyknout a pot´e uˇz zaˇcne uˇzivatel hledat pokroˇcil´e funkce, tˇreba teˇcku a ˇc´arku. Naopak nejm´ın ˇ pˇrirozen´e je maz´an´ı textu, ke kter´emu bych pouˇzila klasick´e delete tlaˇc´ıtko, pokud by to bylo moˇzn´e. K metodˇe T9 u ´ˇcastnice jeˇstˇe dopsala po posl´an´ı t´eto zpr´avy, ˇze by pro v´ yzkum nemuselo b´ yt ˇspatn´e pouˇz´ıt i tablety, pˇr´ıpadnˇe smartphony.

5.5

Vyhodnocen´ı testu

Jak m˚ uˇzeme vidˇet z pr˚ ubˇehu testu a jeho ukonˇcen´ı, cel´ y test probˇehl aˇz do konce u ´spˇeˇsnˇe bez nˇejak´eho technick´eho probl´emu. Pˇripom´ınky u ´ˇcastnice budou budou zpracov´any a podle nich bude i lehce poupraveno. Jedin´a vˇec, kter´a se nebude urˇcitˇe mˇenit je pouˇzit´ı klasick´eho tlaˇc´ıtka delete. Ted’ je kl´avesnice navrˇzena tak, aby byla vˇsechna tlaˇc´ıtka u sebe - stejnˇe jako na mobiln´ım telefonu. Pouˇzit´ı smartphon˚ u pˇr´ıpadnˇe tablet˚ u nebylo pro v´ yzkum a sbˇer dat zvaˇzov´ano. Nicm´enˇe cel´e webov´e rozhran´ı je naps´ana za pouˇz´ıt respozivn´ıho layout Bootstrap gridu. To znamen´a, ˇze pˇr´ıpadn´a u ´prava tohoto webov´eho rozhran´ı pro menˇs´ı a dotykov´e obraozvky by nemˇela b´ yt velk´ ym probl´emem. Jeˇstˇe jednou v´ ytkou k samotn´emu rozhran´ı bylo ne u ´plnˇe dobˇre popsan´e rozhran´ı. Pˇri psan´ı kr´atk´ ych esej´ı jsem nedopsal do popisu dostatek informac´ı o tom, jak si to v r´amci experimentu pˇredstavujeme. Jak m˚ uˇzeme vidˇet na prvn´ım vyplnˇen´em t´ematu - jeho text je znaˇcnˇe kreativn´ı. Log tohoto testu, vˇcetnˇe dat zapsan´ ych do datab´aze je uloˇzen na pˇriloˇzen´em CD.

5.6

Ostatn´ı testov´ an´ı

Z d˚ uvodu ˇcasov´e n´aroˇcnosti a nedostatku dobrovoln´ık˚ u na otestov´an´ı zbyl´ ych metod a kl´avesnic byla testov´ana kaˇzd´a moˇzn´a kombinace pˇri samotn´em v´ yvoji a pak jako celek v r˚ uzn´ ych nastaven´ıch po dokonˇcen´ı v´ yvoje. 26/32

´ ´I 5.6 OSTATN´I TESTOVAN

Bˇehem samotn´eho testov´an´ı bylo objeveno nˇekolik chyb, kter´e jsem se snaˇzil hned opravit. Jednou z chyb bylo tˇreba nespr´avn´e zobrazov´an´ı kl´avesnice na obrazovce pro metodu T9. D´ale bylo zjiˇstˇeno, ˇze se obˇcas neobnovuje chatovac´ı okono v dan´e frekvenci - tuto chybu jsem zat´ım nedok´azal vyˇreˇsit, ale vˇeˇr´ım, ˇze neˇz bude n´astroj pouˇzit pro sbˇer dat, bude opravena. Bˇehem pr˚ ubˇeˇzn´eho testov´an´ı bylo odhaleno jeˇstˇe spousta drobn´ ych chyb, kter´e byly opraveny. Jejich v´ yˇcet je vˇsak nezaj´ımav´ y a nen´ı niˇc´ım pˇr´ınosn´ y tomuto textu.

27/32

Kapitola 6

Z´ avˇ er Na z´aˇc´atku jsme si vymysleli v´ yzkum, jak´ y jeˇstˇe neprobˇehl a mohl by m´ıt zaj´ımav´ y v´ ysledek. Probˇehla diskuze na dan´e t´ema. V´ ysledkem dan´e diskuze bylo konstatov´an´ı, ˇze se chceme do tohoto t´ematu pustit. Tak tedy bylo vytvoˇreno t´ema. Dalˇs´ım krokem byl n´avrh samotn´eho experimentu. Ten dal dohromady vedouc´ı t´eto pr´ace Adam Sporka. D´ıky tomuto n´avrhu bylo vytvoˇreno vzorov´e workflow, do kter´eho se postupnˇe doplˇ novaly jednotliv´e kroky postupu cel´eho experimentu - kdyˇz bylo workflow ˇc´asteˇcnˇe vymyˇsleno, zaˇcalo se pracovat na implementaci. Implementace samotn´a se uk´azala jako velice n´aroˇcn´ y u ´kol vzhledem k tomu, jak je cel´ y experiment navrˇzen. Nicm´enˇe se povedlo aplikaci dostat do funkˇcn´ıho stavu. Je zde vˇsak jeˇstˇe pr´ar drobn´ ych nedodˇelk˚ u a jeden vˇetˇs´ı rest. Mezi drobn´e nedodˇelky patˇr´ı ne u ´plnˇe kompletn´ı textace cel´eho rozhran´ı aplikace. Sice jsou zde z´akladn´ı texty, kter´e ˇca´steˇcnˇe proˇsly korekturou, nicm´enˇe si netrouf´am tvrdit, ˇze by byly fin´aln´ı. Jejich podoba se m˚ uˇze jeˇstˇe trochu zmˇenit. M´ ym probl´emem je, ˇze je p´ıˇsu hodnˇe struˇcnˇe a bˇehem testu se uk´azalo, ˇze u ´ˇcastn´ık nevˇedˇel vˇzdy, co m´a dˇelat. V t´eto verzi je textace jiˇz poupravena, ale bude potˇreba jeˇstˇe jeden test s dobrovoln´ıkem, kter´ y se k tomu vyj´adˇr´ı a pˇr´ıpadnˇe se douprav´ı do fin´aln´ı verze. Bˇehem v´ yvoje se nezvl´adl doimplementovat tˇret´ı jazykov´ y model. Neurˇcili jsme, jak´ y model by to mˇel b´ yt, prot jsou ve fin´aln´ı verzi pˇripraveny dva modely a pro kaˇzd´ y tˇri typy kl´avesnic. To je dohromady ˇsest r˚ uzn´ ych typ˚ u experiment˚ u, kter´e by mˇely b´ yt dostaˇcuj´ıc´ı jako podklad pro pl´anovan´ y v´ yzkum. Po uskuteˇcnˇen´ı pilotn´ıho testu a ostatn´ıch test˚ u mohu konstatovat, ˇze samotn´e rozhran´ı funguje tak, jak bylo zam´ yˇsleno. Ot´azkou z˚ ust´av´a, jestli cel´a aplikace obstoj´ı v samotn´em sbˇeru dat, jak bylo zam´ yˇsleno. V pr˚ ubˇehu cel´e pr´ace na tomto webov´em rozhran´ı jsem si rozˇs´ıˇril sv´e programovac´ı znalosti v r´amci programov´an´ı dynamick´ ych webov´ ych str´anek za pouˇzit´ı aktu´aln´ıch technologi´ı, kter´e jsou k tomu urˇceny. V´ yvoj tohoto rozhran´ı pomohl prohloubit m´e znalosti, co se jazyk˚ u PHP a JavaScript t´ yˇce. Co se pomˇeru k´odu t´ yˇce, tak php a JavaScript znaˇcnˇe pˇreˇc´ısluje pouˇzit´ı HTML a CSS, nicm´enˇe jsou tyto technologie tak´e pouˇzit´e v rozhran´ı a zejm´ena u CSS jsem prohloubil takt´eˇz svoje znalosti. Sezn´amil jsem se s nov´ ymi frameworky, kter´e jsem pˇredt´ım nikdy nepouˇz´ıval a ani jsem nevˇedˇel o jejich existenci - speci´alnˇe Bootstrap a typeahead.js Cel´ y tento web je zat´ım t´ım nejvˇetˇs´ım projektem (rozsahem i ˇcasovˇe), jak´ y jsem s´am tvoˇril. Douf´am, ˇze spln´ı u ´ˇcel, pro kter´ y byl navrˇzen a stvoˇren. 28/32

´ ER ˇ 6.0 ZAV

Dalˇs´ım krokem je tedy samotn´ y sbˇer dat a jejich n´asledn´e vyhodnocen´ı. Jelikoˇz to nebylo pˇredmˇetem t´eto pr´ace, zat´ım se na tom nezaˇcalo pracovat, nicm´enˇe douf´am, ˇze se n´am brzy povede posb´ırat potˇrebn´a data a odpov´ıme si na ot´azku, jestli jsme nebo nejsme ovlivˇ nov´ani v tom, co p´ıˇseme.

29/32

Kapitola 7

Literatura a zdroje Literatura a zdroje [1] MACKENZIE, I a Kumiko TANAKA-ISHII. Text entry systems: mobility, accessibility, universality. Amsterdam: Morgan Kaufmann, c2007, x, 332 p. Morgan Kaufmann series in interactive technologies. [2] Conversation Questions for the ESL/EFL Classroom. The Internet TESL c 1995-2010, 2013, 2014 [cit. 2015-03-17]. Dostupn´e z: Journal. [online]. http://iteslj.org/questions/ c 2001-2015 [cit. 2015-02-20]. Dostupn´e z: [3] Php net. Php net. [online]. http://php.net/ c 2005-2015 [cit. 2015-02-20]. [4] HTML 5. Mozilla Developer Network. [online]. Dostupn´e z: https://developer.mozilla.org/cs/docs/csH T M L/HT M L5 c

[5] CSS 3. CSS 3. [online]. http://www.css3.info/

2009-2012

[cit.

2015-02-20].

Dostupn´e

z:

c 2009-2012 [cit. 2015-02-20]. Do[6] JavaScript. Mozilla Developer Network. [online]. stupn´e z: https://developer.mozilla.org/cs/docs/Web/JavaScript c 2009-2012 [cit. 2015-02-20]. Do[7] AJAX. Mozilla Developer Network. [online]. stupn´e z: https://developer.mozilla.org/en-US/docs/AJAX [8] MySQL. MySQL. [online]. https://www.mysql.com/ [9] Bootstrap. Bootstrap. http://getbootstrap.com/

c

[online].

2015 [cit.

[cit.

2015-02-20]. 2015-04-20].

Dostupn´e Dostupn´e

z: z:

[10] jQuery. jQuery. [online]. Copyright 2015 [cit. 2015-02-20]. Dostupn´e z: https://jquery.com/ c 2015 [11] Typeahead. Github. [online]. https://github.com/twitter/typeahead.js

[cit.

2015-04-20].

Dostupn´e

z:

c 2015 [cit. 2015-04-20]. Dostupn´e z: [12] Underscore. Underscore. [online]. http://underscorejs.org/ 30/32

LITERATURA A ZDROJE

c 2015 [cit. 2015-04-20]. Dostupn´e z: [13] StackOwerflow. StackOwerflow. [online]. http://stackoverflow.com/

31/32

Kapitola 8

Pˇr´ılohy Souˇc´ast´ı bakal´aˇrsk´e pr´ace jsou zdrojov´e k´ody cel´e aplikace a SQL skript na vyvoˇren´ı datab´aze. Vˇse je na pˇriloˇzen´em CD na zadn´ıch desk´ach pr´ace.

32/32