diff --git a/src/App.jsx b/src/App.jsx
index 13fe93a..c465560 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,24 +1,10 @@
-import React, { useState, useEffect } from 'react'
-import { create } from 'zustand'
-
-const useUserStore = create(set => ({
- fetchUser: async userId => {
- set({ isLoading: true, error: null})
- try {
- const response = await fetch(`api/users/${userId}`)
- const user = await response.json()
- set({user, isLoading: false})
- } catch (error) {
- set({error: error.message, isLoading: false})
- }
- }
-}))
-
+import Quiz from './components/Quiz'
function App() {
return (
<>
Практика по созданию списка задач
+
>
)
}
diff --git a/src/MyComponent.jsx b/src/MyComponent.jsx
deleted file mode 100644
index 7267baa..0000000
--- a/src/MyComponent.jsx
+++ /dev/null
@@ -1,8 +0,0 @@
-export function MyComponent() {
- return (
- <>
- Hello
- >
- )
-}
-export default MyComponent
\ No newline at end of file
diff --git a/src/components/Question.jsx b/src/components/Question.jsx
new file mode 100644
index 0000000..be05381
--- /dev/null
+++ b/src/components/Question.jsx
@@ -0,0 +1,31 @@
+import { useState } from 'react'
+
+const Question = ({question, onSubmit}) => {
+ const [selectedOption,setSelectedOption] = useState('')
+ const handleSubmit = () => {
+ console.log(selectedOption);
+ if (selectedOption) onSubmit(selectedOption);
+ }
+
+ return (
+
+
Вопрос {question.id}: {question.text}
+
+ {question.options.map((option, index)=>(
+
+ ))}
+
+
+
+ )
+}
+
+export default Question
\ No newline at end of file
diff --git a/src/components/Quiz.jsx b/src/components/Quiz.jsx
new file mode 100644
index 0000000..362b947
--- /dev/null
+++ b/src/components/Quiz.jsx
@@ -0,0 +1,35 @@
+import useQuizStore from './store/useQuizStore'
+import Question from './Question'
+import Result from './Result'
+
+const Quiz = () => {
+ const {
+ questions,
+ currentQuestion,
+ userAswers,
+ isFinished,
+ submitAnswer,
+ goToNextQuestion,
+ restartQuiz,
+ } = useQuizStore();
+
+ const handleAnswerSubmit = (anwser) => {
+ console.log('Yes')
+ submitAnswer(answer)
+ if (currentQuestion < questions.length - 1 ) {
+ goToNextQuestion()
+ }
+ }
+ if(isFinished) {
+ return ()
+ }
+ return (
+
+
+
+ )
+}
+
+export default Quiz
\ No newline at end of file
diff --git a/src/components/Result.jsx b/src/components/Result.jsx
new file mode 100644
index 0000000..05ceafc
--- /dev/null
+++ b/src/components/Result.jsx
@@ -0,0 +1,9 @@
+const Result = ({questions, userAswers, onRestart}) => {
+ return (
+
+
Результат
+
+
+ )
+}
+export default Result
\ No newline at end of file
diff --git a/src/components/store/useQuizStore.jsx b/src/components/store/useQuizStore.jsx
new file mode 100644
index 0000000..7fae209
--- /dev/null
+++ b/src/components/store/useQuizStore.jsx
@@ -0,0 +1,36 @@
+import { create } from 'zustand'
+
+const useQuizStore = create(set => ({
+ questions: [
+ {
+ id:1,
+ text: 'Сколько будет 2+2?',
+ options: ['3','4','2'],
+ correctAnswer: '4',
+ },
+ {
+ id:2,
+ text: 'Столица России?',
+ options: ['Москва','Париж','Лондон'],
+ correctAnswer: 'Москва',
+ },
+ ],
+ currentQuestion: 0,
+ userAnswer:[],
+ isFinished: false,
+ goToNextQuestion: () => set(state => ({
+ currentQuestion: state.currentQuestion + 1,
+ })),
+ submitAnswer: answer => set(state => {
+ const updatedAnswer = [...state.userAnswer, answer];
+ const isFinished = (state.currentQuestion >= state.questions.length - 1);
+ return {userAnswer: updatedAnswer, isFinished};
+ }),/*
+ restartQuiz: () => set({
+ currentQuestion: 0,
+ userAnswer: [],
+ isFinished: false
+ }), */
+}))
+
+export default useQuizStore
\ No newline at end of file