Sujet Précédent Sujet Suivant

Besoin d'aide pour tirage de couleur simple

benjelisa Messages postés 4 Date d'inscription lundi 26 novembre 2018 Statut Membre Dernière intervention 26 novembre 2018 - 26 nov. 2018 à 14:07
benjelisa Messages postés 4 Date d'inscription lundi 26 novembre 2018 Statut Membre Dernière intervention 26 novembre 2018 - 26 nov. 2018 à 17:30

Bonjour à toutes et à tous,

J'aurais besoin d'une aide s'il vous plaît concernant un tirage de couleurs que je souhaiterais mettre sur mon site internet. Je travaille sur MAC.
Je ne pense pas que ce soit bien compliqué pour vous, mais ça l'est pour moi, hélas.

Ce tirage consisterait à présenter 12 couleurs, visibles sur l'écran, chacune correspondante à un chiffre (chaque couleur apparait dans un carré avec en son centre un numéro). Exemple: le rouge au numéro 1, le orange au numéro 2, le jaune au numéro 3, etc.

Je pose 3 questions. Pour chacune d'elle, il y a 4 réponses à donner. (3X4=12 couleurs en tout)

Lorsque la personne clique sur une couleur je souhaiterais que celle-ci apparaisse sous la question posée dans un formulaire.
Par exemple: parmi ces 12 couleurs choisissez les 4 couleurs que vous aimez le plus. Après chaque clic j'obtiendrais par exemple ces 4 réponses dans mon formulaire: 4,7,12,1.

Je souhaiterais que chaque couleur disparaisse à chaque clic pour ne laisser que les couleurs restantes.

Après avoir répondu aux 3 questions, elle appuie sur le bouton envoi.

Si cela est trop compliqué je suis preneuse pour embaucher quelqu'un qui pourrait me le faire (-;
D'avance merci pour votre aide.

A voir également:

Besoin d'aide pour tirage de couleur simple
Vba couleur cellule - Forum Visual Basic 6
Tirage au sort en ligne - Forum Visual Basic 6
Tirage carte gratuit 52 ✓ - Forum VBA Office (Excel, Word ...)
Tirage roulette - Forum Visual Basic 6
Inverser couleur photoshop - Forum Visual Basic

1 réponse

Réponse 1 / 1

jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 344
26 nov. 2018 à 16:24

Bonjour,

Si cela est trop compliqué je suis preneuse pour embaucher quelqu'un qui pourrait me le faire (-;
D'avance merci pour votre aide.

Tout dépend de ton niveau de connaissances / Compétences en HTML / Javascript....

benjelisa Messages postés 4 Date d'inscription lundi 26 novembre 2018 Statut Membre Dernière intervention 26 novembre 2018
26 nov. 2018 à 16:30

Bien niveau...démarrage (((-:

benjelisa Messages postés 4 Date d'inscription lundi 26 novembre 2018 Statut Membre Dernière intervention 26 novembre 2018
26 nov. 2018 à 16:32

C'est la page de mon site: https://www.la-magie-des-couleurs.fr/test-couleurs

C'est trop contraignant pour donner envie de répondre au test mais cela donne une idée de ce qu'il y a à faire.

jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 344
26 nov. 2018 à 17:25

Voila de quoi t'inspirer....
Par contre il faudra améliorer ce script.. je l'ai codé un peu vite...

<! DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="imagetoolbar" content="no">
<meta name="keywords" content="">
<title>page test</title>
<style>
.choixCouleur{
  display:block;
}
 .col{
    float:left;
   display:inline-block;
   height:100px;
   width:100px;
   max-height:100px;
   max-width:100px;
   min-height:100px;
   min-width:100px;
   border :1px solid black;
   margin:8px;
   
 }
 /* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
    background-color: #fefefe;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}
</style>
</head>
<body>
<label> Question 1 ...</label>
<input type="text" onclick="choosecolor(this);"

<label> Question 2 ...</label>
<input type="text" onclick="choosecolor(this);"

<label> Question 3 ...</label>
<input type="text" onclick="choosecolor(this);"


<!-- The Modal -->
<div id="myModal" class="modal" style="display:none">

  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">×</span>
	<input type="hidden" id="selectedValue" value="">
	<div class="choixCouleur">
	    <div class="col" style="background-color:red" data-value="1"></div>
	    <div class="col" style="background-color:green" data-value="2"></div>
	    <div class="col" style="background-color:yellow" data-value="3"></div>
	    <div class="col" style="background-color:black" data-value="4"></div>
	</div>
  </div>

</div>

<script type="text/javascript">

var modal = document.getElementById('myModal');
function choosecolor(elm){
	//ouverture de la modale
	mdlShow(elm);
	
}

function initColClick(elm){

	var el = document.querySelectorAll(".col"); // this element contains more than 1 DOMs.
	// as it contains a NodeList, it's desirable to iterate through the list and bind events.                   
	for(var i=0; i < el.length; i++) {
      // Inside the event handler function, if you want to access i, then its better to wrap it inside IIFE
      (function(i) {
        el[i].onclick = function() { 
		  var choix = el[i].dataset.value;
		  document.getElementById('selectedValue').value=choix;
		  elm.value = document.getElementById('selectedValue').value;
		  modal.style.display = "none";
		  //on retire la couleur de la liste
		  el[i].remove();
		};   
       })(i);
	}
}
function mdlShow(elm){
	
	// Get the <span> element that closes the modal
	var span = document.getElementsByClassName("close")[0];
	modal.style.display = "block";
	initColClick(elm);
	
	// When the user clicks on <span> (x), close the modal
	span.onclick = function() {
	    modal.style.display = "none";
	}
	// When the user clicks anywhere outside of the modal, close it
	window.onclick = function(event) {
	    if (event.target == modal) {
	        modal.style.display = "none";
	    }
	}
}


</script>
</body>
</html>

Bien entendu, en Jquery ça serait un peu plus simple.
Mais l'idée est là. Je te laisse l'adapter.

benjelisa Messages postés 4 Date d'inscription lundi 26 novembre 2018 Statut Membre Dernière intervention 26 novembre 2018
26 nov. 2018 à 17:30

Merci. Si j'y arrive je me mets au Chinois (-;

Discussions similaires

créer un tirage de tarot divinatoire

Convertir un code hexadecimal en couleur

Tutoriels et javascript pour tirage de cartes sur internet

[Photoshop] : Image noir et blanc en image blanc et noir ?

Tirage plus aléatoire

Votre réponse

Discussions similaires