Hallo,
Ich versuche aktuell Fragen aus einer Json Datenbank in ein Quiz zu laden und die Antworten der Frage in der Frage in Buttons zu laden.
Wenn ich aber versuche die Antworten abzurufen, kommt der Fehler: ( Line 87:10: 'question' is not defined no-undef)
Wäre dankbar für einen Tipp wo mein Fehler liegt.
Ich versuche aktuell Fragen aus einer Json Datenbank in ein Quiz zu laden und die Antworten der Frage in der Frage in Buttons zu laden.
Wenn ich aber versuche die Antworten abzurufen, kommt der Fehler: ( Line 87:10: 'question' is not defined no-undef)
Wäre dankbar für einen Tipp wo mein Fehler liegt.
Javascript:
import './play_quiz.css';
import React from "react"
class Play_quiz extends React.Component {
state = {
currentQuestion: 0,
showScore: false,
score: 0,
questions: []
}
componentDidMount() {
this.getRandomizedQuestions();
console.log("Current state:")
}
getRandomizedQuestions = () => {
const apiUrl = 'http://localhost:3001/questions'
fetch(apiUrl)
.then((response) => response.json())
.then(
(result) => {
console.log("From database:");
console.log(result);
let amountOfQuestions = result.length;
let randomizedResult = [];
for (let i = 0; i < amountOfQuestions; i++) {
let randomIndex = Math.floor(Math.random() * result.length);
randomizedResult.push(result[randomIndex]);
result.splice(randomIndex, 1);
}
//const randomizedResult = result.sort(() => Math.random() - 0.5)
this.setState({questions: randomizedResult });
},
(error) => {
console.log('An unexpected error occurred', error);
}
);
};
handleAnswerOptionClick = (isCorrect) => {
if (isCorrect) {
this.setState({ score: this.state.score + 1 });
}
const nextQuestion = this.state.currentQuestion + 1;
if (nextQuestion < this.state.questions.length) {
this.setState({
currentQuestion: nextQuestion
})
} else {
this.setState({
showScore: true
})
}
};
updateCurrentQuestion = () => {
this.setState({ currentQuestion: this.state.currentQuestion + 1 })
}
render() {
return (
<div className='quiz-window'>
{this.state.questions.map((question, index) => (
<div key={index}>
{question.title}
</div>)
)}
{this.state.showScore ? (
<div className='score-section'>
korrekt beantwortet: {this.state.score} von {this.state.questions.length}
</div>
) : (
<div>
<div className='question-section'>
<div className='question-count'>
<span>Frage {this.updateCurrentQuestion}</span>/{this.state.questions.length}
</div>
</div>
<div className='answer-section'>
{question.answers.map(answer => (
<button key={answer.number} onClick={() => this.handleAnswerOptionClick(answer.isCorrect)}>
{answer.answer}
</button>
))}
</div>
</div>
)
}
</div>
)
}
}
export default Play_quiz;
Javascript:
{
"questions": [
{
"id": 0,
"title": "Pi Dezimal",
"author": "Timo",
"isMC": false,
"question": "Wie lauten die 4 ersten Dezimalstellen von Pi?",
"answers": "1415",
"category": null
},
{
"id": 1,
"title": "Längster Fluss",
"author": "Timo",
"isMC": true,
"question": "Welcher ist der längte Fluss der Welt?",
"answers": [
{
"number": 1,
"answer": "Donau",
"isCorrect": false
},
{
"number": 2,
"answer": "Nil",
"isCorrect": true
},
{
"number": 3,
"answer": "Wolga",
"isCorrect": false
},
{
"number": 4,
"answer": "Amazonas",
"isCorrect": false
}
],
"category": null
},
{
"id": 2,
"title": "Energieaufnahme Pflanzen",
"author": "Timo",
"isMC": false,
"question": "Durch welchen Vorgang gewinnen Pflanzen Energie?",
"answers": "Photosynthese",
"category": null
}
],
"quizzes": [
{
"id": 0,
"player": "Emil",
"questions" : [
{
"number" : 0,
"referenceID" : 1,
"isAnswered" : false,
"isCorrectlyAnswered" : false
},
{
"number" : 1,
"referenceID" : 0,
"isAnswered" : false,
"isCorrectlyAnswered" : false
}
],
"grade" : null,
"editingTime" : null,
"isFinished" : false
}
],
"profile": {
"name": "typicode"
}
}
Es könnte auch sein, dass Du z. B. über this.state.questions in Verbindung mit this.state.currentQuestion gehen kannst.
