Cum să adaugi un quiz interactiv, gratis, pe WordPress?

De-a lungul competiției SuperBlog mi-au fost remarcate articolele în care am avut inspirația să introduc niște quiz-uri interactive (uite aici un exemplu), așa că m-am gândit să explic puțin cum am făcut asta.

E nevoie de câteva explicații pentru că procedura nu e floare la ureche. Dacă ai avea un plan WordPress business (deci unul pe bani), ai putea folosi diverse widget-uri care produc efectul dorit fără mare efort. Dar dacă n-ai, trebuie să fii inventiv și să te descurci cu ce poți. Eu am testat diverse variante o zi întreagă, în dorința de a găsi ceva și funcțional și estetic. Așa am ajuns la următoarea variantă:

Coduri scurte și editorul cu blocuri

Așa arată o secțiune de tip quiz în forma finală:

Fiecare dintre cele 3 variante este clickable și se expandează, arătându-ți câteva informații suplimentare. Dacă răspunsul e corect, se face verde, dacă e greșit, se face roșu. Ca aici:

Rezultatul de mai sus se poate obține alternând blocurile de tip scurt-cod (short-code) și cele de tip imagine. Imaginile sunt opționale din punct de vedere al funcționării, dar fac ca rezultatul final să arate mult mai bine. În plus, se pot insera imagini și în partea de răspunsuri, fiind un fel de mici surprize. Pentru un demo, vezi aici, quizul de final.

Structura de tip scurt-cod trebuie să fie aceasta:

Tot ce e între paranteze pătrate e obligatoriu. Raspunsurile corecte trebuie incluse în blocuri de tip answer. Răspunsurile greșite – în blocuri de tip wrong. Pot exista oricâte blocuri answer și oricâte wrong. Important e să fie perechi.

Codul de mai sus va funcționa doar dacă îl inserezi într-un bloc de tip scurt-cod. Îl găsești la Adaugă Bloc – secțiunea Piese. Vezi mai jos:

Dacă introduc exact exemplu de mai sus într-un bloc de tip Scurt-Cod, va arăta ca mai jos. Dă click pe variante pentru a vedea ce se întâmplă.

Dacă vrei să inserezi poze, o poți face oriunde. Vei avea un bloc scurt-cod cu tot ce vrei să îți apară înaintea pozei, apoi un bloc imagine, apoi un bloc scurt-cod cu ce vrei să apară după poză. În modul editare, un astfel de post va arăta cam așa:

Sper că am fost clară 🙂 Quiz-urile mi se par foarte versatile, le poți folosi într-o grămadadă de scopuri: pentru a ascunde informație mai tehnică, pentru a crea interacțiune cu cititorul, pentru a surprinde. Imaginație să fie 🙂 Primul e mai greu de realizat, până te prinzi cum să combini elementele, apoi devine automatism.

Succes!