basti1012.bplaced.net

Du siehst gerade eine vereinfachte Darstellung unserer Inhalte. Normale Ansicht mit richtiger Formatierung.
    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>