Mòdul 5 - Pràctica 1

La metodologia de treball per a aquesta pràctica consistirà a importar un Quadern amb diferents preguntes de selecció d'una o més zones de la imatge, estudiar els principals elements per veure com estan fetes i aprendre a crear-ne de noves.

Per tant, a la primera part, editareu i revisareu exemples de preguntes ja creades, i serà a la segona part quan creareu de zero una pregunta de zones sensibles en la seva modalitat de selecció d'una o més zones de la imatge.

Per fer aquesta pràctica, necessitareu el Quadern zones_sensibles.qv.zip.

Importació d'un quadern d'exemple amb preguntes de zones sensibles

En primer lloc, cal disposar del fitxer zones_sensibles.qv.zip, que heu de descarregar i desar al vostre ordinador per importar-lo al vostre espai de l'Editor de QV amb el nom de zones_sensibles.

Si teniu dubtes a l'hora d'importar el quadern, reviseu el primer mòdul.

Exemple de pregunta de zona sensible, selecció d'una o més zones de la imatge

A partir de diferents exemples de preguntes de zones sensibles que conté el Quadern que acabeu d'importar, n'editareu el contingut, observareu com estan fetes i aprendreu a fer-ne de noves.

En aquesta pràctica en concret, us heu de fixar només en el primer full, que és el que conté els exemples de preguntes de selecció d'una o més zones de la imatge.

Segons el QV que heu importat, zones_sensibles, la primera pregunta del primer full s'anomena rectangle i presenta l'aspecte següent:

^{Exemple de pregunta de zona sensible amb selecció d'una o més zones}

En aquesta pregunta, s'ha de clicar a la imatge que no pertany a la mateixa família, en aquest cas, l'elefant.

Si editeu aquesta pregunta, veureu que al menú Tipus us apareix un desplegable on podeu triar entre un dels tipus de pregunta. En aquest cas, s'ha triat Selecció de zones sobre la imatge. La resta de paràmetres fan referència a les diferents decisions que heu de prendre, d'una manera semblant a com s'ha fet a les pràctiques anteriors referents a preguntes d'arrossegar.

	Heu d'escriure el nombre d'imatges o zones que es poden clicar com a mínim i com a màxim. Permet, per tant, definir preguntes amb resposta múltiple (més d'una resposta correcta).
	Cal especificar el codi del color amb el qual voleu que es marqui la vora exterior de la zona que es clica. Clicant a l'interrogant, es pot accedir als codis dels colors.
	Es pot triar entre un color o una imatge. L'opció triada és la que se superposarà a la zona que es clica.
	Si es tria marcar la zona amb color de fons, es pot introduir el codi del color desitjat. De nou, clicant a l'interrogant, es pot accedir als codis dels colors.
	Permet triar la imatge, creu.gif, segons l'exemple, que us apareixerà dins el requadre quan es marqui una zona. Es recomana fer que aquesta imatge tingui un fons transparent.

^{Clicant a ?, al costat dels quadres de text color, podeu obtenir els codis HTML dels colors}

Càlcul de les coordenades i les dimensions de les zones

Abans de poder afegir les diferents zones heu de conèixer la posició exacta dins la imatge de fons on estaran, així com les seves dimensions.

Per obtenir les coordenades, podeu fer servir una eina que ofereix l'editor clicant al botó Coordenades XY.

Sobre la imatge del fons triat se superposa una graella de coordenades x, y. Movent el ratolí per sobre de la imatge, apareixen, a la part inferior de la pantalla, els valors corresponents a les coordenades del punt exacte on es troba el punter.

Caldrà prendre bona nota de les coordenades x i y de la cantonada superior esquerra de cadascuna de les zones, per introduir-les posteriorment a l'editor.

Per fer aquest procés, pot resultar útil imprimir la imatge de fons, pintar les línies que delimiten les zones abans esmentades i anar apuntant les coordenades aproximades d'aquestes línies.

La imatge següent mostra un exemple que servirà de guia a l'hora de consultar les coordenades i identificadors de les diferents zones de destinació i objectes arrossegables. Així, per exemple, la zona de més a la dreta té com a identificador trompeta i les seves coordenades són 375, 20.

En aquest cas, us interessarà obtenir les coordenades i les mides de cadascuna de les zones que es podran marcar, és a dir, de la bateria, la guitarra, l'elefant i la trompeta. Per fer-ho, obtindreu les coordenades de la cantonada superior esquerra d'una figura geomètrica rectangular imaginària per a cada zona. Així, per a la figura de la bateria, les dades poden ser 5, 20, per a la guitarra 125, 20, i així successivament.

L'altra dada que us falta són les mides d'amplada i d'alçada de cada imatge. Aquestes dades les podeu obtenir de dues formes:

1. Calculant les coordenades de la cantonada inferior dreta i fent la resta amb les coordenades de la cantonada superior esquerra. Així, per exemple, per calcular l'amplada de l'elefant, restareu 245, que és la coordenada x de la cantonada esquerra, a 365, que és la coordenada x de la cantonada dreta, i obtindreu que el seu valor és 120.
2. Obrint aquesta imatge de fons (fons.gif) amb un programari de dibuix assistit per ordinador o gràfic, com per exemple, GIMP. En el cas de les figures anteriors, les mides de l'elefant, per exemple, poden ser Amplada=120, Alçada=110.

Cal prendre nota de les dades anteriors: Coordenadades X, Y, Amplada i Alçada per introduir-les en el pas següent:

Clicant al botó + Afegeix de la llista Zones, accedireu a la finestra que us permet definir totes les zones que es podran marcar:

A Tipus heu d'escollir la figura geomètrica que definirà la zona. Els paràmetres per definir un rectangle i una el·lipse són els mateixos: la posició de la cantonada superior esquerra i les seves dimensions. En canvi, per definir un polígon, caldrà indicar una a una les coordenades de tots els vèrtexs que componen la figura.

A Identificador heu d'escriure un nom per a aquesta zona. Aquest nom pot ser qualsevol, amb precaució de no escriure cap caràcter especial. A Coordenada X i Y i a Amplada i Alçada s'han d'escriure les dades obtingudes a la taula anterior. Cal activar la casella Zona amb resposta correcta si la zona que esteu introduint o editant és la zona correcta o una de les zones correctes, és a dir, si és la solució o forma part de la solució.

Clicant als signes dels anglets, < >, podeu retrocedir o avançar, respectivament, a la zona sensible anterior o a la zona sensible següent.

Amb el botó Mou, podreu moure aquesta finestra emergent per la pantalla. El procediment per fer-ho és clicar al botó i, mantenint-lo clicat, moure el ratolí per la pantalla fins a arrossegar la finestra a una altra posició.

Clicant sobre el botó Accepta, es guardaran les zones afegides i modificades, i tornareu a la pantalla d'edició de la pregunta de zones sensibles.

Altres exemples de pregunta de zones sensibles amb selecció d'una o més zones

Aquest exemple correspon a la pregunta selecció múltiple, del primer full del quadern importat en aquesta pràctica, que permet seleccionar més d'una zona:

^{Exemple de pregunta amb més d'una zona sensible correcta}

Per seleccionar més d'una zona, cal indicar al Nombre de respostes màxim un número més gran que 1. A més, a cadascuna de les zones correctes serà necessari activar-li la casella Zona amb resposta correcta.

Les zones de l'exemple següent, la pregunta el·lipse del mateix full, estan definides per figures geomètriques circulars:

^{Un exemple de pregunta amb zona amb forma d'el·lipse}

En aquest exemple, es tracta de la pregunta color de fons, que pinta de color vermell l'interior de les zones definides. Aquest efecte s'aconsegueix fent servir l'opció Marcar zona amb. Reviseu el valor que s'ha fet servir editant aquesta pregunta a l'editor.

^{En aquest exemple s'ha dissenyat i definit una imatge de fons amb certa originalitat}

L'exemple següent correspon a la pregunta creu, on s'han d'assenyalar un conjunt de zones superposant la imatge creu.gif per a cadascuna de les zones marcades.

^{Un exemple de pregunta amb diferents zones sensibles com a correctes, amb una imatge al menú Marca zona amb en lloc d'un color del marc}

A l'exemple anterior, s'ha definit una imatge, la creu, que se superposa quan es clica a una de les zones definides. Per obtenir aquest resultat, cal crear una imatge amb fons transparent.

Per fer aquesta pràctica, necessitareu el fitxer m3_p4_fons.jpg que trobareu a continuació:

La proposta és crear un full nou amb una pregunta nova amb la modalitat de zona sensible: selecció d'una zona sobre la imatge.

Es tracta de clicar a la zona de la imatge del planeta Mart, d'entre la resta de zones que contenen tots els planetes del Sistema Solar.

^{Imatge de la pregunta de zones sensibles que es proposa}

Cal prestar atenció al color del marc, que s'ha canviat per apreciar la zona que s'ha clicat.

A l'hora d'editar l'activitat, podeu introduir unes opcions semblants a:

A la llista de zones, a l'hora d'afegir una zona nova, cal definir una per a cada planeta especificant, només, una sola zona com a correcta: la corresponent al planeta Mart.