
<!doctype html>

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, vynulovanie-scale=1">
</head>
<body>
    <div class="uvodna-obrazovka">
	 <label for="player-name">Zadajte meno Uživateľa:</label><br>
	<input type="text" id="player-name" placeholder="Zadajte meno Uživateľa"><br>
    <button id="start">začať</button>
</div>
<div id="display-kontajner">
    <div class="header">
        <div class="number-of-count">
            <span class="pocet-otazok">1 z x otazok</span>
        </div>
        <div class="cas-div">
			Čas:
            <span class="zastavajuci-cas">30s</span>
        </div>
    </div>
    <div id="kontajner">
        <!-- otazkas and odpovede will be displayed here -->
    </div>
	<br>
    <button id="tlacitko-dalej">dalej</button>
</div>
<div class="vysledok-kontajner hide">
    <div id="user-score"> Výsledok</div>
<br>
	<div id="uzivatelske-vysledky"></div>
    <button id="restart">Reštart</button><br>
	
</div>

</body>
</html>
<script>
//References
let playerNameInput = document.getElementById("player-name");
let playerResult = document.getElementById("uzivatelske-vysledky");
let timeLeft = document.querySelector(".zastavajuci-cas");
let kvizkontajner = document.getElementById("kontajner");
let nextBtn = document.getElementById("tlacitko-dalej");
let pocetzotatok = document.querySelector(".pocet-otazok");
let displaykontajner = document.getElementById("display-kontajner");
let scorekontajner = document.querySelector(".vysledok-kontajner");
let restart = document.getElementById("restart");
let uloz = document.getElementById("saveButton");
let userScore = document.getElementById("user-score");
let startScreen = document.querySelector(".uvodna-obrazovka");
let startButton = document.getElementById("start");
let mnozstvootazok;
let scoreCount = 0;
let count = 30;
let countdown;
//otazkas a odpovede 
const poleotazky = [
    {
        id: "0",
        otazka: "Čo je phishing?",
        odpovede: ["Technika používaná na získanie citlivých informácií", "Technika používaná na zlepšenie produktivity v práci", "Technika používaná na zvýšenie bezpečnosti v sieti", "Technika používaná na vylepšenie užívateľského zážitku"],
        správnaodpoved: "Technika používaná na získanie citlivých informácií",
    },
    {
        id: "1",
        otazka: "Aké typy informácií phishingové útoky získavajú?",
        odpovede: ["Citlivé informácie, ako sú heslá a finančné údaje", "Všetky uvedené odpovede", "Údaje o klientskej spokojnosti","Informácie o tom, aké stránky sú populárne na internete"],
        správnaodpoved: "Citlivé informácie, ako sú heslá a finančné údaje",
        
    },
    {

        id: "2",
        otazka: "Ako môžete rozpoznať phishingový e-mail?",
        odpovede: ["Nedostatočným jazykom a gramatikou", "Odkazy na neznáme webové stránky", "Žiadosť o zdieľanie citlivých informácií", "Všetky uvedené odpovede"],
        správnaodpoved: "Všetky uvedené odpovede",
    },
    {
        id: "3",
        otazka: "Aké opatrenia môžete prijať na ochranu pred phishingovými útokmi?",
		odpovede: ["Nikdy nezdieľajte citlivé informácie na požiadanie", "Nepoužívajte heslá, ktoré sú ľahko uhádnuteľné", "Nainštalujte softvér na blokovanie nebezpečných stránok", "Všetky uvedené odpovede"],
		správnaodpoved: "Všetky uvedené odpovede",
    },
    {
        id: "4",
        otazka: "Čo je dvofaktorová autentifikácia?",
		odpovede: ["Proces, ktorý zvyšuje bezpečnosť pri prihlásení na účet", "Technika používaná na zlepšenie kvality obrazu", "Spôsob, ako zlepšiť výkon počítača", "Typ zariadenia pre ukladanie dát"],
		správnaodpoved: "Proces, ktorý zvyšuje bezpečnosť pri prihlásení na účet",
    },
    {
        id: "5",
       otazka: "Prečo by ste mali byť opatrní pri klikaní na odkazy v e-mailoch?",
	   odpovede: ["Môžu vás presmerovať na nebezpečné webové stránky", "Môžu získať vaše citlivé informácie", "Môžu obsahovať škodlivý softvér", "Všetky uvedené odpovede"],
	   správnaodpoved: "Všetky uvedené odpovede",
    }, {
        id: "6",
       otazka: "Co všetko v emaile na obrázku je podozrivé ?",
	   odpovede: ["Gramatické chyby v texte", "časový nátlak", "Nepravá adresa odosielateľa", "Všetky uvedené odpovede"],
	   správnaodpoved: "Všetky uvedené odpovede",
	   image: "fio3.png",
    },{
        id: "7",
       otazka: "Čo by ste mali urobiť, ak ste sa stali obeťou bankového phishingového útoku?",
	   odpovede: ["Okamžite zmeniť heslo", "Oznámte to bankovej inštitúcii.", "Zablokujte svoje platobné karty", "Všetky uvedené odpovede"],
	   správnaodpoved: "Všetky uvedené odpovede",
    },{
        id: "8",
       otazka: "Ako identifikovať phishingové emaily ?",
	   odpovede: ["Skontrolujte adresu odosielateľa", "Phishingový email má vždy digitálný podpis", "Neobsahuje gramatické chyby", "Ani jedna z uvedených odpovedí"],
	   správnaodpoved: "Skontrolujte adresu odosielateľa",
    },
];
//restartovanie kvizu
restart.addEventListener("click", () => {
    vynulovanie();
    displaykontajner.style.display = "block"; 
    scorekontajner.style.display = "none"; 
    playerResult.innerHTML = ""; 
});


//tlačitko dalej
nextBtn.addEventListener("click", () => {
    mnozstvootazok += 1;

    if (mnozstvootazok === poleotazky.length) {
        displaykontajner.classList.add("hide");
        scorekontajner.classList.remove("hide");
        playerResult.innerHTML = `Uživateľ: ${playerNameInput.value}, Skóre: ${scoreCount} z ${mnozstvootazok}`;
        saveToDatabase();
    } else {
        pocetzotatok.innerHTML = `${mnozstvootazok + 1} z ${poleotazky.length} otazky`;
        kvizdisplay(mnozstvootazok);
        count = 30;
        clearInterval(countdown);
        timerDisplay();
    }
});


// funkcia ktorá uklada pomocou save.php ukladá meno skrore a ID do databzy
const saveToDatabase = () => {
  try {
    const score = scoreCount;
    const playerName = playerNameInput.value;

    const requestodpovede = {
      method: 'POST',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
      },
      body: `score=${score}&playerName=${playerName}`
    };

    fetch('save.php', requestodpovede)
      .then((response) => {
        if (response.ok) {
          console.log('Score saved to the database');
        } else {
          console.error('Failed to save the score to the database');
        }
      })
      .catch((error) => {
        console.error('Error saving score to the database:', error);
      });
  } catch (error) {
    console.error(error);
  }
};


//časovač
const timerDisplay = () => {
    countdown = setInterval(() => {
        timeLeft.innerHTML = `${count--}s`;
        if (count === 0) {
            clearInterval(countdown);
            displayNext();
        }
    }, 1000);
};
//Display kviz
const kvizdisplay = (mnozstvootazok) => {
    const kvizoveokno = document.querySelectorAll(".kontajner-mid");
    if (mnozstvootazok >= kvizoveokno.length) {
        // Kvíz sa ukončil, vykonajte príslušné akcie alebo vyhodnotenie
        return;
    }
    kvizoveokno.forEach((card, index) => {
        if (index === mnozstvootazok) {
            card.classList.remove("hide");
        } else {
            card.classList.add("hide");
        }
    });
};

function kvizCreator() {
    poleotazky.sort(() => Math.random() - 0.5);

    for (let i = 0; i < poleotazky.length; i++) {
        const otazka = poleotazky[i];
        otazka.odpovede.sort(() => Math.random() - 0.5);

        const div = document.createElement("div");
        div.classList.add("kontajner-mid", "hide");
        pocetzotatok.innerHTML = `${i + 1} z ${poleotazky.length} otázok`;

        const otazka_DIV = document.createElement("p");
        otazka_DIV.classList.add("otazka");
        otazka_DIV.innerHTML = otazka.otazka;
        
        if (otazka.image) {
            let img = document.createElement("img");
            img.src = otazka.image;
            img.width = 560; // šírka obrázka
            img.height = 350; // výška obrázka
            div.appendChild(img);
        }
        
        div.appendChild(otazka_DIV);
        
        //odpovede
        for (let j = 0; j < otazka.odpovede.length; j++) {
            let odpoved = otazka.odpovede[j];
            div.innerHTML += `<button class="option-div" onclick="checker(this)">${odpoved}</button>`;
        }
        kvizkontajner.appendChild(div);
    }
}
function checker(userOption) {
    let userSolution = userOption.innerText;
    let otazka = document.getElementsByClassName("kontajner-mid")[mnozstvootazok];
    let odpovede = otazka.querySelectorAll(".option-div");

    if (userSolution === poleotazky[mnozstvootazok].správnaodpoved) {
        userOption.classList.add("správnaodpoved");
        scoreCount++;
    } else {
        userOption.classList.add("nespravnaodpoved");
        odpovede.forEach((element) => {
            if (element.innerText === poleotazky[mnozstvootazok].správnaodpoved) {
                element.classList.add("správnaodpoved");
            }
        });
    }
    clearInterval(countdown);
    odpovede.forEach((element) => {
        element.disabled = true;
    });
}
//načitanie 
function resetkviz() {
  kvizkontajner.innerHTML = "";
  mnozstvootazok = 0;
  scoreCount = 0;
  clearInterval(countdown);
}

function createkviz() {
  kvizCreator();
  kvizdisplay(mnozstvootazok);
}

function vynulovanie() {
  resetkviz();
  createkviz();
}
startButton.addEventListener("click", function() {
  startScreen.style.display = "none";
  displaykontajner.style.display = "";
  vynulovanie();
});

window.onload = function() {
  startScreen.style.display = "";
  displaykontajner.style.display = "none";
};
</script>
<style>
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

body {
  height: 100vh;
  background: linear-gradient(184deg, rgb(0, 188, 212), rgb(76, 175, 80));
}

.uvodna-obrazovka,
.vysledok-kontajner {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

button {
  border: none;
  outline: none;
  cursor: pointer;
}

#start,
#restart {
  font-size: 20px;
  padding: 9px 32px;
  border-radius: 3.6px;
  box-shadow: 0 20px 30px rgba(0, 0, 0, 0.4);
}

#restart {
  margin-top: 14.4px;
}

#display-kontajner {
  background-color: rgb(255, 255, 255);
  padding: 49.6px 32px;
  width: 80%;
  max-width: 600px;
  margin: 0 auto;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  border-radius: 8.6px;
}

.header {
  margin-bottom: 28.8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 9.6px;
  border-bottom: 1.6px solid rgb(192, 191, 210);
}

.cas-div {
  background-color: rgb(225, 245, 254);
  width: 120px;
  border-radius: 28.8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 32px;
}

.otazka {
  margin-bottom: 24px;
  font-weight: 600;
}

.option-div {
  font-size: 14.4px;
  width: 100%;
  padding: 16px;
  margin: 7.2px 0;
  text-align: left;
  outline: none;
  background: transparent;
  border: 1px solid rgb(192, 191, 210);
  border-radius: 3.6px;
}

.option-div:disabled {
  color: rgb(0, 0, 0);
  cursor: not-allowed;
}

#tlacitko-dalej {
  font-size: 16px;
  margin-top: 24px;
  background-color: rgb(135, 84, 255);
  color: rgb(255, 255, 255);
  padding: 16px 32px;
  border-radius: 3.6px;
  float: right;
  box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.3);
}

.hide {
  display: none;
}

.nespravnaodpoved {
  background-color: rgb(255, 221, 224);
  color: rgb(211, 47, 47);
  border-color: rgb(211, 47, 47);
}

.správnaodpoved {
  background-color: rgb(231, 246, 213);
  color: rgb(104, 159, 56);
  border-color: rgb(104, 159, 56);
}

#user-score {
  font-size: 24px;
  color: rgb(255, 255, 255);
}

</style>
