Uppgift 6 - Bygg ett eget spel i HTML5

Uppgiften gick ut på att bygga ett eget spel med HTML5 och JavaScript.

Jag började med kolla runt på HTML5-spel på nätet för att få inspiration. Sedan tog jag fram papper och penna för att brainstorma olika idéer. Såhär brukar det se ut då:

Snabbt beslutade jag mig för att tillverka något slags quiz (à la Buzzfeed), då jag älskar den typen av spel.

Jag ville göra ett quiz om något jag känner till väl, så jag inte behövde ödsla tid på "research". Därför valde jag att quizet skulle handla om mina vänner, närmare bestämt vem av fyra av mina närmsta vänner man är. Möjligen inte jätteintressant för utomstående som inte känner dessa kompisar, men definitivt roligare - och mindre självupptaget - än till exempel ett quiz om mig själv (vilket var en av mina ursprungliga idéer...).

Nästa steg var att tänka ut frågor och svar. Jag valde fyra relativt olika personligheter för att generera så skilda svarsalternativ som möjligt. Frågorna var främst sådana jag kunde svaret på, men ibland frågade jag mina kompisar om jag var osäker. Jag bestämde mig för att ha 11 frågor.

Sedan började jag stilsätta HTML- och CSS-dokumenten, och kunde plocka stora delar från ePortfolion aka uppgift 2 (där du är nu, hej!), med små modifieringar här och där. Exempelvis tog jag bort element såsom footer och menyrad, ändrade dimensioner, samt la till en bakgrundsbild som passade quizets tema. Att hålla på och experimentera med sådant är väldigt kul, enligt mig.

Jag skapade fyra HTML-dokument à la resultatsidor, en för varje kompis. Jag kopierade quizets HTML och CSS rakt av, men ändrade headerns text, la till en liten beskrivning av resultatet och adderade en "gör om testet"-knapp.

Jag använde mig av ett formulär för frågorna och svaren. För att enbart kunna välja ett svarsalternativ, valde jag knappar med input type "radio" för svaren. Jag var inte helt säker på hur koden såg ut för att skapa dessa, så jag tittade på W3Schools.

Efter att jag blivit så gott som klar med HTML/CSS-biten hängav jag mig åt JavaScript-delen av uppgiften. Jag visste redan exakt vad JS-skripten skulle utföra; motta och sammanställa svaren, räkna ut vilken av kompisarna användaren svarat mest likt och därigenom beräkna resultatet - och slutligen visa resultatet för användaren. Det fattades bara att översätta detta till kod. I korthet kan man säga att för varje svarsalternativ quiztagaren väljer, tilldelas värdet 1 åt den kompis svaret tillhör. Den kompis som får högst värde är den användaren "blir".

När jag hade skrivit färdigt all kod (trodde jag) och testade quizet, var ett irritationsmoment att man kunde klicka på resultatknappen utan att ha svarat på alla frågor. Således behövdes en funktion för att åtgärda detta. Följdaktligen la jag in en if-sats som kollade att alla frågor var ifyllda, och gav en varning om samtliga inte var besvarade.

Om du vill göra quizet, hittar du det här!