Sisällysluettelo

1. Johdanto
1.1. Määritelmiä
1.2 Dokumentin jaottelu

2. Yleiskuvaus
2.1. Järjestelmä
2.2. Käyttäjät
2.3. Modulaarisuus ja rajapinnat
2.3.1. GUI
2.3.2. Tietorakenteet
2.3.3. Esitysmuoto
2.3.4. Animaattori

3. Asiakas-palvelin-kommunikaatio
3.1. DSDL kieli
3.1.1. Kirjoitusasu
3.1.2. Tulkinta
3.2. Serialisoitavuus

4. Käyttöliittymät ja niiden toiminnot
4.1. Oppilaan käyttöliittymä
4.2. Oppilaan käyttöliittymän valikot
4.3 Oppilaan käyttöliittymä - esimerkkeihin tutustuminen
4.4 Oppilaan käyttöliittymä - tehtävien ratkaiseminen
4.5 Opettajan käyttöliittymä
4.6 Opettajan käyttöliittymän valikot
4.7 Toiminnot opettajan käyttöliittymässä
4.8 Tehtävän ja esimerkin ulkoasun muokkaukseen liittyvät toiminnot opettajan käyttöliittymässä
4.8.1 Design-view
4.8.2 Student-view
4.9 Tietorakenteiden muokkaukseen liittyvät toiminnot opettajan käyttöliittymässä.
4.9.1 Tehtävät
4.9.2 Esimerkkitehtävät
4.9.3 Esimerkkitehtävät - tehtävänanto
4.9.4 Esimerkkitehtävät - animaatiosekvenssi

Kirjallisuusviitteet

Yhteenveto

• Toiminnallinen kokonaisuus kattaa korkean tason olimallin ja rajapinnat. Rajapinnoille on määritelty nimet, mutta niiden tarkka sisältö on esitetty teknisessä määrittelyssä.
• Kommunikointi asiakkaan ja palvelimen välillä määrittelään tarkoitusta varten kehitettävällä DSDL-kielellä sekä Javan tarjoaman serialisoinnin avulla. Kieli määrittelee käyttöliittymän tilan ja oliot määritellyn syntaksin avulla. Serialisointi tallentaa olion tietovuona, jota voidaan vertailla tehtävien tarkastuksen yhteydessä.
• Projektissa toteutetaan käyttöliittymät sekä opettajalle että opiskelijalle. Oleellisesti toteutetaan yksi käyttöliittymä, jolloin käyttöliittymän toiminnallisuuden tason määrittää käyttäjäprofiili, jonka mukaisesti sallitaan tai kielletäään haluttuja toimintoja. Oppilaan käyttöliittymän toiminnot ovat osajoukko opettajan käyttöliitrtymän toiminnoista. Käyttöliittymä toteutetaan toimimaan erillisinä ikkunana.

Käyttöliittymien toiminnallisuus voidaan käsitteellisesti jakaa kahteen osaan niihin liittyvien tavoitteiden perusteella. Käyttäjillä voidaan ajatella olevan alemman tason tavoitteita, jotka liittyvät tietorakenteiden muokkaamiseen. Korkeamman tason tavoitteet taas pitävät sisällään oppilaan kohdalla mm. tehtävien tilauksen ja niiden palauttamisen tarkastettavaksi. Opettajan kohdalla korkean tason tavoitteita voivat olla mm. tehtävän ulkoasun muokkaus ja esimerkkitehtävän talletus palvelimelle. Nämä korkeamman tason tavoitteet opettaja ja oppilas toteuttavat pääsääntöisesti järjestelmään sisällytettyjen valikkokomentojen avulla. Sen sijaa matalamman tason tavoitteet, tietorakenteen muokkaaminen suoritetaan muokkaamalla tietorakenteita graafisesti niiden esitysmuotoihin kohdistuvilla käyttöliittymäoperaatioilla. Tällöin käyttöliittymän tulee tarjota joitakin perusoperaatioita, jotita voidaan kohdistaa  tietorakenteita kuvaruudulla esittävien esitysmuotojen alkioihin. Nämä esitysmuodot välittävät operaatiot tietorakenteille antaen niille samalla merkityksen.

1. Johdanto

Ohjelmatyönä toteutettava järjestelmä tulee liittymään olennaisena osana TKO-laboratoriossa käynnissä olevaan LEAD-projektiin (Learning Environment for Algorithms and Data Structures), jossa tarkoituksena on rakentaa kohtuullisen kattava WWW-pohjainen tietorakenteiden ja algoritmien oppimisympäristö, johon kuuluu harjoitustehtä vien lisäksi myös muuta opiskelumateriaalia. Järjestelmän on tarkoitus hyödyntää vahvasti hypermedian mahdollisuuksia ja ennenkaikkea etsiä hypermediasta uusia oppimista edesauttavia ominaisuuksia. Opiskelumateriaalin lisäksi järjestelmän on tarkoitus kattaa myös kurssin hallinnointiin liittyviä seikkoja aina ilmoittautumisesta palautteen keräämiseen saakka. Projektissa koko hanketta on lisäksi tarkoitus evaluoida pedagogisesta näkökulmasta ja pohtia millaista opetuksellista ja oppimisen kannalta keskeistä lisäarvoa se tuo mukanaan.

OLIO-TRAKLA on osa WWW-TRAKLA- konseptia; sitä tarkoitus käyttää lähinnä kurssin Tik-76.122 Tietorakenteet ja algoritmit harjoitustehtävien automaattiseen jakeluun, vastaanottoon ja tarkastamiseen, sekä kurssin hallinnointiin. Siihen on tarkoitus liittää myös jossain määrin opintomateriaalia mm. linkkien ja viitteiden muodossa. Enin osa opintomateriaalin tarjonnassa rajautuu kuitenkin OLIO-TRAKLA:n ulkopuolelle.

Ohjelmatyönä toteutettava järjestelmä TRAKLA-EDIT on osa OLIO-TRAKLA -järjestelmää. Kyseessä on sen WWW -pohjainen käyttöliittymä, eli asiakaspään sovellus joka kommunikoi TRAKLA-palvelimen kanssa. Kuva 1 esittelee OLIO-TRAKLA konseptia.
 
 

1.1 Määritelmiä

1.2 Dokumentin jaottelu

1. Johdanto - Projektin tuotteen, Trakla-Editin määrittely
2. Yleiskuvaus - Yleiskuvaus ohjelman käyttäjistä ja toiminnoista
3. Asiakas-palvelin-kommunikaatio - DSDL -kielen määrittely ja Serializable rajapinnan esittely
4. Käyttöliittymät ja niiden toiminnot - Graafisten käyttöliittymien kuvaukset

2. Yleiskuvaus

2.1. Järjestelmä

Järjestelmän keskeinen tavoite on toimia opetusvälineenä ja oppimisen tukena. Työn kannalta keskeisin näkökulma on kurssin (Tik-76.122 Tietorakenteet ja algoritmit) oppilaan näkökulma, koska järjestelmä on keskeisesti tarkoitus toteuttaa juuri oppimisen tueksi. Lisäksi järjestelmää käyttävät kurssin luennoitsija ja assistentit. Trakla-Edit -järjestelmän graafisen käyttöliittymän avulla opiskelija voi suorittaa ja palauttaa harjoitustehtäviä ja tutustua esimerkkiratkaisujen avulla tietorakenteiden ja algoritmien toimintaan. Opetushenkilökunta puolestaan voi käyttää järjestelmää uusien harjoitus-  ja esimerkkitehtävien luontiin ja testaamiseen (tehtäväeditori) sekä opetusmateriaalin tuottamiseen. Vaatimusmäärittelyn mukaisesti:

Oppilaan kannalta järjestelmällä tulee voida:

• tutkia esimerkkitehtävien ratkaisuja
• ratkaista tehtäviä graafisella käyttöliittymällä
• lähettää ratkaisu tarkastettavaksi
• tilata tehtäviä ja esimerkkejä
• (saada ratkaisusta palautetta ja kommentteja siinä olevista mahdollisista virheistä)

 

• visualisoida vuorovaikutteisesti esimerkkejä kurssin aihepiiristä
• toteuttaa ja testata uusia tehtäviä ; luoda graafisesti esimerkkisekvenssejä: luoda tietorakenteen alkutila jota graafisesti manipuloimalla voidaan tuottaa algoritmin animaatiosekvenssi .
• kyetä antamaan palautetta oppilaan tehtävänratkaisun puutteista
• (jakaa opiskelijoille yksilöllisiä tehtäviä valitusta tehtäväjoukosta)
• (tarkastaa tehtäviä automaattisesti)

2.2. Käyttäjät

2.3. Modulaarisuus ja rajapinnat

Trakla-Editin toiminnallisuus voidaan kuvata 4:llä toiminnallisella moduulilla, joiden väliin määritellään rajapinnat kuvassa 2 esitetyllä tavalla. Tämä korkean tason oliomalli kattaa modulaarisuuden, joka on vaatimuksena asiakkaan puolelta. Toteutuksen ja ylläpidettävyyden kannalta on yksinkertaisinta jakaa esitetyt moduulit useampaan luokkaan, jolloin esimerkiksi esitysmuoto (representation) moduuli voi esittää sekä näkymää että operatiivista oliota. Kuvassa 2 esitetty oliomalli on korkeantason mallinnus ja sitä on purettu auki teknisessä määrittelyssä.
 
 

2.3.1. GUI

2.3.2. Tietorakenteet

2.3.3. Esitysmuoto

2.3.4. Animaattori

2.4 Vaatimukset ympäristölle

 Toteutuksessa on päädytty käyttämään Java Development Kit versiota 1.1.7A, jolloin rajoitteeksi jää selainten yhteensopivuus ja tuki Javalle. Toteutuksessa käytettävät Java-kääntäjä ja Java-tulkki ovat vapaasti haettavissa Sun Microsystem yhtiön kotisivuilta www.sun.com. Myös yleisimmät selaimet, Microsoftin Internet Explorerin uusin versio on osoitteessa www.microsoft.com sekä Netscapen uusin versio osoitteessa www.netscape.com, ovat vapaasti haettavissa ja käytettävissä.
 

3. Asiakas-palvelin-kommunikaatio

Palvelimen tarjoamaa tallennuskapasiteettia käytetään hyväksi tehtävien laatimisessa, esimerkkien luomisessa sekä väliratkaisujen tallennuksessa. Järjestelmä sijaitsee palvelimella, josta se on käynnistettävissä Javaa tukevilla selaimilla. Tämä arkkitehtuuri mahdollistaa sovelluksen jatkuvan kehittämisen ja laajentamisen ilman päivityksiä käyttäjälle. Tämä yhdistettynä huolelliseen rajapinta-arkkitehtuuriin mahdollistaa sovelluksen jatkuvan kehittämisen siten että palveluiden alhaallaoloaika on minimoitu.

3.1. DSDL kieli

• käyttöliittymän tila
• tietorakenteet
• animaatio sekvenssit

Oppilaan tehtävänanto käyttää erillisiä tietorakenteita kuvaamaan tekstimuotoista tehtävänantoa, "alkutietorakennetta" , joka usemmiten toimii tehtävässä "alkiolistana" sekä muokattavia tietorakenteita, jotka tehtävässä on palautettava. Oppilaan tallettaessa tehtävänsä tallennetaan myös animaattorin tila DSDL muodossa, jolloin se on ladattava takaisin Trakla-Edit:iin. Opiskelijalle laadittu esimerkki sisältää tietorakenteen, esimerkin kuvaksen, tietorakenteiden alkutilat ja alkiot, sekä  animaattoriin tallennetun sekvenssin. Näin ollen opiskelija voi selata ennalta tallennettua animaattorin sekvessiä edestakaisin graafisen käyttöliittymän avulla.

Luennoitsijan sekä assistentin kannalta uuden tehtävän laatiminen on DSDL muotoisen sivun editoimista graafisella käyttöliittymällä. Luennoitsijan tallentama tehtävä tai esimerkki sisältää tehtävänannon, tietorakenteita sekä alkuarvojen määrittelyjä. Oppilaan ratkaistessa tehtävää nämä tulkitaan käyttäliittymässä ja opiskelijalle tulee näkyviin luennoitsijan luoma näkymä. Tehtävänantoon voidaan liittää useampia tietorakenteita ja niiden esitysmuotoja valikoista ja niiden paikka käyttöliittymässä on myös määriteltävissä. Osa tietorakenteista voidaan määritellä sisältämään alkuarvoja ja toimimaan näin "alkiolistana", vähintään yksi tietorakenne kuitenkin usemmiten (paitsi esim. kun tehtävään halutaan sanallisia vastauksia) on muokattava; näitä tietorakenteita voidaan esittää kutakin myös useammalla esitysmuodolla.. Esimerkkiä laadittaessa luennoitsija voi tallentaa suorittamansa animaatiosekvenssin, jonka oppilaat voivat hakea TRAKLA -palvelimelta ja käydä Trakla-Edit:in animaattorilla läpi. Lisää aiheesta on kerrottu käyttöliittymien kuvauksen yhteydessä tämän dokumantin kohdassa 5.

Valikosta valittavan talletus (Save) -toiminnon tarkoituksena on tallentaa käyttäliittymän nykyinen näkymä DSDL-kielisenä siten, että uudestaan ladattaessa tehtävä tai esimerkki on samassa tilassa, jossa se oli tallennushetkellä. Toiminto toteutetaan sekä oppilaan että opettajan käyttöliittymään. Tämä toiminto on täysin paikasta ja käytetystä laitteistosta riippumaton; tehtävän ratkaisu voidaan aloittaa WWW selaimella esim. TKK:n laskentakeskuksen UNIX koneissa, tallentaa palvelimelle, käynnistää WWW selain esim. Windows NT käyttöjärjestelmän alla, ladata tallennettu tehtävä ja jatkaa tehtävän ratkaisua. DSDL kielen käyttö on täysin näkymätöntä Trakla-Edit:in käyttäjille; sen tarkoitus on määritellä Trakla-Edit:in sisäinen talletusformaatti ja toimia "selain selaimen sisällä" periaatteella.
 

3.1.1. Kirjoitusasu

3.1.2 Tulkinta

3.2. Serialisoitavuus

Javan Serialization -rajapinta tarjoaa mahdollisuuden tallentaa ja lähettää animaattorin tilan asiakkaalta palvelimelle. Serialisoituva animaattorin instanssi tallennetaan tietovirtana, josta palvelin pystyy lataamaan sen tilan, jossa instanssi oli sen tallentamishetkellä. Seriolisoitavuuden tarjoamia etuja voidaan hyödyntää OLIO-TRAKLAn toteutuksessa; palvelimeen ei tarvitse toteuttaa erillistä parseria, vaan animaattoriolion toteuttava luokka riittää.

DSDL-kielen etuna seriolisoitavuuteen on sen konsistenttisuus sovelluksen muuttuessa. Kielen määrittely varmistaa sen, että myös vanhat tietorakenne- ja animaattorikuvaukset pystytään tulkitsemaan, vaikka olioiden sisäinen toteutus muuttuu. Tarkastuksessa konsistenttisuus ei nouse ongelmaksi, koska asiakas-palvelin päivitys animaattorin suhteen voidaan synkronisoida ja tehdä sille varattuna ajankohtana (esim. viikonloppuisin).

4. Käyttöliittymät ja niiden toiminnot

Tämän dokumantin yhteenvedossa oli esitetty käyttöliittymien toiminnallisuuden jakoa niihin liittyvien tavoitteiden pohjalta. Seruraavassa on tarkemmin kuvattu sekä oppilaan että opettajan käyttöliittymät ja niiden toiminnot.

4.1 Oppilaan käyttöliittymä

• tutkia esimerkkitehtävien ratkaisuja
• ratkaista tehtäviä graafisella käyttöliittymällä
• lähettää ratkaisu tarkastettavaksi
• tilata tehtäviä ja esimerkkejä
• (saada ratkaisusta palautetta ja kommentteja siinä olevista mahdollisista virheistä)

Pääsääntoisesti nämä vaatimukset konkretisoituvat kahdeksi järjestelmän mahdollistavaksi käyttöskenaarioksi. Nämä ovat tehtävien ratkaiseminen ja esimerkkeihin tutustuminen. Kuvissa 4.1 ja 4.2 on esitetty karkean tason malli siitä, mitä nämä skenaariot pitävät sisällään:

Kuva 4.1 Tehtävän ratkaiseminen
 
 
 

kuva 4.2 Esimerkkiin tutustuminen

Kohdissa 4.3 ja 4.4 on käyty läpi oppilaan käyttöliittymän toimintoja tämän jaon pohjalta.
Seuraavassa käydään läpi oppilaan käyttöliittymän valikot.

4.2 Oppilaan käyttöliittymän valikot

FILE

Kuva 5. Oppilaan käyttöliittymän File-valikko

• Exercise - Tehtävän tilaus. Dialog-ikkunasta valitaan haluttu tehtävä. Valittu tehtävä piirtyy työtilaan
• Example - Esimerkkitehtävän tilaus. Dialog-ikkunasta valitaan haluttu esimerkki. Valittu esimerkkitehtävä piirtyy työtilaan
• Close - Sulkee avoimen tehtävän/esimerkin. Mikäli avonaisena on ollut tehtävä, dialogi kysyy, halutaanko tehtävä tallentaa.
• Save - Tallentaa tehtävän korvaten edellisen tallennuksen. Esimerkkiä ei voi tallentaa (komento disabloitu, häivytetty)
• Exit - Lopettaa sovelluksen. Dialogi kysyy, halutaanko avatut tehtävät tallettaa, mikäli niitä on tallentamatta (Save).

EDIT

Kuva 6. Oppilaan käyttöliittymän Edit-valikko

• Undo - Peruttaa edellisen komennon
• Redo - Peruuttaa Undo-operaation

FORMAT

Kuva 7. Oppilaan käyttöliittymän Format-valikko

• Font - Vaihtaa valitun tekstin tai alueen fontin. Avaa dialogin, josta valitaan haluttu fontti.
• Size - Vaihtaa valitun panelin objektien kokoa. Avaa dialogin, josta valitaan haluttu koko

ANIMATOR

Kuva 8. Oppilaan käyttöliittymän Animator-valikko

• Backward - Kelaa animaatiosekvenssiä yhden askeleen taaksepäin.
• Forward - Kelaa animaatiosekvenssiä yhden askeleen eteenpäin.
• Begin - Palaa animaatiosekvenssin alkuun.
• End - Menee animaatiosekvenssin loppuun.

HELP

Kuva 9. Oppilaan käyttöliittymän Help-valikko

• Contents - Avaa Help-sivujen sisällysluettelo-dialogin.
• About Trakla-Edit - Avaa dialogin, jossa tietoja Trakla-Edit sovelluksesta.

4.3 Oppilaan käyttöliittymä - esimerkkeihin tutustuminen

Kuva 10.1 Tyypillinen esimerkkitehtävä
 

Animaattorin painikkeilla opiskelija voi selata esimerkin kuvaaman algoritmin toiminnan mukaista animaatiosekvenssiä eteen- ja taaksepäin siten, että tietorakenteiden tilat ja niissä tapahtuvat muutokset ovat selvästi havaittavissa. Samalla opiskelija saa kuhunkin animaatiosekvenssin askeleeseen mahdollisesti liittyvää lisäinformaatiota animaattorin alla olevasta "selityskentästä" (inforuutu).

Animaattorin painikkeet:

Begin: kelaa animaatiosekvenssin alkuun
Back: kelaa animaatiosekvenssiä yhden askeleen taaksepäin
Forward: kelaa animaatiosekvenssiä yhden askeleen eteenpäin
End: kelaa animaatiosekvenssin loppuun

Painikkeista Begin ja Back eivät ole toiminnallisia (ne on disabloitu), kun animaatiosekvenssi on alussa. Tällöin ko. painikkeet esitetään "häivytettyinä". Vastaavasti painikkeet Forward ja End eivät ole toiminnallisia, kun animaatiosekvenssi on lopussa. Animaattoripanelin painikkeita vastaavat komennot löytyvät myös valikosta "Player".

Yllämainittujen toimintojen lisäksi opiskelija voi muuttaa kirjasintyyppiä tai piirrettävien objektien kokoa valikosta "Format" komennoilla "Set font" ja "Set size". Tälöin aukeavista dialogeissa voi valita haluamansa arvot. Kaikki esimerkissä esitetty tekstit / objektit piirtyvät uuden arvon mukaisesti. Näin oppilaan on mahdollista erilaisissa ympäristöissä muokata esimerkkisivua havainnollisemmaksi, esimerkiksi pienentää objektien kokoa, jotta esimerkki mahtuisi piirtymään pienelle näytölle.

Kohdatessaan ongelmia oppilas voi hakea niihin vastauksia valikon "Help" komennolla "Contents" aukeavan dialogin avustuksella. Valitsemalla aihepiirin opiskelija voi lukea siihen liittyvää tietoa aukeavasta ikkunasta.

Halutessaan lopettaa esimerkkiin tutustumisen opiskelija voi "sulkea" esimerkin valikon "File" komennolla "Close". Tällöin esimerkki poistuu ikkunasta, ja sen "alla" ollut toinen esimerkki tai tehtävä (mikäli se on avattuna) "tulee näkyviin". Mikäli "alla" ei ole toista tehtävää tai esimerkkiä, työtila tyhjenee. Halutessaan lopettaa järjestelmän käytön oppilas valitsee valikon "File" komennon "Exit".

Edellä on kerrottu, miten opiskelija voi käyttöliittymässä:

Tilata esimerkkitehtäviä.
Tutustua esimerkkitehtävien ratkaisuun selaten ratkaisusekvenssiä animaattoripainikkeiden avulla.
Säätää esimerkin esittämisessä käytetyn kirjasintyyppiä ja objektien kokoa.
Hakea apua kohdatessaan ongelmia.
Sulkea esimerkkitehtävän
Lopettaa järjestelmän käytön

Mainittujen toimintojen lisäksi opiskelija voi käyttöliittymässä myös tilata ja suorittaa tehtäviä.
 

4.4 Oppilaan käyttöliittymä - tehtävien ratkaiseminen

Oppilas voi tilata tehtävän edellä esitettyyn tapaan ("File" - > "Open" ja valinta dialogista). Tällöin TRAKLA-palvelin lähettää opiskelijalle yksilöllisen tehtävän oppilaan valitsemasta aihepiiristä. Tällä tarkoitetaan sitä, että tehtävänanto ja esitettyjen tietorakenteiden tyypit ja koot ovat kaikille opiskelijoille "samassa" tehtävässä samat. Tietorakenteiden sisältämät alkiot (avaimet) sen sijaan muodostetaan TRAKLA-palvelimella jonkin algoritmin mukaisesti kullekin oppilalle yksilöllisesti. Oppilaan saama tehtävä voi näyttää esimerkiksi seuraavanlaiselta:
 
 

Kuva 10.2 Tehtävä

Tehtävässä oppilaan on tarkoitus siirtää taulukon "Alkiot" alkioita kekoa kuvaavan binääripuun "Puu" solmuihin siten, että syntynyt puurakenne toteuttaa kekoehdon. Oppilaan tulee tehtävä suorittaakseen muodostaa tietorakenteita muokkaamalla ratkaisun animaatiosekvenssi, joka voidaan palauttaa vastauksena annettuun tehtävään. Tämä tietorakenteiden muokkaus suoritetaan graafisesti manipuloimalla ko.tietorakenteiden esitysmuotojen alkioita. Tässä tehtävässä tarkoitus on siirtää avaimia taulukon alkioista puun solmuihin. Kaikki tietorakenteiden muokkaus tehtävää ratkaistaessa tapahtuu niiden esitysmuotojen välityksellä.  Esimerkiksi hiirellä voidaan "tarttua" tehtävässä esitetyn taulukon alkioon ja "tiputtaa" se jonkin esitetyn puun solmuun.

Käyttöliittymässä tulee siis olla joitain toimintoja, jotka voidaan kohdistaa tietorakenteiden esitysmuotojen graafisiin alkioihin. Tällöin esitysmuodot "ilmoittavat" esittämilleen tietorakenteille käyttäjän manipuloineen niitä jollain tietyllä tavalla. Tietyn käyttöliittymäoperaation merkitys riippuu tietorakenteen tyypistä. Esitysmuodoissa määritellään semantiikka (merkitys) käyttöliittymän toiminnoille; esitysmuodoissa määritellään siis se mitä jokin tietty käyttöliittymän toiminto tarkoittaa kunkin tyyppisen tietorakenteen kohdalla. Jonkin oppilaan suorittaman operaation "etenemistä" järjestelmässä voidaan karkeasti kuvata seuraavalla rakenteella ja siihen liittyvällä esimerkillä:

Oppilas haluaa muokata tietorakennetta suorittaakseen tehtävän
->
oppilas suorittaa jonkin käyttöliittymäoperaation, joka kohdistuu ko. tietorakenteen esitysmuotoon
->
esitysmuoto määrittää suoritetulle käyttöliittymäoperaatiolle merkityksen (semantiikan) ja välittää sen kuvaamalleen tietorakenteelle
->
tietorakenne muuttuu
->
esitysmuodot piirtyvät uudelleen vastaamaan muuttunutta tietorakennetta
->
oppilas saa muuttuneiden esitysmuotojen kautta palautteen operaation tuloksista
->
Oppilas haluaa jatkaa tietorakenteen muokkausta suorittaakseen tehtävän
 

Esimerkiksi:

Oppilas haluaa siirtää taulukon "Alkiot" toisen alkion (A) puun "Puu" juurisolmuun (joka on "tyhjä"):
->
Oppilas "tarttuu" hiirellä taulukon toiseen alkioon (A),  "vetää" sen "Puu":n  juuren päälle ja "tiputtaa" alkion juurisolmuun (käyttöliittymäoperaatiot)
->
Keon esitysmuoto ("Puu") kertoo tietorakenteelle, että käyttäjä haluaa siirtää avaimen A keon (jota "Puu" kuvaa) "juureksi" (semantiikka)
->
Tietorakenne keko muuttuu, taulukko -tietorakenne (jota "Alkiot" kuvaa) muuttuu
->
Tietorakenteiden esitysmuodot muuttuu kuvaamaan muuttuneita tietorakenteita
->
Oppilas saa muuttuneiden esitysmuotojen kautta palautteen operaation tuloksesta (onnistumisesta)
->
Oppilas haluaa jotain muuta...
 

Opettajan laatiessa esimerkkien tehtävänannon mukaisia animaatiosekvenssejä esimerkiksi havainnollistaakseen jonkin algoritmin toimintaa,  manipuloi hän tietorakenteita täsmälleen samalla tavalla, kuin oppilas suorittaessan tehtäviään. Opettajalla ja oppilaalla on siis käytössä täsmälleen samat toiminnot tietorakenteiden muokkaamiseksi niiden esitysmuotojen välityksellä. Tarkemmin tästä on kerrottu Liitteessä 1. Tietorakenteiden muokkaus käyttöliittymissä.
Liitteessä on kuvattu myös käyttöliittymäoperaatiot ja hahmoteltu niitä vastaavaa esitysmuotojen toteuttamaa semantiikkaa tietorakenteiden muokkauksessa.
 

4.5 Opettajan käyttöliittymä

Opettajan käyttöliitymällä luodaan uusia tai muokataan olemassa olevia tehtäviä ja esimerkkejä. Näitä voidaan tallettaa palvelimelle ja ladata sieltä. Seuraavissa kuvissa on esitetty karkealla tasolla opettajan suorittamat toimenpiteet hänen laatiessaan tehtävää tai esimerkkiä.
 

Kuva 11.1 Tehtävän laatiminen
 

Esimerkki opettajan tehtävän laadinnasta on annettu kohdassa Liitteessä 3. Esimerkki: Tehtävän laadinta
 

Kuva 11.2 Esimerkin laatiminen

Esimerkki opettajan esimerkin laadinnasta on annettu Liitteessä 4. Esimerkki: Esimerkkitehtävän laadinta.
 

4.6 Opettajan käyttöliittymän valikot

FILE

Kuva 12. Opettajan käyttöliittymän File-valikko

• New - Uuden tehtävän/esimerkin teon aloittaminen. Dialogista valitaan halutaanko avata tyhjä uusi tehtävä vai esimerkki. Tyhjentää näytön työtilan
• Open - Avaa aiemmin talletetun tehtävän/esimerkin. Dialog-ikkunasta valitaan avattava tehtävä / esimerkki
• Close - Sulkee avoimen tehtävän / esimerkin. Pyytää tallentamaan tehtävän / esimerkin jos se on tallentamatta (Save tai Save As).
• Save - Tallentaa tehtävän / esimerkin aiemmin talletetulla nimellä korvaten edellisen tallennuksen. Jos tehtävää/ esimerkkiä/malliratkaisua ei ole aiemmin talletettu toimii kuten Save As.
• Save As - Tallentaa tehtävän / esimerkin halutulla nimellä. Avaa dialogin, jossa määritellään talletettavan tiedoston nimi ja paikka. Jos aiemmin talletettu samalla nimellä kysyy korvataanko olemassa oleva tiedosto.
• Exit - Lopettaa sovelluksen. Pyytää tallentamaan avatut tehtävät / esimerkit, jos niitä on tallentamatta (Save tai Save As).

EDIT

Kuva 13. Opettajan käyttöliittymän Edit-valikko

• Undo - Peruttaa edellisen komennon
• Redo - Peruuttaa Undo-operaation
• Cut - Leikkaa valitun objektin
• Copy - Kopioi valitun objektin
• Paste - Liittää kopioidun tai leikatun objektin valittuun paikkaan
• Delete - Poistaa valittun objektin

INSERT

Kuva 14. Opettajan käyttöliittymän Insert-valikko

• Data Structure - Avaa alimenun järjestelmän tuntemista tietorakenteista. Valittaessa listasta lisää tietorakenteen hiirellä valittavaan kohtaan näytön työtilassa. Tietorakenne esitetään oletus-esitysmuodossaan.
• Representation for data structure - Avaa alimenun järjestelmän tuntemista valittua tietorakennetta kuvaavista esitysmuodoista. Valittaessa listasta lisää esitysmuodon valitulle tietorakenteelle hiirellä valitavaan kohtaan näytön työtilassa.

FORMAT

Kuva 15. Opettajan käyttöliittymän Format-valikko

• Font - Vaihtaa valitun tekstin tai alueen fontin. Avaa dialogin, josta valitaan haluttu fontti.
• Size - Vaihtaa valitun tekstin tai alueen objektien kokoa.
• Position - Valitsee valitun alueen siirrettäväksi

ANIMATOR

Kuva 16. Opettajan käyttöliittymän Animator-valikko

• Backward - Kelaa animaatiosekvenssiä yhden askeleen taaksepäin.
• Forward - Kelaa animaatiosekvenssiä yhden askeleen eteenpäin.
• Begin - Palaa animaatiosekvenssin alkuun.
• End - Menee animaatiosekvenssin loppuun.
• Play - Toistaa animaatiosekvenssin askelesta eteenpäin
• Delete - Poistaa animaatiosekvenssin askeleen (sen joka näkyy työtilassa)
• Insert Animator panel - Lisää animaattorin ohjauspanelin hiirellä valittavaan kohtaan näytön työtilaa.

HELP

Kuva 17. Opettajan käyttöliittymän Help-valikko

• Contents - Avaa Help-sivujen sisällysluettelo-dialogin.
• About Trakla-Edit - Avaa dialogin, jossa tietoja Trakla-Edit sovelluksesta.

4.7 Toiminnot opettajan käyttöliittymässä

Tehtävän ja esimerkin tehtävä-osan ulkoasun muokkaamiseen tarvittava toiminnallisuus on siis oleellisesti samankaltaista.
 

4.8 Tehtävän ja esimerkin ulkoasun muokkaukseen liittyvät toiminnot opettajan käyttöliittymässä.

4.8.1 Design-view

Tehtävien ulkoasua ja ryhmittelyä voidaan muokata jakamalla työtila vaaka- ja pystysuunnassa useampaan työtilaan, joita jatkossa kutsutaan paneleiksi. Kussakin panelissa on mahdollista esittää joko tekstiä tai tietorakenteiden esitysmuotoja. Nämä tietorakenteiden esitysmuodot kuvaavat aina jotain luotua fyysistä tietorakennetta. Tyypillisesti tehtävässä on yhdessä työtilassa esitetty  tehtävänanto tekstinä, toisessa jokin alkiolistana toimivan tietorakenteen esitysmuodon, sekä yksi tai useampia esitysmuotoja yhdelle tai useammalle tietorakenteelle, joita on tarkoitus tehtävässä muokata. Näiden lisäksi tehtävässä on usemmiten liitettynä animaattori-paneli, jonka painikkeilla oppilas (tai opettaja) voi "keleta" tehtävää suoritettaessa syntynyttä animaatiosekvenssiä eteen- ja taaksepäin. Seuraava kuva selventänee tätä:

Kuva 18. Tyypillinen tehtävä (Design view)
 

Pääosin opettajan tehtävien ulkoasun muokkaamiseen liittyvät toiminnot toteutetaan valikkokomentojen kautta. Opettajan käyttöliittymän valikot on kuvattu aiemmin tässä dokumentissa kohdassa 4.6 Opettajan käyttöliittymän valikot.
Seuraavassa on esitetty  tehtävien tekemisessä tarvittavia tehtävien ulkoasun muokkaukseen liittyviä toimintoja. Toimintojen yhteydessä on kuvattu myös niiden vaikutuksia järjestelmässä.

Termejä

• Työtila: Käyttöliittymän alue, jossa esitetään tehtäviä: tehtävänanto, animaattorin käyttöpaneli sekä joitakin tietorakenteiden esitysmuotoja.
• Paneli: Työtilan osa, jossa voidaan esittää esim. tehtävänanto, animaattorin käyttöpaneli tai jokin tietorakenteen esitysmuoto.
• Napsautus: Hiiren painikkeella tehtävä nopea painallus (painike alas + painike ylös). Napsautus tehdään jonkin graafisen objektin päällä (esim paneli).
• Vedä ja tiputa: Hiiren painikkeen alaspainaminen, hiiren siirto ja painikkeen vapautus. Hiiren painike painetaan alas jonkin graafisen objektin päällä, siirretään hiiren kursori jonkin graafisen objektin päälle ja vapautetaan hiiren painike. Hiiren siirron aikana valittu objekti "seuraa" hiirtä.

Panelin (työtilan) valinta:

1. napsautetaan hiirellä valittavan panelin sisäpuolella
2. panelin korostus kuvaa valintaa

Panelin koon muokkaaminen

1. Hiirellä vedä-ja tiputa toiminnolla; tartutaan hiirellä panelin reunaan, ja vedetään sitä haluttuun kohtaan.
2. panelin koko muuttuu

Tekstin liittäminen paneliin:

1. (paneli valittu)
2. valitaan Insert-valikosta:  Data stucture-> Text
3. valittuun paneliin voidaan kirjoittaa ja siinä voidaan editoida tekstiä (Edit valikko)

Tietorakenteen lisääminen paneliin

1. (paneli valittu)
2. valitaan Insert-valikosta DataStructure ja valitaan lisättävä tietorakenne
3. tietorakenne piirtyy ikkunaan oletus-esitysmuodossaan

     TAI

1. valitaan Insert-valikosta DataStructure ja valitaan lisättävä tietorakenne
2. valitaan hiirellä paikka työtilasta
3. tietorakenne piirtyy ikkunaan oletus-esitysmuodossaan

Panelin poistaminen

1. (paneli valittu)
2. valitaan Edit-valikosta Delete tai painetaan näppäimistön Delete-näppäintä
3. Paneli poistuu

Esitysmuodon muuttaminen

1. (jokin tietorakennetta esittävän esitysmuodon sisältämä paneli valittu)
2. valitaan Format-valikosta Change Representation
3. valitaan alivalikkolistasta haluttu esitysmuoto
4. paneliin piirretään uusi tietorakennetta kuvaava esitysmuoto

Esitysmuodon lisääminen

1. (jokin tietorakennetta esittävän esitysmuodon sisältämä paneli valittu)
2. valitaan Insert-valikosta Representation
3. osoitetaan hiirellä paneli, johon esitysmuoto halutaan lisätä TAI (mikäli panelia ei ollut valittu)
4. osoitetaan hiirellä työtilan paikka, johon esitysmuoto halutaan lisätä
5. paneliin piirretään uusi tietorakennetta kuvaava esitysmuoto

        Poistamalla esitysmuodon sisältävä paneli (katso Panelin poisto)

Tietorakenteen poistaminen

Animaatorin käyttöpanelin lisääminen

1. (paneli valittu)
2. valitaan Player-valikosta Insert animator panel TAI (mikäli panelia ei ollut valittu)
3. osoitetaan hiirellä työtilan paikka, johon animaattorin käyttöpaneli halutaan lisätä
4. paneliin (työtilaan) piirretään animaattorin käyttöpaneli

     Poistamalla animaattorin käyttöpanelin sisältävä paneli (katso Panelin poisto)
 

Edellä kuvatuilla toiminnoilla opettaja muokkaa tehtävän (ja esimerkin sisältämän tehtävä-osan) ulkoasua.
Ulkoasun lisäksi hänen tulee (useimmiten)  myös alustaa tietorakenteiden alkutiloja ja muokata niitä.
Tästä on kerrottu lisää luvussa 4.9 Tietorakenteiden muokkaukseen liittyvät toiminnot opettajan käyttöliittymässä.
Ennen tätä käydään vielä läpi, miten opettaja voi testata laatimiaan tehtäviä ja tuottaa esimerkitehtävien malliratkaisujen animaatiosekvenssit.

4.8.2 Student view

 Alla oleva kuva esimerkin laatimisessa käytössä olevasta "Student view" -näkymästä selventänee asiaa:

Kuva 19 Student view -näkymä.

Ainoana erona oppilaan käyttöliittymään "Student view" -näkymässä on ylimääräinen animaattoripainikke. Opettajalla on käytössään "selaus" (begin, end, forward, back, play) -animaattoripainikkeiden lisäksi painike "Delete", joka poistaa "esilläolevan" askelen animaatiosekvenssistä.Toiminnon tarkoituksena on mahdollistaa esimerkkiratkaisuiksi tuotettavien animaatiosekvenssien editointi.

Animaatiosekvenssin luominen tässä "Student view" -näkymässä on käyty havainnollisesti läpi liitteessä 4.
Animaatiosekvenssin luomiseksi opettaja manipuloi tietorakenteita niiden esitysmuotojen välityksellä. Tästä on kerrottu kohdassa 4.9.4 Esimerkkitehtävät - animaatiosekvenssi sekä liitteessä 1.

4.9 Tietorakenteiden muokkaukseen liittyvät toiminnot opettajan käyttöliittymässä.

Tehtävien osalta opettaja ei alusta tietorakenteen alkioita; ne alustuvat jonkin algoritmin mukaisesti oppilaan tilatessa tehtävän . Näin jokaiselle oppilalle kyetään "jakamaan" yksilöllisiä tehtäviä. Esimerkkitehtävien osalta tilanne on toinen. Opettaja haluaa kaikkien oppilaiden saavan  tutkittavaksi saman tietorakenteen. Tällöin on mahdollista liittää esimerkin animaatiosekvenssiin yksityiskohtaista informaatiota esim. havainnollistettavan algoritmin toiminnasta (esim. alkio A siirtyy taulukosta "Alkiot" puun "Puu" vasempaan alipuuhun B:n vasemmaksi lapseksi...).
 

4.9.1 Tehtävät

Dialogin sulkemisen jälkeen valintojen mukainen tietorakennetta kuvaava esitysmuoto piirtyy aiemmin valittuun paneliin taikka hiirellä osoitettavaan paikkaan työtilaa.

Näin opettaja luo tehtävään tarvittavat tietorakenteet esitysmuotoineen. Tyypillinen tehtäväsivu sisältää jonkin alkiolistana toimivan tietorakenteen esitysmuodon sekä yhden tai useamman "tyhjän" toisia tietorakenteita kuvaavia esitysmuotoja, joihin oppilas tehtävää ratkaistessaan siirtää alkiolistan alkioita. Tehtävää laatiessaan opettaja muokkaa tietorakenteita vain mainitun dialogin kautta.  Tietorakenteiden esitysmuodot eivät tarjoa tällöin toiminnallisuutta tietorakenteiden muokkaukseen.

4.9.2 Esimerkkitehtävät

4.9.3 Esimerkkitehtävät- tehtävänanto

Opettaja luo esimerkkitehtävän tehtävänannon lähes samaan tapaan, kuin tavallisen tehtävän. Hän haluaa kuitenkin alustaa alkiolistana toimivan tietorakenteen sisältämään haluamansa alkiot, jotta esimerkkitehtävä olisi jokaiselle oppilalle sama, ja siten mahdollistaa yksityiskohtaisen sanallisen lisäinformaation liittämisen luotavaan animaatiosekvenssiin. Tietorarenteet esitysmuotoineen luodaan täsmälleen samaan tapaan kuin tehtävää laadittaessa. Tietorakenteiden alustus tapahtuu näiden dialogista (kohta 4.8.1) valittujen esitysmuotojen kautta seuraavaan tapaan:

    1. Valitaan hiirellä esitysmuodon alkio, kursori ilmestyy alkion sisään /vierelle (Puun tai verkon solmu, listan alkio...).
    2. Syötetään valittuun alkioon sisältö näppäimistöltä (Yleensä kirjain tai numero).

Tietorakennetta voi alustuksen jälkeen muokata seuraavaan tapaan:

    1. Valitaan hiirellä esitysmuodon alkio, kursori ilmestyy alkion sisään /vierelle
    2. Poistetaan näppäimistön Del-painikkeella valitun alkion sisältö
    3. Syötetään valittuun alkioon uusi sisältö näppäimistöltä.
 

Muuta tietorakenteiden muokkaamiseen liittyvää toiminnallisuutta opettaja ei tarvise luodakseen esimerkkitehtävän alkutilan. Tehtävänannon lisäksi esimerkkitehtävään liittyy tämän tehtävänannon "mallivastauksen" toteuttava animaatiosekvenssi.
 

4.9.4 Esimerkkitehtävät - animaatiosekvenssi

Malliratkaisun animaatiosekvenssin tuottamiseksi opettajan tulee pystyä mm. siirtämään alkioita tietorakenteesta toiseen, merkitsemään (läpikäynti binääripuussa) tai valitsemaan (verkon virityspuuhun) niitä. Tarvittava toiminnallisuus on oleellisesti samanlaista, mitä oppilas tarvitsee ratkaistessaan tehtäviä. Kaikki tietorakenteiden muokkaus animaatiosekvenssien luomiseksi ja tehtävien ratkaisemiseksi tapahtuu niiden esitysmuotojen kautta. Tarkemmin aiheesta on kerrottu Liitteessä 1. Tietorakenteiden muokkaus käyttöliittymissä.
Liitteessä 4 on esitetty havainnollisesti, miten esimerkkitehtävän animaatiosekvenssi luodaan.
 

Kirjallisuusviitteet