Multimediakurs Leinfelder: Beispiel zu Modul 7 "JavaScript in Handarbeit"
(© copyright)     Letzte Änderungen:03.04.2003

Code-Erläuterung des JavaScript-Beispieles:
Fragebogenbasierter Aufruf von html-Seiten

Hinweis:Dieser gescriptete Fragebogen wird in unserem Quereinstieg zum Kurs verwendet. Zur Erklärung irrelevante Teile wurden aus dem Code entfernt. Erklärende Teile in Rot

<html>
<head>
<title>Multimediakurs Leinfelder: fragenbasierter Einstieg</title>
<script type="text/javascript" language="JavaScript"><!--

//Script by Reinhold Leinfelder, part of www.palaeo.de/multimediakurs. May be used freely, if this line is maintained.

/* nachfolgend werden vier Variablen für die vier Grundkategorien des Formulars definiert, sowie die variable url, die wir für den späteren Seitenaufruf verwenden. Diese Variablen sind global angelegt, damit sie auch ohne Aufruf einer Funktion verwendet werden können. Danach werden den vier Variablen die im Formular voreingestellten Ausgangswerte zugeordnet (vgl. mit Body-Teil). */

var costs, kind, knowhow, timeavail, url;
costs="1";
timeavail="2";
kind="3";
knowhow="1";

/* nachfolgende Funktion benötigen wir nur, da wir ein kleineres Fenster ohne Statusleiste etc. verwenden wollen, in der die auszugebenden html-Dokumente erscheinen sollen. Man könnte das Skript vereinfachen, indem man diese Funktion weg lässt. Der Funktion soll die Variable url übergeben werden, wenn sie aufgerufen wird. Dann wird ein Fenster mit Toolbar, ohne location bar etc. aufgerufen, welches die Größe 600 x 600 px hat. Da NN die Tendenz hat, dieses Fenster hinter dem Hauptfenster zu verstecken, bewegen wir es noch auf die Position 20 / 20 pixel von der linken oberen Ecke. Außerdem lassen wir es noch durch die methode focus in den Vordergrund stellen, was aber bei NN nicht unbedingt wirkt. */

function openmovie(url) {
moviewin = window.open(url,"movie",'toolbar=1,location=0,directories=0,status=0,menubar=0,
scrollbars=1,resizable=1, width=600,height=600');
moviewin.moveTo(20,20);
moviewin.focus();
}

/* nun kommt unser Ausleseskript. Es testet die Werte der oben definierten vier Grundvariablen (die sich bis zum Aufruf der Funktion sicherlich geändert haben, sofern der Nutzer die Vorauswahl auf dem Formular geändert hat. Mit if-Abfragen, die Bedingungen mit und bzw. oder kombinieren, wird ausgelesen. Ist die Bedingung nicht erfüllt, geht es zur nächsten if-Abfrage, bis eine Bedingung erfüllt ist. Dann wird die Funktion openmovie als Methode aufgerufen und dabei der gewünschte relative Link als variablenwert für die Variable URL übergeben. Die weitere Abarbeitung des Scripts wird gleichzeitig durch return unterbrochen.*/

function malsehen()
{

if (costs == "2" && timeavail == "2" && kind == "1" && ( knowhow =="4" || knowhow == "5"))
{
openmovie("fragenjumps/beamerplus.html");
return;
}
if (costs == "1" && kind == "1")
{
openmovie("fragenjumps/beamer_noppt.html");
return;
}
if (costs == "2" && kind == "1")
{
openmovie("fragenjumps/beamer.html");
return;
}
if (costs == "1" && kind == "2")
{
openmovie("fragenjumps/webstandard.html");
return;
}
if (costs == "2" && kind == "2")
{
openmovie("fragenjumps/webgl_standard.html");
return;
}
if (costs == "1" && timeavail == "1" && kind == "3")
{
openmovie("fragenjumps/web_adv_notime.html");
return;
}
if (costs == "1" && timeavail == "2" && kind == "3")
{
openmovie("fragenjumps/web_adv_time.html");
return;
}
if (costs == "2" && timeavail == "1" && kind == "3" && knowhow == "1")
{
openmovie("fragenjumps/web_adv_notime2.html");
return;
}
if (costs == "2" && timeavail == "2" && kind == "3")
{
openmovie("fragenjumps/web_adv_all.html");
return;
}
if (costs == "1" && kind == "4")
{
openmovie("fragenjumps/interactcdbas.html");
return;
}
if (costs == "2" && timeavail == "1" && kind == "4")
{
openmovie("fragenjumps/interactcdppt.html");
return;
}
if (costs == "2" && timeavail == "2" && kind == "4")
{
openmovie("fragenjumps/interactcdall.html");
return;
}
if (costs == "1" && kind == "5" && knowhow != "4" && knowhow != "5")
{
openmovie("fragenjumps/videobas.html");
return;
}
if (costs == "2" && kind == "5" && knowhow != "4" && knowhow != "5")
{
openmovie("fragenjumps/videoadv.html");
return;
}
if (kind == "5" && knowhow != "1" && knowhow != "2" && knowhow != "3")
{
openmovie("fragenjumps/videoall.html");
return;
}

/* Im Prinzip sollten alle möglichen Kombinationen berücksichtigt worden sein, falls ich aber dennoch eine Möglichkeit übersehen haben sollte, wird nachstehender Alert ausgegeben.*/

else
{
alert("oops, diese Kombination hatte Ihr Kursleiter gar nicht vorgesehen. Bitte schicken Sie mir eine Fehlermeldung mit der verwendeten Fragekombination. Vielen Dank!");
}
}
// -->
</script>
</head>

<body bgcolor="white">

............

<div align="center">
<h3>Kursteil C: <b><font size="+1">Alternativer Einstieg in den Kurs:<br>
&quot;Was will ich, was kann ich, wieviel Aufwand ist dies?&quot;</font></b></h3>
<p><font size="-1"></font></p>
</div>

...........

/* nachfolgend beginnt unser Formular. Wir brauchen übrigens kein Aktions-Attribut, da das Formular ja nicht abgeschickt wird*/

<form name="wasjetztform">
<table border="0" cellspacing="2" cellpadding="2">
<tr>
<td colspan="2">
<p><b>Kostenaufwand:</b></p>
</td>
</tr>
<tr>

/* nachfolgend der erste Set von Radio-Buttons mit Namen Kosten. In diesem Fall ist der erste Button vorausgewählt, d.h. checked. Mit Eventhandler onclick wird als Javascript-Anweisung der globalen Variablen costs der Wert 1 zugewiesen. Semikolon nicht vergessen. */

       <td><input type="radio" name="kosten" value="1" checked onclick="costs='1';"></td>
<td>
<p>Das Projekt soll m&ouml;glichst g&uuml;nstig sein (m&ouml;glichst nur Free- oder Shareware)</p>
</td>
</tr>
<tr>
/* Sollte nachfolgender Radio-Button mit gleichem Namen vom Nutzer ausgewählt werden, wird via Onclick unserer Variablen costs der Wert 2 zugewiesen. Analog gilt dies für alle anderen Radio-Buttons des Formulars*/

<td><input type="radio" name="kosten" value="2" onclick="costs='2';"></td>
<td>
<p>Die Kostenfrage ist nicht von erster Priorit&auml;t <font size="-1">(da bereits eine entsprechende Hard-/Software-Ausstattung bzw. Projektgelder vorhanden sind, oder &auml;hnlich) <br>
(jedoch m&ouml;glichst Programme mit Schul-/Lehrrabatt)</font></p>
</td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="2">
<p><b>Welchen Projekttyp wollen Sie erstellen?</b></p>
</td>
</tr>
<tr>
<td><input type="radio" name="art" value="1" onclick="kind='1';"></td>
<td>
<p>Vortrags-Pr&auml;sentationen</p>
</td>
</tr>
<tr>
<td><input type="radio" name="art" value="2" onclick="kind='2';"></td>
<td>
<p>Standard-Webangebot zur Pr&auml;sentation, Dokumentation oder Lehre</p>
</td>
</tr>
<tr>
<td><input type="radio" name="art" value="3" checked onclick="kind='3';"></td>
<td>
<p>Webangebot wie oben, jedoch Animationen und/oder mit interaktiven Elementen</p>
</td>
</tr>
<tr>
<td><input type="radio" name="art" value="4" onclick="kind='4';"></td>
<td>
<p>Interaktive CDs und/oder Kioskprojekte (d.h. auf Computern an allgemein zug&auml;nglichen Pl&auml;tzen)</p>
</td>
</tr>
<tr>
<td><input type="radio" name="art" value="5" onclick="kind='5';"></td>
<td>
<p>Lehrvideos auf VHS-Kassette, VideoDVD oder VideoCDs</p>
</td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="2">
<p><b>Wie sch&auml;tzen Sie Ihr Vorwissen ein?</b></p>
</td>
</tr>
<tr>
<td><input type="radio" name="wissen" value="1" checked onclick="knowhow='1';"></td>
<td>
<p>html, animierte Gifs, 72 dpi, Quicktime etc: dies sind (fast) alles &quot;b&ouml;hmische D&ouml;rfer&quot; f&uuml;r mich. Ich glaube, mein Vorwissen ist eher gering</p>
</td>
</tr>
<tr>
<td><input type="radio" name="wissen" value="2" onclick="knowhow='2';"></td>
<td>
<p>ich habe bereits selbst Webseiten mit einem Webeditor erstellt, habe jedoch keine n&auml;heren Kenntnisse der html-Seitenbeschreibungssprache</p>
</td>
</tr>
<tr>
<td><input type="radio" name="wissen" value="3" onclick="knowhow='3';"></td>
<td>
<p>ich habe bereits selbst Webseiten erstellt und kenne mich mit der html-Sprache ganz gut aus</p>
</td>
</tr>
<tr>
<td><input type="radio" name="wissen" value="4" onclick="knowhow='4';"></td>
<td>
<p>ich habe Erfahrung in der Erstellung von Animationen, interaktiven Projekten oder Filmprojekten mit dem Computer, aber keine Erfahrung mit Webprojekten</p>
</td>
</tr>
<tr>
<td><input type="radio" name="wissen" value="5" onclick="knowhow='5';"></td>
<td>
<p>ich habe Erfahrung in all den oben stehenden Bereichen</p>
</td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="2">
<p><b>Wieviel Zeit wollen / k&ouml;nnen Sie aufbringen?</b></p>
</td>
</tr>
<tr>
<td><input type="radio" name="zeit" value="1" onclick="timeavail='1';"></td>
<td>
<p>ich hab nur wenig Zeit f&uuml;r evtl. Einarbeitung und Projekterstellung, alles muss m&ouml;glichst schnell gehen</p>
</td>
</tr>
<tr>
<td><input type="radio" name="zeit" value="2" checked onclick="timeavail='2';"></td>
<td>
<p>der Zeitaufwand hat keine oberste Priorit&auml;t, Hauptsache es wird ein tolles Projekt</p>
</td>
</tr>
</table>
<p></p>
<div align="center">

/* Nun folgt der Absendeknopf des Formulars. Ihm wird der Eventhandler onclick zugewiesen, so dass bei Anklicken unsere Funktion mal sehen aufgerufen und durchgeführt wird. Das ist alles.*/

<p><input onclick="malsehen()" type="submit" name="submitButtonName" value="Empfehlungen aufrufen"></p>
</div>
</form>
.........

</body>

</html>