Hier werden die Unterschiede zwischen zwei Versionen angezeigt.
Nächste Überarbeitung | Vorhergehende ÜberarbeitungLetzte ÜberarbeitungBeide Seiten der Revision | ||
de:create:questions:imgscale [12.11.2014 15:05] – angelegt admin | de:create:questions:imgscale [22.03.2023 16:48] – admin | ||
---|---|---|---|
Zeile 6: | Zeile 6: | ||
{{: | {{: | ||
+ | |||
+ | ===== Benutzerdefinierte Skalen ===== | ||
+ | |||
+ | Für die Bild-Skala stehen einige vordefinierte Grafiken (u.a. Sterne) zur Verfügung. Es ist aber ebenso einfach, die Gestaltung frei anzupassen. Dafür müssen Sie zunächst die Größe der Grafik bzw. des Auswahlbereichs festlegen (in [[: | ||
+ | |||
+ | Für jeden Auswahlzustand sowie für "noch nicht ausgewählt" | ||
+ | |||
+ | |noch nicht ausgewählt| | ||
+ | |Auswahl 1| | ||
+ | |Auswahl 2| | ||
+ | |Auswahl 3| | ||
+ | |Auswahl 4| | ||
+ | |Auswahl 5| | ||
+ | |||
+ | Die entsprechende Grafik für die Standard-Sterne-Skala sieht aus wie folgt (allerdings ohne Rand). | ||
+ | |||
+ | {{: | ||
+ | |||
+ | In der Gesamt-Grafik sollte der Hintergrund transparent sein, damit die Schattierung der Items weiterhin funktioniert. Außerdem ist es i.d.R. sinnvoll, die Anzahl der Farben in der Bildbearbeitung zu reduzieren (z.B. auf 7, 15, 31 oder 63), damit die Grafikdatei nicht unnötig groß wird. Dann wird die Gesamt-Grafik in einem Web-tauglichen Format (i.d.R. PNG) gespeichert. | ||
+ | |||
+ | Anschließend wird die Grafik-Datei unter **Bilder und Mediendateien** in das Projekt hochgeladen und der Name der Datei in der Frage bei //Grafik für die Skala// -> " | ||
+ | |||
+ | Nach dem Speichern kann die korrekte Funktion in der Vorschau direkt überprüft werden. | ||
+ | |||
+ | |||
+ | ===== JavaScript-Anbindung ===== | ||
+ | |||
+ | Zur Bild-Skala existieren im Fragebogen Formularfelder, | ||
+ | |||
+ | <code javascript> | ||
+ | <script type=" | ||
+ | <!-- | ||
+ | |||
+ | var scaleItem = document.getElementById(" | ||
+ | scaleItem.addEventListener(" | ||
+ | alert(" | ||
+ | }); | ||
+ | |||
+ | // --> | ||
+ | </ | ||
+ | </ | ||
+ | |||
===== Instruktionen ===== | ===== Instruktionen ===== | ||
- | Es mag notwendig sein, dem Befragten die Auswahloptionen kurz zu erläutern. 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. | + | Es mag notwendig sein, dem Befragten die Auswahloptionen kurz zu erläutern. |
+ | |||
+ | {{: | ||
+ | |||
+ | 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: | Ist die URL der Skalengrafik bekannt, zeigt folgender HTML-Code (hier am Beispiel der Standard-Sterne) eine visuelle Erklärung der Skala: | ||
Zeile 39: | Zeile 85: | ||
Neben Bild-URL (im Beispiel '' | Neben Bild-URL (im Beispiel '' | ||
- | ===== Benutzerdefinierte Skalen ===== | ||
- | Für die Bild-Skala stehen einige vordefinierte Grafiken (u.a. Sterne) zur Verfügung. Es ist aber ebenso einfach, die Gestaltung frei anzupassen. Dafür müssen Sie zunächst die Größe der Grafik bzw. des Auswahlbereichs festlegen (in [[: | + | ---- |
- | Für jeden Auswahlzustand sowie für "noch nicht ausgewählt" | + | Suchbegriffe: Bildskala, Sternchen, Ratings |
- | + | ||
- | |noch nicht ausgewählt| | + | |
- | |Auswahl 1| | + | |
- | |Auswahl 2| | + | |
- | |Auswahl 3| | + | |
- | |Auswahl 4| | + | |
- | |Auswahl 5| | + | |
- | + | ||
- | Die entsprechende Grafik für die Standard-Sterne-Skala sieht aus wie folgt (allerdings ohne Rand). | + | |
- | + | ||
- | {{:de: | + | |
- | + | ||
- | In der Gesamt-Grafik sollte der Hintergrund transparent sein, damit die Schattierung der Items weiterhin funktioniert. Außerdem ist es i.d.R. sinnvoll, die Anzahl der Farben in der Bildbearbeitung zu reduzieren (z.B. auf 7, 15, 31 oder 63), damit die Grafikdatei nicht unnötig groß wird. Dann wird die Gesamt-Grafik in einem Web-tauglichen Format (i.d.R. PNG) gespeichert. | + | |
- | + | ||
- | Anschließend wird die Grafik-Datei unter **Bilder und Mediendateien** in das Projekt hochgeladen und der Name der Datei in der Frage bei //Grafik für die Skala// -> " | + | |
- | + | ||
- | Nach dem Speichern kann die korrekte Funktion in der Vorschau direkt überprüft werden. | + |