Oppimisanalytiikka – merkityksellistä aktiivisuuden visualisointia

Edellisessä oppimisanalytiikkaa käsittelevässä blogimerkinnässäni mainitsin, että esittelen vielä lisäksi erilaisen aktiivisuuskaavion toteutusta, jolla saadaan seurattua opiskelijan edistymistä vaikkapa tietyn aihealueen parissa. Tässä merkinnässä avaan sen taustoja sekä teknistä toteutusta.

Miksi tämä visualisointi tarvitaan?

Ohjelmointi I –opintojaksolle oli tarpeen saada selville opiskelijan opiskelumotivaatio, suhteutettuna ryhmän motivaatioon. Suoraviivaisin lähestymistapa, joka antaa edes jotain osviittaa aiheesta, on Moodlen aktiviteettiraportti.  Sen tarjoama tieto on yleinen ryhmän aktiivisuus kurssin aikana. Se ei kohdistu tiettyyn aihealueeseen, emmekä voi määrittää milloin kukakin opiskelijoista on keskittynyt mihinkin. Lisäksi jälkikäteen tarkasteltuna Moodlen tuottama aktiivisuuskaavion saa näyttämään dataa pelkästään aina tietystä takarajasta tähän päivään saakka, joten sen visuaalinen ulosanti ei ole niin hyvä. Yhtenä rajoituksena voi ajatella olevan myös Moodlen hakuparametri – kaukaisin hakuaika aktiivisuudelle on kaksi vuotta.

Moodlen aktiivisuuskaavio. Sen saa auki kohdasta Raportit -> Tilasto.

Ratkaisun hahmottaminen

Ensimmäiseksi lähdimme liikkeelle hahmottelemalla tulevan käyttöliittymä paperille. Tämän pohjalta keskusteltiin tarpeellisista ja tarpeettomista ominaisuuksista. Havaittiin, että jos on mahdollista valita pelkästään merkityksellisiä tapahtumia, saamme parempaa tietoa aktiivisuudesta. Tätä varten hahmottelimme valintalaatikot käyrään panoksen antaville materiaaleille ja aktiviteeteille.

Karkea käyttöliittymähahmotelma syksyltä 2018

Alustavan hahmottelun jälkeen oli syytä tarkastella mitä on tehtävissä. Esimerkiksi arvosanojen näkyminen käyrällä ei ainakaan tällä tavalla esitettynä tuottanut mitään lisäarvoa, joten ne jätettiin pois. Lisäksi kaikkien tehtävien hakeminen datasta osoittautui hieman hankalaksi tuossa vaiheessa, joten rajasimme ne pois. Lisäksi verbeiksi valittiin oletuksena yleiset selkeää aktiivisuutta ilmaisevat, kuten lähettää, kommentoida, päivittää ja vastata, sekä näiden eri ilmenemistavat xAPI-rekisterissä.

Seuraavaksi voimmekin siirtyä itse kyselyn toteuttamiseen! Asioiden yksinkertaisemiseksi jätämme käsittelemättä web-teknologioilla tapahtuvan tiedon hakemiseen sekä tietoliikenteen suojaukseen liittyvät osat, ja keskitymme itse visualisoinnissa tarvittavaan dataan. Kysely suoritetaan MongoDB-tietokantaan.

Miten data noudetaan tietovarastosta?

Aloitamme kyselyn suorittavan palvelimen puolelta. Visualisoitavaa dataa varten tarvitsemme siis kurssin tapahtumien päiväysten ääripäät, sillä on turhaa visualisoida ajanhetkiä, milloin mitään ei tapahdu. Tätä varten käytämme MongoDB:n aggregaatio-ominaisuutta.

Ensimmäiseksi rajaamme tapahtumat tietyn opintojakson sisälle.

Statements.aggregate([{ 
    $match : { 
      "statement.context.contextActivities.grouping.0.id" : courseUrl
    } 
  },

Tämän jälkeen ryhmittelemme datan uudelleen tapahtumien aikaleimojen perusteella, ja laskemme niistä minimi- sekä maksimiarvon.

 { 
    $group : { 
      _id : "$statement.context.contextActivities.grouping.0.id", 
      maxDate: { $max: "$statement.timestamp"}, 
      minDate: { $min: "$statement.timestamp"} 
    } 
  }],

Palautuneen datan perusteella voimme laskea montako päivää kurssi on kestänyt, ja toteuttaa sen avulla päiväkohtaisten pistekeskiarvojen laskennan.

Seuraavaksi haemme uuden datajoukon. Selvitämme kurssille osallistuvat opiskelijat rajaamalla distinct-hakumääreellä vain yksilölliset nimet annetun kurssin sisältä.

  Statements.distinct('statement.actor.name', { 
    "statement.context.contextActivities.grouping.0.id" : courseUrl 
  },

Kun data on palautunut, laskemme kunkin opiskelijan osalta erillisen summataulukon kertyneille pisteille.

        for( var a=0;a<numStudents;a++)
        {
          var student = {
            name: studentRows[a],
            scores: []
          };
          for(var sc=0;sc<numCourseDays;sc++)  student.scores[sc]=0;
          studentsTmp[student.name] = student;
        }

Itse pisteet saamme seuraavalla kyselyllä, jossa hyväksymme mukaan palautettavaan tietuejoukkoon kaikki aktiivista tekemistä määrittävät verbit. Haku rajatataan  tietyn opintojakson sisälle, ja tuotetun joukon alkiot sisältävät palautuessaan ainoastaan aikaleiman sekä opiskelijan nimen. Tässä kyselyssä on huomioitava, että käytetyt xAPI-verbit ovat järjestelmäkohtaisia, joten on aina syytä varmistaa, miten data on kuvattu eri tietovarastoissa – samaa voidaan ilmaista joskus usemmallakin tavalla.

  Statements.find( 
    { "$and": [ 
      {  "verbs": { $in : [ 
        "http://adlnet.gov/expapi/verbs/scored",
        "http://activitystrea.ms/schema/1.0/join",
        "http://id.tincanapi.com/verb/replied",
        "http://activitystrea.ms/schema/1.0/start",
        "http://activitystrea.ms/schema/1.0/submit",
        "http://activitystrea.ms/schema/1.0/follow",
        "http://activitystrea.ms/schema/1.0/update",
        "http://activitystrea.ms/schema/1.0/attach",
        "http://activitystrea.ms/schema/1.0/complete"
      ]}},
      { "statement.context.contextActivities.grouping.0.id" : courseUrl }}
   ]  
}, 
{    'statement.timestamp': 1,    'statement.actor.name': 1,  } 
)

Nyt kun kasassa on riittävät tiedot, voimme laskea pistekertymän kullekin opiskelijalle päiväkohtaisesti. Käymme läpi edellisestä kyselystä palautuneet tietueet, ja lisäämme kunkin opiskelijan tapahtumapäivälle pisteisiin yhden.

for(var s=0;s<scores.length;s++) 
{ 
   var scoreDay = moment(scores[s].statement.timestamp,"YYYY-MM-DDTHH:mmZ").startOf('day'); 
   if ( scoreDay.isSameOrAfter(start) && scoreDay.isBefore(end)){ 
     var numDaysSinceBeginning = scoreDay.diff(start, 'days'); 
     var studentName = scores[s].statement.actor.name; 
     studentsTmp[studentName].scores[numDaysSinceBeginning] += 1; 
   } 
}

Seuraavaksi laskemme pistekertymistä kumulatiivisen version siten, että aiempien päivien kertyneet pisteet lisätään nykyisen päivän pisteisiin. Samalla laskemme pisteiden summat päiväkohtaisiin keskiarvoihin.

          for(var property in studentsTmp ) 
          { 
            if ( studentsTmp.hasOwnProperty(property)){ 
              if ( studentsTmp[property].scores.length != numCourseDays ) 
                     averageScores[0] += studentsTmp[property].scores[0]; 
                     for(var d=1;d<studentsTmp[property].scores.length;d++) 
                     { 
                       studentsTmp[property].scores[d] += studentsTmp[property].scores[d-1];
                       averageScores[d] += studentsTmp[property].scores[d]; 
                   } 
              } 
          } 

Päiväkohtaiset pistesummat on jaettava vielä opiskelijoiden lukumäärällä keskiarvon laskemiseksi.

for( var day=0;day<averageScores.length;day++) 
{ 
   averageScores[day] /= numStudents; 
}

Tämän jälkeen edessä on ainoastaan palautettavan datan muotoilu selaimen koodissa.

Miten data saadaan selaimeen?

Selaimessa kyselyn lähettäminen tapahtuu seuraavalla tavalla. Muodostamme POST-metodikutsun, jonka avulla lähetetään haettavan opintojakson tunnus kyselyä varten. D3.js-kirjaston mukana tulevan asynkronisen palvelupyyntötoiminnon avulla saamme sen aikaan helposti. Kyselyssä rajaavana parametrina on kurssin URL-osoite, jota aiemmin kuvattu palvelinsovelluksen logiikka käyttää tulosjoukon rajaamisessa.

var url2 = '<PALVELUN URL-OSOITE>; 
d3.json(url2, { 
         method: "POST", 
         body: JSON.stringify({ course: url}), 
         headers: { 
             'Content-Type': 'application/json; charset=utf-8' 
         } 
}).then( function (json) {

then-osuus ottaa vastaan palautuvan datan käsittelyfunktion. Käsittelyfunktiossa ensimmäisenä muodostamme dataan erillisen date-kentän, johon liitämme tekstimuotoisesta aikaleimasta luodun javascriptin päiväysobjektin. Se antaa mahdollisuuden vertailla datan aikaleimoja helposti myöhemmin.

for(var x=0;x<json.length;x++) {
   var parse = d3.timeParse("%Y-%m-%dT%H:%MZ");
   json[x]["date"] = parse(json[x].timestamp); 
}

Tässä yhteydessä otamme käyttöön crossfilter-kirjaston. Muodostamme ensiksi dimensiot (x-akselille tuotettavat arvot) opiskelijoiden nimelle ja päiväykselle. Sen jälkeen laskemme ryhmittelysummat (y-akselille tuotettavat arvot) opiskelijoiden pisteille, sekä ryhmän pisteiden keskiarvoille päiväkohtaisesti.

  var ndx = crossfilter(json); 
  var studentDim = ndx.dimension(d => d.name ); 
  var dayDim = ndx.dimension(function (d) { return d3.timeDay(d.date); }); 
  var scoreDim = ndx.dimension(d => d.value ); 
  var scoresGroup = dayDim.group().reduceSum(d => d.value ); 
  var avgGroup    = dayDim.group().reduceSum(d => d.avg );

Minimi- ja maksimipäiväykset, sekä maksimipisteet saadaan datasta irti seuraavasti:

         var maxDate = d3.timeDay(dayDim.top(1)[0].date);
         var minDate = d3.timeDay(dayDim.bottom(1)[0].date);
         var scoreGroup = scoreDim.group();
         var maxScore = scoreDim.top(1)[0].value;

Opiskelijoiden valinta toteutetaan valikkorakenteella, joka onnistuu dc.js-kirjastolla seuraavasti. Valikkorakennetta voi ajatella ikään kuin omana “kaavionaan”, jossa tehdyt valinnat heijastuvat kaikkiin muihinkin dc.js:n NDX-kontekstilla luotuihin kaavioihin.  Valikon yhteyteen rakennamme toiminnallisuuden, jolla voimme piirtää valitun opiskelijan nimen kaavion oikeaan yläreunaan. Tämä auttaa tarkastelijaa hahmottamaan paremmin kenen datasta onkaan kyse.

var studentMenu = 
    dc.selectMenu('#dc-student-menu') 
      .dimension(studentDim) 
      .group(studentDim.group()) 
      .controlsUseVisibility(true) 
      .on('filtered.monitor', function(chart,filter) { 
          if (filter === null ) $('#name').html("Kaikki opiskelijat"); 
          else $('#name').html(filter);                                        
       });

Palkkikaavio päiväkohtaisia pisteitä varten saadaan aikaan seuraavasti.

var barChart = dc.barChart("#dc-bar-hits"); 
barChart 
  .width(990)
  .height(60) 
  .elasticY(true)
  .elasticX(true)
  .dimension(dayDim)
  .group(scoresGroup)
  .mouseZoomable(true)
  .x(d3.scaleTime().domain([minDate,maxDate]))
  .brushOn(true)
  .xUnits(d3.timeDays);

Koska haluamme esittää kaksi erillistä käyrää samassa kaaviossa, tarvitsemme dc.js:n yhdistelmäkaavion. Sen perusasetuksilla määritämme muodostettavan kaavion koon ja akseleiden ohjetekstit. Lisäksi ns. ohjauskaavioksi (.rangeChart) määritämme aiemmin luodun palkkikaavion, että voimme järkevästä valita tietyn aikavälin tarkasteltavaksi tarkemmin.

var compositeChart = dc.compositeChart('#dc-line-progress');
compositeChart
   .width(990)
   .height(400)
   .mouseZoomable(true)
   .dimension(dayDim)
   .legend(dc.legend().x(80).y(20).itemHeight(13).gap(5))
   .elasticY(true)
   .x(d3.scaleTime().domain([minDate,maxDate]))
   .xAxisLabel("Kurssin päivät")
   .yAxisLabel("Kertyneet pisteet")
   .rangeChart(barChart) 

Varsinaiset käyrät tuottavat kaaviot muodostetaan compose-funktiolle välitetyn javascript-taulukon avulla. Kaksi erillistä käyrää saadaan esittämään eri tietoja group-määrityksen avulla. Ensimmäinen esittää valittujen opiskelijoiden pisteiden summaa päiväkohtaisesti (scoresGroup), ja tähän vaikuttaa valikon avulla määritelty opiskelijakohtainen suodatus.

 .compose([ 
     dc.lineChart(compositeChart) 
        .width(990) 
        .height(120)
        .transitionDuration(1000) 
        .dimension(dayDim) 
        .x(d3.scaleTime().domain([minDate,maxDate])) 
        .round(d3.timeDay.round) 
        .xUnits(d3.timeDays) 
        .elasticY(true) 
        .colors('#f77') 
        .group(scoresGroup, "Saavutetut pisteet") 
        .brushOn(false),

Toinen käyristä esittää puolestaan koko ryhmän keskiarvoa. Tähän dataan opiskelijakohtainen suodatus ei vaikuta, sillä jokaiseen opiskelijatietueeseen on tallennettu myös kunkin päivän ryhmäkohtainen keskiarvo.

dc.lineChart(compositeChart) 
    .width(990)
    .height(120) 
    .transitionDuration(1000) 
    .dimension(dayDim) 
    .x(d3.scaleTime().domain([minDate,maxDate])) 
    .elasticY(true) 
    .colors('#ffff00') 
    .group(avgGroup, "Ryhmän keskimää¤rin saavuttamat pisteet") 
    .brushOn(false) 
]) 
.brushOn(false);

Lopuksi käskytämme kaikkia kaavioita piirtymään.

dc.renderAll(); 
}); 
} 

Miten visualisointi auttaa hahmottamaan edistymistä paremmin?

Kun tarkastelemme vaikkapa Moodlen tuottamaa kaaviota ja uutta aktiivisuuskaaviota samasta datasta, on havaittavissa, että jälkimmäinen osoittaa selkeästi paremmin suvanto- ja edistymiskohdat. Ryhmän keskiarvo on kaaviossa esitetty keltaisella värillä, ja opiskelijan puolestaan punaisella. Esimerkiksi tässä tapauksessa voidaan tulkita, että eräs opiskelija on suorittanut kurssia neljän erillisen rupeaman aikana, jotka ovat olleet kestoltaan lyhyitä, mutta niiden aikana on tapahtunut paljon. Kaaviosta paljastuu myös, että opiskelija on työskennellyt hieman jälkijättöisesti ryhmän keskimääräiseen työskentelyyn verrattuna, mutta lopuksi saavuttanut saman aktiivisuustason kuin ryhmä keskimäärin.

Myöhässä tehneen opiskelijan kaavio

Valittaessa erään toisen opiskelijan data tarkasteltavaksi, havaitsemme että tilanne on hieman toisin, ja aktiivisuutta on ollut ryhmän keskiarvoa enemmän heti alusta lähtien. Kuitenkin tällä opiskelijalla on ollut keskivaiheilla pitkiä jaksoja, jolloin aktiivisuus ei ole ollut niin suurta – nähtävästi alussa kiritty matka on antanut tilaa edetä loput kurssista rauhallisemmin.

Alussa aktiivisemman opiskelijan kaavio

Kun edellä olevaa kaaviota verrataan mitä Moodlesta oletuksena saadaan esille, voimme todeta yllä olevan kaavion olevan paljon yksityiskohtaisempi, sekä täsmällisempi. Moodlen kaavio ei erottele opiskelijoita, vaan näyttää kunkin päivän osalta roolikohtaiset tapahtumat yleisesti.  Uusista kaavioista saa tietoa ohjauksen tueksi, ja on helposti nähtävissä, milloin on syytä selvittää opiskelijalta tämän aktiivisuuden laskun syyt.

Mitä tämän jälkeen?

Mikäli samaan kaavioon liitetään eri aihe-alueisiin liittyviä aktiivisuuskäyriä, voimme nähdä entistä paremmin substanssikohtaista etenemistä. Silloin ohjauksen kohdistaminen on yhä täsmällisempää, ja se avaa myös (ainakin teoreettisen) mahdollisuuden niputtaa saman aihealueen parissa ohjausta tarvitsevat samalle ohjauskerralle.

Lisäksi erilaisten tapahtumien pistemäärän painottaminen voisi tulevaisuudessa olla tarpeellinen toiminto. Erilaiset oppimiskäsitykset voivat vaatia aina erilaista tekemistä, jolloin oppimiskäsityksen mukaiset erot pitäisi saada korostetusti esille.

Kirjoittaja Anssi Gröhn, tietojenkäsittelyn lehtori

Vastaa

Sähköpostiosoitettasi ei julkaista. Pakolliset kentät on merkitty *