Umfragetool mit Javascript?
Hallo liebe Com,
ich bin Neuling beim Thema Javascript. Nun benötige ich mal einen Denkanstoß.
Ich möchte gerne ein Tool schreiben, dass auf einer Homepage eingebunden ist, mit dem Nutzer Auswahlen treffen können und je nachdem, was sie gewählt haben, zur nächsten Frage geleitet werden. Am Ende soll dem Nutzer dann eine Empfehlung ausgegeben werden.
Ein Beispiel:
Frage 1:
A: Ich mache regelmäßig Sport
B: Ich bin sportlicher Neuling
Frage 2B:
A: Weitere Frage
B: Weitere Frage
Frage 2B:
A: Weitere Frage
B: Weitere Frage
...
Endresultat:
Du bist für den Fortgeschrittenen-Kurs geeignet.
(optional: nach dem Endresultat direktes Formular zur Anmeldung zu diesem Kurs, sodass der Trainer auch direkt die ausgewählten Daten zu dem Teilnehmer geschickt bekommt, um ein Profil anzulegen.)
Wo fange ich da am besten an, und habt ihr vielleicht Verweise auf die ich zurückgreifen kann, um ich mir sowas zusammen zu bauen?
Vielen Dank euch!
3 Antworten
Es gibt bereits einige Tools wie SurveyMonkey, die man auch auf der eigenen Seite integrieren kann. Bevor du also das Rad neu erfindest, könntest du einmal schauen, was es so alles gibt und was sich auf deine Bedürfnisse anpassen ließe.
Für eine eigene Umsetzung könntest du (innerhalb eines form-Elements) einen Slider einbauen (FlexSlider, Slick, ...), bei dem jedoch der previous-Button zumindest im letzten Slide ausgeblendet wird. Nutze die Events, die solche Tools bereits zur Verfügung stellen (slide change u.ä.).
Wenn der letzte Slide erreicht wurde, bräuchtest du nur noch die JavaScript-Funktion ausführen, die das Ergebnis berechnet. Um die Werte aller Felder zu bekommen, iterierst du über die Slides. Wenn die Eingabefelder auf den Slides generisch aufgebaut sind (Bsp.: Es sind immer Radio Buttons mit einer ID wie question1, question2, question3, ...), geht es am einfachsten. Generell lassen sich in so einem Fall alle Slides auch dynamisch anlegen. Dazu hält ein Array alle Fragen und Antworten, welche in einem Objekt gebündelt werden.
Pseudocode:
class QuestionSlide:
string question
string[] possibleAnswers
Darüber iteriert man dann und baut sich die einzelnen Formularfelder zusammen:
for questionSlide in questionSlides:
print "<p>" + questionSlide.question + "</p>"
answerId = "answer" + currentQuestionIndex
for possibleAnswer in possibleAnswers:
currentAnswerId = answerId + "-" + currentPossbileAnswerIndex
print "<label for=\"" + currentAnswerId + "\"></label>"
print "<input id=\"" + currentAnswerId + "\" name=\"" + currentAnswerId + "\" type=\"radio\">
Dies sollte bestenfalls bereits serverseitig durchgeführt werden.
Wenn du noch ein Anmeldeformular dazu haben möchtest, dann lege die notwendigen Felder auf einem weiteren Slide an (vielleicht durch dynamisches Hinzufügen). Der Submit-Button sendet das Formular dann zum Server, wo die Daten verarbeitet werden. Für diese Verarbeitung benötigst du also noch eine serverseitige Anwendung.
Klasse. Danke für die ausführliche Antwort!! Werde nach deiner Anleitung mich mal dran versuchen, aber auch SurveyMonkey nochmal genauer ansehen. Hatte diese Tools immer nur für WordPress bedacht, deshalb kam ich selber nicht dadrauf.
Danke!
Da sollte neben Javascript noch eine Serverseitige Programmiersprache, z.B. PHP her. Mit JavaScript kannst du dann die Umfrage ohne Umleitung auf andere Seiten durchführen, auswerten und die Daten per XHR an PHP versenden und ggf. die Antwort auf der aktuellen Seite darstellen. Aber nun eins nach dem anderen.
am besten baust du dir erst die schnippsel als html
dann wrappst du alle um seperate DIVs und übst das ein und ausblenden dieser
später dann kannst du versuchen die formulare via JS selbst erstellen zu lassen.. das ist dann aber schon eher fortgeschritten.