Quiz in Java Script

tobias82 · 02.11.2005, 10:50

moinsen,

mein javascript-quiz soll nicht nur ganz normal auf die antworten der eingabe reagieren, sondern sich diese auch merken und dementsprechend seite für seite (frage für frage) prozentuale angaben zum verhältnis richtige und falsche antworten geben. z.b.: 2 von 4 richtig: 50 %. Das mit der Antwortenreaktion habe ich schon hingekriegt (s.u.), nur die sache mit der auswertung habe ich noch nicht! wenn ihr da was habt wäre super!

meine javacode für das quiz lautet:

HTML-Code:

<html>
<head>
<title>Title ihrer eigenen HTML Web-Seite</title>

<SCRIPT LANGUAGE="JavaScript">

function Checkboxpruefen(Formname, Zahl, tab)
{
j=1;
for (i=0; i<=(Zahl-1); i++)
	{if (Formname.elements[i].checked!=tab[i])
		j=0;}
if (j==1)	
	{alert("richtig!");}
else
	{alert("falsch!");}
}

function Loesung(nomlayer)
{
if (document.layers)       //Netscape 4.x
	document.layers[nomlayer].visibility='show';
else if (document.all)    //Internet Explorer
	document.all[nomlayer].style.visibility='visible';
else                      //W3C-Konformer Browser              
	document.getElementById(nomlayer).style.visibility='visible';
}

</SCRIPT>
</head>
<body>
<SCRIPT LANGUAGE="JavaScript">
var seite1=new Array(true,false,false);
</SCRIPT
<table>
<tr>
<td>
<FORM NAME="frage1">
Welche Farbe haben Tomaten
<p><br /></p>
<ol>
<li><INPUT TYPE="CHECKBOX">Rot</li>
<li><INPUT TYPE="CHECKBOX">Grün</li>
<li><INPUT TYPE="CHECKBOX">Gelb</li>
</ol>
<p><br /></p>
<INPUT TYPE="BUTTON" VALUE="Prüfen" onClick="Checkboxpruefen(frage1, 3, seite1);"> <INPUT TYPE="BUTTON" VALUE="Lösung" onClick='Loesung("antwort1");'>
</Form>
<DIV ID="antwort1" style="position:relative; LEFT:0; TOP:0; VISIBILITY:hidden"><font size="4" color="maroon">die richtigen Antwort ist "rot"<br />Erklärung: Eine Tomate ist rot</font></DIV>
</td>
</tr>
</table>
</body>
</html>

vielen dank für die hilfe!

321 · 04.11.2005, 16:58

Es entstehen Probleme, wenn der Anwender auf eine schon mal abgeschickte Seite zurück geht,
dann musst Du Dir die Ergebnisse jeder Seite merken!
Was wird komplexer aber nicht unmöglich.
Wieviele Seiten gibts denn?

Du kannst von Seite zu Seite (quiz1.html -> quiz2.html) die Werte anzRichtig und anzFalsch weitergeben.
<a href="quit2.html?seite=1&richtig=rrr&falsch=fff&seite=2&richtig=rrr&falsch=fff&seite=3&richtig=rrr&falsch=fff"
onClick="ParametersSetzen(1)">

In der Funktion ParametersSetzen erkennst Du aufgrund der 1 oder eben 2, 3 ..
für welche Seite Du die Werte neu einsetzen musst.

Mit location.string bekommst Du den aktuellen Stand,
ist er (beim Erstaufruf) nicht vorhanden, erstellst Du ihn!

Du musst dann den ganzen String neu zusammen stellen,
dh. richtig und falsch dieser Seite berücksichtigen
und den obigen Link modifizieren.

Lies mal bei Selfhtml über location.string und
string() / substring() zum Auseinanderpflücken der einzelnen Werte!

rewboss · 06.11.2005, 17:03

JavaScript kann auch Cookies schreiben und lesen, obwohl das nicht so einfach ist. Die Eigenschaft document.cookie steht hierfür zur Verfügung -- nähere Infos hier. Der Vorteil liegt darin, dass du dann keine komplizierte URLs in der Adress-Zeile hast -- aber das ist kein großer Vorteil.

tobias82 · 07.11.2005, 11:18

das mit dem cookie hat soweit wunderbar funktioniert! vielen dank. nun will ich das ganze aber nicht über die kleinen alert fenster ausgeben lassen, sondern innem hübschen balken sehen, wieviel prozent der user richtig hatte.

hier mein aktuelles skript:

HTML-Code:

<SCRIPT LANGUAGE="JavaScript">


var punkte = 0;
var prozent = 0;
var frage = 1;
function Checkboxpruefen(Formname, Zahl, tab)
{
j=1;
for (i=0; i<=(Zahl-1); i++)
	{if (Formname.elements[i].checked!=tab[i])
		j=0;}
if (j==1)	
	{
	alert("richtig!"); 
	document.cookie = punkte + 1;
	prozent = document.cookie / frage * 100; 
	alert("Richtige Antworten : " + prozent + " %");
	}
else
	{
	alert("falsch!");
	prozent = document.cookie / frage * 100;
	alert("Richtige Antworten : " + prozent + " %");
	}
}

function Loesung(nomlayer)
{
if (document.layers)       //Netscape 4.x
	document.layers[nomlayer].visibility='show';
else if (document.all)    //Internet Explorer
	document.all[nomlayer].style.visibility='visible';
else                      //W3C-Konformer Browser              
	document.getElementById(nomlayer).style.visibility='visible';
}

function cookieloeschen()
	{
	document.cookie= 0;
	alert("Cookie = " + document.cookie);
	}

</SCRIPT>
</head>
<body>
<SCRIPT LANGUAGE="JavaScript">
var seite1=new Array(true,false,false);
</SCRIPT>
<table class="normal" border="0" cellpadding="5px">
<tr>
	<th>Cisco Fragebogen</th>
</tr>
<tr>
	<td align="center">Frage 1</td>
</tr>
<tr>
	<td align="center"><FORM NAME="frage1">Welche Farbe haben Tomaten?</td>
</tr>
<tr>
	<td>
		<ol>
			<li><INPUT TYPE="CHECKBOX" >Rot</li>
			<li><INPUT TYPE="CHECKBOX" >Grün</li>
			<li><INPUT TYPE="CHECKBOX" >Gelb</li>
		</ol>
	</td>
</tr>
<tr>
	<td align="center">
	<INPUT TYPE="BUTTON" VALUE="Prüfen" onClick="Checkboxpruefen(frage1, 3, seite1);"> <INPUT TYPE="BUTTON" VALUE="Lösung" onClick='Loesung("antwort1");'>
	<input type="button" value="Cookies löschen" onClick="cookieloeschen();">
	</Form>
	<DIV ID="antwort1" style="visibility:hidden"><br>Die richtigen Antwort ist "rot"<br>Erklärung: Eine Tomate ist rot</DIV>
	</td>
</tr>
<tr>
	<td><a href="frage2.html">weiter</a></td>
</tr>
</table>
</body>
</html>

321 · 07.11.2005, 17:45

Füge zB. folgendes in die Seite ein:

HTML-Code:

<p>Du hast bis jetzt <span id="richtig">0</span> von 20 Fragen richtig beantwortet.
<br>
Das sind <span id="prozente">0</span>%</p>

mit JS innerText kannst Du den Text in den beiden <span> verändern.

Malleus · 07.11.2005, 19:25

"innerText" ist meines Wissens eine MSIE-Erfindung und wird nicht "offiziell" von allen Browsern unterstützt. Opera hat es anscheinend eingebaut, Firefox "noch" nicht.

Besser wäre daher folgendes:

PHP-Code:


			
document.getElementById("prozente").firstChild.nodeValue="Neuer Wert";

321 · 08.11.2005, 00:25

@Malleus: Hast Du nicht kürzlich innerText als Deinen 'Favoriten' für solche Änderungen bezeichnet, oder war das innerHTML?
Aber gehn die beiden nicht gemeinsam einher, was die versch. Browser betrifft?
Ich glaube, es war im Zusammenhang mit document.write.

tobias82 · 08.11.2005, 12:40

moinsen,

habe was hingekriegt, was super funktioniert. hier die erste frage als skript:

HTML-Code:

<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Cisco Fragebogen</title>
<meta name="description" content="Fragebogen zu CCNA">
<meta name="author" content="Tobias Fickinger">
<meta name="keywords" content="Cisco CCNA CCNP Fragebogen Salinas Salinas-IT Netzwerk Quiz">
<meta name="generator" content="Ulli Meybohms HTML EDITOR">
<link rel="stylesheet" type="text/css" href="formateie.css">

<style type="text/css"> 
<!-- 
.balken
	{
	position: absolute;
	margin: 300px 0 0 100px;
	width: 100px; 
	height: 20px;
	border: 1px solid black;
	}
.innerbalken
	{
	width: 100px; 
	height: 20px;
	}
	
--> 
</style>

<script type="text/javascript"> //Einleitung des Skripts nach Java

var age = navigator.userAgent; //Erstellung der Variablen age mit dem Inhalt navigator.userAgent


if(age.search("MSIE")!= -1)
        {
          document.write('<link rel="stylesheet" href="formateie.css" type="text/css" />');
        }

else if(age.search("Mozilla")!= -1)
        {
        document.write('<link rel="stylesheet" href="formatemoz.css" type="text/css" />');
        }

else
        {
        alert('Diese Seite ist mit Ihrem Browser nicht getestet,n es kann  zu Darstellungsfehlern kommen.');
        window.open('BrowserDownload.html','Update','width=300, height=300');
        document.write('<link rel="stylesheet" href="seitemoz.css" type="text/css" />');
        }


var punkte = 0;
var prozent = 0;
var frage = 1;
function Checkboxpruefen(Formname, Zahl, tab)
{
j=1;
for (i=0; i<=(Zahl-1); i++)
	{if (Formname.elements[i].checked!=tab[i])
		j=0;
	}
if (j==1)	
	{
	alert("richtig!"); 
	document.cookie = punkte + 1;
	prozent = document.cookie / frage * 100; 
	alert("Richtige Antworten : " + prozent + " %");
	document.getElementById('antworten').style.width=prozent+'px';
	}
else
	{
	alert("falsch!");
	prozent = document.cookie / frage * 100;
	alert("Richtige Antworten : " + prozent + " %");
	document.getElementById('antworten').style.width=prozent+'px';
	}
}

function Loesung(nomlayer)
{
if (document.layers)       //Netscape 4.x
	document.layers[nomlayer].visibility='show';
else if (document.all)    //Internet Explorer
	document.all[nomlayer].style.visibility='visible';
else                      //W3C-Konformer Browser              
	document.getElementById(nomlayer).style.visibility='visible';
}

function cookieloeschen()
	{
	document.cookie= 0;
	alert("Cookie = " + document.cookie);
	}

</script>

Code:

</head>
<body>
<SCRIPT LANGUAGE="JavaScript">
var seite1=new Array(true,false,false);
</SCRIPT>
<table class="normal" border="0" cellpadding="5px">
<tr>
	<th>Cisco Fragebogen</th>
</tr>
<tr>
	<td align="center">Frage 1</td>
</tr>
<tr>
	<td align="center"><FORM NAME="frage1">Welche Farbe haben Tomaten?</td>
</tr>
<tr>
	<td>
		<ol>
			<li><INPUT TYPE="CHECKBOX" >Rot</li>
			<li><INPUT TYPE="CHECKBOX" >Grün</li>
			<li><INPUT TYPE="CHECKBOX" >Gelb</li>
		</ol>
	</td>
</tr>
<tr>
	<td align="center">
	<INPUT TYPE="BUTTON" VALUE="Prüfen" onClick="Checkboxpruefen(frage1, 3, seite1);"> <INPUT TYPE="BUTTON" VALUE="Lösung" onClick='Loesung("antwort1");'>
	<input type="button" value="Cookies löschen" onClick="cookieloeschen();">
	</Form>
	<DIV ID="antwort1" style="visibility:hidden"><br>Die richtigen Antwort ist "rot"<br>Erklärung: Eine Tomate ist rot</DIV>
	</td>
</tr>
<tr>
	<td><a href="frage2.html">weiter</a></td>
</tr>
</table>
<div class="balken"><div class="innerbalken" id="antworten" style="width: 0; background-color: green;"></div></div>
</div>
</body>
</html>

als nächstes würde ich dann aber auch gerne den balken auf der neuen seite angezeigt bekommen, ohne auf prüfen zu drücken sondern wenn man auf weiter geklickt hat und die neue frage noch nicht beantwortet hat. wie könnte das gehn?

Malleus · 08.11.2005, 13:27

@321: "innerHTML" ist ganz klar "mein" Favorit, aber dieses "Property" ist etwas anderes als "innerText". Bei "innerHTML" werden HTML-Tags ausgewertet und in die DOM integriert. "innerText" gibt dagegen die HTML-Tags als Text aus. Es werden also keine neue HTML-Elemente erzeugt.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html>
<head>
<title>Malleus' Test</title>
<script type="text/javascript">
<!--

function doIt(mode)
{
eval('document.getElementById("myDiv").'+mode+'="<TABLE border=\\"1\\"><TR><TD>Hallo</td><td>321</td></tr></table>"');
}


-->
</script>

<style type="text/css">

</style>
</head>

<body>
<button onclick="doIt('innerHTML')">using innerHTML</button>&nbsp;<button onclick="doIt('innerText')">using innerText</button>
<dir id="myDiv">

</dir>

</body>
</html>

Tschau

Frank

321 · 08.11.2005, 14:40

Hi Malleus

der Unterschied ist mir schon klar, aber wieso ist das eine Standard/offiziell und das andere nicht?

Übrigens hast noch einen Syntax-Fehler im Beispiel

tobias82 · 08.11.2005, 16:12

hallo,

weiss jemand von euch, wie man sich den inhalt von prozent ohne extra klick (nur den auf "weiter") auf der nächsten seite anzeigen lassen kann? (so wie im script oben schon geschehen, nur gehts da leider nur mit klick auf "prüfen" und wenn ich auf weiter gehe, also eine neue seite öffne, bleibt die grafik erstmal leer, wurde ja auch noch nicht auf prüfen geklickt.) mit anderen worten: kann ich einen link mit einer js-funktion verbinden, die erst auf der nächsten seite ausgeführt wird? und wenn ja, wie bzw. wenn nein, wie denn?

danke für die hilfe!

321 · 08.11.2005, 17:13

<body onload="funktionXY(....)">

in der Funktion werden die Werte aus den URL-Parametern oder dem Cooky ausgelesen und aufbereitet.

tobias82 · 08.11.2005, 17:40

cool! hat gefunzt! ich danke!

Malleus · 08.11.2005, 21:35

@321: Mein Script hat keinen Fehler, sondern die Forumsoftware hier: Im PHP-Mode werden die zwei Backslashes hinter der "1" verschluckt. Tausche ich PHP in CODE funktioniert es. Hast Du eine Ahnung warum?

"innerHTML/innerText" sind wie "document.all" Microsoft-Erfindungen. Das entsprechende W3C-Verfahren zur Erzeugung dynamischer HTML-Elemente ist eine "Orgie" verschiedener createElement/append-Methoden. Das haben anscheinend auch "alle" anderen Browser-Hersteller gemerkt. Da "innerHTML" auch noch meistens schneller ist, haben sie es dann doch implementiert.

Quirksmode - innerHTML Benchmark

Momentan ist mir auch kein "neuerer" Browser bekannt, der "innerHTML" nicht unterstützt.

"innerText" wird noch nicht von jedem Brower unterstützt, da man es meiner Meinung nach nicht unbedingt braucht. Eine Zuweisung an "innerHTML" macht ja eigentlich das gleiche. Interessant ist "innerText", wenn man den Textinhalt eine komplexen HTML-Elementes einfach auslesen will.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html> 
<head> 
<title>Malleus' Test</title> 
<script type="text/javascript"> 
function getText() 
{ 
alert(document.getElementById("myDiv").innerText);
}
function getHTML() 
{ 
alert(document.getElementById("myDiv").innerHTML);
} 
 
</script> 
</head> 

<body> 
<button onclick="getHTML()">get HTML</button>&nbsp;<button onclick="getText()">get Text</button>
<dir id="myDiv"><table border="1"><tr><td>Hallo</td><td>&nbsp;</td><td>321</td></tr></table></dir> 
</body> 
</html>

tschau

Frank

321 · 09.11.2005, 01:53

Danke für das 'Hallo' und die Erläuterungen

Warum das Forum dies tut (\\) weiss ich auch nicht, denn
1. kenne ich den Code nicht
2. bin ich kein PHP-Prof, ich arbeite mich nur immer in das rein, was gerade ansteht.

Übrigens passierte es mir schon paarmal, dass Code-Boxen hier ohne Zeilenumbrüche angezeigt wurden, was ich extrem hasse.
Ging ich dann auf Editieren und speicherte wieder ab, waren die Umbrüche plötzlich drin.
Prinzip Camera obscura ...