Vediamo qui un altro metodo per poter modificare il comportamento di uno SCORM in base a qualcosa che succede altrove.
Abbiamo già visto un primo metodo basato sul link di accesso al modulo dove, inserendo un parametro nell’url, permettiamo allo SCORM di leggere l’informazione necessaria a modificare alcune azioni.
Il motivo è lo stesso, ovvero la necessità di sbloccare alcuni elementi di gaming in un modulo di Onboarding, dove però le azioni necessarie ad effettuare lo sblocco si trovano in altri corsi. Nella fattispecie parliamo dei corsi obbligatori sulla GDPR e sulla legge 231, il cui completamento deve sbloccare delle azioni nel modulo di Onboarding.
Qui vediamo un secondo metodo, che alla fine è quello che è stato scelto per il nostro progetto.
Il motivo della scelta è che il metodo che utilizza il link diretto, andava a cozzare contro alcuni limiti della nostra piattaforma LMS in merito ai link diretti ai corsi e ai moduli, cosa che andava a creare dei malfunzionamenti per alcune tipologie di utente.
In questo caso, al completamento del corso obbligatorio, l’utente otterrà un codice. Tale codice andrà poi inserito in un apposito campo nel modulo di onboarding, al fine di sbloccare l’elemento specifico.
La cosa può sembrare al primo approccio molto semplice. La complicazione è data invece dalla necessità basilare di ottenere:
- Un codice univoco per ogni utente.
- La possibilità di copiare il codice per incollarlo nel campo di lettura del modulo di Onboarding (il testo di uno scorm tendenzialmente non può essere copiato, sicuramente se realizzato con Storyline).
Ecco qui un semplice esempio: modificare il comportamento di uno scorm tramite codice utente
Notate come solo il codice utente può essere copiato, a differenza del resto del testo presente.
Ma come ottenere questo?
Utilizzando lmsAPI, un’utilissimo oggetto tra le SCORM API di Storyline che, grazie a Javascript permette di connettersi all’LMS, e che in questo caso useremo per leggere il nome completo dell’utente al fine di creare un codice personale.
Dobbiamo quindi creare uno SCORM da aggiungere al corso obbligatorio (nell’esempio sarebbe il Modulo B), una volta completato il corso, che non farà altro che creare il codice. Come dalle immagini seguenti, ci sarà un’unica slide con un semplice testo e un Web Object.
Un unico Trigger che esegue Javascript.
Un’unica variabile testuale chiamata codice.
Tutto il meccanismo si basa sul Javascript eseguito dall’unico Trigger. La premessa doverosa è che non sono uno sviluppatore Javascript, ma sul forum di Articulate si trovano tante discussioni interessanti in merito dove poter recuperare informazioni utilissime.
Il codice è il seguente:
let player = GetPlayer();
let lmsAPI = findLMSAPI(this);
var lmsStudentName = lmsAPI.GetStudentName();
var myStudentName = lmsStudentName.replace(/ /g, 'k');
var nameLength = myStudentName.length;
var JScodice = nameLength * 9 + myStudentName.substr((nameLength - 2),1) + nameLength * 4173 + myStudentName[0].toLowerCase() + nameLength * 18221;
player.SetVar("codice", JScodice);
function findLMSAPI(win) {
if (win.hasOwnProperty("GetStudentID")) {
return win;
}else if (win.parent == win) {
return null;
}else {
return findLMSAPI(win.parent);
}
}Le prime 2 righe servono a richiamare il player e la funzione findLMSAPI, funzione che è definita in fondo, da function in poi (che ho copiato paro paro da esempi trovati sul forum).
Il gruppo di righe intermedio serve a creare il codice utente, dove la prima var lmsStudentName = lmsAPI.GetStudentName() recupera il nome completo dell’utente, quelle successive manipolano la stringa fino a farla diventare il codice che abbiamo visto nell’esempio, l’ultima player.SetVar(“codice”, JScodice) serve ad inserire il codice nella variabile di Storyline precedentemente creata.
In questo esempio per creare il codice utente è stata usata una formula molto semplice, dove prima sostituiamo gli spazi nel nome con la lettera K usando replace(/ /g, ‘k’) poi contiamo la lunghezza del nome length, e usiamo quest’ultimo dato moltiplicandolo per diverse cifre e affiancando i vari risultati, intervallandoli con l’ultima e la prima lettera del nome completo, riducendo però la prima lettera in minuscolo toLowerCase(). Con Javascript è però possibile creare formule o funzioni più complesse che rendano il codice utente più sofisticato.
Abbiamo creato il codice utente, ma non è finita qui. Se ora pensassimo di scrivere il codice a schermo sul player, avremmo come risultato l’impossibilità per l’utente di selezionarlo al fine di incollarlo nel campo del modulo A. Il meccanismo funzionerebbe lo stesso, ma sarebbe una grave scomodità per l’utente.
In questo ci può venire in aiuto l’elemento Web Object di Storyline. Grazie a questo elemento è possibile incorporare una pagina web all’interno del nostro player.
Noi però, anziché inserire un link esterno, inseriremo una pagina web locale creata da noi, dobbiamo quindi creare un file nominandolo index.html con all’interno il seguente codice:
<script>
let player = parent.GetPlayer();
var codiceJS = player.GetVar('codice');
document.write(codiceJS);
</script>Questo semplice codice non fa altro che richiamare il player, prelevare il valore della variabile codice di Storyline e scriverlo a video. A questo punto avremo il codice stampato a video, tranquillamente copiabile dall’utente.
Potete qui notare la differenza tra GetVar e SetVar, usata nel codice precedente, che insieme a GetPlayer rappresentano i pilastri dell’uso di Javascript in Storyline.
Di fatto SetVar serve a valorizzare una variabile di Storyline da Javascript, vedi il codice precedente dove abbiamo creato un valore utilizzando Javascript (il nostro codice utente) e lo abbiamo inserito nella variabile codice di Storyline.
GetVar ha invece lo scopo contrario, ovvero di prelevare un valore da una variabile Storyline per poterlo utilizzare in Javascript, vedi il nostro Web Object con il quale preleviamo il valore della variabile codice di Storyline e lo stampiamo a video tramite Javascript.
(consiglio il seguente video per: un’introduzione all’uso di Javascript in Storyline)
Quindi salviamo il nostro file index.html in una cartella che non dovrà contenere altro, che sarà la cartella che andremo a richiamare quando inseriremo il nostro Web Object locale.
Ecco, siamo praticamente a metà dell’opera.
Ora nel modulo A dobbiamo fare il passaggio inverso. Si tratta di ricreare il codice utente con lo stesso meccanismo, inserirlo in una variabile di Storyline, che confronteremo con il codice inserito dall’utente nel campo di testo. Se i due codici combaciano il bottone si sblocca.
Qui, come progetto Storyline abbiamo un po’ più elementi e un po’ più Trigger, anche perché dobbiamo creare un alert che mi dica se il codice inserito è corretto o meno.
Intanto avremo due slide, dove la seconda avrà semplicemente un tasto per tornare indietro. La prima avrà invece il campo per inserire il codice, il bottone di conferma e il bottone per il passaggio alla slide successiva, che di default è in stato di disabilitato.
Poi dobbiamo considerare due livelli, corretto ed errato, che saranno i nostri alert che comunicheranno all’utente se il codice è corretto o meno, ovviamente entrambi dovranno avere un bottone chiudi al cui click verrà reso invisibile il livello stesso.
Dobbiamo poi considerare 2 variabili, la variabile codice che verrà poi valorizzata tramite Javascript e la variabile TextEntry che viene creata automaticamente nel momento in cui inserisco il campo di testo.
Ora andiamo a vedere i Trigger, partendo dal fondo per semplicità.
- Il passaggio alla seconda slide, al click del bottone specifico, che però di default è in stato di disabilitato.
- Text Entry, anche questo Trigger, come la variabile, viene creato in automatico quando inserisco il campo di testo, che di fatto valorizza la variabile TextEntry con il testo che scrive l’utente.
- Poi vediamo l’eventuale cambio di stato del bottone ora disabilitato, che si verifica solo nel caso in cui, al momento del click sul bottone conferma codice, il testo inserito dall’utente coincide con il valore della variabile codice.
- Al click sul medesimo bottone, vediamo che si rende visibile il layer corretto o errato, a seconda che il testo inserito coincida o meno con la variabile codice.
- Infine, in cima a tutto vediamo l’esecuzione di Javascrip, che si tratta del medesimo codice che abbiamo visto prima, che va a valorizzare la variabile codice di Storyline.
Si tratta quindi di andare a copiare e incollare qui lo stesso codice che abbiamo visto in precedenza.
Ecco, questo metodo risulta forse un po’ più complesso da realizzare ma mi ha evitato alcune problematiche di usabilità rispetto al metodo basato sul parametro dell’url, per via di alcune specificità tecniche della piattaforma LMS proprietaria su cui devo pubblicare i moduli.