0 votes
in SoSci Survey (dt.) by s222544 (610 points)
edited 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.

by SoSci Survey (312k points)
Muss das ganze auch auf kleinen Displays, z.B- auf Mobilgeräten funktionieren? Dann müssen Sie sich nämlich ein klein wenig mehr in die Sache einarbeiten. Eventuell müssten die Pfeile dann je nach Bildschirmgröße nach rechts oder nach unten zeigen...

Aber hier schonmal die abstrakte Antwort: Verwenden Sie die absolute CSS-Positionierung (position: absolute), um Diagramm, Pfeile und Werte an der Stelle anzuzeigen, wo sie erschienen sollen. Die Position geben Sie dann einfach als X-Y-Koordinaten (left/top) an.

Den Block setzen Sie in ein <div style="position: relative">, damit Ihre Koordinaten relativ zur aktuellen Position auf der Seite sind, und nicht zur Seite selbst.
by s222544 (610 points)
Vielen Dank für Ihre Antwort. Ich denke, ich werde diese Grafiken nicht auf kleinen Displays anbieten.

Hätten Sie vielleicht eine Anleitung wie ich Diagramme in SoSci einbauen kann? Gibt es vielleicht die Möglichkeit, das SoSci aus den Antworten der Probanden automatisch Diagramme bildet und anzeigt?

Vielen Dank im Voraus!

1 Answer

0 votes
by SoSci Survey (312k 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.

by s222544 (610 points)
Vielen Dank für Ihre Nachricht und die Anleitungen!

Folgenden Code benutze ich bereits:

<!-- Container für das Diagramm -->
<div style="position: static"> </div>

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

 
<script type="text/javascript">
<!--
 
var chartCanvas = document.getElementById("1pieo").getContext('2d');
var chart01 = new Chart(chartCanvas, {
    type: 'pie',
    data: {
        labels: %labels%,
        datasets: [{
            label: 'Ihre ursprüngliche Verteilung',
            data: %ownData%,
             backgroundColor: [
      'rgb(255, 99, 132)',
      'rgb(54, 162, 235)',
      'rgb(255, 205, 86)',
      'rgb(0, 153, 38)'
            ]
            
        }]
    }
    
});
 
// -->
</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">&#10140;</div>
<p>Aktien: %wert21%</p>
<div style="width: 400px; position: absolute; left: 500px; top: 140px">&#10140;</div>
<p>Anleihen: %wert31%</p>
<div style="width: 400px; position: absolute; left: 500px; top: 160px"&#10140;</div>
<p>Gold: %wert41%</p>
<div style="width: 400px; position: absolute; left: 500px; top: 180px">&#10140;</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.
by SoSci Survey (312k points)
> <canvas id="1pieo" style="width:25%;max-width:200px"></canvas>

Geben Sie bitte mal explizit eine Höhe an, oder besser noch ein Seitenverhältnis über aspect-ratio: 1;

> 3) Die Pfeile sind nicht mittig

Pfeile sehe ich im Screenshot keine. Einen Pretest-Link zur betroffenen Seite haben Sie noch nicht gepostet, oder?
by s222544 (610 points)
Vielen Dank!
Habe den Code jetzt wie folgt angepasst:
<!-- Container für das Diagramm -->
<div style="position: static"> </div>

<canvas id="1pieo" style="width:25%;max-width:200px"></canvas>
<div> element {
  padding-top: 100%value;
} </div>

 
<script type="text/javascript">
<!--

Bei aspect ratio:1 neben der canvas id kamen Fehlermeldungen auf.

Die Pfeile sind oben rechts auf dem Foto über Gold: 3.22% zu sehen.

Hier ein Link zur betroffenen Seite. Auf der ersten Seite müssen Sie 100 auf vier verschiedene Kategorien verteilen und wenn Sie auf weiter klicken, müsste das Kreisdiagramm zu sehen sein.

Vielen Dank für Ihre Hilfe!
 
https://www.soscisurvey.de/acb/index.php?i=S3SFH1HR3P0F&rnd=PWNJ
by SoSci Survey (312k points)
> Bei aspect ratio:1 neben der canvas id kamen Fehlermeldungen auf.

Probieren Sie es wie  folgt:

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

Wie man einen Pretest-Link erstellt, steht hier beschrieben:
https://www.soscisurvey.de/help/doku.php/de:survey:pretest
by s222544 (610 points)
Vielen Dank, habe die Zeile mit der aspect ratio angepasst.

Hier ist ein Pretest Link direkt zur betroffenen Seite: https://www.soscisurvey.de/acb/index.php?i=FIUJUFSMWYW8&rnd=WHFT

Vielen Dank für Ihre Hilfe!
by SoSci Survey (312k points)
Der Bereich für das Chart ist nun 800x800 Pixel groß ... uns skaliert mit der Seite. Soweit schonmal so gut. Nur ist das Chart selbst m.E. viel zu klein.

Wenn Sie das Chart fix in dieser Größe belassen möchten, dann stellen Sie eine feste Größe von 260 x 300 Pixel für das <canvas> ein.

<canvas id="1pieo" style="width: 260px; height: 300px;"></canvas>

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

> Die Pfeile sind oben rechts auf dem Foto über Gold: 3.22% zu sehen.

Ich sehe weder in Firefox noch in Chrome einen Pfeil. Welchen HTML-Code haben Sie dafür denn verwendet? Dann suche ich einmal danach...
by s222544 (610 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">&#10140;</div>
<p>Aktien: %wert21%</p>
<div style="width: 400px; position: absolute; left: 500px; top: 140px">&#10140;</div>
<p>Anleihen: %wert31%</p>
<div style="width: 400px; position: absolute; left: 500px; top: 160px"&#10140;</div>
<p>Gold: %wert41%</p>
<div style="width: 400px; position: absolute; left: 500px; top: 180px">&#10140;</div>

Vielen Dank!
by SoSci Survey (312k points)
Sie haben den ganzen Teil mit den Pfeilen in einen Kommentar <!-- gesetzt ... es wird also nichts davon angezeigt. Bitte schließen Sie den Kommentar:

<!--Pfeile anzeigen -->

> zugegeben die Pfeile sind sehr klein

Dann sollten sie entweder die Schriftgröße erhöhen, oder Grafiken für die Pfeile hochladen und einbinden.
by s222544 (610 points)
Habe den Kommentar geschlossen, vielen Dank für den Hinweis!

Willkommen im Online-Support von SoSci Survey.

Hier bekommen Sie schnelle und fundierte Antworten von anderen Projektleitern und direkt von SoSci Survey.

→ Eine Frage stellen


Welcome to the SoSci Survey online support.

Simply ask a question to quickly get answers from other professionals, and directly from SoSci Survey.

→ Ask a Question

...