Kuvien raahaamiseen perustuva tehtävä (eEducation Fysiikka) #412

Open dezhidki opened 8 years ago

In GitLab by @Smibu on Jun 2, 2016, 13:06

Pitäisi vääntää tehtävä, jossa opettaja voi antaa oppilaalle taustakuvan, muita kuvia ja koordinaatteja joihin näitä kuvia voitaisiin mätkiä ja oikeat kohdat oikeille kuville. TIM sitten automaagisesti tarkistaa, onko opiskelija mätkinyt kuvat oikeisiin paikkoihin. Kuvatehtävän voi antaa joko siten, että oppilas näkee pisteet, joihin kuvia tulisi raahata, tai siten, että oppilaan täytyy itse päätellä, mihin kuvia täytyy raahata.

Eli jotain tällaista

Speksi jolla lähdetään koodaamaan löytyy tuolta: https://tim.jyu.fi/view/tim/TIMin%20kehitys/Kuvaraahausteht%C3%A4v%C3%A4n%20speksi

Osatehtävät

[x] Back endin toteutus
[x] Front endin toteutus
[x] Testit läpi
[x] Vaatimusmäärittely
[x] Pohjaksi myös muita elementtejä kuin kuvia
[x] Pohjaksi esim ohjelmalistaus tai ruotsinkielinen teksti (ei kuvana)
[ ] yamlissa olevien piirto-ohjelman syntaksuivirheiden käsittely ja esittäminen tehtävän tekijälle
[x] prosessorin kulutus kohdilleen
[x] palauttaminen alkutilaan
[x] objektien muuttuminen vaikka on vastattua (ainakin tekstit, värit yms)
[x] rivinvaihdot tekstikomponentteihin
[ ] Kaikkeen oletuksena visible: true
[x] kaikkien objektien oletusarvoiksi se mikä on edellisessä
[x] Mahdollisuus määritellä kaikille pätevät parametrit x, y jne yamlissa
[x] Mobiililaitteille leveämpi raahausalue
[x] Size ellipseille halkaisijana
[ ] Imagejen vilkkuminen
[x] Väri sille, kun objekti on vapautettu kohteeseen
[ ] Minimalistisempi textbox
[x] Preview toimimaan
[ ] Tutoriaali ja speksi kuntoon
[x] Imagex startPlugins.sh skriptiin
[x] Tim -serverillä olevien muutosten siirto imagexiin
[x] init erikseen
[ ] BUGI: kuvat ei aina piirry ku on kysyny vastauksen servultaa
[x] Rotaatio objekteille
[x] background fixedobjektiksi
[x] vektorin nuolen pään koko attribuutteina
[x] pinnin pisteen koko attribuutteina: pin: dotradius
[x] snapille offset
[x] päällekkäisille objekteille tarkistus onko alla toinen objekti jos on touchscreen
[x] backgroundcolor
[x] vektorin pisteen paikka
[x] plugin toimimaan ilman headeria
[x] kosketusnäyttö toimimaan edgellä
[x] marginit textboxille
[x] targetille maksimimäärä objekteja

In GitLab by @Smibu on Jun 9, 2016, 12:01

Mä en äkkiseltään keksi, mitä tästä enää puuttuis tai mikä tässä ilmiselvästi olis vialla. Lytätkää jos keksitte jotain. – Ilkka Peuron

In GitLab by @Smibu on Jun 9, 2016, 12:27

@ilkkapeuron voiko jossakin kokeilla jotakin? – Vesa Lappalainen

In GitLab by @Smibu on Jun 9, 2016, 12:44

@kimmohniskanen @vesal Onko se javascripti jossain nähtävillä? back endistä ei ole vielä mitään muuta kuin epämääräinen kasa lappuja ja nappi pluginien alavalikossa, sekin vaan lokaalilla koneella. – Ilkka Peuron

In GitLab by @Smibu on Jun 9, 2016, 20:28

@ilkkapeuron @vesal laitan linkin kun saan sen sellaiseen kuntoon että kehtaa esitellä tässä illan aikana – Kimmo Niskanen

In GitLab by @Smibu on Jun 10, 2016, 01:34

@ilkkapeuron @vesal En saanut vielä tuota jsonin lukua tiedostosta onnistumaan joten en Ilkka käyttänyt vielä sitä sinun toimittamaa tiedostoa. Tuossa on kuitenkin linkki tuohon html:ään: http://users.jyu.fi/~kihenisk/esim/index.html ja samassa hakemistossa javascript: main.js. Json-scripti on tuossa siis yhdellä rivillä muuttujassa json jota vastaava tiedosto on: http://users.jyu.fi/~kihenisk/esim/values.json. Jatkan huomenna opiskelua miten saa tiedoston luettua suoraan tuohon JSON.parseen. – Kimmo Niskanen

In GitLab by @Smibu on Jun 10, 2016, 11:00

@kimmohniskanen @ilkkapeuron Ootteko kirjoittaneet jonkun TIM-dokun, jossa tuota JSONia olisi speksattu? Sitähän ei muuten lueta mistään, vaan se lähetetään plugin-palvelimen puolelta siinä html/multihtml vastausviestissä. Ja csPluginissa jouduin pakkaamaan tuon HEXDUMPiksi jotta ei sotkeennu HTML:ään.

Tuo west/east on ihan ok idea, mutta käyttäisin kuitenkin koordinaatteja ensisijaisesti ja sitten nuo wets/east ovat "makroja", jotka tulkitaan tietyiksi koordinaateiksi. Kaikki object-jutut kannattaisin kerätä yhteen olioon, eli ennemminkin olisi objects ja sen alla taulukkko ja yhdessä objektissa on kaikki siihen kuluva, kuva, pinnin paikka, koordinaatti jne. Eli ei montaa rinnakkaista taulukkoa vaan lähinnä kaksi taulukkoa.

Targetissa pitäisi jokaista kohdetta varten voida olla eri koko ja tieto siitä näytetäänkä paikka vai ei. Toki voi olla erikseen oletusmääritys jolla voi sanoa noita asioita kerraööa kaikille niille, jossa ei ole omaa arvoa jollekin. Sitten pitäisi määritellä myös paljonko saa pisteitä minkäkin objektin raahaamisesta mihinkäkin targettiin. Ja voi olla oikein monella eri tavalla eli ei välttämättä ole yhtä oikeata paikkaa vaan joku toinenkin voi tuottaa samalle objektille pisteitä.

Sitten netissä on paljon YAML/JSON konverttereita ja käyttäjää varten se plugin on luontevinta kirjoittaa YAMLilla ja sitten konvertoida JSONiksi pluginille lähettämistä varten. Noin se menee esim csPluginin kohdalla ja Pali-esimerkkipluginissa. Noilla netin konverttereilal voi kokeilla miltä tuo JSON näyttäisi YAMLina.

Tällä hetkellä toimii kohttuullisesti myös iPaillä ja WP10:llä ja Chromelle. Muita en ole kokeillut. Targetin luona jos targettiin pudottaa niin hyppää aina muutamia millejä yläpuolelle. Tuossa olisi voinut olla joku muukin pinPosition malliksi että miten toimii.

Kuvathan ladataan varmaan URL-osoitteista.

Sitten noihin kuviin voisi yrittää liittää tekstejä, joita tuonne voi sijoittaa, Esim. Objektin yksi ominaisuus voisi olla text ja sen sijainti, jolloin kaikkea ei tarviisi tehdä kuvana. Ehkä jopa tuollaiset perussuorakaiteet voisi olla valmiina "koristeita", eli esim tuon voisi jotenkin sanoa myös: (saa muuttaa määritystä jos siltä tuntuu)

"objects": [
   {
       name: "adipur",
       text: { t: "adiabaattinen puristuminen", color: "red", font: "..." },
       rectangle: {x: 500, y: 20, border: red},
       pin: { Point: "west",  // sama kuin:  position; {x:-20,y:0, posOrg: "LeftCenter"}
                color: black
                r: 10,
              }
   },
   ...
],
"targets": [
   {
      name: "adigoal1",
      rectangle: { x: 190, y: 240, w: 20, h:20, fill: "blue" },
   },
   {
      name: "adigoal2",
      rectangle: { x: 280, y: 200, w: 20, h:20, fill: "green", rotate: 45 },
   },
   ...

]

"points" : [
  { object: "adipur", target: "adigoal1", point: 1.0 },
  { object: "adipur", target: "adigoal2", point: 0.5 },
  ...
]

Targettien muotoakin voisi jollakin tavalla voida määritellä ainakin perusmuodot ellipse, circle, rectange, area ja noiden kierrot.

Kaikkea tuota tietoa ei välttämättä lähetetä JavaScripitlle, vaan esim. tuo points osa jää vain palvelinpuolen tietoon.

Mulla tuo on tehty csPluginissa niin, että jos ominaisuuden edessä on miinus (-), niin sitä ei lähetetä selaimelle saakka. Näin itse pistetys tehdään pluginin palvelinpään koodissa jolloin oikeata vastausta ei pysty lunttaamaan.

Javascript voisi lähettää palvelimelle objektien loppusijoitukset ja tiedon siitä minkä targettien päälle ovat osuneet niin sitten tuota osumisevertailua ei tarviisi tehdä monessa paikassa. Pluginin palvelinpään koodin tehtäväksi jäisi siis lähinnä tuon points taulukon tutkiminen ja pisteiden kertominen Timille. – Vesa Lappalainen

In GitLab by @Smibu on Jun 10, 2016, 12:17

@vesal @ilkkapeuron Tuolla on itseasiassa "label" ominaisuus noilla dragObjecteilla mutta en käyttänyt sitä tuossa esimerkissä eikä siinä ole sijaintia määritelty mutta parantelen sitä. Voisikohan olla tarvetta myös targeteille labelit. Ei tule äkkiä mieleen mihin voisi tarvita mutta helppohan ne olisi lisätä.

En ole minä ainakaan kirjoittanut TIM-dokua mutta oliko Ilkalla jotain Trellossa jo hahmoteltu..

Tuon tyyppisessä tehtävässä on minusta syytä näkyä nuo targetit koska uskon että fyysikko (oli sitten kuinka aloitteleva tahansa) tajuaa että tuo kohta ei ole ainoa kohta käyrällä joka on oikein vaan kyse on vain oikean käyrän valinnasta. Jos on mutkaisia käyriä tms niin kohteen muodon määrittely voi mennä hankalaksi. Minusta ainakin tuo snap tekee mukavamman käyttää tässä tilanteessa. Mutta sitten kun target ei saa näkyä niin sittenhän ei saisi olla tuota snap-ominaisuuttakaan. Pitäisikö snap kytkeä tuohon näkyvyyteen vai olla valittavissa erikseen?

Mutta hyvä että tuossa on kuitenkin jotain järkeä. Alan työstää noita Vesan mainitsemia juttuja. Ja tosiaan tuo siirtää sen objektin ylöspäin minullakin kun päästää irti. Laitan korjaten. – Kimmo Niskanen

In GitLab by @Smibu on Jun 10, 2016, 13:07

@kimmohniskanen @vesal Vielä ei ole TIM:issä tästä mitään, ajattelin askarrella sinne dokun sitten kun ollaan saatu tänne aikalailla valmis speksi ja kun tiedän suurinpiirtein mihin kohtiin ja millaisia lisäyksiä tuonne cspluginin koodeihin pitää laittaa. – Ilkka Peuron

In GitLab by @Smibu on Jun 10, 2016, 14:05

@card

Joskus voi olla tilanteita joissa se arvostelukohde ei näy. Ja joskus voisi olla tilnatieta joissa pisteet riippuvat vaikka oikeasta etäisyydestä. Esim. Euroopan kartta johon vetellään pääkaupunkeja niin pisteit voisi saada miten vähän millejä on pielessä jonkin funktion mukaan. Eli molempia tarvitaan, näkyviä kohteita ja näkymättömiä kohteita. Tuo pisteytys tulee olemaan ikuinen haaste ja aluksi on vaan tyydyttävä yksinkertaisiin ratkaisuihin jotak eivät silti sulje pois myöhempiä mahdollisuuksia. Tänän 1. käyttötapaus on nuo fyysikkojen jutut, mutta heti kun muut näkevät, varman keksivät omia tarpeitaan.

Kuva muuten kannattaa kokeilla myös SVG yms että nekin saa toimimaan.

csPluginiin tätä ei kannata yhdistää (korkeintaa käyttää siellä olevaa koodia mallina joihinkin kohti). Enemmän tämä liittyy tulevaan Timppa (luentokyselyt) @velipekkaoksanen @juvalkee kyselyiden muuttamiseen tavalliseksi kyselyiksi, Mutta sitä ennen tästä ehkä kannattaa tehdä ihan oma plugin ja katsoa jälkeenpäin kuinka paljon asioita voi yhdistää kun näkee paremmin yhteiset ominaisuudet. csPluginin käyttötarkoitus on lähinnä siihen kun käyttäjä kirjoittaa tekstiä ja se mahdollsietsi ajetaan jollakin (useimmiten shellin kautta jollakin kääntäjällä) ja sitten pisteytetään. Tässähän ei (ainakaan tähän tietoon) ajeta mitään vaan pisteet riippuvat enemmän tai vähemmän raahausten paikoista. – Vesa Lappalainen

In GitLab by @Smibu on Jun 21, 2016, 16:25

@card tuohon on nyt linkattu timissä oleva specsi, joka alkaa ainakin mun mielestä olemaan bouttiarallaa valmis. jos huomaatte jotain outoa/puutteellista niin sanokaa. – Ilkka Peuron

In GitLab by @Smibu on Jun 21, 2016, 16:37

@ilkkapeuron @kimmohniskanen Tee pikkuesimerkki sinne sellaisesta missä on "oikeaa dataa". Sitten eikös tekstiä voinut olla myös kuvassa ja miksei vektorissakin. Tuli mieleen että sellaisissa kartta-tehtävissä on monesti niitä pinnejä. Ja silloinkin siinä voi olla teksti. Se raahattava (ja miksei targettikin) kannattaa varmaan tehdä niin, että se peritään jostain perusraahattavasta jolloin uusien tyyppien tekeminen on helppoa, ks:

https://trac.cc.jyu.fi/projects/ohj1/wiki/graphics

Tuon lähdekoodista näkee miten tuo koostuu

https://trac.cc.jyu.fi/projects/ohj1/browser/graphics/trunk/fi/jyu/mit/graphics/Drawable.java

https://trac.cc.jyu.fi/projects/ohj1/browser/graphics/trunk/fi/jyu/mit/graphics/BasicShape.java

https://trac.cc.jyu.fi/projects/ohj1/browser/graphics/trunk/fi/jyu/mit/graphics/Line.java

Elikkä tuossa linessä ei ole enää tarvittu paljoa uutta. – Vesa Lappalainen

In GitLab by @Smibu on Jul 22, 2016, 10:43

Ainakin sellainen on, että jos kirjoitan align-nimen väärin, niin kaikki objektit katoavat

Mahdollisiin virheisiin kannattaisi yrittää jonkinlaista error-aluetta, johon niitä tulostettaisiin.

Nyt tulee konsoliin hirveää vauhtia:

1130imagex.js:393 Uncaught TypeError: Cannot read property 'off' of undefineddraw @ imagex.js:393draw @ imagex.js:357(anonymous function) @ imagex.js:133

Tuossa käykin oikeasti huonosti:

otan minkä tahansa align ja lähden muuttamaan hitaasti kirjoitettuna southeast tilalle southw ja jään tuossa miettimään. Se alkaa takomaan tuota konsoliin (muistakaa pitää aina konsoli auki kun testaatte :-) ja vaikka saan kirjoitettua southeast oikein, niin tuo virheilmoituksen tuleminen jatkuu.

Sitten suljen editorin ja vielä jatkuu tuo virheilmoituksen tuleminen.

Ja koneen prosessori huutaa täysillä.

Vasta refresh auttaa.

Eli tuossa on kokeiltava kaiki mahdolliset virheet mitä tuohon YAMLiin voi tehdä ja nisitä toivuttava jotenkin. – Vesa Lappalainen

In GitLab by @Smibu on Jul 22, 2016, 10:44

Tuossa on vielä aika kova prosossorin kulutus koko ajan.

Eli jos refreshaan sivun enkä avaa yhtään tehtävää näkyville, niin mun prosesorin kulutus on 2%.

Kun avaan yhden tehtävän, niin kulutus nousee yli 8%:iin.

Toisella kuvalla jo yli 16%:iin.

Eli siellä ei saa olla sitä timeriä käytössä (johtuneen siitä), vaan ainoastaan tapahtumista saa tehdä uutta piirtoa. Ja nekin ehkä viivästetysti (silloin voi olla single shot timer), eli kun hiiri liikkuu, niin siitä voi laukaista piirron jonkin sopivan ajan kuluttua. Mutta jos edellinen piirto ei ole vielä tehty, ei kannata laukaista uutta.

En tiedä onko canvaksella mitään layereitä, joilla raahauksen voisi tehdä niin, että jos joku on raahattavana, ottaisi sen pois peruslayeristä ja nostaisi yksikseen eri leyerille ja vain sitä tarviisi piirtää erikseen. Tuo olisi ehkä nopeutusta jos em. kpl tapa käy liian – Vesa Lappalainen

In GitLab by @Smibu on Jul 22, 2016, 10:45

Tuli muuten mieleen että saisin tällä ihan hyvin ohj1 tehtäviäkin tehtyä:

Rahaa ohjelman päälle seuraavat käsitteet:

luokan nimi
muuttuja
muuttujalle sijoittelu

Ongelmaksi tulee että miten saan sen ohjelman pohjaksi?

En viitsisi kuvaa tehdä kaikista ohjelmista koska silloin sen kuvan ylläpito tulee työlääksi.

Eli tuossa käyttötapauksessa olisi kiva että voisin tehdä sinne tekstielementin pohjaksi, jossa olisi se ohjelma.

Samalla saisi myös erilaisia kielioppitehtäviä että raahaa subjekti yms paikalleen. – Vesa Lappalainen

In GitLab by @Smibu on Jul 22, 2016, 10:45

Sellainen tuossa voisi olla vielä toimintona, että pääsee takaisin alkutilanteeseen (vrt csPlugin Alusta).

Erityisen tärkeä opettajalle jos haluaa näyttää luennolla tehtävää ja on tehnyt siihen jo jonkin oman malliratkaisun. – Vesa Lappalainen

In GitLab by @Smibu on Jul 22, 2016, 10:46

Selallaisen muuten huomasin että jos olen vastannut tehtävään, niin silloin muutokset objekteihin, esim niiden teksteihin, eivät tule näkyviin. Miksihän se on noin? – Vesa Lappalainen

In GitLab by @Smibu on Jul 22, 2016, 10:46

Mutta asia oli oikestaan että jos YAMLiin kirjoittaa \n tai kirjoittaa tekstiä usealle riville (jota tarviisin siinä ohjelmatehtävässä), niin se tulostuu silti yhdelle riville.

Eli voisi olla jonkinlainen käsittely noille rivinvaihdoille. – Vesa Lappalainen

TIM-JYU / TIM

Kuvien raahaamiseen perustuva tehtävä (eEducation Fysiikka) #412

Osatehtävät