Posar puntuacions a les lliçons fetes amb Google Breadcrumb

Seguint amb el tema de Google Breadcrumb que vaig comentar fa uns dies, he escrit un petit tutorial de fer lliçons amb puntuació. Això permet fer preguntes al lector i, segons la resposta que seleccioni., rebrà una puntuació una altra.

Això és molt útil, tant per motivar al lector com per donar-li unes mètriques sobre el que ha aprés. Ja veureu que és molt fàcil.

Primera pàgina, iniciar el comptador a zero punts

Com es va comentar a la introducció, les pàgines d'una lliçó comencen totes amb un parèntesi que n'indica el nom. Per exemple (1) seria la pàgina anomenada "1". El que no vaig dir és que el nom de la pàgina no és l'única cosa que pot anar dins els parèntesis.

Si després del nom posem ":" Google Breadcrumb interpretarà la resta com una instrucció. Així, si fem "(1:score=0)" en carrega la pàgina "1" el sistema crearà una variable anomenada "score" i se li assignarà un valor inicial de zero.

A continuació poso el codi d'exemple:

(1:score=0) Ara mateix tens 0 punts així que no et preocupis. [Continuar] (2)

Com fer que les respostes sumin o restin punts

A l'anterior article vàrem veure que si posem "[text] (pàgina)" es convertia automàticament en un enllaç cap a una altre pàgina de la lliçó. Per exemple "[Continuar] (2)" faria que la paraula "Continuar" es converteixi en un enllaç cap a la pàgina "2".

Doncs igual com passava amb els parèntesis de l'inici de pàgina, els parèntesis dels enllaços també poden tenir instruccions. Així doncs, si fem per exemple "[Correcte] (3:score++)", quan l'usuari faci clic sobre "Correcte" s'incrementarà la variable puntuació en 1 i s'anirà a la pàgina "3", i si fem "[Erroni] (3:score--)" si l'usuari fa clic sobre "Erroni"la variable "score" decrementarà en 1 i també s'anirà a "3" .

Un codi d'exemple seria:

Llavors si barrejo groc i blau faré verd?

1.[Sí] (7:score++)

2.[No] (5:score--)

Com imprimir la puntuació actual

Com podeu suposar, mantenir la puntuació no serveix de res si no la mostres a l'usuari. Per fer que el valor d'una variable surti per pantalla només cal escriure "<%= nomvariable %>". Per exemple, si fem "La teva puntuació és <%= score %>" es mostrarà el valor actual d'score.

Un codi d'exemple seria:

La teva puntuació és <%= score %>

Un exemple sencer

Com ja podeu imaginar,  he fet un exemple on es posa en pràctica tot això. Si el voleu provar des del navegador podeu seguir aquest enllaç. I si ho voleu provar des del mòbil us deixo el codi QR d'accés.

Codi QR de la lliçó amb puntuació

Una cosa bona que té Google Breadcrumb és que és possible veure el codi font de qualsevol lliçó. En aquest cas podeu accedir al codi amb aquest enllaç.

Tinc també exemple més avançat que implementa un parell de minijocs amb javascript que el deixo per un tercer (i final) article.

Google Breadcrumb: lliçons amb realitat augmentada fàcils de fer

Ahir, via el bloc d'un tal Marcello Rinaldi, vaig descobrir una petita aplicació de Google Labs que m'ha semblat molt interessant. L'aplicació en qüestió es diu Google Breadcrumb. De moment està clarament en beta, però té molt bona pinta.

Què és Google Breadcrumb?

Google Breadcrumb permet definir lliçons amb una sintaxi molt senzilla. Una lliçó són un conjunt de pàgines amb enllaços entre elles, com una mena de wiki però amb un recorregut ja definit. A més, és possible posar-hi codi javascript si es volen programar activitats i d'altres comportaments més avançats.

Fins aquí cap novetat. La gràcia està amb què la interfície està adaptada per dispositius mòbils i que, per cada lliçó, el programa genera un QR-code. Perquè serveix això? Doncs bàsicament permet posar el QR-code en qualsevol lloc (imprès en un pòster, en una diapositiva d'una presentació, enganxat pel carrer, tatuat...) i qualsevol smartphone serà capaç d'accedir a la lliçó fent una foto del codi (en Android amb el BarcodeScanner).

El programa està pensat per aportar un component de realitat augmentada a les explicacions. Per exemple, si s'està fent un conferència sobre diversos temes, permetria incloure un QR a les transparències que portessin a una lliçó sobre els punts principals que s'estan tocant en aquell moment. Així, l'audiència podria, tot fent una fotografia amb el móbil, accedir a l'índex de la presentació, o bé se li podrien donar referències per ampliar allò que s'està explicant, i ho tindrien directament al mòbil.

Un exemple senzill

La següent captura mostra la interfície de Google Breadcrumb amb un exemple extremadament senzill:

Exemple de lliçó amb Google Breadcrumb (feu clic per veure millor)

La interfície d'edició mostra 4 elements: el requadre on escriure el codi de la lliçó, una previsualització de com es veuria en un dispositiu mòbil, un diagrama amb els recorreguts que podria fer l'usuari i el codi QR d'accés a la lliçó. Per si voleu provar-ho, us deixo el codi QR en gran.

Codi QR d'accés a la lliçó simple

Si mireu el codi veureu que no cal saber massa res per definir una lliçó. La sintaxi bàsica és:

• Si una línia comença amb alguna cosa escrita entre parèntesis, vol dir que allà s'inicia una de les pàgines de la lliçó (que s'identifica amb el nom que hi hagi dins els parèntesis). Tot el que s'escrigui fins que es trobi un altre inici de pàgina, formarà part de la pàgina actual. Per exemple, si una línia comença "(2) bla,bla,bla..." vol dir que s'ha iniciat la pàgina amb nom "2".
• Si un text es posa entre claus, per exemple [així] vol dir que és un enllaç. Si després de les claus es posa alguna cosa entre parèntesis vol dir que l'enllaç anterior va on digui el parèntesis. Per exemple "blabla [som-hi] (2) blabla" vol dir que la paraula "som-hi" apareixeria com un enllaç i en fer clic portaria a la pàgina anomendada "2". També e spoden posar direccions externes entre parèntesis.
• La resta del format es pot fer amb html estàndard (imatges, taules, llistes...).

He provat de fer un exemple força més complex tot usant javascript per donar-li una mica més d'interactivitat a la lliçó, però com que l'article em quedaria massa llarg i una mica més tècnic, ho deixo per més endavant.

NOTA: per a Android hi ha una aplicació anomenada Crouton dissenyada específicament per a Google Breadcrumb. A més de fer les lliçons, permet emmagatzemar-les en local per fer-les més endavant.

NOTA 2: d'acord, potser no és exactament realitat augmentada, però no em negareu que no ven més dir-li així que lliçons mòbils amb QR-code. Al cap i a la fi volia que no només els geeks com jo entenguessin perquè pot servir.