SlideShare a Scribd company logo
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.
Liitteitä Abitti-kokeeseen
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

More Related Content

Featured

Artificial Intelligence, Data and Competition – SCHREPEL – June 2024 OECD dis...
Artificial Intelligence, Data and Competition – SCHREPEL – June 2024 OECD dis...Artificial Intelligence, Data and Competition – SCHREPEL – June 2024 OECD dis...
Artificial Intelligence, Data and Competition – SCHREPEL – June 2024 OECD dis...
OECD Directorate for Financial and Enterprise Affairs
 
How to Leverage AI to Boost Employee Wellness - Lydia Di Francesco - SocialHR...
How to Leverage AI to Boost Employee Wellness - Lydia Di Francesco - SocialHR...How to Leverage AI to Boost Employee Wellness - Lydia Di Francesco - SocialHR...
How to Leverage AI to Boost Employee Wellness - Lydia Di Francesco - SocialHR...
SocialHRCamp
 
2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot
Marius Sescu
 
Everything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPTEverything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPT
Expeed Software
 
Product Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage EngineeringsProduct Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage Engineerings
Pixeldarts
 
How Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental HealthHow Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental Health
ThinkNow
 
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfAI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
marketingartwork
 
Skeleton Culture Code
Skeleton Culture CodeSkeleton Culture Code
Skeleton Culture Code
Skeleton Technologies
 
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024
Neil Kimberley
 
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)
contently
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024
Albert Qian
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
Kurio // The Social Media Age(ncy)
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
Search Engine Journal
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
SpeakerHub
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next
Tessa Mero
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Lily Ray
 
How to have difficult conversations
How to have difficult conversations How to have difficult conversations
How to have difficult conversations
Rajiv Jayarajah, MAppComm, ACC
 
Introduction to Data Science
Introduction to Data ScienceIntroduction to Data Science
Introduction to Data Science
Christy Abraham Joy
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best Practices
Vit Horky
 

Featured (20)

Artificial Intelligence, Data and Competition – SCHREPEL – June 2024 OECD dis...
Artificial Intelligence, Data and Competition – SCHREPEL – June 2024 OECD dis...Artificial Intelligence, Data and Competition – SCHREPEL – June 2024 OECD dis...
Artificial Intelligence, Data and Competition – SCHREPEL – June 2024 OECD dis...
 
How to Leverage AI to Boost Employee Wellness - Lydia Di Francesco - SocialHR...
How to Leverage AI to Boost Employee Wellness - Lydia Di Francesco - SocialHR...How to Leverage AI to Boost Employee Wellness - Lydia Di Francesco - SocialHR...
How to Leverage AI to Boost Employee Wellness - Lydia Di Francesco - SocialHR...
 
2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot
 
Everything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPTEverything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPT
 
Product Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage EngineeringsProduct Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage Engineerings
 
How Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental HealthHow Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental Health
 
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfAI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
 
Skeleton Culture Code
Skeleton Culture CodeSkeleton Culture Code
Skeleton Culture Code
 
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024
 
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
 
How to have difficult conversations
How to have difficult conversations How to have difficult conversations
How to have difficult conversations
 
Introduction to Data Science
Introduction to Data ScienceIntroduction to Data Science
Introduction to Data Science
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best Practices
 

Liitteitä Abitti-kokeeseen

  • 1. Liitteitä Abitti-kokeeseen Julkaistu 7.2.2017 © Riitta Salmenoja Tämä teos on lisensoitu Creative Commons Nimeä-EiKaupallinen-EiMuutoksia 4.0 Kansainvälinen -lisenssillä.
  • 2. Tarvitset koetehtävät ja kokeeseen tulevat tiedostot. Älä käytä tiedostojen nimissä kirjaimia å ä ö
  • 3. Kopioi kaikki kokeeseen tulevat tiedostot samaan kansioon.
  • 4. Valitse kaikki tiedostot ja pakkaa ne zip- tiedostoksi.
  • 8. Kirjoita kokeen nimi ja ohje kokeeseen.
  • 10. Kirjoita tehtävänanto. Lisää monivalinnan teksti ja vastausvaihtoehdot.
  • 11. Tämä riittää aluksi. Palaa kokeiden hallintaan.
  • 12. Siirrä koe omalle tietokoneellesi.
  • 13. Jos koneesi ehdottaa zip-tiedoston avaamista, älä avaa tiedostoa, vaan tallenna se.
  • 14. Siirrä omalle koneelle ladattu transfer- alkuinen zip-tiedosto kansioon, jossa on attachments zip-tiedosto.
  • 15. Siirrä attachments zip-tiedosto transfer- alkuiseen zip-tiedostoon.
  • 19. Liitteet sisältävä koe on valmiina muokattavaksi.
  • 21. 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.
  • 22. 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”>
  • 23. • Esikatselussa näkyy kuvan kohdalla alt- määritteeseen kirjoitettu teksti. Esikatselu Firefox-selaimessa
  • 24. • Tehtävään upotetun kuvan voi Abitti-kokeessa kopioida ja liittää johonkin ohjelmaan.
  • 25. Kuva monivalinnan vaihtoehtona • Liitteenä olevia kuvia voi laittaa monivalinnan vaihtoehdoiksi. Älä paljasta tiedoston nimessä oikeaa vaihtoehtoa. Esikatselu
  • 26. Varmista, että kirjoitat tiedoston nimen ja tyypin oikein.
  • 27. 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>
  • 28. • 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.
  • 29. • 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>
  • 30. 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>
  • 31. • 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.)
  • 32. 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>
  • 33. • 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