Customizando o SuperQuiz - Parte 1

Por Vinícius Souza

Microsoft Technical Evangelist

Existem várias formas de alterar o SuperQuiz. A mais fácil é alterar os arquivos XML de categoria e quiz. Os arquivos de conteúdo estão localizado na pasta SuperQuiz\Assets.

Na pasta SuperQuiz\Assets\Categories encontraremos os arquivos xml de categoria e na pasta SuperQuiz\Assets\Quizzes os arquivos xml de quiz.

Antes de apresentar a estrutura dos arquivos xml de conteúdo, gostaria de dar algumas dicas:

1)      Não altere a ordem das tags no xml. Devido ao componente de serialização utilizado, o arquivo xml é gerado e consumido com as tags em ordem alfabética. Por isso, alterando-se a ordem, ocorrerá um problema durante o processo de load;

2)      Muito cuidado durante a alteração do xml. Às vezes, durante a seleção do texto, cometemos um erro removendo mais caracteres do que é necessário, causando uma má formação no xml. Este tipo de erro é difícil de ser detectado.

Estrutura do arquivo xml de categoria.

A estrutura do arquivo é simples, possuindo apenas três tags {ImageUri, Name, UniqueId}.

<QuizCategory xmlns="http://schemas.datacontract.org/2004/07/SuperQuiz.Model" xmlns:i="http://www.w3.org/2001/XMLSchema-instance">
  <ImageUri>Assets/geography.png</ImageUri>
  <Name>Category 0 </Name>
  <UniqueId>C_0</UniqueId>
</QuizCategory>

 

Tag

Descrição

ImageUri

Possui a imagem que representa a categoria.

 

Name

É utilizado para nomear a categoria.

 

UniqueId

É o código que identifica a categoria

 

Estrutura do arquivo xml de Quiz

O arquivo xml de Quiz é um pouco mais complexo e, por isso, vou explicá-lo em duas etapas.

A primeira, em que abordo o quiz sem considerar a tag Questions, e a segunda onde abordo somente o conteúdo da tag Questions.

<Quiz xmlns="http://schemas.datacontract.org/2004/07/SuperQuiz.Model" xmlns:i="http://www.w3.org/2001/XMLSchema-instance">
  <AllowPreviousNavigation>true</AllowPreviousNavigation>
  <AllowShareQuestions>true</AllowShareQuestions>
  <CategoryUniqueId>C_0</CategoryUniqueId>
  <Description>Curabitur class aliquam vestibulum nam curae maecenas sed integer cras phasellus suspendisse quisque donec dis praesent accumsan bibendum pellentesque condimentum adipiscing etiam consequat vivamus dictumst aliquam duis convallis scelerisque est parturient</Description>
  <EvaluateAnswerOnNext>true</EvaluateAnswerOnNext>
  <ImageUri>SuperQuiz/Assets/Images/geography.png</ImageUri>
  <LockQuestionWhenEvaluated>true</LockQuestionWhenEvaluated>
  <LockQuestionWhenNavigateToNext>false</LockQuestionWhenNavigateToNext>
  <LockQuestionWhenNavigateToPrevious>false</LockQuestionWhenNavigateToPrevious>
  <Name>Quiz 0</Name>
  <Questions>
    <QuizQuestion>
      <Answers>
        <QuizAnswer>
          <Code>C_0_Q_0_Q0_A0</Code>
          <Description>Curabitur class aliquam vestibulum nam curae maecenas sed integer cras phasellus suspendisse quisque donec dis praesent accumsan bibendum pellentesque condimentum adipiscing etiam consequat </Description>
          <ImageUri>SuperQuiz/Assets/Images/geography.png</ImageUri>
          <Links>
            <QuizUriLink>
              <Title>Wikipedia</Title>
              <Url>http://en.wikipedia.org/wiki/Sao Paulo</Url>
            </QuizUriLink>
          </Links>
          <Name>Answer 0</Name>
          <Points>-1</Points>
        </QuizAnswer>
        <QuizAnswer>
          <Code>C_0_Q_0_Q0_A1</Code>
          <Description>Curabitur class aliquam vestibulum nam curae maecenas sed integer cras phasellus suspendisse quisque donec dis praesent accumsan bibendum pellentesque condimentum adipiscing etiam consequat </Description>
          <ImageUri>SuperQuiz/Assets/Images/geography.png</ImageUri>
          <Name>Answer 1</Name>
          <Links>
            <QuizUriLink>
              <Title>Wikipedia</Title>
              <Url>http://en.wikipedia.org/wiki/Sao Paulo</Url>
            </QuizUriLink>
          </Links>
          <Points>0</Points>
        </QuizAnswer>
      </Answers>
      <Code>C_0_Q_0_Q0</Code>
      <Description>Curabitur class aliquam vestibulum nam curae maecenas sed integer cras phasellus suspendisse quisque donec dis praesent accumsan bibendum pellentesque condimentum adipiscing etiam consequat </Description>
      <ImageUri>SuperQuiz/Assets/Images/geography.png</ImageUri>
      <Links>
        <QuizUriLink>
          <Title>Wikipedia</Title>
          <Url>http://en.wikipedia.org/wiki/Sao Paulo</Url>
        </QuizUriLink>
      </Links>
      <Title>Question 0</Title>
    </QuizQuestion>
  </Questions>
  <ShowCorrectAnswerOnFinish>true</ShowCorrectAnswerOnFinish>
  <ShowFinishButton>true</ShowFinishButton>
  <ShowFinishOnlyWhenReachedLastQuestion>true</ShowFinishOnlyWhenReachedLastQuestion>
  <UniqueId>C_0_Q_0</UniqueId>
</Quiz>

 

<Quiz xmlns="http://schemas.datacontract.org/2004/07/SuperQuiz.Model" xmlns:i="http://www.w3.org/2001/XMLSchema-instance">
  <AllowPreviousNavigation>true</AllowPreviousNavigation>
  <AllowShareQuestions>true</AllowShareQuestions>
  <CategoryUniqueId>C_0</CategoryUniqueId>
  <Description>Curabitur class aliquam vestibulum nam curae maecenas sed integer cras phasellus suspendisse quisque donec dis praesent accumsan bibendum pellentesque condimentum adipiscing etiam consequat vivamus dictumst aliquam duis convallis scelerisque est parturient</Description>
  <EvaluateAnswerOnNext>true</EvaluateAnswerOnNext>
  <ImageUri>SuperQuiz/Assets/Images/geography.png</ImageUri>
  <LockQuestionWhenEvaluated>true</LockQuestionWhenEvaluated>
  <LockQuestionWhenNavigateToNext>false</LockQuestionWhenNavigateToNext>
  <LockQuestionWhenNavigateToPrevious>false</LockQuestionWhenNavigateToPrevious>
  <Name>Quiz 0</Name>
  <Questions></Questions>
  <ShowCorrectAnswerOnFinish>true</ShowCorrectAnswerOnFinish>
  <ShowFinishButton>true</ShowFinishButton>
  <ShowFinishOnlyWhenReachedLastQuestion>true</ShowFinishOnlyWhenReachedLastQuestion>
  <UniqueId>C_0_Q_0</UniqueId>
</Quiz>

Agora focando na definição dos elementos do XML do Quiz, vou descrever cada uma de suas tags e qual o seu impacto no funcionamento do Quiz.

Tag

Descrição

AllowPreviousNavigation

Domínio: {true | false}

Quando igual a "true" - permite que o usuário volte para a questão anterior do Quiz.

AllowShareQuestions

Domínio: {true | false}

Quando igual a "true" - habilita o botão de "Pedir ajuda ao amigo", que pelo contrato de share envia um e-mail com a solicitação de ajuda.

CategoryUniqueId

Deve possuir o valor do UniqueId da categoria que deseja vincular esse Quiz.

Quando não existir uma categoria com o valor informado, o quiz não será apresentado.

Description

Descrição que será apresentada na página PageQuiz.xaml.

EvaluateAnswerOnNext

Domínio: {true | false}

Quando igual a "true" - é verificada a pontuação da resposta, executando a animação de acordo com a pontuação.

As stories board de animação estão definidas em SuperQuiz/View/StarPointsControl.xaml.

ImageUri

É a imagem utilizada para representar o Quiz. Essa imagem é utilizada na página de CategoryPage.xaml e na página QuizPage.xaml.

LockQuestionWhenEvaluated

Domínio: {true | false}

Quando igual a "true" - desabilita a edição das questões que foram respondidas (ou não) de um Quiz quando sua pontuação for contabilizada.

Se o usuário não responder a uma questão do Quiz e passar para a próxima questão, esta ficará bloqueada.

LockQuestionWhenNavigateToNext

Domínio: {true | false}

Quando igual a "true" - desabilita a edição da questão quando o usuário realiza a navegação para a próxima questão, mesmo se a questão não foi contabilizada.

LockQuestionWhenNavigateToPrevious

Domínio: {true | false}

Quando igual a "true" - desabilita a edição da questão quando o usuário navega para a questão anterior, mesmo se a questão não foi contabilizada.

Name

Identifica o Quiz na página - é utilizado em vários momentos nas páginas onde os quizes são apresentados.

Questions

É utilizado para definir uma coleção de QuizQuestion, que são as questões apresentadas pelo Quiz.

Não há limites para número de questões em um Quiz, no entanto, seja coerente, afinal de contas o intuito é ser divertido.

Seu conteúdo será descrito na próxima seção.

ShowCorrectAnswerOnFinish

Domínio: {true | false}

Quando igual a "true" - apresenta um flyout, com as respostas corretas e as incorretas do usuário.

ShowFinishButton

Domínio: {true | false}

Quando igual a "true" - apresenta o botão de Finalizar o Quiz no AppBar durante todo o Quiz.

 

ShowFinishOnlyWhenReachedLastQuestion

Domínio: {true | false}

Quando igual a "true" - apresenta o botão de Finalizar o Quiz somente quando o usuário chegar à última questão do Quiz.

 

UniqueId

Nome único que identifica o Quiz.

 

Depois de apresentadas as tags do Quiz, focarei na tag Questions que é utilizada para definir a coleção de perguntas de um Quiz.

<Questions> <QuizQuestion> <Answers></Answers> <Code>C_0_Q_0_Q0</Code> <Description>Curabitur class aliquam vestibulum nam curae maecenas sed integer cras phasellus suspendisse quisque donec dis praesent accumsan bibendum pellentesque condimentum adipiscing etiam consequat </Description> <ImageUri>SuperQuiz/Assets/Images/geography.png</ImageUri> <Links> <QuizUriLink> <Title>Wikipedia</Title> <Url>http://en.wikipedia.org/wiki/Sao Paulo</Url> </QuizUriLink> </Links> <Title>Question 0</Title> </QuizQuestion> </Questions>

Descrição dos itens da tag Questions.

Tag

Descrição

QuizQuestion

Define uma questão no Quiz - esta é a tag que compõe a coleção de Questions.

Answers

Veja trecho de código xml com a definição do QuizAnswer abaixo, logo após a tabela.

 

Define a coleção de possíveis respostas de uma questão em um Quiz.

A coleção é definida por um conjunto de tags  QuizAnswer.

Code

Código que identifica a pergunta do quiz.

Description

Texto descritivo utilizado geralmente para apresentar a questão.

ImageUri

Imagem utilizada para ilustrar a questão. A imagem não é obrigatória.

Links

Lista de links utilizados como material complementar à questão do Quiz.

Title

Título do questão.

 

A Tag QuizAnswers define as possíveis respostas da pergunta do Quiz.

<QuizAnswer>
  <Code>C_0_Q_0_Q0_A0</Code>
  <Description>Curabitur class aliquam vestibulum nam curae maecenas sed integer cras </Description>
  <ImageUri>SuperQuiz/Assets/Images/img.png</ImageUri>
  <Links>
    <QuizUriLink>
      <Title>Wikipedia</Title>
      <Url>http://en.wikipedia.org</Url>
    </QuizUriLink>
  </Links>
  <Name>Answer 0</Name>
  <Points>-1</Points>
</QuizAnswer>

Descrição dos elementos da tag QuizAnswer.

Tag

Descrição

Code

Código que identifica a resposta – ele deve ser único  no Quiz.

Description

Descrição da resposta - é apresentada quando uma resposta é selecionada na página QuizPlayPage.xaml.

ImageUri

Imagem utilizada para apresentar a resposta. É apresentada em frente ao nome.

Links

Define um conjunto de links que será apresentado quando o usuário selecionar a resposta.

Name

Texto que será apresentado para o usuário, na lista de respostas.

Points

É a quantidade de pontos que o usuário vai receber ao escolher essa resposta. 
O valor pode ser positivo ou negativo.

 

Conclusão

Apesar de ser uma tarefa relativamente fácil, a edição de conteúdo nos arquivos xml requer bastante cuidado. Erros cometidos durante a alteração podem levar bastante tempo para serem encontrados.

Se durante o processo de alteração algum conteúdo desaparecer, é bem provável que o XML não esteja bem formatado.

Como você já deve estar ciente, aplicações Metro Style não se resumem apenas a conteúdo, é preciso que a aplicação tenha uma identidade visual. Não fique somente na alteração do conteúdo. Aproveite o tempo ganho para customizar visualmente a sua aplicação, levando sempre em conta o guide line.

Tags:

Follow the Discussion

Comments Closed

Comments have been closed since this content was published more than 30 days ago, but if you'd like to continue the conversation, please create a new thread in our Forums,
or Contact Us and let us know.