Radiobutton mit Jquery auslesen und CSS atribut setzen

Wutaler

Mitglied
Hallo,

ich zerbreche mir seit 2 Tagen den Kopf über wahrscheinlich ein lächerlich einfaches Problem.
Aber da ich mehr in der Welt des PHP zuhause bin, komme ich einfach auf keine Lösung.

Folgendes Problem habe ich:

Ich habe 3 Radiobutton die wie folgt aussehen:

HTML:
<div id="bg_antwort1">
   <label for="antwort1">
      <input type="radio" name="antwort" id="antwort1" value="falsch">Antwort A
   </label>
</div>
<div id="bg_antwort2">
   <label for="antwort2">
      <input type="radio" name="antwort" id="antwort2" value="falsch">Antwort B
   </label>
</div>
<div id="bg_antwort3">
   <label for="antwort3">
      <input type="radio" name="antwort" id="antwort3" value="richtig">Antwort C
   </label>
</div>


Ich möchte folgendes erreichen.
Wenn ich einen Radiobutton anklicke der die Value="richtig" hat, soll dieser über den DIV-Container eine Grüne Hintergrundfarbe bekommen.
Wenn ich aber einen Radioutton anklicke der die Value="falsch" hat, soll dieser über den DIV-Container Rot hinterlegt werden und der Radiobutton mit der Value="richtig" grün hinterlegt.


EDIT: Welche Antwort richtig ist variiert natürlich von Frage zu Frage. Darüber hinaus möchte ich die Reihenfolge der Antworten bei jedem Aufruf der Frage ändern. Das kann ich ja ganz einfach über PHP realisieren. Hoffe nicht das es dadurch schwieriger ist mein Problem zu lösen?!


Also eine eigenltich einfache Quizlösung, aber ich finde einfach keine Lösung. Habt ihr eine Idee?

Vielen Dank für euer Kopfzerbrechen

Wutaler
 
Zuletzt bearbeitet:

Sempervivum

Erfahrenes Mitglied
Wenn Du die Fragen mit PHP generierst, treten die Änderung ja wohl beim Laden der Seite auf. In dem Fall sollte es so funktionieren:
Code:
$('input[name="antwort"]').on("click", function () {
     var color;
     if ($(this).val() == "richtig") color = "green"; else color = "red";
     $(this).parent().parent().css("background-color", color);
});
 

Wutaler

Mitglied
Hallo Sempervivum,

danke für die schnelle Lösung. Es funktioniert nicht ganz so wie ich mir das dachte, aber deine Lösung ist sogar noch besser, denn so hat der User die Möglichkeit seine falsche Antwort noch einmal zu überdenken, ohne das er direkt die richtige Antwort "vorgesagt" bekommt.

Vielen lieben Dank!

Jetzt hab ich das gerade einfach mal weiter gesponnen, kann ich auch mit js auslesen welche Aufgabe direkt richtig beantwortet wurde?
Wenn das möglich ist, könnte ich doch bei direkt oder nicht direkt richtig beantworteter Frage einen anderen "nächste Frage" Button anzeigen lassen, der es mir später ermöglicht (per URL übertragene Daten) eine auswertung der Fragen zu verwirklichen. Ja, per URL ist das Ergebnis manipulierbar, aber das ist egal. Das ist zu für Kinder.

Button bei direkt richtig beantworteter Frage:
HTML:
<button onclick="window.location.href='index.php?frage=2&richtig=1&falsch=0'"
style="display: none;">nächste Frage</button>

Button bei NICHT direkt richtig beantworteter Frage:
HTML:
<button onclick="window.location.href='index.php?frage=2&richtig=0&falsch=1'"
style="display: none;">nächste Frage</button>
 
Zuletzt bearbeitet:

Parantatatam

mag Cookies & Kekse
Es ist zwar recht unwahrscheinlich, dass Dir das passieren würde, aber ich persönlich schaue bei so was gerne in den Quelltext. Und wenn ich da dann schon sehe, dass nur eines der Felder den Wert "richtig" enthält und somit die richtige Antwort angibt, dann würde ich bei jeder Frage nachschauen, welche die richtige Antwort ist. Wenn es um nichts geht, dann mag das noch akzeptabel sein, aber wenn es dann schon um ein Ranking geht oder sogar um einen Gewinn, dann würde ich da noch mal stark darüber nachdenken, ob Du das so willst.
 

Wutaler

Mitglied
Da gebe ich dir natürlich recht.
Wenn es ein Gewinnspiel wäre, oder das ganze ein Ranking hätte wäre das völlig unnütz. Da ist das Manipulieren und betrügen ja Kinderleicht. Es ist eigentlich nur eine Art "Lernkontrolle" für sich selber. Und das ganze spielerisch verpackt in ein kleines Quiz.
Es wird nichts irgendwo in einer Datenbank gespeichert oder ähnliches. Das ganze läuft nicht einmal über ein LogIn.
 

Sempervivum

Erfahrenes Mitglied
Jetzt hab ich das gerade einfach mal weiter gesponnen, kann ich auch mit js auslesen welche Aufgabe direkt richtig beantwortet wurde?
Um auch diese Frage zu beantworten, würde ich vorschlagen, beim Drücken einer Antwort bei dem betr. Element eine Klasse zu setzen und beim Drücken der richtigen Antwort abzufragen:
Code:
$('input[name="antwort"]').on("click", function () {
     var color;
     if ($(this).val() == "richtig") {
         color = "green"
         $("#dein_button").on("click", function() {
             var firstClicked = true;
             $('input[name="antwort"]').each(function() {
                 if ($(this).val() == "falsch" && $(this).hasClass("clicked")) firstClicked = false;
             });
             if (firstClicked) {
                 // weiterleiten 1
             } else {
                 // weiterleiten 2
             }
         });
     } else {
         color = "red";
     }
     $(this).addClass("clicked");
     $(this).parent().parent().css("background-color", color);
});
 
Zuletzt bearbeitet:

Wutaler

Mitglied
Hallo und entschuldiugt meine Abwesenheit.

Vielen Dank für deine Antwort und Mühe. Ich muss mir mal anschauen wie das ganze funktioniert und ich das in die Seite einbauen kann.
Werde mich auf jeden Fall melden und berichten! Oder noch mal nachfragen :)

Gruß und frohe Ostertage

Wutaler
 

Wutaler

Mitglied
Also, ich habe jetzt mal 2 Stunden hin und her probiert.

Ich kann diese Funktion einfach nicht so ergänzen/umbauen das je nach dem ob man zuerst eine richtige oder falsche Antwort angeklickt hat, UNTER den Antworten ein entsprechender Weiterleitungsbutton erscheint. Bin ich so doof, oder ist es nur zu spät zum nachdenken? Ich denke mal es trifft beides zu :(
 

Sempervivum

Erfahrenes Mitglied
Poste doch mal deinen Versuch, am besten ein Link zu der kompletten Seite. Mein Vorschlag basiert darauf, dass der Button schon existiert, lediglich der Click-Handler wird hinzu gefügt. Wenn Du den Button einblenden willst, brauchst Du die jQuery-Funktion append.
 

Wutaler

Mitglied
Den Link kann ich leider nicht posten weil Localhost. Ich hab jetzt nur das Grundgerüst als HTML-Code eingefügt. Ohne PHP-Code weil der für die JS-Funktion unbedeutend ist und auch ohne meine verzweifelten JS-Versuche die ich wieder verworfen habe weil sie eh nicht funktioniert haben...

Hier der Code:

HTML:
<html>
<head>
<title>Quiz | Versuchsseite</title>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="content-language" content="de">
<meta name="robots" content="noindex, nofollow">

<script src="jquery/jquery-2.1.0.min.js"></script>

</head>
<body>
<script type="text/javascript">

$('input[name="antwort"]').on("click", function () {
     var color;
     if ($(this).val() == "richtig") {
         color = "green"
         $("#dein_button").on("click", function() {
             var firstClicked = true;
             $('input[name="antwort"]').each(function() {
                 if ($(this).val() == "falsch" && $(this).hasClass("clicked")) firstClicked = false;
             });
             if (firstClicked) {
                 // weiterleiten 1
             } else {
                 // weiterleiten 2
             }
         });
     } else {
         color = "red";
     }
     $(this).addClass("clicked");
     $(this).parent().parent().css("background-color", color);
});
</script>

<b>Wie Alt bist du?</b>
<div id="bg_antwort1">
   <label for="antwort1">
      <input type="radio" name="antwort" id="antwort1" value="falsch">Antwort A
   </label>
</div>
<div id="bg_antwort2">
   <label for="antwort2">
      <input type="radio" name="antwort" id="antwort2" value="falsch">Antwort B
   </label>
</div>
<div id="bg_antwort3">
   <label for="antwort3">
      <input type="radio" name="antwort" id="antwort3" value="richtig">Antwort C (Richtig)
   </label>
</div>

<button onclick="window.location.href='index.php?frage=2&richtig=1&falsch=0'" style="display: none;">(Richtig)nächste Frage</button>

<button onclick="window.location.href='index.php?frage=2&richtig=0&falsch=1'" style="display: none;">(Falsch) nächste Frage</button>

</body>
</html>