Fare pubblicità simulando un sondaggio d'opinione

In questo curioso tip vedremo come realizzare un semplice script DHTML per la promozione di un prodotto/servizio simulando un sondaggio d'opinione. Si tratta di un modo certamente orginale, simpatico e poco invadente per fare pubblicità.

Il meccanismo psicologico prevede che l'utente venga incuriosito dal sondaggio e quindi decida di rispondere alla domanda proposta. Le risposte fornite, ovviamente, dovranno realizzare lo scopo promozionale che ci siamo prefissati.

Vediamo un esempio funzionante di un ipotetico sondaggio con finalità promozionale del nostro servizio di e-learning:

Vuoi diventare un Webmaster?

SI, come?

NO, lo sono già!

Impara su MRW Corsi

Hai imparato su MRW Corsi?

Come potete notare, per ogni risposta viene restituito un messaggio promozionale.

Il tutto è redatto esclusivamente in HTML Javascript lato client.

Mettiamo in pratica questo semplice esempio, facilmente personalizzabile sulla scorta delle proprie esigenze.

Iniziamo dal codice HTML, diviso per fasi ed opportunamente commentato.

La domanda:

<p><b>Vuoi diventare un Webmaster?</b></p>

Le risposte:

<p><input type="radio" name="pmark" onclick="voto='si'" checked> SI, come?</p>
<p><input type="radio" name="pmark" onclick="voto='no'"> NO, lo sono già!</p>

Notare che non è necessario usare il tag <form>, dato che il voto viene espresso direttamente all'evento click su uno dei due radio button, valorizzando una semplice variabile.

Le potenziali risposte. Il "SI":

<p id="si" style="display:none">
Impara su <a href="http://www.mrwcorsi.it/">MRW Corsi</a>
</p>

Il "NO":

<p id="no" style="display:none">
Hai imparato su <a href="http://www.mrwcorsi.it/">MRW Corsi</a>?
</p>

I due paragrafi contenenti le risposte hanno un ID di identificazione e, per default, sono nascosti.

Concludiamo col buttone di conferma (anch'esso contenuto in un paragrafo munito di ID univoco) che richiama la funzione Javascript che esamineremo in seguito:

<p id="bt"><input type="button" value="Conferma" onclick="ADVPoll()"></p>

Passiamo alla funzione Javascript:

<script type="text/javascript">
var voto = "si";
function ADVPoll()
{
  // di default le risposte sono nascoste
  document.getElementById("si").style.display = "none";
  document.getElementById("no").style.display = "none";
  // se ha risposto SI mostro la risposta corrispondente..
  // e nascondo il bottone di conferma risposta
  if (voto == "si")
  {
    document.getElementById("si").style.display = "block";
    document.getElementById("si").style.background = "#FFFF00";
    document.getElementById("si").style.padding = "3px";
    document.getElementById("bt").style.display = "none";
  }
  // faccio la stessa cosa se ha risposto NO
  else if (voto == "no")
  {
    document.getElementById("no").style.display = "block";
    document.getElementById("no").style.background = "#FFFF00";
    document.getElementById("no").style.padding = "3px";
    document.getElementById("bt").style.display = "none";
  }
  // se nessuno dei radio è selezionato mostro un alert
  else
  {
    alert("Scegli un'opzione!");
  }
}
</script>

Controlliamo la risposta (si o no) e mostriamo la risposta nascondendo l'altra, oppure (caso "else") avvisiamo che non v'è stata risposta al sondaggio, invitando a rispondere.