Ustaw zdarzenie click tylko raz na
<h2 class="userChoices"></h2>
<h2 class="userChoices"></h2>
<h2 class="userChoices"></h2>
<h2 class="userChoices"></h2>
np. zaraz po "załadowaniu" strony.
<div class="answers">
<p data-lp="1">Lorem 1</p>
<p data-lp="2">Lorem 2</p>
<p data-lp="3">Lorem 3</p>
<p data-lp="4">Lorem 4</p>
</div>
.answers p {
cursor: pointer;
}
let answers;
window.addEventListener('load', load);
function load() {
answers = document.querySelectorAll('.answers p');
for (const answer of answers)
answer.addEventListener('click', checkAnswer);
}
function checkAnswer(e) {
console.log(e.target, parseInt(e.target.dataset.lp), e.target.textContent);
}
przykład
<div class="container">
<div class="rows-layout">
<div class="question">
<p></p>
</div>
<div class="answers">
<p data-lp="1"></p>
<p data-lp="2"></p>
<p data-lp="3"></p>
<p data-lp="4"></p>
</div>
<div class="statistic">
<div class="good-answers">Prawidłowych odpowiedzi: <span>0</span></div>
<div class="wrong-answers">Nieprawidłowych odpowiedzi: <span>0</span></div>
</div>
</div>
</div>
* {
box-sizing: border-box;
}
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100vh;
background-color: #729ea1;
}
.container {
border: 0;
width: 90%;
height: 95%;
margin: 1em auto;
border-radius: 1em;
box-shadow: 8px 8px 24px 2px;
background-color: white;
font: 400 1em/1.1 tahoma;
}
.container .rows-layout {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 3fr 0.5fr;
gap: 0px 0px;
grid-template-areas:
"question" "answers" "statistic";
width: 90%;
height: 100%;
margin: 1em auto;
}
.rows-layout .question {
grid-area: question;
border-bottom: 0.1em solid black;
}
.rows-layout .answers {
grid-area: answers;
}
.rows-layout .answers p {
position: relative;
cursor: pointer;
border: 2px solid #416062;
background-color: #ceddde;
transition: all 0.25s;
padding: 1em 0.5em 1em 2em;
border-radius: 0.5em;
}
.rows-layout .answers p:hover {
border: 2px solid #182525;
background-color: #77a6a6;
}
.rows-layout .answers p::before {
position: absolute;
top: 50%;
left: 0.5em;
transform: translateY(-50%);
content: attr(data-lp);
font: 400 1.5em monospace;
color: rgba(0,0,0,0.4);
}
.rows-layout .statistic {
grid-area: statistic;
border-top: 0.1em solid black;
}
.rows-layout .statistic div {
display: inline-block;
margin: 0.5em 2em 0.5em 0;
font: 700 1.2em monospace;
}
.rows-layout .statistic div span {
display: inline-block;
font: 700 1.4em monospace;
width: 2em;
}
.rows-layout .statistic .good-answers span {
color: limegreen;
}
.rows-layout .statistic .wrong-answers span {
color: orangered;
}
.backlight-good-answer {
background-color: limegreen !important;
color: white;
}
.backlight-wrong-answer {
background-color: red !important;
color: white;
}
const quiz = [
{
question : 'Pytanie 1',
answers : [
'Odpowiedź 1.1', 'Odpowiedź 1.2',
'Odpowiedź 1.3', 'Odpowiedź 1.4'
],
correct : 1
},
{
question : 'Pytanie 2',
answers : [
'Odpowiedź 2.1', 'Odpowiedź 2.2',
'Odpowiedź 2.3', 'Odpowiedź 2.4'
],
correct : 2
},
{
question : 'Pytanie 3',
answers : [
'Odpowiedź 3.1', 'Odpowiedź 3.2',
'Odpowiedź 3.3', 'Odpowiedź 3.4'
],
correct : 3
},
{
question : 'Pytanie 4',
answers : [
'Odpowiedź 4.1', 'Odpowiedź 4.2',
'Odpowiedź 4.3', 'Odpowiedź 4.4'
],
correct : 4
}
];
let qestion, answers, good_answers, wrong_answers,
question_current_id = 0, next_question;
window.addEventListener('load', load);
function load() {
qestion = document.querySelector('.question p');
answers = document.querySelectorAll('.answers p');
good_answers = document.querySelector('.good-answers span');
wrong_answers = document.querySelector('.wrong-answers span');
for (const answer of answers)
answer.addEventListener('click', checkAnswer);
selectQuestion();
}
function selectQuestion() {
question_current_id = Math.floor(Math.random() * quiz.length);
qestion.textContent = quiz[question_current_id].question;
for (let i=0; i<answers.length ;i++)
answers[i].textContent = quiz[question_current_id].answers[i];
next_question = false;
}
function checkAnswer(e) {
if (! next_question) {
let backlight_answer = 'backlight-wrong-answer';
if (parseInt(e.target.dataset.lp) == quiz[question_current_id].correct) {
good_answers.textContent = parseInt(good_answers.textContent) + 1;
backlight_answer = 'backlight-good-answer';
} else
wrong_answers.textContent = parseInt(wrong_answers.textContent) + 1;
next_question = true;
e.target.classList.add(backlight_answer);
void e.target.offsetWidth;
setTimeout(nextQuestion, 2000, e.target, backlight_answer);
}
}
function nextQuestion(element, css) {
element.classList.remove(css);
element = element.closest('.answers').style;
element.cssText = 'filter: blur(5px);';
setTimeout(function() {
element.cssText = 'filter: none;';
selectQuestion();
}, 500);
}