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 2014-08-26

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
2016-02-22

9 sätt att jobba smartare och effektivare

2015-08-15

Nya bilinbrottskartan – så gjorde jag granskningen

2015-04-07

Första recensionerna av nya Apple Watch

2015-03-21

Interaktiv karta: Se när Sverige byter däck

2015-03-20

Så fixade jag ett mediacenter för 350 spänn

Projekt & artiklar

Laddhybriderna ger enormt stor osäkerhet i hur mycket utsläppen minskar Recharge granskar: Nu har det hänt – elbilar körs längre än bensinbilar i Sverige Recharge granskar: Nu kan du "optimera" din elbil eller laddhybrid för längre räckvidd – men du riskerar garantin Lista: Här är elbilarna där du kommer längst per krona Svenska AdBlue-piraterna säljer fuskbox till lastbilar – och den går igenom besiktningen Recharge granskar: Därför har elbilsförsäljningen i Danmark havererat fullständigt Recharge granskar: Därför kan elbilar vara dyrare att försäkra än fossilbilar Nästan alla elbilsägare skulle göra om köpet – men Tesla är inte bäst Begagnade miljöbilar vräks ut ur Sverige – exporteras till utlandet Testa själv: Så snabbt kommer du fram med Hyperloop Kritikerna har fel – det behövs inte mer än en simpel skärm i Tesla Model 3 Därför är trådlös laddning mycket viktigare än de flesta tror för elbilsomställningen Årets Bil utsedd – knappt en miljöbil i sikte 6 anledningar till att energimiljardären har fel – elbilar är framtiden och Tesla riskerar INTE konkurs Räckvidden framför allt – eller ställer vi fel frågor om nya elbilar? Miljösmart, ja – men det kommer inte alltid vara tokbilligt att köra elbil Det är egentligen på landsbygden som elbilarna passar bäst Detta säger jag till alla elbilsskeptiker – funkar nästan varje gång Efter dödskraschen: "Lösningen är inte att stoppa utvecklingen – snarare tvärt om" Succé eller konkurs – Tesla vinner i vilket fall BMW betalar inte rasslande kamkedjor automatiskt – trots ARN:s beslut Skrotningsklassad Mercedes låg ute på annons hos auktoriserad säljare Toyota Prius säljer bra – så länge bensinpriset är högt Bilrån drabbar inte bara lyxbilsägare – detta gäller om du blir rånad Läsarna hyllar sina elbilar: "Jag är oförskämt nöjd" BMW fälls för kamkedjehaveri i dieselmotor – kostar 50.000 Ägarna berättar: Nya bilar allt snålare – men inte så mycket roligare BMW svarar på kritiken: "Vi prövar saken internt" Försäkringsbolagen känner till Volkswagens dåliga kvalitet Volkswagen svarar på kritiken: "Det är förstås olyckligt" Bilhandlare slutar sälja vissa Volkswagen- och Audimodeller: "Orkar inte med eländet" Vi köper allt fler bilar – men kör allt mindre Här är bilhandlarna som fuskat med momsen – och dömts Unik karta: Här sker bilinbrotten – kolla läget i din kommun Car2go-bilarna kör med vinterdäck på sommaren – det är du som får betala Så fuskar bilhandlarna – struntar i moms och skruvar mätarna Trots siffrorna: "Tycker polisen gör ett bra jobb" Bilhandlarnas åtta vanligaste knep Unik grafik: 185 viltolyckor – varje dag Handlare säljer bilar med olagliga lån Lista: Här är fartkamerorna som fångar flest Så många fastnar i fartkamerorna Läsarna tycker till om bilhandlarna Bilhandlarna med bäst service – enligt köparna 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 dramatiskt" Läsarna berättar om bilinbrotten

Om mig

Jag är digital redaktör 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.