Mini Game,Farbcode sortieren
Sortiere die Farbcodes zu den angezeigten Farben und teste somit dein wissen
Der hier verwendete 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>