Jag är ständigt överraskad av vad du kan uppnå med bara HTML, CSS och lite uppfinningsrikedom. Jag älskar att tänka utanför lådan och försöka kreativa experiment bara för att se om jag kan dra av den.
Dagens slumpmässiga utmaning är att skapa en rolig liten sann / falsk quiz. Frågor kommer att presenteras för användaren och svaren kommer att avslöjas endast på klick. För att få magiken att hända, vänder vi till några ganska galna metoder och använder funktioner som aktiv, fokus och till och med tabindex! Du är tvungen att lära dig några snygga saker så slå hoppet och följa med.
Starta Demo - Ladda ner filer
Grundläggande HTML
Det första som vi behöver göra är att ta reda på strukturen i vår quiz. Det kommer att bestå av en rad frågor (de är inte tekniskt frågor, men du får idén), som var och en innehåller ett uttalande följt av två möjliga svar: sant och falskt.
För att uttalandet ska utvärderas använder vi en h2-tagg. För sant och falskt använder vi stycke-taggar. Slutligen sätter vi hela enheten upp i en fin fråga div. Denna struktur är väldigt modulär och kommer lätt att repeteras när vi lägger till fler frågor.
Kom ihåg att vi ska få användaren att klicka på frågan för att se lösningen. Vi behöver inte komma in på exakt hur detta fungerar än, men vi måste se till att vi har en metod för att indikera rätt lösning. För att göra detta kan vi använda en? Ja? klass och a? nej? klass. För varje fråga, ja? klassen kommer att tillämpas på rätt lösning. Kan någon tänkas fuska och titta på källan till svaren? Du satsar, men vi lägger inte ut för att göra något som är hardcore säkert så cheaters kan ha på det.
Här har vi satt? False? till rätt svar. Nu när vi har funnit vår grundläggande struktur, låt oss sätta upp några exempelfrågor. För dagens experiment, försök att hålla dina påståenden super korta så att allt kan passa på en enda rad.
Instruktioner
För god åtgärd kommer vi också att inkludera några grundläggande anvisningar. Detta kommer att se till att användaren vet vad som ska göras vid laddning av sidan.
Starter CSS
Nu när vi har fått vårt grundläggande innehåll, kan vi hoppa över och börja med visuell styling. Vi kommer att kasta i en grundläggande lat manens återställning för att se till att sakerna klämmer upp ordentligt över webbläsare, sedan flytta in på styling instruktionerna. Lägg till i viss marginal och vaddering, ställ in en bakgrundsfärg, centrera in text och omvandla till stor bokstav.
Därefter ställer du enkelt in teckensnittstilarna för instruktionstexten. Jag har använt typsnittshorthand här för att göra texten djärv, ställa in storlek / linjehöjd och skapa en teckensnittsstapel.
Den här koden ska utgöra instruktioner längst upp ser ut som texten i skärmdumpen nedan. Ganska enkelt, låt oss flytta på stilar för frågorna.
Fråga CSS
Det första som vi behöver koda här är vår frågebehållare. Ställ en höjd på 100px och en bredd på 100%. Ange sedan bakgrundsfärgen, marginalen och överflödet som du ser nedan.
Nästa upp är h2-taggarna. Först, flyta dessa till vänster (du förstår varför senare), lägg sedan till en marginal, sätt färgen till en mörkgrå, gör texten stor och använd teckensnittet igen för att göra texten fet, 80px Helvetica. På svävar ändrar du färgen till en mörkare grå och kontrollerar att markören är en pekare.
Igen finns det inget väldigt komplicerat här. Vi gör bara lite grundläggande text styling för att få saker att se bra ut. Här är vad dina frågor ska se ut just nu:
Svar CSS
Vi har varje uttalande utformat så nu är det dags att se till att sant? och? falskt? se snyggt och korrekt. För att göra detta, flyta dem till vänster så att de kommer att vara rätt i linje med uttalandet. Lägg sedan till en liten marginal, ställ in färg och teckensnitt och gör dem stora versioner. Lägg märke till att jag faktiskt har satt typstorleken till 0px. Detta hjälper dem att vara dolda tills användaren klickar på frågan, vi gör dem större senare. Slutligen slutar vi genom att inkludera en grundläggande färgövergång så att lösningen gradvis kommer att synas när användaren klickar.
Användning: Aktiv för att visa svaret
Allt är kodat och på plats, men hur får vi webbläsaren att visa rätt svar när användaren klickar? Det är här saker hoppa till experimenten. Vi ska kapa på :aktiva pseudoklass så att vi kan spåra en klickhändelse på våra h1-taggar.Observera att IE6 bara fungerar med aktiva stater som appliceras på ankare, så om du är orolig för den webbläsaren (jag inte), gå tillbaka och linda dina rubriker i ett ankare.
Så här fungerar det här:
Vad är det som händer här? Det är en kort nogbit, men det kan vara lite komplicerat att unravel. I grund och botten står det att webbläsaren ändrar färg och storlek på något element med en klass av? Ja? Det råkar vara en syskon av en för närvarande aktiv (som klickas) h2. Vad detta betyder är att när du klickar på en fråga, är det korrekta svaret, enligt definitionen av? Ja? klassen kommer att visas i rött.
Testa
Med det enda lilla koden är denna sak nu helt funktionell. Prova det genom att följa länken nedan.
demo: Klicka här för att starta
En alternativ metod
Låt oss nu säga att du inte gillar det faktum att du måste klicka och håll ned musknappen för att se svaret. Kan vi inte bara hålla svaret på ett enda klick tills användaren klickar på något annat? Med lite mer knep kan vi.
För att dra av det kommer vi att använda ett annat konstigt, experimentellt trick. Genom att spela runt med tester som dessa kan du få en känsla för HTML och CSS-kod som du en dag kan behöva använda i ett verkligt projekt.
Det första du vill göra är att gå in i alla dina h2-taggar i din HTML och lägga till flikindex -? - 1?. Detta gör att du kan ange vilken ordning saker som markeras som användarens flikar runt sidan. Om vi lägger in värdet -1, avaktiverar vi användarens möjlighet att fliken till det här objektet.
Nu är det intressanta det när vi kombinerar detta med :fokus pseudoklass, kan vi faktiskt få svaret att stanna upp efter att användaren klickat. Låt oss lägga till en annan bit till det CSS-fragmentet från tidigare:
Vi lägger till i en väljare som är identisk med den sista, bara den här gången vi använde fokus istället för aktiva. Bara om några webbläsare inte stöder detta lilla trick, lämnade vi dock i den gamla funktionaliteten som en backning.
Testa
Nu när vi har ändrat detta, låt oss kolla in en annan demo. Den här gången klickar du bara på en av deklarationerna för att se sant / falskt visas. Det borde stanna kvar tills du klickar någon annanstans.
demo: Klicka här för att starta
Slutsats
Där har du det, även om du inte har någon användning för en sann / falsk frågesport, borde du nu ha några bra idéer för att använda aktiva, tabindex och fokus på sätt som du aldrig har ansett förut. Känner du till några andra knep på samma sätt? Berätta för oss med en kommentar nedan.