API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Dec 26th, 2021
24
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 14.46 KB | None | 0 0
raw download clone embed print report
  1. 'use strict'
  2.  
  3.  
  4.  
  5. // Variablen und Funktionen
  6.  
  7. let i = 1;
  8. let w = 1;
  9. let secondsWord = document.getElementById('secondsWord');
  10.  
  11.  
  12. const againAfterTimeout = document.getElementById('againAfterTimeout');
  13. const againFromStart = document.getElementById('againFromStart');
  14. const answerReplay = document.getElementById('answerReplay');
  15. const answerReplayRight = document.getElementById('answerReplayRight');
  16. const blackOverlay = document.getElementById('blackOverlay');
  17. const buttonFour = document.getElementById('4');
  18. const buttonOne = document.getElementById('1');
  19. const buttonThree = document.getElementById('3');
  20. const buttonTwo = document.getElementById('2');
  21. const count = document.getElementById('count');
  22. const countPlayTime = document.getElementById('countPlayTime');
  23. const countPlayTimeOver = document.getElementById('countPlayTimeOver');
  24. const countQuestions = document.getElementById('countQuestions');
  25. const finalOverlay = document.getElementById('finalOverlay');
  26. const greenOverlay = document.getElementById('greenOverlay');
  27. const makeItBetterFour = document.getElementById('makeItBetterFour');
  28. const makeItBetterOne = document.getElementById('makeItBetterOne');
  29. const makeItBetterThree = document.getElementById('makeItBetterThree');
  30. const makeItBetterTwo = document.getElementById('makeItBetterTwo');
  31. const next = document.getElementById('next');
  32. const noMoreQuestions = document.getElementById('noMoreQuestions');
  33. const numberSeconds = document.getElementById('numberSeconds');
  34. const playpart = document.getElementById('playpart');
  35. const points = document.getElementById('points');
  36. const pointsEnd = document.getElementById('pointsEnd');
  37. const prologue = document.getElementById('prologue');
  38. const question = document.getElementById('question');
  39. const questionAnswers = document.getElementById('questionAnswers');
  40. const questionReplay = document.getElementById('questionReplay');
  41. const questionReplayRight = document.getElementById('questionReplayRight');
  42. const redOverlay = document.getElementById('redOverlay');
  43. const rightOne = document.getElementById('rightOne');
  44. const start = document.getElementById('start');
  45. const wrongFour = document.getElementById('wrongFour');
  46. const wrongOne = document.getElementById('wrongOne');
  47. const wrongThree = document.getElementById('wrongThree');
  48. const wrongTwo = document.getElementById('wrongTwo');
  49.  
  50. // !!! Nodelist mit den Buttons für die Antworten bereit stellen:
  51. const answerBtns = document.querySelectorAll('div.answers button');
  52.  
  53.  
  54.  
  55. blackOverlay.style.top = '-' + window.innerHeight + 'px';
  56. finalOverlay.style.top = '-' + window.innerHeight + 'px';
  57.  
  58.  
  59.  
  60. function answerBlockScale() {
  61. let answerBlock, z;
  62. answerBlock = document.querySelectorAll(".answerBlock");
  63. for (z = 0; z < answerBlock.length; z++) {
  64. answerBlock[z].style.cssText = 'transform: scale(1, 1);'
  65. }
  66. }
  67.  
  68. function answerBlockReScale() {
  69. let answerBlock, z;
  70. answerBlock = document.querySelectorAll(".answerBlock");
  71. for (z = 0; z < answerBlock.length; z++) {
  72. answerBlock[z].style.cssText = 'transform: scale(0, 0);'
  73. }
  74. }
  75.  
  76. function wrongAnswerBlock() {
  77. playpart.style.cssText = 'opacity: .5; transition: opacity 2s';
  78. redOverlay.style.cssText = 'display: grid';
  79. stopTimer();
  80. setTimeout(function () {
  81. redOverlay.style.cssText = 'display: grid; transform: translateY(0)';
  82. },
  83. 700);
  84. setTimeout(function () {
  85. answerBlockScale()
  86. },
  87. 1100);
  88. }
  89.  
  90. function rightAnswerBlock() {
  91. playpart.style.cssText = 'opacity: .5; transition: opacity 2s';
  92. greenOverlay.style.cssText = 'display: grid';
  93. setTimeout(function () {
  94. greenOverlay.style.cssText = 'display: grid; transform: translateY(0)';
  95. },
  96. 700);
  97. setTimeout(function () {
  98. answerBlockScale()
  99. },
  100. 1100);
  101. }
  102.  
  103.  
  104.  
  105. function redOverlayTransform() {
  106. redOverlay.style.transform = 'translateY(-101%)';
  107. playpart.style.cssText = 'opacity: 1; transition: opacity 2s';
  108. }
  109.  
  110. function greenOverlayTransform() {
  111. greenOverlay.style.transform = 'translateY(-101%)';
  112. playpart.style.cssText = 'opacity: 1; transition: opacity 2s';
  113. }
  114.  
  115.  
  116.  
  117. let sec = 21;
  118. // numberSeconds.innerHTML = sec - 1;
  119. // let stoptime = true;
  120. // countPlayTime.innerHTML = 'Countdown startet ...'
  121. // countPlayTime.style.backgroundColor = 'gray';
  122. // countPlayTime.style.color = 'white';
  123.  
  124. function startTimer() {
  125. // if (stoptime == true) {
  126. // stoptime = false;
  127. // timerCycle();
  128. // }
  129. }
  130.  
  131. function stopTimer() {
  132. // if (stoptime == false) {
  133. // stoptime = true;
  134. // }
  135. // countPlayTime.innerHTML = 'Countdown angehalten ...'
  136. // countPlayTime.style.backgroundColor = 'gray';
  137. // countPlayTime.style.color = 'white';
  138. }
  139.  
  140. function resetTimer() {
  141. // sec = 21;
  142. // stoptime = true;
  143. // countPlayTime.innerHTML = 'Countdown startet ...'
  144. // countPlayTime.style.backgroundColor = 'gray';
  145. // countPlayTime.style.color = 'white';
  146. }
  147.  
  148. function timerCycle() {
  149. if (stoptime == false) {
  150. sec = parseInt(sec);
  151. sec = sec - 1;
  152. secondsWord = 'Sekunden';
  153. if (sec == 1) {
  154. secondsWord = 'Sekunde';
  155. }
  156. countPlayTime.innerHTML = 'Zeit läuft! Noch <span class="nowrap">' + sec + ' ' + secondsWord + ' ...</span>';
  157. if (sec <= 20) {
  158. countPlayTime.style.backgroundColor = 'rgb(118, 170, 14)';
  159. countPlayTime.style.color = 'white';
  160. }
  161. if (sec <= 10) {
  162. countPlayTime.style.backgroundColor = 'gold';
  163. countPlayTime.style.color = '#444';
  164. }
  165. if (sec <= 3 && sec != 0) {
  166. countPlayTime.style.backgroundColor = 'crimson';
  167. countPlayTime.style.color = 'white';
  168. }
  169. if (sec == 0) {
  170. stopTimer()
  171. countPlayTime.style.display = 'none';
  172. countPlayTimeOver.style.display = 'block';
  173. questionAnswers.style.cssText = 'display: grid; opacity: 0; transform: rotateY(180deg); transition: opacity 6s, transform 3s ease-in';
  174. blackOverlay.style.cssText = 'display: grid';
  175. blackOverlay.style.top = '-' + window.innerHeight + 'px';
  176. setTimeout(function () {
  177. blackOverlay.style.cssText = 'display: grid; top: 0; transition: top 2s ease-in';
  178. },
  179. 2000);
  180. }
  181. setTimeout("timerCycle()", 1000);
  182. }
  183. }
  184.  
  185.  
  186.  
  187. function doItAgain() {
  188. i = 1;
  189. makeQuestion();
  190. resetTimer();
  191. blackOverlay.style.top = '-' + window.innerHeight + 'px';
  192. finalOverlay.style.top = '-' + window.innerHeight + 'px';
  193. countPlayTime.style.display = 'block';
  194. countPlayTimeOver.style.display = 'none';
  195. questionAnswers.style.cssText = 'display: grid; opacity: 1; transform: rotateY(0); transition: opacity 6s, transform 3s ease-in';
  196. redOverlay.style.transform = 'translateY(-101%)';
  197. greenOverlay.style.transform = 'translateY(-101%)';
  198. playpart.style.cssText = 'opacity: 1';
  199. setTimeout(function () {
  200. startTimer();
  201. },
  202. 5000);
  203. }
  204.  
  205.  
  206.  
  207. function pointerEventsOff() {
  208. buttonOne.style.pointerEvents = 'none';
  209. buttonTwo.style.pointerEvents = 'none';
  210. buttonThree.style.pointerEvents = 'none';
  211. buttonFour.style.pointerEvents = 'none';
  212. }
  213.  
  214. function pointerEventsOn() {
  215. buttonOne.style.pointerEvents = 'auto';
  216. buttonTwo.style.pointerEvents = 'auto';
  217. buttonThree.style.pointerEvents = 'auto';
  218. buttonFour.style.pointerEvents = 'auto';
  219. }
  220.  
  221.  
  222.  
  223. // Ermittelt die Anzahl der Fragen und ruft die Callback-Funktion auf:
  224.  
  225. function getCountRows(callback) {
  226. fetch('countRows.php', {
  227. method: 'post',
  228. }).then(countofquestions => {
  229. return countofquestions.json();
  230. }).then(countofquestions => {
  231. callback(countofquestions);
  232. });
  233. }
  234.  
  235.  
  236.  
  237.  
  238.  
  239.  
  240.  
  241.  
  242.  
  243.  
  244.  
  245. // Erstellt eine Frage, deren Antwortmöglichkeiten und die Punktzahl:
  246.  
  247. function makeQuestion(countofquestions) {
  248. const oneQuestion = new FormData();
  249. oneQuestion.append('id', i);
  250. fetch('getQuestions.php', {
  251. method: 'post',
  252. body: oneQuestion
  253. }).then(questions => {
  254. return questions.json();
  255. }).then(questions => {
  256.  
  257. count.innerHTML = i + '. Frage:';
  258. question.innerHTML = questions.question;
  259. questionReplay.innerHTML = questions.question;
  260. questionReplayRight.innerHTML = questions.question;
  261. for (let j = 0; j < questions.answers.length; j++) {
  262. document.getElementById(j + 1).style.display = 'block';
  263. document.getElementById(j + 1).innerHTML = questions.answers[j];
  264. // !!! Registrieren des Eventlisteners hier gelöscht
  265. // und an das Ende des Skripts verschoben
  266. }
  267.  
  268. });
  269.  
  270. }
  271.  
  272. getCountRows(makeQuestion);
  273.  
  274.  
  275.  
  276. // // Die Anzahl der Fragen für den Prolog:
  277.  
  278. // function makeProlog(countOfQuestions) {
  279. // countQuestions.innerHTML = countOfQuestions;
  280. // }
  281.  
  282. // getCountRows(makeProlog);
  283.  
  284.  
  285.  
  286. // // Und hier der restliche Code:
  287.  
  288. // start.addEventListener('click', () => {
  289. // makeQuestion()
  290. // questionAnswers.style.cssText = 'display: grid; opacity: 1; transform: rotateY(0); transition: opacity 3s .3s ease-in, transform 3s 1s ease-in';
  291. // prologue.style.top = '-' + window.innerHeight + 'px';
  292. // prologue.style.transition = 'top 6s';
  293. // setTimeout(function () {
  294. // startTimer();
  295. // },
  296. // 4000);
  297. // });
  298.  
  299.  
  300.  
  301. makeItBetterOne.addEventListener('click', () => {
  302. redOverlayTransform();
  303. answerBlockReScale();
  304. pointerEventsOn();
  305. w++;
  306. setTimeout(function () {
  307. startTimer();
  308. },
  309. 1000);
  310. });
  311.  
  312. makeItBetterTwo.addEventListener('click', () => {
  313. redOverlayTransform();
  314. answerBlockReScale();
  315. pointerEventsOn();
  316. w++;
  317. setTimeout(function () {
  318. startTimer();
  319. },
  320. 1000);
  321. });
  322.  
  323. makeItBetterThree.addEventListener('click', () => {
  324. redOverlayTransform();
  325. answerBlockReScale();
  326. pointerEventsOn();
  327. w++;
  328. setTimeout(function () {
  329. startTimer();
  330. },
  331. 1000);
  332. });
  333.  
  334. makeItBetterFour.addEventListener('click', () => {
  335. redOverlayTransform();
  336. answerBlockReScale();
  337. pointerEventsOn();
  338. w++;
  339. setTimeout(function () {
  340. startTimer();
  341. },
  342. 1000);
  343. });
  344.  
  345. next.addEventListener('click', () => {
  346. i++;
  347. makeQuestion();
  348. resetTimer();
  349. pointerEventsOn();
  350. playpart.style.cssText = 'opacity: 1; transition: opacity 2s';
  351. setTimeout(function () {
  352. startTimer();
  353. },
  354. 1000);
  355. greenOverlayTransform();
  356. answerBlockReScale();
  357. });
  358.  
  359. againFromStart.addEventListener('click', () => {
  360. doItAgain()
  361. pointerEventsOn();
  362. next.style.display = 'block';
  363. noMoreQuestions.style.display = 'none';
  364. answerBlockReScale();
  365. setTimeout(function () {
  366. startTimer();
  367. },
  368. 4000);
  369. })
  370.  
  371. againAfterTimeout.addEventListener('click', () => {
  372. doItAgain()
  373. pointerEventsOn();
  374. answerBlockReScale();
  375. setTimeout(function () {
  376. startTimer();
  377. },
  378. 4000);
  379. })
  380.  
  381. // !!! Eventlisteners für Klick auf die Antworten registrieren.
  382. for (let j = 0; j < answerBtns.length; j++) {
  383. document.getElementById(j + 1).addEventListener('click', () => {
  384. pointerEventsOff()
  385. const answerNumber = document.getElementById(j + 1).getAttribute('id');
  386.  
  387. // !!! An dieser Stelle steht uns die Antwort vom Server nicht mehr direkt zu Verfügung.
  388. // !!! Wir müssen sie daher aus dem HTML des Buttons holen:
  389. const answerTxt = answerBtns[j].innerHTML;
  390. answerReplay.innerHTML = answerTxt;
  391. answerReplayRight.innerHTML = answerTxt;
  392.  
  393.  
  394.  
  395. // Prüft die Richtigkeit der gegebenen Antwort
  396.  
  397. const trueNumber = new FormData();
  398. trueNumber.append('id', i);
  399. trueNumber.append('choosen', answerNumber);
  400. fetch('checkAnswer.php', {
  401. method: 'post',
  402. body: trueNumber
  403. }).then(rightInt => {
  404. return rightInt.json();
  405. }).then(rightInt => {
  406.  
  407. if (rightInt.truenumber == true) {
  408. rightAnswerBlock()
  409. wrongOne.style.display = 'none';
  410. wrongTwo.style.display = 'none';
  411. wrongThree.style.display = 'none';
  412. wrongFour.style.display = 'none';
  413. points.innerHTML = rightInt.points;
  414. stopTimer()
  415. w = 1;
  416.  
  417. if (i == countofquestions) {
  418. pointsEnd.innerHTML = rightInt.points;
  419. next.style.display = 'none';
  420. noMoreQuestions.style.display = 'block';
  421. stopTimer()
  422. questionAnswers.style.cssText = 'transform: rotate(0); opacity: 0; transition: opacity 7s 2s';
  423. finalOverlay.style.cssText = 'display: grid';
  424. finalOverlay.style.top = '-' + window.innerHeight + 'px';
  425. setTimeout(function () {
  426. finalOverlay.style.cssText = 'display: grid; top: 0; transition: top 3s ease-in';
  427. },
  428. 4000);
  429. }
  430.  
  431. } else {
  432. if (w === 1) {
  433. wrongAnswerBlock()
  434. wrongOne.style.display = 'block';
  435. wrongTwo.style.display = 'none';
  436. wrongThree.style.display = 'none';
  437. wrongFour.style.display = 'none';
  438. }
  439. if (w === 2) {
  440. wrongAnswerBlock()
  441. wrongOne.style.display = 'none';
  442. wrongTwo.style.display = 'block';
  443. wrongThree.style.display = 'none';
  444. wrongFour.style.display = 'none';
  445. }
  446. if (w === 3) {
  447. wrongAnswerBlock()
  448. wrongOne.style.display = 'none';
  449. wrongTwo.style.display = 'none';
  450. wrongThree.style.display = 'block';
  451. wrongFour.style.display = 'none';
  452. }
  453. if (w >= 4) {
  454. wrongAnswerBlock()
  455. wrongOne.style.display = 'none';
  456. wrongTwo.style.display = 'none';
  457. wrongThree.style.display = 'none';
  458. wrongFour.style.display = 'block';
  459. }
  460. }
  461.  
  462. });
  463.  
  464. });
  465. }
  466.  
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!