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

Mehrere Fragen nacheinander ausgeben

M

mirko22

Neues Mitglied
Hallo,
ich habe einige Fragen die nach und nach in PHP gestellt werden mit if abfragen und dann am Ende wird ein Ergebnis ausgegeben. Also jede Antwort hat eine Nr. Und diese werden zwischengespeichert. Also ganz simpel.
Was für mich aber gerade unklar ist, wie kann ich diese Fragen in HTML nach und nach ausgeben und den Zwischenstand immer speichern, damit ich die Gesamtzahl am ende ausgeben kann.
Muss ich hierfür ein mehrseitigen Formular erstellen und die Werte immer übergeben, oder gibt es eine einfachere und intelligenter Lösung?

Danke für eure Hilfe.
 
Werbung:
Es reicht ein Formular, dessen Inhalt als Variablen eingetragen wird. Wenn du es mit PHP machst, lassen sich die jeweilige und das Ergebnis per GET-Parameter übergeben. Auf Scriptseite könnet dann ein Switch-Case Konstrukt die Variablen mit den jeweiligen Fragen und Antworten befüllen. Oder du macht es mit JS und ersparst dir Seitenreload und Zwischenspeichern.
 
Werbung:
ok. ich habe was gefunden.
http://thecodeplayer.com/walkthrough/jquery-multi-step-form-with-progress-bar

nun werden die einzelnen Formularfelder einfach eingeschoben. Besteht die Möglichkeit auch dort schon Formularfelder von einer Seite davor auszulesen, weil einige Fragen haben andere Fragen zur folge. Bei php z.B. würde ich $_POST['frage'] z.B. schreiben und dann mit einer if Abfrage die passende nächste Frage einschieben. Geht das auch mit Javascript an dieser stelle?
 
Werbung:
Es gibt keinen Reload und demzufolge auch keine Seite davor. Mit modernem JavaScript kannst du prinzipiell dasselbe wie mit PHP machen. Das heißt, die Fragen und Antworten werden aus einer beliebigen Quelle bezogen und über Variablen im HTML gerendert. Anbei ein vereinfachtes Beispiel, das Fragen und Antworten aus einer Collection ($scope.content) im Controller bezieht und diese analog zum jeweiligen Wert der Scope Variablen count rendert. Beim Klick auf den Button wird der Counter um 1 erhöht und das Formular upgedatet. Falls du Fragen abhängig von zuvor gegebenen Antworten stellen willst, musst die Logik erweitern, bsw: Wenn auf Frage 1 die Antwort 2 gegeben wurde, dann fahre mit Frage 3 fort, ansonsten nimm Frage 4.
Code: 
    <!DOCTYPE html>
    <html>
    <head>
    <title>Document</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    </head>
    <body ng-app="app">
      <div class="container">
        <form ng-controller="AppController" ng-submit="proceed()">
          <div class="form-group">
            <h2>{{content[count].question}}</h2>
          </div>
          <div class="radio">
            <input type="radio" name="questions">
            {{content[count].answers[0]}}
          </div>
          <div class="radio">
            <input type="radio" name="questions">
            {{content[count].answers[1]}}
          </div>
          <button class="btn" type="submit">Nächste Frage</button>
        </form
      </div>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.1/angular.js"></script>
      <script>
        angular.module('app', [])
          .controller('AppController', ['$scope', function($scope){
            $scope.count = 0;
            $scope.content = [
              {'question': 'frage 1', 'answers': ['foo', 'bar']},
              {'question': 'frage 2', 'answers': ['blub', 'baz']},
              {'question': 'frage 3', 'answers': ['hello', 'world']}
            ];
            $scope.proceed = function() {
              $scope.count = $scope.count + 1;
            }
          }])
      </script>
    </body>
    </html>
 
Hier nochmal ein simples Beispiel für Logik. Anstatt den Counter immer um 1 zu erhöhen, wird mit der Funktion proceed(id) die id der Antwort übergeben. Was umgesetzt bedeutet: wenn auf eine Frage die erste Antwort gewählt wurde, nimm die nächste Frage, ansonsten die übernächste.

Code: 
    <!DOCTYPE html>
    <html>
    <head>
    <title>Document</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    </head>
    <body ng-app="app">
      <div class="container">
        <form ng-controller="AppController" ng-submit="proceed(id)">
          <div class="form-group">
            <h2>{{content[count].question}}</h2>
          </div>
          <div class="radio" ng-repeat="answer in content[count].answers track by $index">
            <input type="radio" name="id" ng-model="$parent.id" ng-value="answer.id">id {{answer.id}} : {{answer.val}}<br>
          </div>
          <button class="btn" type="submit">Nächste Frage</button>
        </form
      </div>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.1/angular.js"></script>
      <script>
        angular.module('app', [])
          .controller('AppController', ['$scope', function($scope){
            $scope.count = 0;
            $scope.content = [
              {'question': 'Erste Frage', 'answers': [{'id': 1, 'val': 'foo'},{'id': 2, 'val': 'bar'}]},
              {'question': 'Zweite Frage', 'answers': [{'id': 1,'val': 'blub'},{'id': 2, 'val': 'bleh'}]},
              {'question': 'Dritte Frage', 'answers': [{'id': 1,'val': 'hello'},{'id': 2, 'val': 'world'}]},
              {'question': 'Vierte Frage', 'answers': [{'id': 1, 'val': 'muh'},{'id': 2, 'val': 'meh'}]}
            ];
            $scope.proceed = function(id) {
              $scope.count = $scope.count + id;
            }
          }])
      </script>
    </body>
    </html>
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben