Untitled

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>JS Bin</title>

    <style>
        html{
            background:#333;
            background: url(https://78.media.tumblr.com/6cb0ae44278156aa660d95d55df340de/tumblr_nz14o7t0Z61skcd7fo1_500.gif);
            background-attachment: fixed;
            background-size: 100% 100%;
            color:antiquewhite;
            font-family:Arial;
            text-align: center;
            margin:0 auto;
            max-width:500px;
        }
        .flex{

        }


        li{
            display: flex;
        }
        button{
            margin:20px;
            padding:15px 40px;
            text-transform: uppercase;
            background:0;
            border:0;
            border-radius:10px;
            background:#4DD0E1;
            transition:0.3s;
            color:white;
            font-weight: bold;
           box-shadow: 0px 0px 25px 3px rgba(0,0,0,0.75);
            font-size:1.5rem
        }
        button:hover{
            background: #80DEEA;
        }
        button:focus{
            background:#00BCD4;

        }
        button:active{
            transform:translate(0,5px);
        }

        .podp{
            padding:5px;
            background:rgba(35, 35, 35, 0.82);
            margin-bottom:20px;
            display: flex;
            justify-content: center
        }
        .podp img{
            padding:5px;
            height:100px;
            width:100px;

        }
        .enemy{
                transform: rotateY(180deg);
        }
    </style>
</head>
<body>
    <p id="wynik">Kliknij przycisk aby rozpocząć grę!</p>
     <p class="podp">Wygrane: <strong id="wygrane">0</strong> / Przegrane: <strong id="przegrane">0</strong></p>
     <div id="quiz">

     </div>
     <p class="podp">
         <img src="http://3.bp.blogspot.com/-Q-haT3Z9XVI/Vpp6romxfqI/AAAAAAAAAoI/hSJQFVMw5d8/s1600/kamien_papier_nozyce.png" id="ob1">
         <img src="http://3.bp.blogspot.com/-Q-haT3Z9XVI/Vpp6romxfqI/AAAAAAAAAoI/hSJQFVMw5d8/s1600/kamien_papier_nozyce.png" class="enemy" id="ob2">
     </p>

  <div class="flex">
<button id="kamien">Wybierz kamień</button>
  <button id="papier">Wybierz papier</button>
  <button id="nozyce">Wybierz nożyce</button>
  </div>


    <script>

        function shuffleArray(array) {
    for (let i = array.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [array[i], array[j]] = [array[j], array[i]];
    }
}

        class Quiz{
            constructor(element,questions){
                this.container = element;
                this.questions = questions;
                this.documentFragment = document.createDocumentFragment();

                this.questionsToNodes();
                this.container.appendChild(this.documentFragment);
            }
            calculateCorrectAnswers(){
                console.log(this.container)

                /*

                if(xd === correctAnswer)
                */

            }
            questionsToNodes(){
                this.questions.forEach(question=>{
                    const title = document.createElement("h2");
                    title.textContent = question.question;

                    this.documentFragment.appendChild(title);

                    const correctAnswer = question.answers[question.correctAnswer];

                    shuffleArray(question.answers);

                    const list = document.createElement("ul");

                    question.answers.forEach(answer=>{
                    const li = document.createElement("li");
                        const input = document.createElement("input");
                        const p = document.createElement("p");
                        input.name = question.question;
                        input.type = "radio";

                        li.appendChild(input);
                        li.appendChild(p);
                        p.textContent = answer;
                        list.appendChild(li);
                });

                    this.documentFragment.appendChild(list);
                });

                const btn = document.createElement("button");
                const p = document.createElement("p");
                this.calculateCorrectAnswers()
                btn.addEventListener("click",()=>{
                    p.textContent = ``
                });
            }
        }

        const questions = [{
            question:"Jak prawidłowo zmienić zawartość elementu HTML?",
            answers:[`document.getElementByName("p").innerHTML = "Hello World!";`,
`document.getElementById("demo").innerHTML = "Hello World!";`,
`document.getElement("p").innerHTML = "Hello World!";`,
`#demo.innerHTML = "Hello World!";`],
            correctAnswer:1

        },
         {
            question:"W jaki element HTML wkładamy skrypty JavaScript?",
            answers:[`<javascript>`,`<script>`,`<js>`,`<scripting>`],
            correctAnswer:1

        },
                          {
            question:"Jaka jest prawidłowa składnia podłączenia zewnętrznego pliku .js do tagu <script>?",
            answers:[`<script href="xxx.js">`,`<script src="xxx.js">`,`<script name="xxx.js">`],
            correctAnswer:1

        },
                          {
            question:"Czy zewnętrzny skrypt musi posiadać atrybut src?",
            answers:[`Tak`,`Nie`],
            correctAnswer:0

        },
                          {
            question:"Jak wyświetlić napis w oknie dialogowym?",
            answers:[`msgBox("Hello World");`,`alert("Hello World");`,`msg("Hello World");`,`alertBox("Hello World");`],
            correctAnswer:1

        },
                          {
            question:"Jaka jest prawidłowa składnia pętli while?",
            answers:[`while (i <= 10; i++)`,`while i = 1 to 10`,`while (i <= 10)`],
            correctAnswer:2

        },
                          {
            question:"Jak dodać komentarz w JavaScript?",
            answers:[`'This is a comment`,`//This is a comment`,`<!--This is a comment-->`],
            correctAnswer:1

        },
                          {
            question:"Jak prawidłowo napisać tablicę w języku JavaScript?",
            answers:[`var colors = 1 = ("red"), 2 = ("green"), 3 = ("blue")`,`var colors = "red", "green", "blue"`,`var colors = (1:"red", 2:"green", 3:"blue")`,`var colors = ["red", "green", "blue"]`],
            correctAnswer:3

        },
                          {
            question:"Jak poprawnie otworzyć nowe okno?",
            answers:[`window.open("http://www.w3schools.com");`,`window.new("http://www.w3schools.com");`],
            correctAnswer:0

        },
                          {
            question:"Co zwróci Boolean(10 > 9) ?",
            answers:[`true`,`false`,`NaN`],
            correctAnswer:0

        }];

        const beka = new Quiz(document.getElementById("quiz"),questions);


    const wynik = document.getElementById("wynik"),
      kamien = document.getElementById("kamien"),
      papier = document.getElementById("papier"),
      nozyce = document.getElementById("nozyce"),
    wygrane = document.getElementById("wygrane"),
          ob1 = document.getElementById("ob1"),
    ob2 = document.getElementById("ob2"),
    przegrane = document.getElementById("przegrane");

const mozliwosci = ["Kamień","Papier","Nożyce"];

const xd = [{
  wybor: mozliwosci[0],
  kontra: mozliwosci[2],
    img: "kamien1.png"
},
           {
  wybor: mozliwosci[1],
  kontra: mozliwosci[0],
                img: "papier1.png"
},
           {
  wybor: mozliwosci[2],
  kontra: mozliwosci[1],
               img:'noz1.png'
}];

const losuj = ()=>{
  const numer = Math.floor(Math.random() * 3);
  return mozliwosci[numer];
};


        const gra = (enemy,gracz)=>{
            xd.forEach((komputer)=>{

     if(komputer.wybor === enemy ){
         ob1.src = komputer.img;
         console.log(gracz, ob2);
         ob2.src = gracz.img;

        if(komputer.wybor === gracz.wybor){
          wynik.textContent += ". Remis!";
        }
        else if(komputer.kontra === gracz.wybor){
          wynik.textContent += ". Komputer wygrał.";
            przegrane.textContent = przegrane.textContent *1+1;
        }
        else{
          wynik.textContent += ". Wygrałeś!";
            wygrane.textContent = wygrane.textContent *1+1;
        }
    }

  });
        };

kamien.onclick = ()=>{
  const enemy = losuj();
  const gracz = xd[0];
  wynik.textContent = "Komputer wylosował " + enemy + ", a ty masz " + gracz.wybor;

    gra(enemy,gracz);
};

        papier.onclick = ()=>{
  const enemy = losuj();
  const gracz = xd[1];
  wynik.textContent = "Komputer wylosował " + enemy + ", a ty masz " + gracz.wybor;

    gra(enemy,gracz);
};

        nozyce.onclick = ()=>{
  const enemy = losuj();
  const gracz = xd[2];
  wynik.textContent = "Komputer wylosował " + enemy + ", a ty masz " + gracz.wybor;

    gra(enemy,gracz);
};

    </script>


</body>
</html>