API tools faq
paste
Advertisement
Guest User

Mein Code

a guest
Sep 13th, 2020
106
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 20.75 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <link rel="stylesheet" href="Stylecodes/design4.css">
  5. <link rel="stylesheet" href="Stylecodes/Main.css">
  6. <meta charset="UTF-8">
  7. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8. <title>Lektion 4</title>
  9. <script src="jquery-1.10.2.min.js"></script>
  10.  
  11. </head>
  12. <body>
  13. <div id="float2">
  14. <div class="kasten2">Falsch beantwortete Vokabeln:<p id="wrong"></p> Wiederhole diese öfter!</div></div>
  15. <div id="float">
  16.  
  17. <ul class="navigation">
  18. <li> <a href="Startseite.html" target="_blank">Startseite</a></li>
  19. <li> <a href="Hauptmenü.html"> Hauptmenü </a></li>
  20. <li><a href="Vokabelliste4.html" target="_blank">Vokabelliste4</a></li>
  21. <li><a href="Lektion5.html" > Lektion 5</a></li>
  22. </ul>
  23.  
  24. <div class="kasten"> Richtig beantwortete Vokabeln:<p id ="demo"></p> Restliche Vokabeln: <span id="rechnen"></span> </div>
  25.  
  26.  
  27.  
  28.  
  29.  
  30. </div>
  31.  
  32. <div id="website">
  33. <h1 style="text-align: center; color:indianred; text-decoration: underline;">Lektion 4: Zeit</h1>
  34.  
  35.  
  36.  
  37. <span class="flex"><img src="bilder/germany200.jpg" alt="Deutschlandflagge" > </span>
  38. <span ide="bild2"><img src="bilder/croatia.jpg" alt="Kroatienflagge" width="200px" style="margin-top: 110px; height:120px;"> </span>
  39. <div class="center">
  40. <span id="abstand"> <input type="text" id="vokabel"></span>
  41. <input type="text" placeholder="Lösung" id="loesung" autofocus> <select id="sonderzeichen">
  42. <option></option>
  43. <option>đ</option>
  44. <option>ć</option>
  45. <option>ž</option>
  46. <option>č</option>
  47. <option>š</option>
  48. </select>
  49. <div class="frame"> <button class="custom-btn btn-2" id="pruefen" onclick=Pruefen();>Überprüfen</button> </div>
  50.  
  51. </div>
  52.  
  53.  
  54. <div id="main">
  55. <div id="image">
  56. <img src="hands.jpg"/>
  57. </div>
  58. <div id="player">
  59. <div id="songTitle">Control</div>
  60. <div id="buttons">
  61. <button id="pre" onclick="pre()"><img src="Pre.png" height="90%" width="90%"/></button>
  62. <button id="play" onclick="playOrPauseSong() "><img src="Play.png"/></button>
  63. <button id="next" onclick="next()"><img src="Next.png" height="90%" width="90%"/></button>
  64. </div>
  65.  
  66. <div id="seek-bar">
  67. <div id="fill"></div>
  68. <div id="handle"></div>
  69. </div>
  70.  
  71. <div id="currentTime">00:00 / 00:00</div>
  72.  
  73. </div>
  74. </div>
  75.  
  76.  
  77.  
  78. <script>
  79. var richtigeVokabeln, text;
  80. var index;
  81. var rechnung;
  82. var erg;
  83. var erg2;
  84. var vokablen = ["Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag", "Sonntag", "Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember", "Frühling", "Sommer", "Herbst", "Winter", "Heute", "Morgen", "Gestern", "Jeden Tag", "Jetzt", "Frohe Weihnachten", "Frohe Ostern", "Frohes neues Jahr", "Mittag", "Nachmittag", "Mitternacht", "Stunde", "Minute", "Sekunde", "Uhr", "2 Uhr", "7 Uhr", "10:30 Uhr", "15 Uhr", "Vorgestern", "Übermorgen"];
  85. var vokablen2 = ["Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag", "Sonntag", "Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember", "Frühling", "Sommer", "Herbst", "Winter", "Heute", "Morgen", "Gestern", "Jeden Tag", "Jetzt", "Frohe Weihnachten", "Frohe Ostern", "Frohes neues Jahr", "Mittag", "Nachmittag", "Mitternacht", "Stunde", "Minute", "Sekunde", "Uhr", "2 Uhr", "7 Uhr", "10:30 Uhr", "15 Uhr", "Vorgestern", "Übermorgen"];
  86. var uebersetzung = ["ponedjeljak", "utorak", "srijeda", "četrvrtak", "petak", "subota", "nedjelja", "siječanj", "veljača", "ožujak", "travanj", "svibanj", "lipanj", "srpanj", "kolovoz", "rujan", "listopad", "studeni", "prosianc", "proljeće", "ljeto", "jesen", "zima", "danas", "sutra", "jučer", "svaki dan", "sada", "sretan božić", "sretan uskrs", "sretna nova godina", "podne", "poslijepodne", "ponoć", "sat", "minuta", "sekunda", "sat", "dva sat", "sedam sati ujutro", "deset sati i trideset minuta", "tri sata popodne/petnaest sati", "prekjučer", "prekosutra"];
  87. richtigeVokabeln = [ ];
  88. var falscheVokabeln = [ ];
  89. var richtigeAntwort = 0;
  90. var wiederholung;
  91. var status ='neu' //das dann au
  92.  
  93.  
  94. const input2 = document.getElementById("loesung");
  95. const select = document.getElementById("sonderzeichen");
  96. select.addEventListener("change", function (event) {
  97. const zeichen = this.value;
  98. input2.value += zeichen;
  99. this.selectedIndex = 0;
  100. document.getElementById("loesung").focus();
  101. });
  102.  
  103.  
  104. var input = document.getElementById("loesung");
  105. input.addEventListener("keyup", function(event) {
  106. if (event.keyCode === 13) {
  107. event.preventDefault();
  108. document.getElementById("pruefen").click();
  109. }
  110. });
  111.  
  112.  
  113. var input = document.getElementById("loesung");
  114. document.getElementById('pruefen').addEventListener("click", pruefen);
  115.  
  116.  
  117. // In dieser Form machte die Schleife keinen Sinn: Die Endebedingung (richtigeAntwort == 3)
  118. // ist nie erfuellt, da die Variable richtigeAntwort den Wert 0 hat
  119. // Daher wird die Schleife genau einmal durchlaufen
  120. // do {
  121.  
  122. // Diese Funktion prueft ob die Uebersetzung richtig eingegeben wurde
  123. // und legt ggf. eine neue Vokabel vor
  124. function pruefen() {
  125. if(status == 'wiederholung'){
  126. // Status Wiederholung: Der Benutzer hat die falsche
  127. // Vokabel erneut eingegeben und Enter gedrueckt
  128. // Neue Vokabel vorlegen
  129. neueVokabel();
  130. status = 'neu';
  131. input.style.color ='black';
  132. } else {
  133. // Pruefen ob die Uebersetzung richtig ist
  134. if (document.getElementById("loesung").value == uebersetzung[index]) {
  135. // Anzahl der richtigen Antworten erhoehen
  136. richtigeAntwort++;
  137. // Rueckmeldung an den Benutzer
  138. alert("Richtig! Du hast " + richtigeAntwort + " Vokabeln richtig beantwortet!");
  139.  
  140. erg=richtigeVokabeln.includes(uebersetzung[index]);
  141.  
  142. if(erg == false){
  143. richtigeVokabeln.push(uebersetzung[index]);}
  144.  
  145.  
  146.  
  147. vokablen.splice(index, 1);
  148.  
  149. uebersetzung.splice(index, 1);
  150.  
  151.  
  152.  
  153. // Ist die geforderte Anzahl von richtigen Antworten erreicht
  154. // geben wir nur eine Rueckmeldung und legen keine neue Vokabel vor
  155. if (richtigeAntwort == 10) {
  156. alert("Super! Du hast 10 Vokabeln richtig geschrieben! Mach eine Pause");
  157.  
  158. text = "<ul>";
  159. richtigeVokabeln.forEach(myFunction);
  160. text += "</ul>";
  161. document.getElementById("demo").innerHTML = text;
  162. function myFunction(value) {
  163. text += "<li>" + value + "</li>"; }
  164.  
  165. rechnung= vokablen2.length - richtigeVokabeln.length;
  166. document.getElementById("rechnen").innerHTML = rechnung;
  167.  
  168. text = "<ul>";
  169. falscheVokabeln.forEach(myFunction);
  170. text += "</ul>";
  171. document.getElementById("wrong").innerHTML = text;
  172. function myFunction(value) {
  173. text += "<li>" + value + "</li>"; }
  174.  
  175. neueVokabel();
  176.  
  177. } else {
  178. // Neue Vokabel vorlegen
  179. neueVokabel();
  180. }
  181. if (richtigeAntwort == 20) {
  182. alert("Super! Du hast 20 Vokabeln richtig geschrieben! Mach eine Pause");
  183.  
  184. text = "<ul>";
  185. richtigeVokabeln.forEach(myFunction);
  186. text += "</ul>";
  187. document.getElementById("demo").innerHTML = text;
  188. function myFunction(value) {
  189. text += "<li>" + value + "</li>"; }
  190.  
  191. rechnung= vokablen2.length - richtigeVokabeln.length;
  192. document.getElementById("rechnen").innerHTML = rechnung;
  193.  
  194. text = "<ul>";
  195. falscheVokabeln.forEach(myFunction);
  196. text += "</ul>";
  197. document.getElementById("wrong").innerHTML = text;
  198. function myFunction(value) {
  199. text += "<li>" + value + "</li>"; }
  200.  
  201. neueVokabel();
  202.  
  203. } else {
  204. // Neue Vokabel vorlegen
  205. neueVokabel();
  206. }
  207. if (richtigeAntwort == 40) {
  208. alert("Super! Du hast 40 Vokabeln richtig geschrieben! Mach eine Pause");
  209.  
  210. text = "<ul>";
  211. richtigeVokabeln.forEach(myFunction);
  212. text += "</ul>";
  213. document.getElementById("demo").innerHTML = text;
  214. function myFunction(value) {
  215. text += "<li>" + value + "</li>"; }
  216.  
  217. rechnung= vokablen2.length - richtigeVokabeln.length;
  218. document.getElementById("rechnen").innerHTML = rechnung;
  219.  
  220. text = "<ul>";
  221. falscheVokabeln.forEach(myFunction);
  222. text += "</ul>";
  223. document.getElementById("wrong").innerHTML = text;
  224. function myFunction(value) {
  225. text += "<li>" + value + "</li>"; }
  226.  
  227. neueVokabel();
  228.  
  229. } else {
  230. // Neue Vokabel vorlegen
  231. neueVokabel();
  232. }
  233. if (richtigeAntwort == 60) {
  234. alert("Super! Du hast 60 Vokabeln richtig geschrieben! Mach eine Pause");
  235.  
  236. text = "<ul>";
  237. richtigeVokabeln.forEach(myFunction);
  238. text += "</ul>";
  239. document.getElementById("demo").innerHTML = text;
  240. function myFunction(value) {
  241. text += "<li>" + value + "</li>"; }
  242.  
  243. rechnung= vokablen2.length - richtigeVokabeln.length;
  244. document.getElementById("rechnen").innerHTML = rechnung;
  245.  
  246. text = "<ul>";
  247. falscheVokabeln.forEach(myFunction);
  248. text += "</ul>";
  249. document.getElementById("wrong").innerHTML = text;
  250. function myFunction(value) {
  251. text += "<li>" + value + "</li>"; }
  252.  
  253. neueVokabel();
  254.  
  255. } else {
  256. // Neue Vokabel vorlegen
  257. neueVokabel();
  258. }
  259. if (richtigeAntwort == 80) {
  260. alert("Super! Du hast 80 Vokabeln richtig geschrieben! Mach eine Pause");
  261.  
  262. text = "<ul>";
  263. richtigeVokabeln.forEach(myFunction);
  264. text += "</ul>";
  265. document.getElementById("demo").innerHTML = text;
  266. function myFunction(value) {
  267. text += "<li>" + value + "</li>"; }
  268.  
  269. rechnung= vokablen2.length - richtigeVokabeln.length;
  270. document.getElementById("rechnen").innerHTML = rechnung;
  271.  
  272. text = "<ul>";
  273. falscheVokabeln.forEach(myFunction);
  274. text += "</ul>";
  275. document.getElementById("wrong").innerHTML = text;
  276. function myFunction(value) {
  277. text += "<li>" + value + "</li>"; }
  278.  
  279. neueVokabel();
  280.  
  281. }
  282. if (richtigeAntwort == 100) {
  283. alert("Super! Du hast 100 Vokabeln richtig geschrieben! Mach eine Pause");
  284.  
  285. text = "<ul>";
  286. richtigeVokabeln.forEach(myFunction);
  287. text += "</ul>";
  288. document.getElementById("demo").innerHTML = text;
  289. function myFunction(value) {
  290. text += "<li>" + value + "</li>"; }
  291.  
  292. rechnung= vokablen2.length - richtigeVokabeln.length;
  293. document.getElementById("rechnen").innerHTML = rechnung;
  294.  
  295. text = "<ul>";
  296. falscheVokabeln.forEach(myFunction);
  297. text += "</ul>";
  298. document.getElementById("wrong").innerHTML = text;
  299. function myFunction(value) {
  300. text += "<li>" + value + "</li>"; }
  301.  
  302. neueVokabel();
  303.  
  304. }
  305. if (richtigeAntwort == 120) {
  306. alert("Super! Du hast 120 Vokabeln richtig geschrieben! Mach eine Pause");
  307.  
  308. text = "<ul>";
  309. richtigeVokabeln.forEach(myFunction);
  310. text += "</ul>";
  311. document.getElementById("demo").innerHTML = text;
  312. function myFunction(value) {
  313. text += "<li>" + value + "</li>"; }
  314.  
  315. rechnung= vokablen2.length - richtigeVokabeln.length;
  316. document.getElementById("rechnen").innerHTML = rechnung;
  317.  
  318. text = "<ul>";
  319. falscheVokabeln.forEach(myFunction);
  320. text += "</ul>";
  321. document.getElementById("wrong").innerHTML = text;
  322. function myFunction(value) {
  323. text += "<li>" + value + "</li>"; }
  324.  
  325. neueVokabel();
  326.  
  327. }
  328.  
  329.  
  330. else {
  331. // Neue Vokabel vorlegen
  332. neueVokabel();
  333. }
  334. if (richtigeVokabeln.length == vokablen2.length){
  335. alert("Sehr gut! Du hast alle Vokabeln richtig beantwortet. Du kehrst jetzt zurück zum Hauptmenü. Komm einfach wieder, um weiter zu lernen");
  336.  
  337.  
  338.  
  339. window.location.href = "Hauptmenü.html";
  340. }
  341. } else {
  342. // Falsche Uebersetzung: Rueckmeldung an Benutzer
  343. alert("Falsch :( Die Lösung ist: " + uebersetzung[index]);
  344. alert("Gebe " + uebersetzung[index] + " nochmal ein, um die Vokabel zu verinnerlichen"); //war ursprünglich ein prompt
  345. vokablen.push(vokablen[index]);
  346. status = 'wiederholung'; // das auch weglassen
  347. input.focus(); //das auch
  348. input.style.color='firebrick';
  349. uebersetzung.push(uebersetzung[index]);
  350. erg2=falscheVokabeln.includes(uebersetzung[index]);
  351.  
  352. if(erg2 == false){
  353. falscheVokabeln.push(uebersetzung[index]);}
  354.  
  355.  
  356. // Neue Vokabel vorlegen
  357. // neueVokabel(); das wurde geändert kommentar wegmachen
  358.  
  359. }
  360. }}
  361. // } while (richtigeAntwort == 3)
  362. // Diese Funktion legt dem Benutzer eine neue Vokabel vor
  363. // Der Code wird mehrfach benoetigt, daher in einer Funktion
  364. function neueVokabel() {
  365. index = Math.floor(Math.random() * vokablen.length);
  366. document.getElementById("vokabel").value = vokablen[index];
  367. document.getElementById("loesung").focus();
  368. // Alte Uebersetzung kann jetzt geloescht werden
  369. input.value = '';
  370. }
  371. // Die erste Vokabel vorlegen
  372. neueVokabel();
  373.  
  374. </script>
  375.  
  376. <script type="text/javascript">
  377.  
  378. var songs = ["Control.mp3","Sunshine.wav","Ruleta.wav", "Bebe.wav", "Better Days.wav", "Instagram.wav", "Intentsion.mp3","Rojo.mp3", "SICKO.mp3", "Superstar.mp3", "Troubeld Water.mp3", "painkiller.mp3", "all my friends are fake.mp3", "at least i look cool.mp3", "good old days.mp3", "wrong direction.mp3", "the archer.mp3", "lalalife.mp3", "bulletproof.mp3", "death bed.mp3", "everything i wanted.mp3", "fine line.mp3", "little lion man.mp3", "quit.mp3", "selfish love.mp3", "spanish.mp3", "vermissen.mp3", "worry about me.mp3", "think before i talk.mp3", "Oneofus.mp3", "loveme.mp3", "lovin.mp3", "toyou.mp3", "jam.mp3", "Night Air.mp3"];
  379. var nameSongs =["Control", "Sunshine", "Ruleta", "Bebe", "Better Days", "Instagram", "Intentions", "Rojo", "SICKO", "Superstar", "Troubled Water", "Painkiller", "All my friends are fake", "At least I look cool", "Good Old Days", "Wrong Direction", "The Archer", "LaLaLife", "Bulletproof", "death bed", "everything I wanted", "Fine Line", "Little Lion Man", "Quit", "Selfish Love", "No Te Enamores", "Vermissen", "Worry about me", "Think before I talk", "ONE OF US", "Love me like you", "Lovin kind", "Someone to you", "Summer Jam", "Night Air"];
  380. var poster = ["hands.jpg","sun.jpg","roulette.jpg","Bebepic.jpg","Tree.jpg", "instagram.jpg","think2.jpg", "red.jpg", "lost.jpg", "star.jpg", "water.jpg", "pills.jpg", "mask.jpg", "sign.jpg", "ping.jpg", "direction.jpg", "archer.jpg", "life.jpg", "bullet.jpg", "sanduhr.jpg", "snow.jpg", "bridge.jpg", "forgive.jpg", "flash.jpg", "rose.jpg", "sad love.jpg", "lake.jpg", "worry.jpg", "thinktalk.jpg", "Poster3.jpg", "love2.jpg", "hugfriend.jpg", "fullmoon.jpg", "concert.jpg", "night.jpg"];
  381.  
  382. var songTitle = document.getElementById("songTitle");
  383. var fillBar = document.getElementById("fill");
  384. var currentTime = document.getElementById("currentTime");
  385.  
  386. var song = new Audio();
  387. var currentSong = 0; // it point to the current song
  388.  
  389. // it will call the function playSong when window is load
  390.  
  391. function playSong(){
  392.  
  393. song.src = songs[currentSong]; //set the source of 0th song
  394.  
  395. songTitle.textContent = nameSongs[currentSong]; // set the title of song
  396.  
  397. song.play(); // play the song
  398. }
  399.  
  400. function playOrPauseSong(){
  401.  
  402. if(song.paused){
  403. song.play();
  404. $("#play img").attr("src","Pause.png");
  405. }
  406. else{
  407. song.pause();
  408. $("#play img").attr("src","Play.png");
  409. }
  410. }
  411.  
  412. song.addEventListener('timeupdate',function(){
  413.  
  414. var position = song.currentTime / song.duration;
  415.  
  416. fillBar.style.width = position * 100 +'%';
  417.  
  418. convertTime(Math.round(song.currentTime));
  419.  
  420. if(song.ended){
  421. next();
  422. }
  423.  
  424. });
  425.  
  426. function convertTime(seconds){
  427.  
  428. var min = Math.floor(seconds / 60);
  429. var sec = seconds % 60;
  430.  
  431. min = (min < 10) ? "0" + min : min;
  432. sec= (sec < 10) ? "0" + sec : sec;
  433. currentTime.textContent = min + ":" + sec;
  434.  
  435. totalTime(Math.round(song.duration));
  436.  
  437. }
  438.  
  439. function totalTime(seconds){
  440.  
  441. var min = Math.floor(seconds / 60);
  442. var sec = seconds % 60;
  443.  
  444. min = (min < 10) ? "0" + min : min;
  445. sec= (sec < 10) ? "0" + sec : sec;
  446. currentTime.textContent += "/" + min + ":" + sec;
  447.  
  448.  
  449. }
  450.  
  451.  
  452. function next(){
  453.  
  454. currentSong++;
  455. if(currentSong >= songs.length){
  456. currentSong = 0;
  457. }
  458. playSong();
  459. $("#play img").attr("src","Pause.png");
  460. $("#image img").attr("src",poster[currentSong]);
  461. $("#bg img").attr("src",poster[currentSong]);
  462. }
  463.  
  464. function pre(){
  465.  
  466. currentSong--;
  467. if(currentSong < 0){
  468. currentSong = 34; //anpassen wenn ich mehr Songs habe (Anzahl an Songs nehmen)
  469. }
  470. playSong();
  471. $("#play img").attr("src","Pause.png");
  472. $("#image img").attr("src",poster[currentSong]);
  473. $("#bg img").attr("src",poster[currentSong]);
  474. }
  475.  
  476. function getSong(idx) {
  477. song.src = songs[idx];
  478. $("#songTitle").text() = songs[idx];
  479. $("#image img").attr("src",poster[idx]);
  480. $("#bg img").attr("src",poster[idx]);
  481. }
  482.  
  483. var seekBar = document.getElementById("seek-bar");
  484.  
  485. function scrub(e){
  486.  
  487. const scrubTime =(e.offsetX / seekBar.offsetWidth) * song.duration;
  488.  
  489. song.currentTime = scrubTime
  490.  
  491. console.log(e);
  492.  
  493. }
  494.  
  495.  
  496.  
  497. seekBar.addEventListener('click',scrub);
  498.  
  499. getSong(0);
  500.  
  501.  
  502.  
  503.  
  504. </script>
  505.  
  506.  
  507.  
  508. <br><br><br><br><br> <br>
  509. </div>
  510.  
  511. </body>
  512. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!