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.

1 réponse

jordane45
Messages postés
35411
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
16 mai 2022
356
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....
0
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 (((-:
0
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.
0
jordane45
Messages postés
35411
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
16 mai 2022
356
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.
0
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 (-;
0