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
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>
|