[JavaScript+HTML] Quiz

pineapplefreak

Lieutenant
Registriert
Okt. 2011
Beiträge
793
Also, erstmal hallo.

Ich würde gern ein Quiz für meine Homepage erstellen.
Jetzt zu den Angaben.
Es gibt 3 Fragen. Zu jeder Frage jeweils 3 Antworten.
Jetzt soll der Benutzer jeweils eine Antwort anklicken. Dann soll er auf einen Button Auswertung klicken, welcher ihn:
- auf Seite x weiterleiten, wenn alle Antworten richtig sind
- auf Seite y weiterleiten, wenn er einen oder mehr Fehler hat

Jetzt meine Frage: Wie soll ich das mit Javascript anstellen?
Die If Anweisungen sind nicht das Problem. Mein Problem ist HTML und JS zu verbinden. Also, die Antworten sollen ja mit HTML geschrieben sein, aber beim Draufklicken soll halt JS in Kraft treten.
Kennt jemand einen Befehl, wie ich das schaffen könnte?

Ich hoffe ihr versteht was ich meine.
LG Bomber
 
Hi,

würde ich mit JavaSCript alleine gar nicht machen, da es sonst für jeden, der einen Rechtsklick beherrscht ein leichtes ist herauszufinden, wo es hingeht :)

Das Stichwort wäre da AJAX - also per JS einen PHP-Aufruf zu machen und dann je nach Ergebnis weiter zu leiten.

aber beim Draufklicken soll halt JS in Kraft treten

Beim worauf-Klicken? Einen Button "Absenden"? Einen Link? Direkt die Antwort?

Alles was du wirklich brauchst findest du in der selfHTML-Doku zu JS.

VG,
Mad
 
Suchst du das onclick-Attribut? Oder suchst du onsubmit für Formulare?
Belies dich mal zum Thema Eventhandling.
 
Wenn es clientseitig sein soll, brauchst du einen Event Handler am Button. Entweder du setzt den direkt im HTML ...

Code:
<button type="button" onclick="foo()" ...

... oder per JavaScript.

Ich muss aber sagen, dass es mit deinen JS-Kenntnissen nicht weit her ist, wenn du sowas nicht weisst. Deswegen zweifle ich auch an "Die If Anweisungen sind nicht das Problem".

Edit: zu langsam :)
 
Madman1209 schrieb:
Hi,

würde ich mit JavaSCript alleine gar nicht machen, da es sonst für jeden, der einen Rechtsklick beherrscht ein leichtes ist herauszufinden, wo es hingeht :)

Das ganze soll nichts professionelles werden. Und ehrlich gesagt, hab ich keine Lust auch noch PHP zu lernen... ;)


Beim worauf-Klicken? Einen Button "Absenden"? Einen Link? Direkt die Antwort?

Ich hab mir das so vorgestellt:
Beim draufklicken auf eine Antwort wird beispielsweise Variable A um 1 erhöht (bei richtiger Antwort) oder um 2 erhöht (bei falscher Antwort). Wenn jetzt auf Auswerten geklickt wird, wird auf seite x weitegeleitet wenn A=3. Wenn A=4 wird auf Seite y weitergeleitet.
Verstehst du was ich meine?
Bloß wie mache ich das mit JS?
 
Hi,

Beim draufklicken auf eine Antwort

Nochmal die Frage: Was ist deine Antwort? Ein Link? Ein Button? Ein Bild? Generell gilt, dass das "onClick"-Event für dich das richtige ist. Einfach bei selfHTML mal die Beispiele anschauen und anpassen.

VG,
Mad
 
Im Moment liest sich das so, als haettest du gar keine Ahnung von JS und wolltest, dass wir dir dein Script schreiben. Dafuer braeuchten wir aber deutlich mehr Infos. Wenn du selbst schreiben willst, solltest du dich in JS einlesen. Das gehoert zu den Grundlagen. JS ohne jegliche Interaktion mit dem Browser ist sinnlos.
 
Naja, als Antwort habe ich mir z.B. einen kleinen Satz, oder mehrere Wörter Vorgestellt.
Also ein Zeichen.
Ergänzung ()

character schrieb:
Im Moment liest sich das so, als haettest du gar keine Ahnung von JS und wolltest, dass wir dir dein Script schreiben. Dafuer braeuchten wir aber deutlich mehr Infos. Wenn du selbst schreiben willst, solltest du dich in JS einlesen. Das gehoert zu den Grundlagen. JS ohne jegliche Interaktion mit dem Browser ist sinnlos.

Nein, gerade das will ich nicht. Ich weiß ein paar Grundlagen über JS, also ganz grob, die If Abfrage, Berechnungen, alert. Und die möchte ich damit gern ausbauen.
Ich habe ja auch noch ein Leben vor mir um das alles zu lernen ;)
 
Hi,

sorry, aber ein Klick auf ein Zeichen? Dass wird nichts, dafür reichen (sorry) deine Kenntnisse glaube ich nicht...

Benutze RadioButtons und das OnClick-Event und fertig.

VG,
Mad
 
Wenn du das ohne server-seitige Sprache machst, kann jeder einfach die richtigen Antworten herausfinden, oder noch schneller: Alles überspringen und direkt den Link öffnen. Denn sämtliche Antworten und die Weiterleitungen müssen mit im JS Code stehen ;)
 
Hi,

@benneque

Habe ich auch schon versucht dem TE klar zu machen, ich fürchte das funktioniert leider nicht ;)

VG,
Mad
 
benneque schrieb:
Wenn du das ohne server-seitige Sprache machst, kann jeder einfach die richtigen Antworten herausfinden, oder noch schneller: Alles überspringen und direkt den Link öffnen. Denn sämtliche Antworten und die Weiterleitungen müssen mit im JS Code stehen ;)

Das ist mir bewusst. Leute, bitte, haltet mich nicht für blöd. Ich lern JS gerade erst noch. Und ich will keine professionelle Homepage schreiben. Und glaub mir, die Leute, die auf meiner Page sind, dürften sowas kaum wissen. Außerdem ist es ja ein Fun Quiz.
Ich hab jetzt die Radio Buttons eingebaut.
Bloß mit dem OnClick komm ich nicht zurecht.
So sieht es aus:
<html><head><title>Test</title>
</head><body>
<form name="Test" action="">
<input type="button" value="Auswertung"
onclick=>
</form>
</body></html>

Hinter das "onclick=" kommen jetzt die Javascript Anweisungen, richtig?
Bloß, erkenne ich jetzt welche Radio Buttons gewählt wurden?
D.h. kann ich jetzt einfach annehmen, das z.B. der Radio Button mit dem Namen "Alter" eine Variable ist, der der ausgewählte Wert zugeteilt ist?
Ergänzung ()

gelöst, ist gar nicht so schwer :D
 
Hi,

sorry, aber du hast die Grundlagen absolut nicht verstanden!

1. Du brauchst kein Formular wenn du nichts abschicken willst - und das hast du ja schon zum wiederholten Male gesagt!
2. Einmal kurz nach "JavaScript RadioButton OnClick" Google fragen und man hat sofort ein Beispiel

Code:
<input type=radio name="antworten" value="erstens" onClick="auswahl()">

Jetzt kannst du entweder in der Methode "auswahl", die du noch schreiben musst, das Element holen, dass in der RadioButtonGroup selektiert ist oder du übergibst einfach gleich einen Wert, wie z.B. "auswahl('1')".

VG,
Mad

Edit: Dann schreib doch bitte deine Lösung hier auch noch rein, damit der nächste gleich eine Antwort vorfindet.
 
Nun, ich wollte das etwas anders machen.
Bei deinem Beispiel: Wäre dort antworten eine Variable und Value ihr zugehöriger Wert?

Ich wollte halt diesen OneClick Button erst ganz unten auf der Seite machen, sozusagen als Auswertung. So wie du es gemacht hast, kannst du ja sonst deine Antwort nicht mehr ändern.
 
Hi,

natürlich kannst du mit meinem Beispiel die Antwort ändern. Jedesmal, wenn du einen RadioButton aufrufst wird die Methode "auswahl()" aufgerufen. Jedesmal übergibst du einen anderen Wert. Das ist kein OnClick-Button sondern du hast einfach z.B. Frage 1: Wie ist ihr Name? 3 Antwortmöglichkeiten: a)Hans b)Peter c)Rudi. Diese 3 Möglichkeiten sind 3 RadioButtons, von denen jeder beim OnClick die "auswahl()"-Methode aufruft und immer einen anderen Parameter mitgibt. So einfach ist das.

Unabhängig davon:

Du sagst: Ergänzung vom 05.03.2012 19:00 Uhr: gelöst, ist gar nicht so schwer

Ich sage: Dann schreib doch bitte deine Lösung hier auch noch rein, damit der nächste gleich eine Antwort vorfindet.

VG,
Mad
 
Madman1209 schrieb:
natürlich kannst du mit meinem Beispiel die Antwort ändern. Jedesmal, wenn du einen RadioButton aufrufst wird die Methode "auswahl()" aufgerufen. Jedesmal übergibst du einen anderen Wert. Das ist kein OnClick-Button sondern du hast einfach z.B. Frage 1: Wie ist ihr Name? 3 Antwortmöglichkeiten: a)Hans b)Peter c)Rudi. Diese 3 Möglichkeiten sind 3 RadioButtons, von denen jeder beim OnClick die "auswahl()"-Methode aufruft und immer einen anderen Parameter mitgibt. So einfach ist das.

Tut mir Leid, aber ich verstehe dich gerade nicht. Ich möchte einfach, dass z.B. die Variable A bei der ersten Frage entweder 1 (wenn Rudi) oder 2 (wenn Peter oder Hans) ist. Wie mache ich das jetzt am besten. Ich glaube, es wäre wirklich das beste, wenn du ein kleines Beispiel schreiben könntest, wenn du lust hast. Ich blick leider echt nicht mehr durch.

Zu der Lösung von Vorhin: Ich hab da irgendwas durcheinander gehauen. Tut mir Leid, funktioniert hat es leider nicht.
 
Hi,

kein Thema :)

Bitte sehr:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<title>Test</title>
		<script type="text/javascript">
		<!--                           

		function auswahl(param)
		{
		  var wert = param;
		  alert(wert);
		}

		//-->                        
		</script>
	</head>

	<body>
		<div style="position: absolute;">
			<div id="fragen">
				<input type=radio name="punkte" value="Rudi" onClick="auswahl('A')">Rudi<br>
				<input type=radio name="punkte" value="Peter" onClick="auswahl('B')">Peter<br>
				<input type=radio name="punkte" value="Hans" onClick="auswahl('B')">Hans<br>
			</div>
		</div>
	</body>
</html>

Wenn du jetzt einen der Werte wählst dann poppt das Fenster mit dem Wert auf, den du der Methode "auswahl" Übergibst. Der Wert ist als Variable "wert" verfügbar in der Methode. Einfach komplett markieren und als "test.html" speichern und im Browser öffnen. Von hier ab solltest du weiter kommen oder? ;)

VG,
Mad
 
Hast du das irgendwo rauskopiert? Aus heutiger Sicht (2012) ist das teilweise nicht so schoenes Markup (was nicht heissen soll, dass es nicht funktioniert).

Was BomberDeluxe eigentlich will, sind ohnehin keine click-Handler an den Radio-Buttons, sondern an einem separaten Button. Bei Klick auf den Button soll dann geschaut werden, welcher Radio-Button ausgewaehlt ist. Wie das genau geht weiss Google.
 
Hi,

ja, größtenteils schnell zusammenkopiert. Klar ist es nicht schön, aber ich werd ja auch nicht bezahlt, dass ich ihm hier schönen Code schreibe und ihm sein Projekt mache ;) Mir ist aber klar, worauf der Hinweis abzielt und das ist auch vollkommen korrekt :)

Das mit dem Button habe ich überlesen. Ich hatte mehrfach gefragt worauf er klicken will und als da nichts vernünftiges dabei rauskam habe ich es eben so gemacht. Geht aber doch genauso... ob er sich beim Button-OnClick jetzt per "getElementById" die RadioButtons holt und guckt, welche markiert ist oder ob er direkt beim Klick auf die RadioButtons eine Variable mit einem Wert füllt und diese dann beim Button.OnClick ausliest bleibt sich eigentlich gleich. Wenn es unbedingt der Button sein soll:

Code:
HTML-Teil:

<form name="orderform">
Which one is your favorite?<br>
<input type="radio" name="music" value="Rock" 
checked="checked"> Rock<br>
<input type="radio" name="music" value="Reggae"> Reggae<br>
<input type="radio" name="music" value="Pop"> Pop<br>
<input type="radio" name="music" value="Rap"> Rap<br>
<input type="radio" name="music" value="Metal"> Metal<br>
<input type="submit" onclick="get_radio_value()">
</form>


JavaScript-Teil:

<script type="text/javascript>
<!--

function get_radio_value()
{
for (var i=0; i < document.orderform.music.length; i++)
   {
   if (document.orderform.music[i].checked)
      {
      var rad_val = document.orderform.music[i].value;
      }
   }
}

//-->
</script>

Quelle
VG,
Mad
 
Genau, den letzten Teil habe ich gesucht, klasse!

Wisst ihr was genau der Code
macht?
Den Rest versteh ich sogar ;)
 
Zurück
Oben