Experiment grafisch horizontal nicht vertikal darstellen

asked Feb 17, 2023 in SoSci Survey (dt.) by s222544 (565 points)
edited Feb 20, 2023 by s222544

Hallo SoSci Survey Support,

vielen Dank für die Hilfe in meinem Projekt.

Meinem Betreuer gefällt das vertikale Design des Fragebogens leider nicht.

Zum Beispiel besteht der erste Teil des Experimentes darin, dass die Probanden die Summe 100 in 4 Kategorien verteilen.

Auf der nächsten Seite soll aus dieser Allokation ein Kreisdiagramm auf der linken Seite gebildet werden (früher habe ich mittels Platzhaltern diese Allokation einfach angezeigt).

Jetzt sollen 4 Pfeile von dem Kreisdiagramm nach rechts zeigen. Über jedem dieser Pfeile sollen Prozentangaben stehen, die aus dem Zufallsgenerator gezogen werden (früher habe ich diese auch einfach angezeigt) - aber nur in der EG; die KG soll keine Pfeile und keine Prozentangaben sehen.

Rechts neben den Pfeilen soll ein weiteres Kreisdiagramm gebildet werden, die Werte dafür werden mit PHP Code berechnet - dies wird der EG und KG angezeigt.

Könnten Sie mir bei dieser Darstellung bitte behilflich sein?

Vielen Dank im Voraus.

commented Feb 17, 2023 by SoSci Survey (305k points)

commented Feb 17, 2023 by s222544 (565 points)

1 Answer

answered Feb 17, 2023 by SoSci Survey (305k points)

Gibt es vielleicht die Möglichkeit, das SoSci aus den Antworten der Probanden automatisch Diagramme bildet und anzeigt?

Ja, dafür können Sie ChartJS verwenden, vgl. Visuelles Feedback

Die Platzierung von CHart und Eingabefeldern könnte dann etwa wie folgt aussehen.

<div style="position: relative">
  <div id="chart01" style="width: 200px; height: 200px; position: absolute; left: 0; top: 0"></div>
  <div style="width: 80px; position: absolute; left: 160px; top: 20px">%input:AB01_01%</div>
  <div style="width: 80px; position: absolute; left: 160px; top: 60px">%input:AB01_02%</div>
  <div style="width: 80px; position: absolute; left: 160px; top: 100px">%input:AB01_03%</div>
</div>

Pfeile müssten SIe als (transparente) Grafiken vorbereiten und einbinden.

commented Feb 20, 2023 by s222544 (565 points)

Vielen Dank für Ihre Nachricht und die Anleitungen!

Folgenden Code benutze ich bereits:


<div style="position: static"> </div>

<canvas id="1pieo" style="width:25%;max-width:200px"></canvas>

<script type="text/javascript">

</script>

als TX01 als Text als HTML Code gespeichert.

Im Fragebogen habe ich:

// Bibliothek ChartJS verfügbar machen
library('ChartJS');

// Testdaten (hier würde man Daten aus dem Datensatz auslesen)
$labels = ['Tagesgeld', 'Aktien', 'Anleihen', 'Gold'];
$ownData = [value('TE01_01'), value('TE01_02'), value('TE01_03'), value('TE01_04')];

// Textbaustein mit dem HTML-Code für das Chart einbinden
show('TX01', [
  '%labels%' => json_encode($labels),
  '%ownData%' => json_encode($ownData)
]);

und für die Pfeile (die EG und KG angezeigt werden sollen):
<p>Tagesgeld: %wert11%</p>
<div style="width: 400px; position: absolute; left: 500px; top: 120px">➜</div>
<p>Aktien: %wert21%</p>
<div style="width: 400px; position: absolute; left: 500px; top: 140px">➜</div>
<p>Anleihen: %wert31%</p>
<div style="width: 400px; position: absolute; left: 500px; top: 160px"➜</div>
<p>Gold: %wert41%</p>
<div style="width: 400px; position: absolute; left: 500px; top: 180px">➜</div>

Leider gibt es noch ein paar Probleme bei denen ich um Ihre Unterstützung bitte:

1) Siehe Bildschirmfoto oben: die Legende ist zu weit oben
2) Gerade ist noch zu viel Platz nach unten
3) Die Pfeile sind nicht mittig auf Höhe des linken Kreisdiagrams und es fehlen die Werte über den Pfeilen.

Darf ich Sie höflich um Hilfe bitten?

Vielen Dank im Voraus.

commented Feb 20, 2023 by SoSci Survey (305k points)

commented Feb 20, 2023 by s222544 (565 points)

commented Feb 20, 2023 by SoSci Survey (305k points)

commented Feb 20, 2023 by s222544 (565 points)

commented Feb 20, 2023 by SoSci Survey (305k points)

commented Feb 20, 2023 by s222544 (565 points)

Vielen Dank für Ihre Antwort!

Das Problem mit der Größe des Charts ist das neben das Kreisdiagramm links und den mittigen Pfeilen, noch ein weiteres Kreisdiagramm rechts platziert werden soll.

> Falls Sie skalieren möchten ... nein, möchten Sie nicht, wenn Sie die Pfeile noch platzieren wollen ;)

Wenn Sie das so sagen, stimme ich Ihnen natürlich vollkommen zu ;)

Hier der HTML Code für die Pfeile, zugegeben die Pfeile sind sehr klein:

<!--Pfeile anzeigen
<p>Nach einem Jahr sind folgende Renditen aufgetreten</p>

<p>Tagesgeld: %wert11%</p>
<div style="width: 400px; position: absolute; left: 500px; top: 120px">➜</div>
<p>Aktien: %wert21%</p>
<div style="width: 400px; position: absolute; left: 500px; top: 140px">➜</div>
<p>Anleihen: %wert31%</p>
<div style="width: 400px; position: absolute; left: 500px; top: 160px"➜</div>
<p>Gold: %wert41%</p>
<div style="width: 400px; position: absolute; left: 500px; top: 180px">➜</div>

Vielen Dank!

commented Feb 20, 2023 by SoSci Survey (305k points)

commented Feb 20, 2023 by s222544 (565 points)

...