> For the complete documentation index, see [llms.txt](https://docs.grano.app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.grano.app/conteudo/estrutura-e-conteudos/cards/quiz-com-imagens.md).

# 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.*