Cri´amos os modelos exemplificativos com recurso a uma ferramenta, o Adobe Dre- amweaver, para gera¸c˜ao e edi¸c˜ao de c´odigo. A sua estrutura ´e definida com as tags
do HTML 5 para dividir os conte´udos na p´agina e recorre a CSS 3 para lhe dar o estilo correto, utilizando ainda JavaScript para recolha dos valores das entradas (inputs).
Os modelos tˆem por base a utiliza¸c˜ao de v´arios tipos de entradas, podendo estas ser de texto, de sele¸c˜ao ou check box. As entradas de texto permitem a adi¸c˜ao de texto livre, as de sele¸c˜ao apresentam listas de op¸c˜oes das quais podem ser selecionadas uma (permitindo a escolha das imagens a usar), as check box tˆem como principal objetivo marcar a validade do item (imagem) a que pertence em rela¸c˜ao `a resposta (i.e., s´o as check box com “visto” podem corresponder a respostas corretas). Estes valores s˜ao gravados num ficheiro XML, descrito mais `a frente, que o exerc´ıcio usa para guardar os dados que vai apresentar.
Os valores iniciais destes campos s˜ao vazios e assim n˜ao aparecem os seus valores no exerc´ıcio, tendo o utilizador a possibilidade de usar o n´umero que quiser de elementos, i.e., o utilizador pode remover ou acrescentar os elementos que quiser ao exerc´ıcio, havendo sim um n´umero m´ınimo e m´aximo de elementos presentes. Esta restri¸c˜ao ´e devida `a organiza¸c˜ao do espa¸co dispon´ıvel no exerc´ıcio para garantir que este n˜ao fica desestruturado. Na Figura4.2podemos ver um exemplo de um modelo e os campos a preencher; estes campos podem variar de modelo para modelo. Para o processo de recolha de dados das entradas foram usados Web services, expli- cados mais `a frente, em que o processo ´e iniciado por uma fun¸c˜ao AJAX, chamada ao clicar na op¸c˜ao guardar exerc´ıcio (no menu Ficheiros).
As imagens dispon´ıveis para preencher os campos do modelo s˜ao apresentadas em forma de sele¸c˜ao, apresentando v´arias op¸c˜oes. O aparecimento destas op¸c˜oes ´e lan¸cado atrav´es do PHP, que vai questionar a base de dados sobre as imagens dis- pon´ıveis. Este modo dinˆamico de apresenta¸c˜ao do nome das imagens permite que sejam acrescentadas imagens na aplica¸c˜ao e posteriormente o nome destas sejam mostrados nas op¸c˜oes, ao inv´es de serem sempre apresentadas op¸c˜oes fixas.
Os modelos s˜ao chamados para a aplica¸c˜ao atrav´es do m´etodo GET. Ao ser clicado um modelo na listagem, este ´e carregado para a div central que mostra o conte´udo atrav´es de um iframe, que possibilita apresentar uma p´agina HTML externa dentro
Figura 4.2 – Exemplo de um modelo de exerc´ıcio e dos campos existentes para preenchi- mento.
de outra p´agina HTML. Neste caso, permite carregar um modelo.
Como j´a foi referido, o modelo vai criar, atrav´es dos web services, um ficheiro XML que vai conter os dados a ser mostrados no exerc´ıcio. Estes ficheiros variam se- gundo o modelo/exerc´ıcio ao qual pertencem: A t´ıtulo explicativo apresentamos na Figura4.3o exemplo do ficheiro XML criado com o modelo mostrado na Figura4.2.
Por norma, a estrutura dos ficheiros XML que representam um exerc´ıcio tˆem de con- ter os seguintes dados: o nome do exerc´ıcio, a pergunta do exerc´ıcio, uma frase a apresentar quando a resposta do exerc´ıcio est´a certa e uma para quando est´a errada. Contˆem tamb´em os dados das imagens a apresentar no exerc´ıcio e a indica¸c˜ao de quais destas imagens podem ser consideradas corretas na resposta. Os dados refe- ridos s˜ao tidos como imprescind´ıveis ao exerc´ıcio. A estrutura como se apresentam no XML pode variar de modelo para modelo e a este podem ser adicionados mais dados no ficheiro XML. Para melhor compreender a estrutura destes ficheiro XML passamos a explicar o exemplo presente na Figura 4.3.
Figura 4.3 – Exemplo de um ficheiro XML, preenchido com os dados de um exerc´ıcio.
Todos os ficheiros XML devem conter o tipo de codifica¸c˜ao, esta encontra-se logo na primeira linha: <?xml version=”1.0”encoding=”UTF-8”?>. Na linha 2 e na 45 temos a abertura e o fecho do elemento tag que serve de raiz para todos os elementos do documento, sendo usadas as tags <raiz> e </raiz> para este efeito no caso presente. Estes s˜ao elementos obrigat´orios no ficheiro.
Da linha 3 `a 44 encontram-se os dados para o exerc´ıcio. Estes encontram-se divididos por tags. Na linha 3 entre as tags <ex nome> e </ex nome> ´e armazenado o nome dado ao exerc´ıcio. Este nome ´e recolhido da entrada de texto “Nome do exerc´ıcio” (Figura 4.2).
Na linha 4, apesar de ainda n˜ao ter utilidade nesta vers˜ao, encontram-se as tags <fundo> e </fundo>. Esta est´a pensada para, numa vers˜ao posterior, poder conter os dados para a imagem de fundo do exerc´ıcio, previamente escolhida no preenchi- mento do modelo.
pergunta/enunciado do exerc´ıcio. Os dados s˜ao recolhidos da entrada de texto “per- gunta para o exerc´ıcio” (Figura 4.2).
Da linha 6 `a 23 temos os elementos poss´ıveis para a resposta, contidos entre as tags <resposta> e </resposta>, podendo conter v´arios conjuntos de tags em que cada uma delas tˆem os dados de um elemento para a resposta. Esta tag com os dados de um elemento, contido entre as tags <img> e </img>, por exemplo da linha 7 `a 10, no seu interior cont´em tags com v´arios tipos de dados, entre eles os dados da localiza¸c˜ao da imagem dentro das pastas do exerc´ıcio para mostrar a imagem, informa¸c˜ao contida entre as tags <imagem> e </imagem> e os dados dos identificadores das imagens que v˜ao indicar se ´e um elemento correto ou errado para a resposta, contido entre as tags <nome> e </nome>. Este ´ultimo elemento ´e essencial para detetar o objeto ou objetos corretos na resposta. Na sec¸c˜ao seguinte, exerc´ıcios, ´e explicado o modo como esta verifica¸c˜ao ´e efetuada.
Da linha 24 `a 37 temos as imagens que v˜ao aparecer no exerc´ıcio, sendo neste exemplo as imagens que d˜ao origem `a pergunta. Estas est˜ao contidas entre as tags <presentes> e </presentes> dentro das tags <imagem> e </imagem> que tˆem os dados da localiza¸c˜ao da imagem nas pastas do exerc´ıcio (e.g. na linha 25).
Da linha 38 `a 40 encontram-se as tags <click> e </click>, sendo que no interior destas ´e armazenado o texto para mostrar nos bot˜oes a apresentar no exerc´ıcio; neste caso s´o existe o bot˜ao para que o utilizador possa repetir o exerc´ıcio. Os dados para os bot˜oes encontram-se entre as tags <descricao> e </descricao>.
Por fim, da linha 41 `a 44 encontram-se as tags <avisos> e </avisos> para conter as frases a ser apresentados depois da verifica¸c˜ao do exerc´ıcio, se a resposta ´e correta ou errada. Estas frases est˜ao contidas nas tags <aviso> e </aviso>. Na linha 42 temos a frase a ser apresentada se a resposta estiver correta e na linha 43 temos a frase a ser apresentada caso a resposta esteja errada.
No ficheiro exemplo apresentado (Figura 4.3), as tags <imagem>, que n˜ao contˆem dados no seu interior, s˜ao referentes aos elementos que se podem acrescentar ou retirar do exerc´ıcio. Nesse caso foram retirados pois n˜ao contˆem dados.