bonjours et bon dimanche à vous,
j'ai un problème avec le dragndrop, je vous explique:
j'ai dix choix que je doit déplacer dans un article avec images et en dessous de l'image le faire glisser dans une phrase , le souci est que le choix ce décale par rapport a la phrase et me demande aussi comment récupéré les valeurs par rapport aux réponses des phrases.
la je suis un peu perdu...
j'ai un problème avec le dragndrop, je vous explique:
j'ai dix choix que je doit déplacer dans un article avec images et en dessous de l'image le faire glisser dans une phrase , le souci est que le choix ce décale par rapport a la phrase et me demande aussi comment récupéré les valeurs par rapport aux réponses des phrases.
<?php
$reponses = array(
'chx' => array(
'reponse' => 'co',
'mot' => 'un',
'image' => 'img/colis.gif',
'phrase' => 'lis'
) ,
'chx_1' => array(
'reponse' => 'ca',
'mot' => 'un',
'image' => 'img/cafe.gif',
'phrase' => 'fe'
) ,
'chx_2' => array(
'reponse' => 'ki',
'mot' => 'un',
'image' => 'img/kiwi.gif',
'phrase' => 'wi'
) ,
'chx_3' => array(
'reponse' => 'qui',
'mot' => 'une é',
'image' => 'img/equipe.gif',
'phrase' => 'pe'
) ,
'chx_4' => array(
'reponse' => 'cu',
'mot' => 'une',
'image' => 'img/cuisine.gif',
'phrase' => 'isine'
) ,
'chx_5' => array(
'reponse' => 'que',
'mot' => 'un cas',
'image' => 'img/casque.gif',
'phrase' => ''
) ,
'chx_6' => array(
'reponse' => 'quette',
'mot' => 'de la mo',
'image' => 'img/moquette.gif',
'phrase' => ''
)
);
foreach($reponses as $cle => $reponse)
{
echo '<form class="form_exercices_ou_result" action="correction_exo_ou_2.php" method="POST" />';
echo'<p class="dropndrag" id="'.$cle.'" draggable="true" ondragstart="drag(event)">'.$reponse['reponse'].'</p>';
echo '<article class="content_img">';
echo '<figure style="height:80px;margin-top:.1em;">';
echo '<img style="margin:0 0 0 -.5em;" src="' . $reponse['image'] . '" alt="' . $reponse['mot'] .''.$reponse['phrase'].'" width:"74" height="74" />';
echo '</figure>';
echo '<p>' . $reponse['mot'] . '</p><p class="zone_drop" id="'.$cle.'" ondrop="drop(event)" ondragover="allowDrop(event)"></p>'.$reponse['phrase'].'</p>';
echo '</article>';
}
echo '<p class="correction_center"><input type="submit" name="correction" value="correction"/></p>';
echo '</form>';
?>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
la je suis un peu perdu...