Liitteitä Abitti-kokeeseen

Julkaistu 7.2.2017© Riitta Salmenoja Tämä teos on lisensoitu

Creative Commons Nimeä-EiKaupallinen-EiMuutoksia 4.0 Kansainvälinen -lisenssillä.

Tarvitset koetehtävät ja kokeeseen tulevat tiedostot.

Älä käytä tiedostojen nimissä kirjaimia å ä ö

Kopioi kaikki kokeeseen tulevat tiedostot samaan kansioon.

Valitse kaikki tiedostot ja pakkaa ne zip-tiedostoksi.

Muuta zip-tiedoston nimeksi attachments

Kirjaudu oma.abitti.fi

Valitse Luo uusi koe.

Kirjoita kokeen nimi ja ohje kokeeseen.

Valitse monivalinta.

Kirjoita tehtävänanto. Lisää monivalinnan teksti ja vastausvaihtoehdot.

Tämä riittää aluksi. Palaa kokeiden hallintaan.

Siirrä koe omalle tietokoneellesi.

Jos koneesi ehdottaa zip-tiedoston avaamista, älä avaa tiedostoa, vaan tallenna se.

Siirrä omalle koneelle ladattu transfer-alkuinen zip-tiedosto kansioon, jossa on attachments zip-tiedosto.

Siirrä attachments zip-tiedosto transfer-alkuiseen zip-tiedostoon.

Liitteet ovat transfer-alkuisessa zip-tiedostossa.

Tuo koe oma.abitti.fi-palveluun.

Liitteet sisältävä koe on valmiina muokattavaksi.

Mitä tuli tehtyä?

Liitteenä olevien tiedostojen linkittäminen koetehtäviin html-koodilla• Kaikki tiedostot ovat kansiossa attachments.• Tiedostopolku, jolla Abitti-kokeessa viitataan

attachments-kansiossa olevaan tiedostoon on muotoa

./attachments/tiedostonnimi.tiedostontyyppi• Liitteenä olevat tiedostot eivät näy koetta

muokattaessa. Esikatselusta voi tarkistaa kuvien sijoittelun ja tiedostolinkit.

Kuvan upottaminen tehtävään• Kuva upotetaan tehtävään img-elementillä.• Kuvan lähde kerrotaan src-määrittellä ja kuvan

tekstivaihtoehto alt-määritteellä.• Esimerkiksi kuva, joka on tiedostona kuva.jpg,

upotetaan tehtävään kirjoittamalla<img src=”./attachments/kuva.jpg” alt=”kuva.jpg”>

• Esikatselussa näkyy kuvan kohdalla alt-määritteeseen kirjoitettu teksti.

Esikatselu Firefox-selaimessa

• Tehtävään upotetun kuvan voi Abitti-kokeessa kopioida ja liittää johonkin ohjelmaan.

Kuva monivalinnan vaihtoehtona• Liitteenä olevia kuvia voi laittaa monivalinnan

vaihtoehdoiksi.

Älä paljasta tiedoston nimessä oikeaa vaihtoehtoa.

Esikatselu

Varmista, että kirjoitat tiedoston nimen ja tyypin oikein.

Linkki aineistossa olevaan tiedostoon• Aineistossa oleviin tiedostoihin tehdään linkki

a-elementillä, jossa linkin kohde ilmoitetaan href-määritteellä.• Esimerkiksi linkki mittausdatan sisältävään csv-

tiedostoon YO_S17_data.csv<a href=”./attachments/YO_S17_data.csv”> YO_S17_data.csv</a>

• Linkittää voi esimerkiksi videon, LibreOfficen tekstitiedoston tai piirrostiedoston.

Abitti-kokeessa selain tarjoaa tiedostoa avattavaksi tiedoston tyypin perusteella määräytyvään oletusohjelmaan. Kokeen tekijä voi valita myös vaihtoehdon tallenna tiedosto.

• Pdf-tiedosto ja html-tiedosto aukeavat linkistä oletuksena samaan selainikkunaan, jossa koe on. Määritteellä target=”_blank” tiedosto aukeaa uuteen välilehteen.

<a href=”./attachments/tiedosto.pdf” target=”_blank”>linkkisana</a>

<a href="./attachments/gravityforcelab.html" target="_blank">Gravity Force Lab</a>

Tiedoston upottaminen tehtävään• Tiedoston upotus tehdään iframe-elementillä.

Menetelmä sopii esimerkiksi html-sivuna olevalle simulaatiolle.• Iframe-elementissä on upotettavan tiedoston

osoitteen kertova src-määrite. Upotuksen koko asetetaan width- ja height-määritteillä.• Esimerkiksi tiedostossa gravityforcelab.html olevan

simulaation upotus<iframe src="./attachments/gravityforcelab.html" width=800 height=600></iframe>

• Esikatselussa näkyy upotettavalle simulaatiolle varattu alue.

(Simulaation toimintaa voi kokeilla kirjoittamalla src-määritteeseen simulaation verkko-osoitteen. Jos teet näin, muista muuttaa simulaation osoite Abitti-kokeen liitteeseen viittaavaksi. Kuvan kokeilu on tehty ylimääräisessä tehtävässä, joka on poistettu valmiista kokeesta.)

Videon upottaminen tehtävään• Video upotetaan tehtävään video-elementillä, jossa on

videotiedoston lähteen ilmaiseva src-määrite, videon leveys (width) ja korkeus (height) pikseleinä sekä controls-määrite.• Määritteellä controls saadaan käyttöön selaimen

ohjaimet kuten videon käynnistävä painike.• Esimerkiksi upotetaan tiedosto video.mp4, jolle

asetetaan leveys 400 pikseliä ja korkeus 300 pikseliä.

<video src="./attachments/video.mp4" width=400 height=300 controls></video>

• Videolle varataan tila width- ja height-määritteiden perusteella. Jos videon koko poikkeaa annetuista korkeuden ja leveyden arvoista, selain skaalaa videon siten, että video mahtuu alueeseen ja videon mittasuhteet säilyvät.

Esikatselu Abitti-koe