Fins ara ja heu anat veient les múltiples possibilitats que ofereixen els gràfics de la Wiris.

Ara bé, la combinació d'elements de programació i els recursos gràfics permeten dissenyar gràfics amb resposta i arribar a la construcció succinta de gràfics sofisticats.

En aquesta pràctica, començant per l'animació que teniu seguidament, veureu diversos exemples que amb l'ús de comandes condicionals permeten un grau més d'interactivitat: el programa dóna una resposta escrita a l'acció de l'usuari o la usuària.

Començarem aquesta activitat amb una consideració que ja vam fer en els primers contactes amb la programació.

La forma de treballar internament la Wiris fa que les comandes de programació tinguin sempre com a finalitat fer càlculs o construir un objecte. La programació no inclou sentències d'execució, com és ara dibuixa o escriu.

Si volem dibuixar un objecte complicat, no podem fer un programa que vagi dibuixant cada part de l'objecte per separat; la idea directriu haurà de ser construir l'objecte per programació i llavors dibuixar-lo amb una sola comanda. En altres pràctiques en veureu exemples.

Semblantment, la línia de treball que haurem d'adoptar si volem donar una resposta condicionada a algunes accions de l'usuari o la usuària o a posicions d'elements gràfics serà elaborar el missatge de resposta per programa i finalment escriure'l amb una sola comanda.

Imaginem que volem fer una activitat ben senzilla que consisteixi a indicar la posició d'un punt A, mòbil, respecte a una circumferència donada. Em molts altres entorns podríem fer una cosa semblant a aquesta:

              
            Aquesta no és la filosofia de la programació amb la Wiris ++

En canvi, amb la Wiris, el que haurem de fer és definir la resposta que volem que aparegui en pantalla, donant valors a una variable amb := perquè s'actualitzi, i finalment escriure aquesta resposta. Tot seguit, en podeu veure l'esquema. Si cliqueu a la icona de la fletxa, en podreu analitzar el codi i fer l'activitat.

                 
                        Cal construir la resposta i després escriure-la

• Per què us sembla que es fa dibuixa({CF,A}...), és a dir, primer la circumferència i després el punt, i no al revés?
  Què us sembla que passaria si féssim dibuixa({A,CF}...)?
  Investigueu-ho.
• Veureu que hi ha una comanda tolerància(10^-2). El seu objectiu és gairebé imprescindible en l'activitat que es presenta. Si activem aquesta comanda, la Wiris considera iguals dos nombres que el valor absolut de la seva diferència sigui més petit que el grau de tolerància indicat. Per defecte, la tolerància és 10^-12 i això faria que fos pràcticament impossible trobar un punt de la circumferència (perquè treballem amb píxels i els píxels, a diferència dels punts geomètrics, evolucionen a salts, no contínuament.)
• També podeu veure que en aquest cas hem variat els atributs del tauler mitjançant comandes a les quals es passa un paràmetre. JA sabeu de la primer apràctica d'aquest mòdul que l'alternativa a la tercera línia seria tauler({mostrar_eixos=fals, mostrar_malla=fals, informació="cap"}). Recordeu que l'objectiu d'aquesta darrera opció és la de no estar activa cap de les icones , i en el tauler gràfic.

És ben clar que si un professor o una professora es plantegen una activitat del caràcter de la que es presenta, de seguida pensaran que no és gens convenient que els nens i les nenes vegin el codi font de la pàgina Wiris, que ben segur que enredaria. Cal recordar llavors que:

• Es pot guardar la pàgina de manera que s'obri automàticament el tauler gràfic.
• Es pot inserir una pantalla activa que no es vegi en una pàgina web on es poden donar unes breus instruccions.

Sobre el codi de la pàgina us volem fer notar:

• La manera de construir el quadrat i el triangle definint la posició dels punts relativa al que és el centre i llavors és el punt que permet arrossegar la figura.
• L'ordre com es dibuixen els objectes, perquè quan es moguin el cercle, el quadrat o el triangle, com que són les últimes coses que es dibuixen, es vegin sempre.
• El fet que el punt centre de cada figura es pinta del mateix color que l'interior de les figures i així no es veu. Tanmateix, si no el pintéssim, no podríem moure la figura. Tal com està fet, en acostar el cursor al centre de cada figura, canvia l'aspecte: es torna una mà que indica que podem moure un punt... i així s'actualitzen tots els objectes que l'han pres com a element de definició i s'han definit amb :=.
• La comanda compta_element que, aplicada a una llista, ens torna un element de treball de la Wiris anomenat divisor, que s'ha descrit en la pràctica 1 del mòdul 2. Aquest divisor ens fa una taula de valors dels elements de la llista en forma de dada freqüència. Vegeu-ne un exemple:

  
        Una nova comanda: pot servir per comptar encerts

  Hem aprofitat aquesta comanda perquè definint una llista amb les condicions que indiquen si s'ha col·locat a lloc cada figura o no, això ens permet comptar fàcilment el nombre d'encerts i aplicar-ho a definir la resposta.

• Finalment, pel fet que per l'estructura interna del programa els atributs de dibuix no es poden actualitzar interactivament, podeu veure en les darreres línies un "artifici" que substitueix el que en altres entorns de programació es podria escriure més o menys així:

  
        Un altre exemple de procediment que no concorda amb la filosofia de la Wiris

Pel que fa a la presentació real de l'activitat, hem aprofitat la possibilitat del JavaScript d'obrir una finestra petita on hem escrit unes breus instruccions i hem inserit, com s'explica a la pràctica 2, la miniaplicació de l'activitat que havíem guardat amb les opcions Activar-se en carregar, Calcular-se en carregar i Amagar barra d'eines

• Recordeu que si us interessa aprofitar aquest apossibilitat teniu un annex d'aquest mòdul on es comenten aspectes relatius a "la Wiris al web".
• Heu de saber que el codi font de les pàgines Wiris sempre és obert encara que estigui amagat. En concret si voleu estudiar la pàgina web que engega l'activitat anterior podeu fer visualitza el codi font de la pàgina i allà hi veureu tant els elements auxiliars que presenten l'activitat com el codi de l'applet on podreu veure WIDTH=0, HEIGHT=0 perquè quedi del tot amagada la finestra del codi Wiris.

Les tres propostes que us fem són les següents: