Simple Wizzard-Demo

Testen Sie den rechts dargestellten Dialog.

Dessen Grundlage ist HTML-Code in Form einer unsortierten Liste. Die Slides lassen sich damit einfach und ohne Programmierkenntnisse von Javascript-Arrays etc. leicht erweitern.
Sie sehen zu diesem Demo gehörende Liste weiter unten. Auf einer echten Webseite würde man diese natürlich mit CSS (style="display: none;") unsichtbar machen.

Jeder LI Eintrag wird als je ein Slide dargestellt, wobei der Inhalt mit Hilfe des Pipe-Zeichens in eine Überschrift und in den anzuzeigenden Text geteilt wird.
Antworten ergeben sich aus den "Überschriften" der jeweils 1 Ebene tiefer verschachtelten LI-Elemente.
In den einzelnen Slides kann HTML-Code verwendet werden - somit sind beispielsweise auch Bilder möglich.

Schluss ist, wenn die tiefste Verschachtelung erreicht wurde.

s. http://www.axel-hahn.de/axel/page_compi/js_wizzard.htm

• Willkommen|Dies ist ein Demo in Form einer elektronischen Getränkekarte.
  Was möchten Sie gern trinken?
  • Etwas Warmes|Welches warme Getränk darf es sein?
    • Kaffee|Wie möchten Sie Ihren Kaffee?
      • schwarz|Der Kaffee schwarz kommt in Kürze.
      • mit Milch|Ich melke noch schnell die Kuh, der Kaffe ist gleich da.
      • mit Milch und Zucker|Gern. Kaffee, Rohrzucker, Rahm kommen sofort.
    • Tee|Tee, sehr gern. Zucker? Zitrone?
      • einfach|Der Tee kommt sofort.
      • mit Zucker|Der Tee mit Zucker kommt sofort.
      • mit Zitrone und Zucker|Der Tee mit Zitrone und Zucker kommt sofort.
  • Etwas Kaltes|Was darf es sein?
    • ein alkolfreies Getränk|Wir haben:
      • Mineralwasser|Das Wasser kommt sofort.
      • Cola|Die Cola kommt sofort.
      • Limo|Die Limonade kommt sofort.
      • Eistee|Der Eistee kommt sofort.
    • etwas Alkolisches|Wir haben heute
      • Pils|Das Pils kommt sofort
      • Weizenbier|Das Hefeweizen kommt sofort.
      • Maibock|Das Bockbier kommt sofort.
      • Weisswein|Der Weisswein des lokalen Winzers kommt sofort.