Jump to content

phn221181

Members
  • Content count

    11
  • Joined

  • Last visited

Everything posted by phn221181

  1. noUiSlider is 'undefined'

    i got it working... ich changed the xml open part as following: xmlhttp.open("GET", 'rechnensave.php?niv1='+niveau1+'&niv2='+niveau2, true); xmlhttp.send(); THANKS for your support... Thread can be closed, but the slider doesn't still work.
  2. noUiSlider is 'undefined'

    Hello, i tried to style up my script. i integrated a noUiSlider but it doesn't work. i looked for solving in the documentation, YouTube and google, without success. Can someone help me to make it work? The JavaScript Code can be found at the bottom of the script tag. Thanks! <!DOCTYPE html> <html lang="de-DE"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="font-awesome.min.css"> <title>Matheaufgaben</title> <!-- Bootstrap --> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" /> <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" /> <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" />--> <!-- CSS Files --> <!--<link href="../bootstrap-3.3.7/css/bootstrap.min.css" rel="stylesheet" />--> <link href="assets/css/bootstrap.min.css" rel="stylesheet" /> <link href="assets/css/material-kit.css" rel="stylesheet"/> <style> #box { width:400px; } #configuration { height:200px; padding: 10px 0; text-align: center; // background-color: ; margin-top: 10px; } .h2 { font-size:30px; } body { background-color:#fff; } .fadeInAndOut { padding-left: 100px; -webkit-animation: fadeinout 4s linear forwards; animation: fadeinout 4s linear forwards; } @-webkit-keyframes fadeinout { 0%,100% { opacity: 0; } 50% { opacity: 1; } } @keyframes fadeinout { 0%,100% { opacity: 0; } 50% { opacity: 1; } } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script> var richtig = 0, falsch = 0, last_erg = ''; var plusaufgaben = 0; var minusaufgaben = 0; var multiaufgaben = 0; var diviaufgaben = 0; function showconfig() { var x = document.getElementById("configuration"); if (x.style.display === "none") { x.style.display = "block"; } else { x.style.display = "none"; } var user = '' for (var i = 0; i < 2; i++) { if(document.userdata.user[i].checked) { user = (document.userdata.user[i].value); break; } } document.getElementById("showuser").innerHTML = user; } function hilfe() { /* show result in red */ document.getElementById("erg-output").style.color = "red"; /* Using Help Button is like a not solved task*/ falsch++; document.getElementById("falsch").innerHTML = falsch; /* Reset Inputfield */ document.ergebnis.ergebnis_eingabe.value =""; /* neue Aufgabe nach 1,5 Sekunden */ alert(erg); aufgabe_erstellen(); } function sleep(milliseconds) { var start = new Date().getTime(); for (var i = 0; i < 1e7; i++) { if ((new Date().getTime() - start) > milliseconds){ break; } } } function compare () { /* compare entered and calculated value */ var erg_eingabe = (document.ergebnis.ergebnis_eingabe.value); if (erg == erg_eingabe) { /* Reset input field */ document.ergebnis.ergebnis_eingabe.value =""; /* increment richtig++ */ richtig++; document.getElementById("visual").innerHTML = '<i class="fa fa-check fa-2x" aria-hidden="true"></i>'; /* show quantity correct tasks */ document.getElementById("richtig").innerHTML = richtig; /* check rating */ rating(richtig); /* nächste Aufgabe */ aufgabe_erstellen(); } else { falsch++; document.getElementById("visual").innerHTML = '<i class="fa fa-times fa-2x" aria-hidden="true"></i>'; document.ergebnis.ergebnis_eingabe.value =""; document.getElementById("falsch").innerHTML = falsch; last_aufgabe = aufgabe; } } function rating(richtig) { if (parseInt(richtig) >= 100) { document.getElementById("rating").innerHTML = '<i class="fa fa-star fa-2x" aria-hidden="true"></i><i class="fa fa-star fa-2x" aria-hidden="true"></i><i class="fa fa-star fa-2x" aria-hidden="true"></i><i class="fa fa-star fa-2x" aria-hidden="true"></i><i class="fa fa-star fa-2x" aria-hidden="true"></i>'; } else if (parseInt(richtig) >= 80) { document.getElementById("rating").innerHTML = '<i class="fa fa-star fa-2x" aria-hidden="true"></i><i class="fa fa-star fa-2x" aria-hidden="true"></i><i class="fa fa-star fa-2x" aria-hidden="true"></i><i class="fa fa-star fa-2x" aria-hidden="true"></i>'; } else if (parseInt(richtig) >= 60) { document.getElementById("rating").innerHTML = '<i class="fa fa-star fa-2x" aria-hidden="true"></i><i class="fa fa-star fa-2x" aria-hidden="true"></i><i class="fa fa-star fa-2x" aria-hidden="true"></i>'; } else if (parseInt(richtig) >= 40) { document.getElementById("rating").innerHTML = '<i class="fa fa-star fa-2x" aria-hidden="true"></i><i class="fa fa-star fa-2x" aria-hidden="true"></i>'; } else if (parseInt(richtig) >= 20) { document.getElementById("rating").innerHTML = '<i class="fa fa-star fa-2x" aria-hidden="true"></i>'; } } function define_min() { var zahlenraum1 = parseInt(document.zahlenraum.minimal.value); document.getElementById('min-output').innerHTML = zahlenraum1; aufgabe_erstellen(); } function define_max() { var zahlenraum2 = parseInt(document.zahlenraum.maximal.value); document.getElementById('max-output').innerHTML = zahlenraum2; aufgabe_erstellen(); } function number_random(min,max) { return Math.floor(Math.random() * (max - min +1)) + min; } function aufgabe_erstellen() { /* show result in white */ document.getElementById("erg-output").style.color = "white"; /* if input empty create new task */ if(document.ergebnis.ergebnis_eingabe.value == '') { var zahlenraum1 = parseInt(document.zahlenraum.minimal.value); var zahlenraum2 = parseInt(document.zahlenraum.maximal.value); zahl1 = number_random(1,zahlenraum1); zahl2 = number_random(1,zahlenraum2); console.log(zahl1 + ' ' + zahl2); // zahl1 = Math.floor(Math.random() * (max - min +1)) + min; // zahl2 = Math.floor(Math.random() * (max - min +1)) + min; /* check which operation is activeted */ var op =''; for (var i = 0; i < 4; i++) { if(document.operatoren.op[i].checked) { op = (document.operatoren.op[i].value); break; } } /* Create Task, especially if num2 > num1 change order for "minus" and create a String to show in div-element */ if (op=='-') { /* if zahl2 > zahl1 change Summanden */ if (zahl2 > zahl1) { var aufgabe = zahl2 + ' ' + op + ' ' + zahl1; } else { /* if not, Aufgabe as usual */ var aufgabe = zahl1 + ' ' + op + ' ' + zahl2; } } else { /* if not "-" */ var aufgabe = zahl1 + ' ' + op + ' ' + zahl2; }; eval(aufgabe); /* Calc results */ switch (op) { case '+': erg = zahl1 + zahl2; plusaufgaben++; document.getElementById("add").innerHTML = plusaufgaben; break; case '-': if (zahl2 > zahl1) { erg = zahl2 - zahl1;} else { erg = zahl1 - zahl2;}; minusaufgaben++; document.getElementById("sub").innerHTML = minusaufgaben; break; case '*': erg = zahl1 * zahl2; multiaufgaben++; document.getElementById("mul").innerHTML = multiaufgaben; break; case '/': erg = zahl1 / zahl2; diviaufgaben++; document.getElementById("divi").innerHTML = diviaufgaben; break; default: erg = ''; } /* Show task and result (in white) */ document.getElementById("aufgabe").innerHTML = aufgabe + " = "; document.getElementById("erg-output").innerHTML = erg; /* if inputfield not empty call function "compare" */ } else { compare(); } } var slider = document.getElementById('minimum'); noUiSlider.create(slider, { start: 30, range: {min: 10, max: 500} }) </script> </head> <body> <div id="box"> <div class="row"> <table><tr><td><button class="btn btn-success" onclick="showconfig()">Einstellungen</button><td style="color:green;padding-left:20px;" id="showuser"></td><td style="padding-left:10px;color:orange;" id="rating"></td></tr></table> </div> <div id="configuration"> <div class="row"> <form name="userdata"> <div class="checkbox col-xs-6"> <label><input type="checkbox" name="user" value="Ilias" />Ilias</label> </div> <div class="checkbox col-xs-6"> <label><input type="checkbox" name="user" value="Kilian" />Kilian</label> </div> </form> </div> <div class="row"> <form name="operatoren" onchange="aufgabe_erstellen()"> <div class="radio col-md-3"><label><input type="radio" name="op" value="-"><i class="fa fa-plus fa-2x" aria-hidden="true"></i></input></label></div> <div class="radio col-md-3"><label><input type="radio" name="op" value="+"><i class="fa fa-minus fa-2x" aria-hidden="true"></i></input></label></div> <div class="radio col-md-3"><label><input type="radio" name="op" value="*"><i class="fa fa-certificate fa-2x" aria-hidden="true"></i></input></label></div> <div class="radio col-md-3"><label><input type="radio" name="op" value="/"><i class="fa fa-arrows-v fa-2x" aria-hidden="true"></i></input></label></div> </form> </div> <div class="row" style="padding-left:10px"> <div class="col-xs-12 col-md-8"> <div id="slider-connect" class="slider slider-info"> </div> </div> <div class="col-xs-6 col-md-4"> <div id="min-output">Min-Wert</div> </div> </div> <!-- <form name="zahlenraum"> <table><tr><td> <input id="minimal" type="range" min="0" max="500" value="200" step="10" onchange="define_min()" ></input></td><td id="min-output"> </td></tr> <tr><td> <input id="maximal" type="range" min="0" max="1000" value="500" step="10" onchange="define_max()"></input></td><td id="max-output"> </td></tr> </table> </form> --> </div> <hr> <table> <tr><td id="aufgabe" class="h2"></td><td id="erg-output"></td></tr> </table> <div class=""><table><tr><td> <form name="ergebnis"> <input type="number" name="ergebnis_eingabe" style="height:40px;font-size:30px" size="10"> </form></td><td style="align:right" id="visual"></td></tr> </table> <button class="btn btn-default" style="" onclick="compare()">Check</button> </div> <hr> <div> <table> <tr><td>richtig: </td><td style="color: green" id="richtig"> 0 </td><td>falsch: </td><td style="color:red;" id="falsch">0</td></tr></table> <table> <tr><td>+ </td><td id="add"></td><td> | - </td><td id="sub"></td><td> | * </td><td id="mul"></td><td> | / </td><td id="divi"></td></tr> </table> </div> <button class="btn btn-sm btn-danger" onclick="hilfe()">Hilfe?</button> </div> <!-- Include all compiled plugins (below), or include individual files as needed --> <!-- <script src="bootstrap-3.3.7/js/bootstrap.min.js"></script> --> </body> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <!-- Core JS Files --> <script src="assets/js/jquery.min.js" type="text/javascript"></script> <script src="assets/js/bootstrap.min.js" type="text/javascript"></script> <script src="assets/js/material.min.js" type="text/javascript"></script> <!-- Plugin for the Sliders, full documentation here: http://refreshless.com/nouislider/ --> <script src="assets/js/nouislider.min.js" type="text/javascript"></script> <!-- Plugin for the Datepicker, full documentation here: http://www.eyecon.ro/bootstrap-datepicker/ --> <script src="assets/js/bootstrap-datepicker.js" type="text/javascript"></script> <!-- Control Center for Material Kit: activating the ripples, parallax effects, scripts from the example pages etc --> <script src="assets/js/material-kit.js" type="text/javascript"></script> </html>
  3. noUiSlider is 'undefined'

    yes, i made buttons and it's also okay. so i changed some points in the code and my kids can use it now ;-). I have another question. Trying to control how many tasks and which skill they train i added some more variables an print them in a table "solved tasks" for each level. This level i want to send by xmlhttp.request after hitting the yellow button. if i log the transaction in console i see the values of the variables: niveau1 and niveau2. I use GET to transfer. Unfortunately i loose the information in this process. The responstext is without the php echo value :-/ Thanks so much for being so patient with me ;-) the JS-Code function sendData() { console.log('niv1: '+niveau1+' niv2: '+niveau2); // I SEE THE VALUES IN CONSOLE var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if (this.readyState == 4) { console.log(xmlhttp); } if (this.readyState == 4 && this.status == 200) { document.getElementById("returnresponse").innerHTML = this.responseText; // responseText is empty } }; xmlhttp.open("GET", "rechnensave.php?", true); xmlhttp.send('niv1='+niveau1+'&niv2='+niveau2); } PHP(rechnensave.php): <?php header('Content-Type: text/html; charset=utf-8'); header('Cache-Control: must-revalidate, pre-check=0, no-store, no-cache, max-age=0, post-check=0'); // for IE $niv1 = $_GET['niv1']; $niv2 = $_GET['niv2']; echo "Test: ".$niv1." / ".$niv2; // responseText shows "Test / " ?>
  4. noUiSlider is 'undefined'

    Yeah, there is no longer an error in the console logged. The JS-Files are included. But now i don't see a slider :-/ . On the left side of "Min-Wert" should it visible. here is the example. In developmentmode on the browser i see the needed div. But there is no content unfortunatly.
  5. noUiSlider is 'undefined'

    Thanks someguy for your explanations. The first two aspects i understand an i can handle. The third aspect is a little bit "foggy" for me. I understand that i try to start the function in the head. Where else can i run it. I tried different "positions" like also head area, after the the </html> in the body... no useful result. finally i see the hole code as text now. It would be really nice, if you can show me the right line an structure. With best regards... pat
  6. W3 Schools AJAX / PHP tutorial doesn't work

    Thanks, i opened a supportticket at the hoster. I hope it's only deactivated.
  7. hey people, i tried to reproduce the "asp php" tutorial from W3Schools. this one if i copy it to my webspace and test it, the return is the hole code of the gethint.asp file. Instead of a match from the string, the responseText ist the whole file. Why? this is my my testing envivroment. someone can tell me the mistake?
  8. modern look for javascript application

    hey together, i created a JavaScript application to generate tasks in math for my seven and 9 years old children. so far it works, but looks terrible. Someone has any ideas and tipps how to style it and make it look modern? i don't know css alot. i appreciate some help :-) http://holland-nell.net/php/java-rechnen.html thanks :-)
  9. How do I set this topic to "solved"? 👌
  10. hey specialists, i spent 2 days on a small java-calulating script for my 7 year old son, to "play on the tablet" :-). At the moment he is not allowed to play games, so he can practice math a little bit... i don't use an app, because i like the "challange" and want to learn something too. thats why i startet to try coding. Now i cant go on, the check-button in my script doesn't do anything. My script shows tasks an Operators, but the entered solution is not going to be compared with the result. Can someone help me to find the error? Script in action is here: http://holland-nell.net/php/java-rechnen.html the Code was written easily in "german". i translated the comments in english... Thanks :-) <!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=2.0"> <title>Titel</title> <style> #box { width:400px; } </style> <script> var min = 5, max = 10; var richtig = 0, falsch = 0; function hilfe() { /* show result in red */ document.getElementById("erg-output").style.color = "red"; /* Using Help Button is like a not solved task*/ falsch++; document.getElementById("falsch").innerHTML = falsch; /* Reset Inputfield */ document.ergebnis.ergebnis_eingabe.value =""; /* neue Aufgabe nach 1,5 Sekunden */ sleep(1500); aufgabe_erstellen(min,max); } function sleep(milliseconds) { var start = new Date().getTime(); for (var i = 0; i < 1e7; i++) { if ((new Date().getTime() - start) > milliseconds){ break; } } } function compare () { /* compare entered and calculated value */ var erg_eingabe = (document.ergebnis.ergebnis_eingabe.value); var erg =(document.getElementById("erg-output").value); console.log('Ergebnis Eingabe: ' + erg_eingabe + ' berechnetes Ergebnis: ' + erg); if (erg == erg_eingabe) { alert("richtig"); document.ergebnis.ergebnis_eingabe.value =""; richtig++; document.getElementById("richtig").innerHTML = richtig; } else { alert("falsch"); falsch++; document.getElementById("falsch").innerHTML = falsch; } } function aufgabe_erstellen(min, max) { /* show result in white */ document.getElementById("erg-output").style.color = "white"; /* if input empty create new task */ if(document.ergebnis.ergebnis_eingabe.value == '') { zahl1 = Math.floor(Math.random() * (max - min +1)) + min; zahl2 = Math.floor(Math.random() * (max - min +1)) + min; /* check which operation is activeted */ var op =''; for (var i = 0; i < 4; i++) { if(document.operatoren.op[i].checked) { op = (document.operatoren.op[i].value); break; } } /* Create a String to show in div-element */ var aufgabe = zahl1 + ' ' + op + ' ' + zahl2; eval(aufgabe); /* Calc results */ switch (op) { case '+': var erg = zahl1 + zahl2; break; case '-': erg = zahl1 - zahl2; break; case '*': erg = zahl1 * zahl2; break; case '/': erg = zahl1 / zahl2; break; default: erg = ''; } /* Show task and result (in white) */ document.getElementById("aufgabe").innerHTML = aufgabe + " = "; document.getElementById("erg-output").innerHTML = erg; /* if inputfield not empty call function "compare" */ } else { compare(); } } </script> </head> <body> <div id="box"> <div class=""> <form name="operatoren" onchange="aufgabe_erstellen(min,max)"> <input type="radio" name="op" value="-">Minus</input> <input type="radio" name="op" value="+">Plus</input> <input type="radio" name="op" value="*">Multiplikation</input> <input type="radio" name="op" value="/">Division</input> </form> <div id="aufgabe"></div><div id="erg-output"></div> </div> <div class=""> <form name="ergebnis"> <input type="number" name="ergebnis_eingabe" /> </form> <button onklick="compare()">Check</button> </div> <div> <button onclick="hilfe()">Hilfe?</button><br> Richtig: <div id="richtig">0</div> Falsch: <div id="falsch">0</div> </div> </div> </body> </html>
  11. Thanks so much. How stupid =-). Now it works. Great. Something else to improve?
×