• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Frage Skill Calculator erstellen

N

Nightythehawk

Neues Mitglied
Hallo HTML-Community,

ich spiele mit dem Gedanken für ein Game einen Skill Calculator zu erstellen vergleichbar mit dem von z.B. Diablo3 (Beispiellink: https://eu.battle.net/d3/de/calculator/barbarian).

Mein Gedanke war, dass ich eine Tabelle mit Dropdownfelder anlege, alle Informationen dort einpflege die zur Auswahl stehen und nach Auswahl der entsprechenden Felder würde ich die Daten aufbereiten via Script und daraus einen Link erzeugen lassen der x Tage bestehen bleibt.

Ist diese Vorgehensweise sinnvoll oder gehe ich das Thema falsch an?
PS: Eine Template gibt es nicht zufällig irgendwo? :D

Gruß Nighty
 
Werbung:
Für was für ein Spiel oder Seite soll das den werden ? Aber die Vorgehensweise würde ich auch so machen .Erstmal alle Daten sammeln die man brauch und dann den Besuchern die Auswahl mit <select> Menüs vereinfachern. Dann aus allen Angaben ,dein Link ,oder was auch immer zusammen stellen und verarbeiten.
 
Hallo Basti,

ja, so habe ich jetzt begonnen:

<select name="Modul 1">
<option value="DM">Auswahl 1</option>
<option value="RET">Auswahl 2</option>
<option value="AS">Auswahl 3</option>
<option value="NS">Auswahl 4</option>
</select>

Abhängig von den Auswahlmöglichkeiten soll jetzt eine weitere Dropdown-Menü erscheinen mit anderen Werten.
Macht man da einfach eine IF Abfrage auf den value?
 
Werbung:
Das müsste auch mit purem CSS gehen. Allgemein würde ich da noch ein wenig was ändern wollen, wenn du es so machen willst wie in deinem Link von Diablo.
Ich würde mal eben was fertig machen (dauert ein wenig) und das dann hier posten.
Wenn es nicht in deinem Sinne ist und du da was anderes haben möchtest, sag bescheid.
 
Selectmenüs mit Puren Css. Also ist Antwort A gleich B dann soll Auswahl C kommen mit anderen Fragen? Das kann je nach Anzahl der Fragen ganz schön verschachtelt werden. Gut mit Css scheint es wohl doch zu gehen ,aber ist nicht meine Baustelle heute.Heute klappt nix beim mir,muss heute wohl ein Blackout haben . Aber @Aaron3219 wird dir schon was schönes Zaubern.Der kann das auch besser als ich.
 
@basti1012 nicht immer so negativ ;). Übung macht den Meister.
Also hier ist eine Version ohne Javascript, die dem Schema deiner Beispielseite entspricht.
Sie funktioniert einwandfrei. Doch ich rate dir dennoch dazu, einen kleinen Teil in Javascript zu machen, nämlich die Klick-Events.
Mache am besten diesen Teil in Javascript:
Code: 
input[name='ebene1']:checked + div.ebene2  {
  display: block;
}

.first, .second, .third, .fourth {
  display: none;
}

input[name^='ebene2']:nth-child(2):checked ~ .first {
  display: block;
}

input[name^='ebene2']:nth-child(3):checked ~ .second {
  display: block;
}

input[name^='ebene2']:nth-child(4):checked ~ .third {
  display: block;
}

input[name^='ebene2']:nth-child(5):checked ~ .fourth {
  display: block;
}

input[name^='ebene2']:checked ~ .ausblenden {
  display: none;
}
Setze außerdem die Auswahl-Container außerhalb ihrer aktuellen Mutterelemente hin, sodass du die position absolute oben fixiert hast und sie nicht an die höhe ihres aktuellen Containers gebunden sind. Mein Beispiel dient eigentlich dazu, dir einen Denkanstoß zu geben, wie es geht und soll mal zeigen, wie viel auch ohne Javascript möglich ist.

Falls du es doch mit select-Menüs haben willst, solltest du nun damit gut klarkommen, es ist nämlich überhaupt nicht schwer und du kannst mit der Select-Variante sogar wirklich komplett auf Javascript verzichten. Als kleiner Tipp: schau dir die ":selected"-Pseudo-Klasse an!

So, hier der Link:
https://jsfiddle.net/Aaron3219/rnrq4Lxa/1/

Edit:
Für das speichern der Daten, weil du sie ja sonst immer neu eingeben musst, wirst du dann wohl PHP und eine Datenbank brauchen.
 
Zuletzt bearbeitet:
Werbung:
Hallo Aaron & Basti,
vielen Dank für die Antworten und den Aufwand!

Der D3 Clac war leider nur ein Beispiel um sich unter den Begriff etwas vorzustellen, aktuell wird ein so sehr verschachtelte Übersicht garnicht benötigt!

Um für etwas mehr Klarheit zu sorgen hier ein grober Aufbau:

- Zuerst Auswahl einer von 5 Klassen (in dem Fall kann es ein Dropdownmenü oder Checkboxen sein).
- Anhand der Auswahl der Klasse werden sollen 4 neue Dropdownmenüs erscheinen (für jede Klasse jeweils 4) und darunter nochmal 4 Dropdownmenüs die aber bei jeder Klasse gleich sind.
- Nach Eingabe aller Daten soll durch Bestätigung des Buttons ein Script angestoßen werden, das die eingegeben Menüs verarbeitet und ein Bild daraus erstellt mit einem random generierten Namen der auf einen FTP abgelegt wird und für x Tage bestehen bleibt (das Script habe ich soweit schon fertig und funktioniert lediglich bei HTML habe ich Probleme.

Ich hoffe die Erklärung war einigermaßen verständlich!
Es ist sehr nett von dir mir schon einen fertigen Code zu erstellen, allerdings habe ich ehrlich gesagt nur Bahnhof verstanden. Ich nutze Wordpress in der aktuellsten Version.

Gruß Nighty


EDIT:

Derzeit versuche ich anhand deines Code-Beispiels die Radiobutton auf der zweiten Ebene gegen ein Dropdown-Menü zu ersetzen aber ich habe noch Probleme den Bezug zu den Textbereichen herzustellen...

<div class="main">
<div>
<div>
<input type="radio" name="ebene1">Auswahl 1
<div class="ebene2">
<h1>Auswahl 1</h1>
<select>
<option name="ebene2">Auswahl 1</option>
<option name="ebene2">Auswahl 2</option>
<option name="ebene2">Auswahl 3</option>
<option name="ebene2">Auswahl 4</option>
</select>

<div class="first">
<br>Content, wenn Auswahl 1 getroffen wurde. Hier können Bilder usw. hin!
</div>
...........
 
Zuletzt bearbeitet:
Nightythehawk schrieb:
Derzeit versuche ich anhand deines Code-Beispiels die Radiobutton auf der zweiten Ebene gegen ein Dropdown-Menü zu ersetzen aber ich habe noch Probleme den Bezug zu den Textbereichen herzustellen...

<div class="main">
<div>
<div>
<input type="radio" name="ebene1">Auswahl 1
<div class="ebene2">
<h1>Auswahl 1</h1>
<select>
<option name="ebene2">Auswahl 1</option>
<option name="ebene2">Auswahl 2</option>
<option name="ebene2">Auswahl 3</option>
<option name="ebene2">Auswahl 4</option>
</select>
Zum Vergrößern anklicken....
Mit selects und deinem Vorhaben tendiere ich dann eher zu Javascript, beziehungsweise JQuery (vanilla Javascript ist immer ein bisschen umständlich).
Nun eine Frage:
Inwiefern kennst du dich bereits mit JQuery oder vanilla (<--normal) Javascript aus?
Nur, damit ich abmessen kann, wie ausführlich ich werden muss.
 
Werbung:
Mit Javascript hatte ich bis jetzt sehr wenige zutun daher sehr schlecht.
Eigentlich nur HTML Basics und ein wenig CSS.

Hatte jetzt nochmal mit dem Code von dir herumgespielt und in verschachtelte Auswahl die Dropdowns gepackt.
So würde es für mich funktionieren da ich für jede Auswahl eigene Dropdowns auswählen kann.
Beispiel:

<div class="main">
<div>
<div>
<input type="radio" name="ebene1">Auswahl 1
<div class="ebene2">
<h1>Auswahl 1</h1>
<input type="radio" name="ebene2">Auswahl 1
<input type="radio" name="ebene2">Auswahl 2
<input type="radio" name="ebene2">Auswahl 3
<input type="radio" name="ebene2">Auswahl 4

<div class="first">
<select name="OB1">
<option value="DM" label="DM"> DM.</option>
<option value="AS" label="AS"> AS.</option>
<option value="AD" label="AD"> AD.</option>
</select>

<select name="OB2">
<option value="DM" label="DM"> DM.</option>
<option value="AS" label="AS"> AS.</option>
<option value="AD" label="AD"> AD.</option>
</select>
.......

So könnte ich bei div class "first" 2x 4 Dropdown Menüs reinpacken die sich von div class "second" unterscheiden.

Problem wäre nur wie ich die ausgewählten Werte aus den Dropdownmenüs via Button an ein Bashscript weiterschicke (mit dem ich Anhand der Werte das Bild erstelle und den Bildlink dann wieder an das Formular zurückgebe).
 
Ich habe ml etwas rumgefummelt

Ist aber nur eine Auswahl. Aber man kann das ja so ewig weiter programmieren . Mit so vielen Selectmenüs wie man das brauch.

Mein Script nicht so ernst nehmen, ich übe noch.

Nightythehawk schrieb:
Problem wäre nur wie ich die ausgewählten Werte aus den Dropdownmenüs via Button an ein Bashscript weiterschicke (mit dem ich Anhand der Werte das Bild erstelle und den Bildlink dann wieder an das Formular zurückgebe).
Zum Vergrößern anklicken....

Da sehe ich eigentlich kein Problem. Du siehst ja bei mein Script wenn man auf Senden klickt wird die Auswahl angezeigt. Oder was meinst du genau damit?
 
Zuletzt bearbeitet:
ich habe hier nochmal ohne css ein Beispiel erstellt wo man den Aufbau besser nachvollziehen kann (siehe Bild unten)

Wichtig! Hier fehlt noch die Vorauswahl! Das wäre die Ansicht des zweiten Schrittes, im ersten Schritt würde man die Klasse auswählen wodurch die Inhalte der Dropdownmenüs M1-M4 sich ändern (OB1-OB4 ist bei jeder Klasse gleich).
Die ausgefüllten Felder müsste ich dann irgendwie an ein Bashscript weiterleiten können womit im Hintergrund dann automatisch vom Server eine Grafik erstellt wird.

Bild Beispiel:
eqip9Ds.png
 
Werbung:
Du meinst das doch eigentlich wie bei mir im Script ,"Autos" ist da die erste klasse. Gehst du auf Opel.Ford,oder Vw,wir jeweils ein neues Selectmenü angezeigt mit jeweils anderen Inhalt. Also willst du das eigentlich so haben ,aber statt nur ein Auswahl Menü sollen dann 4 kommen die jeweils einen anderen Inhalt haben. Ich bin heute wieder schwer von kapie
 
Also hier ist meine Variante:
https://jsfiddle.net/Aaron3219/50wcrfpm/4/
Evtl. entspricht sie nicht dem Design, das du haben willst, dass ist aber irrelevant.

Deine Aufgabe:
Im Prinzip musst du nichts mehr machen, außer deine Sachen so zu gestalten, dass sie deinem Geschmack entsprechen.

Mein Script bewirkt, dass ALLE value Attribute aus sämtlichen inputs und options innerhalb eines Containers, der class="main" besitzt, holt. Die können jetzt in ein Array gelesen werden und an dein Bash Script übergeben werden. Das ersetzt den Großteil von @basti1012 's Script.

Was genau an das Bash Script übergeben werden soll, wird aus dem value Attribut entnommen.

Edit:
Du kannst jetzt also alles gestalten, rumprobieren, usw.
Solange die inputs in dem Hauptcontainer mit der Klasse "main" sind, werden die Values entnommen.
 
Werbung:
Aaron3219 schrieb:
Also hier ist meine Variante:
https://jsfiddle.net/Aaron3219/50wcrfpm/4/
Evtl. entspricht sie nicht dem Design, das du haben willst, dass ist aber irrelevant.

Deine Aufgabe:
Im Prinzip musst du nichts mehr machen, außer deine Sachen so zu gestalten, dass sie deinem Geschmack entsprechen.
Zum Vergrößern anklicken....

Mein Problem ist gerade zu verstehen wie das Script überhaupt funktioniert, daher fällt es mir schwer "einfach" es so zu gestalten wie ichs brauch. Ist genauso wie vorher mit dem, für mich noch sehr komplexen, CSS Code.

Im CSS code deines aktuellen Beispiels steht drin "display: none," ok damit wird "ebene2" ausgeblendet aber wodurch wird die ebene2 sichtbar gemacht?! Passiert das durch den HTML Code weil die Seite die einzelnen divs nacheinander durchgeht?! Oder passiert das im JS-Code.

Ich würde erstmal versuchen den JS-Code zu verstehen, korrigiere mich bitte wenn ich falsch liege.

JS-Code Zeile 1-3 wird die ebene2 aufgedeckt solange der value der Optionen nicht no ist.
Zeile 4 wird die CSS ebene2 von display: none; auf block gestellt, daher sichtbar gemacht?!
Zeile 6-10 ist denke ich mal die Sammlung der values und Speicherung in ein Array?!
Zeile 13 übergibt die Daten dann nehme ich an?

Durch den Code würde jetzt das Dropdownmenü "Gleiches Dropdown wie überall" erscheinen aber wenn ich jetzt noch ein zusätzliches Dropdownmenü darunter setzten möchte, welches in Abhängigkeit mit dem Dropdown aus ebene1 unterschiedliche Einträge anzeigt reicht es nicht nur den HTML Code anzupassen oder?
Muss ich dann für alle 5 Auswahlmöglichkeiten in ebene1 weitere Ebenen im CSS angeben oder muss ich das im JS-Code hinterlegen?!

Berücksichtige bitte das ich wie gesagt nur billige basics in HTML und JS Scripte noch nie selber entwickelt sondern bis jetzt immer nur verwendet habe.
 
Nightythehawk schrieb:
Ich würde erstmal versuchen den JS-Code zu verstehen, korrigiere mich bitte wenn ich falsch liege.

JS-Code Zeile 1-3 wird die ebene2 aufgedeckt solange der value der Optionen nicht no ist.
Zeile 4 wird die CSS ebene2 von display: none; auf block gestellt, daher sichtbar gemacht?!
Zeile 6-10 ist denke ich mal die Sammlung der values und Speicherung in ein Array?!
Zeile 13 übergibt die Daten dann nehme ich an?
Zum Vergrößern anklicken....
Dazu kann ich nur sagen "gut gemacht" du hast es soweit verstanden.
Und das Script erweitern ist auch nicht so schwer.Soll noch ein Menü auftauchen wenn du auf ebene 1 was aussuchen tust.So das du dann 2 Menüs hast? Oder soll wenn du auch Ebene1 was bestimmtes aussuchst dann erst ein anderes Menü auftauchen wie Ebene 2a oder so .Vieleicht solltest du mal sowas wie ein Stammbaum zeichen was passieren soll wenn man was an klickt. Währe für mich einfacher. Denke aber das Aaron dich besser versteht als ich ,ich habe ab und zu einen hänger. ( im Kopf ):)
 
Hallo Basti,

wie gesagt, auf Ebene 1 werden die Klassen ausgewählt. Anhand dieser Auswahl ändern sich die Inhalte der Dropdown-Menüs M1-M4 die Menüs OB1-OB4 sind bei allen 5 Klassen, die auf Ebene 1 ausgewählt wurden gleich.

Die Auswahl ist jetzt erstmal nicht wichtig, ich habe es jetzt erstmal nur für eine Klasse erstellt (zur Not kann ich einfach noch eine Übersichtseite für die 5 Klassen erstellen die dann per Klick auf die Klasse einfach auf eine weitere Seite weiterleitet auf der nur die spezielle Klasse behandelt wird. So wird es evtl etwas übersichtlicher vom Code her).

Im nächsten Schritt versuche ich die Values über ein PHP Script an ein Bashscript weiterzuleiten.

In dem Script von Aaron steht beim Button:

<button class="submitb">
Klick mich!
</button>

JS-Code:

$(".submitb").click(function() {
var arr = $('.main input:checked, .main input:selected, .main option:selected, .main input').map(function() {
var val = this.value + ', ';
return val;
}).get();
$("p").html(arr);
});

verstehe ich das richtig, dass bei $("p").html(arr); das Array an eine HTML Seite weitergeben wird? Wenn ja kann ich daraus einfach eine php-Datei machen in der ich die Variablen deklariere und an ein Shellscript übergebe mit exec?
 
Werbung:
Code: 
$("p").html(arr);
Gibt die eingegebenen Werte aus den Menüs in Html aus.Du kannst statt dessen auch

Code: 
alert(arr)

schreiben ,dann werden die eingegebene Werte aus den Menüs von vorher als Alert angezeigt. Was du mit den Daten dann machst,das musst du dann wissen . In sachen Php und exec und so habe ich keine ahnung von.Aber was du als Alert anzeigen kannst ,kann man auch weiter mit arbeiten.Wie man das weiter versendet in andern Sprachen da wird die wohl Aaron bei helfen,weil davon habe ich überhaupt keine ahnung.Aber ist machbar ,das kann ich dir sagen
 
also wenn ich im JS-Code einfach $("p")alert(arr); oder alert(arr); eingebe passiert leider garnichts wenn ich auf den Button klicke hm...
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben