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.