Stile HTML
rtSurvey supporta i tag HTML nelle etichette e nei suggerimenti, consentendo formattazione di testo avanzata, link e temi di colore dinamici.
rtSurvey renderizza il testo di label e hint come HTML sui moduli web. Questo significa che puoi usare tag HTML standard per formattare il testo, aggiungere interruzioni di riga, creare link e applicare colori. Questo è particolarmente utile per i campi note, le istruzioni di sezione e i riepiloghi dinamici.
L’HTML nelle etichette viene renderizzato sul modulo web e nelle app mobili di rtSurvey. Potrebbe non essere renderizzato in tutti i client compatibili con ODK. Testa sempre sulla tua piattaforma di destinazione.
Tag HTML supportati
Formattazione del testo
| Tag | Risultato |
|---|---|
<strong>testo</strong> o <b>testo</b> | Testo in grassetto |
<em>testo</em> o <i>testo</i> | Testo in corsivo |
<u>testo</u> | Testo sottolineato |
<br> | Interruzione di riga |
<span style="...">testo</span> | Stile inline |
Link
<a href="https://example.com" target="_blank">Fai clic qui</a>
Si apre in una nuova scheda. Usalo per documenti di riferimento, linee guida o risorse esterne che l’intervistatore dovrebbe consultare.
Colori
Usa <span> con stili inline:
<span style="color: red;">Avviso: il valore è fuori range</span>
<span style="color: #009688;">Sezione completata</span>
Variabili del tema colore
rtSurvey supporta token del tema colore che si adattano al tema configurato dell’app. Usa la sintassi __COLOR_THEME_NAME__:
<span style="color: var(--color-theme-primary);">Testo colore primario</span>
O usando la forma abbreviata del token nel testo dell’etichetta:
<font color="var(--COLOR_THEME_PRIMARY)">Nota importante</font>
Questo viene automaticamente convertito nell’equivalente <span> con una variabile CSS al momento del rendering.
Etichette multilingua
Racchiudi il contenuto in tag lingua per supportare più lingue in una singola cella di etichetta:
<en>Enter the household size</en><vi>Nhập quy mô hộ gia đình</vi>
rtSurvey estrae il contenuto corrispondente alla lingua corrente dell’app. Se non viene trovato alcun tag lingua corrispondente, viene mostrata l’intera stringa così com’è.
Esempi nei campi note
Istruzione di sezione con grassetto e interruzione di riga
| type | name | label |
|---|---|---|
| note | section_intro | <strong>Sezione 3: Uso del suolo</strong><br>Poni tutte le domande di questa sezione solo al capofamiglia. |
Riepilogo dinamico con riferimento al calcolo
| type | name | label |
|---|---|---|
| calculate | total | |
| note | summary | Membri totali del nucleo familiare: <strong>${total}</strong><br><span style="color: gray;">Adulti: ${adults} · Bambini: ${children}</span> |
Avviso in rosso
| type | name | label | relevant |
|---|---|---|---|
| note | age_warning | <span style="color: red;"><strong>Avviso:</strong> L'età inserita (${age}) è insolitamente alta. Si prega di verificare.</span> | ${age} > 100 |
Link a un documento di riferimento
| type | name | label |
|---|---|---|
| note | guidelines_link | Consulta le <a href="https://docs.example.com/guidelines" target="_blank">Linee guida sul campo</a> prima di iniziare questa sezione. |
Tag HTML speciali di rtSurvey
<webbox src='url' title='titolo'>...</webbox>
Incorpora un pulsante che apre un URL in un modale nel modulo. Vedi Webbox per i dettagli completi.
<delete-repeat-current>etichetta</delete-repeat-current>
Renderizza un pulsante all’interno di un gruppo di ripetizioni che elimina l’istanza di ripetizione corrente quando viene toccato.
<delete-repeat-last>etichetta</delete-repeat-last>
Renderizza un pulsante che elimina l’ultima istanza di ripetizione.
Esempio di utilizzo in un gruppo di ripetizioni:
| type | name | label |
|---|---|---|
| note | delete_btn | <delete-repeat-current>Rimuovi questo membro</delete-repeat-current> |
Best practice
- Usa l’HTML con parsimonia — le etichette troppo formattate sono più difficili da leggere, non più facili.
- Preferisci
<strong>per il grassetto e<em>per il corsivo rispetto ai deprecati<b>e<i>. - Mantieni l’uso del colore significativo — usa il rosso per gli avvisi, non per la decorazione.
- Testa sempre il rendering HTML sia sull’app mobile che sul modulo web, poiché il rendering potrebbe differire leggermente.
- Evita i tag
<table>nelle etichette — raramente si renderizzano bene sugli schermi mobili. - Non usare JavaScript (
<script>) — verrà rimosso o causerà errori.
Limitazioni
- L’HTML complesso (tabelle, form, script) non è supportato e potrebbe rompere il rendering.
- Alcuni client mobili più vecchi potrebbero visualizzare i tag HTML come testo letterale — testa su tutti i dispositivi di destinazione.
- I link
<a>si aprono in un browser o WebView — l’intervistatore lascia il modulo, il che può essere dirompente su mobile.