Den här julen har jag för första gången under min studietid på LiU haft jullov på riktigt. Med det menas att jag inte behövt plugga inför några januaritentor alls, vilken lyx!

Denna möjlighet att spendera julen med att göra precis vad jag velat har resulterat i en app jag kallar math-quiz. Framtagandet av math-quiz har inkluderat både programmering och matematik, så lustigt nog blev det inte alltför stor skillnad mot tentaplugget. Många kanske undrar varför jag valde att skapa math-quiz och hur det gick till på vägen. Därför tänkte jag försöka besvara dessa frågor med just det här inlägget.

Syfte

Något som ofta nämns i samband med civilingenjörsutbildningar är hur matematikintensiva de är. I examenskraven för civ.ing. i mjukvaruteknik står att minst 45hp kurser inom matematik eller tillämpning inom matematik ska ingå i utbildningen. I min utbildning sprids dessa 45hp ut i början på utbildningen och därmed är det examenskravet uppfyllt redan efter de första tre åren.

När jag nu gick första terminen på det fjärde året märkte jag en ganska stor förändring i det att jag inte längre läste någon mattekurs med föreläsningar, lektioner, frustration och allt det roliga som det innebär. Det var inte helt utan obehag som jag insåg att kurserna jag valt (designmönster, mjukvarutekniskt entreprenörskap, interaktionsprogrammering, etc) inte krävde några matematikkunskaper över huvud taget. Jag blev fundersam över om jag läst all matematik helt i onödan. Än värre, jag slogs av tanken att mina hårt förvärvade matematikkunskaper sakta skulle förvittra utan underhåll. ”Not on my watch” tänkte jag och började klura på hur jag kunde hålla igång mattekunskaperna på bästa sätt. Jag gillar quizar och tipspromenader så om jag kunde kombinera detta med en webb-applikation skulle det bli perfekt uppvärmning inför kurserna i webbprogrammering som jag ska läsa nu till vårterminen.

Metod

Jag började med att googla på ”JavaScript quiz library” och fick en träff på en React-baserad lösning kallad JavaScript Quiz som utgjorde en perfekt grund att bygga vidare på. React är ju dessutom väldigt poppis och jag såg fram emot att lära mig mer om det. Jag var till och med så optimistisk att jag trodde det skulle gå snabbt och enkelt att skapa min matte-quiz. I själva verket skulle det gå långsamt och svårt, men det är ju förväntat när man ger sig ut på okänd mark.

Grafer ❤

Tidigt i processen fick jag en idé om att jag ville presentera resultatet från quizen som en spindelgraf. Alltså, användaren besvarar frågor inom olika matematiska områden och får därefter en tydlig bild över dennes kunskap inom de olika områdena.

I min grupps kandidatprojekt Knekt använde vi oss av Highcharts med stor framgång. Jag körde vidare på det vinnande konceptet och efter några npm-installationer (react-highcharts för grundfunktionalitet och highcharts-more för spindeln) och en del bök lyckades jag smälla upp en fet graf som ni ser på bilden nedan.

Inställningar

Jag ville utöka funktionaliteten från den mycket enkla JavaScript Quiz och gjorde en Settings-sida där användaren bland annat kan välja vilka matematiska områden och hur många frågor quizen ska innehålla. Detta var ganska straight-forward med undantag för att jag valde att använda mig av react-numeric-input för lite enklare hantering av antal-frågor-väljaren. Jag skriver ”ganska straight-forward”, men med mina obefintliga kunskaper inom React ger bilden nedan en rättvisare beskrivning. Det är dock förvånansvärt hur långt man kan komma med Google och Stack Overflow. 😉

All I want for Quiz-mas is a nice little matrix

Efter allt strul med Settings-funktionaliteten var det dags att få till lite schyssta matte-frågor. För detta krävdes ett snyggt sätt att representera matematiska formler, integraltecken och matriser. Självklart ville jag använda mig av Latex, men det skulle visa sig vara en mycket hård nöt att knäcka. Jag började med att prova react-latex och react-matrix, men det var inte alls vad jag behövde. När jag snubblade över react-katex trodde jag att jag hittat den heliga graalen. K:et i katex står för Khan som i Khan Academy som jag tidigare haft stor användning av. Deras latex-lösning skulle definitivt duga för mig, dessutom ritas formlerna snabbt utan lång väntetid. Tyvärr lyckades jag aldrig få katex att fungera på rätt sätt utan mina formler ritades ut både TeX-ifierade och som vanlig text, mycket likt detta issue på GitHub. Jag slet i en dag med det men lämnade till slut Katex för en motsvarande lösning, MathJax.

MathJax fungerade! Tyvärr sker en liten fördröjning vid utritningen och av en outgrundlig anledning minskas dess font-storlek efter första frågan så texten blir lite för liten. Men ingen mjukvara utan buggar tänkte jag och valde att släppa math-quiz lös på internet.

Framtida arbete

För dig som tycker att math-quiz verkar intressant och vill bygga vidare på det finns projektet på GitHub. Förutom att fixa visuella buggar och snygga till GUI:t vore det även nice med fler frågor och utökad funktionalitet. Har du feedback eller vill bidra till math-quiz är jag idel öra!

Slutsats

Jag är tacksam över att kunna stå på de giganters axlar som skapat React, npm och alla små fina paket för formler, grafer, etc. WebStorm är en bra IDE, webbprogrammering är svårt och solo-programmering kan vara ganska jobbigt om än lärorikt.

För övrigt tänkte jag nu försöka ha jullov på riktigt. God fortsättning!