Comment tracer un trait et récupérer une valeur

Version imprimable

12/04/2011, 19h37
rocofolie

Comment tracer un trait et récupérer une valeur

Bonjour ,
Je ne sais pas si je suis au bon endroit pour poser ma question mais je n'en voyait pas d'autres...

Je vous explique mon soucis.

Pour une amie j'ai crée une qestionnaire que je vais mettre enligne dont elle a besoin pour ses etudes, plusieurs pages de questions en .php avec des formulaires en .html, je recupere ces donnés ( de session ) dans ma bdd pour qu'elle est un tableau des reponses par utilisateur.

Mais dans les dernieres questions il s'agit a l'utilisateur de tracer un trait vertical sur une ligne horizontale pour indiquer son niveau de reponse.
Une fois ce trait tracer , sa position me genere une valeur ( entre 0 et 9 de gauche a droite ).

Donc inséré une image ( de la ligne horizontale ) puis avec l'objet "map" créer des zones.
Mais je ne sais pas comment faire pour que l'utilisateur puisse dessiner un trait et aussi comment récupérer cette valeur ?
Peut etre en passant par du flash mais je n'y connait rien , j'ai vu que l'on pouvait créer des zones de dessins sans flash , mais plusieurs quesitons la aussi, comment faire , comment forcer a ne faire q'un trait , comment recupérer cette donnée ?

Voilou je ne sais aps si c est tres clair mais j'ai vraiment besoin d'aide pour terminer ce questionnaire.

Merci et bonne soirée ;0)
12/04/2011, 22h23
ABCIWEB

Citation:

Envoyé par rocofolie

Mais dans les dernieres questions il s'agit a l'utilisateur de tracer un trait vertical sur une ligne horizontale pour indiquer son niveau de reponse.

pas vraiment clair...

Sinon en javascript tu peux faire afficher ce que tu veux (un segment de ligne par image par exemple) avec les évènements onmouseover, ou onclick, ou encore onmousedown et onmousemove qui simuleraient plus le tracé d'une ligne mais qui seraient plus compliqués à mettre en place.
12/04/2011, 23h41
rocofolie

Merci pour ta reponse ,
je vais essayé d'expliquer ce que je veux faire .
En fait imagine une une ligne horizontale, graduée de 0 a 9, et pour choisir une valeur sur cette ligne l'utilisateur doit faire un trait dessus ou poser un trait dessus.
Je recupere ensuite cette valeur dans ma bdd.

mais je ne sais pas du tout comment m y prendre pour faire ce marquage. :cry:

Ha mais je vient de comprendre comment je peux faire avec ton idée de onmouseover.
Il faudrait que je divise mon image de base vierge (ligne horitontale) en plusieurs segment et lorsque la souris passe au dessus le segment change avec le segment ligne horizontale + trait verticale .
C'est bien cela ?
13/04/2011, 03h37
ABCIWEB

Citation:

Envoyé par rocofolie

Merci pour ta reponse ,
je vais essayé d'expliquer ce que je veux faire .
En fait imagine une une ligne horizontale, graduée de 0 a 9, et pour choisir une valeur sur cette ligne l'utilisateur doit faire un trait dessus ou poser un trait dessus.

Oui mais pourquoi faire un trait dessus ? Pourquoi ne pas simplement cliquer sur la ligne au niveau que l'on souhaite et faire afficher des images (représentant par exemple des led) jusqu'à ce niveau? Tu complique les choses avec ton trait.

Citation:

Envoyé par rocofolie

Ha mais je vient de comprendre comment je peux faire avec ton idée de onmouseover.
Il faudrait que je divise mon image de base vierge (ligne horitontale) en plusieurs segment et lorsque la souris passe au dessus le segment change avec le segment ligne horizontale + trait verticale .
C'est bien cela ?

Oui c'est l'idée mais je reprendrais plutôt mon exemple avec des segments (ou leds) qui s'illuminent onclick par changement de l'image source.
13/04/2011, 08h55
rocofolie

Merci ABCIWEB :ccool:

En fait je veux retranscrire sur une page web un test qui se fait habituellement sur papier, qui est une methode imposée lors de questions .
Au debut je voulais le faire avec des checkbox mais ca deforme la methode de base.
Je vais tenté avec des onmouseover et onclick.

Par contre je ne sais aps trop comment récupérer un variable suite a ce click , comme je le fait sur un variable $_POST ?
14/04/2011, 04h40
ABCIWEB

Citation:

Envoyé par rocofolie

Par contre je ne sais aps trop comment récupérer un variable suite a ce click , comme je le fait sur un variable $_POST ?

Une méthode simple (un peu bourrin mais qui passera partout sans souci de compatibilité entre les navigateurs) serait de constituer ta ligne continue par une succession d'images représentant un segment de ligne. Soit 10 images identiques répétées si tu veux une note de 1 à 10. Et dans chacune d'entre elle tu mets un id incrémenté dont tu récupères "onclick" la valeur que tu transmets dans un champ caché (de type hidden) de ton formulaire.
Tu pourras ainsi récupérer cette valeur dans le post de ton formulaire.
15/04/2011, 11h25
rocofolie

:ccool:
Merci pour ton aide .
Je pensais en effet partir sur ce principe " bourrin " :cry:
Je débute donc je ferai peut etre dans la finesse une prochaine fois :lol:
J'essai ce soir et je te tiens au courant
Merci
Bonne journée
15/04/2011, 18h54
ABCIWEB

Quand je dis "un peu bourrin" ce n'est pas nécessairement un défaut dans le sens où les bourrins avancent quelque soit le terrain ;)

En plus dans ce cas cela ne ralentira pas significativement l'affichage de ta page (un peu théoriquement mais pratiquement imperceptible) , et le code est assez simple à faire.

Utiliser javascript pour récupérer les coordonnées de la souris onclick par rapport à un trait serait plus hi tech mais beaucoup plus délicat à mettre en place pour être cross-browser.

Bon bein j'ai du ratezr quelque chose car je ne comprend pas pourquoi je 'arrive pas a faire de rollover sur ma page ???
Il y a une rreur d syntaxe a priori soit un , soit ; mais où tu n'aurai pas une idée ??:calim2:
Parceque j'ai beau faire bourrin bein j'avance pas donc c est pas top :cry:
Code:

1 2 3 4 5 6 7 8 <div class="question_ligne2"> <p>-Test de Rollover<br/> souvent <a><IMG src="images/ligne_small.jpg" name="ligne" onmouseover="this.src='images/ligne_select.jpg'" onmouseout="this.src='images/ligne_small.jpg'"/></a> jamais </p> </div>

16/04/2011, 10h21
rocofolie

En fait je me repond , je faisait mes pages en php avec du html a l interieur car j'ai besoin de recupérer des variables de SESSION , si je repasse ma page complet e en html ca fonctionne mais du coup comment dois je m y prendre pour que ma page soit en php et affiche correctement le html ? :calim2:

Voilà un exemple complet fonctionnel, il suffit de cliquer quelque part sur la ligne puis de cliquer sur envoyer :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<?php
if (isset($_POST['envoi']))
{
    $note = substr($_POST['ligne_value'],1);
    
    
    echo 'note = '.htmlspecialchars($note);
}  
?>
<!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>Document sans titre</title>
<script type="text/javascript">
<!--    
function marque(el) // el représente l'objet cliqué puisqu'il reçois "this" (= l'objet en cours) dans l'appel de la fonction
{
    // cherche l'élément avec un id = ligne
    var ligne = document.getElementById('ligne');

    // cherche l'élément avec un id = ligne_value
    var input = document.getElementById('ligne_value');

    // si var ligne est défini 
    if (typeof ligne != 'undefined')
        {    
            // Tableau des tag (balises) "img" contenus dans l'élément var ligne 
            var tab_img = ligne.getElementsByTagName('img');

            // Longueur du tableau
            var tab_img_length = tab_img.length;
    

            for (var i= 0; i < tab_img_length; i++)//liste les éléments du tableau
            {
                tab_img[i].src = "images_nav/segment.png";// on attribue à toutes les sources des images du tableau, l'image du segment horizontal continu
                
                if(tab_img[i].id == el.id) // si l'id de l'image du tableau est égal à l'id de l'objet cliqué
                    {
                       //on attribue à la source de l'image de l'objet cliqué, l'image avec le segment vertical
                        el.src = "images_nav/segment_v.png";
                        
                        //si var input est défini on lui donne la valeur de l'id de l'objet cliqué
                        if (typeof input != 'undefined') input.value = el.id; 
                    }
            }
        }
}
-->
</script>
</head>
<body>

<div>  
       
    <form action = "#" method = "post">
    
    <p>
    <span id="ligne">
    <?php
 // on affiche 21 segments de ligne (de 0 à 20) avec un id incrémenté s0,s1,s2,s3...
 for($i=0; $i<21;$i++){?><img src="images_nav/segment.png" id="s<?php echo $i?>" onclick="marque(this)"/><?php } ?>
    </span>
    
    <input type = "hidden"  name="ligne_value" id = "ligne_value" />                     
    <input type = "submit" value = "Envoyez"  name="envoi" />
    </p>    
        
    </form>
    
</div>

</body>
</html>

Mon image de segment horizontal se nomme "segment.png"
Mon image de segment vertical se nomme "segment_v.png"
Les deux images se trouvent dans le répertoire "images_nav"

Une page de test ici (elle ne sera pas longtemps disponible car tout est détaillé dans le code ci-dessus)

17/04/2011, 01h53
rocofolie

:ccool:
C est terrible ça !!! Moi qui rame comme un galerien pour tenter de faire qlque chose d 'a peu pres correct !!!
Je vais regarder ca de pres pour faire en sorte de donnjer une valeur en fonction de l'endroit ou la ligne est cliquée
En tous cas merci car je galere sur mes rollover pour virer le contour des imges.
MErci bcp pour ce coup de pouce :zoubi:
17/04/2011, 18h21
ABCIWEB

Citation:

Envoyé par rocofolie

:ccool:
Je vais regarder ca de pres pour faire en sorte de donnjer une valeur en fonction de l'endroit ou la ligne est cliquée

C'est déjà fait dans l'exemple puisque lorsque l'on clique sur "envoyer" après avoir choisi une position sur la ligne, la valeur apparaît dans le post du formulaire.
Tu voudrais qu'elle apparaissent également avant de cliquer sur le bouton "envoyer" ?
17/04/2011, 22h02
rocofolie

Non, non c'est tres bien comme ça, pas besoin d'afficher la valeur .
Est ce qu'il te serai possible de commenter le code car il faut que je comprenne comment tu l'as construit pour pouvoir le répéter , car j 'ai plusieurs questions sur la meme page avant d'envoyer les données dans ma bdd.

Si je peux abuser ,
-Est il possible de modifier le code pour voir le curseur se promener sur la ligne lorsque je passe dessus ( comme le rollover ) car sur ton exemple ca marche mais une fois inclus dans ma page ca ne marche pas?

En tous cas merci beaucoup pour le code :ccool:

C 'ets mon anniversaire aujourd'hui et c'est un beau cadeau ;)
18/04/2011, 00h13
ABCIWEB

Ok j'ai commenté le code ;)

Pour le reste si tu préfère que le curseur s'affiche onmouseover, il te suffit de remplacer dans le code html généré par php :

Code:

onclick="marque(this)"

par :

Code:

onmouseover="marque(this)"
18/04/2011, 18h54
rocofolie

Encore une fois merci pour ton aide :ccool:

J'ai modifié un peu le code car j ai 32 segment et les chaque paquet de 4 segment consecutif doit avoir la meme valeur , ca marche nickel.

Le soucis c'est que quand je veux ajouter un autre test , sur ma page, qui porte un autre id soit les valeurs des 2 sont identiques et j'ai essayer de modifier soit ni l'un ni l'autre ne fonctionne ??

Voilà un code qui permet d'avoir plusieurs lignes dans une même page :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<?php
if (isset($_POST['envoi']))
{
	$note1 = substr($_POST['ligne_value'],1);
	$note2 = substr($_POST['ligne_value_2'],1);
	
	
	echo 'note_ligne_1 = '.htmlspecialchars($note1);
	echo '<br />';
	echo 'note_ligne_2 = '.htmlspecialchars($note2);
}  
?>
<!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>Document sans titre</title>
<script type="text/javascript">
<!--    
function marque(el,id_ligne,id_input) // el représente l'objet cliqué puisqu'il reçois "this" (= l'objet en cours) dans l'appel de la fonction
{
    // cherche l'élément avec un id = ligne
    var ligne = document.getElementById(id_ligne);

    // cherche l'élément avec un id = ligne_value
    var input = document.getElementById(id_input);

    // si var ligne est défini 
    if (typeof ligne != 'undefined')
        {    
            // Tableau des tag (balises) "img" contenus dans l'élément var ligne 
            var tab_img = ligne.getElementsByTagName('img');

            // Longueur du tableau
            var tab_img_length = tab_img.length;
    

            for (var i= 0; i < tab_img_length; i++)//liste les éléments du tableau
            {
                tab_img[i].src = "images_nav/segment.png";// on attribue à toutes les sources des images du tableau l'image du segment continu
                
                if(tab_img[i].id == el.id) // si l'id de l'image du tableau est égal à l'id cliqué
                    {
                       //on attribue à la source de l'image de l'objet cliqué, l'image avec le segment vertical
                        el.src = "images_nav/segment_v.png";
                        
                        //si var input est défini on lui donne la valeur de l'id de l'objet cliqué
                        if (typeof input != 'undefined') input.value = el.id; 
                    }
            }
        }
}
-->
</script>
</head>
<body>

<div>  
       
    <form action = "#" method = "post">
    
    <p>
    <span id="ligne">
    <?php 
	// on affiche 21 segments de ligne (de 0 à 20) avec un id incrémenté s0,s1,s2,s3...
	for($i=0; $i<21;$i++){?><img src="images_nav/segment.png" id="s<?php echo $i?>" onclick="marque(this,'ligne','ligne_value')"/><?php } ?>
    </span>
    
    <input type = "hidden"  name="ligne_value" id = "ligne_value" />                     
    </p>   
	
    <p>
    <span id="ligne_2">
    <?php
	// on affiche 21 segments de ligne (de 0 à 20) avec un id incrémenté t0,t1,t2,t3...
 	for($i=0; $i<21;$i++){?><img src="images_nav/segment.png" id="t<?php echo $i?>" onclick="marque(this,'ligne_2','ligne_value_2')"/><?php } ?>
    </span>
    
    <input type = "hidden"  name="ligne_value_2" id = "ligne_value_2" />                     
    </p>   
	
	<input type = "submit" value = "Envoyez"  name="envoi" />
 
        
    </form>
    
</div>

</body>
</html>

J'ai modifié aussi la page d'exemple donnée en lien plus haut (avec deux lignes donc).

Donc quand on appelle la fonction "marque" on indique maintenant l'id de la ligne concernée et l'id de l'input où l'on transmet la valeur. En plus de ces deux paramètres supplémentaires à renseigner il y a aussi l'id de l'image source du code html dont il faut changer la première lettre pour les autres lignes puisque l'on ne doit pas avoir deux id identiques.

J'ai laissé la première ligne avec un "s" :

Code:

id="s<?php echo $i?>"

et mis un "t" pour la suivante :

Code:

id="t<?php echo $i?>"

(il faut autant de lettres différentes que de lignes puisque l'on ne doit pas avoir deux id identiques)

J'ai modifié un peu le code pour le mettre à ma sauce , le onmouseclick fonctionne nickel par contre je n'arrive pas à récupérer les valeurs de $_POST .
J'avais modifié les id pour m'y retrouvé dans ma bdd puis remis les memes que toi mais je ne pige pas ce qui deconne, les POST restes deseperement vides?!

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<?php
session_start();
$_SESSION['jeu_enfant'] = $_POST['jeu_enfant'];
echo $_SESSION['jeu_enfant'];

echo '

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
		<head>
			<title>Questionnaire d\'Amandine</title>		 
				<link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css" />
<script type="text/javascript">
<!--	
function marque(el,id_ligne,id_input) // el représente l\'objet cliqué puisqu\'il reçois "this" (= l\'objet en cours) dans l\'appel de la fonction

{
	var ligne = document.getElementById(id_ligne);
	var input = document.getElementById(id_input);
	
	if (typeof ligne != \'undefined\')
		{
			// Tableau des tag (balises) "img" contenus dans l\'élément var ligne 
			var tab_img = ligne.getElementsByTagName(\'img\');
			// Longueur du tableau
			var tab_img_length = tab_img.length;

			//liste les éléments du tableau
			for (var i= 0; i < tab_img_length; i++)

			{
				// on attribue à toutes les sources des images du tableau l\'image du segment continu
				tab_img[i].src = "images/ligne_small.jpg";

				// si l\'id de l\'image du tableau est égal à l\'id cliquée
				if(tab_img[i].id == el.id) 
					{
						//on attribue à la source de l\'image de l\'objet cliqué, l\'image avec le segment vertical
						el.src = "images/ligne_select.jpg";

						//si var input est défini on lui donne la valeur de l\'id de l\'objet cliqué
						if (typeof input != \'undefined\') input_value.value = el.id; 
					}
			}
		}
}
-->
</script>

				</head>


<body>	
		<div class="titre_question_ligne">
			<form name="formulaire" method="post" action="fin.php">
				<h2>Voici quelques propositions, merci d\'indiquer par un trait l\'endroit sur la ligne où vous pensez vous situer.</h2>
				<br><br>
			<div class="question_ligne">
				<p>-chez vous, vous faites la vaisselle...<br/>
					<span id="ligne" >
					jamais
					<img
					src="images/ligne_small.jpg" id="v0" onclick="marque(this,\'ligne\',\'ligne_value\')"/><img src="images/ligne_small.jpg" id="v0" onclick="marque(this,\'ligne\',\'ligne_value\')"/><img src="images/ligne_small.jpg" id="v0" onclick="marque(this,\'ligne\',\'ligne_value\')"/><img src="images/ligne_small.jpg" id="v0" onclick="marque(this,\'ligne\',\'ligne_value\')"/><img src="images/ligne_small.jpg" id="v1" onclick="marque(this,\'ligne\',\'ligne_value\')"/><img src="images/ligne_small.jpg" id="v1" onclick="marque(this,\'ligne\',\'ligne_value\')"/><img src="images/ligne_small.jpg" id="v1" onclick="marque(this,\'ligne\',\'ligne_value\')"/><img src="images/ligne_small.jpg" id="v1" onclick="marque(this,\'ligne\',\'ligne_value\')"/><img src="images/ligne_small.jpg" id="v2" onclick="marque(this,\'ligne\',\'ligne_value\')"/><img src="images/ligne_small.jpg" id="v2" onclick="marque(this,\'ligne\',\'ligne_value\')"/><img src="images/ligne_small.jpg" id="v2" onclick="marque(this,\'ligne\',\'ligne_value\')"/><img src="images/ligne_small.jpg" id="v2" onclick="marque(this,\'ligne\',\'ligne_value\')"/><img src="images/ligne_small.jpg" id="v3" onclick="marque(this,\'ligne\',\'ligne_value\')"/><img src="images/ligne_small.jpg" id="v3" onclick="marque(this,\'ligne\',\'ligne_value\')"/><img src="images/ligne_small.jpg" id="v3" onclick="marque(this,\'ligne\',\'ligne_value\')"/><img src="images/ligne_small.jpg" id="v3" onclick="marque(this,\'ligne\',\'ligne_value\')"/><img src="images/ligne_small.jpg" id="v4" onclick="marque(this,\'ligne\',\'ligne_value\')"/><img src="images/ligne_small.jpg" id="v4" onclick="marque(this,\'ligne\',\'ligne_value\')"/><img src="images/ligne_small.jpg" id="v4" onclick="marque(this,\'ligne\',\'ligne_value\')"/><img src="images/ligne_small.jpg" id="v4" onclick="marque(this,\'ligne\',\'ligne_value\')"/><img src="images/ligne_small.jpg" id="v5" onclick="marque(this,\'ligne\',\'ligne_value\')"/><img src="images/ligne_small.jpg" id="v5" onclick="marque(this,\'ligne\',\'ligne_value\')"/><img src="images/ligne_small.jpg" id="v5" onclick="marque(this,\'ligne\',\'ligne_value\')"/><img src="images/ligne_small.jpg" id="v5" onclick="marque(this,\'ligne\',\'ligne_value\')"/><img src="images/ligne_small.jpg" id="v6" onclick="marque(this,\'ligne\',\'ligne_value\')"/><img src="images/ligne_small.jpg" id="v6" onclick="marque(this,\'ligne\',\'ligne_value\')"/><img src="images/ligne_small.jpg" id="v6" onclick="marque(this,\'ligne\',\'ligne_value\')"/><img src="images/ligne_small.jpg" id="v6" onclick="marque(this,\'ligne\',\'ligne_value\')"/><img src="images/ligne_small.jpg" id="v7" onclick="marque(this,\'ligne\',\'ligne_value\')"/><img src="images/ligne_small.jpg" id="v7" onclick="marque(this,\'ligne\',\'ligne_value\')"/><img src="images/ligne_small.jpg" id="v7" onclick="marque(this,\'ligne\',\'ligne_value\')"/><img src="images/ligne_small.jpg" id="v7" onclick="marque(this,\'ligne\',\'ligne_value\')"/><img src="images/ligne_small.jpg" id="v8" onclick="marque(this,\'ligne\',\'ligne_value\')"/><img src="images/ligne_small.jpg" id="v8" onclick="marque(this,\'ligne\',\'ligne_value\')"/><img src="images/ligne_small.jpg" id="v8" onclick="marque(this,\'ligne\',\'ligne_value\')"/><img src="images/ligne_small.jpg" id="v8" onclick="marque(this,\'ligne\',\'ligne_value\')"/><img src="images/ligne_small.jpg" id="v9" onclick="marque(this,\'ligne\',\'ligne_value\')"/><img src="images/ligne_small.jpg" id="v9" onclick="marque(this,\'ligne\',\'ligne_value\')"/><img src="images/ligne_small.jpg" id="v9" onclick="marque(this,\'ligne\',\'ligne_value\')"/><img src="images/ligne_small.jpg" id="v9" onclick="marque(this,\'ligne\',\'ligne_value\')"/>
					</span>
					<input type = "hidden" name="ligne_value" id = "ligne_value" />
					souvent  
			</div>

			<div class="question_ligne">
			<p>-chez vous, vous repassez...<br/>
					<span id="ligne_2" >
					jamais
					<img
					src="images/ligne_small.jpg" id="r0" onclick="marque(this,\'ligne_2\',\'ligne_value_2\')"/><img src="images/ligne_small.jpg" id="r0" onclick="marque(this,\'ligne_2\',\'ligne_value_2\')"/><img src="images/ligne_small.jpg" id="r0" onclick="marque(this,\'ligne_2\',\'ligne_value_2\')"/><img src="images/ligne_small.jpg" id="r0" onclick="marque(this,\'ligne_2\',\'ligne_value_2\')"/><img src="images/ligne_small.jpg" id="r1" onclick="marque(this,\'ligne_2\',\'ligne_value_2\')"/><img src="images/ligne_small.jpg" id="r1" onclick="marque(this,\'ligne_2\',\'ligne_value_2\')"/><img src="images/ligne_small.jpg" id="r1" onclick="marque(this,\'ligne_2\',\'ligne_value_2\')"/><img src="images/ligne_small.jpg" id="r1" onclick="marque(this,\'ligne_2\',\'ligne_value_2\')"/><img src="images/ligne_small.jpg" id="r2" onclick="marque(this,\'ligne_2\',\'ligne_value_2\')"/><img src="images/ligne_small.jpg" id="r2" onclick="marque(this,\'ligne_2\',\'ligne_value_2\')"/><img src="images/ligne_small.jpg" id="r2" onclick="marque(this,\'ligne_2\',\'ligne_value_2\')"/><img src="images/ligne_small.jpg" id="r2" onclick="marque(this,\'ligne_2\',\'ligne_value_2\')"/><img src="images/ligne_small.jpg" id="r3" onclick="marque(this,\'ligne_2\',\'ligne_value_2\')"/><img src="images/ligne_small.jpg" id="r3" onclick="marque(this,\'ligne_2\',\'ligne_value_2\')"/><img src="images/ligne_small.jpg" id="r3" onclick="marque(this,\'ligne_2\',\'ligne_value_2\')"/><img src="images/ligne_small.jpg" id="r3" onclick="marque(this,\'ligne_2\',\'ligne_value_2\')"/><img src="images/ligne_small.jpg" id="r4" onclick="marque(this,\'ligne_2\',\'ligne_value_2\')"/><img src="images/ligne_small.jpg" id="r4" onclick="marque(this,\'ligne_2\',\'ligne_value_2\')"/><img src="images/ligne_small.jpg" id="r4" onclick="marque(this,\'ligne_2\',\'ligne_value_2\')"/><img src="images/ligne_small.jpg" id="r4" onclick="marque(this,\'ligne_2\',\'ligne_value_2\')"/><img src="images/ligne_small.jpg" id="r5" onclick="marque(this,\'ligne_2\',\'ligne_value_2\')"/><img src="images/ligne_small.jpg" id="r5" onclick="marque(this,\'ligne_2\',\'ligne_value_2\')"/><img src="images/ligne_small.jpg" id="r5" onclick="marque(this,\'ligne_2\',\'ligne_value_2\')"/><img src="images/ligne_small.jpg" id="r5" onclick="marque(this,\'ligne_2\',\'ligne_value_2\')"/><img src="images/ligne_small.jpg" id="r6" onclick="marque(this,\'ligne_2\',\'ligne_value_2\')"/><img src="images/ligne_small.jpg" id="r6" onclick="marque(this,\'ligne_2\',\'ligne_value_2\')"/><img src="images/ligne_small.jpg" id="r6" onclick="marque(this,\'ligne_2\',\'ligne_value_2\')"/><img src="images/ligne_small.jpg" id="r6" onclick="marque(this,\'ligne_2\',\'ligne_value_2\')"/><img src="images/ligne_small.jpg" id="r7" onclick="marque(this,\'ligne_2\',\'ligne_value_2\')"/><img src="images/ligne_small.jpg" id="r7" onclick="marque(this,\'ligne_2\',\'ligne_value_2\')"/><img src="images/ligne_small.jpg" id="r7" onclick="marque(this,\'ligne_2\',\'ligne_value_2\')"/><img src="images/ligne_small.jpg" id="r7" onclick="marque(this,\'ligne_2\',\'ligne_value_2\')"/><img src="images/ligne_small.jpg" id="r8" onclick="marque(this,\'ligne_2\',\'ligne_value_2\')"/><img src="images/ligne_small.jpg" id="r8" onclick="marque(this,\'ligne_2\',\'ligne_value_2\')"/><img src="images/ligne_small.jpg" id="r8" onclick="marque(this,\'ligne_2\',\'ligne_value_2\')"/><img src="images/ligne_small.jpg" id="r8" onclick="marque(this,\'ligne_2\',\'ligne_value_2\')"/><img src="images/ligne_small.jpg" id="r9" onclick="marque(this,\'ligne_2\',\'ligne_value_2\')"/><img src="images/ligne_small.jpg" id="r9" onclick="marque(this,\'ligne_2\',\'ligne_value_2\')"/><img src="images/ligne_small.jpg" id="r9" onclick="marque(this,\'ligne_2\',\'ligne_value_2\')"/><img src="images/ligne_small.jpg" id="r9" onclick="marque(this,\'ligne_2\',\'ligne_value_2\')"/>
					</span>
					<input type = "hidden" name="ligne_value_2" id = "ligne_value_2" />
					souvent  
		</div>

		<div class="question_ligne">
			<p>-chez vous, vous cuisinez...<br/>

		</div>
		<div class="question_ligne">
			<p>-chez vous, vous bricolez...<br/>

		</div>
		<div class="question_ligne">
			<p>-chez vous, vous vous occupez du linge...<br/>

		</div>
		<div class="question_ligne">
			<p>-chez vous, vous vous occupez du linge...<br/>

		</div>
		<div class="question_ligne">
			<p>-chez vous, vous tondez la pelouse...<br/>

		</div>





		<br><br><br>
<TABLE border=5 cellpadding=0 cellspacing=0 align="CENTER"> <TR><TD>


<INPUT type="SUBMIT" value="Suite" name="envoi"></TD></TR> </TABLE>	

</form>
</body>
</html>

';

?>

et je recupere mes variables sur la page fin.php :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<?php
session_start();
$_SESSION['ligne_value'] = $_POST['ligne_value'];
$_SESSION['ligne_value_2'] = $_POST['ligne_value_2'];

echo $_SESSION['ligne_value'];
echo "<br>";
echo $_SESSION['ligne_value_2'];

echo '
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >

<head>
	 <link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css" />
		 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
			<title>Questionnaire d\'Amandine</title>
</head>

<body>
		<h1 class="titre">Merci d\'avoir répondu à ce questionnaire !! </h1>
		<br/><br/><br/><br/><br/>
		<br/><br/><br/><br/><br/>			
		
</body>
</html>

';

?>

19/04/2011, 00h14
ABCIWEB

C'est quoi cette histoire de faire un echo sur tout le code html et javascript ?

Prend modèle sur mon code et réécrit ton code proprement (sans echo ' <!DOCTYPE html .... etc')
19/04/2011, 00h38
rocofolie

C'est ce qu'un ami m'avait conseillé de faire :calim2:
Je vais modifier ca.
19/04/2011, 18h09
rocofolie

Tu as completement raison le echo' pour afficher le html est completement inutile ....mais bon j'ai suivi les conseils d'un ami .

Par contre est il possible que je remplace le id de l'image cliquée par un value ou name ( comme class en css ) afin d'avoir le droit d'avoir des id identiques ?

Car en fait mes segment marchent par groupes de 4 donc les 4 premiers auront la valeur 0, les 4 suivant la valeur 1 etc... ?

Sinon j'ai cherché une solution pour "filtrer" mes données afin de transformer la valeur de l'id en entier ou ne garder que le dernier chiffre mais je ne trouve pas :cry:

En tous cas merci pour l'efficacité c'est vraiment top :ccool:

Le plus simple est de ne rien changer sur le principe et de faire un petit traitement en php à la réception du post.

Par exemple si tu veux une note de 0 à 9 par interval de 4 segments qui auront la même note, tu peux faire ceci :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<?php
if (isset($_POST['envoi']))
{

	function Note_interval($note,$interval)
	{
		$note = substr($note,1);// supprime le premier caractère qui est un lettre
		$note = intval($note); // caste le résultat en entier
		$note = floor($note/$interval);//arrondi à l'entier inférieur
		
		return $note;
	}
	
	
	$interval = 4;
	
	$note1 = Note_interval($_POST['ligne_value'],$interval);
		
	$note2 = Note_interval($_POST['ligne_value_2'],$interval);
		
		
	echo 'note ligne 1 = '.htmlspecialchars($note1);
	echo '<br />';
	echo 'note ligne 2 = '.htmlspecialchars($note2);
}

?>
<!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>Document sans titre</title>
<script type="text/javascript">
<!--    
function marque(el,id_ligne,id_input) // el représente l'objet cliqué puisqu'il reçois "this" (= l'objet en cours) dans l'appel de la fonction
{
    // cherche l'élément avec un id = ligne
    var ligne = document.getElementById(id_ligne);

    // cherche l'élément avec un id = ligne_value
    var input = document.getElementById(id_input);

    // si var ligne est défini 
    if (typeof ligne != 'undefined')
        {    
            // Tableau des tag (balises) "img" contenus dans l'élément var ligne 
            var tab_img = ligne.getElementsByTagName('img');

            // Longueur du tableau
            var tab_img_length = tab_img.length;
    

            for (var i= 0; i < tab_img_length; i++)//liste les éléments du tableau
            {
                tab_img[i].src = "images_nav/segment.png";// on attribue à toutes les sources des images du tableau l'image du segment continu
                
                if(tab_img[i].id == el.id) // si l'id de l'image du tableau est égal à l'id cliqué
                    {
                       //on attribue à la source de l'image de l'objet cliqué, l'image avec le segment vertical
                        el.src = "images_nav/segment_v.png";
                        
                        //si var input est défini on lui donne la valeur de l'id de l'objet cliqué
                        if (typeof input != 'undefined') input.value = el.id; 
                    }
            }
        }
}
-->
</script>
</head>
<body>

<div>  
       
    <form action = "#" method = "post">
    
    <p>
    <span id="ligne">
    <?php 
	// on affiche 40 segments de ligne (de 0 à 39) avec un id incrémenté s0,s1,s2,s3...
	for($i=0; $i<40;$i++){?><img src="images_nav/segment.png" id="s<?php echo $i?>" onclick="marque(this,'ligne','ligne_value')"/><?php } ?>
    </span>
    
    <input type = "hidden"  name = "ligne_value" id = "ligne_value" />                     
    </p>   
	
    <p>
    <span id="ligne_2">
    <?php
	// on affiche 40 segments de ligne (de 0 à 39) avec un id incrémenté t0,t1,t2,t3...
 	for($i=0; $i<40;$i++){?><img src="images_nav/segment.png" id="t<?php echo $i?>" onclick="marque(this,'ligne_2','ligne_value_2')"/><?php } ?>
    </span>
    
    <input type = "hidden"  name = "ligne_value_2" id = "ligne_value_2" />                     
    </p>   
	
	<input type = "submit" value = "Envoyez"  name="envoi" />
 
        
    </form>
    
</div>

</body>
</html>

Note que dans la boucle j'ai fait afficher 40 segments puisque tu veux 10 notes de 0 à 9 par groupe de quatre.

21/04/2011, 23h43
rocofolie

Merci ,
Mais en fait du coup je n'avait pas vu ta reponse du coup j'ai appliqué la méthode "barbare" pour appliqué une valeur de 4 en 4 lol
Mais bon ca fonctionne , je vais me pencher un peu plus tard sur le filtre a appliquer mais ne recupérer que la valeur entiere .

Je pensais etre arrivé au bout mais le soucis c est que je n arrive plus a me connecté a ma bdd , ou en tous cas a remplir le tableau de ma bdd.

Pourtant je recupere bien mes données de sessions sur la derniere page de mon questionnaire :cry:

Je cherche pourquoi ....

Oui vaudrait mieux faire comme je t'ai montré car un id doit être unique dans un code html.
Et en fait la fonction pour faire un point tous les quatre (ou n segments) se résume à :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 function Note_interval($note,$interval) { $note = substr($note,1);// supprime le premier caractère qui est un lettre $note = intval($note); // caste le résultat en entier $note = floor($note/$interval);//arrondi à l'entier inférieur return $note; } $interval = 4; $note1 = Note_interval($_POST['ligne_value'],$interval);
donc bon c'est tout simple.

22/04/2011, 19h37
rocofolie

Bonjour ,
heuu tout simple , oui quand tu as la réponse c'est vrai ... mais je suis loin de maitriser .

Pour simplifier j'ai utilisé un start négatif car j'avais parfois 2 ou 3 caractere devant le chiffre du coup j'ai fait ça :
$_SESSION['ligne_value'] = substr($_POST['ligne_value'],-1);
$_SESSION['ligne_value2'] = substr($_POST['ligne_value2'],-1);

Je suis arrivé au bout , reste plus qu'a mettre en forme pour etre compatible IE et Firefox.
Merci beaucop pour ton aide ;0) :ccool:
23/04/2011, 03h48
ABCIWEB

Citation:

Envoyé par rocofolie

Pour simplifier j'ai utilisé un start négatif car j'avais parfois 2 ou 3 caractere devant le chiffre.

Et pourquoi tu avais 2 ou 3 caractères devant le chiffre ? Enfin bon oui si tu veux plus de 26 lignes par page je peux comprendre que tu aies modifié l'exemple mais tu aurais pu aussi mettre systématiquement deux lettres (ou plus) et faire par exemple $note = substr($note,2).
Cela dit ta méthode est intéressante mais elle limite les notes de 0 à 9 d'où les complications dans le code html ;)