Erik Söderholm

Digital journalist

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

Det börjar närma sig val och partierna slåss om din röst. Jag har tagit fram en valkompass för Auto Motor & Sport som fokuserar på bil- och trafikfrågor. Så här gick det till.

Publicerat

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!

Blogginlägg
Projekt & artiklar
Ägarnas egna siffror: Så mycket drar laddhybriden Nu har det hänt – elbilar körs längre än bensinbilar Nu kan du chiptrimma din elbil eller laddhybrid Mest räckvidd för pengarna: Så står sig Tesla Model 3 Svenska AdBlue-pirater säljer fuskbox till lastbilar Därför har elbilsförsäljningen i Danmark havererat fullständigt Så mycket dyrare kan en elbil vara att försäkra Tesla har nöjda ägare – men inte allra nöjdast Miljöbilar får rabatt – men vräks iväg till utlandet Testa själv: Så imponerande snabbt kommer du fram med Hyperloop Kritikerna har fel – Elon Musks idé kommer funka Trådlös laddning kan få betydligt fler att byta till en elbil eller hybrid Fossildriven suv vinner Årets Bil – knappt en miljöbil i sikte 6 anledningar att energimiljardären har fel – Tesla riskerar inte konkurs Räckvidden framför allt – eller ställer vi kanske fel frågor om nya elbilar? Miljösmart, ja – men det kommer inte alltid vara så här billigt att köra elbil Det är egentligen på landsbygden som elbilarna passar bäst Detta säger jag till alla elbilsskeptiker – och det fungerar nästan varje gång Efter dödskraschen: "Lösningen är inte att stoppa utvecklingen – snarare tvärt om" Krönika: Succé eller konkurs – Tesla har ändå förändrat bilbranschen i grunden BMW betalar inte alltid för rasslande kamkedja Skrotklassad Mercedes hos auktoriserad säljare När bensinpriserna är låga väljer bilköparna att dissa Toyota Prius Trenden: Bilrån drabbar inte bara lyxbilsägare Läsarna hyllar sina elbilar: "Jag är oförskämt nöjd" BMW fälls för allvarligt haveri i dieselmotor – kan kosta 50.000 Nya bilar allt snålare – men inte så mycket roligare BMW svarar på kritiken: "Vi prövar saken internt" Bilägarna kan få betala för Volkswagens dåliga kvalitet ur egen ficka Volkswagen svarar på kritiken: "Det är olyckligt" Slutar sälja VW och Audi: "Orkar inte med eländet" Vi köper allt fler bilar – men vi kör inte längre sträckor Här är bilhandlarna som fuskat – och dömts Här är stadsdelen som är värst drabbad av bilbrott "Smarta" bilpoolsbilarna har vinterdäck mitt i sommaren Bilhandlarnas fula knep – du kan tvingas betala Trots siffrorna: "Tycker polisen gör ett bra jobb" Åtta vanligaste knepen du råkar ut för hos handlaren Siffror och grafik: Här sker viltolyckorna De lockar bilköpare med olagliga lån Här är fartkamerorna som fångar flest Så många fastnar i fartkamerorna Läsarna tycker till om bilhandlarna Bästa bilhandlaren bjuder på gratis lunch Bilhandlarna utnyttjar inte nätet Många bilhandlare svarar inte på mejl Polisen krockar – för dina skattepengar Så får polisen köra – och inte köra UNIK KARTA: Här sker flest bilinbrott Så undviker du bilinbrott Polisen: "Bilinbrotten har minskat" Läsarna berättar om bilinbrotten

Om mig

Jag är digital redaktionschef på Auto Motor & Sport och Recharge. Jag har en kandidatexamen i journalistik från Mittuniversitetet i Sundsvall och jobbar gärna med datajournalistik och visualiseringar.

Jag skapade min första hemsida i stolpig HTML-kod när jag var tolv. Sedan dess har jag lärt mig CSS, PHP, Javascript, MySQL och en del annat nyttigt. Den här sajten är byggd i mitt eget publiceringssystem eCMS.

Jag jobbar i Sublime Text och Coda och versionshanteringsprogrammet SourceTree. Jag borrar gärna ner mig i avancerade Excelark och gräver runt i Open Refine. Jag använder också grafikbiblioteket D3.js, InDesign, Photoshop, Illustrator och Audacity. Experimenterar med en del PHP-ramverk, Final Cut och Motion, Python, Xcode och Swift.

Kontakt

Mejla mig gärna på eriksdh snabel-a gmail punkt com, följ mig på Twitter eller läs mina artiklar på Auto Motor & Sport och Recharge.