Witam, postanowiłem umieścić quiz na stronie, jednak nie potrawie sam go napisać, więc postanowiłem przepisać go z tego poradnika: "https://www.youtube.com/watch?v=n0-qVoxVzfE"
Klikając w jedną z odpowiedzi, powinna być zablokowana możliwość wybrania pozostałych, jednak u mnie tak się nie dzieje. Widzę błędy na consoli, lecz nie rozumiem jak je naprawić. Mogłbyś poprawić ten kod? Dzięki
{ps, na filmiku zmienną ustawiono jako const lub let, nie mam pojęcia dlaczego, ale u mnie nie działało, więc zmieniłem je na var}
<!DOCTYPE HTML>
<html lang="pl">
<head>
<meta charset="utf-8" />
<title> Walhalla </title>
<meta name="description" content="" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<link rel="stylesheet" href="stylequiz.css" type="text/css" />
<script src="quiz.js"> </script>
</head>
<body >
<div class="quiz-container">
<div class="question-number">
<h3>Question <span class="question-num-value"></span> of <span class="total-question"></span> </h3>
</div>
<div class="question">
</div>
<div class="options">
<div id="0" class="option1" onclick="check(this)"></div>
<div id="1" class="option2" onclick="check(this)"></div>
<div id="2" class="option3" onclick="check(this)"></div>
<div id="3" class="option4" onclick="check(this)"></div>
</div>
<div class="button">
<button type="button" class="btn">Next</button>
</div>
<div class="answers-tracker">
<div class=""></div>
<div class=""> </div>
<div></div>
</div>
</div>
<script src="quiz.js"> </script>
</body>
</html>
body
{
margin:0;
background-color: #009688;
font-family: sans-serif;
}
*
{
box-sizing: border-box;
}
.quiz-container
{
max-width:600px;
min-height:500px;
background-color:#ffffff;
margin:40px auto;
border-radius:10px;
padding:30px;
}
.quiz-container::after,.quiz-container::before
{
content: '';
clear: both;
display: table;
}
.question-number,
.question,
.options,
.button,
.answers-tracker
{
float: left;
width: 100%;
}
.question-number h3
{
color: #009688;
border-bottom: 1px solid #ccc;
margin: 0;
padding-bottom:10px;
}
.question
{
font-size:22px;
color:000000;
padding:20px 0;
}
.options div
{
background-color: #cccccc;
font-size:16px;
color:000000;
margin-bottom:10px;
border-radius:5px;
padding:15px;
position: relative;
overflow: hidden;
cursor: pointer;
}
.options div.disabled
{
pointer-events: none;
}
.options div.correct
{
z-index:1;
color:#fff;
}
.options div.correct::before
{
content: '';
position: absolute;
left:0;
top:0;
width: 100%;
height:100%;
background-color: green;
z-index:-1;
transform: translateX(-100%);
animation: animateBackground 1s ease;
animation-fill-mode: forwards;
}
@keyframes animateBackground
{
0%{
transform: translateX(-100%);
}
100%{
transform: translateX(0%);
}
}
.options div.wrong
{
z-index:1;
color:#fff;
}
.options div.wrong::before
{
content: '';
position: absolute;
left:0;
top:0;
width: 100%;
height:100%;
background-color: red;
z-index:-1;
transform: translateX(-100%);
animation: animateBackground 1s ease;
animation-fill-mode: forwards;
}
@keyframes animateBackground
{
0%{
transform: translateX(-100%);
}
100%{
transform: translateX(0%);
}
}
.button .btn
{
padding:12px 50px;
border-radius:5px;
cursor:pointer;
background-color:#009688;
font-size:16px;
color:#ffffff;
border:none;
display: inline-block;
margin:15px 0px 20px;
}
.answers-tracker
{
border-top:1px solid #cccccc;
padding-top: 15px;
}
.answers-tracker div
{
height: 40px;
width: 40px;
background-color:#cccccc;
display: inline-block;
border-radius: 50%;
margin-right: 5px;
}
.answers-tracker div.correct
{
background-color: green;
background-image:url('');
background-position: center;
background-repeat: no-repeat;
background-size: 50%;
}
.answers-tracker div.wrong
{
background-color: red;
background-image:url('');
background-position: center;
background-repeat: no-repeat;
background-size: 50%;
}
var options=document.querySelector(".options").children;
var questionNumberSpan=document.querySelector(".question-num-value");
var totalQuestionSpan=document.querySelector(".total-question");
var question=document.querySelector(".question");
var op1=document.querySelector(".option1");
var op2=document.querySelector(".option2");
var op3=document.querySelector(".option3");
var op4=document.querySelector(".option4");
var questionIndex=0;
var index=0;
// pytania, opcje i odpowiedzi
var questions=[
{
q:'Ile liter ma słowo "punk"?',
options:['jedna', 'dwie', 'trzy', 'cztery'],
answer:3
},
{
q:'Ile dróg prowadzi do rzymu?',
options:['żadna', 'sześć', 'wszystkie', 'czternaście'],
answer:2
},
{
q:'Co ma .... do wiatraka?',
options:['drewno', 'piernik', 'wiatr', 'śmigło'],
answer:1
},
{
q:'.... i ryby głosu nie mają',
options:['muchy', 'ptaki', 'rośliny', 'dzieci'],
answer:3
},
{
q:'Więcej niż jedno zwierzę to?',
options:['lama', 'stado', 'sojusz', 'gang'],
answer:0
}
]
// ustawienia pytan, opcji i numerów pytań
totalQuestionSpan.innerHTML=questions.length;
function load()
{
questionNumberSpan.innerHTML=index+1;
question.innerHTML=questions[questionIndex].q;
op1.innerHTML=questions[questionIndex].options[0];
op2.innerHTML=questions[questionIndex].options[1];
op3.innerHTML=questions[questionIndex].options[2];
op4.innerHTML=questions[questionIndex].options[3];
index++;
}
function check(element)
{
if(element.id==questions[questionIndex].answer){
element.classList.add("correct");
}
else{
element.classList.add("wrong");
}
disabledOptions()
}
function disabledOptions()
{
for(var i=0; i<option.length; i++)
{
options[i].classList.add("disabled")
}
}
function randomQuestion()
{
var randomNumber=Math.floor(Math.random()*questions.length);
questionIndex=randomNumber;
//console.log(questionIndex)
load();
}
window.onload=function()
{
randomQuestion()
}
