# timOhjeet

Imagex

Imagex on tehtävätyyppi, jossa tekijä raahaa kuvia tai muita objekteja näkyviin tai näkymättömiin kohteisiin.

Lisää esimerkkejä.

Lue myös YAML-kieli TIMissä.

1 Esimerkki

1.1 Perusesimerkki

# aukko1a

Tämä tehtävä saadaan aikaan seuraavanlaisella Yamlilla:

```{#aukko1 plugin="imagex"}
header: Raahaa sanat oikeille paikoille
canvasheight: 120
stem: Raahaa sanat oikeille paikoille
objects: 
  - 
    type: "textbox"
    position: [50, 10]
    id: "naukuu"
    pin:
      position: 
        align: "center"
    textboxproperties:
      borderWidth: 0
      borderColor: "white"
      font: "20px times"
      size: [65,25]
  - 
    position: [150, 10]
    id: "istuu"
    pin:
      visible: true
targets: 
  - 
    id: "target1"
    cornerradius: 40
    color: "gray"
    snapColor: "white"
    position: [93, 72]
    size: [65, 20]
    points: {istuu: 1}
  - 
    id: "target2"
    borderWidth: 1
    cornerradius: 5
    color: "gray"
    snapColor: "white"
    position: [241, 72]
    size: [75, 20]
    points: {naukuu: 1}
    
fixedobjects:
  - 
    type: "textbox"
    position: [10, 60]
    id: "objn"
    textboxproperties:
        borderWidth: 0
        borderColor: white
        textColor: "black"
        font: "20px times"
        text: "Kissa              puussa ja                kovaa."
```

Vaikka vaadittava määrä tekstiä tehtävää kohden on suuri, on valtaosa tästä yamlista onneksi vain ulkonäön tarkempaa määrittelyä varten. Varsinaisesti olennaiset osat määrittelystä ovat seuraavat:

1.2 Raahaustehtävä

# pairs

Tämä tehtävä saadaan aikaan seuraavalla YAMLilla

``` {#pairs plugin="imagex"}
{%- set maxpoints = 4 %}
{% set lineheight = 30 %}
{% set wordwidth = 180 %}
{% set word2width = 180 %}
{% set fontsize = 20 %}
{% set leftmargin = 30 %}
{% set margin = 5 %}
{% set hyphenmargin = 5 %}
{% set arrowsize = 60 %}
{% set arrowmargin = 10 %}
{% set words = [{"w1": "1+1 =",      "w2": "2"},
                {"w1": "1+2 =",      "w2": "3"},
                {"w1": "2+2 =",      "w2": "4"},
               ] %}
{% set n = words|length %}               
header: Find pairs
stem: Drag the blue boxes beside the green boxes so that you match answers to the equations.
finalanswer: true
#answerLimit: 1
modelAnswer:
 answer: |!!
 {%for i in range(0,n)%}
 {% set w = words[i] %}
 - %%w.w1%%: %%w.w2%%
 {% endfor %}
!!
 lock: false
 count: 1
canvasheight: %%(n+0.3)*lineheight%%
objects:
{% set rints = range(0, n) | shuffle %}
{% for i in range(0,n)%}  
{% set w = words[i] %}
  - # dragable words
    id: "%%w.w2%%"
    type: "textbox"
    position: [%%leftmargin + wordwidth + 2*hyphenmargin + fontsize + word2width  + 2*arrowmargin + arrowsize + word2width/2%%, %%fontsize + rints[i]*lineheight%%]
    a: 0
    correctColor: lightgreen
    incorrectColor: "#f26a63"
    pin:
        visible: false
        position:
            align: "center"
            # align: "west"
    textboxproperties:
        textAlign: "center"
        #cornerradius: 5
        borderWidth: 1
        borderColor: red
        borderColor: blue
        textColor: "black"
        # fillColor: "transparent"
        font: "%%fontsize%%px times"
        text: "%%w.w2%%"
        size: [%%word2width%%, %%fontsize+4%%]
{% endfor %}    
targets: 
{% for i in range(0,n) %}  
{% set w = words[i] %}
  - # target areas
    id: "%%w.w1%%"
    color: "transparent"
    lineColor: "transparent"
    color: "gray"
    snapColor: "red"
    dropColor: transparent
    borderWidth: 1
    position: [%%leftmargin + 2*hyphenmargin + fontsize + wordwidth/2 + word2width%%, %%fontsize + 2 + i*lineheight%%]
    size: [%%word2width%%, %%fontsize+margin%%]
    points: {"%%w.w2%%": %%maxpoints/n%%}
#  - # mini target just for correct answer
#    id: "m%%w.w1%%"
#    color: "transparent"
#    snapColor: "red"
#    dropColor: transparent
#    borderWidth: 1
#    position: [%%leftmargin + wordwidth%%, %%fontsize+3 + i*lineheight%%]
#    size: [1, 1]
#    points: {"%%w.w2%%": %%maxpoints/n%%}
{% endfor %}    
fixedobjects:
{% for i in range(0,n) %}  
{% set w = words[i] %}
  - # left words
    type: "textbox"
    position: [%%leftmargin%%, %%fontsize/2 + i*lineheight%%]
    size: [%%wordwidth%%, %%fontsize+margin%%]
    id: "fix%%w.w1%%"
    textboxproperties:
        textAlign: "center"
        borderWidth: 1
        borderColor: "green"
        # borderWidth: 0
        # borderColor: transparent
        textColor: "black"
        font: "%%fontsize%%px times"
        text: "%%w.w1%%"    
        size: [%%wordwidth%%, %%fontsize+5%%]
  - # hyphen
    type: "textbox"
    position: [%%leftmargin + wordwidth + hyphenmargin%%, %%fontsize/2 + i*lineheight%%]
    size: [1, %%fontsize%%]
    id: "fix%%w.w1%%"
    textboxproperties:
        borderWidth: 0
        borderColor: white
        textColor: "black"
        font: "%%fontsize%%px times"
        text: " - "    
        size: [1, %%fontsize%%]
{% endfor %}    
  - # arrow
    type: "img"
    position: [%%leftmargin + wordwidth + 2*hyphenmargin + fontsize + word2width + arrowmargin%%, %%lineheight*(n-1)/2%%]
    size: [%%arrowsize%%, %%arrowsize%%]
    id: "nuoli"
    imgproperties: 
      src: "/images/681472/image.png"
```

2 Tehtävän yleiset asetukset

```{#aukko1 plugin="imagex"}
header: Raahaa sanat oikeille paikoille
canvasheight: 100
stem: Raahaa sanat oikeille paikoille
button: Tallenna
´´´

Header on tehtävän otsikko. canvasheight on tehtäväalueen leveys, ja tätä vastaa canvaswidth, joka on tehtäväalueen leveys. Mikäli näitä ei määritellä, annetaan alueelle oletuksena leveys 800 ja korkeus 600. button-attribuutilla voi korvata save-sanan painikkessa, jolla tehtävä tallennetaan.

Muita tähän kategoriaan kuuluvia asetuksia ovat seuraavat:

```
background: 
  src: "https://tim.jyu.fi/static/images/tim-logo_42height.png"
  size: [100,50]
  position: [0, 0]
answerLimit: 3

finalanswer: true
´´´
# teht2a

background on tehtävän tausta, mikäli tämän jättää määrittelemättä on taustalla vain valkoista. max_tries on maksimimäärä yrityksiä, joka yksittäiselle tekijälle annetaan tehtävään jos tätä ei määrittele voi vastauksia antaa niin monta kuin haluaa. finalanswer -muuttuja määrittääsen, voiko tehtävän oikean vastauksen katsoa klikkaamalla -Show answer -"nappia". Jos finalanswer on true opiskelija ei voi saada pisteitä tehtävästä napin painamisen jälkeen. Mikäli finalanswer on false napin painaminen ei tee mitään.

3 Raahattavat objektit

objects: 
  - 
    type: "textbox"
    position: [50, 00]
    id: "naukuu"
    pin:
      position: 
        align: "center"
    textboxproperties:
      borderWidth: 0
      borderColor: "white"
      font: "20px times"
      size: [65,25]
  - 
    type: "textbox"
    position: [150, 00]
    id: "istuu"
    pin:
      visible: true
      position: 
        #align: "southeast"
        align: "center"
      color: "purple"
    textboxproperties:
      borderWidth: 0
      borderColor: "white"
      font: "20px times"
      size: [65,25]

Raahattavat objektit esitetään yamlissa listana. Objekteilla tulisi olla aina ainakin sijainti (position), tyyppi (type, tämä voi olla image, textbox tai vector), ja yksilöllistävä id, joka voi olla merkkijono tai numero. Textboxilla id toimii myös tekstinä, ellei tekstiä ole erikseen määritelty textboxproperties -kohdassa.

3.1 Vektori

    type: "vector"
    a: 0
    position: [100, 100]
    size: [100,10]
    id: "obj6"
    vectorproperties:
      color: "blue"
# image6x

Vektorille voidaan määrittää leveys ja korkeus size -taulukossa. Vektorin väri määritetään color -muuttujassa. Vektorille on mahdollista määrittää tekstilaatikko tai kuva textboxproperties tai imageproperties -lohkojen avulla.

vectorproperties -muuttujat
Muuttuja Selitys
Color Vektorin väri

3.2 Kuva

  - 
    type: "img"
    position: [80, 80]
    id: "obj2"
    imgproperties: 
      src: "/images/117238/karpassieni.png"
      textbox: true
    pin:
      visible: true
      length: 8
      position: 
        align: "northwest"
        start: [15,15]
    textboxproperties:
      cornerradius: 5
      borderWidth: 2
      borderColor: "purple"
      textColor: "black"
      position: [15, 65]
      text: sieni
# image6x2

Kuvalla tulisi aina olla imgproperties -lohkossa määriteltynä kuvan lähde eli src. Lähteen tulisi mieluiten olla tim -palvelimelta lähtöisin. Kuvalle voidaan määritellä myös tekstilaatikko ja vektori textboxproperties ja vectorproperties -lohkoja käyttämällä.

3.3 Tekstilaatikko

    type: "textbox"
    position: [300, 500]
    id: "obj3"
    pin:
      visible: true
      position: 
        align: "south"
      color: "purple"
    textboxproperties:
      text: Vie tämä ympyrään
      cornerradius: 5
      borderWidth: 4
      borderColor: "blue"
      textColor: "yellow"
      fillColor: "black"
      font: "20px times"
      size:
# image6x3

Tekstilaatikolle voidaan määrittää textboxproperties -lohkoon monia vapaaehtoisia formatointiin vaikuttavia muuttujia, kuten teksti (text), kulman pyöreys (cornerradius), tekstilaatikon rajan paksuus (borderWidth), tekstilaatikon rajan väri (borderColor), tekstin väri (textColor), tekstilaatikon täyteväri (fillColor), fontti (font) ja tekstilaatikon koko size. Nämä kaikki voi jättää määrittelemättä ja käyttää oletusarvoja.

Ominaisuuden pin.position.align arvot voivat olla

north
northeast
est
southeast
south
southwest
west
northwest
center

4 Kohteet

targets: 
  - 
      id: "target1"
      type: ""
      cornerradius: 40
      color: "red"
      snapColor: "black"
      position: [100, 300]
      size: [40, 20]
      points: {obj1: 0.5, obj2: -0.25}
  - 
      id: "target2"
      a: 30
      type: "ellipse"
      position: [100, 400]
      size: [60, 30]
      points: {obj1: 0.5, obj2: -0.25}
# teht4

Kohteet voidaan tehtävissä määritellä joko näkyviksi tai näkymättömiksi. Näkyviä targetit ovat oletuksella, näkymättömiksi nämä saa laittamalla viivan "targets:" - sanan eteen:

-targets: 
  - 
      id: "target1"
      type: ""
      cornerradius: 40
      color: "red"
      snapColor: "black"
      position: [100, 300]
      size: [40, 20]
      points: {obj1: 0.5, obj2: -0.25}
  - 
      id: "target2"
      a: 30
      type: "ellipse"
      position: [100, 400]
      size: [60, 30]
      points: {obj1: 0.5, obj2: -0.25}
# teht5

Tällä tavalle tehty kohde ei näy myöskään kun sinne raahataan. Jos haluaa että kohde on alunperin näkymätön ja sitten tulee näkyvä väri kun sinne raahataan, voi väriksi laittaa läpinäkyvän:

    color: transparent

Jos halutaan että pudotuksen jälkeen ei ole taas mitään raameja, niin sitten laitetaan

dropColor: transparent

Kohteille olennaisimmat muuttujat ovat points ja type. Points on hakemisto, johon asettamalla objektin nimen ja perään luvun määritellään paljonko kyseisen objektin kohteeseen raahaamalla saa pisteitä.

Eli siis jos olisi

points: {Kissa: 1}

Saisi Kissa -objektin raahaamalla kohteeseen yhden pisteen.

Kohteille vapaavalintaisia muuttujia ovat mm. väri (color) ja väri kun kohteeseen on raahattu objekti (snapColor). Kohteille voidaan määritellä tyyppi, oletuksella tämä on nelikulmio, laittamalla type: "ellipse" ellipsi.

Mikäli tehtävässä on käytössä oikeiden vastausten näyttäminen, jokaisesta pisteitä antavasta kohteesta vedetään vihreä viiva siihen raahattavaan obkjektiin, joka kohteeseen kuuluisi laittaa. Tämän viivan väriä voi muuttaa kohteen linecolor-asetuksella. Jos viivoja ei haluta ollenkaan näyttää, voidaan kohteen viivan väriksi laittaa läpinäkyvä väri asetuksella

lineColor: transparent

5 Taustaobjektit

Tehtävään voidaan määrittää taustalla olevia, täysin kosmeettisia otuksia määrittelemällä yamliin fixedobjects -lohko:

fixedobjects:
  -
      type: ""
      cornerradius: 0
      size: [20, 20]
      position: [90, 20]
  -
      type: "vector"
      cornerradius: 0
      position: [50, 330]
      size: [300, 10]
      vectorproperties:
        color: "black"
  -
      a: 90
      position: [50, 330]
      size: [300, 10]

Näille otuksille toimivat kaikki samat temput, kuin targeteille ja raahattaville objekteille.

Kaikki luvussa 3 esitellyt objektityypit (kuvat, vektorit, tekstilaatikot) voi myös määritellä taustaobjektiksi käyttäen samoja asetuksia.

Alla olevassa esimerkissä luodaan "taustakuva", joka koostuu kahdesta vektorista:

# image6xg

Jos taustalle haluaa (yhden tai usean) kuvan, voi täten käyttää img objektityyppiä kuten luvussa 3.2.

Yksinkertaisille taustakuville background-asetus saattaa olla yksinkertaisempi mutta rajoitetumpi.

6 Vapaa piirto

# vapaa1

Piirtoesimerkki on saatu YAMLilla:

``` {plugin="imagex" #vapaa1}
header: Piirrä esimerkki epäjatkuvasta funktiosta
#lazy: true
canvasheight: 420
#freeHandVisible: true
#freeHandLineVisible: true
freeHand: true
#freeHandLine: true
freeHandColor: red
freeHandWidth: 3

targets: 
fixedobjects:
  -
      type: "vector"
      cornerradius: 0
      position: [50, 400]
      size: [400, 2]
      vectorproperties:
        color: "black"
        arrowheadwidth: 20
        arrowheadlength: 20
  -
      a: 90
      type: "vector"
      cornerradius: 0
      position: [50, 400]
      size: [400, 2]
      vectorproperties:
        color: "black"
 
```

7 Olioiden sijoittelu

Olioiden sijoittelussa annetaan sen position -attribuutti. Joskus koordinaattia voi olla työläs laskea ja koordinaatin voi ottaa esikatselukuvasta seuraavasti:

  1. Siirry editorissa sille riville, jossa lukee olion position:
  2. klikkaa hiirellä esikatselukuvassa sitä kohtaa, johon haluat sijoittaa olion
  3. jos ei osunut ihan oikealla kohtaa, klikkaa uudestaa kunnes olio on haluamassasi kohdassa

These are the current permissions for this document; please modify if needed. You can always modify these permissions from the manage page.