Faire apparaitre des radio bouton aléatoirement [Résolu]

Signaler
Messages postés
37
Date d'inscription
dimanche 5 juillet 2015
Statut
Membre
Dernière intervention
3 juillet 2020
-
Messages postés
37
Date d'inscription
dimanche 5 juillet 2015
Statut
Membre
Dernière intervention
3 juillet 2020
-
Bonjour, après x recherches, je ne trouve toujours pas de réponses à mon problème.

Je souhaite faire apparaître des radio bouton dans un ordre aléatoire, mais cependant je ne trouve rien de concluant sur le net.


Merci de votre aide qui me sera précieuse.

button1
button2
button3

button3
button2
button1

ex


<input type="radio" name="question-8-answers" id="A" value=""/>
<label for="question-8-answers-A">blabla</label> <br>


<input type="radio" name="question-8-answers" id="A" value=""/>
<label for="question-8-answers-B">blabla3</label> <br>


<input type="radio" name="question-8-answers" id="A" value=""/>
<label for="question-8-answers-B">blabla2</label> <br>

2 réponses

Messages postés
29753
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
16 octobre 2020
2 849
Bonjour,


Où sont stockées les données à afficher ?
Sais tu ce qu'est un array ?
As tu regardé la fonction javascript Math.random()
Qu'as tu essayé ?
Messages postés
37
Date d'inscription
dimanche 5 juillet 2015
Statut
Membre
Dernière intervention
3 juillet 2020

les données à afficher sont dans des variables en php.
Oui, je vois ce que sais,
Cette fonction, je l'ai déjà utilisé pour faire "bouger des div de manière dynamique en jquery.
Rien de bien concluant et présentable malheureusement. Je peux te donner plus de code si tu veux :

<div class="container">
                        <div>
                            <?php echo $q1; ?>
                                <input type="radio" name="question-1-answers" id="question-1-answers-A" value="<?php echo $pr1A; ?>" />
                                <label for="question-1-answers-A"><?php echo $pr1A; ?></label> <br>

                            
                                <input type="radio" name="question-1-answers" id="question-1-answers-B" value="<?php echo $pr1B; ?>" />
                                <label for="question-1-answers-B"><?php echo $pr1B; ?></label> <br>
                            
                                <input type="radio" name="question-1-answers" id="question-1-answers-C" value="<?php echo $r1; ?>" />
                                <label for="question-1-answers-C"><?php echo $r1; ?></label> <br>

                            
                                <input type="radio" name="question-1-answers" id="question-1-answers-D" value="<?php echo $pr1D; ?>" />
                                <label for="question-1-answers-D"><?php echo $pr1D; ?></label> <br>
                        </div>    
                        <div>
                            <?php echo $q2; ?>
                                <p> Réponse : <input type="text" id="question-2-answers" minlength="5" maxlength="15" name="question-2-answers" size="15"> </p> <br>
                        </div>                                 
                        <div>
                            <?php echo $q3; ?>
                                <input type="radio" name="question-3-answers" id="question-3-answers-A" value="<?php echo $pr3A; ?>" />
                                <label for="question-3-answers-A"><?php echo $pr3A; ?></label> <br>
                            
                                <input type="radio" name="question-3-answers" id="question-3-answers-B" value="<?php echo $r3; ?>" />
                                <label for="question-3-answers-B"><?php echo $r3; ?></label> <br>
                            
                                <input type="radio" name="question-3-answers" id="question-3-answers-C" value="<?php echo $pr3C; ?>" />
                                <label for="question-3-answers-C"><?php echo $pr3C; ?></label> <br>
                            
                                <input type="radio" name="question-3-answers" id="question-3-answers-D" value="<?php echo $pr3D; ?>" />
                                <label for="question-3-answers-D"><?php echo $pr3D; ?></label> <br>
                        </div>



<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> // permet de pouvoir inclure un fichier permettant d'exec le js VERSION :   mai 2019 </script>  
   <script type="text/javascript">
    $(document).ready(function(){
        var collection = $("div.container div").get();
        collection.sort(function() {
            return Math.random()*10 > 5 ? 1 : -1;
        });
        $.each(collection,function(i,el) {
            $(el).appendTo( $(el).parent() );
        });
    });
    </script>

Messages postés
29753
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
16 octobre 2020
2 849
Tes questions / réponses sont dans des variables PHP ?
Tu veux "randomizer" les questions et les réponses ? que les questions ? que les réponses ?

Tu les as initialisé comment ? Elles ne viennent pas d'une BDD sql ?

Si tu elles sont dans une bdd ... dans ce cas, tu peux faire du random directement dans ta requête sql.

Si elles sont juste dans des variables php ..... stocke les, plutot, dans un array.
Il te sera alors facile d'utiliser les fonctions php ( au choix) shuffle ou array_rand, et tu n'auras plus qu'à afficher tes questions à l'aide de boucle foreach sur ton array.
Messages postés
37
Date d'inscription
dimanche 5 juillet 2015
Statut
Membre
Dernière intervention
3 juillet 2020
>
Messages postés
29753
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
16 octobre 2020

C'est bon j'ai trouvé !
j'ai procédé autrement :
pour afficher de manière aléatoire le choix multiple

        <form action="grade.php" method="post" id="quiz">
                <ol>
                    <div class="container">
                        <?php 
                    
            
                        for ($i = 1; $i <= $nbQuestions ; $i++) {
                            echo "<div>";
                            echo ${'q'.$i};
                            if (isset(${'pr'.$i.'A'})) {
                                echo "<input type=\"radio\" name=\"question-".$i."-answers\" id=\"question-".$i."-answers-A\" value=\"${'pr'.$i.'A'}\" />
                                <label for=\"question-".$i."-answers-A\">${'pr'.$i.'A'}</label> <br>";
                            }
                            if (isset(${'pr'.$i.'B'})) {
                                echo "<input type=\"radio\" name=\"question-".$i."-answers\" id=\"question-".$i."-answers-B\" value=\"${'pr'.$i.'B'}\" />
                                <label for=\"question-".$i."-answers-B\">${'pr'.$i.'B'}</label> <br>";
                            }
                            if (isset(${'pr'.$i.'C'})) {
                                echo "<input type=\"radio\" name=\"question-".$i."-answers\" id=\"question-".$i."-answers-C\" value=\"${'pr'.$i.'C'}\" />
                                <label for=\"question-".$i."-answers-C\">${'pr'.$i.'C'}</label> <br>";
                            }
                            if (isset(${'pr'.$i.'D'})) {
                                echo "<input type=\"radio\" name=\"question-".$i."-answers\" id=\"question-".$i."-answers-D\" value=\"${'pr'.$i.'D'}\" />
                                <label for=\"question-".$i."-answers-D\">${'pr'.$i.'D'}</label> <br>";
                            }
                            if (isset(${'r'.$i})) {
                                echo "<input type=\"radio\" name=\"question-".$i."-answers\" id=\"question-".$i."-answers-D\" value=\"${'r'.$i}\" />
                                <label for=\"question-".$i."-answers-D\">${'r'.$i}</label> <br>";  
                            }
                            echo "</div>";
                        } ?>
               
                        </ol>
                    <div>
                        <p> Email *  : <input type="email" id="email" name="email" required size="15"> </p>
                        <p> Nom :<input type="text" id="name" name="name"  size="15"> </p>
                        <p> Âge :<input type="number" id="age" name="age"  size="15"> </p>
                        <p> <i> le champ avec un astérisque * est requis afin que je puisse vous envoyer la correction </i> <p>
                        <input type="submit" value="Submit Quiz" />
        </form>
      
    </body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> // permet de pouvoir inclure un fichier permettant d'exec le js VERSION :   mai 2019 </script> 
    <script type="text/javascript">
    $(document).ready(function(){
        var collection = $("div.container div").get();
        collection.sort(function() {
            return Math.random()*10 > 5 ? 1 : -1;
        });
        $.each(collection,function(i,el) {
            $(el).appendTo( $(el).parent() );
        });
    });
    </script>