Fragen & Antwortmöglichkeiten werden aus dem JS nicht in HTML übernommen

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Ossenkaemper

Neues Mitglied
12 Juli 2021
2
0
1
23
HTML Code:


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
 

Anhänge

  • QuizVersuch3.zip
    3,9 KB · Aufrufe: 1

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.475
474
83
68
Ich finde da drei Fehler:
  1. questionsIndex nicht definiert
  2. Tippfehler bei innnertText
  3. Tippfehler bei locasStorage

Ich habe die Fehler mit einem Pfeil <-- markiert:
Code:
        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 questionsIndex = 0 // <-- war nicht definiert
        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) <-- Tippfehler
                localStorage.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 <--- Tippfehler
            question.innerText = 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()
 
Zuletzt bearbeitet: