1. #1
    Lieutenant
    Dabei seit
    Okt 2011
    Ort
    Irgendwo in Sachsen :D
    Beiträge
    641

    [JavaScript+HTML] Quiz

    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
    Rechenschieber Intel Core i5 2500k @3,3GHZ~~~AsRock Extreme3 Gen3~~~8GB 1333 TeamgroupElite
    Bildchen: Asus DC HD6870 @1000/1150/1,2V~~~23" Monitor @1920*1080
    Zubehör SSD 830 128GB @Win7 + 200GB HDD~~~OCZ ModXStream 500W~~~ThermalRight Silver Arrow SB-E
    Verpackung: CoolerMaster HAF912 @4*120mm + 200mm @NZXT Sentry Mesh


    Jesus in Saxony

  2. Anzeige
    Logge dich ein, um diese Anzeige nicht zu sehen.
  3. #2
    Fleet Admiral
    Dabei seit
    Nov 2010
    Beiträge
    14.331

    AW: [JavaScript+HTML] Quiz

    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

  4. #3
    Fleet Admiral
    Dabei seit
    Dez 2011
    Beiträge
    11.517

    AW: [JavaScript+HTML] Quiz

    Suchst du das onclick-Attribut? Oder suchst du onsubmit für Formulare?
    Belies dich mal zum Thema Eventhandling.

  5. #4
    Lt. Commander
    Dabei seit
    Jul 2008
    Beiträge
    1.477

    AW: [JavaScript+HTML] Quiz

    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

  6. #5
    Lieutenant
    Ersteller dieses Themas

    Dabei seit
    Okt 2011
    Ort
    Irgendwo in Sachsen :D
    Beiträge
    641

    AW: [JavaScript+HTML] Quiz

    Zitat Zitat von Madman1209 Beitrag anzeigen
    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?
    Rechenschieber Intel Core i5 2500k @3,3GHZ~~~AsRock Extreme3 Gen3~~~8GB 1333 TeamgroupElite
    Bildchen: Asus DC HD6870 @1000/1150/1,2V~~~23" Monitor @1920*1080
    Zubehör SSD 830 128GB @Win7 + 200GB HDD~~~OCZ ModXStream 500W~~~ThermalRight Silver Arrow SB-E
    Verpackung: CoolerMaster HAF912 @4*120mm + 200mm @NZXT Sentry Mesh


    Jesus in Saxony

  7. #6
    Fleet Admiral
    Dabei seit
    Nov 2010
    Beiträge
    14.331

    AW: [JavaScript+HTML] Quiz

    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

  8. #7
    Lt. Commander
    Dabei seit
    Jul 2008
    Beiträge
    1.477

    AW: [JavaScript+HTML] Quiz

    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.

  9. #8
    Lieutenant
    Ersteller dieses Themas

    Dabei seit
    Okt 2011
    Ort
    Irgendwo in Sachsen :D
    Beiträge
    641

    AW: [JavaScript+HTML] Quiz

    Naja, als Antwort habe ich mir z.B. einen kleinen Satz, oder mehrere Wörter Vorgestellt.
    Also ein Zeichen.

    Ergänzung vom 05.03.2012 15:59 Uhr:
    Zitat Zitat von character Beitrag anzeigen
    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
    Rechenschieber Intel Core i5 2500k @3,3GHZ~~~AsRock Extreme3 Gen3~~~8GB 1333 TeamgroupElite
    Bildchen: Asus DC HD6870 @1000/1150/1,2V~~~23" Monitor @1920*1080
    Zubehör SSD 830 128GB @Win7 + 200GB HDD~~~OCZ ModXStream 500W~~~ThermalRight Silver Arrow SB-E
    Verpackung: CoolerMaster HAF912 @4*120mm + 200mm @NZXT Sentry Mesh


    Jesus in Saxony

  10. #9
    Fleet Admiral
    Dabei seit
    Nov 2010
    Beiträge
    14.331

    AW: [JavaScript+HTML] Quiz

    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

  11. #10
    Commander
    Dabei seit
    Jul 2010
    Beiträge
    2.117

    AW: [JavaScript+HTML] Quiz

    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

  12. #11
    Fleet Admiral
    Dabei seit
    Nov 2010
    Beiträge
    14.331

    AW: [JavaScript+HTML] Quiz

    Hi,

    @benneque

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

    VG,
    Mad

  13. #12
    Lieutenant
    Ersteller dieses Themas

    Dabei seit
    Okt 2011
    Ort
    Irgendwo in Sachsen :D
    Beiträge
    641

    AW: [JavaScript+HTML] Quiz

    Zitat Zitat von benneque Beitrag anzeigen
    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 vom 05.03.2012 19:00 Uhr: gelöst, ist gar nicht so schwer
    Rechenschieber Intel Core i5 2500k @3,3GHZ~~~AsRock Extreme3 Gen3~~~8GB 1333 TeamgroupElite
    Bildchen: Asus DC HD6870 @1000/1150/1,2V~~~23" Monitor @1920*1080
    Zubehör SSD 830 128GB @Win7 + 200GB HDD~~~OCZ ModXStream 500W~~~ThermalRight Silver Arrow SB-E
    Verpackung: CoolerMaster HAF912 @4*120mm + 200mm @NZXT Sentry Mesh


    Jesus in Saxony

  14. #13
    Fleet Admiral
    Dabei seit
    Nov 2010
    Beiträge
    14.331

    AW: [JavaScript+HTML] Quiz

    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.

  15. #14
    Lieutenant
    Ersteller dieses Themas

    Dabei seit
    Okt 2011
    Ort
    Irgendwo in Sachsen :D
    Beiträge
    641

    AW: [JavaScript+HTML] Quiz

    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.
    Rechenschieber Intel Core i5 2500k @3,3GHZ~~~AsRock Extreme3 Gen3~~~8GB 1333 TeamgroupElite
    Bildchen: Asus DC HD6870 @1000/1150/1,2V~~~23" Monitor @1920*1080
    Zubehör SSD 830 128GB @Win7 + 200GB HDD~~~OCZ ModXStream 500W~~~ThermalRight Silver Arrow SB-E
    Verpackung: CoolerMaster HAF912 @4*120mm + 200mm @NZXT Sentry Mesh


    Jesus in Saxony

  16. #15
    Fleet Admiral
    Dabei seit
    Nov 2010
    Beiträge
    14.331

    AW: [JavaScript+HTML] Quiz

    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

  17. #16
    Lieutenant
    Ersteller dieses Themas

    Dabei seit
    Okt 2011
    Ort
    Irgendwo in Sachsen :D
    Beiträge
    641

    AW: [JavaScript+HTML] Quiz

    Zitat Zitat von Madman1209 Beitrag anzeigen
    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.
    Rechenschieber Intel Core i5 2500k @3,3GHZ~~~AsRock Extreme3 Gen3~~~8GB 1333 TeamgroupElite
    Bildchen: Asus DC HD6870 @1000/1150/1,2V~~~23" Monitor @1920*1080
    Zubehör SSD 830 128GB @Win7 + 200GB HDD~~~OCZ ModXStream 500W~~~ThermalRight Silver Arrow SB-E
    Verpackung: CoolerMaster HAF912 @4*120mm + 200mm @NZXT Sentry Mesh


    Jesus in Saxony

  18. #17
    Fleet Admiral
    Dabei seit
    Nov 2010
    Beiträge
    14.331

    AW: [JavaScript+HTML] Quiz

    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

  19. #18
    Lt. Commander
    Dabei seit
    Jul 2008
    Beiträge
    1.477

    AW: [JavaScript+HTML] Quiz

    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.

  20. #19
    Fleet Admiral
    Dabei seit
    Nov 2010
    Beiträge
    14.331

    AW: [JavaScript+HTML] Quiz

    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

  21. #20
    Lieutenant
    Ersteller dieses Themas

    Dabei seit
    Okt 2011
    Ort
    Irgendwo in Sachsen :D
    Beiträge
    641

    AW: [JavaScript+HTML] Quiz

    Genau, den letzten Teil habe ich gesucht, klasse!

    Wisst ihr was genau der Code
    i++
    macht?
    Den Rest versteh ich sogar
    Rechenschieber Intel Core i5 2500k @3,3GHZ~~~AsRock Extreme3 Gen3~~~8GB 1333 TeamgroupElite
    Bildchen: Asus DC HD6870 @1000/1150/1,2V~~~23" Monitor @1920*1080
    Zubehör SSD 830 128GB @Win7 + 200GB HDD~~~OCZ ModXStream 500W~~~ThermalRight Silver Arrow SB-E
    Verpackung: CoolerMaster HAF912 @4*120mm + 200mm @NZXT Sentry Mesh


    Jesus in Saxony

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •