11552 sujets

JavaScript, DOM et API Web HTML5

Du jamais vue !! Questionnaire : réponse liée (Appariement)

Bonjour,
je cherche à réaliser un formulaire de questionnaire ou on peut lier deux réponses entre elles exemple :
navigateur ------ firefox
animal ---------- mouton

Voyez ? Bon il faut en plus qu'on puisse relier en diagonal ... une idée ? javascript/jquery ou flash ?
Modifié par Su4p (04 May 2011 - 11:33)
Bon alors j'ai avancé !!!!!!!!!!!!!!!

a. J'arrive à relier deux éléments ensemble. En traçant une ligne entre les deux ^^.
b. j'arrive à faire en sorte qu'on ne puisse pas relier deux éléments de la même colonne.
c. J'arrive à faire en sorte qu'on ne puisse relier plus d'un élément avec un autre.
d. j'arrive à générer un tableau de résultat.

Mais là je bloque .... j'ai un bug lorsque

1. je lie animal avec mouton
2. je lie Firefox avec navigateur
3. je lie OS avec mouton Smiley decu

Par contre si je fais :
1. je lie animal avec mouton
2. je lie Firefox avec navigateur
3. je lie OS avec navigateur

Tout se passe comme prévu !

var mouseX=0;
var mouseY=0;
var startX=0;
var startY=0;
var oPositionFirst='';
var currentMode='notLoaded';
var reponse = new Array();

reponse[0] = new Array();
var i = 0;

function getMouseXY(aEvent)	//deplacement de l'element draguer
{
  	var myEvent = aEvent ? aEvent : window.event; //recuperation de l'evenement selon le navigateur
	//on recupere cible de l'evenemet
	var target= myEvent.target ? myEvent.target : myEvent.srcElement;
	if(myEvent.offsetX)
	{
		mouseX=myEvent.clientX+document.body.scrollLeft;
		mouseY=myEvent.clientY+document.body.scrollTop;
	}
	else
	{
		mouseX=myEvent.pageX;
		mouseY=myEvent.pageY;
	}
}

function tryDrawLine(p_divClass)
{
	if(currentMode=='firstPositionCaptured')
	{
		drawLine(startX,startY,mouseX,mouseY,document.getElementById('couleurSelector').value,document.getElementById('espacementSelector').value,'myDiv',p_divClass);
	}
}

function captureClick(p_object)
{
	//on enregistre la valeur
	oValue = p_object.value;
	
	//on enregistre la position de la colonne
	oPosition = p_object.accessKey;

	if(oPosition != oPositionFirst) 
	{
		// si il ne sont pas dans la meme colone alors on enregistre la position de la colonne dans la variable global
		oPositionFirst = oPosition;
		// puis on cherche si un trait reli déjà nos boutons grace aux classes de nos div qui contienne les valeurs des deux boutons
		if ($('div').hasClass(oValue)) {
			//si un trait a deja été tracé on le supprime
			$('.'+oValue).remove();
			for (j = 0 ; j < reponse.length ; j++)
			{
				//ensuite on parcours le tableau de resultat afin de supprimer les entrées dans notre tableau qui coresponde au trait supprimé
				if (oValue==reponse[j][0]||oValue==reponse[j][1])
				{
					//on remplace les valeurs qu'on veut supprimer par les valeur au derniere indice de notre tableau
					reponse[j][0] = reponse[reponse.length-1][0];
					reponse[j][1] = reponse[reponse.length-1][1];
					alert('['+j+'][0]=>'+reponse[j][0]+'['+j+'][1]=>'+reponse[j][1]);
					//puis on unset la derniere case
					reponse.pop();
					// et on decrémente notre compteur
					i--;
					
				}
			}
			
		}
		//si le premier point n'a pas été défini
		if(currentMode=='noPositionDefined')
		{
			
			reponse[i] = new Array();
			currentMode='firstPositionCaptured';
			startX=mouseX;
			startY=mouseY;
			alert('reponse['+i+'][0] ='+oValue);
			reponse[i][0] = oValue;
		}
		else
		{
			alert('reponse['+i+'][0] ='+oValue);
			reponse[i][1] = oValue;
			alert(reponse[i][1]);
			tryDrawLine(reponse[i][0]+' '+reponse[i][1]);
			currentMode='noPositionDefined';
			i++;
			oPositionFirst='';
		}
	}
	else
	{
		currentMode='noPositionDefined';
		oPositionFirst='';
		reponse.pop();
	}
	
}
function afficheResultat(){
	for (j=0;j < reponse.length;j++){
		alert('['+j+'][0]=>'+reponse[j][0]+'['+j+'][1]=>'+reponse[j][1]);
	}
}
//Fonction permettant de tracer une ligne en JS
// Cette fonction créer autant de bloc div flottant que nécessaire et la place de manière régulière le long du segment à tracer.
//	Arguments:
//		-	x1,y2 coordonnés du début du segment
//		-	x2,y2 coordonnés de la fin du segment
//		-	color couleur du tracé
//		-	espacementPointillé, entier décrivant en pixel l'espacement entres les points du tracé
//		-	divId, id d'un élement HTML comme un div par exemple. Cet objet servira de container pour le code HTML des points.
//						Je conseille d'utiliser un div flottant placé en 0,0 de dimension 0,0 en position:absolute
function drawLine(x1,y1,x2,y2,color,espacementPointille,divId,divClass)
{
	if(espacementPointille<1) { espacementPointille=1; }
	
	//on calcule la longueur du segment
	var lg=Math.sqrt((x1-x2)*(x1-x2)+(y1-y2)*(y1-y2));
	
	//on determine maintenant le nombre de points necessaires
	var nbPointCentraux=Math.ceil(lg/espacementPointille)-1;
	
	//stepX, stepY (distance entre deux points de pointillés);
	var stepX=(x2-x1)/(nbPointCentraux+0);
	var stepY=(y2-y1)/(nbPointCentraux+0);
	
	//on recreer un point apres l'autre
	var strNewPoints='';
	for(var i=1 ; i<nbPointCentraux ; i++)
	{
		strNewPoints+='<div class="'+divClass+'" style="font-size:1px; width:1px; height:1px; background-color:'+color+'; position:absolute; top:'+Math.round(y1+i*stepY)+'px; left:'+Math.round(x1+i*stepX)+'px; ">&nbsp;</div>';
	}
	
	//pointe de depart
	strNewPoints+='<div class="'+divClass+'" style="font-size:1px; width:3px; height:3px; background-color:'+color+'; position:absolute; top:'+(y1-1)+'px; left:'+(x1-1)+'px; ">&nbsp;</div>';
	//point d'arrive
	strNewPoints+='<div  class="'+divClass+'" style="font-size:1px; width:3px; height:3px; background-color:'+color+'; position:absolute; top:'+(y2-1)+'px; left:'+(x2-1)+'px; ">&nbsp;</div>';

	
	//on suprimme tous les points actuels et on mets les nouveaux div en place
	//obj container des points
	var myContainer=document.getElementById(divId);
	myContainer.innerHTML= myContainer.innerHTML+ strNewPoints;
}



<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Trac&#39012;e ligne en javascript</title>
<script language="javascript" type="text/javascript" src="drawLine.js"></script>
<script language="javascript" type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
</head>

<body onMouseMove="getMouseXY(event); "  style="background-color:#6699CC;" onLoad="currentMode='noPositionDefined';">
<div id="myDiv" style="position:absolute; width: 0px; height: 0px; left: 0px; top: 0px; border: 1px none #000000;"></div>
Cliquez simplement pour choisir le point de d&#44129;rt, puis d&#44140;ac&#39020;a sourie.
<p>Couleur
  <select name="couleurSelector" id="couleurSelector">
    <option value="red">red</option>
    <option value="green">green</option>
    <option value="blue">blue</option>
    <option value="white" selected>white</option>
    <option value="yellow">yellow</option>
    <option value="black">black</option>
          </select>
</p>
<p>Pointill&#37706;  <select name="espacementSelector" id="espacementSelector">
    <option value="1">1px</option>
    <option value="2">2px</option>
    <option value="5" selected>5px</option>
    <option value="10">10px</option>
    <option value="20">20px</option>
    <option value="50">50px</option>
      </select>
</p>
<table>
	<tr>
		<td width="300px">
			<button accessKey="gauche" type="button" value="Animal" onClick="captureClick(this);"  >Animal</button>
		</td>
		<td>
			<button accessKey="droite" type="button" value="Mouton" onClick="captureClick(this);" >Mouton</button>
		</td>
	</tr>
	<tr>
		<td>
			<button accessKey="gauche" type="button" value="Firefox" onClick="captureClick(this);" >Firefox</button>
		</td>
		<td>
			<button accessKey="droite" type="button" value="Navigateur" onClick="captureClick(this);" >Navigateur</button>
		</td>
	</tr>
	<tr>
		<td>

			<button accessKey="gauche" type="button" value="OS" onClick="captureClick(this);" >OS</button>
		</td>
		<td>
			<button accessKey="droite" type="button" value="Jeux" onClick="captureClick(this);" >Jeux</button>
		</td>
	</tr>
	<tr>
		<td>
			<button accessKey="gauche" type="button" value="Starcraft" onClick="captureClick(this);" >Starcraft</button>	
		</td>
		<td>
			<button accessKey="droite" type="button" value="WinXP" onClick="captureClick(this);" >Win XP</button>
		</td>
	</tr>
</table>
<input type="button" onclick="afficheResultat()" value="afficheResultat"/>
<input type="button" onclick="alert(reponse.length);reponse.pop();alert(reponse.length);" value="pop"/>
</body>

</html>


Je vous en supplie aidez moi !!!! je suis vraiment pas loin....[/i][/i][/i][/i][/i][/i]
Indice le problème est ici :
reponse[j][0] = reponse[reponse.length-1][0]; 
reponse[j][1] = reponse[reponse.length-1][1]; 
alert('['+j+'][0]=>'+reponse[j][0]+'['+j+'][1]=>'+reponse[j][1]); 
//puis on unset la derniere case 
reponse.pop(); 
// et on decrémente notre compteur 
i--;

Tout ça parce que on ne peut pas faire unset(reponse[j])
Sujet clos
Aller à