# Quiz com imagens

Suporta as mesmas funcionalidades do card [**Perguntas/Respostas**](/conteudo/estrutura-e-conteudos/cards/pergunta-resposta-quiz.md), porém com as especificidades a seguir apresentadas.

{% hint style="info" %}
**Atenção**: produzir esse card exige conhecimentos intermediários de Design.
{% endhint %}

### <mark style="color:blue;">Estrutura Geral</mark>

Consiste na escolha de uma imagem-base, que possa receber o cadastro de "**hits**" (áreas de clique) como formato de respostas. Dessa maneira, ao invés de inserir as respostas, a imagem-base será mapeada visualmente com as áreas de clique.

Isso torna o card [**Perguntas/Respostas**](/conteudo/estrutura-e-conteudos/cards/pergunta-resposta-quiz.md) mais interativo e dinâmico.

No LMS, ao invés de cadastrar respostas, devem ser cadastrados os **Hits**.

![](https://lh4.googleusercontent.com/3Qq3yIUmjdAoGEFhM39LWQfeoOrWofcLu8zNAqdgBXBY4CvRUWiEW3iW3umSPLey7gT5bKLOINNp2zcfOX_EYf224C2PmzoFCmHpUo1WTFazI4b0e6Yp92M2pdOSLk-Wtp4632fAI5YbpoOoqKDbVFI)

Ao escolher essa opção, é exibido o painel de "<mark style="background-color:yellow;">**Questões da Pergunta**</mark>", com as respectivas imagens de "hit" (uma para cada resposta).

<div align="left"><figure><img src="https://lh3.googleusercontent.com/2eeKE0xGoAJ5jRxBcAyVlU5x9XGKReq8_9r2Aokb4flWuf1mCDvdr62x0b_hlomhTjIxN9fogTD7QWAbh7PoEzgRAW0VNH55EZpHUZ5UZpeLwW1RxKvDDQyOZJ-jM4-2w4RWTJ7vnrE-_Cpn0PKVL4s" alt=""><figcaption></figcaption></figure></div>

O primeiro passo é adicionar a <mark style="background-color:yellow;">**imagem de fundo do card**</mark>. Clique em Alterar imagem de fundo.

![](https://lh4.googleusercontent.com/fewNOdQhCuod113olSK9FkLbJsK7hp2iR4T_9HxqtJyTA3m9zkZgafTQZhvjhO7G2EX9r7pu5McXYr4h8IxgNA6SExZTZZ9Yl5Pn3Z0JgwGwaol64rnwTO4u3eiED5dToxpTzXrLwG5hTHoJZSWXgBE)

Para adicionar as questões, clique em **‘’Adicionar resposta’’**

![](https://lh6.googleusercontent.com/jDv13ekc82MLuvf8XMFA7jRCQSfNJSRmeTAQI7IIWdtko29Gg8zzsYFmU9LVR6Pxon7kGVZuCoQSJB4aVZLkl9uhtsrXaD2npT5BIcRkpWGQj-adeGE1e6IPVhj9ZrWNxs6Q7Dws_Xg3WF_1hy15Yro)

Em cada questão você precisa adicionar:

<mark style="background-color:yellow;">**Número da questão**</mark> (Exemplo: 1) - Esse número será para você identificar a marcação dos Hits.

<div align="left"><figure><img src="https://lh4.googleusercontent.com/Gfzt34NyoX7QRQ9FN0kVh1iYKaRdMbGy8fSSDJy6k3xHBqd8pxDEyzqEtsr0cA3kR8qg2iKmRM7trjZSuCHRPN1pDw3hy4VJ8AKEX1TlM6SRma0M6vjvGEChLEqBUuDjbLApUHbWfFstlzKnwETFF1U" alt=""><figcaption></figcaption></figure></div>

<mark style="background-color:yellow;">**Texto da questão**</mark> - É o texto que vai aparecer nos relatórios.

![](https://lh6.googleusercontent.com/hfChVkYEsBmiCgB4FMhF2lUwOzZ4pKFFcVnuip5lAev7APo1XZRI6cQUSVn-4M2go3id3ite7IkGBoJLixLb7cYv7nnucUbZ3tyqKHOAWColAoEeOp5b13zNeUrrUpvRvX79M9bZCBCarhQTmLtEiB4)

<mark style="background-color:yellow;">**Questão correta?:**</mark> Selecione a caixinha se essa for a questão certa - se for de múltipla escolha você deve selecionar mais de uma.

![](https://lh5.googleusercontent.com/Bh0C48Ch0HrBaCBoQov-rMiRgeTJhUXoTKhDk7iOAhU-hO_SNYmAFa5RYa6wOqeNWYYrz6b3cdCWarV-sAywFbgMRbdBfjzH6wgdPy7pd4lU5J_a6Ric5OeYYdUuVo9-V6fWuPwwX3O_rYHDmPcvqTo)

Se ela não for a certa basta deixar o caixinha sem selecionar.

Adicione a imagem dessa questão (essa imagem ficará sobreposta à imagem de fundo do card) e deverá ser em png com fundo transparente, com tamanho 1920x1080px.

![](https://lh6.googleusercontent.com/2hd9PPxLsAUnfi9sOeCTxPBDwwC5KJUhxImlz4wuD29-L4RWaGh4G3laIzn9dRtbZw3ZqW_o5K5OVIYjUJ2mMNpuiUwQ9JJ_xKiKoS473dJQ17kINygBjrgh4YVH_X0Aid9b4WwEVuC_-TR45ltNeXk)

A medida que você for adicionando as questões, os **hits** de cada uma irão aparecer no canto superior do card:

![](https://lh4.googleusercontent.com/lYLXI-PlpyLsIKwOMEmuQCQYWpSHdAsHJehqmuH-6ZRHLs6EX3AueD-giEjZwy19Sd7_Yv6hOkWiIFZAq8LTpodAr8r-FMEIRNwj3HCzkP6Kt_0JmHufqg5A4BaMPlMpZQHMOjqFkprUiMZwloqU8IE)

No exemplo acima, é possível identificar 2 hits: 1 e 2.

Você deve posicionar os **hits** em cima de cada alternativa correta. É possível aumentar ou diminuir o tamanho de cada **hit**, posicionando o mouse na beirada do hit, clicando e arrastando o mouse.

No exemplo a seguir, é possível visualizar 4 hits cadastrados:

<div align="left"><figure><img src="https://lh4.googleusercontent.com/kjHDtyHbq2bTJ9Cy3asr17oKhaQ852XGMyFEDMCkOXwZ4iyNbBhM7lzU3g73F2K6W6wsGnVpkprUMpEHwiHgJ46VZEsFzX5A0fdf42EOlv7YHQgaD1u6Rryp5g530yYK7TzncGCYi9vJgG2tmBdD0Co" alt=""><figcaption></figcaption></figure></div>

Ao final, clique no botão “Salvar” para salvar todas as informações editadas.&#x20;

<div align="left"><figure><img src="https://lh3.googleusercontent.com/W1IXxj1XX-yiROoislF4MDkIIYDgiGd_ma7_d5nN7AzsLZxQMixboL9ey1XQXeuauZOqc1S_WDXlDfXuvSg8QKMvMKMvRwUZwQxa_K3HVHeglsq8TgbXaxBBw9I6OUGvnJfcR_pNx3bWd1t_1Oq2Avg" alt=""><figcaption></figcaption></figure></div>

{% hint style="warning" %}
Na Grano, é necessário que você fique atento aos **tamanhos** dos arquivos e mídias no momento de fazer o cadastro dos cards.\
\
**Cards imagem = até 800 KB**\
**Gifs e Vídeos que são cadastrados direto na plataforma =** **até 200KB** - Esse peso não se aplica para vídeos que serão hospedados em outras ferramentas (Vimeo, Youtube, etc)\
**Sons = até 10 MB**\
\
**Lembre-se:** arquivos mais leves são preferíveis. Eles contribuem para o desempenho otimizado da plataforma e aprimoram a experiência do usuário. Antes de fazer o upload, confira o tamanho dos arquivos que você planeja enviar e realize os ajustes necessários. \
\
Se precisar reduzir o tamanho de um arquivo, ferramentas de compressão online gratuitas podem ser uma solução útil.
{% endhint %}

### <mark style="color:blue;">**Exemplos de como criar os cards:**</mark>

Imagem fundo com as questões ‘’apagadas’’

![](https://lh6.googleusercontent.com/ulvJJTQWRrUS6xeNYs0DJ5ShHUTs9LAAMhCpS9v4A2_u3tmeCfheXsbFqxJ56XbYu1UcUX6gNan9G6KdgeikevpflTHa2pBHwp11Top3n2jwT14iJ1AHcoBGdo2Ejx7sHOYgT2Y2pvvwuJswPJ7MRqs)

\
Exemplo de imagem de cada alternativa

<div align="left"><figure><img src="https://lh5.googleusercontent.com/sFE14adQyJ4Q412HfsNacpywM7YxrCH8p2K69pqortenELevY35mg6VvPmPpm3Y612MqUxctaQt5epaQRbmvFNcW24l3x6CaCCiFyGB-6PjQ1aDCPrOnFR8u-tF23q9Jcsh_FCs_6ErEDxW28ctaSZY" alt=""><figcaption></figcaption></figure></div>

**Exemplo 2:**

Imagem fundo com as questões ‘’apagadas’’

<div align="left"><figure><img src="/files/X0kf5DohohJYLLV425zE" alt=""><figcaption></figcaption></figure></div>

Exemplo de imagem de cada alternativa:

<div align="left"><figure><img src="/files/DVMYftwOAZXnaFRyE8J0" alt=""><figcaption></figcaption></figure></div>

## <mark style="color:blue;">Confira o passo a passo em vídeo:</mark>

{% embed url="<https://player.vimeo.com/video/917159691>" %}

## <mark style="color:blue;">Exemplos:</mark>

![](https://lh6.googleusercontent.com/jurkAz7UtD02GmOPrUnFyHf7oK9DA6Lgxd_gb4pGIwSYSypgu_EuIWo3FHdH0mg4mmpiRvphavkfatm3zWSRgEmno6WY9ka5klcETlTMLp-vX3afiutOxh6dlVO3Sr1PYpYoRFlOhfwnhXMSvSsnA9c)  ![](https://lh3.googleusercontent.com/iQgy-qCT8JVG2TfLo7yr3ALo6vNAEUT_fGbgy_8wz45nhtudw21s22x33M87qmOPF7c7u1T8IJFpRVMM0XFYAq5fD6WCQCOVzDE9EOym5pPklidi1q7tXEHlCo7KZsmxkPUHF0YtKfVPoQ0qeKp6MwE)

***

> *© 2026 Grano Edtech LTDA. Todos os direitos reservados.*


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.grano.app/conteudo/estrutura-e-conteudos/cards/quiz-com-imagens.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.