Fragen Mausklickauswertung, erstellte Matrix formatieren, übergreifend mit HTML, JS, PHP arbeiten

Question

Vielen Dank für die schnelle Antwort!

Okay, mein Vorhaben und meine Fragen dazu sind:
ich machen eine Umfrage zu einer FAQ-Box Suche auf einer Internetseite und möchte dabei die Suchwege und die Nutzbarkeit (usabilitiy, user experience) abfragen.

Ich habe bei einer Frage "Grafische Positionierung" ein Bild hochgeladen und Bereiche definiert, welche die FAQ-Boxen nachahmen. Je nach Anwahl eines Bereichs soll eine weitere Frage des Typs "Grafische Positionierung" (GP) zu sehen sein, dessen Bild den Inhalt der FAQ-Box abbildet.

Mein Hürden:
Meine Idee ist alle GP (FAQ-Boxen und Inhalte) auf einer Fragebogenseite einzubinden, insgesamt 17, und diese je nach Bedarf einzublenden. Der Nutzer klickt auf einen Bereich, und die neue GP wird ein- die alte ausgeblendet.

Ich konnte bisher nicht die Variablen der GPs ansprechen, da diese andere Namen als in SosciSurvey angegeben sind verwenden. Diese habe ich erst nach langem Suchen mit den Entwicklertools meines Firefox zufällig herausgefunden (Beispiel: nicht "C001_01x01" sondern die Namen sind "C001_01r0"). Wie spreche ich die Variablen "korrekt" an?

Zur Auswertung des Mausklicks: auf der Supportseite habe ich ein Beispiel eines JS mit der Methode des AttachEvents gefunden:
SoSciTools.attachEvent(faq_box, "click", toogle_display);
Dies habe ich noch nicht zum laufen bringen können. Wie werte ich Mausklicks für Fragetypen zur Laufzeit aus? Gibt es soetwas für den Fragentyp GP?

Auch in Echtzeit soll die Häufigkeit der angeklickten Suchwege abgefragt werden, damit ich nach einer bestimmten Anzahl (z. B. 5) mit einer Ablaufsteuerung zur nächsten Fragebogenseite gehen kann.

Dort soll die "Masse" der Suchwegen (Zuordnungen) über eine Matrix abgefragt werden. Da es insgesamt über 150 Suchbegriffe sind, möchte ich zufällig circa 10 Begriffe auswählen und in einer kombinierten Frage zusammenstellen. Das funktioniert auch schon, hier habe ich allerdings mit der Darstellung zu tun:

$code1 = value('B007x01');
$code2 = value('B007x02');
$code3 = value('B007x03');

question ( 
'B00'.$code1, 'gap=0','gap=0', 
'combine=B00'.$code2, 
'combine=B00'.$code3 
);

html(' <style type="text/css">
      th { 
        text-align: left; 
        transform: rotate(-90deg); 
      }
</style> ');

Die Kopfzeile wird gedreht, ist aber mit einem Schatten hinterlegt, welcher in einer anderer Spalte wieder auftaucht. Die Wie "entferne" ich den Schatten und mache die Zeilenhöhe (Breite durch die Drehung?) größer? Wie ist eine Mehrfachauswahl bei den Spalten möglich?

Meine letzte Hürde: die Supportseiten haben mir bisher weiter geholfen. Allerdings bin ich dann auf einen Lösungsweg "angewiesen". Für einen ersten Teil einer Aufgabe verwende ich JS mit z. B. der Funktion getElementById (HTML Text mit JS). Jetzt möchte ich mit dieser Variable weiterarbeiten, finde eine Lösung auf den Supportseiten. Diese ist nun aber in PHP angegeben. Wie kann ich übergreifend arbeiten? Muss ich jetzt in PHP eine neue Lösung für den ersten Teil suchen?

Danke im Voraus für eine Bearbeitung dieser vielen Fragen!

Comments

Tipp: Mit dem Knopf {} können Sie Code als solchen formatieren. Das verbessert die Lesbarkeit ungemein :)

---

Okay, danke, das mache ich beim nächsten mal...

---

...es hat auch die <script> Anweisungen nicht mit abgebildet...

---

Hier nochmal der Code in der HTML Umklammerung:
{html('
  <style type="text/css">
      th {
        text-align: left;
        transform: rotate(-90deg);
      }
  </style>
');}

---

Ich habe die Matrix schon ein bisschen besser hinbekommen, obwohl es noch sehr nach "herumschusterei" aussieht:
{

<style type="text/css">

.header.s2col2 {
  height: 240px;
  white-space: nowrap;
  transform:
  translate(111px, 110px)   
  rotate(-90deg);
  background: hsla(0,0%,0%,0.0);
}

.header.s2col3 {
  height: 240px;
  white-space: nowrap;
  transform:
  translate(111px, 110px)   
  rotate(-90deg);
  background: hsla(10,0%,0%,0.0);
}

.header.s2col4 {
  height: 240px;
  white-space: nowrap;
  transform:
  translate(111px, 110px)   
  rotate(-90deg);
  background: hsla(0,0%,0%,0.0);
}

</style>}

---

Man kann unter der Original-Frage auch auf "edit" klicken und den Code nachträglich formatieren ;)

Answer 1

Ehrlich gesagt bin ich nicht ganz sicher, was die Frage ist...

Wenn wir von JavaScript und PHP sprechen, dass gibt es dazwischen zwei ganz wesentliche Unterschiede:

1. Das JavaScript läuft im Browser (also zwiscehn dem Versenden der Fragebogen-Seite an den Teilnehmer und dem Zurückschicken), das PHP läuft auf dem Server (also zwischen dem Zurückschicken der Antworten und dem Versand der nächsten Seite an den Teilnehmer).
2. PHP kann auf den Datensatz des Teilnehmers zugreifen, JavaScript kann nur auf die aktuelle Seite zugreifen.

Wenn Sie Daten von JavaScript nach PHP (also z.B. in den Datensatz) übermitteln möchten, können Sie dafür z.B. interne Variablen nutzen. Diese kann man als versteckte Eingabefelder in die Fragebogen-Seite einbinden. Dann dienen sie als Schnittstelle zwischen JavaScript und PHP. Umgekehrt können sie Daten auch von PHP nach JavaScript kommunizieren. Dafür sind aber ebenso JS-Funktionsaufrufe tauglich, die man z.B. mit Platzhaltern ausschmückt.

Ob es wirklich sinnvoll ist, mehrere Fragen des Typs "grafische Positionierung" übereinander zu legen --- ich glaube eher nicht. Das Risiko, dass es in einem der gängigen Browser dann nicht wie geplant funktioniert oder dass auf dem Tablet oder dem Smartphone nichts sinnvolles herauskommt ist durchaus gegeben.

Wie spreche ich die Variablen "korrekt" an?

Auch hier ist es hilfreich, zu unterscheiden: Geht es um Variablen im Datensatz, um PHP-Variablen, um JavaScript-Variablen oder sind HTML-Elemente gemeint? Zu einer Frage vom Typ "grafische Positionierung" gehören mehrere Variablen aller genannter Sorten sowie eine ganze Reihe von PHP-Elementen.

Ich habe die Matrix schon ein bisschen besser hinbekommen, obwohl es noch sehr nach "herumschusterei" aussieht:

CSS und HTML ist dann nochmal eine andere Baustelle. Natürlich soll das mit dem Rest zusammenspielen. Aber ich glaube, zwei Schritte wären hilfreich, damit ich Ihre Frage wirklich hilfreich beantworten kann:

1. Suchen Sie sich erstmal eines der Probleme aus und stellen Sie dazu eine neue Frage - dann konzentrieren wir uns erstmal auf einen Schritt und dann auf den nächsten.
2. Wann immer es um Darstellungs- oder Script-Probleme geht, posten Sie bitte nicht nur den Code (was natürlicha uch sinnvoll ist), sondern auch gleich einen Pretest-Link direkt (!) zur betroffenen Seite. Dann kann auch ich einen Blick in die Entwicklerwerkzeuge werfen, HTML-Elemente und deren IDs ansehen und Fehler in der JavaScript-Console analysieren.

Comments

Okay, meine erste Frage betrifft die Auswertung des Fragentyps "Grafische Positionierung" (GP).

Ich möchte nach einem Mausklick auf einen jeweiligen Bereich der GP1 diese ausblenden und eine andere GPx einblenden, welche der Nummer des Bereiches aus der GP1 entspricht.

Dazu wollte ich die Variablen der GP's verwenden, welche unter Fragebkatalog / GP001 / Variablen stehen: GP001_pts, GP001_rgs, GP001_01, GP001_01x01, ...

1. Wie kann ich mit diese Variablen arbeiten (z. B. im HTML, PHP-Code verarbeiten)?

2. Wie kann ich mir diese Variablen zur Laufzeit auf den Fragebogen ausgeben lassen? (ich habe hier versucht mit dokument.write zu arbeiten, da ich das Debugging für mich bisher nicht sonderlich hilfreich anzuwenden wusste)

Grüße!

---

> 1. Wie kann ich mit diese Variablen arbeiten (z. B. im HTML, PHP-Code verarbeiten)?

Wenn es um das Ein- und Ausblenden geht, muss dies i.d.R. innerhalb der Seite passieren (außer Sie wechseln zur nächsten Fragebogen-Seite). Dies muss also per JavaScript erfolgen.

Die gute Nachricht ist: Die Zurechnung von Punkten zu Bereichen erfolgt bereits in JavaScript, steht also dort schon zur Verfügung. Gespeichert werden die Markierungen in einem versteckten Eingabefeld, dessen HTML-ID der Kennung der Frage entspricht.

var data = document.getElementById("GP01").value;

Die schlechte Nachricht: Es sind durch ein Leerzeichen getrennte 4er Tupel, also nicht ganz so trivial zu verwerten.

Deshalb können Sie die Punkte einfacher über markerGP01.getMarker(x) abrufen, wobei das "x" ein Index beginnend mit 0 ist. Die erste gesetzte Markierung bekommen Sie mit markerGP01.getMarker(0)

Wie iele Markierungen insgesamt gesetzt wurden, finden Sie über .getCount() heraus.

> Wie kann ich mir diese Variablen zur Laufzeit auf den Fragebogen ausgeben lassen?

In JavaScript ist die Funktion console.log() Gold wert :)

Events, wann eine neue Markierung gesetzt wurde, gibt es von dem Fragetyp bisher übrigens nicht. Aber das ließe sich bei Bedarf relativ kurzfristig ergänzen.

Sie könnten allerdings auch darüber nachdenken, das Ganze ohne die "grafische Positionierung" zu bauen. Und zwar könnten Sie Ihr Bild einfach als Bild einbinden und mit CSS-absolut positionierten DIVs unsichtbare Bereiche darüberlegen. Diese DIVs ließe sich direkt mit JavaScript koppeln. Das heißt: Wenn jemand auf das DIV klickt, könnten Sie direkt eine entsprechende Aktion auslösen.

---

Wieder vielen Dank für die schnelle Antwort!

Das klingt alles sehr interessant, vor allem der letzte Abschnitt mit den DIV "Containern".

Ich werde mal Ihre Hinweise ausprobieren...

Viele Grüße!

---

Hier vielleicht noch ein paar hilfreiche Zeilen Beispiel-Code:

<div style="position: relative">
  <img src="biild.jpg">
  <div id="region1" style="position: absolute; top: 20px; left: 20px; width: 40px; height: 40px; border: 1px solid green">
</div>
<script type="text/javascript">
document.getElementById("region1").addEventListener("click", function() {
  alert("Hallo Region 1");
});
</script>

---

Hallo Team des Sosci Supports,

ich bin ihrem Rat gefolgt, habe auf ihrem letzten Code aufgebaut und habe meine grafische Abfrage mit ein/ausgeblendeten Bildern hinbekommen - alles über html und java script. Vielen Dank für die Hinweise!


Jetzt interessiert mich die Speicherung von der selbst erzeugten Daten: wie kann ich eingegebene oder selbst gemessene Werte direkt mit java script speichern?


Ich habe mir angelesen: mit internen Variablen. Wie ordne ich eine von mir angelegte Interne Variable einem anderen Wert (einer anderen Frage) zu?


Und meine letzte Frage betrifft die Matrizen, welche ich mir angelegt habe. Ich verwende eine Mehrfachauswahl und kombiniere diese mit weiteren solchen Fragetypen. Der jeweilige Text über den Antwortoptionen ist vom Nutzer vorher selbst eingegeben worden und wird in die Mehrfachauswahl über einen Platzhalter %...% eingefügt. Wenn ich die Variable über PHP auf eine interne Variable speichere, gibt es da eine Möglichkeit diese Variable der Frage zuzuweisen?

Ich arbeite mit Excel für die Auswertung. Ich habe mir in der Anleitung versucht anzusehen, wie die Daten im Excel "aussehen", ich nehme an, pro Nutzer gibt es eine Zeile und pro Antwort oder abgespeicherte interne Variable wird eine Spalte verwendet. Wenn dem so ist, stehe ich gerade vor dem "Problem" mir diese Daten im Excel wieder zusammen zu kodieren (Wert Spalte 23 gehört zum Wert Spalte 56, ...).

Viele Grüße!

---

> Jetzt interessiert mich die Speicherung von der selbst erzeugten Daten: wie kann ich eingegebene oder selbst gemessene Werte direkt mit java script speichern?

Das funktioniert über interne Variablen, hier ein paar Tipps: https://www.soscisurvey.de/help/doku.php/de:create:inputs-custom

>  Wie ordne ich eine von mir angelegte Interne Variable einem anderen Wert (einer anderen Frage) zu?

Gar nicht?! Ich glaube, ich verstehe diese Frage nicht... vielleicht könnten Sie das Ziel nochmal anders formulieren?

> Wenn ich die Variable über PHP auf eine interne Variable speichere, gibt es da eine Möglichkeit diese Variable der Frage zuzuweisen?

Auch diese Frage verstehe ich leider nicht. Möchten Sie dafür (ich könnte mir vorstellen, dass das vom Rest eher unabhängig ist) nochmal eine neue Frage im Online-Support posten? Danke.

> Ich arbeite mit Excel für die Auswertung.

Das tut mir leid.

> Wenn dem so ist, stehe ich gerade vor dem "Problem" mir diese Daten im Excel wieder zusammen zu kodieren

Ich weiß bisher nur, wie es am Ende (ungefähr) aussehen soll. Da ich weder Ihre Forschungsfragen noch das restliche Design kenne, ist diese Frage schwer zu beantworten. Aber ja: Es ist definitiv eine gute Idee, sich frühzeitig Gedanken über die Datenstruktur zu machen. Auch wenn man richtige Statistik-Software verwendet.

Vielleicht kommen Sie dann zu dem Schluss, dass Sie die Daten abhängig von den Antworten in unterschiedliche interne Variablen speichern möchten.

Soweit es nur um die Mehrfachauswahl in Matrixdarstellung geht (kombinierte Frage): Sie werden bei einer Mehrfachauswahl definitiv für jedes Auswahlfeld (Kästchen) eine eigene Variable bekommen. Das ist auch einer der Gründe, warum Mehrfachauswahl-Fragen in der Auswertung regelmäßig Ärger machen. Aber das liegt nicht an der Speicherung, sonder ist eine grundsätzliche Eigenschaft einer Mehrfachauswahl.