• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Nie rozumiem błędu na consoli

Object Storage Arubacloud
0 głosów
120 wizyt
pytanie zadane 25 marca 2020 w JavaScript przez Skorpion Początkujący (360 p.)
edycja 25 marca 2020 przez Skorpion

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()
	}
	

 

komentarz 25 marca 2020 przez Paweł Nąckiewicz Nałogowiec (48,990 p.)
jakie to błędy?
komentarz 25 marca 2020 przez Skorpion Początkujący (360 p.)
VM19 quiz.js:4 Uncaught TypeError: Cannot read property 'children' of null
    at VM19 quiz.js:4
(anonymous) @ VM19 quiz.js:4
quiz.js:73 Uncaught ReferenceError: option is not defined
    at disabledOptions (VM19 quiz.js:73)
    at check (VM19 quiz.js:68)
    at HTMLDivElement.onclick (Karczma.html:37)
disabledOptions @ quiz.js:73
check @ quiz.js:68
onclick @ Karczma.html:37
quiz.js:73 Uncaught ReferenceError: option is not defined
    at disabledOptions (VM19 quiz.js:73)
    at check (VM19 quiz.js:68)
    at HTMLDivElement.onclick (Karczma.html:38)
disabledOptions @ quiz.js:73
check @ quiz.js:68
onclick @ Karczma.html:38
quiz.js:73 Uncaught ReferenceError: option is not defined
    at disabledOptions (VM19 quiz.js:73)
    at check (VM19 quiz.js:68)
    at HTMLDivElement.onclick (Karczma.html:39)
disabledOptions @ quiz.js:73
check @ quiz.js:68
onclick @ Karczma.html:39
quiz.js:73 Uncaught ReferenceError: option is not defined
    at disabledOptions (VM19 quiz.js:73)
    at check (VM19 quiz.js:68)
    at HTMLDivElement.onclick (Karczma.html:40)
disabledOptions @ quiz.js:73
check @ quiz.js:68
onclick @ Karczma.html:40

1 odpowiedź

+1 głos
odpowiedź 25 marca 2020 przez eunstachy Stary wyjadacz (14,180 p.)

Literówka :) zamiast "options.length" wpisałeś "option.length"

Popawiony kod

function disabledOptions()
{
    for(var i=0; i<options.length; i++)
    {
        options[i].classList.add("disabled")
    }
}

 

komentarz 25 marca 2020 przez Skorpion Początkujący (360 p.)
Jesteś wielki, dzięki :)
komentarz 25 marca 2020 przez antypop Mądrala (5,730 p.)

Wrzucasz też skrypt zarówno w head jak i w body, usuń:

        <script src="quiz.js"> </script>

z head i zostaw tylko przez </body>

 

Podobne pytania

0 głosów
1 odpowiedź 1,912 wizyt
pytanie zadane 11 stycznia 2016 w JavaScript przez Specyficzny Nowicjusz (190 p.)
+1 głos
2 odpowiedzi 213 wizyt
pytanie zadane 27 stycznia 2021 w JavaScript przez Nabuchadonozor Gaduła (3,120 p.)
0 głosów
1 odpowiedź 117 wizyt
pytanie zadane 22 marca 2020 w JavaScript przez Bazzam Użytkownik (810 p.)

92,669 zapytań

141,567 odpowiedzi

320,033 komentarzy

62,034 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...