You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

81 lines
2.1 KiB
PHTML

<div id="questionContainer" hidden>
<div id="questionLine">
<h1>Otazka ????</h1>
<img src="resources/img/placeholder.png" alt="Question Image">
</div>
<div id="answerBar">
<div class="button" id="answer1">Odpoved1</div>
<div class="button" id="answer2">Odpoved2</div>
<div class="button" id="answer3">Odpoved3</div>
<div class="button" id="answer4">Odpoved4</div>
</div>
<div id="close" class="button"><img src="resources/img/x.png" alt="Exit"></div>
</div>
<script>
const question = document.querySelector("#questionContainer");
const answers = document.querySelector("#answerBar");
const quest = document.querySelectorAll('#answerBar div');
const answeredQuestions = [];
let score = 0
let qID = 0
let qustions
let chose = 0;
(async () => {
let res = await fetch('resources/questions.json')
res = await res.json()
questions = res
})()
function questionFiller(questionId) {
qID = questionId
let hqid = questionId
document.querySelector('#questionLine h1').textContent = questions[hqid].title
document.querySelector('#questionLine img').src = "resources/img/questions/" + questionId + ".png";
quest.forEach((one, index) => {
one.textContent = questions[hqid].options[index]
})
}
function addPoint(qID){
console.log("Point Added, Success!")
answeredQuestions.push(qID);
score += 1
pushScore()
console.log("Score is ", score)
}
quest.forEach((answer, index) => {
answer.addEventListener("click", (e) => {
chose += 1;
let dn = "#box-" + qID
if(chose == 1){
if(answer.id == "answer1"){
document.querySelector(dn).style.backgroundColor = "green"
addPoint(qID);
answer.classList.add("validateGreen")
setTimeout(function() {
answer.classList.remove("validateGreen");
exit();
chose = 0;
}, 1250 );
}else{
document.querySelector(dn).style.backgroundColor = "red"
answer.classList.add("validateRed")
setTimeout(function() {
answer.classList.remove("validateRed");
exit();
chose = 0;
}, 1250 );
}
}
})
})
</script>