Vad ska du rösta på? Här är Valkompassen!

Behövs det verkligen en ny valkompass, kanske du undrar? Ja, absolut! De flesta valkompasser ger en generell bild av många frågor. Men det finns få valkompasser som ger en specifik bild av några enskilda frågor.

Därför har jag tagit fram en valkompass för Auto Motor & Sport. Så här gick arbetet till.

Enkäten

Först och främst tog jag fram 15 frågor om bilar, trafik och infrastruktur som kan intressera läsarna. Inte det lättaste: egentligen ville jag ha många fler frågor än 15. Men det är nog trots allt den övre gränsen med tanke på tid och tålamod.

Enkäten skickades ut till partierna och en del svarade kanonsnabbt, medan andra tog längre tid på sig. Intressant var också att några av partierna verkar ha en mycket väl utbyggd organisation just för att svara på enkäter. Svaren måste ju vara förankrade i hela partiorganisationen.

Svaren som partierna gav kan du själv se i det här Googledokumentet.

Arbetet med själva valkompassen delade jag upp i två delar: den tekniska (som räknar ut matchningar) och den grafiska (sidan ska vara enkel och snygg att använda).

Tekniken

Jag har använt mig av PHP för att skapa en "matchningsgenerator". Användaren knappar in sitt svar på de 15 frågorna och dessa sparas i en array. På samma sätt är partiernas svar inlagda i en array. Dessa två arrayer matchas mot varandra.

Om det finns en eller flera matchningar skrivs de matchande partierna ut. Om användaren svarat "Ingen åsikt" hoppas frågan helt enkelt över.

Arbetet med valkompassen påbörjades relativt sent och det blev förstås bråttom på slutet. Därför saknas en del funktionalitet som finns i en del andra valkompasser. Min egen valkompass kan inte vikta frågor eller svar ("Håller inte med" har exempelvis ingenting att göra med "Varken eller", de behandlas som helt olika svar). Användaren kan inte klicka för att "den här frågan är extra viktig för mig" och det finns ingen funktionalitet för att välja vad du "brukar rösta på", eller var du "tror dig stå politiskt".

Resultatet presenteras fråga för fråga och kompassen skriver också ut hur de olika partierna svarat på varje fråga.

Om användaren har en åsikt som stämmer överens med ett partis åsikt får partiet ett så kallat "partipoäng". Partiet med flest partipoäng passar användaren bäst.

Mot slutet räknas alla partipoäng samman till en "matchningsgrad". Om användaren tycker som ett visst parti i 6 av 15 frågor blir matchningsgraden 40 procent.

Om matchningsgraden är mer än 80 procent räknas matchningen som "mycket bra". Om matchningsgraden är mer än 50 procent räknas matchningen som "bra". Annars är matchningen "mindre bra".

Hela valkompassen sköts från användarens perspektiv med en enda fil: index.php. Där bestäms i sin tur vilka filer som ska laddas, beroende på vad användaren vill.

Några av PHP-funktionerna jag använt

count(): Hur många frågor har användaren svarat på? array_push(): Addera partipoäng till ett parti som matchar användarens åsikter max(): Vilket är det högsta värdet (alltså bästa matchningen)? krsort() och arsort(): Sortera arrayer urlencode(): Meddelandet som ska synas på Twitter eller Facebook måste kodas på ett särskilt sätt för att det ska bli rätt i URL-strängen

Grundprincipen för resultatberäkningen ser ut så här:

if ($antalSvar == 15) {
	/*Användaren har svarat på alla frågor*/
	if ($value && $value != '4') {
		/*Användaren har INTE svarat "Ingen åsikt"*/
	elseif ($value == '4') {
		/*Användaren HAR svarat "Ingen åsikt"*/
else {
	/*Användaren har INTE svarat på alla frågor*/
}

Designen

Jag har tagit fram en egen grunddesign för den här typen av specialsidor för att snabba upp arbetsprocessen. Sidan är responsiv (passar för mobiltelefoner) och har en sidtopp med logotyp och länk till AMS-sajten.

Förutom min egen grunddesign använder jag Pure CSS för knappar och formulär samt Font Awesome för små ikoner. Jag har aldrig använt någon av dem tidigare men måste säga att båda är fantastiskt smidiga. Skönt att slippa småpill med ikoner – det sköter Font Awesome.

Typsnittet heter Open Sans och används också på AMS-sajten. Användaren måste klicka i ett svar på samtliga 15 frågor, annars beräknas inte resultatet. Det gör det heller inte om användaren svarat "Ingen åsikt" på för många frågor.

De bästa matchningarna märks ut stort och de partier som passar mindre bra får mindre plats.

Egen lösning för valknapparna

Valkompassen krävde en speciallösning för de fyra svarsknapparna ("Håller inte med", "Varken eller", "Håller med" och "Ingen åsikt"). I grund och botten är det en <ul>-lista där varje svarsalternativ är en <input type="radio"> som står på en egen <li>-rad.

Men tack vare lite CSS-trolleri ser det istället ut så här:

Jag började med att dölja cirklarna som man klickar i radioknapparna med hjälp av CSS.

input[type=radio] {
	display: none;
}

Sedan har jag använt taggen <label> för att ge knapparna sin form, och sin färg (röd för "Håller inte med", blå för "Varken eller", grön för "Håller med" och grå för "Ingen åsikt"). När användaren klickat i ett svar blir det fetmarkerat.

Öppna och stänga frågerutorna

Att visa alla 15 frågor i öppet läge direkt när användaren kommer in på sidan såg inte särskilt bra ut. Det blev för mycket information att ta ställning till. Men att helt stänga in alla frågor i "icke-expanderat" läge blev heller inte bra.

Lösningen blev att öppna upp första frågan. Sedan kan användaren klicka på "Nästa fråga" eller på den grå balken i frågan under. Då går en jQuery-funktion in och dels öppnar frågan, dels scrollar ned till den på ett mjukt sätt.

Funktion heter goTo() och tar två argument: vilken rubrik som sidan ska scolla till (med scrollTop()) och vilken fråga (CSS-id) som ska öppnas (med slideDown()).

function goTo(header, question) {
	var header = document.getElementById(header);
	var question = document.getElementById(question);
	$(question).slideDown("fast", function() {
		$('html, body').animate({
			scrollTop: $(header).offset().top-31
			/*Siffran 31: det finns en header högst upp på sidan som är 30 pixlar hög*/
		}, 300);
	});
}

Snabbare laddtider

På min egen blogg har jag lagt in en del uppdateringar för att sidan ska ladda snabbare. Många av dem har jag redan beskrivit i ett tidigare blogginlägg och några av dem finns också i valkompassen.

I korthet handlar det om minifiering av CSS-koden, att ladda js-filer lokalt och inte via CDN och att lägga in den viktigaste CSS-koden inline i <head> istället för i CSS-filen. Bilderna är fortfarande det stora problemet. Tyvärr hade jag inte tid att låta bilderna vara "osynliga" och ladda dem med AJAX först när användaren scrollar ned, eller öppnar en fråga.

Browserstöd

Internet Explorer är förstås det svarta fåret. Funktionaliteten ska det inte vara något större fel på i äldre IE-versioner, men designen ser inte bra ut i äldre webbläsare än Internet Explorer 9. Exempelvis finns inget stöd för mina lösningar med <label> vid svarsalternativen.

Socialt

Ingen sida görs ju längre utan stöd för sociala medier. Jag har använt mig av og-taggar för att sidan ska bli lättare att dela i sociala medier. Då skapas exempelvis ett Twitter Card.

Bra att veta

Valkompassen ger förstås ingen generell bild av vad varje parti vill, utan en mycket specifik bild om just bil- och trafikfrågorna. Partiet som vår Valkompass anser att användaren ska rösta på kan därför passa mycket väl in på åsikterna i bil- och trafikfrågor, men partiet kan också ha andra åsikter i andra frågor som användaren inte alls sympatiserar med.

Och varför är inte Feministiskt initiativ med? Partiet har tyvärr inte svarat på enkäten trots flera påtryckningar.

Testa själv!

Gå in och testa Valkompassen här!