Besoin d'aide pour tirage de couleur simple

Messages postés
4
Date d'inscription
lundi 26 novembre 2018
Dernière intervention
26 novembre 2018
- - Dernière réponse : benjelisa
Messages postés
4
Date d'inscription
lundi 26 novembre 2018
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.
Afficher la suite 

Votre réponse

1 réponse

Messages postés
23610
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
14 décembre 2018
0
Merci
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
Dernière intervention
26 novembre 2018
-
Bien niveau...démarrage (((-:
benjelisa
Messages postés
4
Date d'inscription
lundi 26 novembre 2018
Dernière intervention
26 novembre 2018
-
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
23610
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
14 décembre 2018
-
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
Dernière intervention
26 novembre 2018
-
Merci. Si j'y arrive je me mets au Chinois (-;
Commenter la réponse de jordane45

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.