Mehrere Fragen werden nacheinander abgefragt, während parallel ein Video läuft

Question

Hallo,

ich würde gerne, dass man auf einer Seite eine Frage beantwortet, dann auf senden klickt, woraufhin man die nächste Frage automatisch bekommt. Dabei muss man aber immer auf der Seite bleiben, da parallel dazu ein Video abgespielt wird und dieses soll während der Beantwortung der Fragen immer weiter laufen.

Ist es möglich etwas in der Art zu programmieren?

Answer 1

Eine Möglichkeit könnte die Auswahlabfolge sein - damit ginge das relativ einfach.

Wenn es die Auswahlabfolge nicht tut, dann sehen Sie sich bitte einmal das hier an:
Musik über mehrere Seiten hinweg abspielen

Was mit Musik geht, ist prinzipiell auch mit einem Video möglich. Allerdings wird der Platz für das Video dann (ohne weiteres JavaScript) den ganzen Fragebogen über beansprucht werden, auch wenn das Video nur einen Teil der Seiten läuft.

Eine andere Lösung könnte auch darin bestehen, dass man die Fragen alle auf derselben Seite einbindet und dann per Java nacheinander einblendet. Aber dafür sollten Sie sich ein wenig mit JavaScript vertraut machen. Hier ein Einstieg: Fragen bei Auswahl einer bestimmten Option sofort einblenden.

Comments

Vielen Dank für die Antwort.

Ich habe bei meiner Frage leider vergessen anzugeben, dass die Fragen die nacheinander kommen sollen offene Texteingaben sind. Dementsprechend bräuchte ich einen zusätzlichen Senden Button, der aber nicht auf die nächste Seite weiter leitet, sondern nur die nächste Frage erscheinen lässt und das Video läuft unabhängig davon einfach weiter.

Den Eintrag über Musik über mehrere Seiten hinweg abspielen habe ich bereits gelesen, jedoch soll danach und davor der Platz nicht weiterhin für das Video beansprucht werden, sondern eben nur auf der einen Seite.

Bisher lasse ich als Notlösung die Fragen einzeln nacheinander ein- und ausblenden nach einer fest angegebenen Zeit. Das ist natürlich nicht ideal, da jeder eine offenen Frage unterschiedlich schnell beantwortet. Es soll aber immer nur eine Frage sichtbar sein, diese soll dann verschwinden und dafür erscheint dann die nächste.

---

Nun, wenn Sie mittels JavaScript bereits eine Zeit-Steuerung gebaut haben, dann sind das hervorragende Voraussetzungen, auch noch einen Knopf einzubauen.

Im Prinzip nüssen Sie nur nur einen Knopf ohne Funktion einfügen:

<button type="button" id="nextOne">Nächste Frage</button>

Und an diesen "hängen" sie ein "click"-Event, welcher sich um das "Umblättern" der Fragen kümmert.

Den "normalen" Weiter-Kopf können Sie derweil ausblenden:

SoSciTools.submitButtonsHide();

---

Nochmals vielen Dank für die Rückmeldung.

Ich bin leider ein kompletter HTML und JavaScript Laie und komme daher mit der Programmierung leider gar nicht weiter.

In der Zwischenzeit habe ich herausgefunden, dass ich mit SoSciTools.attachEvent(var, "click", function) den Button mit einer ganz einfachen Funktion wie das Aufrufen einer Frage verbinde.

Jedoch weiß ich nicht, wie ich es mache, dass der Button bei einem weiteren Klick die vorherige Frage ausblendet und eine neue einblendet.

Bisher habe nach einer gewissen Zeit abhängig vom abgespielten Video Fragen mit folgendem Code ausgeblendet (Einblendung mit gleichem Code, nur mit kleinen entsprechenden Anpassungen):
<script type="text/javascript">

var video = document.getElementById("stimulus");

SoSciTools.attachEvent(video, "play", function(evt) {

function fadeOut( elem, ms )
{
  if( ! elem )
    return;

  elem.style.opacity = 0;
  elem.style.filter = "alpha(opacity=0)";
  elem.style.display = "none";
  elem.style.visibility = "hidden";

  if( ms )
  {
    var opacity = 0;
    var timer = setInterval( function() {
      opacity += 50 / ms;
      if( opacity >= 1 )
      {
        clearInterval(timer);
        opacity = 1;
      }
      elem.style.opacity = opacity;
      elem.style.filter = "alpha(opacity=" + opacity * 100 + ")";
    }, 50 );
  }
  else
  {
    elem.style.opacity = 1;
    elem.style.filter = "alpha(opacity=1)";
  }
}
window.setTimeout(function() {
    var elem = document.getElementById("VD01_qst");
    fadeOut(elem, 1000);
}, 203000);
 
});
</script>

Diesen Code habe ich für jede Frage einzeln aufgelistet und die Zeiten entsprechend angepasst.


Mein weiteres Problem ist, dass auch immer zwei Fragen gleichzeitig erscheinen sollen. Das weiß ich auch wiederum nicht, wie und wo man das einbaut

Außerdem soll der Button erst sichtbar sein, wenn die erste Frage erscheint (diese erscheint nach einer festgelegten Zeit).

---

Tja, dann ist jetzt der perfekte Zeitpunkt, ein wenig in die JavaScript-Programmierung einzusteigen :)

Für's erste definieren Sie einmal eine Variable, die Sie anfangs mit dem Wert -1 belegen: `var frage = -1;`.

Diese Variable muss außerhalb der ganzen Funktionen stehen. In der Funktion, die beim Klick aufgerufen wird, zählen Sie die Variable immer um eins hoch. Dann legen Sie eine Liste (Array) an, in welcher die Kennungen Ihrer Fragen stehen. Mit der Variable `frage` und dem Array bekommen Sie nun immer die passende Kennung.

function buttonClicked()
  frage++;
  var fragen = [
    "VD01", "VD02", "VD03"
  ];
  var elem = document.getElementById(fragen[frage] + "_qst");
  fadeOut(elem, 1000);
}

Natürlich müssen Sie die vorige Frage vorher noch loswerden (ausbenden). Aber ich denke, damit haben Sie jetzt erstmal genug zu tun. Details dann gerne auf Nachfrage. Am besten in einer neuen Frage, sonst wird es hier unübersichtlich.