Besoin d'aide pour tirage de couleur simple

Signaler
Messages postés
4
Date d'inscription
lundi 26 novembre 2018
Statut
Membre
Dernière intervention
26 novembre 2018
-
Messages postés
4
Date d'inscription
lundi 26 novembre 2018
Statut
Membre
Dernière intervention
26 novembre 2018
-
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.

1 réponse

Messages postés
32451
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
14 mai 2021
347
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....
Messages postés
4
Date d'inscription
lundi 26 novembre 2018
Statut
Membre
Dernière intervention
26 novembre 2018

Bien niveau...démarrage (((-:
Messages postés
4
Date d'inscription
lundi 26 novembre 2018
Statut
Membre
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.
Messages postés
32451
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
14 mai 2021
347
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.
Messages postés
4
Date d'inscription
lundi 26 novembre 2018
Statut
Membre
Dernière intervention
26 novembre 2018

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