5 Sternebewertung mit Sternebalken und Kommazahlen (also z.b. 4,5 oder 4,25)

[blueavenue]

Hi,

ich habe momentan auf einer meiner Seiten eine Bewertungsmöglichkeit von 0-100%. Da kann der User ein Spiel bewerten. Nur einmal. Und nur wenn er eingeloggt ist.

Nun will ich das aber vereinfachen, da für den User die Option von 0-100 mir zu lang als Liste erscheint (Select-Option). Daher will ich das umbauen, auf Grundlage von Sternebewertungen.

Mir ist weder bekannt wie man Sterne anklicken kann, als Bewertungsgrundlage und auch nicht wie man dies als Balkenbewertung auswählen könnte.

Es soll eine Möglichkeit geben, dass ein User auch auf halbe oder viertel Sterne klickt. Neben dem Sternenbalken (der 5 Sterne haben soll) muss halt dann die Zahl erscheinen, die der User bewertet. z,b, 3,75...

Wie geht das in PHP?

[mermshaus]

Das scheint mir eine Frontend-Geschichte zu sein, also JavaScript. Such mal nach „javascript star rating widget“ oder dergleichen. Da findest du Ansätze. Viertelsterne habe ich persönlich aber noch nicht gesehen. Das scheint mir aber auch etwas arg kleinschrittig und schwer auszuwählen.

[blueavenue]

Das will ich aber nicht mit Javaskript lösen. Da gabs neulich schon eine lange Diskussion hier über Javaskript. Es muss doch in PHP möglich sein.... Wie wird ein Balken in PHP realisiert? Die Sterne sind ja nur "Zierde"... Könnte ja auch nur ein langer, grauer Balken sein, mit einer Wertung von 0-1000 als Beispiel...

[mermshaus]

Wie gesagt: Das Verändern des Werts ist im Grunde eine Frontend-Geschichte. Du kannst aber grundsätzlich eine HTML-Struktur erzeugen, die etwa über input[type=image] (x-/y-Koordinaten) oder eine Reihung von input-Elementen bei Auswahl des Werts einen Request abschickt, der zu einer entsprechend aktualisierten Version der Seite führt.

Die zeitgenössischere Lösung wäre es aber wahrscheinlich, vielleicht standardmäßig eine Dropdown-Box zur Auswahl des Werts anzubieten, die per Progessive Enhancement durch ein JavaScript-Widget ausgetauscht wird, wie ich es oben als Suchbegriff beschrieben habe.

Alternativ wäre vielleicht noch ein input[type=range]-Element denkbar.

[kaminbausatz]

http://www.cssscript.com/simple-5-st...d-html-radios/

Sowas ist doch leicht auf Deine Bedürfnisse umzustellen...

[Arne Drews]

http://www.cssscript.com/simple-5-st...d-html-radios/

Sowas ist doch leicht auf Deine Bedürfnisse umzustellen...

Sieht gut aus, zugegeben... Aber inwieweit lässt sich das "leicht" auf seine Bedürfnisse anpassen:

Es soll eine Möglichkeit geben, dass ein User auch auf halbe oder viertel Sterne klickt.

[protestix]

... Wie wird ein Balken in PHP realisiert?

mit den GD-Funktionen

... Könnte ja auch nur ein langer, grauer Balken sein, mit einer Wertung von 0-1000 als Beispiel...

Das wird in HTML und CSS mit dem Element Meter realisiert und für Eingaben nimmst du range.

Wie du das nun umsetzt bleibt dir überlassen.
Ich finde es schwierig zu beurteilen ob etwas nun 3.75 oder 3.50 Punkte/Sterne verdient, Aber ich kann immer die Aussagen treffen "gefällt mir gut", "gefällt mir gar nicht" und "weder noch", das wären 3 Punkte/Sterne Unterscheidung und ist einfach.

[kaminbausatz]

Sieht gut aus, zugegeben... Aber inwieweit lässt sich das "leicht" auf seine Bedürfnisse anpassen:

Indem er anstelle der ganzen Sterne 1/4 Sterne* bastelt und diese per css bspw. mit nth-child oder Klassen ohne Abstand darstellt. Pro ganzen Stern nimmt er vier "radios". Also insgesamt 20 "radios" die eine Bewertung in 5% Schritten zulassen. In einer knappen Stunde ist so etwas erledigt.

Wobei ich persönlich eine Bewertung in 5% Schritten für absolut überflüssig halte. Der Anwender ist sicherlich überfordert mit der Frage warum er bsp. 65 % gegeben hat und nicht 60%.

[Arne Drews]

Indem er anstelle der ganzen Sterne 1/4 Sterne* bastelt und diese per css bspw. mit nth-child oder Klassen ohne Abstand darstellt. Pro ganzen Stern nimmt er vier "radios". Also insgesamt 20 "radios" die eine Bewertung in 5% Schritten zulassen. In einer knappen Stunde ist so etwas erledigt.

Wobei ich persönlich eine Bewertung in 5% Schritten für absolut überflüssig halte. Der Anwender ist sicherlich überfordert mit der Frage warum er bsp. 65 % gegeben hat und nicht 60%.

Ja, die theoretische Umsetzung ist klar, mir ging es darum, was daran "leicht" für den TE sein soll. Ich unterstelle mal, dass er das nicht hinbekommt:

Mir ist weder bekannt wie man Sterne anklicken kann, als Bewertungsgrundlage und auch nicht wie man dies als Balkenbewertung auswählen könnte.

[phpStolzi]

Das geht nur mit Javascript und einem dazugehörigen AJAX handler.

Scripte die das nötige Javascript dazu liefern gibt es wie Sand am Meer.

[mermshaus]

kaminbausatz hat eine CSS-Lösung verlinkt.

[Günni]

Das will ich aber nicht mit Javaskript lösen. Da gabs neulich schon eine lange Diskussion hier über Javaskript. Es muss doch in PHP möglich sein....
Wie wird ein Balken in PHP realisiert?
Die Sterne sind ja nur "Zierde"... Könnte ja auch nur ein langer, grauer Balken sein, mit einer Wertung von 0-1000 als Beispiel...

Grauer Balken geht . . .

<?php
include('progressbar.class.php');
$votings = array(1,3,5,4,5,6,3,4,5,4,2,2,5,4,5,4); //Votings von 1 - 5
$avg = array_sum($votings)/count($votings)*10;
?>
<html>
<head>
<title></title>
</head>
<body>
<?php
$start = 0;
$ende = 100;
$laenge = 200;
$hoehe = 20;
$progress = "lightgray";
$bar = "gray";
$myprogressbar = new progressbar($start, $ende, $laenge, $hoehe, $progress, $bar);
$myprogressbar->print_code();
$myprogressbar->step($avg);
?>
</body>
</html>

Progressbar-Download -> http://fabi.me/scripts-codes/php-for.../#wpfb-file-51

Gruß
Günni

[Messier 1001]

Das ist relativ einfach.

Baue/besorge dir das Bild mit den 5 Sternen drauf. (z.B. in orange) Das speicherst Du dann noch mal parallel zum original nach graustufen konvertiert ab.

Das bild mit den orangen Sternen nimmst Du als Hintergrund für ein div element. In diesem platzierst Du ein 2. div dem Du als hintergrund die Graustufen Version zuweist

also z.B:

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <style type="text/css">
      #Rating {
         width: 500px;
         height: 117px;
         background: url(5stars.png) top left;
      }
      #Rating .overlay {
         width: 0;
         height: 117px;
         background: url(5stars-gray.png) top right;
      }
   </style>
</head>
<body>

<div id="Rating">
  <div class="overlay" style="width: 250px; margin-left: 250px;"></div>
</div>

</body>
</html>

Das einzige was Du dann auf PHP seite machen must:

ist die width + margin-left von PHP ausrechnen zu lassen. (Natürlich im Bezug auf die genutzte Bildbreite) Naja und das ist simple Mathematik.

das magin-left ist dann halt immer in meinem Fall die Bildbreite (500px) minus der berechneten Breite fürs Overlay (250px gerade)

So siehst mit den aktuell genutzten Werten aus.

[kaminbausatz]

Das ist relativ einfach.

Baue/besorge dir das Bild mit den 5 Sternen drauf. (z.B. in orange) Das speicherst Du dann noch mal parallel zum original nach graustufen konvertiert ab.

Das bild mit den orangen Sternen nimmst Du als Hintergrund für ein div element. In diesem platzierst Du ein 2. div dem Du als hintergrund die Graustufen Version zuweist

Ja, für die Darstellung mag das genügen - das Eingabethema ist damit aber nicht erledigt...

@Günni

wir sind in 2017 angelangt...

[Messier 1001]

Der Vollständigkeit halbe mit entsprechenden PHP-Code:

<?php

$rating        = 4.4;
$maxRating     = 5;
$pictureWidth  = 500;
$overlayWidth  = $pictureWidth - (int) ( ( $pictureWidth * $rating ) / $maxRating );
$overlayMargin = $pictureWidth - $overlayWidth;

?>
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <style type="text/css">
      #Rating {
         width: <?=$pictureWidth;?>px;
         height: 117px;
         background: url(5stars.png) top left;
      }
      #Rating .overlay {
         width: 0;
         height: 117px;
         background: url(5stars-gray.png) top right;
      }
   </style>
</head>
<body>

<div id="Rating">
   <div class="overlay" style="width: <?=$overlayWidth;?>px; margin-left: <?=$overlayMargin;?>px;"></div>
</div>

</body>
</html>