Slider bauen, um den z-Wert und damit die Ausprägung auf D im Vergleich zu anderen Personen zu visualisieren

Question

Guten Tag,

ich mache am Ende meiner Befragung auch direkt die Auswertung für die Teilnehmenden. Dazu habe ich schon Hilfestellung von einem vorherigen Projekt bekommen. Allerdings funktioniert nur ein Teil (individuellen D-Score bilden) der eigentlichen Ergebnisausgabe.
Der Rest nicht richtig. Hat jemand eine Idee warum? Im Anhang ein Screenshoot.

Hier der PHP Code:

// Summenscore aller Items (D35) bilden
$d_sum = valueSum(
         array("D001_01", "D001_03", "D001_05", 
               "D001_08", "D001_10", "D001_12", 
               "D001_15", "D001_16", 
                "D001_02", "D001_04", "D001_06", "D001_07", 
               "D001_09", "D001_11", "D001_13", 
               "D001_14")
);

   // aus dem Summenscore den individuellen D-Score berechnen
$d = $d_sum/16;
registerVariable($d);

   // durchschnittlicher D-Score in der Bevölkerung
$d_norm = 2.33;
registerVariable($d_norm);

   // Standardabweichung des D-Scores in der Bevölkerung
$d_sd = 0.68;
registerVariable($d_sd);

   // individuellen D-Score in z-Wert umwandeln
$z = ($d - $d_norm)/$d_sd;
registerVariable($z);

   // individuelles Feedback
html('
<h2 style="text-align: center; margin:30px">Your D-Score</h2>
<p style="margin-bottom:20px"><b>Your Score: '.$d.'</b>. The scale ranges from 1 (very low) to 5 (very high).</p>
');

// Slider bauen, um den z-Wert und damit die Ausprägung auf D im Vergleich zu anderen Personen zu visualisieren
html('
<p><b>Your D-Score compared to others:</b></p>
<div class= "slidercontainer">
<input type= "range" list="tickmarks" min="-3" max="3" step="0.01"
 value ='.$z.' id="myRange_d" class ="slider">
<datalist id="tickmarks">
  <option value= "-3" label="very low"></option>
  <option value=  "3" label="very high"></option>
</datalist>
</div>

<style>
datalist {
  display: flex;
  justify-content: space-between;
  color: black;
  width: 100%;
}
.slidercontainer{
width:100%;
margin-bottom:30px;
margin-left:auto;
margin-right:auto;
}
.slider{
-webkit-appearance:none;
  background-color: silver;
width: 100%;
background: linear-gradient(90deg);
outline: none;
opacity: 0.7;
 -webkit-transition: 0.25;
    transition: opacity 0.25;
border-radius: 12px; 
}
</style>

<script>
document.getElementById("myRange_d").disabled = true; 
</script>'
);

html('
<p style="margin-bottom:30px;">Also note that the results can only be reliable to the extent that you responded seriously and honestly.</p
');

Comments

Auf dem Screenshot ist leider nicht viel zu erkennen. Beschreiben Sie doch bitt einmal, was nicht funktioniert?

---

Hallo,
ich konnte schon einiges fixen. Aber die Ansicht der Ergebnisse ist immer noch in vertikaler Ansicht. Da fehlt mir die Expertise, um im Code sehen zu können, wo das verändern kann.

Viele Grüße

---

Tja, mir fehlt leider nach wie vor eine Vorstelluing davon, von welchem Bereich Ihres Screenshots oben wir überhaupt sprechen :)

Sie können gerne einen Link zu dem Inteview führen, welches schon Ergebnisse anzeigt. Am besten erstellen Sie unter "Erhobene Daten" -> "Ausgefüllten Fragebogen ändern" einen Link, der auch immer wieder auf die betroffene Seite zurück führt.

---

Vielen Dank! Das ist eine super Idee!
https://www.soscisurvey.de/Games_2023/?act=e9GfmPd2O6qOnNHSS84ky2Vx

---

Das Impressum sollte nicht rechts vom Feedback stehen, sondern unten ... korrekt?

Bitte ergänzen Sie als erstes die fehlende spitze Klammer ganz am Ende Ihres Codes, also </p> statt </p:

html('
...honestly.</p>
');

Womöglich ist das schon alles, wenn nicht, dann schaue ich wieder.

---

Ja! Das war tatsächlich schon alles :)
Vielen Dank und schönes Wochenende!