HTML-styling
rtSurvey støtter HTML-koder i etiketter og hint, noe som gir rik tekstformatering, lenker og dynamisk fargetemaer.
rtSurvey gjengir etikett- og hint-tekst som HTML på webskjemaer. Dette betyr at du kan bruke standard HTML-koder for å formatere tekst, legge til linjeskift, opprette lenker og bruke farger. Dette er særlig nyttig for notatfelt, seksjonsinstruksjoner og dynamiske sammendrag.
HTML i etiketter gjengis på webskjemaet og rtSurvey mobilapper. Det gjengis kanskje ikke i alle ODK-kompatible klienter. Test alltid på målplattformen.
Støttede HTML-koder
Tekstformatering
| Kode | Resultat |
|---|---|
<strong>tekst</strong> eller <b>tekst</b> | Fet tekst |
<em>tekst</em> eller <i>tekst</i> | Kursiv tekst |
<u>tekst</u> | Understreket tekst |
<br> | Linjeskift |
<span style="...">tekst</span> | Innebygd styling |
Lenker
<a href="https://example.com" target="_blank">Klikk her</a>
Åpner i en ny fane. Bruk for referansedokumenter, retningslinjer eller eksterne ressurser telleren bør konsultere.
Farger
Bruk <span> med innebygde stiler:
<span style="color: red;">Advarsel: verdien er utenfor rekkevidde</span>
<span style="color: #009688;">Seksjon fullført</span>
Fargetemanvariabler
rtSurvey støtter fargetema-tokens som tilpasser seg appens konfigurerte tema. Bruk __COLOR_THEME_NAME__-syntaksen:
<span style="color: var(--color-theme-primary);">Primærfargetekst</span>
Eller bruk tokenkortstokken i etikettekst:
<font color="var(--COLOR_THEME_PRIMARY)">Viktig merknad</font>
Dette konverteres automatisk til tilsvarende <span> med en CSS-variabel ved gjengivelse.
Flerspråklige etiketter
Pakk inn innhold i språkkoder for å støtte flere språk i en enkelt etikettcelle:
<en>Enter the household size</en><vi>Nhập quy mô hộ gia đình</vi>
rtSurvey henter innholdet som samsvarer med gjeldende appspråk. Hvis ingen samsvarende språkkode blir funnet, vises hele strengen som den er.
Eksempler i notatfelt
Seksjonsinstruksjon med fet tekst og linjeskift
| type | name | label |
|---|---|---|
| note | section_intro | <strong>Seksjon 3: Arealbruk</strong><br>Still alle spørsmål i denne seksjonen bare til husholdningslederen. |
Dynamisk sammendrag med beregningsreferanse
| type | name | label |
|---|---|---|
| calculate | total | |
| note | summary | Totalt husholdningsmedlemmer: <strong>${total}</strong><br><span style="color: gray;">Voksne: ${adults} · Barn: ${children}</span> |
Advarsel i rødt
| type | name | label | relevant |
|---|---|---|---|
| note | age_warning | <span style="color: red;"><strong>Advarsel:</strong> Angitt alder (${age}) er uvanlig høy. Vennligst verifiser.</span> | ${age} > 100 |
Lenke til et referansedokument
| type | name | label |
|---|---|---|
| note | guidelines_link | Se <a href="https://docs.example.com/guidelines" target="_blank">feltretningslinjene</a> før du starter denne seksjonen. |
Spesielle rtSurvey HTML-koder
<webbox src='url' title='tittel'>...</webbox>
Setter inn en knapp som åpner en URL i en modal inne i skjemaet. Se Webbox for fullstendig informasjon.
<delete-repeat-current>etikett</delete-repeat-current>
Gjengir en knapp inne i en repeat-gruppe som sletter den gjeldende repeat-instansen når den trykkes.
<delete-repeat-last>etikett</delete-repeat-last>
Gjengir en knapp som sletter den siste repeat-instansen.
Eksempel på bruk i en repeat-gruppe:
| type | name | label |
|---|---|---|
| note | delete_btn | <delete-repeat-current>Fjern dette medlemmet</delete-repeat-current> |
Beste praksis
- Bruk HTML sparsomt — overformaterte etiketter er vanskeligere å lese, ikke enklere.
- Foretrekk
<strong>for fet tekst og<em>for kursiv over de utdaterte<b>og<i>. - Hold fargebruk meningsfull — bruk rødt for advarsler, ikke for dekorasjon.
- Test alltid HTML-gjengivelse på både mobilapp og webskjema, siden gjengivelsen kan variere noe.
- Unngå
<table>-koder inne i etiketter — de gjengis sjelden bra på mobilskjermer. - Ikke bruk JavaScript (
<script>) — det vil bli fjernet eller forårsake feil.
Begrensninger
- Kompleks HTML (tabeller, skjemaer, skript) støttes ikke og kan ødelegge gjengivelsen.
- Noen eldre mobilklienter kan vise HTML-koder som bokstavelig tekst — test på alle målenheter.
<a>-lenker åpnes i en nettleser eller WebView — telleren forlater skjemaet, noe som kan være forstyrrende på mobil.