()
22 |
23 | const fetchData = async () => {
24 | try {
25 | const response = await fetch('http://localhost:8000/quiz-item')
26 | const json = await response.json()
27 | setQuiz(json)
28 | } catch ( err) {
29 | console.error(err)
30 | }
31 | }
32 |
33 | useEffect(() => {
34 | fetchData()
35 | } , [])
36 |
37 | useEffect(() => {
38 | const unansweredIds = quiz?.content?.map(({id} : Content) => id)
39 | setUnansweredQuestionIds(unansweredIds)
40 | }, [quiz])
41 |
42 |
43 | useEffect(() => {
44 | if (chosenAnswerItems.length > 0 && unansweredQuestionIds) {
45 | if (showAnswer && answerRef.current) {
46 | answerRef.current.scrollIntoView({behavior: 'smooth'})
47 | }
48 |
49 | if (unansweredQuestionIds.length <= 0 && chosenAnswerItems.length >= 1) {
50 | setShowAnswer(true)
51 | } else {
52 | const highestId = Math.min(...unansweredQuestionIds)
53 | refs[highestId].current.scrollIntoView({behavior: 'smooth'})
54 | }
55 | }
56 |
57 |
58 | }, [unansweredQuestionIds, chosenAnswerItems.length, showAnswer, answerRef.current, refs])
59 |
60 | return (
61 |
62 |
63 | {refs && quiz?.content.map((content: Content) => (
64 | <QuestionsBlock
65 | key={content.id}
66 | quizItem={content}
67 | chosenAnswerItems={chosenAnswerItems}
68 | setChosenAnswerItems={setChosenAnswerItems}
69 | unansweredQuestionIds={unansweredQuestionIds}
70 | setUnansweredQuestionIds={setUnansweredQuestionIds}
71 | ref={refs[content.id]}
72 | />
73 | ))}
74 | {showAnswer &&
75 | <AnswerBlock
76 | answerOptions={quiz?.answers}
77 | chosenAnswers={chosenAnswerItems}
78 | ref={answerRef}
79 | />}
80 | </div>
81 | )
82 | }
83 |
84 | export default App
85 |
--------------------------------------------------------------------------------
/src/components/AnswerBlock.tsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useState, forwardRef} from 'react'
2 | import { Answer } from '../../interfaces'
3 |
4 | const AnswerBlock = ({
5 | answerOptions,
6 | chosenAnswers
7 | } : {
8 | answerOptions: Answer[] | undefined,
9 | chosenAnswers: string[]
10 | }, ref: HTMLDivElement | any) => {
11 | const [result, setResult] = useState<Answer| null>()
12 |
13 | useEffect(() => {
14 | answerOptions?.forEach((answer: Answer) => {
15 | if (
16 | chosenAnswers.includes(answer.combination[0]) &&
17 | chosenAnswers.includes(answer.combination[1]) &&
18 | chosenAnswers.includes(answer.combination[2])
19 | ) {
20 | setResult(answer)
21 | }
22 | })
23 | }, [chosenAnswers])
24 |
25 | console.log(result)
26 |
27 | return (
28 | <div ref={ref} className="answer-block">
29 | <h2>{result?.text}</h2>
30 | <img src={result?.image} alt={result?.text}/>
31 | </div>
32 | )
33 | }
34 |
35 | export default forwardRef(AnswerBlock)
36 |
--------------------------------------------------------------------------------
/src/components/QuestionBlock.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Question } from '../../interfaces'
3 |
4 | const QuestionBlock = ({
5 | quizItemId,
6 | question,
7 | chosenAnswerItems,
8 | setChosenAnswerItems,
9 | unansweredQuestionIds,
10 | setUnansweredQuestionIds
11 | }: {
12 | quizItemId: number;
13 | question: Question,
14 | chosenAnswerItems: string[],
15 | setChosenAnswerItems: Function,
16 | unansweredQuestionIds: number[] | undefined,
17 | setUnansweredQuestionIds: Function
18 | }) => {
19 |
20 |
21 | const handleClick = () => {
22 | setChosenAnswerItems((prevState: string[]) => [...prevState, question.text])
23 | setUnansweredQuestionIds(unansweredQuestionIds?.filter((id: number) => id !== quizItemId))
24 | }
25 |
26 | const validPick = !chosenAnswerItems?.includes(question.text) &&
27 | !unansweredQuestionIds?.includes(quizItemId)
28 |
29 |
30 | return (
31 | <button
32 | className="question-block"
33 | onClick={handleClick}
34 | disabled={validPick}
35 | >
36 | <img src={question.image} alt={question.alt}/>
37 | <h3>{question.text}</h3>
38 | <p>
39 | <a href={question.image}>{question.credit} </a>
40 | <a href="https://www.unsplash.com">Unsplash</a>
41 | </p>
42 |
43 | </button>
44 | )
45 | }
46 |
47 | export default QuestionBlock
48 |
--------------------------------------------------------------------------------
/src/components/QuestionsBlock.tsx:
--------------------------------------------------------------------------------
1 | import React, { forwardRef } from 'react'
2 | import { Content, Question } from '../../interfaces'
3 | import QuestionBlock from './QuestionBlock'
4 |
5 | const QuestionsBlock = ({
6 | quizItem,
7 | chosenAnswerItems,
8 | setChosenAnswerItems,
9 | unansweredQuestionIds,
10 | setUnansweredQuestionIds,
11 | } : {
12 | quizItem: Content,
13 | chosenAnswerItems: string[],
14 | setChosenAnswerItems: Function,
15 | unansweredQuestionIds: number[] | undefined
16 | setUnansweredQuestionIds: Function
17 | }, ref: React.LegacyRef<HTMLHeadingElement> | undefined ) => {
18 | return (
19 | <>
20 | <h2 ref={ref} className="title-block" >{quizItem.text}</h2>
21 | <div className="questions-container">
22 | {quizItem?.questions.map((question: Question, _index: number) =>(
23 | <QuestionBlock
24 | key={_index}
25 | quizItemId={quizItem.id}
26 | question={question}
27 | chosenAnswerItems={chosenAnswerItems}
28 | setChosenAnswerItems={setChosenAnswerItems}
29 | unansweredQuestionIds={unansweredQuestionIds}
30 | setUnansweredQuestionIds={setUnansweredQuestionIds}
31 | />
32 | ))}
33 | </div>
34 | </>
35 | )
36 | }
37 |
38 | export default forwardRef(QuestionsBlock)
39 |
--------------------------------------------------------------------------------
/src/components/Title.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { QuizData } from "../../interfaces"
3 |
4 | const Title = ({ title, subtitle } : {
5 | title: QuizData['title'] | undefined,
6 | subtitle: QuizData['subtitle'] | undefined,
7 | }) => {
8 | return (
9 | <div>
10 | <h1>{title}</h1>
11 | <p>{subtitle}</p>
12 | </div>
13 | )
14 | }
15 |
16 | export default Title
17 |
--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;300;400;500&display=swap');
2 |
3 | * {
4 | font-family: 'Montserrat', sans-serif;
5 | }
6 |
7 | body {
8 | display: flex;
9 | justify-content: center;
10 | }
11 |
12 | .app {
13 | width: 37.5rem;
14 | }
15 |
16 | h1 {
17 | font-size: 2.5rem;
18 | line-height: 1.05;
19 | text-align: left;
20 | }
21 |
22 | h2 {
23 | font-size: 3.5rem;
24 | line-height: 1.05;
25 | text-align: center;
26 | }
27 |
28 | h3 {
29 | margin: 0.625rem;
30 | }
31 |
32 | p {
33 | font-size: 1.125rem;
34 | line-height: 1.2;
35 | }
36 |
37 | .title-block {
38 | width: 37.5rem;
39 | height: 13.125rem;
40 | background-color: rgb(102, 69, 221);
41 | border-radius: 0.313rem;
42 | display: flex;
43 | justify-content: center;
44 | align-items: center;
45 | color: rgb(255,255,255);
46 | }
47 |
48 | .questions-container {
49 | display: flex;
50 | flex-wrap: wrap;
51 | justify-content: space-between;
52 | }
53 |
54 | .question-block {
55 | width: 17.875rem;
56 | overflow: hidden;
57 | background-color: rgb(255,255,255);
58 | border-radius: 0.313rem;
59 | box-shadow: rgba(0,0,0,0.07) 0 0 0 0.063rem;
60 | text-align: center;
61 | margin-bottom: 0.938rem;
62 | border: none;
63 | padding: 0;
64 | }
65 |
66 | .question-block p {
67 | font-size: 0.8rem;
68 | font-style: italic;
69 | }
70 |
71 | .question-block a {
72 | color: rgb(135, 135, 135);
73 | text-decoration: none;
74 | }
75 |
76 | .answer-block {
77 | width: 36.5rem;
78 | background-color: rgb(255,61,158);
79 | border-radius: 0.313rem;
80 | display: flex;
81 | align-items: center;
82 | flex-direction: column;
83 | color: rgb(255,255,255);
84 | }
85 |
86 | .answer-block img {
87 | width: 90%;
88 | }
89 |
--------------------------------------------------------------------------------
/src/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactDOM from 'react-dom/client'
3 | import './index.css'
4 | import App from './App'
5 |
6 | const root = ReactDOM.createRoot(
7 | document.getElementById('root') as HTMLElement
8 | )
9 | root.render(
10 | <React.StrictMode>
11 | <App />
12 | </React.StrictMode>
13 | )
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es6",
4 | "lib": [
5 | "dom",
6 | "dom.iterable",
7 | "esnext"
8 | ],
9 | "allowJs": true,
10 | "skipLibCheck": true,
11 | "esModuleInterop": true,
12 | "allowSyntheticDefaultImports": true,
13 | "strict": true,
14 | "forceConsistentCasingInFileNames": true,
15 | "noFallthroughCasesInSwitch": true,
16 | "module": "commonjs",
17 | "moduleResolution": "node",
18 | "resolveJsonModule": true,
19 | "isolatedModules": true,
20 | "noEmit": true,
21 | "jsx": "react-jsx"
22 | },
23 | "include": [
24 | "src"
25 | ]
26 | }
27 |
--------------------------------------------------------------------------------