Vielen Dank für den Hinweis, bringt mich aber nicht wirklich viel weiter. Ich brauche zwingend die "Umkehrung". Habe ursprünglich hier den Quelltext bekommen:http://www.elated.com/res/File…tial-guide/card-game.html
Beiträge von MALI
-
-
Ein neuer Versuch mich kurz zu fassen:
BEISPIEL: der folgende code bringt in der ersten Zeile zufallsartiges Sortieren der Ziffern 1 bis 6. Diese können den Buchstaben von "fest stehendem Wort" T O M A T E" zugeordnet werden. Ich will aber, dass in der oberen Zeile zufallsartiges Sortieren der Buchstaben des Wortes T O M A T E ( O M T A T E - O M A T E T etc. ) erfolgt, die dann in der richtigen Reihenfolge den "fest stehenden" Ziffern von 1 bis 6 zugeordnet werden müssen. (Eine wichtige Übung im Lesenlern-Prozess)HTML
Alles anzeigen<!doctype html> <head> <title>DOLLY</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <style> #cardPile { margin: 0 auto; background: red; /* Nur für die erste Karte kein Rand! */ #cardSlots:first-child, #cardPile div:first-child { margin-left: 1; } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script> <script src="js/jquery-1.9.1.js"></script> <script src="js/jquery-ui-1.10.2.custom.js"></script> <script src="js/TouchPunch.js"></script> <script type="text/javascript"> var richtige = 0; var versuch=0; $( init ); function init() { // verstecken der Erfolgsmeldung $('#Erfolgsmeldung').hide(); $('#Erfolgsmeldung').css( { } ); // Zurücksetzen für neustart richtige = 0; versuch=0; $('#cardPile').html( '' ); $('#cardSlots').html( '' ); $('#versuche').html('' ); // Erstellen der Kontenklassen var numbers = [ 1, 2, 3, 4, 5, 6, ]; numbers.sort( function() { return Math.random() - .5 } ); // Zufallsartiges sortieren // der zentrale Teil: für jede karte wird eine eigene Div mit ID und der methode draggable erzeugt for ( var i=0; i<6; i++ ) { $('<div>' + numbers[i] + '</div>').data( 'number', numbers[i] ).attr( 'id', 'card'+numbers[i] ).appendTo( '#cardPile' ).draggable( { containment: '#content', stack: '#cardPile div', cursor: 'move', revert: true, stop: handleDragStop } ); } // Erstellen der Konten var words = [ 'T', 'O', 'M', 'A', 'T', 'E', ]; var wordsort = [ 'T', 'O', 'M', 'A', 'T', 'E', ]; wordsort.sort( function() { return Math.random() - .5 } ); // sortieren der Konten for ( var i=1; i<=6; i++ ) { $('<div>' + words[i-1] + '</div>').data( 'number', i ).appendTo( '#cardSlots' ).droppable( { accept: '#cardPile div', hoverClass: 'hovered', drop: handleCardDrop } ); } } function handleDragStop( event, ui ) { versuch++; // wird ausgelöst wenn drag beendet $('#versuche').html('Versuche: ' + versuch); } function handleCardDrop( event, ui ) { var cardNumber = $(this).data( 'number' ); var slotNumber = ui.draggable.data( 'number' ); // Wenn die Karte auf dem richtigen Slot gelandet ist, // wird die Farbe geändert und eingerastet und verhindert, dass sie nochmal verschoben wird if ( slotNumber == cardNumber ) { ui.draggable.addClass( 'correct' ); ui.draggable.draggable( 'disable' ); $(this).droppable( 'disable' ); ui.draggable.position( { of: $(this), my: 'left top', at: 'left top' } ); ui.draggable.draggable( 'option', 'revert', false ); richtige++; } // Wenn alle geschafft, erscheint die Erfolgsmeldung if ( richtige ==6 ) { //versuch++; //$('#Erfolgsmeldung1').html('Geschafft! Versuche: ' + (versuch+1)); $('#Erfolgsmeldung').show(); $('#Erfolgsmeldung').animate( { } ); } } </script> </head> <body> <div id="cardPile"> </div> <div id="cardSlots"> </div> </body> </html>
-
Bin blutiger Anfänger. Werde mich bemühen, das ganze kürzer und prägnanter zu beschreiben.
-
Drag and Drop
Dies ist mein allererster Beitrag in einem FORUM überhaupt - hoffe, dass das dennoch SO korrekt ist!
Seit Tagen suche ich verzweifelt durch alle denkbaren INTERNET-Seiten an einer Lösung folgenden Problems: Wie kann ich die Buchstaben-Zeile mit der Ziffern-Zeile so "tauschen", dass die Ziffern immer in der gleichen Reihenfolge stehen, ABER die Buchstaben jeweils neu sortiert werden, um dann in der richtigen Reihenfolge "passgenau" eingeordnet zu werden. Hier der zugehörige Quelltext:HTML
Alles anzeigen<!doctype html> <head> <title>DOLLY</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <style> /* Rand, Schrift und Zeilenh�he */ body { margin: 10px; font-family: "Arial Rounded MT Bold", solid; line-height: 0.8em; background: -moz-linear-gradient(center top , #E6E6E6, #CCCCCC) repeat scroll 0 0 #CCCCCC; /* Safari 4-5, Chrome 1-9 */ background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#E6E6E6), to(#CCCCCC)); /* Safari 5.1, Chrome 10+ */ background: -webkit-linear-gradient(top, #E6E6E6, #CCCCCC); /* IE 10 */ background: -ms-linear-gradient(top, #E6E6E6, #CCCCCC); /* Opera 11.10+ */ background: -o-linear-gradient(top, #E6E6E6, #CCCCCC); background-repeat: repeat-x; border: 1px solid #C6C6C6; font-weight: bold; text-shadow: 0 1px 0 #FFFFFF; } /* �berschriften anderen Font */ h1, h2, h3, h4 { font-family: "Arial Rounded MT Bold", sans-serif; } /* Inhaltsbereich, nur darin kann verschoben werden */ #content { margin: 10px 70px; text-align: center; } /* Slots f�r f�r die Endposition (hier Konten) */ #cardSlots { margin: 20px auto 0 auto; background: #ddf; font-size: 50px; } /* Bereich f�r die Karten (hier Klassen) */ #cardPile { margin: 0 auto; background: red; } /* F�r beide Bereiche gilt: */ #cardSlots, #cardPile { width: 380px; height: 38px; padding: 35px; border: 2px solid #333; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; -moz-box-shadow: 0 0 .3em rgba(0, 0, 0, .8); -webkit-box-shadow: 0 0 .3em rgba(0, 0, 0, .8); box-shadow: 0 0 .3em rgba(0, 0, 0, .8); } /* Nur f�r die Karten gilt */ #cardSlots div { float: left; width: 15px; height: 45px; padding: 15px; padding-top: 15px; padding-bottom: 0; border: 2px solid #333; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; margin: 0 0 0 10px; background: #fff; } /* Nur f�r die erste Karte kein Rand! */ #cardSlots:first-child, #cardPile div:first-child { margin-left: 1; } /* Wenn man mit einer Karte �ber einen Slot f�hrt, �ndert sich der background */ #cardPile div.hovered { background: #aaa; } /* F�r alle Slots gilt */ #cardPile div { float: left; width:30px; height:64px; padding-left:20px; border: 2px solid #333; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; margin: 0 0 0 10px; background: #fff; border-style: hidden;; } /* Der Text soll aus Platzgr�nden vertikal sein */ .text{ text-wrap:normal; text-align:center; -moz-transform:rotate(-270deg); -moz-transform-origin: 60% left; -webkit-transform: rotate(-270deg); -webkit-transform-origin: 60% left; -o-transform: rotate(-270deg); -o-transform-origin: 60% left; } #cardSlots div { background: #666; color: red; font-size: 40px; text-shadow: 0 0 3px #000; } /* Wenn eine Karte bewegt wird, erh�lt sie einen Schatten */ #cardSlots div.ui-draggable-dragging { -moz-box-shadow: 0 0 .5em rgba(0, 0, 0, .8); -webkit-box-shadow: 0 0 .5em rgba(0, 0, 0, .8); box-shadow: 0 0 .5em rgba(0, 0, 0, .8); } /* Jede Karte wird gef�rbt, wenn sie passt */ <img src="http://www.wolfgangheinrich.de/images/860t.jpg" width="28" height="28"style="float: left; margin-left:-40px; margin-right: 10px; margin-top: -50px; margin-bottom: 100px;"> #card1.correct { background: red; } #card2.correct { background: brown; } #card3.correct { background: orange; } #card4.correct { background: yellow; } #card5.correct { background: green; } #card6.correct { background: cyan; } #card7.correct { background: blue; } #card8.correct { background: indigo; } #card9.correct { background: purple; } #card0.correct { background: violet; } /* Die Erfolgsmeldung*/ #Erfolgsmeldung { position: absolute; left: 85%; top: 50%px; margin-top: -50px, margin-left: -100px, width: 200; height: 100; z-index: 100; background: red; border: 2px solid #333; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; -moz-box-shadow: .3em .3em .5em rgba(0, 0, 0, .8); -webkit-box-shadow: .3em .3em .5em rgba(0, 0, 0, .8); box-shadow: .3em .3em .5em rgba(0, 0, 0, .8); padding: 20px; } #versuche{ font-size:1.5em; } button { background-color: #666666; height: 40px; width: 100px; border-bottom: 1px solid rgba(255, 255, 255, 0.2); border-radius: 5px 5px 5px 5px; box-shadow: 0 5px 5px #313131, 0 9px 0 #393939, 0 9px 10px rgba(0, 0, 0, 0.4), 0 2px 9px rgba(255, 255, 255, 0.2) inset, 0 -2px 9px rgba(0, 0, 0, 0.2) inset; color: #FFFFFF; display: inline-block; font-size: 16px; text-align:center; font-weight: bold; margin: 0px 20px; margin-bottom: 40px; padding: 12px 20px; position: relative; text-decoration: none; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2); cursor: hand; } .button:hover { box-shadow: 0 5px 5px #313131, 0 9px 0 #393939, 0 9px 10px rgba(0, 0, 0, 0.4), 0 2px 15px rgba(255, 255, 255, 0.4) inset, 0 -2px 9px rgba(0, 0, 0, 0.2) inset; } .button:active { box-shadow: 0 2px 0 #393939, 0 4px 4px rgba(0, 0, 0, 0.4), 0 2px 5px rgba(0, 0, 0, 0.2) inset; top: 7px; } </style> <script type="text/javascript" src="[color=#666666][url=http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js]http://ajax.googleapis.com/ajax/libs/jqu?0/jquery.min.js[/url][/color]"></script> <script type="text/javascript" src="[color=#666666][url=http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js]http://ajax.googleapis.com/ajax/libs/jqu?query-ui.min.js[/url][/color]"></script> <script src="[color=#666666][url=file:///C:/Users/wheinrich/Desktop/js/jquery-1.9.1.js]js/jquery-1.9.1.js[/url][/color]"></script> <script src="[color=#666666][url=file:///C:/Users/wheinrich/Desktop/js/jquery-ui-1.10.2.custom.js]js/jquery-ui-1.10.2.custom.js[/url][/color]"></script> <script src="[color=#666666][url=file:///C:/Users/wheinrich/Desktop/js/TouchPunch.js]js/TouchPunch.js[/url][/color]"></script> <script type="text/javascript"> var richtige = 0; var versuch=0; $( init ); function init() { // verstecken der Erfolgsmeldung $('#Erfolgsmeldung').hide(); $('#Erfolgsmeldung').css( { left: '85%', top: '50%', width: 0, height: 0 } ); // Zur�cksetzen f�r neustart richtige = 0; versuch=0; $('#cardPile').html( '' ); $('#cardSlots').html( '' ); $('#versuche').html('' ); // Erstellen der Kontenklassen var numbers = [ 1, 2, 3, 4, 5, 6, ]; numbers.sort( function() { return Math.random() - .5 } ); // Zufallsartiges sortieren // der zentrale Teil: f�r jede karte wird eine eigene Div mit ID und der methode draggable erzeugt for ( var i=0; i<6; i++ ) { $('<div>' + numbers[i] + '</div>').data( 'number', numbers[i] ).attr( 'id', 'card'+numbers[i] ).appendTo( '#cardPile' ).draggable( { containment: '#content', stack: '#cardPile div', cursor: 'move', revert: true, stop: handleDragStop } ); } // Erstellen der Konten var words = [ 'T', 'o', 'm', 'a', 't', 'e', ]; var wordsort = [ 'T', 'o', 'm', 'a', 't', 'e', ]; wordsort.sort( function() { return Math.random() - .5 } ); // sortieren der Konten for ( var i=1; i<=6; i++ ) { $('<div>' + words[i-1] + '</div>').data( 'number', i ).appendTo( '#cardSlots' ).droppable( { accept: '#cardPile div', hoverClass: 'hovered', drop: handleCardDrop } ); } } function handleDragStop( event, ui ) { versuch++; // wird ausgel�st wenn drag beendet $('#versuche').html('Versuche: ' + versuch); } function handleCardDrop( event, ui ) { var cardNumber = $(this).data( 'number' ); var slotNumber = ui.draggable.data( 'number' ); // Wenn die Karte auf dem richtigen Slot gelandet ist, // wird die Farbe ge�ndert und eingerastet und verhindert, dass sie nochmal verschoben wird if ( slotNumber == cardNumber ) { ui.draggable.addClass( 'correct' ); ui.draggable.draggable( 'disable' ); $(this).droppable( 'disable' ); ui.draggable.position( { of: $(this), my: 'left top', at: 'left top' } ); ui.draggable.draggable( 'option', 'revert', false ); richtige++; } // Wenn alle geschafft, erscheint die Erfolgsmeldung if ( richtige ==6 ) { //versuch++; //$('#Erfolgsmeldung1').html('Geschafft! Versuche: ' + (versuch+1)); $('#Erfolgsmeldung').show(); $('#Erfolgsmeldung').animate( { width: '200px', height: '100px', top: '40%', left:'85%', opacity: 0.8 } ); } } </script> </head> <body> <h3 align="center">(Im Original: Ordne die richtigen Ziffern den Buchstaben zu!)</h3> <img src="[color=#666666][url=http://www.wolfgangheinrich.de/images/860t.jpg]http://www.wolfgangheinrich.de/images/860t.jpg[/url][/color]" width="28" height="28"style="float: left; margin-left:200px; margin-right: 10px; margin-top: 20px; margin-bottom: 100px;"><h5>Die Zeilen tauschen! ALSO: Ordne die Buchstaben zum richtigen Wort! (statt TOMATE Ziffern von 1-6 und obere Zeile TOMTEA, OMTATE etc.)</h5> <p align="center"><a href="[color=#666666][url=file:///C:/Users/wheinrich/Desktop/DOLLY.html#]#[/url][/color]" onClick="window.open('drag/drag_player.html', 'Hilfe','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=no,copyhistory=no,width=1160,height=732')"></a></p> <div id="content"> <img src="[color=#666666][url=http://www.wolfgangheinrich.de/images/860t.jpg]http://www.wolfgangheinrich.de/images/860t.jpg[/url][/color]" width="28" height="28"style="float: left; margin-left:10px; margin-right: 10px; margin-top: 250px; margin-bottom: 100px;"> <div id="cardPile"> </div> <div id="cardSlots"> </div> <div id="versuche"> </div> <div id="Erfolgsmeldung"> <h2>Geschafft!!</h2> <p id="Erfolgsmeldung1"></p> <button onClick="init()">Nochmal</button> </div> </div> </body> </html>