Witam, mam mały problem z quizem taki iż nie wyświetla mi pytań ani odpowiedzi. Uczę się javyscript od paru tygodni więc nie wszystko wiem umiem niestety :(
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./styles/style.css">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="./classes/questions.js" defer></script>
<script src="./classes/app.js" defer></script>
<script src="./classes/answer.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous" defer></script>
</head>
<body class="bg-dark">
<div class="container text-center bg-dark text-warning">
<div class="quiz-container mx-auto" id="quiz">
<div class="quiz-header">
<h2 id="question">Question Text</h2>
<ul>
<li>
<input type="radio" name="answer" id="a" class="answer" >
<label for="a" id="a_text">Answer</label>
</li>
<li>
<input type="radio" name="answer" id="b" class="answer" >
<label for="b" id="b_text">Answer</label>
</li>
<li>
<input type="radio" name="answer" id="c" class="answer" >
<label for="c" id="c_text">Answer</label>
</li>
<li>
<input type="radio" name="answer" id="d" class="answer" >
<label for="d" id="d_text">Answer</label>
</li>
</ul>
</div>
<button type="button" class="btn btn-warning" id="submit">Submit</button>
</div>
</div>
</body>
</html>
answer.js:
class Answer {
constructor(a,b,c,d){
this.a = a;
this.b = b;
this.c = c;
this.d = d;
}
}
app.js:
const quizData = [
new Question(
'Which one is not an object oriented programming langauge?',
'C',
new Answer('Java', 'C#', 'C++', 'C')
),
new Question(
'Which language is used for styling web pages?',
'CSS',
new Answer('HTML', 'JQuery', 'CSS', 'XML')
),
new Question(
'There are ___ main components of object oriented programming.?',
'4',
new Answer('1', '6', '2', '4')
),
new Question(
'Which langauge is used for web apps?',
'All',
new Answer('PHP', 'Python', 'JavaScript', 'All')
),
];
const quiz = document.querySelector('#quiz');
const answerEls = document.querySelectorAll('.answer');
const questionEl = document.querySelector('#question');
const a_text = document.querySelector('#a_text');
const b_text = document.querySelector('#b_text');
const c_text = document.querySelector('#c_text');
const d_text = document.querySelector('#d_text');
const submitBtn = document.querySelector('#submit');
let currentQuiz = 0
let score = 0;
const loadQuiz =()=>{
deselectAnswers();
let currentQuizData = quizData[currentQuiz];
let answers = currentQuizData.answers;
questionEl.innerText = currentQuizData.question;
a_text.innerText = answers.a;
b_text.innerText = answers.b;
c_text.innerText = answers.c;
d_text.innerText = answers.d;
};
const deselectAnswers=()=>{
answerEls.forEach(answerEl=>answerEl.checked = false)
};
loadQuiz();
const getSelected=()=> {
let answer
answerEls.forEach(answerEl => {
if(answerEl.checked) {
answer = answerEl.id
}
})
return answer
}
submitBtn.addEventListener('click', () => {
const answer = getSelected();
if(answer) {
if(answer === quizData[currentQuiz].correctAnswer) {
score++;
}
currentQuiz++;
if(currentQuiz < quizData.length) {
loadQuiz();
} else {
quiz.innerHTML = `
<h2>You answered ${score}/${quizData.length} questions correctly</h2>
<button onclick="location.reload()">Reload</button>
`;
}
}
});
question.js:
class Question {
constructor(question, correctAnswer, answers) {
this.question = question;
this.correctAnswer = correctAnswer;
this.answers = answers;
}
static saveQuizes() {
localStorage.clear();
localStorage.setItem("Quizes", JSON.stringify(quizes));
}
static loadQuizes() {
let quizes = JSON.parse(localStorage.getItem("Quizes"));
return quizes;
}
}
