Matematiikan verkkokurssin tekeminen

Verkkokurssi

Lähtökohta

Halutaan tehdä verkkokurssi, jossa on

matemaattista tekstiä
aktivointitehtäviä tekstin lomassa (tukevat ymmärtämistä)
kuvia
videoita
tehtäviä
tenttejä (voi testata osaamista)

sekä jotain muita materiaaleja

Octave-koodeja (voi kokeilla itse)
sivuston lähdekoodi (voi harjoitella LaTeXia, kuvien piirtämistä ym.)

Kohderyhmä

lukiolaiset
yliopistolaiset - lisämateriaalia
täydennyskoulutus
muut kiinnostuneet

Kehityspolku

materiaalia $\Rightarrow$ luentokurssi $\Rightarrow$ verkkokurssi $\Rightarrow$ MOOC

Esimerkki

calculus-kirjan luvut 5-7
$\Rightarrow$ integraalilaskennan luentokurssi
$\Rightarrow$ integraalilaskennan verkkokurssi (2019)
$\Rightarrow$ integraalilaskennan MOOC?

verkkokurssi
- jonkin verran kriteerejä
MOOC (kaikille avoin)
- enemmän kriteerejä
- saavutettavuuskriteerit (esim. videoissa tekstitykset)
- hyvä pitää mielessä lopullisena tavoitteena

Muita materiaaleja

Wikipedia
Wikiopisto esimerkki
Khan Academy (234 työntekijää)
Videosivustoja
- YouTube
- Opetus.tv https://opetus.tv/
Sivustoja
- Cut-the-knot http://www.cut-the-knot.org/

Pedagoginen suunnittelu

Matematiikan verkkokurssi

Matematiikka eroaa muista oppiaineista.

äidinkielen essee verkossa
- kone voi tarkastaa kielioppia
- kone voi hakea "avainsanoja"
- kuitenkin lopullisen arvostelijan täytyy olla ihminen
kone voi tarkastaa
- mekaanisen laskutehtävän
- vieraan kielen sanakokeen

Eri matematiikan kursseilla painotetaan eri asioita

laskentapainotteinen (helppo verkottaa)
todistuspainotteinen (vaikea verkottaa, halutaan perehtyä todistusten logiikkaan)
numeeriset menetelmät (monipuolinen aihe)
- toimiiko koodi?
- onko koodi tehokas?
- onko koodi kommentoitu?

Verkkokurssin pedagogiikka

Verkkokurssi eroaa tavallisesta opetuksesta tietyin tavoin.

verkossa
- käytettävä laite
- nettiyhteys
vapaa aikataulu
- saa tehdä kun haluaa, vaikka töiden ohessa
- toisaalta deadline voi inspiroida tekemään
vertaistuki
- paikallinen vertaistuki, esim. ryhmä lukiolaisia suorittamassa samaa verkkokurssia
- verkkokurssin sisäinen vertaistuki
  - keskustelupalsta
  - vertaisarviointi
  - kilpailuhenki, "High score"
- ryhmäpaine
keneltä voi kysyä epäselvistä asioista?
- paikallinen tukihenkilö, esim. lukion opettaja
- kirja, Wikipedia, keskustelupalsta
- verkkokurssin opettaja?
  - resurssit?
  - viestit verkkokurssin sisällä?
  - chat? Vertaa Opetus.tv-sivulle upotettu IRC-chat: https://opetus.tv/chat/
  - sähköposti?
oppimisen sosiaaliset näkökohdat
- kontaktit muihin ihmisiin
- parempaa oppimista?
  - tunnepitoiset asiat muistaa paremmin
- ajatusten vaihtaminen
  - jäsennystapa hioutuu
  - ilmaisutapa selkiytyy
  - kun opetat asian kaverille, ymmärrät sen itsekin paremmin
  - monta tapaa ymmärtää sama asia
  - luova prosessi, asiat kiteytyvät
    - $\frac{d}{dx}\sin(x)=\cos(x)\quad$ "ei miinusta, tavallinen"
    - $\frac{d}{dx}\cos(x)=-\sin(x)\quad$ "jos kosahtaa, niin se on miinus sinulta"
- opitaan monia muita sosiaalisia taitoja

Verkkosivu

Verkkosivun osat

teksti HTML
muu sisältö
muotoilu CSS
toiminnallisuus JavaScript
navigointi ym. tuki

Osien pitäminen erillisinä on hyödyllistä

tehokasta
vähemmän virheitä
helpompi ylläpitää
- muotoilujen päivitys
- kuva- ja video tiedostojen päivitys (lataa uudet versiot kansioon)

Muotoilu ja teksti erotettuina:

<style>
.esimerkki {
background-color:#ccc;
display:inline-block;
margin-left: 40px;
border-left: 3px solid steelblue;
padding:8px;
}
</style>

<div class="esimerkki">Esimerkki 1. Kaikki muotoilut toimivat.</div>
<div class="esimerkki">Esimerkki 2. Kaikki muotoilut toimivat taas.</div>

Kaikki sekaisin:


<div style="background-color:#ccc;display:inline-block;
margin-left: 40px;border-left: 3px solid steelblue;padding:8px;
">Esimerkki 1. Kaikki muotoilut toimivat.</div>

<div style="background-color:#ccc;display:inline-block;
margin-left: 40px;border-left: 3px solid steelblue;padding:8px;
">Esimerkki 2. Kaikki muotoilut toimivat taas.</div>

HTML-koodi

Verkkosivun tekstit jäsennetään HTML-koodilla (Hyper Text Markup Language), joka auttaa

tekstin jäsentely
hyperlinkit
muotoilu (fonttikoko, tehosteet)

Muu sisältö

kuvat
videot

CSS-koodi

Verkkosivun muotoilu tehdään CSS-koodilla (Cascading Style Sheets).

JavaScript

Verkkosivulle saa toiminnallisuutta JavaScriptillä. Erilaisia kirjastoja:

MathJax: LaTeX-kaavat verkkosivulla.
JSXGraph: toiminnalliset kuvat. (Samantyylisiä kuin esimerkiksi GeoGebra-appletit.)
jquery: tiettyjen silmukoiden ajaminen.
syntaksi-korostus: linkki

Teksti

Pelkkä teksti

Pelkkä teksti voitaisiin kirjoittaa kerran (lähdekoodi) ja kääntää sitten eri muotoihin (HTML, pdf, ym.).

office
- pdf-vienti
- html-muuntimet
  - office2html https://wordhtml.com/
  - taulukko2html https://tableizer.journalistopia.com/
Texinfo
- GNU-ohjelmistojen manuaalit
  - Emacs-manuaali (655 sivua): https://www.gnu.org/software/emacs/manual/emacs.html
- Laulujen sanoja (harrastusprojekti): http://integraali.com/vanhoja-lauluja/

Matemaattinen teksti

Matemaattinen teksti on monipuolista:

teksti
kaavat
kaaviot (polynomien jakokulma)
muut materiaalit (kuvat)

Lisäksi HTML-sivuun halutaan toiminnallisuutta.

Tästä johtuen, eri formaatteja (HTML, pdf) ei voi tehdä automaattisesti samasta lähdekoodista.

Matemaattisen tekstin kirjoittaminen

Matemaattista tekstiä on helpointa kirjoittaa LaTeXilla. MathJax on JavaSkripti-kirjasto, jonka avulla matematiikkaa voi kirjoittaa verkkosivulle.

MathJax muistuttaa LaTeXia paljon.

kaavaympäristöt
```
$$
1+2=3
$$
```
$$ 1+2=3 $$
jotkin komennot toimivat: $\mathbb{R}$ tuottaa $\mathbb{R}$
komentoja voi määritellä itse

Jotain erojakin on

tekstin seassa oleva kaava: ei $kaava$ vaan $kaava$
ei HTML-sensitiivisiä merkkejä: ei 1<2 vaan 1<2
LaTeX-taulukko ei toimi (polynomien jakokulma)

Kääntäminen: latex2mathjax

Integraalilaskenta-kurssia varten kirjoitettiin 100 pdf-sivua luentoja.

suunnittelussa ja kirjoittamisessa kului 2kk
latex2mathjax-kääntämisessä kului vain 2h!

Kääntämisen vaiheita

"Alkusiivous" (poistetaan mahdottomat jutut)
- HTML-sensitiiviset merkit pois. Siis 1 < 2 muotoon 1 < 2.
"Työstäminen" (pyritään kääntämään mahdollisimman paljon)
- Muotoilujen muuttaminen. Esimerkiksi \emph{kursiivi} muotoon <i>kursiivi</i>.
- Joka toinen $ toisin päin. Siis $ $ $ $ muotoon  .
- Vierekkäin olevien $$ palautus takaisin. Siis  muotoon $$.
"Loppusiivous ja paketointi"
- Alkumäärittelyt pois.
- Tekstin upottaminen html-alkumäärittelyjen ja html-loppumäärittelyjen väliin.
```
<!DOCTYPE html>
"CSS-tyylit, koodit, jne."
...
<body>

sijoita käännetty teksti tähän

</body>
</html>
```
"Viimeistely käsin"
- tarkistus
- väistämättä käsin tehtävät jutut

Kuvien tekeminen

Rasterigrafiikkaa (tietty määrä pikseleitä)

Vertailua (vektorigrafiikat)

ominaisuus

TikZ (pdf/latex)

SVG

JSXGraph

pelkistetyin

helppo

matemaattinen

upotus, pdf

upotus, verkko

dynaaminen

graafiset tehtävät

TikZ

matemaattinen
käytännöllinen

Koodi:

\documentclass[border=10]{standalone}
\usepackage{tikz}

\begin{document}

\begin{tikzpicture}
\fill[gray!50!white] (0,0) circle (1cm);
\draw (0,0) circle (1cm);
\def\luku{1.5}
\draw[->] (-\luku,0)--(\luku,0) node[below left]{$x$};
\draw[->] (0,-\luku)--(0,\luku) node[below left]{$y$};
\end{tikzpicture}

\end{document}

esimerkkejä: esimerkkejä

SVG

luonnollinen vektorigrafiikkatiedosto
voi upottaa TikZiin

Koodi:

<style>
.arrow{stroke:black;stroke-width:2;marker-end:url(#arrow);}
.disc {stroke:black;stroke-width:2;fill:lightgray;}
</style>
<svg><defs>
<marker id="arrow" markerWidth="10" markerHeight="10"
refX="0" refY="3" orient="auto" markerUnits="strokeWidth">
<path d="M0,0 L0,6 L9,3 z" fill="#000" />
</marker>
</defs></svg>

<svg height="400" width="400" viewBox="-200 -200 400 400">
<circle class="disc "x="0" cy="0" r="100" />
<line class="arrow" x1="-150" y1="0" x2="150" y2="0" />
<line class="arrow" x1="0" y1="150" x2="0" y2="-150" />
<line class="arrow" x1="0" y1="150" x2="0" y2="-150" />

<text x="150" y="20"> x</text>
<text x="-20" y="-150"> y</text>
</svg>

JSXGraph

Hieman työläs tehdä.
Vain verkkosivut.

Koodi:

<script type="text/javascript" charset="UTF-8"
 src="//cdnjs.cloudflare.com/ajax/libs/jsxgraph/0.99.7/jsxgraphcore.js"></script>

<div id='testikuva' class='jxgbox' style='width:400px; height:400px;'></div>

<script>
var taulu = JXG.JSXGraph.initBoard('testikuva', 
{boundingbox:[-2, 2, 2, -2],axis:true,
showCopyright:false,showNavigation:false});

var luku = 1.5;
var s = taulu.create('arrow', [[-luku,0], [luku,0]],{color:'blue'});
var s = taulu.create('arrow', [[0,-luku], [0,luku]],{color:'blue'});

var a1 = taulu.create('point', [0,0], {color:'none', name:''}),
    a2 = taulu.create('point', [1,0], {color:'none', name:''}),
    c1 = taulu.create('circle', [a1, a2]);
    
var t1 = taulu.create('text',[luku-0.1,-0.3,
function() {return '\\[x\\]';}],{fontSize:24});
var t1 = taulu.create('text',[-0.5,luku+0.2,
function() {return '\\[y\\]';}],{fontSize:24});
</script>

Kääntäminen

SVG $\Leftrightarrow$ TikZ:

On mahdollista tehdä SVG-koodilla kuvakoodi, joka kääntyy sekä SVG että TikZ-kuvaksi.

Koodi:

%<!-- kaikki mitä ei tarvita svg-kuvassa 
\begin{tikzpicture}
\fill svg{
-->

%<svg width="400px" height="400px">

svg-koodi

%</svg>

%<!--
};
\end{tikzpicture}
-->

Selain näkee:

<svg width="400px" height="400px">

svg-koodi

</svg>

LaTeX näkee:

\begin{tikzpicture}
\fill svg{

svg-koodi

};
\end{tikzpicture}

SVG $\Rightarrow$ TikZ: helppo, voi upottaa

TikZ $\Rightarrow$ SVG: OK, pdf-tiedoston voi kääntää svg-tiedostoksi

Vienti ulos ohjelmista

TikZ-koodia voi viedä ulos muun muassa:

GeoGebrasta
Octavesta/Matlabista: matlab2tikz

PNG-kuvien tekeminen

PNG-kuvia ja kuvanmuokkausta on helppo tehdä ImageMagick-ohjelmalla https://imagemagick.org/index.php

Tilanne

kansiossa on 100kpl pdf-kuvia
halutaan png-kuvat
halutaan kuville mustat kehykset

Ratkaisu: käytetään ImageMagick-ohjelmaa .bat-tiedostolla (batch-tiedosto).

Batch-tiedoston koodi:

mkdir png-versio
magick mogrify -path png-versio
-density 1500 -resize 1000x1000 -format png *.pdf
cd png-versio
magick mogrify -bordercolor White -border 1x1 *.png
magick mogrify -bordercolor Black -border 4x4 *.png

Matematiikan verkkokurssin tekeminen

Verkkokurssi

Lähtökohta

Kohderyhmä

Kehityspolku

Muita materiaaleja

Pedagoginen suunnittelu

Matematiikan verkkokurssi

Verkkokurssin pedagogiikka

Verkkosivu

Verkkosivun osat

HTML-koodi

Muu sisältö

CSS-koodi

JavaScript

Teksti

Pelkkä teksti

Matemaattinen teksti

Matemaattisen tekstin kirjoittaminen

Kääntäminen: latex2mathjax

Aktivointi

Kysymys

Vaiheittainen tehtävä

Monivalintatehtävä

Kuvien tekeminen

Vertailua (vektorigrafiikat)

TikZ

SVG

JSXGraph

Kääntäminen

Vienti ulos ohjelmista

PNG-kuvien tekeminen

Videoiden tekeminen

Laskeskeluvideo

STACK

Satunnaistaminen

Lausekkeen sieventäminen

Tiedostot

Varmuuskopiointi

Tiedostojen päivitys

Toimitusvarmuus

Työkaluja

Verkkosivut

Linkkisivu