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/bootstrap@5.3.0-alpha1/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/bootstrap@5.3.0-alpha1/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>
CSS:
body{
font-family: sans-serif;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
overflow: hidden;
margin: 0;
}
.quiz-header{
padding: 4rem;
}
h2{
padding: 1rem;
text-align: center;
margin: 0;
}
ul{
list-style: none;
padding: 0;
}
ul li {
font-size: 1.2rem;
margin: 1rem 0;
}
ul li lable{
cursor: pointer;
}
button{
width: 180px;
height: 50px;
}
.quiz-container{
background-color: rgb(0, 0, 0);
border-radius: 10px;
box-shadow: 0 0 10px 2px rgba(100, 100, 100, 0.1);
width: 600px;
overflow: hidden;
}
answer.js:
body{
font-family: sans-serif;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
overflow: hidden;
margin: 0;
}
.quiz-header{
padding: 4rem;
}
h2{
padding: 1rem;
text-align: center;
margin: 0;
}
ul{
list-style: none;
padding: 0;
}
ul li {
font-size: 1.2rem;
margin: 1rem 0;
}
ul li lable{
cursor: pointer;
}
button{
width: 180px;
height: 50px;
}
.quiz-container{
background-color: rgb(0, 0, 0);
border-radius: 10px;
box-shadow: 0 0 10px 2px rgba(100, 100, 100, 0.1);
width: 600px;
overflow: hidden;
}
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.getElementById('quiz');
const answerEls = document.querySelectorAll('.answer');
const questionEl = document.getElementById('question');
const a_text = document.getElementById('a_text');
const b_text = document.getElementById('b_text');
const c_text = document.getElementById('c_text');
const d_text = document.getElementById('d_text');
const submitBtn = document.getElementById('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() {
let quizes = this.#getQuizes();
localStorage.clear();
localStorage.setItem("Quizes", JSON.stringify(quizes));
}
static loadQuizes() {
let quizes = JSON.parse(localStorage.getItem("Quizes"));
return quizes;
}
}
