Hallo,
Sorry, wollte dir schon lange Antworten, hatte es aber vergessen. Bei deinem Code steig ich nicht ganz durch, ich hab jetzt mal das so geschrieben wie ich mir denke das du es haben willst:
PHP:
<html>
<head>
<Script Language="JavaScript">
var layer = new Array('q1','q2','q3','q4'); // Reihenfolge muss stimmen
var history = new Array();
function start(){
for(var x=0; x<layer.length; x++){ //alle verstcken
document.getElementById(layer[x]).style.display = 'none';
}
document.getElementById(layer[0]).style.display = 'block'; //Element 1 Sichtbar
}
function next(current,next,dependance){
if(dependance==null){
document.getElementById(current).style.display = 'none';
history.push(current);
document.getElementById(next).style.display = 'block';
}else{
if(document.getElementsByName(dependance)[0].checked == true){
document.getElementById(current).style.display = 'none';
history.push(current);
document.getElementById(next).style.display = 'block';
}else{
document.getElementById(current).style.display = 'none';
history.push(current);
document.getElementById((document.getElementsByName(dependance)[1].value)).style.display = 'block';
}
}
}
function prev(){
var len = history.length;
for(var x=0; x<layer.length; x++){ //alle verstcken
document.getElementById(layer[x]).style.display = 'none';
}
document.getElementById(history[len-1]).style.display = 'block';
history.pop();
}
</script>
<style type=text/css>
.frage { position:absolute;
left:10px;
top:160px;
width:800px;
height:200px;
border:1px solid blue;
display:block;"
}
</style>
</head>
<body bgcolor="#efefef" onload="start()">
<form name="demo">
<div id="q1" class="frage">
<h1>Startpage</h1>
Ja <input name="f1" id="f1" type="radio" value="q2">
Nein <input name="f1" id="f1" type="radio" value="q3">
<a href="#" onClick="next('q1','q2','f1'); return false;">weiter zur nächsten Frage</a><br>
<a href="#" onClick="prev(); return false;">zurück zur letzten Frage</a><br>
</div>
<div id="q2" class="frage">
<h1>Level 1 - Ja</h1>
Some Info<input name="F2" type=text> <br>
Some Info 2<input name="F3" type=text> <br>
<a href="#" onClick="next('q2','q4'); return false;">weiter zur nächsten Frage</a><br>
<a href="#" onClick="prev(); return false;">zurück zur letzten Frage</a><br>
</div>
<div id="q3" class="frage">
<h1>Level 1 - Nein</h1>
Some Info<input name="F4" type=text> <br>
Some Info 2<input name="F5" type=text><br>
<a href="#" onClick="next('q3','q4'); return false;">weiter zur nächsten Frage</a><br>
<a href="#" onClick="prev(); return false;">zurück zur letzten Frage</a><br>
</div>
<div id="q4" class="frage">
<h1>Level 2 </h1>
<input type="submit">
<a href="#" onClick="prev(); return false;">zurück zur letzten Frage</a><br>
</div>
</form>
</body>
</html>
Ok, was haben wir:
1) Layer Array, hier stehen alles Layer drin, wird gebraucht um alle schnell ausblenden zu können.
2) Ein History Array - mit dem verwirklichen wir die "zurück" Funktion.
3) onLoad wird die Funktion "start()" aufgerufen - diese blendet alle Ebenen aus, bis auf die erste.
4) function next(current,next,dependance) - Diese Funktion erwartet, als Parameter die aktuelle Ebene, die Follgende Ebende und ein Objekt von dem die follgende Ebene abhängt (dieser Parameter darf leer sein). OK, hört sich erstmal komisch an, aber ich versuche es zu erklären:
Szenario 1:
Layer1 mit 2 RadioButtons (name=R1) zum unterscheiden. Falls der erste Radio aktiviert ist, wird zur Ebene Layer2 weitergeleitet, wenn der zweite Radio aktiviert ist zur Ebene Layer3. Der Aufruf der Funktion würde nun so aussehen: next('Layer1','Layer2','R1')
Szenario 2:
Layer1 hat keine Untercheidungsmerkmale, der nächste Layer ist auf jeden Fall Layer2. Der Aufruf sieht dann wie folgt aus: next('Layer1','Layer2')
verstanden
?
5) zu guter Letzt haben wir noch prev(). Die Funktion bekommt keine Parameter und sollte immer Funktionieren
. Bei jedem Aufruf von next() wird die Id der aktuellen Ebene in die History geschrieben. Beim Aufruf von prev wird zurück auf das Vorletzte Element gesprungen, und das letzte gelöscht...
Ok, das wars, das ganze ist ziemlich universell gehalten. Bei fragen einfach nochmal posten.
ciao Andreas
