Un sito Web è tanto più apprezzato quanto più riesce ad interagire con i propri visitatori. Sotto l'aspetto prettamente gestionale di un sito, il webmaster puo' adottare programmi residenti su server (server side include), quali CGI e simili per creare: moduli, guestbook, forum automatici, chat, quiz ed altri strumenti di interazione.
Questi programmi residenti su server sono la soluzione migliore e più efficace per l'interazione tra visitatori e server, ma spesso non si ha la possibilità di accedere alla directory CGI-bin o, ancora, non si hanno le conoscenze tecniche per installare e rendere operativo un CGI in Perl.
In questi casi Javascript dà una soluzione interamente sviluppata dal lato client e di facile utilizzo.
Il Javascript di questa settimana crea un quiz con risposte multiple personalizzabile, con il risultato finale espresso in valori percentuali. È bene premettere fin d'ora che essendo un Javascript non è possibile archiviare le informazioni ottenute, nè generare grafici sulle risposte dei visitatori. Per queste caratteristiche avanzate è necessario rivolgersi a tecnologia server side include.
Il file si compone di 1 file:
- esempio.htm
Per una più semplice comprensione del presente script fai continuamente riferimento al file sopracitato, verificando le procedure e i dati espressi. Solo in questo modo, con un continuo confronto, comprenderai le peculiarità di questo Javascript.
esempio.htm
Questo è l'unico file dell'esempio e simula la pagina HTML all'interno della quale va inserito il quiz e la corrispondente valutazione.
Il codice necessario al corretto funzionamento dello script va inserito in due punti differenti del documento: tra gli elementi <head> e nel corpo del documento tra gli elementi <body>.
Iniziamo con l'analisi della sintassi da inserire tra i tag <head> del documento. Prima di tutto impostiamo lo script che richiede il nome di colui o colei che compila il modulo. Tale nome è superfluo ai fini del funzionamento dello script e serve esclusivamente a indicare, all'interno del quiz, il nome del visitatore:
<script type="text/javascript" language="javascript">
<!--
var name=prompt("per favore inserisci il tuo nome","")
// -->
</script>
Successivamente, sempre tra gli elementi <head>, è necessario impostare la sintassi Javascript e la relativa funzioni "quiz":
<script type="text/javascript" language="javascript">
function quiz() {
var i = 0
var total=document.forms.length-1
var ncorrect=0
var response=new Array(total)
var theForms=new Array(total)
var answer=new Array(total)
for (i=1; i<=total;i++)
theForms[i]=document.forms[i-1]
for (i=1; i <= total; i++)
response[i]=theForms[i].answer.selectedIndex
for (i=1; i<=total;i++)
answer[i]=theForms[i].correct.value
var flag=true
for (i=1; i <= total; i++)
if (response[i]==0) {
alert("Attenzione la domanda #"+i+" non ha avuto risposta")
flag=false
}
if (flag) {
for (i=1; i <= total; i++)
if (response[i]==answer[i]) ncorrect++
document.total.score.value = ncorrect
var per = Math.round((ncorrect / total) * 100)
document.total.percent.value = per
document.total.outof.value=total
} //end if (flag)
}
// -->
</script>
La riga di codice:
for (i=1; i<=total;i++)
theForms[i]=document.forms[i-1]
colloca le domande all'interno del documento; mentre il codice:
for (i=1; i <= total; i++)
response[i]=theForms[i].answer.selectedIndex
colloca le risposte dei visitatori.
Il codice "var flag=true" verifica che siano state evase tutte le domande e la sintassi successiva apre la finestra di alert che avverte a quali domande non si è risposto:
if (response[i]==0) {
alert("Attenzione la domanda #"+i+" non ha avuto risposta")
flag=false
}
La riga di codice:
var per = Math.round((ncorrect / total) * 100)
stabilisce in 100 la base massima di valutazione. In altre parole se il visitatore risponde a tutte le domande in modo corretto avrà una valutazione pari a 100, se risponde alla metà pari a 50 e cosi' via.
Impostato il codice Javascript all'interno degli elementi <head> passiamo ad inserire i riferimenti necessari nel corpo del documento perchè tale codice produca i suoi effetti sulle singole voci del modulo.
Prima di tutto richiamiamo il nome fornito all'apertura di pagina dal visitatore per personalizzare il test:
Ciao <strong>
<script type="text/javascript" language="javascript">
<!--
document.write(name);
// -->
</script>
</strong>, rispondi alle seguenti domande:
In questo modo il testo "Ciao xxx, rispondi alle seguenti domande" rimane fisso per ogni visitatore, ed al posto delle xxx viene inserito il nome fornito all'apertura della pagina.
Passiamo, ora, ad impostare la prima domande.
Questo è il codice da inserire:
<form action=esempio.htm method=post name=form1>
<font face="arial" size="2"><strong>qual è la capitale della turchia</strong></font>
<select name=answer size=1>
<option selected value=0>
<option value=1> 1. istambul
<option value=2> 2. ankara
<option value=3> 3. smirne
<option value=4> 4. rodi
<option value=5> 5. adrianopoli
</option>
</select>
<input name=correct size="4" type=hidden value=2>
</form>
Ogni domanda del quiz va impostata con il tag di apertura:
<form action=esempio.htm method=post name=form1>
Il codice successivo risponde alle regole classiche dei moduli HTML. In questo caso in particolare abbiamo impostato un menu a discesa con risposte già definite.
Ad ogni voce di menu viene assegnato un valore "value=n", dove "n" è il numero progressivo.
La risposta corretta tra le 5 impostate viene indicata dalla riga di codice:
<input name=correct size="4" type=hidden value=2>
ed in particolare da "value=2". In questo caso, infatti, la risposta corretta è "Ankara", contrassegnata dal numero 2.
Sulla falsariga della prima domanda vanno impostate le successive.
Finalmente è necessario creare il bottone di submit del form e le finestre che restituiscono il risultato del quiz.
Questo è il codice per il tasto di submit:
<form action=triviaquiz.html method=post name=total>
<input name=button onclick=quiz() type=button value="clicca qui per il risultato">
Mentre il risultato del quiz viene mostrato grazie al seguente codice:
<script type="text/javascript" language="javascript">
<!--
document.write(name);
// -->
</script>
: hai risposto correttamente a <input name=score size=2> domande su un totale di <input name=outof size=2>
hai ottentuo una percentuale di valutazione pari a <input name=percent size=2>%
Non esistono limiti, se non quelli del buonsenso, al numero di domande e alle scelte possibili. Questo Javascript è di facile impostazione oltre che di agevole personalizzazione sia per utenti esperti che meno esperti.
