Dateigrösse: 18.37 kb
1 <?php 2 /***** dbConnect *****/ 3 require_once '/home/httpd/vhosts/michaelster.ch/httpdocs/include/login_webprog08.php'; 4 5 $mysqli =& new mysqli($host, $user, $password, $dbase); 6 7 /***** dbConnect check *****/ 8 if (mysqli_connect_errno()) { 9 printf("Connect failed: %s\n", mysqli_connect_error()); 10 exit(); 11 } 12 ?> 13 14 <html> 15 <head> 16 <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> 17 <title>Tischlein deck' dich!</title> 18 19 <script type="text/javascript"> 20 <!-- 21 var a = 11; 22 var b = 101; 23 var c = 1001; 24 var check=function(arg) { 25 var divs = (a==arg) 26 ? 'arg gleich elf' 27 : (b==arg) 28 ? 'arg gleich hunderteins' 29 : 'arg ungleich elf && hunderteins'; 30 alert(divs); 31 } 32 /* 33 <div onclick="check(11);">arg 11</div> 34 <div onclick="check(101);">arg 101</div> 35 <div onclick="check(007);">arg 007</div> 36 */ 37 //--> 38 </script> 39 40 <script type="text/javascript"> 41 <!-- 42 var drag = "inaktiv"; 43 var aktivX = 0; 44 var aktivY = 0; 45 var aktivDiv = null; 46 var aktivZindex = 1000; 47 var anz_DIVs = 18; 48 49 function init() { 50 divs = (document.layers) ? document.layers : 51 (document.all) ? document.all.tags("DIV") : document.getElementsByTagName("DIV"); 52 53 for (i=0; i< (divs.length-anz_DIVs); i++) { 54 if (divs[i].captureEvents) // Netscape 55 divs[i].captureEvents(Event.MOUSEDOWN); 56 divs[i].onmousedown = mdown; 57 } 58 59 if (document.captureEvents) // Netscape 60 document.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP); 61 document.onmouseup = mup; 62 document.onmousemove = mmove; 63 64 var pos_ausDB = ""; 65 <?php 66 if (isset($_POST['liste'])) { 67 echo 'pos_ausDB = "'.$_POST['liste'].'"; 68 '; 69 } 70 if (isset($_POST['vis'])) { 71 echo 'pos_ausDB = "'.$_POST['positionen'].'"; 72 '; 73 } 74 ?> 75 if (pos_ausDB != "") { 76 var divPosArray = pos_ausDB.split("+"); 77 for (i=0; i< (divs.length-anz_DIVs); i++) { 78 var posX = divPosArray[i].split(",")[0]; 79 var posY = divPosArray[i].split(",")[1]; 80 81 if (document.layers) { 82 divs[i].left = posX; 83 divs[i].top = posY; 84 } else { 85 divs[i].style.left = posX; 86 divs[i].style.top = posY; 87 } 88 } 89 } 90 } // end init() 91 92 window.onload = init; 93 94 function mdown(e){ 95 aktivDiv = this; 96 if (document.layers) aktivDiv.zIndex = aktivZindex++; 97 else aktivDiv.style.zIndex = aktivZindex++; 98 drag = "aktiv"; 99 aktivX = (e) ? e.pageX : event.clientX + document.body.scrollLeft; 100 aktivY = (e) ? e.pageY : event.clientY + document.body.scrollTop; 101 return false; 102 } 103 104 function mmove(e){ 105 if (drag == "inaktiv") return; 106 var neuX = (e) ? e.pageX : event.clientX + document.body.scrollLeft; 107 var neuY = (e) ? e.pageY : event.clientY + document.body.scrollTop; 108 var distX = (neuX-aktivX); 109 var distY = (neuY-aktivY); 110 aktivX = neuX; 111 aktivY = neuY; 112 if (document.layers) { 113 aktivDiv.left += distX; 114 aktivDiv.top += distY; 115 } 116 else { 117 aktivDiv.style.left = parseInt(aktivDiv.style.left) + distX; 118 aktivDiv.style.top = parseInt(aktivDiv.style.top) + distY; 119 } 120 } 121 var positionenString = ""; 122 function mup(e){ 123 drag = "inaktiv"; 124 positionenString = ""; 125 for (i=0; i< (divs.length-anz_DIVs); i++) { 126 var posX = (document.layers) ? divs[i].left : parseInt(divs[i].style.left); 127 var posY = (document.layers) ? divs[i].top : parseInt(divs[i].style.top); 128 if(i==0)positionenString += posX + "," + posY; 129 else positionenString += "+" + posX + "," + posY; 130 } 131 } 132 133 function nw(url,b,h,fenster) { 134 n=window.open(url, fenster, "width="+b+",height="+h+",left=100,screenX=20,top=10,screenY=2, menubar=0,toolbar=0,scrollbars=0,resizable=0"); 135 n.focus(); 136 } 137 //--> 138 </script> 139 140 <?php 141 if (isset($_POST['senden'])) 142 { 143 if (strlen($_POST['konstellation']) < 3) { 144 $msg = '<b><font color="#ff3300">Bitte Vorname überprüfen (mindestens 3 Zeichen)</font></b>'; 145 } 146 elseif (strlen($_POST['konstellation']) > 10) { 147 $msg = '<b><font color="#ff3300">Bitte Vorname überprüfen (maximal 10 Zeichen )</font></b>'; 148 } 149 else { 150 $sql = 'INSERT INTO tischlein (datum,name,positionen) 151 VALUES (NOW(NULL),"'.$_POST['konstellation'].'","'.$_POST['positionen'].'")'; 152 153 if($mysqli->query($sql) !== false) { 154 $msg = '<b><font color="green">Positionen gespeichert - bitte Lösungen anklicken und kontrollieren!</font></b>'; 155 } 156 $pid = $mysqli->insert_id; 157 } 158 echo '<br /><br />'; 159 echo $msg; 160 } 161 ?> 162 163 <style type="text/css"> 164 body { margin:0; padding-top:15px; padding-left: 12px; font-family: verdana,sans-serif; background-color: #fff; } 165 form { margin:0; padding:0; } 166 input.sub { background-color: #f5f5f5; color: #000; font-size: 13px; font-weight: bold; width: 170px; margin: 0; padding-top: 8px; cursor: pointer; -moz-border-radius: 10px; border-left: 1px solid #000; border-top: 1px solid #000; border-right: 2px solid #808080; border-bottom: 2px solid #808080; } 167 a { margin:0; padding:0 } 168 a img { border:0 !important; cursor: pointer !important; } 169 img { border:0 !important; cursor: move !important; } 170 table.leer { background-color:#f8f8ff; color:#849dbc !important; font-size: 12px !important; } 171 #navpanel0 { margin:0px; padding:0px; background-color: #849dbc; position: absolute; top: 10px; left: 700px; width: 122px; height: 32px; z-index:15; border-top:1px solid #000000; border-bottom:0px solid #849dbc; visibility:<?php echo !empty($pid) ? 'visible' : 'hidden'; ?>; } 172 #navpanel1 { background-color: #849dbc; position: absolute; top: 10px; left: 160px; width: 665px; height: 36px; visibility: visible; z-index:10; border:1px solid #000000; } 173 #navpanel2 { background-color: #849dbc; position: absolute; top: 10px; left: 10px; width: 220px; height: 36px; visibility: visible; z-index:15; border:1px solid #000000; border-right:0px solid #849dbc; } 174 #navpanel_icon img { margin:0px; padding:0px; position: absolute; top: 11px; left: 845px; width: 26px; height: 26px; z-index:33; } 175 #navpanel_link { position: absolute; top: 20px; left: 910px; width: 90px; height: 30px; } 176 #navpanel_link a { color: #006666; font-size: 11px; font-weight: bold; padding: 2px; } 177 #navpanel_link a:hover { font-size: 11px; font-weight: bold; color: #fff; background-color: #066; text-decoration: none } 178 #navpanel_link img, #navpanel_link a img { border: 0px solid white; } 179 #navpanel_titel { position:absolute; top:110px; left:270px; width:250px; height:30px; clip:rect(0px 400px 90px 0px); z-index:6; font-size:20px; } 180 #navpanel_leittext { position:absolute; top:36px; left:838px; width:40px; height:12px; margin:0; padding:0; font-size:10px; } 181 182 #navpanel_tab { 183 position:absolute; 184 top:85px; 185 left:10px; 186 width:816px; 187 height:532px; 188 clip:rect(0px 816px 532px 0px); 189 background-color: #f8f8ff; 190 z-index:1; 191 } 192 193 </style> 194 195 </head> 196 197 <body> 198 199 <div id="bild2" style="position: absolute; top: 100px; left: 20px; width: 97px; height: 96px; visibility: visible; display: block; z-index:10"><img src="img/kaese.gif" alt="Linke Mouse-Taste gedrückt halten und das Bild verschieben" width="97" height="96" border="0" /></div> 200 201 <div id="bild3" style="position: absolute; top: 210px; left: 20px; width: 100px; height: 59px; visibility: visible; display: block; z-index:10"><img src="img/katze.gif" alt="Linke Mouse-Taste gedrückt halten und das Bild verschieben" width="100" height="59" border="0" /></div> 202 203 <div id="bild4" style="position: absolute; top: 290px; left: 20px; width: 100px; height: 91px; visibility: visible; display: block; z-index:10"><img src="img/kuchen.gif" alt="Linke Mouse-Taste gedrückt halten und das Bild verschieben" width="100" height="91" border="0" /></div> 204 205 <div id="bild5" style="position: absolute; top: 400px; left: 20px; width: 60px; height: 70px; visibility: visible; display: block; z-index:20"><img src="img/apfel.gif" alt="Linke Mouse-Taste gedrückt halten und das Bild verschieben" width="60" height="70" border="0" /></div> 206 207 <div id="bild6" style="position: absolute; top: 490px; left: 20px; width: 100px; height: 83px; visibility: visible; display: block; z-index:15"><img src="img/kaffee.gif" alt="Linke Mouse-Taste gedrückt halten und das Bild verschieben" width="100" height="83" border="0" /></div> 208 209 <div id="bild7" style="position: absolute; top: 430px; left: 100px; width: 100px; height: 59px; visibility: visible; display: block; z-index:10"><img src="img/schuhe.gif" alt="Linke Mouse-Taste gedrückt halten und das Bild verschieben" width="100" height="59" border="0" /></div> 210 211 <div id="bild8" style="position: absolute; top: 330px; left: 120px; width: 64px; height: 96px; visibility: visible; display: block; z-index:10"><img src="img/eis_coupe.gif" alt="Linke Mouse-Taste gedrückt halten und das Bild verschieben" width="64" height="96" border="0" /></div> 212 213 <div id="bild9" style="position: absolute; top: 220px; left: 120px; width: 100px; height: 76px; visibility: visible; display: block; z-index:10"><img src="img/kanne-2.gif" alt="Linke Mouse-Taste gedrückt halten und das Bild verschieben" width="100" height="76" border="0" /></div> 214 215 <div id="bild10" style="position: absolute; top: 120px; left: 105px; width: 100px; height: 95px; visibility: visible; display: block; z-index:10"><img src="img/maus01.gif" alt="Linke Mouse-Taste gedrückt halten und das Bild verschieben" width="100" height="95" border="0" /></div> 216 217 218 <div id="bild1" style="cursor: hand !important; position: absolute; top: 240px; left: 200px; width: 350px; height: 331px; visibility: visible; display: block; z-index:5"><img style="cursor:CROSSHAIR !important" src="img/tisch.gif" alt="Linke Mouse-Taste gedrückt halten und das Bild verschieben" width="350" height="331" border="0" /></div> 219 220 221 <div id="test1" style="border: 1px solid #000000; font-family:verdana,arial,sans-serif; font-size:12px; padding:4px; font-weight:bold; position:absolute; left:624px; top:85px; width:202px; height:50px; clip:rect(0px 202px 50px 0px); color:#ffffff; background-color:#849dbc; layer-background-color:#849dbc; z-index:20;">Die Katze ist müde. Hilf ein bisserl nach und leg' sie<br>unter den Tisch.</div> 222 <div id="test2" style="border: 1px solid #000000; font-family:verdana,arial,sans-serif; font-size:12px; padding:4px; font-weight:bold; position:absolute; left:624px; top:145px; width:202px; height:50px; clip:rect(0px 202px 50px 0px); color:#ffffff; background-color:#849dbc; layer-background-color:#849dbc; z-index:20;">Links auf den Tisch stellst du den Käse.</div> 223 <div id="test3" style="border: 1px solid #000000; font-family:verdana,arial,sans-serif; font-size:12px; padding:4px; font-weight:bold; position:absolute; left:624px; top:205px; width:202px; height:50px; clip:rect(0px 202px 50px 0px); color:#ffffff; background-color:#849dbc; layer-background-color:#849dbc; z-index:20;">Die Maus lehnt sich an das rechte Tischbein an.</div> 224 <div id="test4" style="border: 1px solid #000000; font-family:verdana,arial,sans-serif; font-size:12px; padding:4px; font-weight:bold; position:absolute; left:624px; top:265px; width:202px; height:50px; clip:rect(0px 202px 50px 0px); color:#ffffff; background-color:#849dbc; layer-background-color:#849dbc; z-index:20;">Vor den Käse stellst du den Apfel.</div> 225 <div id="test5" style="border: 1px solid #000000; font-family:verdana,arial,sans-serif; font-size:12px; padding:4px; font-weight:bold; position:absolute; left:624px; top:325px; width:202px; height:50px; clip:rect(0px 202px 50px 0px); color:#ffffff; background-color:#849dbc; layer-background-color:#849dbc; z-index:20;">Den Kuchen stellst du hinten auf den Tisch.</div> 226 <div id="test6" style="border: 1px solid #000000; font-family:verdana,arial,sans-serif; font-size:12px; padding:4px; font-weight:bold; position:absolute; left:624px; top:385px; width:202px; height:50px; clip:rect(0px 202px 50px 0px); color:#ffffff; background-color:#849dbc; layer-background-color:#849dbc; z-index:20;">Die Tasse stellst du rechts neben den Kuchen.</div> 227 <div id="test7" style="border: 1px solid #000000; font-family:verdana,arial,sans-serif; font-size:12px; padding:4px; font-weight:bold; position:absolute; left:624px; top:445px; width:202px; height:50px; clip:rect(0px 202px 50px 0px); color:#ffffff; background-color:#849dbc; layer-background-color:#849dbc; z-index:20;">Das Eis kommt in die Mitte<br>des Tisches.</div> 228 <div id="test8" style="border: 1px solid #000000; font-family:verdana,arial,sans-serif; font-size:12px; padding:4px; font-weight:bold; position:absolute; left:624px; top:505px; width:202px; height:50px; clip:rect(0px 202px 50px 0px); color:#ffffff; background-color:#849dbc; layer-background-color:#849dbc; z-index:20;">Die Schuhe kommen auf den Boden vor den Tisch.</div> 229 <div id="test9" style="border: 1px solid #000000; font-family:verdana,arial,sans-serif; font-size:12px; padding:4px; font-weight:bold; position:absolute; left:624px; top:565px; width:202px; height:50px; clip:rect(0px 202px 50px 0px); color:#ffffff; background-color:#849dbc; layer-background-color:#849dbc; z-index:20;">Die Kaffeekanne stelle bitte ganz vorne auf den Tisch.</div> 230 231 <div id="navpanel_titel"> 232 Tischlein deck' dich ! 233 </div> 234 235 <div id="navpanel_tab"> 236 <table width="816" border="0" cellspacing="0" cellpadding="0" align="left" class="leer"> 237 <tr align="center" valign="middle"> 238 <td width="202" height="172" align="center" valign="middle"></td> 239 <td width="202" height="172" align="center" valign="middle"></td> 240 <td width="202" height="172" align="center" valign="middle"></td> 241 <td width="202" height="172" align="center" valign="middle"></td> 242 </tr> 243 <tr align="center" valign="middle"> 244 <td width="202" height="92" align="center" valign="middle"></td> 245 <td width="202" height="92" align="center" valign="middle"></td> 246 <td width="202" height="92" align="center" valign="middle"></td> 247 <td width="202" height="92" align="center" valign="middle"></td> 248 </tr> 249 <tr align="center" valign="middle"> 250 <td width="202" height="172" align="center" valign="middle"></td> 251 <td width="202" height="172" align="center" valign="middle"></td> 252 <td width="202" height="172" align="center" valign="middle"></td> 253 <td width="202" height="172" align="center" valign="middle"></td> 254 </tr> 255 <tr align="center" valign="middle"> 256 <td width="202" height="94" align="center" valign="middle"></td> 257 <td width="202" height="94" align="center" valign="middle"></td> 258 <td width="202" height="94" align="center" valign="middle"></td> 259 <td width="202" height="94" align="center" valign="middle"></td> 260 </tr> 261 </table> 262 </div> 263 264 <div id="navpanel1"> 265 <table width="665" height="32" border="0" cellpadding="3" cellspacing="0"> 266 <tr> 267 <form name="EbenenSpeicher" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST" onsubmit="this.positionen.value=positionenString;"> 268 <input type="hidden" name="positionen" /> 269 <input type="hidden" name="vis" /> 270 <td width="300" align="right" style="font-size:13px; font-weight: bold; font-family: verdana, sans-serif; color:#fff;"> 271 <a href="img/loesung_tischlein.jpg" target="nwin" onclick="nw(this.href,450,450,'nwin')" onFocus="if(this.blur)this.blur();"><img style="cursor:text !important" src="img/blind.gif" alt="" width="20" height="20" border="0" /></a> 272 Dein Vorname: <input type="text" name="konstellation" maxlength="12" size="15" value="" /></td> 273 <td valign="bottom" align="left"><input style="margin:0px; padding:0px; cursor:pointer;" title="Hier können Sie die Positionen Ihrer Bilder und Texte speichern" type="submit" name="senden" value="Positionen speichern" class="sub" /></td> 274 </form> 275 </tr> 276 </table> 277 </div> 278 279 <div id="navpanel2"> 280 <table height="34" border="0" cellpadding="4" cellspacing="0"><tr><td> 281 <form name="EbenenMenu" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST"> 282 <select name="liste" size="1" onchange="if(this.selectedIndex!=0) this.form.submit();"> 283 <option>gespeicherte Resultate</option> 284 <option>< - - - - - - - - - - - - - - - - - - ></option> 285 <?php 286 function date_mysql2german($datum) { 287 if (ereg('[-]', $datum)) { 288 list($jahr, $monat, $tag) = explode ("-", $datum); 289 } else { 290 $jahr = substr($datum, 0, 4); 291 $monat = substr($datum, 4, 2); 292 $tag = substr($datum, 6, 2); 293 } 294 return sprintf ('%02d.%02d.%04d', $tag, $monat, $jahr); 295 } 296 297 $sql = 'SELECT * FROM tischlein ORDER BY datum DESC'; 298 $result = $mysqli->query($sql); 299 $anzahl = $result->num_rows; 300 301 while( $data = mysqli_fetch_array($result, MYSQLI_BOTH) ) 302 { 303 $sel = ''; 304 if ($data['positionen'] == $_POST['liste']) { 305 $sel = ' selected="selected"'; 306 } 307 echo '<option value="' . $data['positionen'] . '" ' . $sel . '>' . $data['name'] . ' | ' . date_mysql2german($data['datum']) . '</option>'; 308 } 309 310 /***** close result *****/ 311 $result->close(); 312 313 /***** close dbConnect *****/ 314 $mysqli->close(); 315 ?> 316 </select> 317 </form> 318 </td></tr> 319 </table> 320 </div> 321 322 323 <div id="navpanel0"> 324 <table height="32" border="0" cellpadding="0" cellspacing="0"><tr><td> 325 <a href="img/loesung_tischlein.jpg" target="nwin" onclick="nw(this.href,450,450,'nwin')" onFocus="if(this.blur)this.blur();"><img src="img/loesungen.gif" alt="" width="120" height="30" border="0" /></a> 326 </td></tr></table> 327 </div> 328 329 <div id="navpanel_icon"> 330 <img src="img/icon_help_winxp.gif" alt="" width="26" height="26" border="0" align="center" valign="middle" style="cursor:pointer !important;" /> 331 </div> 332 333 <div id="navpanel_leittext" onmouseover="alert('Leider deckt sich das Tischlein in den seltesten Fällen von allein. Darum musst du ein wenig nachhelfen! Bewege den Käse, die Maus, den Kuchen, den Apfel, den Kaffee und die Katze an die richtige Stelle. Was wohin gehört, kannst du in den blauen Text-Layers am rechten Bildrand lesen. Und nun.... frisch an die Arbeit.');"> 334 Leittext 335 </div> 336 337 <div id="navpanel_link"> 338 <a href="papamoll_ddrop.php">weiter</a> <img style="cursor:pointer !important;" src='img/back_turnable.gif' width='25' height='25' alt='nächste Übung' border='0' /> 339 </div> 340 341 </body> 342 </html> 343