| Beide Seiten der vorigen RevisionVorhergehende ÜberarbeitungNächste Überarbeitung | Vorhergehende ÜberarbeitungLetzte ÜberarbeitungBeide Seiten der Revision |
| de:create:questions:imgscale [01.11.2018 17:03] – [JavaScript-Anbindung] admin | de:create:questions:imgscale [22.03.2023 16:48] – admin |
|---|
| {{:de:create:questions:scr.imgscale.kunin5.png?nolink|Beispiel für eine Bild-Skala: 5 Gesichter (Kunin-Skala)}} | {{:de:create:questions:scr.imgscale.kunin5.png?nolink|Beispiel für eine Bild-Skala: 5 Gesichter (Kunin-Skala)}} |
| |
| ===== Instruktionen ===== | |
| |
| Es mag notwendig sein, dem Befragten die Auswahloptionen kurz zu erläutern. | |
| |
| {{:de:create:questions:scr.imgscale.instructions.png?nolink|Instruktionen für die Bild-Skala}} | |
| |
| Dafür muss man keine zusätzlichen Bildschirmabdrücke (Screenshots) erstellen, sondern kann direkt auf die Skalengrafik zurückgreifen. Verwendet man nicht ohnehin eine eigene Grafik, kann die Adresse der Grafik (URL) aus dem HTML-Quellcode der Frage ermittelt werden. | |
| |
| Ist die URL der Skalengrafik bekannt, zeigt folgender HTML-Code (hier am Beispiel der Standard-Sterne) eine visuelle Erklärung der Skala: | |
| |
| <code html> | |
| <table cellspacing="0" cellpadding="1" border="0"> | |
| <tr> | |
| <td><div style="background-image: url(../images/imgscale.stars5.png); width: 140px; height: 30px; background-position: 0px 0"></div></td> | |
| <td style="padding-left: 20px; vertical-align: middle">noch keine Bewertung</td> | |
| </tr><tr> | |
| <td><div style="background-image: url(../images/imgscale.stars5.png); width: 140px; height: 30px; background-position: 0 -30px"></div></td> | |
| <td style="padding-left: 20px; vertical-align: middle">Sehr schlecht (keine Sterne)</td> | |
| </tr><tr> | |
| <td><div style="background-image: url(../images/imgscale.stars5.png); width: 140px; height: 30px; background-position: 0 -60px"></div></td> | |
| <td style="padding-left: 20px; vertical-align: middle">Eher schlecht (1 Stern)</td> | |
| </tr><tr> | |
| <td><div style="background-image: url(../images/imgscale.stars5.png); width: 140px; height: 30px; background-position: 0 -90px"></div></td> | |
| <td style="padding-left: 20px; vertical-align: middle">Mäßig (2 Sterne)</td> | |
| </tr><tr> | |
| <td><div style="background-image: url(../images/imgscale.stars5.png); width: 140px; height: 30px; background-position: 0 -120px"></div></td> | |
| <td style="padding-left: 20px; vertical-align: middle">Eher gut (3 Sterne)</td> | |
| </tr><tr> | |
| <td><div style="background-image: url(../images/imgscale.stars5.png); width: 140px; height: 30px; background-position: 0 -150px"></div></td> | |
| <td style="padding-left: 20px; vertical-align: middle">Sehr gut (4 Sterne)</td> | |
| </tr> | |
| </table> | |
| </code> | |
| |
| Neben Bild-URL (im Beispiel ''../images/imgscale.stars5.png'') und der Beschreibung ist evtl. noch der Wert für ''background-position'' anzupassen. Beginnend mit ''0px'' ist der zweite Wert für jeden Zustand um die Höhe einer Einzelgrafik (im Beispiel 30 Pixel) zu reduzieren. | |
| ===== Benutzerdefinierte Skalen ===== | ===== Benutzerdefinierte Skalen ===== |
| |
| </script> | </script> |
| </code> | </code> |
| | |
| | |
| | ===== Instruktionen ===== |
| | |
| | Es mag notwendig sein, dem Befragten die Auswahloptionen kurz zu erläutern. |
| | |
| | {{:de:create:questions:scr.imgscale.instructions.png?nolink|Instruktionen für die Bild-Skala}} |
| | |
| | Dafür muss man keine zusätzlichen Bildschirmabdrücke (Screenshots) erstellen, sondern kann direkt auf die Skalengrafik zurückgreifen. Verwendet man nicht ohnehin eine eigene Grafik, kann die Adresse der Grafik (URL) aus dem HTML-Quellcode der Frage ermittelt werden. |
| | |
| | Ist die URL der Skalengrafik bekannt, zeigt folgender HTML-Code (hier am Beispiel der Standard-Sterne) eine visuelle Erklärung der Skala: |
| | |
| | <code html> |
| | <table cellspacing="0" cellpadding="1" border="0"> |
| | <tr> |
| | <td><div style="background-image: url(../images/imgscale.stars5.png); width: 140px; height: 30px; background-position: 0px 0"></div></td> |
| | <td style="padding-left: 20px; vertical-align: middle">noch keine Bewertung</td> |
| | </tr><tr> |
| | <td><div style="background-image: url(../images/imgscale.stars5.png); width: 140px; height: 30px; background-position: 0 -30px"></div></td> |
| | <td style="padding-left: 20px; vertical-align: middle">Sehr schlecht (keine Sterne)</td> |
| | </tr><tr> |
| | <td><div style="background-image: url(../images/imgscale.stars5.png); width: 140px; height: 30px; background-position: 0 -60px"></div></td> |
| | <td style="padding-left: 20px; vertical-align: middle">Eher schlecht (1 Stern)</td> |
| | </tr><tr> |
| | <td><div style="background-image: url(../images/imgscale.stars5.png); width: 140px; height: 30px; background-position: 0 -90px"></div></td> |
| | <td style="padding-left: 20px; vertical-align: middle">Mäßig (2 Sterne)</td> |
| | </tr><tr> |
| | <td><div style="background-image: url(../images/imgscale.stars5.png); width: 140px; height: 30px; background-position: 0 -120px"></div></td> |
| | <td style="padding-left: 20px; vertical-align: middle">Eher gut (3 Sterne)</td> |
| | </tr><tr> |
| | <td><div style="background-image: url(../images/imgscale.stars5.png); width: 140px; height: 30px; background-position: 0 -150px"></div></td> |
| | <td style="padding-left: 20px; vertical-align: middle">Sehr gut (4 Sterne)</td> |
| | </tr> |
| | </table> |
| | </code> |
| | |
| | Neben Bild-URL (im Beispiel ''../images/imgscale.stars5.png'') und der Beschreibung ist evtl. noch der Wert für ''background-position'' anzupassen. Beginnend mit ''0px'' ist der zweite Wert für jeden Zustand um die Höhe einer Einzelgrafik (im Beispiel 30 Pixel) zu reduzieren. |
| | |
| | |
| | ---- |
| | |
| | Suchbegriffe: Bildskala, Sternchen, Ratings |
