Matematik læringsprojekt Journal

Matematik læringsprojekt Journal

Indledning Dette projekt udarbejdes af Oliver Mangelsen og Kasper Christoffersen fra klasse 3,3. projektet udarbejdes i faget programmering. Meningen med dette projekt er at lave en hjemmeside beregnet til mellem trinet i folkeskolen. På denne hjemmeside er det meningen at man skal kunne regne matematik opgaver. Denne hjemmeside skal bruges af børn der har svært ved at lære på traditionelvis, eller af børn der hellere vil løse opgaver på computeren. Opgave løsning på computer kan måske komme til at erstatte løsning af opgaver på papir helt. Det produkt vi har tænkt os at producere er et login system og måske en matematik opgave eller to. Indholdsfortegnelse Interview spørgsmål... 4 Generelt for den lille gruppe der er interviewet... 4 Spørgsmål... 4 interview med Marcus:... 4 interview med Viktor... 4 interview med Rasmus... 4 interview med Anna... 5 interview med Caroline... 5 Konklusion på interview:... 5 Markedsanalyse:... 6 Konklusion på markedsanalysen:... 7 Præproduktion... 8 User Stories... 8 Abuser stories... 8 Kravspecifikationer... 8 Testspecifikationer... 10 Design af produkt... 10 Produktion... 12 Implementering af krav... 13 Gennemgang af det væsentlige kodning... 15 MySQL tabeldata... 15 Kodningen... 16 Det visuelle... 20 Form handling... 21 Debugging... 22 Postproduktion... 23 Test... 23 2

Konklusion... 24 Bilag... 25 Main_login.php:... 25 Check_login.php:... 28 Create.php:... 30 Login_success.php:... 32 3

Interview spørgsmål Generelt for den lille gruppe der er interviewet Alder: 1112 år Klasse trin: 4. Navn: Marcus, Viktor, Rasmus, Anna, Caroline Spørgsmål 1. Kan du lide matematik? 2. Kan du lide at lave matematik opgave i hånden? 3. Kunne du forstille dig det ville være sjovere på computer? 4. Ville du bruge mere tid på matematik hvis du kunne lave det over computer? interview med Marcus: Spørgsmål 1: Ja, det er sjovt. Spørgsmål 2: Ja, det kan jeg. Spørgsmål 3: Ja, det ville det nok. Spørgsmål 4: Det kan godt være. interview med Viktor Spørgsmål 1: Nogle gange. Det kan være kedeligt at lave det samme. Spørgsmål 2: Nej. Spørgsmål 3: Ja, det ville være bedre på computer. Spørgsmål 4: Jeg ville bruge længere tid på matematik på computer. interview med Rasmus Spørgsmål 1: Lidt. Spørgsmål 2: Nej det er kedeligt. Spørgsmål 3: Ja, lidt. Spørgsmål 4: Det er jeg ikke sikker på. 4

interview med Anna Spørgsmål 1: nej Spørgsmål 2: nej Spørgsmål 3: ja, måske Spørgsmål 4: ja måske interview med Caroline Spørgsmål 1: ja meget. Spørgsmål 2: Det er vel okay. Det kan godt blive meget det samme og lidt kedeligt. Spørgsmål 3: ja. Spørgsmål 4: ja, jeg ville måske lige bruge mere tid på matematik på computer. Konklusion på interview: Selv om nogle af dem vi interviewede ikke var særligt glade for matematik, fandt vi ud af at de måske eller højst sandsynligt ville bruge mere tid på matematik hvis det var på computeren at de lavede opgaverne. Det sammen fandt vi ud af for dem, som godt kunne lide matematik, også selv om de nok har lavet det mere end dem der ikke kunne lide at lave matematik. Desuden ville achievments også vække større interesse i, at få lavet matematikken, og desuden gøre sig umage med det der bliver lavet. 5

Markedsanalyse: Denne markedsanalyse er lavet for at finde ud af hvilke andre matematik hjemmesider der bliver tilbudt elever hovedsageligt i mellem trinet og hvad disse hjemmesider rent praktisk tilbyder. Skolemat.dk Henvender sig til klassetrinene 1 9 klasse, hvor de er opdelt i tre grupper. Grupperne hedder 1 3 klasse, 4 6 klasse og 7 9 klasse. Her har man lavet tre forskellige spil, hvor de, hver især har deres egen historie og indhold. Indholdet er tilpasset til klassetrinnet og, man har her forsøgt, at gøre matematikken interessant og til, at forstå gennem fortællinger. Hver fortælling har 30 missioner som kræver forskellige matematiske kompetencer. For, at kunne afprøve disse opgaver, skal man have et login, som man enten skal købe sig til, eller er noget ens skole har tilmeldt sig, og man derved kan logge ind med sit EMU login. Matematikonline.dk Er en hjemmeside der har samlet forskellige matematiske spil, hvor man let kan få et overblik over forskellige matematikspil. Selve spillene bliver ikke spillet på deres hjemmeside. Spillene omhandler de forskellige typer grundmatematik, som plus, minus, gange og division. Sværhedsgraden kan man selv bestemme på de fleste spil og ligger på let, medium eller svær. Alle spillene er gratis, at bruge, så der er let adgang. Derudover kan man efter en runde se, hvor man har lavet fejl og, hvad det rigtige resultat skulle have været. 123abc.dk Denne hjemmeside tilbyder opgaver i både dansk, matematik, engelsk og Naturfag. I matematik er der forskellige stadier, begyndere, mellem og noget de kalder videre. Man kan finde rigtigt mange forskellige slags opgaver, men mange af dem henvender sig til, at skulle løses på papir. Dog finder man også opgaver her inde som kan lavs på deres side. Dog er der ingen variation i samme opgave, så har man først klaret det en gang, hvilket ikke tager særligt lang tid med de opgaver vi har kigget på, vil man få samme spørgsmål, hvis man starter forfra. Der er noget login system, som skulle give adgang til det hele. Dog virker det som om, at det ikke er nødvendigt, da alle de opgaver vi stødte på, kunne bruges kvit og frit. Matematikfessor.dk Matematikfessor kræver, at man logger ind, men for at logge ind i deres system skal man have købt sig adgang, eller fået det via sin skole med UNI login. Man kan oprette en bruger, hvor man her får en prøveperiode på 30 dage, herefter skal adgang købes. Opgavetypen skiller sig ud fra de andre hjemmeside, da det her er typiske matematikopgaver der blot foregår på computeren. Da det er et lukket system, kan jeg ikke finde frem til meget omkring dem, men de 6

reklamere med differentieret opgaver, hvor man samtidig kan tilpasse sværhedsgraden. På denne hjemmeside, får man desuden sit resultat at vide, så snart man er færdig med opgaverne. Klare man sig godt får man samtidigt også belønninger i form af achievments. Spil.nu Dette er en hjemmeside som alle kan benytte sig af, der bliver ikke krævet login nogen steder. Spillene omhandler de forskellige grundmetoder, som plus, minus, gange og division. Der er opgaver af forskellige typer, hvor man b.la kan finde tabellerne. Deres niveau ligger til børn i indskolingen og mellemtrinet. Opgaverne er meget de samme, men der er dog variation i selve opgaven. Konklusion på markedsanalysen: Der findes en del hjemmesider, hvis indhold er matematikbaseret. Det kommer i forskellige udgaver, noget som spil, andet som en fortælling, hvor man støder på matematiske problemer/missioner, eller noget som helt almindelige opgaver. Her kan man blandt andet støde på opgavetypen, som er vist nedenfor. Alt i alt er der altså enhver form for matematik på nettet. Dog virker det hele mere spilbaseret, hvor det vi ønsker, at lave er færdighedsregningsopgaver på nettet. 7

Præproduktion User Stories Disse User Stories er baseret på at en bruger skal benytte et login system, som kunne være i et medie. Da de fleste login systemers brugerflader minder meget om hinanden, er oplevelser fra loginsystem til loginsystem meget ens. Story 1. Som en person der vil lærer matematik online, vil jeg kunne lave et nyt login. Story 2. Som en person med en eksisterende bruger ønsker jeg, at logge ind. Story 3. Jeg har som bruger glemt mit password og vil derfor godt have et nyt. Story 4. Jeg har som bruger glemt mit brugernavn, og vil godt finde ud af hvad det er. Story 5. Jeg har som bruger fundet ud af, at en anden person kan mit password. Story 6. Efter at jeg er kommet ind, ønsker jeg, at lave matematik. Abuser stories Abuser stories er til for at se det fra en der vil udnytte systemet til noget ulovligt. Story 1. Som hacker vil have adgang til password og brugernavn, til en anden persons bruger, hvilket jeg kan bruge til ulovlige handlinger. Story 2. Jeg udnytter at en andens brugeroplysninger ligger på computeren. Kravspecifikationer Da det er beregnet til børn i mellemtrinet i folkeskolen, vil vi have en så lave learnability og guessability som muligt. Det svære skal altså ikke være at finde opgaverne eller finde rundt på hjemmesiden, men at kommer så hurtigt til opgaverne som skal løse er det ønskede mål. Krav til funktionerne i brugerfladen: Man skal kunne opretter sig som bruger. Man skal kunne logge sig af sin bruger Krav til underliggende sikkerhedsforanstaltninger: Man skal kunne ændre sit password. 8

Brugerens password skal krypteres før den lageres på databasen. Man skal kunne nulstille sit password via en email som, brugen har angivet da de lavede brugeren. Krav til matematik opgave delen: Man skal kunne se om svaret er forkert Man skal kunne se om svaret er rigtigt 9

Testspecifikationer Brugerens password skal krypteres før den lageres på databasen: Man skal kunne opretter sig som bruger: Når felterne til at oprette en ny bruger er udfyldt, og der bliver trykket opret, oprettes en ny bruger i en ny kolonne i tabellen, med det rigtige brugernavn og et hashet password. Hvis man kan se at der er blevet oprettet en ny kolonnen med brugernavn og hashet password er kravet opfyldt, eller at man kommer ind til regnestykket. Man skal kunne logge sig af sin bruger: Når man trykker på log af eller lukker hjemmesiden skal brugeren logges af. Dette testes ved at logge ind og trykke log af eller lukke hjemme siden, herefter går man til hjemmesiden igen, og ser om man er logget af. Man skal kunne ændre sit password Når man er logget ind og trykker på ændre password, skal hashet i tabellen i databasen ændres. Hvis man kan se at hashet i tabellen for password har ændret sig er passwordet blevet ændret. Man skal kunne nulstille sit password via en email som, brugen har angivet da de lavede brugeren. Når brugeren trykker på glemt password, skal brugeren også indtaste sin email, hvis emailen er identisk med den i databasen skal passwordet nulstilles og en email skal sendes tilbage til brugeren med det nye password. Hvis hashed i tabellen er skiftet er passwordet ændret. Man skal kunne se om svaret er forkert Når brugeren indtaster et forkert svar, skal tælleren med forkerte svar tælle 1 op. Dette tjekkes ved at skrive et forkert resultat og se om tælleren til de forkerte svar tæller 1 op. Man skal kunne se om svaret er rigtigt Når bruger indtaster det rigtige svar skal et nyt regnestykke kommer op, og tæller der tæller de korrekte svar skal tælle en op. Dette testes ved at svare rigtig og se om et nyt regne stykke komme frem og om tælleren går op. Design af produkt Vores produkt er en hjemmeside, hvor man kan lave en bruger og logge ind, og lave forskellige matematiske opgaver i forbindelse med skole. Vi har valgt at fokusere på den del af prototypen som vi kan nå at lave. Vi går ikke så meget op i det visuelle, men mere at vi opfylder de krav, som er opstillet tidligere. 10

Eksterne design: 1. Det første man skal se når man går ind på hjemmesiden er en boks i midten, hvor der helt simpelt er et sted hvor man kan skrive brugernavn og password. 2. Der er så 2 knapper, hvor der på den ene står opret bruger, denne knap vil oprette en ny bruger hvis felterne er udfyldte og det ikke er eksisterede i forvejen. På den anden knap står der login, denne knap vil logge brugeren ind hvis passwordet og brugernavn hænger sammen. 3. Det næste man så vil se, er plus stykker som man skal svare på. 4. Under regne stykket bliver antallet af fejl talt, og man bliver ved med, at prøve og regne stykket ind til det er rigtigt. Under stykket ved siden af der, hvor fejl bliver talt, bliver de rigtige svar også talt. Dette bliver talt, hver gang man svare rigtigt. Når man svare rigtig får man et nyt stykke. Interne design: 1. Her skal der bruges html 2. Når man prøver at logge ind, aktiveres PHPfilerne. Den sender indtastet data for, at tjekke om det stemmer overens med det der står på serveren. Opretter man en bruger vil dataene bliver sendt til serveren og gemt. 3. En række JavaScript funktioner, som bliver sendt videre til Html koden så brugeren kan interagerer med det. 4. Ved brug af JavaScript bliver der angivet 2 forskellige variabler, rigtigt og forkert. Den skal sammenligne brugerens resultat med det rigtige. 11

Produktion Til at fremstille produktet er softwaren Sublime blevet anvendt. Denne software er burgervenlig, og indeholder autocompletefunktioner til både HTML, CSS og PHP. Den understøtter dog ikke JavaScript. Det er en freeware. Mhp. at bygge et loginsystem er generel viden om dette blevet indsamlet via. internettet. Én konkret guide har dog været central for fremstillingen af loginsystemet, da den beskrev processen grundigt. Guiden præsenterer sprogene HTML, PHP og MySQL. Derudover bliver der gjort brug af JavaScript, der kommer til udtryk på følgende måde: Htmlelementer, hvilket er det som brugeren ser og kan integrere med. PHP som bliver brugt som PHPkoder, hvor det snakker sammen med serveren (MySQL), desuden bruger vi det også til, at snakke sammen blandt de forskellige filer. MySQL, det som er databasen, i vores eksempel bliver det brugt som PHPMyAdmin. Denne database indeholder en tabel med data. Herudover implementere vi også andet sprog. JavaScript, som bliver brugt til, at lave gyldige funktioner ud fra PHP koderne. 12

Implementering af krav 1. Opsætning. Med guidens filer, og redigering af disse, blev første udkast til en hjemmeside, som snakkede sammen med en server færdig. Man kunne logge ind, hvis en bruger altså var blevet lavet manuelt på serveren (PHPMyAdmin). Der var dog endnu intet, at logge ind til. 2. Opsætning Guidens filer indeholdte i brugerfladen kun en knap (input). Skulle man have mulighed for, at lave en bruger som besøgende på hjemmesiden, ville dette kræve endnu en knap (opret(input)). Dette kunne dog ikke bare implementeres, grundet en form som indeholdte en action. Der kan altså max være en action per form. En mulighed var, at bruge JavaScript til endnu en knap ved, at lave en funktion der styrede, hvad den skulle. En ny fil blev derfor oprettet med henblik på, at man skulle kunne oprette en bruger, hvor oplysningerne blev sendt til serveren, her blev der bl.a. brugt kode hentet fra PHPMyAdmin, hvor den angav en kode, som kunne bruges til, at oprette en profil. Sikkerhed af brugerens oplysninger skulle der tages højde for. På nuværende tidspunkt var brugerens oplysninger gemt, præcis som han skrev det. Ville nogen hacke systemet, ville brugernavne med tilhørende adgangskoder altså være frit tilgængeligt. Der blev derfor implementeret md5 hashing. Dog er dette et gammelt og forældet hashing algoritme, som ikke længere menes, at være sikkert. Dog viser det fint funktionen af at hashe noget. 3. Opsætning Man kunne nu oprette bruger og ens kodeord var nu hashed. Skrev man forkert eller prøvede, at logge ind blev man sendt til en blank side, på denne side var en error, og man var derved nødsaget til selv, at gå tilbage. Vha. PHP blev den bedt om, at tjekke for fejl og dens position. Findes fejlen, bliver man sendt tilbage til startside med fejmeddelelse. Som f.eks. Brugernavn findes allerede. Vælg nyt brugernavn. Der var nu et flow mellem de forskellige sider, og med diverse fejl meddelelser sad man ikke længere fast. 13

Til at gemme bruger oplysninger når indtastet, var der indtil nu brugt Get. Da dette ikke er særligt godt gemt, men rent faktisk skriver oplysninger i toppen af siden, blev dette udskiftet med Cookies. Cookies gemmer oplysninger på computeren i en bestemt tid. Dette var med til, at fjerne problemet i, at man kunne gå direkte til, at være kommet ind på hjemmesiden ved blot, at indtaste den rigtige URL. Opsætning 4 Implementering af matematik på siden. Vha. JavaScript og html opstilles matematik på siden, når man altså har fået adgang. Her bliver der brugt divtags (html) og funktioner (JavaScript) Ved brug af lidt CSS, bliver der flyttet lidt rundt på matematikken, så udbyttet er bare lidt pænt. 14

Gennemgang af det væsentlige kodning Produktet består af 4 sider, samlet er der omkring 260 linjers kode. Derfor bliver der udvalgt bestemte punkter i kodningen, som der vil blive gået mere i dybden med. MySQL tabeldata Tabellen har 3 felter: ID, brugernavn og kodeord. Varchar(65) betyder, at man kan bruge det antal tegn til angivelse, af brugernavn/kodeord. Id har int(4) og kan altså være bestående af 4 cifre. Derudover er ID sat til AUTO_INCREMENT, hvilket vil sige, at den selv udfylder den. Den vil altså langsomt tælle op. Længere nede bliver ID angivet som primary key og betyder, at den går til denne først. Her ses brugerne som er blevet oprettet. De er alle blevet oprettet på siden, hvor familie, venner og andet har prøvet, at logge ind og afprøve matematikken. Kodeordet man ser er hashed, hvilket betyder, at brugerenes oplysninger ikke ligger så man kan læse det. 15

Kodningen Koden her angiver to forskellige variabler. Disse variabler består af tegn som brugeren har skrevet. Sker det, at der er mærkelige tegn når datarene bliver sendt af sted, vil dette beskytte MySQL. Den sørger for, at der ikke er mærkelige tegn, hvor den så på et senere tidspunkt dekoder dem, så det endnu engang kan læses. Her bliver der forbundet med databasen. Dette sker ud fra de 5 første linjer, hvor værdierne til de forskellige pkt. Bliver angivet. Den kan derved forbinde til serveren og tjekke om indtastet brugernavn og kodeord findes og stemmer overens. Variablerne myusername og mypassword bliver modtaget fra en anden side, hvor den her behandler dem. Desuden bliver kodeordet her hashed (md5 hashing). Variablen $sql er tidligere blevet angivet som værende det der skulle vælge brugernavn og kodeord ud fra tabeldataet på serveren. Her kører det bare modstat vej, den går nemlig ind og gemmer brugernavnet og kodeordet på serveren. Her bliver der tjekket for fejl i dataene. Først bliver det sendt af sted til databasen. Her bliver den øverste funktion angivet som en ny variabel $result. Der bliver så opstillet et ifstatement, hvor der bliver tjekket for fejl. Den bliver her sendt til, at læse brugernavn og kodeord på serveren. mysql_error sender så sandt eller falsk, hvor dette bliver angivet som en ny variabel, $fejl. 16

Den går herefter ind og tjekker om serveren meddeler fejl, dette gør den med strpos, som er string position. Den finder altså ud af på, hvilken linje der er fejl, hvis der altså er fejl. Findes fejlen er if- statementet sandt og den bliver derved kørt. Herved bliver man i dette tilfælde som bruger sendt tilbage til loginsiden med en fejl i URLadressen. Er der ingen fejl bliver, brugernavn og kodeord gemt på computeren i form af cookies, hvor de er sat til, at blive i 1 time. Dette er også ensbetydende med, at man får adgang til matematikken og man bliver derved sendt videre til login_success.php. 17

Denne kode er på matematik siden (login_success.php). Der bliver her afgjort om variablen findes og, at den ikke er nul. Altså går den ind og tjekker for om der findes cookies. Disse cookies skal angive brugernavn og kodeord. Findes de ikke, vil man blive ført tilbage til startsiden (main_login.php), med en fejl der angiver, at man skal logge ind. Her bliver alle de forskellige fejlmeddelelser samlet. Den søger først efter fejl, hvorefter den finder ud af mere præcist, hvilken fejl det er. Herefter vil der dukke et vindue op på brugerens skærm og, hvilken fejl han/hun har og, hvad løsningen er. Dette sker på main_login.php, da det er her man bliver sendt hen, når der opstår fejl. De første linjer giver en ny action til den anden knap opret. Hvor man bliver sendt videre til en create.php filen. 18

Dette er koden som laver matematikken. Alt dette kode bliver vist ved hjælp af html, men html koden vil der ikke blive gået I dybden med. Tjek bilag og login_success.php. Deffinere to forskellige variabler, rigtigt og forkert, herudover giver jeg dem en værdig 0 (linje 15 og 16). Fra linje 30 til 37, bliver to funktioner angivet. De bliver angivet som et random tal mellem 0 og 1000. Der bliver herefter oprettet en funktion udregn. Den bliver bedt om, at ligge de to tidligere funktioner sammen. Da den nu kender til resultatet, bruges der et if og et elsestatement. Er det man angiver det rigtige resultat, vil den ligge et point til på variablen rigtig. Er det forkert bliver elsestatementet kørt og den lægger så et point til på forkert. Samtidig vil man få 2 nye tal, hvis man har regnet rigtigt, mens tallene vil forblive det samme, hvis ikke man har regnet rigtigt. På linje 23 til 28 bliver der oprettet en key funktion. Dette betyder, at der ikke er behov for, at bruge musen og trykke svar, men at man kan bruge enter (13 er karakteren for enter). 19

Det visuelle Herunder ses html som opbygger det visuelle som brugeren kan se. Dette er startsiden (main_login.php), her kan brugeren vælge, at logge ind eller oprette bruger. Samtidigt vil en fejl i login eller opret fører en tilbage hertil med en fejlmeddelelse. Dette er eksempel to på det visuelle man kan opleve på hjemmesiden. Her er brugeren blevet logget ind, enten med en tidligere bruger, eller oprettelse af ny som begge fører til matematik siden (login_success.php). Brugeren kan se to tal som skal lægges sammen, hvor brugeren angiver resultatet i den tomme boks. Alt efter om man svarer rigtig, eller forkert vil der blive lagt 1 til. Svare man rigtigt bliver der lagt 1 til og omvendt. 20

Hashing Kort sagt gør hashing tekst ulæselig. Hashing er et alternativ til kryptering, som også er en måde at beskytte sine data på. Den hashingfunktion der er mest oplagt at bruge er MD5, da MD5 er indbygget som funktion i PHP. MD5 er dog en forældet måde, at foretage hashing på. Det der kendetegner en god hashingfunktion er, at det er nemt at beregne hashkoden ud fra input, og at det er meget vanskeligere at beregne inputtet ud fra hashet. I databasen bruges det til at beskytte brugernes password. Form handling Get: Get bruges til, at sende data fra et form. Det der er med Get er, at alt, hvad der bliver sendt, også er synligt for alle. Dataene bliver nemlig vist i URL. Den er samtidigt også begrænset i mængden af data den kan sende, dette ligger nemlig på 2000 tegn. Da Get sender på denne måde er det ikke smart, at bruge det til følsomt materiale. Alt data kan nemlig blive gemt som bogmærker. Post: Post bruges til, at sende data fra et form. Modsat Get, er data her usynligt. Navne og værdier gemt i body i http (Hypertext Transfer Protocol) henvendelsen. Dette har samtidigt ingen begrænsninger i, hvor meget information den kan sende. Desuden understøtter den multipart binary input mens den uploader til server. Det vil altså sige man kan uploade flere filer på en opfordring. Grundet at den er usynlig kan det ikke blive gemt i bogmærker. Måden at sætte dem op på er dog fuldstændig ens. Cookies: Gemmer data på brugerens computer. Der kan her tales for, og imod om det er smart, bruger man en offentlig computer, vil det ikke være smart med ens bruger oplysninger gemt på computeren. Til gengæld har cookies masser af funktioner, som f.eks. at bestemme, hvor lang tid, hver cookie skal være på brugerens computer. Desuden kan det hele gå hen og fejle, hvis man bruger en browser der ikke understøtter cookies. Cookies er blevet valgt som løsning til dette projekt, da det er smart og tidsindstilling kan blive sat til så kort tid, at du kun når, at gå væk fra siden og så er cookies forsvundet. 21

Debugging Igennem projekter får man lavet forskellige typer fejl. Taste fejl der er afgørende for, at kommandoer ikke bliver udført. Manglende kode til, at fortælle, hvad der skal ske. Bruger ikke samme id de rigtige steder osv. Lige meget, hvilken grund der er for fejl, så skal den findes. Igennem dette projekt er der blevet gjort brug af forskellige værktøjer. Man kan f.eks. bruge browserens fejlfindingsværktøj: Her bliver der tydeligt fortalt, at der er en fejl i kodningen på linje 19. Selvom at linjen med fejlen er fundet, betyder det ikke nødvendigvis, at man kan gennemskue, hvad den skyldes. Her kan man bruge echo og alert i koden, den vil herefter udskrive noget data. På denne måde kan man se om det udbytte kom ud som det skal: I tilfældet under, er udbyttet dog korrekt, men der bliver brugt echo til, at tjekke om, hvorvidt der kommer rigtige værdier ud. 22

Postproduktion Test Det som er opnået med produktet bliver testet her. Her oprettes brugeren 1234 med passwordet 1234. Når der trykkes på opret sker følgende: Det samme sker når man har en bruger og trykker login. 928+646= 1574 Resultatet 1 skrives og følgende sker: Der skrives 1574 i svar feltet: 23

Konklusion Det kan altså konkluderes, at produktet virker. Dette er dog ikke et færdigt produkt, men et produkt der fortsat kan blive udviklet på. Produktet gengiver en stor del af den basale tankegang om, hvordan det skulle virke. Dog er det småt med matematik og spændene features, som netop skulle gøre det sjovere for børn på mellemtrinet. Men som prototype er det der er blevet opnået acceptabelt. Ud fra testen kan vi konkludere at disse krav er blevet opfyldt: Man skal kunne opretter sig som bruger: Man skal kunne se om svaret er forkert Man skal kunne se om svaret er rigtigt 24

Bilag Main_login.php: <html> <head> </head> <meta charset="utf8"> <title> </title> <body onload="load()"> <script type="text/javascript"> var form = document.getelementbyid('myform'); form.onsubmit = function() { form.target = '_self'; ; function myfunction() { form1.action = 'create.php'; form1.submit(); function load() { <?php if (isset($_get["fejl"])) { if ($_GET["fejl"]=="bfa") { 25

if ($_GET["fejl"]=="dsli") { if ($_GET["fejl"]=="fbek") {?> </script> echo "alert('brugernavn findes allerede. \\n Vælg nyt brugernavn.')"; echo "alert('du skal logge ind')"; echo "alert('forkert brugernavn eller kodeord')"; <table width="300" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#cccccc"> <tr> <form name="form1" method="post" action="checklogin.php"> <td> <table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#ffffff"> <tr> <td colspan="3"><strong>bruger Login </strong></td> </tr> <tr> <td width="78">brugernavn</td> <td width="6">:</td> <td width="294"><input name="myusername" type="text" id="myusername"></td> </tr> <tr> 26

<td>kodeord</td> <td>:</td> <td><input name="mypassword" type="password" id="mypassword"></td> </tr> <tr> <td> </td> <td> </td> <td><input type="submit" name="submit" value="login"> <input value='opret' type='button' onclick="myfunction()" id='btn2'> </td> </tr> </table> </td> </tr> </table> </body> </html> 27

Check_login.php: <?php $host="localhost"; // Host name $username="oliverm11"; // Mysql username $password="oliverm_4623"; // Mysql password $db_name="oliverm11"; // Database name $tbl_name="matematik"; // Table name // Connect to server and select database. $link=mysql_connect("$host", "$username", "$password")or die("cannot connect"); mysql_select_db("$db_name")or die("cannot select DB"); // username and password sent from form $myusername=$_post['myusername']; $mypassword=md5($_post['mypassword']); // To protect MySQL injection (more detail about MySQL injection). //Dette vil sige den sørger for, at der ikke er mærkelige tegn, som MySQL ikke kan forstå. //De bliver inkodet til andre tegn, som så på et senere tidspunkt skal dekodes igen, så man kan læse det. $myusername = stripslashes($myusername); $mypassword = stripslashes($mypassword); $myusername = mysql_real_escape_string($myusername); $mypassword = mysql_real_escape_string($mypassword); // Den vælger alle fra tabelensnavn, hvor brugernavnet er lig med det brugeren har indtastet, //samt om kodeordet eksistere og er rigtigt. $sql="select * FROM $tbl_name WHERE Brugernavn='$myusername' and Kodeord='$mypassword'"; $result=mysql_query($sql); // Her bliver det sendt til databasen og gemme resultatet. if (!$result) { die(mysql_error($link)); 28

// Mysql_num_row is counting table row $count=mysql_num_rows($result); mysql_close($link); // Den lukker forbindelsen til databasen ned. Da det ikke længere skal bruges. // If result matched $myusername and $mypassword, table row must be 1 row // Hvis brugernavn og kodeord stemmer overens er der et resultat med EN bruger. if($count==1){ setcookie("user", "$myusername", time()+3600); setcookie("password", "$mypassword", time()+3600); header("location:login_success.php"); else { header("location:main_login.php?fejl=fbek");?> 29

Create.php: <?php $host="localhost"; // Host name $username="oliverm11"; // Mysql username $password="oliverm_4623"; // Mysql password $db_name="oliverm11"; // Database name $tbl_name="matematik"; // Table name // Connect to server and select databse. $link=mysql_connect("$host", "$username", "$password")or die("cannot connect"); mysql_select_db("$db_name")or die("cannot select DB"); // username and password sent from form $myusername=$_post['myusername']; $mypassword=md5($_post['mypassword']); // To protect MySQL injection (more detail about MySQL injection). Dette vil sige den sørger for, at der ikke er mærkelige tegn, som MySQL ikke kan forstå. De bliver inkodet til andre tegn, som så på et senere tidspunkt skal dekodes igen, så man kan læse det. $myusername = stripslashes($myusername); $mypassword = stripslashes($mypassword); $myusername = mysql_real_escape_string($myusername); $mypassword = mysql_real_escape_string($mypassword); // Opretter ny profil på serveren. $sql="insert INTO `oliverm11`.`matematik` (`ID`, `Brugernavn`, `Kodeord`) VALUES (NULL, '$myusername','$mypassword')"; $result=mysql_query($sql); // Her bliver det sendt til databasen og gemme resultatet. //Tjekker for fejl 30

if (!$result) { //Gemmes som variablen "fejl" $fejl = mysql_error($link); //Tjekker om serveren meddeler en specifik fejl > findes allerede en bruger med dette navn. $pos=strpos($fejl,"duplicate entry"); //Findes fejlen, bliver if statementet sandt og kørt. if ($pos!== false) { header("location:main_login.php?fejl=bfa"); else { setcookie("user", "$myusername", time()+3600); setcookie("password", "$mypassword", time()+3600); header("location:login_success.php"); mysql_close($link); // Den lukker forbindelsen til databasen ned. Da det ikke længere skal bruges.?> 31

Login_success.php: <?php if (isset($_cookie["user"]) == false ) { if (isset($_cookie["password"]) == false ) { header("location:main_login.php?fejl=dsli");?> <script> var rigtigt = 0; var forkert = 0; function load() { myfunction1(); myfunction2(); function Key(e) { if (e.keycode == 13) { udregn(); function myfunction1() { 32

var x = Math.floor((Math.random() * 1000) + 1); document.getelementbyid("tal1").innerhtml = x; function myfunction2() { var x = Math.floor((Math.random() * 1000) + 1); document.getelementbyid("tal2").innerhtml = x; function udregn() { var x1 = document.getelementbyid("tal1").innerhtml; var x2 = document.getelementbyid("tal2").innerhtml; var x12 = parseint(x1) + parseint(x2); if (x12 == document.getelementbyid("svar").value) { myfunction1(); myfunction2(); document.getelementbyid("svar").value = ""; rigtigt = rigtigt + 1; document.getelementbyid("antalrigtige").innerhtml = "Antal rigtige: " + rigtigt ; else { forkert = forkert + 1; document.getelementbyid("antalforkerte").innerhtml = "Antal forkerte: " + forkert ; </script> 33

<html> <head> <meta charset="utf8"> </head> <body onload="load()"> <div id="tal1" style="position:absolute; top:100px; left:400px; fontsize:16"></div> <div style="position:absolute; top:100px; left:450px;"> + </div> <div id="tal2" style="position:absolute; top:100px; left:500px;"></div> <div style="position:absolute; top:100px; left:550px;"> = </div> <input id="svar" onkeydown="key(event)" style="position:absolute; top:100px; left:600px;"> <input value='svar' type='button' onclick="udregn()" style="position:absolute; top:100px; left:800px;"> <div id="antalrigtige"style="position:absolute; top:150px; left:500px;">antal rigtige: 0</div> <div id="antalforkerte" style="position:absolute; top:150px; left:700px;">antal forkerte: 0</div> </body> </html> 34