Hallo,
Ich habe eine funtion für eine React App implementiert und sie getestet, indem ich sie als App mit
importiert habe. Jetzt will ich sie aber in eine eigene Klasse verschieben aber kriege es nicht hin zu dieser function zu routen.
funktioniert ja nicht, da es bei mir keine component ist.
Soll ich das jetzt als component umschreiben oder gibt es da eine Möglichkeit die route anders zu implementieren?
[CODE lang="javascript" title="funtion für eine basisstruktur eines quizes"]import React, { useState } from 'react';
import './play_quiz.css';
export default function Play_quiz() {
const questionSet = [
{
questionText: 'Testfrage1',
answerOptions: [
{ answerText: 'falsche Antwort', isCorrect: false },
{ answerText: 'falsche Antwort', isCorrect: false },
{ answerText: 'korrekte Antwort', isCorrect: true },
{ answerText: 'falsche Antwort', isCorrect: false },
],
},
{
questionText: 'Testfrage2',
answerOptions: [
{ answerText: 'falsche Antwort', isCorrect: false },
{ answerText: 'korrekte Antwort', isCorrect: true },
{ answerText: 'falsche Antwort', isCorrect: false },
{ answerText: 'falsche Antwort', isCorrect: false },
],
},
{
questionText: 'Testfrage3',
answerOptions: [
{ answerText: 'korrekte Antwort', isCorrect: true },
{ answerText: 'falsche Antwort', isCorrect: false },
{ answerText: 'falsche Antwort', isCorrect: false },
{ answerText: 'falsche Antwort', isCorrect: false },
],
},
{
questionText: 'Testfrage4',
answerOptions: [
{ answerText: 'falsche Antwort', isCorrect: false },
{ answerText: 'falsche Antwort', isCorrect: false },
{ answerText: 'falsche Antwort', isCorrect: false },
{ answerText: 'korrekte Antwort', isCorrect: true },
],
},
];
const [currentQuestion, setCurrentQuestion] = useState(0);
const [showScore, setShowScore] = useState(false);
const [score, setScore] = useState(0);
const answerQuestionClick = (isCorrect) => {
if (isCorrect) {
setScore(score + 1);
}
const nextQuestion = currentQuestion + 1;
if (nextQuestion < questionSet.length) {
setCurrentQuestion(nextQuestion);
} else {
setShowScore(true);
}
};
return (
<div className='quiz-window'>
{showScore ? (
<div className='score-section'>
korrekt beantwortet: {score} von {questionSet.length}
</div>
) : (
<>
<div className='question-section'>
<div className='question-count'>
<span>Frage {currentQuestion + 1}</span>/{questionSet.length}
</div>
<div className='question-text'>{questionSet[currentQuestion].questionText}</div>
</div>
<div className='answer-section'>
{questionSet[currentQuestion].answerOptions.map((answerOption) => (
<button onClick={() => answerQuestionClick(answerOption.isCorrect)}>{answerOption.answerText}</button>
))}
</div>
</>
)}
</div>
);
}
[/CODE]
Ich habe eine funtion für eine React App implementiert und sie getestet, indem ich sie als App mit
Javascript:
import App from './App';
Javascript:
<Route exact path="/play_quiz" component={Play_quiz}></Route>
Soll ich das jetzt als component umschreiben oder gibt es da eine Möglichkeit die route anders zu implementieren?
Javascript:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { Route, BrowserRouter } from 'react-router-dom';
import QuestionOverview from './components/question_overview';
import CreateQuiz from './components/create_quiz';
import Play_quiz from './components/play_quiz';
const routes = (
<BrowserRouter>
<div id='rout-div'>
<Route exact path="/" component={App}></Route>
<Route exact path="/create_quiz" component={CreateQuiz}></Route>
<Route exact path="/question_overview" component={QuestionOverview}></Route>
<Route path="/play_quiz" render={() => <Play_quiz />} />
</div>
</BrowserRouter>
)
ReactDOM.render(
routes,
document.getElementById('root')
);
reportWebVitals();
[CODE lang="javascript" title="funtion für eine basisstruktur eines quizes"]import React, { useState } from 'react';
import './play_quiz.css';
export default function Play_quiz() {
const questionSet = [
{
questionText: 'Testfrage1',
answerOptions: [
{ answerText: 'falsche Antwort', isCorrect: false },
{ answerText: 'falsche Antwort', isCorrect: false },
{ answerText: 'korrekte Antwort', isCorrect: true },
{ answerText: 'falsche Antwort', isCorrect: false },
],
},
{
questionText: 'Testfrage2',
answerOptions: [
{ answerText: 'falsche Antwort', isCorrect: false },
{ answerText: 'korrekte Antwort', isCorrect: true },
{ answerText: 'falsche Antwort', isCorrect: false },
{ answerText: 'falsche Antwort', isCorrect: false },
],
},
{
questionText: 'Testfrage3',
answerOptions: [
{ answerText: 'korrekte Antwort', isCorrect: true },
{ answerText: 'falsche Antwort', isCorrect: false },
{ answerText: 'falsche Antwort', isCorrect: false },
{ answerText: 'falsche Antwort', isCorrect: false },
],
},
{
questionText: 'Testfrage4',
answerOptions: [
{ answerText: 'falsche Antwort', isCorrect: false },
{ answerText: 'falsche Antwort', isCorrect: false },
{ answerText: 'falsche Antwort', isCorrect: false },
{ answerText: 'korrekte Antwort', isCorrect: true },
],
},
];
const [currentQuestion, setCurrentQuestion] = useState(0);
const [showScore, setShowScore] = useState(false);
const [score, setScore] = useState(0);
const answerQuestionClick = (isCorrect) => {
if (isCorrect) {
setScore(score + 1);
}
const nextQuestion = currentQuestion + 1;
if (nextQuestion < questionSet.length) {
setCurrentQuestion(nextQuestion);
} else {
setShowScore(true);
}
};
return (
<div className='quiz-window'>
{showScore ? (
<div className='score-section'>
korrekt beantwortet: {score} von {questionSet.length}
</div>
) : (
<>
<div className='question-section'>
<div className='question-count'>
<span>Frage {currentQuestion + 1}</span>/{questionSet.length}
</div>
<div className='question-text'>{questionSet[currentQuestion].questionText}</div>
</div>
<div className='answer-section'>
{questionSet[currentQuestion].answerOptions.map((answerOption) => (
<button onClick={() => answerQuestionClick(answerOption.isCorrect)}>{answerOption.answerText}</button>
))}
</div>
</>
)}
</div>
);
}
[/CODE]