basti1012.bplaced.net

Sortiere die Farbcodes zu den angezeigten Farben und teste somit dein wissen

Code

                                    
                                <style>
  
.draganddropKeywords {
  padding:10px;
  border:2px solid #8C0099; 
  text-align: center;
border-radius: 10px;
box-shadow: 4px 4px 3px 0px rgba(176,176,176,1);
background-color: #E6D1E8;
min-height: 40px;
}
.draganddropText {
  padding:10px;
  border:2px solid #8C0099; 
  font-family: arial;
border-radius: 10px;
box-shadow: 4px 4px 3px 0px rgba(176,176,176,1);
background-color: #E6D1E8;
}

.dropElement {
  min-width:126px; 
  height:36px; 
  margin: 2px; 
  padding:2px; 
  border:1px solid #aaaaaa; 
  text-align: center;
  display: inline-block;
  vertical-align: middle;
border-radius: 4px;
background-color: #FFFFFF;
float: none !important;
}


.dragElement { 
  display: inline-block; 
  padding:6px 0 6px 0px; 
  margin: 2px;
  background: #bd79b3; 
  min-width: 120px; 
  cursor: pointer; 
  cursor: hand;
  font-family: arial;
  font-weight: bold; 
  font-style: italic;
border-radius: 2px;
}

#draganddropButton {
  padding:10px;
  border:2px solid #8C0099;
  text-align: center;
border-radius: 10px;
box-shadow: 4px 4px 3px 0px rgba(176,176,176,1);
background-color: #8C0099;
background-image: none;
text-shadow: none;
color: #ffffff;
min-height: 40px;
margin: 10px;
}

#draganddropButton:hover{
background-color: #E6D1E8;
color: #8C0099;
cursor: pointer;
cursor: hand;
}
tr td{
  width:25vw;
}
  
</style>
<H2>Sortiere Die Farbcodes zu den richtigen Farben</H2> 

<div id="div0" class="draganddropKeywords" ondrop="drop(event)" ondragover="allowDrop(event)">
<div class="dragElement" id="drag6" draggable="true" ondragstart="drag(event)">#C40000</div>
<div class="dragElement" id="drag4" draggable="true" ondragstart="drag(event)">#000000</div>
<div class="dragElement" id="drag9" draggable="true" ondragstart="drag(event)">#00FFFF</div>
<div class="dragElement" id="drag5" draggable="true" ondragstart="drag(event)">#00FF00</div>
<div class="dragElement" id="drag10" draggable="true" ondragstart="drag(event)">#750075</div>
<div class="dragElement" id="drag2" draggable="true" ondragstart="drag(event)">#AAAAAA</div>
<div class="dragElement" id="drag8" draggable="true" ondragstart="drag(event)">#FFFF00</div>
<div class="dragElement" id="drag3" draggable="true" ondragstart="drag(event)">#333333</div>
<div class="dragElement" id="drag7" draggable="true" ondragstart="drag(event)">#9999FF</div>
<div class="dragElement" id="drag1" draggable="true" ondragstart="drag(event)">#FFFFFF</div>
</div>

<div class="draganddropText">
<table cellspacing=5 cellpadding=2>
<TR>
    <td style="background:#FFFFFF">White</TD>
    <TD><span id="div1" class="dropElement" ondrop="drop(event)" ondragover="allowDrop(event)"></TD>
    <td style="background:#C40000">Dark Red</TD>
    <TD><span id="div6" class="dropElement" ondrop="drop(event)" ondragover="allowDrop(event)"></TD>
</TR><br>
<TR>
  <td style="background:#AAAAAA">Light Grey</TD>
  <TD id="div2" class="dropElement" ondrop="drop(event)" ondragover="allowDrop(event)"></TD>
  <td style="background:#9999FF">Light Blue</TD>
  <TD id="div7" class="dropElement" ondrop="drop(event)" ondragover="allowDrop(event)"></TD>
</TR>
  
<TR><td style="background:#333333">Dark Grey</TD>
  <TD id="div3" class="dropElement" ondrop="drop(event)" ondragover="allowDrop(event)"></TD>
  <td style="background:#FFFF00">Yellow</TD>
  <TD id="div8" class="dropElement" ondrop="drop(event)" ondragover="allowDrop(event)"></TD>    
</TR>
  
<TR>
  <td style="background:#000000">Black</TD>
  <TD id="div4" class="dropElement" ondrop="drop(event)" ondragover="allowDrop(event)"></TD>
  <td style="background:#00FFFF">Cyan</TD>
  <TD id="div9" class="dropElement" ondrop="drop(event)" ondragover="allowDrop(event)"></TD>
</TR>
  
<TR><td style="background:#00FF00">Green</TD>
  <TD id="div5" class="dropElement" ondrop="drop(event)" ondragover="allowDrop(event)"></TD>
  <td style="background:#750075">Purple</T>
  <TD id="div10" class="dropElement" ondrop="drop(event)" ondragover="allowDrop(event)"></TD>
</TR>
</TABLE><br>
<center>
  <input type="button" id="draganddropButton" value="Check my answers" onClick="checkMyAnswers(10);"></center>
</div>
<script>
 function allowDrop(ev) {
     ev.preventDefault();
 }

 function drag(ev) {
     ev.dataTransfer.setData("text", ev.target.id);
 }

 function drop(ev) {
     ev.preventDefault();
     var data = ev.dataTransfer.getData("text");
     ev.target.appendChild(document.getElementById(data));
 }

function checkMyAnswers(number) {
	var score = 0;
	for (i = 1; i <= number; i++) { 
		var parentDIV = document.getElementById("drag" + i).parentNode;
		if (parentDIV.id==("div" + i)) {
			parentDIV.style.backgroundColor="#64DE57";
			score++;
		} else { 
			document.getElementById("div" + i).style.backgroundColor="#FA323C";
		}
	}
	alert("You scored " + score + " out of " + number + ".");
 }
  
  
  </script>