Script Couleur Radio coché par défaut

15 juin 2010 à 15:00:04

Bonjour,

J'aimerai mettre en couleur le texte à côté d'un bouton radio lorsque je clique sur ce bouton. Mais projet est un quizz. Il y a des plusieurs questions avec plusieurs boutons radio.

Voici la ou je suis arrivé :

J'arrive à coché par défaut le bouton radio 1 de chaque question.
J'arrive à colorer le texte lorsque je clique sur un bouton radio mais le soucis c'est que les autres bouton qui sont également coché (normal ils sont coché par défaut) deviennent rouge.

Je dois obligatoirement avoir un bouton coché par défaut, c'est dans mon cahier des charges. Si quelqu'un peut m'aider car je n'y arrives pas. Je suis dessus depuis hier

Voici le code :

<html>
<head>
  <title>Quiz Info De Base</title>
  <style>
    body {
      font-family: Verdana, Arial, Helvetica, sans-serif;
      background-color: #ffffff;
     background-attachment : fixed;
      font-size: 11px;
    }
         
    .orange {
      color: #FF0000;
      font-weight: bold;
    
   .noir {
     color: #000000;
      font-weight: bold;
   }
           
  </style>
</head>
<body background=image/imagefond.jpg>                                   
  <?php
    $quizz= array(
          array("<u>Question 1</u> : Quel dossier est spécialement prévu pour vous permettre de stocker vos données personnelles ?","Ordinateur","Documents","Corbeille","2","<b><u>Commentaire</u></b> : Pour rappel, Documents est votre dossier personnel, dans lequel vous rangerez toutes vos données."),
            array("<u>Question 2</u> : Quelle est la version la plus récente de Windows ?","XP","Millenium","Seven (7)","98","Vista","3","<b><u>Commentaire</u></b> : Nous avons dans l'ordre : 98 ; Millenium ; X¨; Vista ; Seven (7)."),
          array("<u>Question 3</u> : Parmi ces unités de mesure, quelle valeur est la plus importante ?","Mega-Octet","Kilo-Octet","Giga-Octet","3","<b><u>Commentaire</u></b> : Nous avons dans l'ordre : Kilo-Octet ; Mega-Octet ; Giga-Octet."),
            array("<u>Question 4</u> : Parmi ces supports de stockage, lequel a disparu ?","La clef USB","La disquette","Le CD-ROM","2","<b><u>Commentaire</u></b> : La disquette a disparu car sa technologie est dépassé."),
          array("<u>Question 5</u> : Que trouve t-on dans la colonne de gauche du menu DEMARRER","La météo","Vos documents","Vos programmes","3","<b><u>Commentaire</u></b> : La colonne de gauche contient tous les programmes que vous possédez dans votre ordinateur."),
            array("<u>Question 6</u> : Que signifie les lettres PC ?","Personnal Computer","Private Computer","Plante Constamment","Petit Castor","1","<b><u>Commentaire</u></b> : Ce sigle est tiré de l'anglais Personnal Computer signifiant en français ordinateur personnel."),
          array("<u>Question 7</u> : Combien y a t-il de boutons au minimum sur une souris ?","1","2","3","4","2","<b><u>Commentaire</u></b> : Il y a au moins le bouton gauche et le bouton droit mais certaines souries sont pourvues de boutons supplémentaires"),
          array("<u>Question 8</u> : Avec l'écran et le clavier, quel est le dernier élément indispensable pour utiliser un ordinateur ?","La manette","La souris","L'imprimante","La webcam","2","<b><u>Commentaire</u></b> : La souris est un élément vitale de l'ordinateur car la quasi-totalité de ce qu'on peut faire se fait via la souris."),
         array("<u>Question 9</u> : Quel élément ne retrouve t-on pas dans le menu DEMARRER ?","Documents","Ordinateur","Images","Corbeille","4","<b><u>Commentaire</u></b> : La corbeille est la seule icône qui ne se trouve que sur le Bureau de Windows"),
         array("<u>Question 10</u> : A quoi ressemble un icône ?","A une flèche","A une petite image avec du texte","A un texte simple","A rien, ça n'existe pas","2","<b><u>Commentaire</u></b> : On retrouve toujours des icônes sur le Bureau de Windows par exemple, ou dans une clef usb... On doit toujours double-cliquer gauche sur une icône."),
    );
            include("infodebasecorrection.php");
  ?>
</body>
</html>

<html>
<head>
  <title>Quiz Info De Base</title>
  <style>
    body {
      font-family: Verdana, Arial, Helvetica, sans-serif;
      background-color: #ffffff;
     background-attachment : fixed;
      font-size: 11px;
    }
         
    .orange {
      color: #FF0000;
      font-weight: bold;
    
   .noir {
     color: #000000;
      font-weight: bold;
   }
           
  </style>
</head>
<body background=image/imagefond.jpg>                                   
  <?php
    $quizz= array(
          array("<u>Question 1</u> : Quel dossier est spécialement prévu pour vous permettre de stocker vos données personnelles ?","Ordinateur","Documents","Corbeille","2","<b><u>Commentaire</u></b> : Pour rappel, Documents est votre dossier personnel, dans lequel vous rangerez toutes vos données."),
            array("<u>Question 2</u> : Quelle est la version la plus récente de Windows ?","XP","Millenium","Seven (7)","98","Vista","3","<b><u>Commentaire</u></b> : Nous avons dans l'ordre : 98 ; Millenium ; X¨; Vista ; Seven (7)."),
          array("<u>Question 3</u> : Parmi ces unités de mesure, quelle valeur est la plus importante ?","Mega-Octet","Kilo-Octet","Giga-Octet","3","<b><u>Commentaire</u></b> : Nous avons dans l'ordre : Kilo-Octet ; Mega-Octet ; Giga-Octet."),
            array("<u>Question 4</u> : Parmi ces supports de stockage, lequel a disparu ?","La clef USB","La disquette","Le CD-ROM","2","<b><u>Commentaire</u></b> : La disquette a disparu car sa technologie est dépassé."),
          array("<u>Question 5</u> : Que trouve t-on dans la colonne de gauche du menu DEMARRER","La météo","Vos documents","Vos programmes","3","<b><u>Commentaire</u></b> : La colonne de gauche contient tous les programmes que vous possédez dans votre ordinateur."),
            array("<u>Question 6</u> : Que signifie les lettres PC ?","Personnal Computer","Private Computer","Plante Constamment","Petit Castor","1","<b><u>Commentaire</u></b> : Ce sigle est tiré de l'anglais Personnal Computer signifiant en français ordinateur personnel."),
          array("<u>Question 7</u> : Combien y a t-il de boutons au minimum sur une souris ?","1","2","3","4","2","<b><u>Commentaire</u></b> : Il y a au moins le bouton gauche et le bouton droit mais certaines souries sont pourvues de boutons supplémentaires"),
          array("<u>Question 8</u> : Avec l'écran et le clavier, quel est le dernier élément indispensable pour utiliser un ordinateur ?","La manette","La souris","L'imprimante","La webcam","2","<b><u>Commentaire</u></b> : La souris est un élément vitale de l'ordinateur car la quasi-totalité de ce qu'on peut faire se fait via la souris."),
         array("<u>Question 9</u> : Quel élément ne retrouve t-on pas dans le menu DEMARRER ?","Documents","Ordinateur","Images","Corbeille","4","<b><u>Commentaire</u></b> : La corbeille est la seule icône qui ne se trouve que sur le Bureau de Windows"),
         array("<u>Question 10</u> : A quoi ressemble un icône ?","A une flèche","A une petite image avec du texte","A un texte simple","A rien, ça n'existe pas","2","<b><u>Commentaire</u></b> : On retrouve toujours des icônes sur le Bureau de Windows par exemple, ou dans une clef usb... On doit toujours double-cliquer gauche sur une icône."),
    );
            include("infodebasecorrection.php");
  ?>
</body>
</html>

Le soucis doit venir de mon script :

<script> 
  function basculeOrange(elem) {
    var liste = document.getElementsByTagName('input');
     for (var i = 0; i < liste.length; i++) {
       if (liste[i].type==="radio"){
        if(liste[i].checked){
          liste[i].nextSibling.className="orange";
        }else{
          liste[i].nextSibling.className="";
        }
      }
    }
  }
  </script>

Shivaan

15 juin 2010 à 15:08:05

Je crois qu'il y a une erreur de copier/coller.
On a pas la source de infodebasecorrection.php

Directeur technique, créateur de jeux HTML5 et fan de JavaScript | La suite de OnHack est sur les rails !

fado59

15 juin 2010 à 15:18:12

Effectivement

Voila le code :

<html>
<head>
  <script>  
var basculeOrange=(function(){
	var deja_repondu=[];
	return function(elem) {
		if(deja_repondu.indexOf(elem.name)==-1){deja_repondu.push(elem.name);}
		var liste = document.getElementsByTagName('input');
		for (var i = 0; i < liste.length; i++) {
			if (liste[i].type==="radio"){
				if(liste[i].checked && deja_repondu.indexOf(liste[i].name)!=-1){
					liste[i].nextSibling.className="orange";
				}else{
					liste[i].nextSibling.className="";
				}
			}
		}
	}
})();

  </script>
</head>
<body>
  <?php

  
  error_reporting(E_ALL ^ E_NOTICE); // pour éviter certaines erreurs à l'affichage
  
  
  if (!isset($_POST['result'])) {
    print "<input onclick='history.go(-1)'  type='image' name='image' value='Retour' src='image/boutonretour.gif'/>"; // Bouton Retour
    print '<center><FONT face="French Script MT" size="50" >Initiation : Info De Base</FONT></center><br>'; // Titre du haut de la page
    print '<center><FONT face="French Script MT" size="5" ><b>Avant de commencer le Quiz, merci de remplir les champs Nom et Prénom</b></FONT></center><br>'; // Titre du haut de la page
    print '<center><FONT face="French Script MT" size="5" ><b>Vérifiez bien que vous avez répondu à toutes les questions puis valider</b></FONT></center><br>'; // Consignes du quiz
    print '<center><FONT face="French Script MT" size="5" ><b>Attention : Toutes les questions ont une réponse cochée par défaut.</b></FONT></center><br>'; 
    print '<center><FONT face="French Script MT" size="5" ><b>Ce nest pas obligatoirement la bonne réponse.</b></FONT></center><br>'; 
    print '<center><FONT face="French Script MT" size="5" ><b>1 seule réponse par question est possible.</b></FONT></center><br>'; 
    print '<center><FONT face="French Script MT" size="5" ><b>Bonne Chance.</b></FONT></center><br>'; 
    print "<form id=\"form1\" action=\"{$_SERVER['PHP_SELF']}\" method='post'>";
    print '<b> Votre Nom :</b>   <input type=text name="nom">'; // Champ Nom
    print '<b> Votre Prénom :</b> <input type=text name="prenom"><br><br>'; // Champ Prénom
 
 
    for ($i=0; $i<count($quizz); $i++) {
      print '<blockquote><span class="noir">';
      print $quizz[$i][0];
      print '</span><br /><br />';
      for ($j=1; $j<count($quizz[$i])-2; $j++) {
        $question=$quizz[$i][$j];
	    if($j == 1) { 
          print "<input type='radio' name=\"$i\" checked=\"$checked\" onclick='basculeOrange(this)'  value=\"$j\" /><span> $question</span><br /> "; // Bouton radio, premier coché par défaut
        }else { 
          print "<input type='radio' name=\"$i\"  onclick='basculeOrange(this)'  value=\"$j\" /><span> $question</span><br /> "; // Lors d'un clic sur un bouton radio, la proposition qui correspond à ce bouton devient orange
	    }
	  } 
      print "</blockquote>";
    }



	
	$nombrepoints=0;
    print "<input type='hidden' name='result' value='voir' /><br />\n<center>";
    print "<input  type='image' src=image/boutonvalider.gif  value='VALIDER' />"; // Bouton Valider
    


	
  }else {
    $nom = $_POST['nom']; // On récupère le nom de la personne
    $prenom = $_POST['prenom']; // On récupère le prénom de la personne
    if(($nom!="") && ($prenom!="")) {
      print '<center><FONT face="French Script MT" size="50" >Initiation Info De Base : Correction</FONT></center><br>'; // Titre de haut de la page Correction
      $points=0;
      for($i=0; $i<count($quizz); $i++ ) { 
        $mareponse = trim($_POST[$i]);
        print  '<blockquote><span class="orange">';
        print $quizz[$i][0]."</span><br /><br />";
        $numero_bonne=$quizz[$i][count($quizz[$i])-2]; // avant dernière valeur du tableau
        $bonnereponse=$quizz[$i][$numero_bonne]; // Bonne réponse
          if ($mareponse==$numero_bonne) { // Si la réponse est celle attendu
            print "<b><u>Réponse</u></b> : Vous avez répondu <b><i>".$bonnereponse."</i></b> et vous avez raison."; // Message si la réponse est correct
            $nombrepoints++;
          }else { // Sinon, si la réponse n'est pas celle attendu
            print "<b><u>Réponse</u></b> :  Vous avez répondu <b>".$quizz[$i][$mareponse]."</b> mais la bonne réponse est <b>".$bonnereponse."</b>  " ; // Message si la réponse est incorrect
          }                
          $commentaire=$quizz[$i][count($quizz[$i])-1]; // dernière valeur du tableau
          print "<br />".$commentaire."<br />"; // Commentaires lors de la correction du quiz      
          print "</blockquote>";
      }
             
    if($nombrepoints==count($quizz)) { // Si j'ai bon à toutes les questions
      print"<h1 align='center'>Félicitations Toutes vos réponses sont correctes!</h1>"; // Message si vous avez répondu correctement à toute les questions
    }else {
      if ($nombrepoints=="") { // Nombre de points = 0 si toutes les réponses sont fausses
	    $nombrepoints = 0 ;
	  }
      print "<br /><h1 align='center'>Vous avez la note de $nombrepoints sur ".count($quizz); // Message si il y a minimum 1 erreur	 
    }


	 // envoi du mail
     $headers ='From: "cyber quizz"<adresse@fai.fr>'."\n";
     $headers .='Reply-To: adresse_de_reponse@fai.fr'."\n";
     $headers .='Content-Type: text/plain; charset="iso-8859-1"'."\n";
     $headers .='Content-Transfer-Encoding: 8bit';
     $mail = mail('thomas.pomart@sfr.fr', 'note du quizz [Info De Base]', "$nom  $prenom  a obtenu la note de $nombrepoints sur 10", $headers); // contenu du mail
     
    }else{ // Message d'alert et redirection vers la page ou il y a les questions. 
	  if(($nom=='')&&($prenom=='')) {
	    echo"<script LANGUAGE='JavaScript'>alert('Veuillez remplir les champs Nom et Prenom ');</SCRIPT>";
        echo"<script LANGUAGE='JavaScript'>window.location='http://127.0.0.1/Utilisateur_Quiz_Des_Initiations/Utilisateur_Quiz_Des_Initiations/infodebase.php';</SCRIPT>";	
      }
	
	  if($nom == '') { // Message d'alert et redirection vers la page ou il y a les questions. 
        echo"<script LANGUAGE='JavaScript'>alert('Veuillez remplir le champ Nom');</SCRIPT>";	
        echo"<script LANGUAGE='JavaScript'>window.location='http://127.0.0.1/Utilisateur_Quiz_Des_Initiations/Utilisateur_Quiz_Des_Initiations/infodebase.php';</SCRIPT>";		

    }
      if($prenom == '') { // Message d'alert et redirection vers la page ou il y a les questions. 
        echo"<script LANGUAGE='JavaScript'>alert('Veuillez remplir le champ Prenom');</SCRIPT>";
        echo"<script LANGUAGE='JavaScript'>window.location='http://127.0.0.1/Utilisateur_Quiz_Des_Initiations/Utilisateur_Quiz_Des_Initiations/infodebase.php';</SCRIPT>";	
      }

	}
  }
  ?>
</body>
</html>

Restimel a corrigé mon soucis ça fonctionne niquel. Par contre est ce que c'est possible comme tu m'a dit restimel de vérifer qu'il y a un bouton de cliqué (donc un bouton qui devient rouge), tu me comprends restimel ^^. Est ce que c'est possible lors du clique de mon bouton valider de verifer que la personne a bien répondu a toutes les questions et donc le cas échéant afficher un message vous n'avez pas répondu a toutes les questions

Shivaan

15 juin 2010 à 15:53:15

Je viens seulement de capter...
Pourquoi tu as créé un 2e sujet pour le même problème, alors qu'il y avait des gens qui t'aidaient sur l'autre ?

Directeur technique, créateur de jeux HTML5 et fan de JavaScript | La suite de OnHack est sur les rails !

fado59

15 juin 2010 à 16:01:39

oui mais j'ai prévenu la personne que je basculerai ici, ça faisait trop gros le sujet labas, plusieurs versions de monde code, etc.. La c'est mon code final. Et puis j'ai mal choisis mon titre ici c'est vrai car maintenant je souhaiterai faire comme j'ai dit plus haut. Vérifier par l'intermédiaire du bouton valider que si je n'ai pas répondu à toutes les questions, j'obtiens un message d'erreur. ( tout en gardant mes boutons par défaut coché ) donc en gros si il n'y a pas une réponse de coché en couleur pour chaque question, si je clique sur valider, j'obtiens un message d'erreur veuillez repondre à toutes les questions.

Si toi ou restimel peuvent m'aider. Merci d'avance pour votre aide. Merci Merci

fado59

16 juin 2010 à 16:06:06

Bonjour,

j'ai essayé de nombreux script dont celui ci :

function validerRadioGroup(radioGroup){
	var res = false;
	var n = radioGroup.length;
	// Je parcours mes radio afin de voir si une d'elle est à l'etat "checked"
	for (var i=0;i<n;i++){
		if (radioGroup[i].checked){
			res = true;
		}
	}
	
	return res;
}

Mais bon je n'arrive pas à l'adapter avec mon compte. Je souhaite qu'en cliquant sur mon bouton valider, on vérifie si les questions sont tous répondu, si ce n'est pas le cas on envoie un message d'erreur veuillez repondre a toutes les questions.

Si quelqu'un peut m'aider, je suis dessus depuis ce matin a la recherche d'un script qui fonctionne avec mon code.