79 lines
3.0 KiB
JavaScript
79 lines
3.0 KiB
JavaScript
var boiteId = 0;
|
|
var draggedBox = null;
|
|
|
|
// Tableau des couleurs prédéfinies
|
|
var colors = ['#f8f5bb', '#f8d8bb', '#bbe7f8', '#bef8bb', '#fdb0ec'];
|
|
|
|
function getRandomColor() { // Fonction pour choisir une couleur aléatoire parmi les couleurs prédéfinies
|
|
return colors[Math.floor(Math.random() * colors.length)];
|
|
}
|
|
|
|
function createBox() { // Créer une boîte
|
|
var boite = document.createElement('div');
|
|
boite.id = 'boite' + boiteId++;
|
|
boite.className = 'boite';
|
|
boite.style.backgroundColor = getRandomColor(); // Choisir une couleur de fond aléatoire parmi les couleurs prédéfinies
|
|
|
|
var text = document.createElement('p'); // Créer un élément de texte éditable
|
|
text.contentEditable = true;
|
|
text.className = 'texte-a-editer';
|
|
text.textContent = 'Cliquez pour éditer';
|
|
boite.appendChild(text);
|
|
|
|
var deleteButton = document.createElement('button'); // Créer un bouton de suppression
|
|
deleteButton.textContent = 'Supprimer';
|
|
deleteButton.className = 'custom-button';
|
|
deleteButton.addEventListener('click', function(e) {
|
|
e.stopPropagation(); // Empêche le déclenchement de l'événement mousedown sur la boîte
|
|
boite.remove();
|
|
});
|
|
boite.appendChild(deleteButton);
|
|
boite.addEventListener('mousedown', function(e) { // Ajouter un gestionnaire d'événements pour le début du déplacement
|
|
if (e.target === text || e.target === deleteButton) {
|
|
return; // Si l'utilisateur a cliqué sur le texte ou le bouton de suppression, ne pas déplacer la boîte
|
|
}
|
|
draggedBox = boite;
|
|
e.preventDefault(); // Empêche la sélection de texte pendant le déplacement
|
|
});
|
|
document.addEventListener('mousemove', function(e) { // Ajouter un gestionnaire d'événements pour le déplacement
|
|
if (draggedBox) {
|
|
draggedBox.style.left = e.pageX - draggedBox.offsetWidth / 2 + 'px';
|
|
draggedBox.style.top = e.pageY - draggedBox.offsetHeight / 2 + 'px';
|
|
}
|
|
});
|
|
document.addEventListener('mouseup', function(e) { // Ajouter un gestionnaire d'événements pour la fin du déplacement
|
|
draggedBox = null;
|
|
});
|
|
document.getElementById('container').appendChild(boite); // Ajouter la boîte au conteneur
|
|
}
|
|
|
|
|
|
|
|
|
|
// Obtenir les résultats du sondage sur les musiques
|
|
|
|
|
|
function getResults() {
|
|
// Récupérer les valeurs des cases à cocher
|
|
var option1Checked = document.getElementById('myForm').elements['option1'].checked;
|
|
var option2Checked = document.getElementById('myForm').elements['option2'].checked;
|
|
|
|
// Initialiser un tableau pour stocker les résultats
|
|
var results = {
|
|
"Option 1": 0,
|
|
"Option 2": 0
|
|
};
|
|
|
|
// Mettre à jour le tableau des résultats en fonction des cases cochées
|
|
if (option1Checked) {
|
|
results["Option 1"]++;
|
|
}
|
|
if (option2Checked) {
|
|
results["Option 2"]++;
|
|
}
|
|
|
|
// Afficher les résultats dans la console
|
|
console.log(results);
|
|
}
|
|
|