Sono costantemente sorpreso da ciò che puoi ottenere usando solo HTML, CSS e un po 'di ingegno. Amo pensare fuori dagli schemi e tentare esperimenti creativi solo per vedere se riesco a farcela.
La sfida casuale di oggi è creare un divertente quiz vero / falso. Le domande saranno presentate all'utente e le risposte saranno rivelate solo al clic. Per fare in modo che la magia avvenga, ci rivolgiamo a metodi piuttosto pazzeschi e utilizziamo funzionalità come Active, Focus e persino Tabindex! Devi imparare alcune cose eccentriche, quindi colpisci il salto e segui.
Avvia demo - Scarica file
HTML di base
La prima cosa che dobbiamo fare è capire la struttura del nostro quiz. Sarà composto da una serie di domande (non lo sono tecnicamente domande, ma ottieni l'idea), ognuna delle quali contiene una dichiarazione seguita da due possibili risposte: vero e falso.
Affinché la dichiarazione venga valutata, utilizzeremo un tag h2. Per true e false, utilizzeremo i tag di paragrafo. Infine, avvolgeremo l'intera unità in una bella domanda div. Questa struttura è molto modulare e sarà ripetibile facilmente aggiungendo più domande.
Ricorda, faremo clic sull'utente per visualizzare la soluzione. Non abbiamo bisogno di capire esattamente come funziona, ma dobbiamo assicurarci di avere un metodo per indicare la soluzione adeguata. Per fare questo, possiamo usare un? Si? classe e un? no? classe. Per ogni domanda, il? Sì? la classe verrà applicata alla soluzione corretta. Qualcuno potrebbe in qualche modo imbrogliare e guardare la fonte per le risposte? Ci puoi scommettere, ma non stiamo programmando di creare qualcosa di assolutamente sicuro, in modo che gli imbroglioni possano farlo.
Qui abbiamo impostato? False? alla risposta corretta. Ora che abbiamo capito la nostra struttura di base, poniamo alcune domande esemplificative. Per l'esperimento di oggi, cerca di mantenere le tue dichiarazioni super brevi in modo che tutto possa essere contenuto su una singola riga.
Istruzioni
Per buona misura, includeremo anche alcune indicazioni di base. Ciò garantirà che l'utente sappia cosa fare al momento del caricamento della pagina.
Starter CSS
Ora che abbiamo trovato i nostri contenuti di base, possiamo saltare e iniziare un po 'di stile visivo. Effettueremo il reset di base di un pigro uomo per assicurarci che le cose si allineino correttamente tra i vari browser, per poi passare allo stile delle istruzioni. Aggiungi margine e padding, imposta un colore di sfondo, allinea il testo al centro e trasforma in maiuscolo.
Quindi, è sufficiente impostare gli stili di carattere per il testo di istruzioni. Ho usato il font stenografia qui per rendere il testo in grassetto, impostare la dimensione / altezza della linea e creare una pila di font.
Questo codice dovrebbe rendere le istruzioni in alto come il testo nello screenshot qui sotto. Piuttosto semplice, passiamo agli stili per le domande.
Domanda CSS
La prima cosa che dobbiamo codificare qui è il nostro contenitore delle domande. Imposta un'altezza di 100 pixel e una larghezza del 100%. Quindi imposta il colore di sfondo, il margine e l'overflow come vedi sotto.
I prossimi sono i tag h2. Per prima cosa, fai fluttuare questi a sinistra (vedrai perché dopo), quindi aggiungi un margine, imposta il colore su un grigio scuro, crea il testo in maiuscolo e usa nuovamente la stenografia del font per rendere il testo grassetto, Helvetica 80px. Al passaggio del mouse, cambia il colore in un grigio più scuro e assicurati che il cursore sia un puntatore.
Ancora una volta, non c'è nulla di veramente complicato qui. Stiamo solo facendo uno stile di base del testo per far sembrare le cose belle. Ecco come dovrebbero apparire le tue domande adesso:
Rispondi CSS
Abbiamo tutte le istruzioni in stile quindi ora è il momento di assicurarci che sia vero? e? falso? sembra bello e corretto. Per fare questo, spostali a sinistra in modo che siano in linea con la dichiarazione. Quindi aggiungi un piccolo margine, imposta il colore e il carattere e rendili maiuscoli. Si noti che in realtà ho impostato la dimensione del carattere su 0px. Questo li aiuta a rimanere nascosti finché l'utente non fa clic sulla domanda, li renderemo più grandi in seguito. Infine, finiamo di includere una transizione di colore di base in modo che la soluzione diventi gradualmente visibile quando l'utente fa clic.
Utilizzo: attivo per mostrare la risposta
Tutto è codificato e installato, ma come facciamo a far sì che il browser mostri la risposta giusta quando l'utente fa clic? È qui che le cose salgono al lato sperimentale. Stiamo per dirottare il :attivo pseudo classe in modo che possiamo tenere traccia di un evento click sui nostri tag h1.Nota che IE6 funzionerà solo con stati attivi applicati alle ancore, quindi se sei preoccupato per quel browser (non lo sono), torna indietro e avvolgi i titoli in un'ancora.
Ecco come funzionerà:
Che diavolo sta succedendo qui? È un frammento abbastanza breve ma può essere un po 'complicato da sbrogliare. Fondamentalmente, dice al browser di cambiare il colore e le dimensioni di ogni elemento con una classe di? Sì? quello che sembra essere un fratello di uno attualmente attivo (che viene cliccato) h2. Ciò significa che, quando fai clic su una domanda, la risposta corretta, come definito dal? Sì? classe, apparirà in rosso.
Provalo
Con quell'unico pezzo di codice, questa cosa ora è perfettamente funzionante. Provalo seguendo il link sottostante.
demo: Clicca qui per il lancio
Un metodo alternativo
Ora, diciamo che non ti piace il fatto che devi cliccare e tenere premuto il pulsante del mouse per vedere la risposta. Non possiamo semplicemente mantenere la risposta su un singolo clic finché l'utente fa clic su qualcos'altro? Con un po 'più di inganno, possiamo.
Per farcela, useremo un altro trucco strano e sperimentale. Giocando con test come questi, sarai in grado di avere un'idea del codice HTML e CSS che un giorno potresti dover utilizzare in un progetto reale.
La prima cosa che vuoi fare è inserire tutti i tag h2 nel tuo codice HTML e aggiungerli indice tab -? - 1?. Questo ti consente di specificare l'ordine in cui le cose sono evidenziate come le schede utente attorno alla pagina. Se inseriamo il valore -1, disabilitiamo la capacità dell'utente di selezionare questo elemento.
Ora, la cosa interessante è che quando combiniamo questo con il :messa a fuoco pseudo classe, possiamo effettivamente fare in modo che la risposta rimanga attiva dopo che l'utente ha fatto clic. Aggiungiamo un altro frammento a quello snippet CSS di prima:
Abbiamo aggiunto un selettore identico all'ultimo, solo che questa volta abbiamo usato messa a fuoco invece di attivo. Nel caso in cui alcuni browser non supportino questo piccolo trucco, abbiamo lasciato la vecchia funzionalità come ripiego.
Provalo
Ora che abbiamo cambiato, esaminiamo un'altra demo. Questa volta è sufficiente fare clic su una delle istruzioni per visualizzare il vero / falso. Dovrebbe rimanere lì fino a quando non clicchi altrove.
demo: Clicca qui per il lancio
Conclusione
Ce l'hai, anche se non hai bisogno di un quiz vero / falso, ora dovresti avere delle idee fantastiche per usare il tabindex attivo e focalizzato in modi che potresti non aver mai considerato prima. Conoscete altri trucchi lungo le stesse linee? Diteci con un commento qui sotto.