Indice generale

(1)

Indice generale

Indice delle figure ... III

Appendice B: Analisi tecnica del corso e-learning ... 1

B.1. La visualizzazione dei contenuti didattici ... 3

B.1.1. La lista dei contenuti ... 3

B.1.2. Il caricamento della prima pagina dei contenuti ... 5

B.1.3. La funzione getText() ... 6

B.1.4. La funzione getVideo() ... 7

B.1.4.1. Gestione del pulsante play/pause del player video ... 8

B.1.4.2. Gestione dell’indicatore di durata video ... 9

B.1.4.3. Aggiornamento dell’istante attuale e della barra di avanzamento ... 10

B.1.4.4. Gestione delle interazioni con la barra di avanzamento ... 11

B.1.4.5. Gestione delle interazioni con lo slider del volume ... 13

B.1.5. La funzione cleanVideoCommand() ... 15

B.2. La navigazione tra i contenuti didattici ... 16

B.2.1. I pulsanti avanti/indietro del player video ... 16

B.2.2. Il menù di navigazione a comparsa ... 17

B.2.2.1. La funzione loadMenu() ... 18

B.2.2.2. La funzione initMenu() ... 20

B.2.2.3. La funzione goToPage() ... 21

B.2.2.4. L’apertura e chiusura del menu di navigazione ... 22

B.3. La visualizzazione dei questionari ... 23

B.3.1. Gli elementi grafici del file test.html ... 24

B.3.2. La funzione welcomeQuiz() ... 26

B.3.3. La funzione initQuiz() ... 27

(2)

B.3.5. La funzione nextQuestion() ... 29

B.3.6. La funzione updateScore() ... 31

B.3.7. La funzione recordTest() ... 32

B.3.8. La funzione printResult() ... 34

B.3.9. La funzione closeTest() ... 35

B.4. Gestione delle interazioni con i pulsanti laterali ... 35

B.4.1. La finestra “Aiuto” ... 35

B.4.2. La finestra “Glossario” ... 37

B.4.3. La finestra “Riferimenti” ... 37

B.4.4. La chiusura delle finestre ... 38

B.5. Gestione del bookmarking ... 39

B.5.1. Il salvataggio del bookmarking ... 40

B.5.2. Il caricamento del bookmarking ... 42

B.6. Gestione delle animazioni e oggetti grafici ... 46

B.6.1. Gestione delle finestre popup ... 46

B.6.2. Gestione delle nuvolette per messaggi ... 47

(3)

Indice delle figure

FIGURA 1. APPENDICE B: FILE E CARTELLE ... 2

FIGURA 2. APPENDICE B: TRASFORMAZIONE DEL PULSANTE PLAY/PAUSE ... 9

FIGURA 3. APPENDICE B: AGGIORNAMENTO BARRA DI AVANZAMENTO ... 11

FIGURA 4. APPENDICE B: LA FUNZIONE WELCOMEQUIZ() ... 26

FIGURA 5. APPENDICE B: RADIO BUTTON E RISPOSTA ... 28

FIGURA 6. APPENDICE B: LA FUNZIONE NEXTQUESTION() ... 30

FIGURA 7. APPENDICE B: LA FUNZIONE PRINTRESULT() ... 34

FIGURA 8. APPENDICE B: CARICAMENTO NUMERO PAGINA ... 43

(4)

(5)

Appendice B: Analisi tecnica del corso e-learning

Nella presente appendice si riporta l’analisi tecnica di tutte le principali funzionalità offerte dal corso e-learning creato ad hoc, riportando il codice di programmazione necessario per comprenderle al meglio.

E’ opportuno presentare la lista dei file e cartelle a cui si fa riferimento all’interno dell’analisi (Figura 1).

(6)

(7)

B.1. La visualizzazione dei contenuti didattici

La pagina index.html contiene tutti gli elementi fissi che compongono il corso, quindi layout, intestazione, menù a comparsa, pulsanti laterali, player video e numeri di pagina.

L’elemento più importante di questa pagina è il blocco div#content, in cui sono caricate e visualizzate, tramite chiamate AJAX, le pagine relative ai contenuti (posizionate fisicamente all’interno della cartella contents in Figura 1). Il codice riguardante questo elemento è:

Il blocco inizialmente è vuoto ma dopo il caricamento degli elementi della pagina principale (pulsanti, immagini, ecc.) è riempito con il contenuto didattico. La scelta della pagina da visualizzare è decisa dallo studente, in base all’interazione con il sistema di navigazione del corso, il quale opera sulla lista dei contenuti.

B.1.1. La lista dei contenuti

Le pagine dei contenuti sono raccolte all’interno di un oggetto array, denominato

pages, creato utilizzando il linguaggio di scripting JS. Ogni pagina dei contenuti

è vista dall’interprete JS (presente nel browser) come un oggetto page, definito

dal relativo costruttore. All’interno del file navigation.js si trovano i codici riguardanti questi elementi.

<body onUnload="unLoad();"> …

<div id="content"> </div> …

(8)

L’array pages è considerato “globale”, e risulta quindi accessibile da qualsiasi punto del corso. Il costruttore definisce 5 attributi per ogni pagina:

1. address: stringa che indica il percorso relativo (path) della pagina web all’interno del corso;

2. section: carattere che può assumere 5 diversi valori:

• I: nel caso la pagina faccia parte dell’introduzione; • P: nel caso la pagina riguardi il test d’ingresso;

• A: nel caso la pagina faccia parte della sezione argomenti; • R: nel caso la pagina faccia parte della sezione riepilogo;

• F: nel caso la pagina faccia riferimento al test finale.

3. menuTitle: stringa relativa al titolo della pagina, che compare nel

menù di navigazione laterale;

4. video: booleano che indica se all’interno della pagina è presente un video;

5. completed: booleano che indica se la pagina è stata completata dallo

studente (Paragrafo 5.2.5.1.1).

L’aggiunta di ogni pagina all’array pages avviene nel file pages.js, il quale è

realizzato dal wizard.

var pages = new Array();

function page(address, section, menuTitle, video, completed){ this.address = address; this.section = section; this.menuTitle = menuTitle; this.video = video; this.completed = completed; }

(9)

B.1.2. Il caricamento della prima pagina dei contenuti

Alla prima apertura del corso da parte dello studente è visualizzata la prima pagina dei contenuti, cioè la pages[0], all’interno del div#content,

La variabile JS che si occupa di memorizzare il numero della pagina che il discente sta visualizzando è currentPage e viene definita all’interno del file

navigation.js. Il suo valore, nel caso di prima apertura del corso, è fissato a zero.

Nel codice notiamo che l’interprete controlla se la prima pagina contiene un video: in caso affermativo è richiamata la funzione getVideo(), altrimenti viene richiamata la funzione getText(). Entrambe le funzioni richiedono come parametri il percorso relativo della pagina web e la sezione a cui appartiene.

$(document).ready(function(e) {

pages[0] = new page("contents/page0.html","I", "Presentazione", false, false);

pages[1] = new page("contents/page1.html","I","Obiettivi", false, false);

pages[2] = new page("contents/test.html","P","Test d'ingresso",false, false);

… });

var currentPage = null;

$(document).ready(function(e) { … currentPage = 0; … if (pages[currentPage].video) { getVideo(pages[currentPage].address, pages[currentPage].section); } else { getText(pages[currentPage].address, pages[currentPage].section); } … }

(10)

B.1.3. La funzione getText()

La funzione getText() è richiamata solo quando la pagina dei contenuti da mostrare al discente non contiene video. Questa è contenuta nel file text.js, di cui riportiamo i passaggi principali:

Dal codice vediamo che la funzione getText() utilizza essenzialmente l’istruzione load()di jQuery per caricare all’interno del blocco div#content

(presente nella pagina principale index.html) il contenuto della pagina web che si trova all’indirizzo address, utilizzando la tecnologia AJAX. Una volta

caricato il contenuto, si controlla se si tratta di una pagina riguardante un test: in caso affermativo si richiama la funzione welcomeQuiz(section) (Paragrafo B.3.2), che ha il compito di caricare la pagina di benvenuto dei test.

Nella funzione getText() vengono anche aggiornati i valori contenuti

nell’intestazione del corso, tramite istruzioni jQuery: function getText(address,section) { …

$("#content").html("Loading...").load(address, function(result){

…

if (section!="P" && section!="F") { … } else { if (section=="P") { welcomeQuiz("P"); } else { welcomeQuiz("F"); } } }); } $("header #mainTitle").text(“Sezione”);

(11)

B.1.4. La funzione getVideo()

La funzione getVideo() è contenuta all’interno del file video.js e viene richiamata ogni volta che la pagina dei contenuti didattici da mostrare allo studente contiene un video.

Come nel caso della getText(), anche nella getVideo() viene utilizzata l’istruzione load() per caricare all’interno del blocco div#content il contenuto della pagina web posizionata all’indirizzo address.

La variabile video contiene il riferimento all’elemento video#myVideo

presente nella pagina web da visualizzare (Paragrafo C.7). La funzione getVideo() contiene altre istruzioni, relative a:

• l’aggiornamento del testo all’interno dell’intestazione (analogamente al caso della getText());

• la gestione delle funzionalità del pulsante play/pause del player video; • la gestione dell’indicatore della durata del video contenuto nel player

video;

• l’aggiornamento progressivo dell’indicatore dell’istante attuale e della barra di avanzamento;

• la gestione delle interazioni con la barra di avanzamento; • la gestione delle interazione con lo slider del volume.

Le funzionalità sopra elencate sono aggiornate ogni volta che viene visualizzata una diversa pagina con video, in quanto tutte fanno riferimento alla variabile

function getVideo(address, section) { var video = null;

$("#content").html("Loading...").load(address, function(result) {

video = $('#content #video_cont #myVideo'); …

}); }

(12)

video, collegata al filmato attualmente riprodotto; la realizzazione di molte di queste funzionalità è merito delle proprietà offerte dalle specifiche HTML5, elencate al sito http://www.w3schools.com/tags/ref_av_dom.asp.

Sono adesso analizzate dal punto di vista tecnico le voci riportate in precedenza.

B.1.4.1. Gestione del pulsante play/pause del player video

Il pulsante play/pause ha la duplice funzione di avviare e fermare la fruizione del video in base alle necessità del discente. Il codice associato a questo elemento è:

Il click sul pulsante play/pause, identificato dall’elemento a#play_pause

all’interno del file index.html, determina l’esecuzione di alcune istruzioni, disponibili grazie all’utilizzo del tag <video> di HTML5.

L’attributo video[0].paused contiene un valore booleano che indica se il video si trova in pausa oppure no; in caso affermativo viene eseguita l’istruzione

video[0].play(), che, come si può intuire, riavvia la fruizione del video,

mentre in caso contrario viene eseguita l’istruzione video[0].pause().

Ogni volta che il discente seleziona questo pulsante viene inoltre modificata l’icona contenuta al suo interno, come indicato in Figura 2.

$("#play_pause").on("click", function() { if (video[0].paused) { video[0].play(); … } else { video[0].pause(); … } … });

(13)

Figura 2. Appendice B: trasformazione del pulsante play/pause

Per ottenere questa trasformazione sono state utilizzate classi css presenti nel file

style_index.css. Per gestire le icone all’interno del corso sono stati utilizzati gli

sprite css, che sfruttano un metodo per combinare insieme le immagini al fine di

ottimizzare il caricamento della pagina riducendo il numero di richieste HTTP al server.

Per trasformare l’icona del pulsante da play a pause è necessario quindi eseguire la seguente istruzione:

La classe css play si riferisce all’icona play di Figura 2, mentre la classe playh

si riferisce alla stessa icona con effetto hover1. Analoghe considerazioni per le classi pause e pauseh.

B.1.4.2. Gestione dell’indicatore di durata video

All’interno del player video, come descritto nel Paragrafo 5.2.5.2, è presente un indicatore che mostra l’istante attuale e la durata totale del video. Questi valori dipendono dalle caratteristiche del video da mostrare, quindi devono essere opportunamente impostati.

1_{L’effetto hover sfrutta la proprietà della pseudo-classe dinamica css dei link a:hover per modificare}

l’estetica di un elemento quando il puntatore del mouse passa sopra di esso.

$("#play_pause").removeClass("play").removeClass("playh") .addClass("pause").addClass("pauseh");

(14)

L’evento loadedmetadata è lanciato quando il browser ha finito di caricare i metadati che si riferiscono al video. Una volta lanciato l’evento, l’istante attuale è impostato a 00:00, mentre la durata totale è impostata uguale all’attributo

video[0].duration.

All’interno della pagina statica del corso, cioè index.html, l’istante attuale è identificato dall’elemento span#currentTime, la durata totale da

span#duration.

La funzione timeFormat(seconds) trasforma un tempo misurato in secondi

nel formato minuti:secondi.

B.1.4.3. Aggiornamento dell’istante attuale e della barra di avanzamento

Il player video deve in qualche modo rispecchiare l’avanzamento del video durante la fruizione di quest’ultimo. Per ottenere ciò si utilizza l’evento

timeupdate, che è lanciato ogni volta che varia la posizione di riproduzione del video.

L’elemento div#sliderTime si riferisce alla barra di avanzamento azzurra che scorre all’interno di quella grigia (Figura 3).

video.on("loadedmetadata", function() { $('#currentTime').text(timeFormat(0));

$("#duration").text(timeFormat(video[0].duration)); });

video.on("timeupdate", function() { var currentPos = video[0].currentTime; var maxduration = video[0].duration;

var percentage= 100 * (currentPos/maxduration); $("#sliderTime").css("width",percentage+"%"); $('#currentTime').text(timeFormat(currentPos)); });

(15)

La lunghezza della barra di avanzamento azzurra è variata grazie all’attributo css

width, impostato uguale alla percentuale di completamento calcolata.

Figura 3. Appendice B: aggiornamento barra di avanzamento

B.1.4.4. Gestione delle interazioni con la barra di avanzamento

La barra di avanzamento presente nel player video è un oggetto interattivo, quindi il discente può interagire con essa utilizzando il mouse.

L’interprete JS gestisce sia gli eventi di singolo click che di trascinamento sulla barra di avanzamento, variando anche il punto di riproduzione del video.

Per ottenere queste funzionalità si utilizza una variabile booleana denominata

timeDrag, che viene inizializzata durante l’evento mousedown, cioè quando il discente preme il pulsante del mouse sopra la barra; in questo modo all’evento di trascinamento (mousemove) e a quello di rilascio (mouseleave) del pulsante

del mouse, si è sicuri che il discente vuole interagire proprio con la barra di avanzamento.

(16)

La funzione updatebar(e.pageX) viene richiamata ogniqualvolta viene intercettato un evento. Questa richiede come parametro la coordinata x del punto in cui l’utente ha interagito, in modo da calcolare la posizione di riproduzione del video da cui ripartire.

La lunghezza della barra di avanzamento è aggiornata tramite la variazione dell’attributo css witdh, mentre il punto di riproduzione del video è impostato utilizzando la proprietà video[0].currentTime.

var timeDrag = false;

$('.slider').on('mousedown', function(e) { timeDrag = true; updatebar(e.pageX); }); $(document).on('mouseup', function(e) { if(timeDrag) { timeDrag = false; updatebar(e.pageX); } }); $(document).on('mousemove', function(e) { if(timeDrag) { updatebar(e.pageX); } });

var updatebar = function(x) { var progress = $('.slider');

var maxduration = video[0].duration;

var position = x - progress.offset().left;

var percentage = 100 * position / progress.width if(percentage > 100) { percentage = 100; } if(percentage < 0) { percentage = 0; } $('#sliderTime').css('width',percentage+'%');

video[0].currentTime = maxduration * percentage / 100; };

(17)

B.1.4.5. Gestione delle interazioni con lo slider del volume

La gestione delle interazioni del discente con lo slider del volume è analoga a quella della barra di avanzamento, solo che in questo caso la coordinata della posizione di interazione memorizzata è la y, in quanto lo slider del volume è posizionato verticalmente.

(18)

var updateVolume = function(y) { var volume = $('#volume_base'); var percentage;

var position = (volume.offset().top+volume.height())-y-15; if (position<0) {

position=0; } else {

if (position>0 && position<=20) { position=20;

} else {

if (position>50 && position<=65) { position=65; } else { if (position>65) { position=80; } } } } } }

percentage = 100 * position / ($("#volume_hover").css("max- height").replace("px",""));

$('#volume_hover').css('height',position+'px'); video[0].volume = percentage / 100;

(19)

All’interno della funzione updateVolume() è effettuato un controllo ulteriore della posizione di interazione, in quanto graficamente si desidera una visualizzazione graduata dello slider del volume; a questo scopo sono stati aggiunti i costrutti if in cascata.

Per visualizzare lo slider del volume è necessario che il discente selezioni il pulsante del volume sul player video. La chiusura del medesimo slider è possibile sia grazie a una successiva selezione del pulsante del volume, sia selezionando con il puntatore l’area esterna allo slider e al pulsante stesso.

B.1.5. La funzione cleanVideoCommand()

Quando il discente, durante la fruizione del corso, passa da una pagina con video ad una pagina senza video, è necessario disabilitare le interazioni con gli elementi del player relativi ai filmati (pulsante play/pause, barra di avanzamento, pulsante volume, slider volume).

Per ottenere questo si è utilizzata la funzione cleanVideoCommand(), richiamata ogni volta che si deve visualizzare una nuova pagina. Questa funzione controlla se la pagina di contenuti visualizzata in precedenza conteneva un video: in caso affermativo esegue le istruzioni descritte nel seguito.

$("#volume").on("click", function(e) $(".slider_vol").fadeToggle(300); });

…

$(document).on("mousedown", function(e) var vol = $(".slider_vol");

if (vol.is(":visible") && !$(e.target).closest('.slider_vol').length && !$(e.target).closest('#volume').length) { vol.fadeOut(300); } });

(20)

B.2. La navigazione tra i contenuti didattici

La navigazione tra le pagine dei contenuti didattici è possibile attraverso i pulsanti avanti/indietro del player video e il menù a comparsa laterale.

B.2.1. I pulsanti avanti/indietro del player video

All’interno del file navigation.js sono presenti le istruzioni eseguite in seguito alla selezione dei pulsanti avanti e indietro del player video.

Per quanto riguarda il pulsante avanti, il codice corrispondente è: $("#play_pause").unbind("click"): disabilito il pulsante play/pause video.unbind("loadmetadata"): disabilito l’evento loadmetadata video.unbind("timeupdate"): disabilito l’evento timeupdate

$(".slider").unbind("mousedown"): disabilito il click sulla barra di avanzamento del video

$(document).unbind("mouseup"): disabilito il rilascio sulla barra di avanzamento del video

$(document).unbind("mousemove"): disabilito il trascinamento sulla barra di avanzamento del video

$('.slider_vol').unbind("mousedown"): disabilito il click sullo slider del volume

$("#sliderTime").css("width","0%"): azzero la barra dello scorrimento $("#play_pause").removeClass("pause").removeClass("pauseh").ad dClass("play").addClass("playh"): riposiziono il pulsante play/pause su play

$("#next").on("click", function() { if (currentPage!=pages.length-1) { … currentPage++; … cleanVideoCommand(); if (pages[currentPage].video) { getVideo(pages[currentPage].address,pages[currentPage] .section); } else { getText(pages[currentPage].address,pages[currentPage] .section); } } });

(21)

Il pulsante avanti è identificato dall’elemento a#next all’interno del file

index.html.

Al click su questo pulsante l’interprete controlla se il discente si trova nell’ultima pagina dei contenuti del corso: in caso negativo, è incrementato il valore della variabile currentPage e sono richiamate le note funzioni

cleanVideoCommand() e getVideo() oppure getText(). Analogo è il funzionamento del pulsante indietro:

Nel caso di variazione di pagina, l’interprete si occupa anche di aggiornare il numero della pagina attuale, riportato nella parte bassa destra del corso e-learning, denominato span#currentPag all’interno del file index.html:

B.2.2. Il menù di navigazione a comparsa

Il menù a comparsa laterale non ha solo funzionalità legate alla navigazione, ma agisce anche da tabella dei contenuti del corso, riportando tutti i titoli delle

$("#back").on("click", function() { if (currentPage!=0) { … currentPage--; … cleanVideoCommand(); if (pages[currentPage].video) { getVideo(pages[currentPage].address,pages[currentPage] .section); } else { getText(pages[currentPage].address,pages[currentPage] .section); } } }); $("#currentPag").html(currentPage+1);

(22)

pagine dei contenuti divise per sezioni. Inoltre fornisce informazioni aggiuntive riguardo al completamento delle pagine e l’esito dei test d’ingresso e finale. L’inizializzazione del menù a comparsa è contenuta nel file menu.js:

La prima istruzione eseguita è la hide(), che ha l’obiettivo di nascondere il menù a comparsa quando si accede al corso e-learning.

La funzione loadMenu() carica la lista delle pagine dei contenuti nel menù, accedendo all’array pages. La funzione initMenu(), invece, gestisce le funzionalità grafiche di interazione con il menù, come l’apertura dei sottomenù delle sezioni.

B.2.2.1. La funzione loadMenu()

La funzione loadMenu() ha il compito di caricare dall’array pages la lista delle pagine dei contenuti didattici e inserire un loro riferimento all’interno del menù. $(document).ready(function() { $('menu').hide(); loadMenu(); initMenu(); … });

(23)

Nel caso la pagina dei contenuti faccia parte delle sezioni I-A-R, viene inserito all’interno della corrispondente sezione del menù l’elemento:

La variabile X è sostituita dall’indice della pagina dei contenuti all’interno

dell’array. Tramite l’id a#mX è dunque possibile gestire l’aggiunta del carattere ✔ (completato) vicino alla rispettiva voce del menù. La funzione

goToPage(page) gestisce invece la visualizzazione di una nuova pagina di

contenuti.

Le voci riguardanti i test d’ingresso e finale sono già presenti all’interno del menù di navigazione, quindi per quanto riguarda le sezioni P-F è sufficiente

collegare l’attributo onClick della voce del menù alla funzione

goToPage(page).

function loadMenu() {

for (i=0; i<pages.length; i++) { if (pages[i].section=="I") { $("#cssmenu > ul > li > ul").eq(0).append("<li><a id='m"+i+"' onClick='goToPage("+i+");'>"+pages[i] .menuTitle+"</a></li>"); if (pages[i].completed) $("#m"+i).addClass("completed"); } if (pages[i].section=="P") { $("#preTest").attr("onClick","goToPage("+i+")"); } if (pages[i].section=="A") { $("#cssmenu > ul > li > ul").eq(1).append("<li><a id='m"+i+"' onClick='goToPage("+i+");'>"+pages[i] .menuTitle+"</a></li>"); if (pages[i].completed) $("#m"+i).addClass("completed"); } … });

<li><a id='mX' onClick='goToPage(X);'>Titolo della pagina</a></li>

(24)

B.2.2.2. La funzione initMenu()

La funzione initMenu() gestisce l’apertura e la chiusura dei sottomenù relativi alle sezioni del menù di navigazione.

Quando è selezionata una sezione all’interno del menù si istanzia la variabile

checkElement, che acquisisce il riferimento all’elemento <ul> relativo alla sezione selezionata.

• La classe clicked è utilizzata per spostare di 15px verso destra la voce selezionata, in modo da differenziarla dalle altre del menù.

• La classe active è propria degli elementi <li> ed è usata per variare la piccola icona + e – vicino al nome delle sezioni.

Entrambe queste classi sono aggiunte a una sezione quando il discente la seleziona.

function initMenu() { …

$('#cssmenu > ul > li').not(":first-child").not(":last- child").children('a').click(function() {

(25)

Si controlla se la sezione scelta ha il sottomenù già aperto: in caso affermativo si chiude il sottomenù e si rimuove la classe active. Se invece il sottomenù è chiuso, si apre con l’istruzione jQuery slideDown(); eventuali sottomenù aperti sono quindi chiusi con l’istruzione slideUp().

B.2.2.3. La funzione goToPage()

La funzione goToPage(page) viene richiamata dai link all’interno del menù di navigazione, associati alle pagine dei contenuti. Questa è definita all’interno del file navigation.js.

L’interprete controlla se la pagina a cui il discente vuole accedere è diversa da quella corrente; in caso affermativo si modifica il valore della variabile

currentPage e si richiamano le medesime funzioni per la visualizzazione della pagina dei contenuti (Paragrafo B.1.3, B.1.4).

Anche in questo caso quando ci si muove da una pagina all’altra, si aggiorna il numero di pagina corrispondente (Paragrafo B.2.1).

(26)

B.2.2.4. L’apertura e chiusura del menu di navigazione

All’interno del file menu.js vengono anche gestite l’apertura e la chiusura del menù a comparsa:

Una volta selezionata l’icona riguardante l’apertura del menù, identificata nel file

index.html come a#menu, si esegue una piccola animazione, che sposta l’icona a forma di “linguetta” del menù sotto l’elemento div#hide_menu_icon, in modo da nasconderla; a quel punto si mostra al discente il menù di navigazione, con un altro piccolo effetto grafico.

Per chiudere il menù di navigazione si possono eseguire due azioni:

• si può selezionare l’icona a forma di “linguetta” nella parte destra del $('#menu').click(function(e) { … $('#menu').stop().animate({'marginLeft':'-50px'},300, function(){ $('menu').animate({width: 'toggle'}); $("#menu").css("display","none"); }); }); $('#menu_hover').click(function() {

$('menu').animate({width: 'toggle'}, function(){

$('#menu').stop().animate({'marginLeft':'-30px'},300); …

}); });

$(document).on("mousedown", function(e) { var menu = $("menu");

if (menu.is(":visible")) {

if (!$(e.target).closest('menu').length) { menu.animate({width: 'toggle'}, function(){ $('#menu').stop().animate({'marginLeft':'- 30px'},300); … }); e.stopPropagation(); } } });

(27)

• si può selezionare l’area al di fuori del menù.

In entrambi i casi, il menù scompare con un piccolo effetto a scorrimento, facendo ricomparire l’icona di apertura a#menu.

B.3. La visualizzazione dei questionari

La visualizzazione dei test avviene in maniera leggermente diversa rispetto a quanto accade per le pagine dei contenuti didattici: infatti, quando il discente accede a un test, viene visualizzata sempre la pagina test.html all’interno del

div#content. Si tratta di una pagina statica, in cui pero gli elementi sono resi dinamici grazie all’utilizzo di script JS.

La tecnica di memorizzazione delle domande dei questionari è molto simile a quella utilizzata per la memorizzazione delle pagine dei contenuti all’interno dell’array pages.

In questo caso però è creato un oggetto, denominato question, che raccoglie tutte le informazioni relative a una domanda, cioè:

1. testo della domanda;

2. risposta corretta tra quelle inserite; 3. risposta dello studente;

4. possibili risposte.

Il costruttore di quest’oggetto è riportato nel file test.js:

function question(question, correctAnswer, studentAnswer) { this.question = question;

this.correctAnswer = correctAnswer; this.studentAnswer = studentAnswer; this.answers = new Array();

for (var i = 3; i <arguments.length; i++) { this.answers[i-3] = String(arguments[i]); }

(28)

Analizziamo in dettaglio gli attributi di quest’oggetto:

1. question: stringa che contiene il testo della domanda;

2. correctAnswer: numero intero che contiene l’indice della risposta corretta tra quelle disponibili;

3. studentAnswer: variabile che contiene l’indice della risposta selezionata dal discente. Inizialmente assume il valore “?”;

4. answers: oggetto array che contiene la lista delle possibili risposte alla

domanda. Il numero può variare tra 4 e 9.

La lista di domande del test d’ingresso è memorizzata all’interno dell’array

questionP, mentre la lista delle domande del test finale è contenuta all’interno dell’array questionF.

L’aggiunta di ogni domanda all’array corrispondente avviene nei file

questionP.js e questionF.js, che vengono creati dal wizard.

B.3.1. Gli elementi grafici del file test.html

All’interno del file test.html sono inseriti alcuni elementi grafici interattivi, necessari al discente per sostenere i test.

var questionsP = new Array(); var questionsF = new Array();

$(document).ready(function(e) {

questionsP[0] = new question("Domanda 1","0","?", "Giusta", "Sbagliata", "Sbagliata", "Sbagliata");

questionsP[1] = new question("Domanda 2","1","?", "Sbagliata", "Giusta", "Sbagliata", "Sbagliata"); …

(29)

L’elemento div.test-container può contenere al suo interno: • il messaggio di benvenuto;

• il testo relativo alle domanda e alle possibili risposte; • i risultati del questionario;

• il messaggio di uscita.

L’elemento button#start-test è un pulsante che se premuto richiama la funzione initQuiz(). La visualizzazione di questo elemento nel test finale è possibile solo se il discente ha completato tutte le precedenti pagine dei contenuti del corso. Nel caso del test d’ingresso, invece, il pulsante è sempre visibile. Gli elementi span#currentQ e span#totalQ sono utilizzati per mostrare il numero della domanda visualizzata rispetto al numero totale di domande del questionario.

L’elemento button#confirmAns è il pulsante di conferma, che se premuto richiama la funzione nextQuestion().

Infine l’elemento button#exitTest è un pulsante che il discente può premere

in caso voglia uscire dal questionario; la sua pressione richiama la funzione

closeTest().

<div class="test-window test-font"> <div class="test-container"> </div> <button type="button" id="start-test" onClick="initQuiz()">Inizia!

</button>

<button type='submit' id='confirmAns' class='test-button' onClick='nextQuestion()'>Conferma</button>

<button type='button' id='exitTest' class='test-button' onClick="closeTest()">Chiudi</button>

(30)

Per richiamare un questionario è obbligatorio utilizzare la funzione

welcomeQuiz(section) (Paragrafo B.1.3) dove section può assumere il valore P nel caso del test d’ingresso e F nel caso di test finale.

B.3.2. La funzione welcomeQuiz()

La funzione welcomeQuiz() è definita all’interno del file test.js. Per spiegare il suo funzionamento è utile utilizzare un diagramma di flusso.

(31)

La funzione WelcomeQuiz() controlla prima di tutto quale test sta affrontando il discente, se quello d’ingresso o quello finale.

Successivamente si controlla se l’utente ha già effettuato il test:

• in caso affermativo richiama la funzione printResult() che si occupa

di mostrare i risultati;

• in caso negativo viene mostrato un messaggio di benvenuto e viene visualizzato il pulsante button#start-test.

Infine si modifica il titolo della pagina con la stringa “Informazioni”.

B.3.3. La funzione initQuiz()

La funzione initQuiz() è richiamata dalla pressione del pulsante

button#start-test. Questa funzione si occupa di inizializzare alcuni elementi:

Dal codice vediamo che sono inseriti due elementi all’interno del div.test-container:

• div.test-question: ospita al suo interno il testo della domanda;

currentQuestion=0: la domanda iniziale è la numero 0 score = 0: inizializzazione punteggio

$("#start-test").hide(): viene rimosso il pulsante button#start-test $(".test-button").show(): vengono visualizzati i pulsanti Conferma e Chiudi $("#test-numero").show(): viene visualizzato il numero della domanda $("#totalQ").text(questions.length): impostazione numero totale di domande

$(".test-container").empty(): pulitura del contenitore delle domande $(".test-container").html("<div

question'></div><form name='quiz'

class='test-answers'></form>"): aggiunta elementi relativi alla domanda e alle risposte $("header #mainSubtitle").text("Quesiti"); impostazione titolo della pagina

(32)

• form.test-answers: raccoglie la lista delle possibili risposte. Ogni

risposta dispone di un radio button per l’eventuale selezione da parte dello studente.

Il caricamento della domanda all’interno dei due elementi è affidato alla funzione

loadQuestion().

B.3.4. La funzione loadQuestion()

Questa funzione è eseguita ogni volta che si desidera visualizzare una nuova domanda.

Il codice corrispondente è:

La funzione per prima cosa imposta la domanda contenuta nell’attributo

questions[currentQuestion].question nell’elemento div.test-question; successivamente carica all’interno dell’elemento form.test-answer la lista delle possibili risposte a quella specifica domanda, aggiungendo a sinistra di ogni risposta un radio button, come mostrato in Figura 5.

function loadQuestion() { $("div.test-

question").text(questions[currentQuestion].question); $("form.test-answers").empty();

for (var i=0; i<questions[currentQuestion].answers.length; i++) {

$("form.test-answers").append("<span class='test-

answer'><input type='radio' name='q"+currentQuestion+"' value='"+i+"' class='testradio'>" +questions[currentQuestion].answers[i]+"</span><hr class='test- answer-hr'>"); } $("#currentQ").text(currentQuestion+1); … }

(33)

La selezione del radio button corrispondente a una risposta è possibile tramite: • selezione diretta del radio button;

• selezione della linea occupata dalla risposta.

Per ottenere quest’ultima funzionalità si è utilizzato il seguente codice, che controlla se il radio button corrispondente al testo selezionato è attivato (checked) oppure no: in caso negativo si attiva, disattivando gli altri radio button.

B.3.5. La funzione nextQuestion()

La funzione nextQuestion() viene richiamata ogni volta che lo studente

seleziona il pulsante “Conferma” all’interno del questionario. Il diagramma di flusso in Figura 6 mostra il suo funzionamento.

La risposta dello studente è salvata all’interno dell’attributo studentAnswer

dell’oggetto question.

Il calcolo, il salvataggio e la visualizzazione del punteggio ottenuto sono affidati rispettivamente alle funzioni updateScore(), recordTest() e

printResult(), analizzate nei prossimi paragrafi.

$(".test-answer").on("click", function(e) { if ($(this).children(".test-radio").not(":checked")) { $(this).children(".test-radio").prop('checked', true); $(".test-answer").not(this).children(".test- radio").prop('checked',false); } });

(34)

(35)

B.3.6. La funzione updateScore()

La funzione updateScore() ha come obiettivo il conteggio delle risposte corrette dello studente e l’eventuale salvataggio delle interazioni all’interno del DataBase LMS, utilizzando le API JS.

Il calcolo del punteggio avviene semplicemente incrementando la variabile

score in caso la risposta dello studente sia corretta.

In caso lo studente abbia completato il test finale, l’interprete JS si occupa anche dell’esecuzione delle seguenti istruzioni:

Le variabili a cui si fa riferimento sono quelle del modello CMI (Paragrafo A.3). Si analizzano una per una le istruzioni sopra riportate:

function updateScore() {

for (var i=0; i < questions.length;i++) { … if (questions[i].studentAnswer == questions[i].correctAnswer){ score++; } } }); 1. ScormProcessSetValue("cmi.interactions."+i+".id", "finalQuestion"+i); 2. ScormProcessSetValue("cmi.interactions."+i+".type", "choice"); 3. ScormProcessSetValue("cmi.interactions."+i+".description", questions[i].question+""); 4. ScormProcessSetValue("cmi.interactions."+i+" .correct_responses.0.pattern",questions[i] .correctAnswer+""); 5. ScormProcessSetValue("cmi.interactions."+i+" .learner_response",questions[i].studentAnswer+""); 6. ScormProcessSetValue("cmi.interactions."+i+".result", "correct"); ScormProcessSetValue("cmi.interactions."+i+".result", "incorrect");

(36)

1. salvataggio all’interno di cmi.interactions.i.id

dell’identificatore della domanda, con formato finalQuestioni; 2. salvataggio all’interno di cmi.interactions.i.type del tipo di

interazione avvenuta tra studente e corso, in questo caso si ha una scelta multipla (choice);

3. salvataggio all’interno di cmi.interactions.i.descriptio della stringa contenente il testo della domanda;

4. salvataggio all’interno di

cmi.interactions.i.correct_response dell’indice relativo alla risposta corretta tra quelle proposte;

5. salvataggio all’interno di

cmi.interactions.i.learner_response dell’indice relativo alla

risposta data dal discente;

6. salvataggio all’interno di cmi.interactions.i.result della stringa “correct” in caso di risposta corretta dello studente, “incorrect” altrimenti.

Grazie all’utilizzo di queste istruzioni è possibile per il docente tracciare e visualizzare tutte le interazioni tra il discente e il corso.

B.3.7. La funzione recordTest()

La funzione recordTest() viene richiamata appena dopo la updateScore()

e ha il compito di settare il completamento (✔) della pagina relativa al test, verificare il superamento del test ed eventualmente memorizzare all’interno del DataBase LMS il punteggio ottenuto dal discente, in modo da permetterne il tracciamento da parte del docente.

Il completamento della pagina è ottenuto grazie all’istruzione:

(37)

All’interno del corso un test è considerato superato (PASSED) solo se il punteggio è almeno del 60%. Come detto nel Paragrafo 5.2.5.1, nel menù a comparsa è presente una piccola nota vicino alle voci riguardanti i test, che indica il loro superamento. Per impostarla si utilizzano le istruzioni:

Le classi css passed e failed sono dichiarate all’interno del file

stye_index.css e utilizzano lo pseudo-elemento :later per modificare il contenuto del relativo <span>.

Per il salvataggio delle informazioni riguardanti il punteggio finale ottenuto dallo studente, azione eseguita solo in caso di completamento del test finale, si utilizza la funzione ScormProcessSetValue() con i seguenti parametri:

• cmi.score.raw: memorizza il punteggio ottenuto dallo studente normalizzato per il numero totale di domande;

• cmi.score.min: memorizza il minimo punteggio ottenibile, cioè 0; • cmi.score.max: memorizza il massimo punteggio ottenibile, cioè

100;

• cmi.score.scaled: memorizza il punteggio scalato;

• cmi.success_status: memorizza la stringa “passed” o “failed” a

seconda del superamento o meno del test, rispettivamente;

• cmi.completion_status: memorizza la stringa “completed”, in quanto un corso è considerato completato quando viene superato il test finale.

Per i test d’ingresso:

$("#preTest").children("span").addClass("passed"); $("#preTest").children("span").addClass("failed"); Per i test finali:

$("#finalTest").children("span").addClass("passed"); $("#finalTest").children("span").addClass("failed");

(38)

Come detto nel Paragrafo 5.2.2.3, i questionari sono sostenibili solo una volta; se lo studente accede nuovamente a questi, si visualizzano direttamente i punteggi ottenuti.

B.3.8. La funzione printResult()

La funzione printResult() ha il compito di mostrare allo studente un messaggio relativo al punteggio ottenuto.

(39)

B.3.9. La funzione closeTest()

Questa semplice funzione si preoccupa di rimuovere i pulsanti e mostrare un messaggio di uscita allo studente.

E’ comunque possibile per lo studente rientrare nelle pagine concernenti i questionari.

B.4. Gestione delle interazioni con i pulsanti laterali

La pressione su uno dei pulsanti laterali causa la comparsa di una finestra divisa in due colonne:

• la colonna sinistra contiene elementi interattivi selezionabili dall’utente; • la colonna destra è formata da un elemento div.content-win in cui

sono caricate e visualizzate le informazioni richieste. Il caricamento di queste informazioni è ottenuto grazie all’utilizzo di chiamate AJAX. Nei prossimi paragrafi si analizzano le istruzioni principali utilizzate per gestire il funzionamento dei pulsanti.

B.4.1. La finestra “Aiuto”

Le funzionalità della colonna sinistra della finestra aiuto sono inizializzate grazie dalla funzione initHelp(), dichiarata all’interno del file left_buttons.js. Le caratteristiche di questa funzione sono analoghe a quelle della funzione

initMenu()(Paragrafo B.2.2.2).

L’apertura della finestra “Aiuto” avviene in seguito alla selezione del pulsante

a#help, dichiarato nel file index.html:

$("#help").on("click",function(e) { …

$("#help-win").fadeToggle("fast"); …

(40)

La funzione jQuery fadeToggle(speed) determina la comparsa/scomparsa di un elemento con effetto dissolvenza.

La visualizzazione dei contenuti (relativi alla “Guida all’uso” e alle “Funzionalità” offerte dal corso) all’interno dell’elemento div.content-win

avviene grazie alle istruzioni load() riportate nel seguente codice.

Gli elementi interattivi sono quindi:

• a#heading: visualizza le informazioni sull’intestazione del corso; • a#help-h: visualizza le informazioni sull’utilizzo del pulsante aiuto;

• a#glossary-h: visualizza le informazioni sull’utilizzo del pulsante

glossario; $("#heading").on("click", function(e) { $(".content-win-mod-help") .load("contents/plus/heading.html"); }); $("#help-h").on("click", function(e) { $(".content-win-mod-help").load("contents/plus/help.html"); }); $("#glossary-h").on("click", function(e) { $(".content-win-mod-help") .load("contents/plus/glossary.html"); }); $("#references-h").on("click", function(e) { $(".content-win-mod-help") .load("contents/plus/references.html"); }); $("#player-h").on("click", function(e) { $(".content-win-mod-help") .load("contents/plus/player.html"); }); $("#navigation-h").on("click", function(e) { $(".content-win-mod-help") .load("contents/plus/navigation.html"); }); $("#video-h").on("click", function(e) { $(".content-win-mod-help") .load("contents/plus/video.html"); });

(41)

• a#references-h: visualizza le informazioni sull’utilizzo del pulsante

riferimenti;

• a#player-h: visualizza le informazioni sull’utilizzo del player video;

• a#navigation-h: visualizza le informazioni sulla navigazione tra i contenuti;

• a#video-h: visualizza le informazioni sulla fruizione dei video.

B.4.2. La finestra “Glossario”

Le funzionalità della colonna sinistra della finestra glossario vengono inizializzate grazie dalla funzione initGlossary(), dichiarata all’interno del

file left_buttons.js. Le caratteristiche di questa funzione sono analoghe a quelle della funzione initMenu()(Paragrafo B.2.2.2).

L’apertura della finestra “Glossario” avviene in seguito alla selezione del pulsante a#glossary, dichiarato nel file index.html:

B.4.3. La finestra “Riferimenti”

La finestra “Riferimenti” è leggermente diversa dalle due precedenti, poiché sulla colonna sinistra presenta solo due voci interattive, “Linkografia” e “Crediti”, relative agli elementi span#linkography e span#credits nel file

index.html, rispettivamente.

Per indicare l’attivazione di una delle due voci, è stato utilizzato il tipo di carattere grassetto, come mostrato nel seguente codice, relativo alla voce “Linkografia”: $("#glossary").on("click",function(e) { … $("#glossary-win").fadeToggle("fast"); … }

(42)

B.4.4. La chiusura delle finestre

La chiusura delle finestre “Aiuto”, “Glossario” e “Riferimenti” è possibile sia grazie alla selezione dei pulsanti a#help, a#glossary e a#references, rispettivamente, sia grazie al click sull’area del browser esterna a questi elementi. Per ottenere questa funzionalità si è utilizzato il codice JS:

L’interprete controlla per tutte e tre le finestre se: • la finestra è visibile;

• il punto in cui il discente ha premuto il pulsante del mouse è al di fuori della finestra; $("#linkography").on("click", function(e) { … $("#linkography").addClass("bold"); $("#references-win .content- win").load("contents/plus/linkography.html"); }); $(document).on("mousedown", function(e) { var ref = $("#references-win");

if (ref.is(":visible")

&& !$(e.target).closest('#references-win').length && !$(e.target).closest('#references').length){ ref.fadeOut("fast");

}

var glo = $("#glossary-win

if (glo.is(":visible") && !$(e.target).closest('#glossary- win').length && !$(e.target).closest('#glossary').length) { glo.fadeOut("fast");

}

var hel = $("#help-win"); if (hel.is(":visible") && !$(e.target).closest('#help-win').length && !$(e.target).closest('#help').length) { hel.fadeOut("fast"); } });

(43)

• il punto in cui il discente ha premuto il pulsante del mouse è al di fuori del pulsante relativo alla finestra.

In caso affermativo l’interprete chiude la finestra.

B.5. Gestione del bookmarking

Il bookmarking, come accennato nel Paragrafo 5.2.6, è il termine utilizzato per indicare il salvataggio delle informazioni relative alla posizione e al completamento delle pagine del corso, in modo da permettere allo studente la successiva ripartenza dallo stesso punto.

Né lo standard SCORM né tantomeno LMS gestiscono il bookmarking, quindi è stato necessario sviluppare questa funzionalità.

Gli elementi del modello di dati CMI utilizzati per implementare il bookmarking sono:

• cmi.completion_status: può contenere i valori “completed”, “incomplete”, “not attempted”, “unknown”. Ha il compito di indicare se il discente ha completato lo SCO;

• cmi.location: può contenere fino a 1000 caratteri alfanumerici ed è responsabile della memorizzazione del numero di pagina visualizzata dallo studente prima di chiudere la finestra del browser;

• cmi.suspend_data: può contenere fino a 64000 caratteri alfanumerici ed è stato utilizzato per memorizzare le informazioni relative ai punteggi ottenuti nei test e al completamento delle pagine dei contenuti;

• cmi.session_time: memorizza la durata della fruizione dello SCO da parte del discente;

• cmi.exit: può contenere i valori “timeout”, “suspend”, “logout”, “normal”, “”. E’ stato utilizzato per indicare al LMS con quale modalità lo studente esce dal corso;

(44)

• adl.nav.request: elemento che invia una richiesta di navigazione da

processare immediatamente dopo la chiusura del canale di comunicazione SCO-LMS.

Nei prossimi paragrafi sono state analizzate le modalità di salvataggio e caricamento del bookmarking all’interno del corso.

B.5.1. Il salvataggio del bookmarking

La funzione JS che si occupa del salvataggio di tutte le informazioni relative al bookmarking è la unLoad(), dichiarata all’interno del file navigation.js e

richiamata dall’attributo onUnload 2 dell’elemento <body> della pagina

index.html.

La funzione prima di tutto memorizza all’interno dell’elemento del modello CMI

cmi.location il numero della pagina corrente, tramite l’istruzione:

Successivamente si crea una variabile capace di contenere sia i punteggi dei test che il completamento della pagine. Si è deciso di utilizzare una stringa, denominata data, composta secondo il seguente schema:

[0-100]|[0-100]|[Lista T/F]|

ScormProcessSetValue("cmi.location", currentPage); Punteggio test d’ingresso Punteggio test finale Completamento pagine True = completata False = non completata Carattere barra verticale

(45)

Il miglior modo per spiegarne il funzionamento è con un esempio. In un corso con 10 pagine (compresi i test) in cui:

• il discente ha completato solo le prime 5 pagine;

• il discente ha completato il test d’ingresso ottenendo una percentuale di risposte corrette del 75%;

• il discente non ha ancora completato il test finale. La stringa data assume il valore: 75|null|TTTTTFFFFF|.

Il codice JS per creare la stringa data e per memorizzarla nell’elemento

cmi.suspend_data è:

Per quanto riguarda il salvataggio del tempo di fruizione, si è scelto di utilizzare l’oggetto JS Date() per calcolare la differenza tra l’istante di uscita e quello d’ingresso nel corso. Il formato utilizzato dallo standard SCORM 2004 per salvare il tempo è:

Il calcolo e il salvataggio del tempo di fruizione è ottenuto grazie alle seguenti istruzioni.

var data = scoreP+"|"; data += scoreF+"|";

for (var i=0; i<pages.length;i++) { if (pages[i].completed) { data += "T"; } else { data += "F"; } } data += "|"; ScormProcessSetValue("cmi.suspend_data",data); PT[Minuti]M[Secondi.Decimi]S

(46)

Prima di richiamare la funzione ScormProcessTerminate(), che si occupa di chiudere il canale di comunicazione SCORM-LMS, è necessario indicare al LMS la modalità con cui vogliamo che l’utente esca dal corso.

Nel nostro caso desideriamo che l’utente possa riprendere in ogni momento la fruizione del corso, anche nel caso l’abbia già completato. Per questo la modalità di uscita scelta è la “suspend”, o sospensione.

B.5.2. Il caricamento del bookmarking

Il caricamento delle informazioni riguardanti il bookmarking avviene all’interno del file navigation.js.

Nel diagramma di Figura 8 si mostra com’è caricato dal bookmark il numero dell’ultima pagina visualizzata dal discente prima di uscire da corso.

var endTimeStamp = new Date();

var totalms = (endTimeStamp.getTime() - startTimeStamp.getTime());

var scormTime = ConvertMilliSecondsIntoSCORM2004Time(totalms); ScormProcessSetValue("cmi.session_time", scormTime);

ScormProcessSetValue("cmi.exit", "suspend");

ScormProcessSetValue("adl.nav.request", "suspendAll"); ScormProcessTerminate();

(47)

(48)

Nel caso di primo ingresso al corso e-learning, l’elemento

cmi.completion_status è impostato a “incomplete”.

Il discente può scegliere se ripartire dal punto in cui aveva interrotto la fruizione grazie alla comparsa di una finestra di dialogo (mostrata nel Paragrafo 5.2.6). Il caricamento delle informazioni relative ai punteggi dei test e ai completamenti delle pagine è mostrato nel diagramma in Figura 9.

(49)

(50)

B.6. Gestione delle animazioni e oggetti grafici

Come detto nel Paragrafo 5.2.7, nel corso e-learning sono presenti oggetti che offrono informazioni aggiuntive al discente, come:

• approfondimenti didattici, gestiti dalle finestre popup; • indicazioni tecniche, gestite dalle nuvolette per messaggi; • promemoria, gestiti dagli avvisi.

B.6.1. Gestione delle finestre popup

Per creare le finestre di popup è stato utilizzato il plugin gratuito jQuery

Custombox v.1.1.3, disponibile all’indirizzo http://dixso.github.io/custombox/.

Per utilizzarlo è sufficiente collegare all’evento click di un pulsante il seguente codice JS di esempio:

Il codice riportato si riferisce alla visualizzazione del contenuto della pagina d’esempio approfondimenti.html all’interno di un popup di larghezza 600px. Nel codice di esempio stati anche specificati effetti grafici di ingresso/uscita e con una velocità di 400ms.

Il lettore interessato può ottenere maggiori informazioni riguardo al suo utilizzo accedendo al sito ufficiale del suddetto plugin.

$.fn.custombox( this, { url: 'contents/plus/approfondimenti.html', width: 600, effect: 'blur', overlayOpacity:'0.3', overlayColor:'#FFF', speed:'400' });

(51)

B.6.2. Gestione delle nuvolette per messaggi

Il codice riguardante la creazione di una nuvoletta per messaggi è presente nel Paragrafo 5.3.3.1.

Si specifica che lo script showBubbles(milliseconds) si occupa di far comparire la nuvoletta con un effetto dissolvenza.

B.6.3. Gestione degli avvisi

Le istruzioni che gestiscono gli avvisi si trovano all’interno del file

navigation.js, nelle sezioni riguardanti gli eventi click sui pulsanti

avanti/indietro del player video.

Questi elementi possono comparire solo in corrispondenza delle pagine appartenenti alle sezioni introduzione, argomenti e riepilogo. L’avviso collegato al pulsante avanti del player è indentificato con div#warning-win-next, mentre quello collegato con il pulsante indietro è div#warning-win-back. Si tratta sostanzialmente dello stesso elemento spostato lungo l’asse orizzontale di 350px.

Si riporta come esempio il codice riguardante l’avviso collegato al pulsante avanti del player.

L’interprete controlla se la pagina visualizzata in precedenza è stata completata; nel caso non lo sia, si ha la comparsa dell’avviso.

La chiusura degli avvisi è possibile sia attraverso il link a.close-warning

riportante il testo “Chiudi” sia cliccando con il mouse al di fuori dell’avviso. $("#next").on("click", function() { … if (!pages[currentPage].completed && …) { … $("#warning-win-next").fadeToggle("fast"); } … });

(52)

$(".close-warning").on("click",function(e) { $(this).closest("div").fadeOut("fast"); });

$(document).on("mousedown", function(e) { var war1 = $("#warning-win-next");

if (war1.is(":visible") && !$(e.target).closest('#warning- win-next').length) {

war1.fadeOut("fast"); }

var war2 = $("#warning-win-back");

if (war2.is(":visible") && !$(e.target).closest('#warning- win-back').length) {

war2.fadeOut("fast"); }