# Prompts model per al quizz HTML

Aquests són els prompts que els assistents enviaran a Claude al bloc 3 del curs.
Es proporcionen per copiar-i-pegar i com a referència de bones pràctiques.

---

## PROMPT 1 — Estructura inicial

Copia aquest prompt al xat de Claude Code:

```
Vull crear un quizz interactiu en una sola pàgina HTML amb aquests requisits:

- 5 preguntes amb 4 opcions cadascuna.
- L'usuari fa clic per triar opció.
- Quan prem "Comprovar", es destaquen les correctes en verd i les incorrectes en roig.
- Mostra al final la puntuació (X de 5).
- Estètica neta: fons clar, lletra gran (mínim 18px), targetes amb ombra suau.
- Tot en un sol fitxer (HTML + CSS + JS dins).
- En valencià.
- Codi accessible: no usis innerHTML amb dades dinàmiques.

De moment posa preguntes "placeholder" tipus "Pregunta 1: text d'exemple".
Després et passaré el contingut real.
```

---

## PROMPT 2 — Substituir contingut

Quan Claude haja generat l'estructura, envia-li el teu contingut real:

```
Perfecte. Ara substitueix les preguntes pel següent contingut sobre [LA MEUA MATÈRIA]:

1. [Text de la pregunta 1]
   a) Opció A
   b) Opció B
   c) Opció C
   d) Opció D
   Correcta: b

2. [Text de la pregunta 2]
   a) Opció A
   b) Opció B
   c) Opció C
   d) Opció D
   Correcta: c

3. ...

(continua amb les 5 preguntes)
```

---

## PROMPT 3 (extra) — Afegir feedback

Si tens temps i vols afegir un missatge personalitzat al final:

```
Afegeix també un missatge personalitzat al final:
- Si encertes 5/5: "Excel·lent! Domines el tema."
- Si encertes 3-4/5: "Bé, però pots millorar."
- Si encertes 0-2/5: "Hauràs de repassar el tema."
```

---

## PROMPT 4 (extra) — Personalitzar colors

```
Canvia els colors per a que el quizz tinga la imatge del meu institut:
- Color principal: [#hex del color del centre]
- Logo: [si vols, dóna-li la URL d'una imatge]
```

---

## Consells per als assistents

### Què fer si Claude no genera el que esperaves
1. Llegeix el codi amb calma.
2. Digues a Claude què no et convenç: "el botó queda massa petit, fes-lo més gran" o "no m'agraden els colors, posa'ls més pastel".
3. Claude itera. No cal començar de zero.

### Què fer si el quizz no funciona
1. Obre la consola del navegador (F12 → Console) i mira si hi ha errors.
2. Copia l'error i diu a Claude: "M'apareix aquest error: [enganxa l'error]".

### Com guardar el quizz
- El fitxer és estàtic: amb només `index.html` ja funciona.
- El pots enviar per correu, pujar a una carpeta del centre, o pujar a **GitHub Pages** (gratis, sense servidor).