Gamification - Motivationstool

[hase]

Hallöchen,

mir schwirrt etwas im Kopf herum, aber ich bin nicht sicher, ob man das mit PHP alleine umsetzen kann oder ob ich noch vielleicht andere Sprachen brauche.

Ich will mir ein kleines "Motivationstool" basteln. Da ich mit Super Nintendo und Game Boy aufgewachsen bin, ist mein Gehirn auf solche Reize eingestellt.

Ist es möglich mit PHP und/oder mit anderen Sprachen sowas wie das Folgende zu basteln? Ein "Lebensbalken", der sich zu x% füllt, wobei x den Bruchteil von den heute erworbenen XP zu den XP, die für das Lvl Up benötigt werden, ist.

Also Lvl Up nach Lvl 5, 250 XP. Dann ist x, wenn ich heute 10 XP erworben habe, 10/250.

Ich würde das gerne so machen mit einem Formular. Gibt's verschiedene Aufgaben oder Quests wie

"Sei freundlich"
[Eingabefeld]

"Sei hilfsbereit"
[Eingabefeld]

Was weiss ich. Und dann kann ich eingeben, dass ich das geschafft habe und er rechnet mir, entsprechend wie in einer MySQL Datenbank eingegeben, die XP dazu und rechnet sie mir fortlaufend an auf ein Konto.

Ist das möglich? Geht mir vorallem um den visuellen Part!

Danke im Voraus

[mermshaus]

Du suchst vermutlich HTML und CSS?

PHP kannst du dann nutzen, um den HTML-Code dynamisch zu generieren.

[hase]

Achso, dann hab ich zu weit gesucht.

Ist so ein sich bei Eingabe auffüllender Erfahrungsbalken sehr schwierig umzusetzen für einen Anfänger? Ich denke, der schwierige Teil wird dann vor allem das Anrechnen von XP zu einem bestehenden Konto und dann dessen Ausgabe, oder liege ich da falsch?

[TessaKavanagh]

Wenn der Balken sich nicht "live" Füllen soll ist es eigentlich ziemlich Simpel.

Wenn also das Schema Nutzer bekommt Balken mit 50% angezeigt -> Speichert seine täglichen Erfolge -> Bekommt Balken mit 75% angezeigt und das ohne fließende Animation dazwischen, dann dürfte das mit relativ simplem Code machbar sein.

[hase]

Ne ne, der Balken muss sich nicht live füllen. (Rein aus Neugierde: Wenn er sich live füllen sollte, käme dann noch eine zusätzliche Sprache ins Spiel oder wäre das mit denselben möglich? Hab im Kopf, dass JSON für "direkte Aktualisierungen" zuständig ist, stimmt das?)

Wie gehe ich da am besten vor? Ich will keinen Code, nur die Vorgehensweise wäre toll, bin grade bisschen überfordert. =)

[Skaduro]

Nimm eine Div mit X unter-Divs und beim Ausfüllen änderst du die Farbe einer Unter-Div, bis alle Unter-Divs gefüllt sind für 100 %. Das kannst du dann einfach mit Javascript realisieren, ohne JS-Bibliotheken.
Grüße Skaduro

[hase]

Das ist ein sehr guter Ansatz!

[TessaKavanagh]

Im Prinzip nutzt man dafür Javascript aber ich überlege grade ob das mittlerweile nicht sogar mit CSS 3 möglich ist indem man einen CSS Code dynamisch generiert, denn CSS3 bietet ja Animationen an. Im Prinzip müsste sich eine entsprechende Animation also so sogar umsetzen lassen.

ein Prinzip in PHP wäre z.B.:

1. du legst eine Nutzer Tabelle an. Neben den Login Informationen speicherst du dort auch die Erfahrungspunkte des Nutzers als (int).

2. du legst eine Erfolgstabelle Aufgaben Tabelle an. Dort speicherst du die zu lösenden Aufgaben und XP die es dafür gibt.

3. du legst eine Stufen Tabelle an. Also welchen Rang du bei wie viel XP erreichst.

Der eigentliche Erfahrungsbalken besteht dann in Wirklichkeit aus 2 übereinander gelegten Balken.

Balken_1 der eigentliche Erfahrungsbalken z.B. ein gefärbter div Container den du dann per CSS animieren kannst.

Balken_2 ist im Prinzip nur eine Bilddatei mit einem durchsichtigen Alpha Kanal in der Mitte und einer Umrandung mit Strichen für die Prozentuale Einteilung des Balkens.
(lässt sich theoretisch auch durch CSS formatierte Elemente erstellen)

Dann brauchst du eine Berechnung nach dem Schema:

Dann Vergleichst du die für ein LvL benötigten XP lt. Datenbank mit den Nutzer XP und suchst dir den Eintrag aus der Datenbank bei dem gilt:
XP DB > Nutzer XP (Sortierung ASC , LIMIT 1),
das aktuelle Nutzer LvL ist dann XP DB (ID -1),
die noch benötigten XP zum nächsten LvL sind XP DB - XP Nutzer,
die insgesamt benötigten XP zwischen aktuellem und nächstem Level sind XP DB - XP DB (ID -1),

Hieraus folgt das:
(((XP DB - XP DB(ID-1))-(XP DB + XP Nutzer))/(XP DB - XP DB(ID-1))) * 100 = Geschaffte Prozent des aktuellen LvL

Mit der Angabe definierst du dann die Position von Balken_1 das dieser bei 30% der Gesamtdistanz "Endet". Speicherst du dann neue XP in die Datenbank verschiebt sich der Balken auf die neue "Endposition" z.B. 50%

und bevor du fragst ja den Großteil der Klammern brauchst du nicht die dienen nur der Übersicht der Vorteil wäre hier das du es relativ definieren kannst und du somit die Breite skalieren kannst. Außerdem bist du nicht auf 1% Schritte festgelegt sondern kannst auch 1,3785% Anzeigen

[SylarBo]

Ich bin mir nicht ganz sicher, gibts es nicht bei bekannten Frameworks bereits "fertige" Progressbars, die man nur noch mit Informationen "füttern" muss ?

Ich meine Bootstrap oder Foundation (hab ich es richtig geschrieben?) haben Progressbars?

Sonst auch jQueryUI. So kann man (Eigene Meinung: ganz einfach) Progressbars umsetzten ..


Gruß

[TessaKavanagh]

Viele Wege führen nach Rom

Also Pseudocode mäßig wäre so etwas möglich, müsste man dann halt noch vernünftig grafisch gestalten und an eine Datenbank koppeln :

<?php


$xp_db = array(500,1500,3500); // Definiert die unterschiedlichen LvL
$user_xp = 800; // Aktuelle User XP einfach ändern um Balken zu Verschieben

$progress = (($xp_db[1]-$xp_db[0]-$xp_db[1]+$user_xp)/($xp_db[1]-$xp_db[0]))*100;



echo "<style type='text/css'>#xp_1 { width:50%; height:25px; border-width:2px; border-style:solid; }#xp_2 { width:".$progress."%; height:25px; position:relative; left:0px; background-color:#000; }</style>";

echo "<div id='xp_1'><div id='xp_2'></div></div>";// Eigentliche Fortschrittsbalken




?>

[lottikarotti]

Hallöchen,

so einen kleinen Fortschrittsbalken hat man mit ein paar Grundlagen doch schnell zusammengeschustert:

- Fortschrittsbalken (AngularJS / Bootstrap)

Da du aber vermutlich noch ein wenig Logik reinpacken möchtest, kann ich dir nur nahelegen, dich mit den Basics von PHP, HTML, CSS und JavaScript auseinanderzusetzen.

---

Also Pseudocode mäßig wäre so etwas möglich, müsste man dann halt noch vernünftig grafisch gestalten und an eine Datenbank koppeln :

<?php

$xp_db = array(500,1500,3500); // Definiert die unterschiedlichen LvL
$user_xp = 800; // Aktuelle User XP einfach ändern um Balken zu Verschieben

$progress = (($xp_db[1]-$xp_db[0]-$xp_db[1]+$user_xp)/($xp_db[1]-$xp_db[0]))*100;



echo "<style type='text/css'>#xp_1 { width:50%; height:25px; border-width:2px; border-style:solid; }#xp_2 { width:".$progress."%; height:25px; position:relative; left:0px; background-color:#000; }</style>";

echo "<div id='xp_1'><div id='xp_2'></div></div>";// Eigentliche Fortschrittsbalken

Wieso packt man den HTML-Code krampfhaft in ein echo, wenn doch 99% der Zeile aus HTML besteht. Für die Umsetzung im Front-End würde ich PHP ganz aus dem Spiel lassen und auf JavaScript setzen.

Viele Grüße,
lotti

[TessaKavanagh]

Du kannst ja mal den Test machen ob es aus Performance Sicht bei der Text länge sinnvoll ist den PHP Tag zu schließen und JavaScript ist und bleibt ein zweischneidiges Schwert. Ich habe genug Leute im engeren Bekanntenkreis die JS deaktiviert haben. Mann sperrt halt doch einige Leute aus.

Der Unterschied in der Scriptlaufzeit liegt im übrigen bei ca. 0,00001 Sekunde. (Aufgerundet)

[lottikarotti]

Hallöchen,

Du kannst ja mal den Test machen ob es aus Performance Sicht bei der Text länge sinnvoll ist den PHP Tag zu schließen und JavaScript ist und bleibt ein zweischneidiges Schwert.

Mir geht es dabei nicht um die Performance, sondern darum, dass die Schreibweise umständlich und schlecht lesbar ist. Selbst das kleine Stück Code von dir ist auf die Schnelle mit dem Auge grottenschlecht zu erfassen. Gerade als Code-Beispiel für Anfänger finde ich das absolut ungeeignet.

Ich habe genug Leute im engeren Bekanntenkreis die JS deaktiviert haben. Mann sperrt halt doch einige Leute aus.

a) ist dein Bekanntenkreis nicht repräsentativ oder gar relevant für die Entscheidung JavaScript only oder nicht und b) hängt das doch ganz von der Anwendung und der Zielgruppe ab. Ich für meinen Teil würde heutzutage keine komplexe Web-App mehr ohne JavaScript entwickeln wollen. Ich kenne bspw. auch niemanden der JavaScript auf seinem Mobil-Geräte manuell deaktiviert hat. Und auch für das Deaktivieren im Browser gibt es imho keine sinnvollen Gründe mehr.

Der Unterschied in der Scriptlaufzeit liegt im übrigen bei ca. 0,00001 Sekunde. (Aufgerundet)

Wie gesagt: der Performance-Unterschied ist latte.

Viele Grüße,
lotti

[TessaKavanagh]

JavaScript zur besseren UE gerne, aber trotzdem darf JS m.E. keine Bedingung zur Nutzung des Angebotes sein. Es muss also immer eine Absicherung geben das es auch eine Anzeigevariante gibt die ohne JS läuft.

Es sind ja nicht nur Menschen betroffen die JS Deaktiviert haben sondern je nach Implementierung auch z.B sehbehinderte Personen die dann schon einmal vollständig ausgegrenzt werden.

Ich bin der Meinung man sollte i.R.d. darauf achten das der Zugang zur eigenen Website möglichst Barrierefrei gehalten wird.

[Zeichen32]

In HTML5 gibt es doch auch ein Progress Bar Element, ich habe es selber noch nicht benutzt,
aber es sollte in allen aktuellen Browsern unterstützt werden.

Hier auf die schnelle auch ein Tutorial welches ich gefunden habe:
http://www.hongkiat.com/blog/html5-progress-bar/