QUIZZ AVEC GLISSÉ DÉPOSÉ D'OBJETS COMPATIBLE (DRAG&DROP) .

<!-- drag&drop d'objets

function ctrl(e){  // e pour gecko;
fx=ie?db.clientWidth:innerWidth-20   //l fenêtre
fy=ie?db.clientHeight:innerHeight    //h fenêtre
sx=ie?db.scrollLeft:pageXOffset;      //scroll h
sy=ie?db.scrollTop:pageYOffset;       //scroll v
px=ie?event.clientX+sx:e.pageX;      //curseur x
py=ie?event.clientY+sy:e.pageY;      //curseur y
}

function getobjet(e){ //sélection de l'objet sous la souris
if (ie) {
  e=window.event;
  el = e.srcElement;
 } else el = e.target;
if(!el.tagName)el=el.parentNode // bug NS7, mozilla
}

function drag(e){
getobjet(e);
if (el.id.substr(0,2)=="dd" && ob==D){  // si l'objet est déplaçable
  ob=el; // le capture
  if(el.parentNode.parentNode.id == "rcpDIV"){ // évite la case vide
    el.parentNode.style.width = "1.5em";
    }
  }
return false // necessaire Gecko
}

function bouge(e){
ctrl(e);
if(ob != D){
  with(ob.style){position="absolute";display="inline";
    left=px+"px";top=py+3+"px";cursor="move"
    }
  }
return false // necessaire Gecko
}

function drop(e){ // dépose l'objet
getobjet(e);
if (el.id.substr(0,2)=="dd")el=el.parentNode; // une case peut contenir plusieurs réponses
if ( el.parentNode.id.substr(0,3) == "rcp" ){  // si c'est bien une case réponse
  tag = el.parentNode.id.substr(3,6); // tag des cases réponse
  if(el.tagName == tag){
    el.appendChild(ob); // colle l'objet dans la case sélectionnée
    el.style.width = "auto"; // nécessaire pour Gecko et opéra dans le quizz2
    with(ob.style){position="";}
    ob=D; // annule la sélection
    verif(); //inscrit le score
    }
  }
}

function verif(){ // vérifie l'emplacement des objets et affiche le score
var cases=D.getElementById('rcp'+tag).getElementsByTagName(tag);
score=0;ob_present=0;
for(var i=0;i<cases.length;i++){
  if (cases[i].childNodes[1]){
    ob_present+=1;
    if (cases[i].childNodes[1].id =="dd"+i) score+=1; 
    }
  }
  s=(score>1)?'s':''; //singulier ou pluriel
  D.getElementById('resultat').innerHTML = score +' bonne'+s+' réponse'+s+' sur '+ob_present;
}

function initdrag(){
D=document;ie=D.all?1:0;op=window.opera?1:0;dtd= D.compatMode=="CSS1Compat"?1:0;ob=D
db=ie&!op&&dtd?D.documentElement:D.body //exception IE6 dtd
D.onmousedown=drag;D.onmouseup=drop;D.onmousemove=bouge
}
//-->

Télécharger le zip

18 octobre 2004 14:37:03 :

améliorations , commentaires

25 octobre 2004 00:44:25 :

fichier js séparé Deux éxemples commentés : un avec des images et l'autre avec des divs.

28 octobre 2004 00:11:25 :

bug NS6 Mozilla 1 corrigé et améliorations diverses

28 octobre 2004 00:16:16 :

ajout de l'url

25 janvier 2005 13:11:10 :

Un seul fichier js pour les 2 types de Quizz Optimisation

18 février 2005 21:59:11 :

quizz2 pas mal amélioré