Ossenkaemper
Neues Mitglied
HTML Code:
Javascript Code:
Problem: In den Antwort Button werden die möglichen Antworten & Fragen aus der 'let questions' liste nicht übernommen... Zudem kann man nach der 2. Frage nicht weiterkommen/klicken, woran kann das liegen?
Projekt als Zip im Anhang
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>Quiz Page</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="game.css">
</head>
<body>
<div class="container">
<div id="game" class="justify-center flex-column">
<div id="hud">
<div class="hud-item">
<p id="progressText" class="hud-prefix">
Question
</p>
<div id="progressBar">
<div id="progressBarFull"></div>
</div>
</div>
<div class="hud-item">
<p class="hud-prefix">
Score
</p>
<h1 class="hud-main-text" id="score">
0
</h1>
</div>
</div>
<h2 id="question">What is the answer to this question</h2>
<div class="choice-container">
<p class='choice-prefix'>A</p>
<p class='choice-text' data-number="1">choice1</p>
</div>
<div class="choice-container">
<p class='choice-prefix'>B</p>
<p class='choice-text' data-number="2">choice2</p>
</div>
<div class="choice-container">
<p class='choice-prefix'>C</p>
<p class='choice-text' data-number="3">choice3</p>
</div>
<div class="choice-container">
<p class='choice-prefix'>D</p>
<p class='choice-text' data-number="4">choice4</p>
</div>
</div>
</div>
<script src="file:///C:/Users/Alexander/Documents/Projekte/QuizVersuch3/game.js"></script>
</body>
</html>
Javascript Code:
Javascript:
const question = document.querySelector('#question');
const choices = Array.from(document.querySelectorAll('.choice-text'));
const progressText = document.querySelector('#progressText');
const scoreText = document.querySelector('#score');
const progressBarFull = document.querySelector('#progressBarFull');
alert("JS gefunden und laedt");
let currentQuestion = {}
let acceptingAnswers = true
let score = 0
let questionCounter = 0
let availableQuestions = []
let questions = [
{
question: 'What is 2 + 2',
choice1: '2',
choice2: '4',
choice3: '21',
choice4: '17',
answer: 2,
},
{
question: 'What is 2 + 3',
choice1: '2',
choice2: '9',
choice3: '241',
choice4: '5',
answer: 4,
},
{
question: "Wie heißt Alexander namen?",
choice1: "Alex",
choice2: "Olex",
choice3: "Elex",
choice4: "Alexander",
answer: 4,
},
{
question: "Wie ist Alexander Eduard Müllers 2. Name?",
choice1: "Brigitte",
choice2: "Jessica",
choice3: "Eduard",
choice4: "wolfang",
answer: 3,
}
]
const SCORE_POINTS = 100
const MAX_QUESTIONS = 4
startGame = () => {
questionCounter = 0
score = 0
availableQuestions = [...questions]
getNewQuestion()
}
getNewQuestion = () => {
if(availableQuestions.length === 0 || questionCounter > MAX_QUESTIONS) {
locasStorage.setItem('mostRecentScore', score)
return window.location.assign('/end.html')
}
questionCounter++
progressText.innerText = `Question ${questionCounter} of ${MAX_QUESTIONS}`
progressBarFull.style.width = `${(questionCounter/MAX_QUESTIONS) * 100}%`
const questionIndex = Math.floor(Math.random() * availableQuestions.length)
currentQuestion = availableQuestions[questionsIndex]
question.innertText = currentQuestion.question
choices.forEach(choice => {
const number = choice.dataset['number']
choice.innerText = currentQuestion['choice' + number]
})
availableQuestions.splice(questionIndex, 1)
acceptingAnswers = true
}
choices.forEach(choice => {
choice.addEventListener('click', e => {
if(!acceptingAnswers) return
acceptingAnswers = false
const selectedChoice = e.target
const selectedAnswer = selectedChoice.dataset['number']
let classToApply = selectedAnswer == currentQuestion.answer ? 'correct' : 'incorrect'
if(classToApply === 'correct') {
incrementScore(SCORE_POINTS)
}
selectedChoice.parentElement.classList.add(classToApply)
setTimeout(() => {
selectedChoice.parentElement.classList.remove(classToApply)
getNewQuestion()
}, 1000)
})
})
incrementScore = num => {
score +=num
scoreText.innerText = score
}
startGame()
Problem: In den Antwort Button werden die möglichen Antworten & Fragen aus der 'let questions' liste nicht übernommen... Zudem kann man nach der 2. Frage nicht weiterkommen/klicken, woran kann das liegen?
Projekt als Zip im Anhang