HTML Styling
rtSurvey obsługuje tagi HTML w etykietach i podpowiedziach, umożliwiając formatowanie tekstu sformatowanego, linki i dynamiczne motywy kolorystyczne.
rtSurvey renderuje tekst etykiet i podpowiedzi jako HTML w formularzach webowych. Oznacza to, że możesz używać standardowych tagów HTML do formatowania tekstu, dodawania podziałów wierszy, tworzenia linków i stosowania kolorów. Jest to szczególnie przydatne w polach notatek, instrukcjach sekcji i dynamicznych podsumowaniach.
HTML w etykietach jest renderowany w formularzu webowym i aplikacjach mobilnych rtSurvey. Może nie renderować się we wszystkich klientach kompatybilnych z ODK. Zawsze testuj na docelowej platformie.
Obsługiwane tagi HTML
Formatowanie tekstu
| Tag | Wynik |
|---|---|
<strong>tekst</strong> lub <b>tekst</b> | Tekst pogrubiony |
<em>tekst</em> lub <i>tekst</i> | Tekst kursywą |
<u>tekst</u> | Tekst podkreślony |
<br> | Podział wiersza |
<span style="...">tekst</span> | Stylowanie inline |
Linki
<a href="https://example.com" target="_blank">Kliknij tutaj</a>
Otwiera w nowej karcie. Używaj do dokumentów referencyjnych, wytycznych lub zewnętrznych zasobów, z którymi ankieter powinien się zapoznać.
Kolory
Używaj <span> ze stylami inline:
<span style="color: red;">Ostrzeżenie: wartość poza zakresem</span>
<span style="color: #009688;">Sekcja ukończona</span>
Zmienne motywu kolorystycznego
rtSurvey obsługuje tokeny motywu kolorystycznego, które dostosowują się do skonfigurowanego motywu aplikacji. Używaj składni __COLOR_THEME_NAME__:
<span style="color: var(--color-theme-primary);">Tekst w kolorze podstawowym</span>
Lub używając skrótu tokenu w tekście etykiety:
<font color="var(--COLOR_THEME_PRIMARY)">Ważna notatka</font>
Jest to automatycznie konwertowane na równoważny <span> z zmienną CSS w czasie renderowania.
Etykiety wielojęzyczne
Umieść zawartość w tagach językowych, aby obsługiwać wiele języków w jednej komórce etykiety:
<en>Enter the household size</en><vi>Nhập quy mô hộ gia đình</vi>
rtSurvey wyodrębnia zawartość odpowiadającą bieżącemu językowi aplikacji. Jeśli nie zostanie znaleziony pasujący tag języka, wyświetlany jest pełny ciąg.
Przykłady w polach notatek
Instrukcja sekcji z pogrubieniem i podziałem wiersza
| type | name | label |
|---|---|---|
| note | section_intro | <strong>Sekcja 3: Użytkowanie gruntów</strong><br>Zadaj wszystkie pytania w tej sekcji wyłącznie głowie gospodarstwa domowego. |
Dynamiczne podsumowanie z odwołaniem do obliczenia
| type | name | label |
|---|---|---|
| calculate | total | |
| note | summary | Łączna liczba członków gospodarstwa: <strong>${total}</strong><br><span style="color: gray;">Dorośli: ${adults} · Dzieci: ${children}</span> |
Ostrzeżenie na czerwono
| type | name | label | relevant |
|---|---|---|---|
| note | age_warning | <span style="color: red;"><strong>Ostrzeżenie:</strong> Wprowadzony wiek (${age}) jest wyjątkowo wysoki. Proszę zweryfikować.</span> | ${age} > 100 |
Link do dokumentu referencyjnego
| type | name | label |
|---|---|---|
| note | guidelines_link | Przed rozpoczęciem tej sekcji zapoznaj się z <a href="https://docs.example.com/guidelines" target="_blank">Wytycznymi terenowymi</a>. |
Specjalne tagi HTML rtSurvey
<webbox src='url' title='tytuł'>...</webbox>
Osadza przycisk otwierający URL w modalnym oknie wewnątrz formularza. Pełne szczegóły znajdziesz w Webbox.
<delete-repeat-current>etykieta</delete-repeat-current>
Renderuje przycisk wewnątrz grupy powtórzeń, który usuwa bieżącą instancję powtórzenia po dotknięciu.
<delete-repeat-last>etykieta</delete-repeat-last>
Renderuje przycisk usuwający ostatnią instancję powtórzenia.
Przykład użycia w grupie powtórzeń:
| type | name | label |
|---|---|---|
| note | delete_btn | <delete-repeat-current>Usuń tego członka</delete-repeat-current> |
Najlepsze praktyki
- Używaj HTML oszczędnie — zbyt sformatowane etykiety są trudniejsze do odczytania, nie łatwiejsze.
- Preferuj
<strong>dla pogrubienia i<em>dla kursywy zamiast przestarzałych<b>i<i>. - Używaj kolorów w sposób znaczący — czerwonego dla ostrzeżeń, nie dla dekoracji.
- Zawsze testuj renderowanie HTML zarówno w aplikacji mobilnej, jak i w formularzu webowym, ponieważ renderowanie może się nieznacznie różnić.
- Unikaj tagów
<table>wewnątrz etykiet — rzadko renderują się dobrze na ekranach mobilnych. - Nie używaj JavaScript (
<script>) — zostanie usunięty lub spowoduje błędy.
Ograniczenia
- Złożony HTML (tabele, formularze, skrypty) nie jest obsługiwany i może zepsuć renderowanie.
- Niektórzy starsi klienci mobilni mogą wyświetlać tagi HTML jako tekst dosłowny — testuj na wszystkich docelowych urządzeniach.
- Linki
<a>otwierają się w przeglądarce lub WebView — ankieter opuszcza formularz, co może być kłopotliwe na urządzeniach mobilnych.