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>
 

Sempervivum

Erfahrenes Mitglied
Da fehlte das document-ready, deshalb konnte das Skript nicht funktionieren.
Probiere dieses:
Code:
<script type="text/javascript">
$(document).ready(function() {
    $('input[name="antwort"]').on("click", function () {
        var color;
        if ($(this).val() == "richtig") {
        color = "green"
        $("body").append('<button id="dein_button">nächste Frage</button>');
        $("#dein_button").on("click", function() {
            var firstClicked = true;
            $('input[name="antwort"]').each(function() {
                if ($(this).val() == "falsch" && $(this).hasClass("clicked")) firstClicked = false;
            });
            if (firstClicked) {
                window.location.href='index.php?frage=2&richtig=1&falsch=0'
            } else {
                window.location.href='index.php?frage=2&richtig=0&falsch=1'
            }
        });
        } else {
            color = "red";
        }
        $(this).addClass("clicked");
        $(this).parent().parent().css("background-color", color);
    });
});
</script>
 

Wutaler

Mitglied
Okay, jetzt arbeitet das Script, aber nicht wie gewünscht.
Der Button erscheint nur wenn ich die richtige Antwort ausgewählt habe, aber nicht wenn ich vorher eine falsche angeklickt hab.
Darüber hinaus wird auch die weiterleitung bei onClick nicht unterstützt.
Kann man nicht einfach den Buttons eine ID geben und je nach dem was zutrifft dem Button auf visible schalten?

Besteht auch die Möglichkeit später dem Button zu sagen wo er erscheinen soll? Also z.B. in einem <div></div> unterhalt des Formulares ? Für den Fall das mein Gedanke mit der ID und dem Visible nicht funktioniert, sondern nur die jetzige Lösung?!


P.S. Zur vervollständigung:
Ich habe noch folgende Zeilen in das Script hinzugefügt für eine schönere Animation
Javascript:
$(this).parent().parent().css("background-color", color);
$(this).attr("disabled", true);
for(i = 0; i < 6; i++)
$(this).parent().parent().fadeToggle(400);

Das ganze Script schaut jetzt so aus:

Javascript:
$(document).ready(function() {
$('input[name="antwort"]').on("click", function () {
var color;
if ($(this).val() == "richtig") {
color = "green"
$("body").append('<button id="dein_button">nächste Frage</button>');
$("#dein_button").on("click", function() {
var firstClicked = true;
$('input[name="antwort"]').each(function() {
if ($(this).val() == "falsch" && $(this).hasClass("clicked")) firstClicked = false;
});
if (firstClicked) {
window.location.href='index.php?frage=2&richtig=1&falsch=0'
} else {
window.location.href='index.php?frage=2&richtig=0&falsch=1'
}
});
} else {
color = "red";

                    $(this).parent().parent().css("background-color", color);
                    $(this).attr("disabled", true);
                    for(i = 0; i < 6; i++)
                    $(this).parent().parent().fadeToggle(400);

}
$(this).addClass("clicked");
$(this).parent().parent().css("background-color", color);
});
});
 
Zuletzt bearbeitet:

Sempervivum

Erfahrenes Mitglied
Ich dachte, dass Du es so wolltest: Nur wenn die richtige Antwort angeklickt wurde, soll der Button erscheinen.
Wenn Du die Position des Buttons festlegen willst, ist es wahrscheinlich einfacher, wenn man ihn im HTML anlegt und beim Click nur sichtbar macht, so wie Du es ursprünglich vor hattest.
Beides findest Du hier:
Code:
<script type="text/javascript">
  $(document).ready(function () {
  $('input[name="antwort"]').on("click", function () {
  var color;
  if ($(this).val() == "richtig") {
  color = "green";
  } else {
  color = "red";
  }
  $(this).addClass("clicked");
  $(this).parent().parent().css("background-color", color);
  $("#dein_button").css("display", "inline").on("click", function () {
  var firstClicked = true;
  $('input[name="antwort"]').each(function () {
  if ($(this).val() == "falsch" && $(this).hasClass("clicked")) firstClicked = false;
  });
  if (firstClicked) {
  window.location.href = 'index.php?frage=2&richtig=1&falsch=0'
  } else {
  window.location.href = 'index.php?frage=2&richtig=0&falsch=1'
  }
  });
  });
  });
</script>
(Ich kann machen was ich will, die Einrückungen verschwinden, wenn ich den Code einfüge.)
und
HTML:
<button id="dein_button" style="display: none;">Nächste Frage</button>
 

Neue Beiträge

Forum-Statistiken

Themen
272.360
Beiträge
1.558.622
Mitglieder
187.833
Neuestes Mitglied
SirrDansen