Advertisement
MBrendecke

JS Quiz

Oct 30th, 2018
221
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 2.81 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html lang="de">
  3.  
  4. <head>
  5.     <title>Mein erstes Quiz</title>
  6.    
  7.     <script>
  8.         function Quizfrage(frage, antwort) {
  9.             this.frage = frage;
  10.             this.antwort = antwort;
  11.         }
  12.        
  13.         function GetQuizfragen() {
  14.             return [
  15.                 new Quizfrage('Wie viel ist 18*3?', '54'),
  16.                 new Quizfrage('Wie viel ist 2*36?', '72'),
  17.                 new Quizfrage('Wie heißt die amtierende Bundeskanzlerin?', 'Angela Merkel'),
  18.                 new Quizfrage('Wie heißt der erfolgreichste Musiker der Welt?', 'Ed Sheeran'),
  19.                 new Quizfrage('Mit was für einem Auto verunglückte Paul Walker?', 'Porsche'),
  20.                 new Quizfrage('Wann war Mauerfall in Berlin? (TT.MM.JJJJ)', '09.11.1989'),
  21.                 new Quizfrage('Wann begann der Erste Weltkrieg? (JJJJ)', '1914'),
  22.                 new Quizfrage('Welches ist die größte deutsche Fluggesellschaft?', 'Lufthansa'),
  23.                 new Quizfrage('Wie heißt die Hauptstadt von Großbritannien?', 'London')
  24.             ];
  25.         }      
  26.        
  27.         let tries = 0;    
  28.         function QuizStarten() {
  29.             let score = 0;
  30.             var quizfragen = GetQuizfragen();
  31.             alert('Das Quiz beginnt nach Klick auf "OK".');
  32.            
  33.             var playerName = window.prompt('Wie heißt Du?');
  34.             alert(`Viel Erfolg, ${(!playerName || !playerName.trim()) ? 'du Unbekannter': playerName}!`);
  35.            
  36.             for(i = 0; i < 5; i++) {
  37.                index = Math.floor(Math.random() * quizfragen.length);
  38.                frage = quizfragen[index];
  39.                antwort = window.prompt(frage.frage);
  40.              
  41.                if(antwort != null && antwort.toLowerCase() == frage.antwort.toLowerCase()) {
  42.                    alert(`Richtige Antwort! Weiter geht's mit Klick auf "OK".\n\nDu hast bisher ${++score === 1 ? 'eine Frage': score + ' Fragen'} richtig beantwortet.`);
  43.                } else {
  44.                    alert(`Leider falsch. Die richtige Antwort lautet: ${frage.antwort}.`);                
  45.                }
  46.                quizfragen.splice(index, 1);
  47.            }
  48.            alert(`Das Quiz ist zu Ende. Du hast ${score} von 5 Fragen richtig beantwortet.`);
  49.            msg = [ 'noch nicht', 'einmal', 'zweimal', 'dreimal',
  50.                    'viermal', 'fünfmal', 'sechsmal', 'siebenmal',
  51.                    'achtmal', 'neunmal', 'zehnmal', 'elfmal',
  52.                    'zwölfmal'
  53.                    ];
  54.            document.getElementById('paragraph').innerHTML = `Du hast das Quiz bisher ${tries <= 12 ? msg[tries++]: tries + ' mal'} gespielt.`;
  55.        }
  56.    </script>
  57.    
  58. </head>
  59.  
  60. <body>
  61.     <p id='clickme' onclick="QuizStarten()">Quiz starten</p>  
  62.     <p id='paragraph'></p>
  63. </body>
  64.  
  65. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement