From 1dcaad2da04f6fbe8abe5ebe197a92c9188b7663 Mon Sep 17 00:00:00 2001 From: Vu Anh Date: Sun, 6 Oct 2024 01:27:42 +0000 Subject: [PATCH] update --- apps/languagesv2/compose/docker-compose.yml | 9 + .../languages-v2-web/package-lock.json | 15 ++ .../languagesv2/languages-v2-web/package.json | 6 + .../languages-v2-web/postcss.config.js | 6 + .../languages-v2-web/public/index.html | 2 +- apps/languagesv2/languages-v2-web/src/App.css | 4 + apps/languagesv2/languages-v2-web/src/App.tsx | 179 +++++++++++++++++- .../languages-v2-web/tailwind.config.js | 10 + 8 files changed, 225 insertions(+), 6 deletions(-) create mode 100644 apps/languagesv2/compose/docker-compose.yml create mode 100644 apps/languagesv2/languages-v2-web/postcss.config.js create mode 100644 apps/languagesv2/languages-v2-web/tailwind.config.js diff --git a/apps/languagesv2/compose/docker-compose.yml b/apps/languagesv2/compose/docker-compose.yml new file mode 100644 index 00000000..ed62716a --- /dev/null +++ b/apps/languagesv2/compose/docker-compose.yml @@ -0,0 +1,9 @@ +version: '3.8' + +services: + languages-v2-web: + platform: linux/amd64 + image: ghcr.io/undertheseanlp/underthesea/languages-v2-web:0.0.1 + ports: + - "8080:80" + restart: unless-stopped \ No newline at end of file diff --git a/apps/languagesv2/languages-v2-web/package-lock.json b/apps/languagesv2/languages-v2-web/package-lock.json index 56c179fd..138ce12b 100644 --- a/apps/languagesv2/languages-v2-web/package-lock.json +++ b/apps/languagesv2/languages-v2-web/package-lock.json @@ -17,9 +17,15 @@ "@types/react-dom": "^18.3.0", "react": "^18.3.1", "react-dom": "^18.3.1", + "react-icons": "^5.3.0", "react-scripts": "5.0.1", "typescript": "^4.9.5", "web-vitals": "^2.1.4" + }, + "devDependencies": { + "autoprefixer": "^10.4.20", + "postcss": "^8.4.47", + "tailwindcss": "^3.4.13" } }, "node_modules/@adobe/css-tools": { @@ -15942,6 +15948,15 @@ "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==", "license": "MIT" }, + "node_modules/react-icons": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.3.0.tgz", + "integrity": "sha512-DnUk8aFbTyQPSkCfF8dbX6kQjXA9DktMeJqfjrg6cK9vwQVMxmcA3BfP4QoiztVmEHtwlTgLFsPuH2NskKT6eg==", + "license": "MIT", + "peerDependencies": { + "react": "*" + } + }, "node_modules/react-is": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", diff --git a/apps/languagesv2/languages-v2-web/package.json b/apps/languagesv2/languages-v2-web/package.json index bc650443..84073570 100644 --- a/apps/languagesv2/languages-v2-web/package.json +++ b/apps/languagesv2/languages-v2-web/package.json @@ -12,6 +12,7 @@ "@types/react-dom": "^18.3.0", "react": "^18.3.1", "react-dom": "^18.3.1", + "react-icons": "^5.3.0", "react-scripts": "5.0.1", "typescript": "^4.9.5", "web-vitals": "^2.1.4" @@ -39,5 +40,10 @@ "last 1 firefox version", "last 1 safari version" ] + }, + "devDependencies": { + "autoprefixer": "^10.4.20", + "postcss": "^8.4.47", + "tailwindcss": "^3.4.13" } } diff --git a/apps/languagesv2/languages-v2-web/postcss.config.js b/apps/languagesv2/languages-v2-web/postcss.config.js new file mode 100644 index 00000000..33ad091d --- /dev/null +++ b/apps/languagesv2/languages-v2-web/postcss.config.js @@ -0,0 +1,6 @@ +module.exports = { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, +} diff --git a/apps/languagesv2/languages-v2-web/public/index.html b/apps/languagesv2/languages-v2-web/public/index.html index aa069f27..caf91ac9 100644 --- a/apps/languagesv2/languages-v2-web/public/index.html +++ b/apps/languagesv2/languages-v2-web/public/index.html @@ -24,7 +24,7 @@ work correctly both with client-side routing and a non-root public URL. Learn how to configure a non-root public URL by running `npm run build`. --> - React App + Underthesea Languages v2 diff --git a/apps/languagesv2/languages-v2-web/src/App.css b/apps/languagesv2/languages-v2-web/src/App.css index 74b5e053..60ff72ab 100644 --- a/apps/languagesv2/languages-v2-web/src/App.css +++ b/apps/languagesv2/languages-v2-web/src/App.css @@ -1,3 +1,7 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + .App { text-align: center; } diff --git a/apps/languagesv2/languages-v2-web/src/App.tsx b/apps/languagesv2/languages-v2-web/src/App.tsx index 08d315e7..a1e9ef10 100644 --- a/apps/languagesv2/languages-v2-web/src/App.tsx +++ b/apps/languagesv2/languages-v2-web/src/App.tsx @@ -1,12 +1,181 @@ -import React from 'react'; -import logo from './logo.svg'; +import React, { useState } from 'react'; import './App.css'; +import { FaCheckCircle, FaTimesCircle } from 'react-icons/fa'; + +const questions = [ + { + questionText: 'What is the meaning of the Chinese word “爱” (ài)?', + answerOptions: [ + { answerText: 'Love', isCorrect: true }, + { answerText: 'Water', isCorrect: false }, + { answerText: 'Fire', isCorrect: false }, + { answerText: 'Tree', isCorrect: false }, + ], + }, + { + questionText: 'What is the meaning of the Chinese word “水” (shuǐ)?', + answerOptions: [ + { answerText: 'Water', isCorrect: true }, + { answerText: 'Mountain', isCorrect: false }, + { answerText: 'Earth', isCorrect: false }, + { answerText: 'Sky', isCorrect: false }, + ], + }, + { + questionText: 'What is the meaning of the Chinese word “火” (huǒ)?', + answerOptions: [ + { answerText: 'Fire', isCorrect: true }, + { answerText: 'Flower', isCorrect: false }, + { answerText: 'Sun', isCorrect: false }, + { answerText: 'Moon', isCorrect: false }, + ], + }, + { + questionText: 'What is the meaning of the Chinese word “大” (dà)?', + answerOptions: [ + { answerText: 'Big', isCorrect: true }, + { answerText: 'Small', isCorrect: false }, + { answerText: 'Happy', isCorrect: false }, + { answerText: 'Fast', isCorrect: false }, + ], + }, + { + questionText: 'What is the meaning of the Chinese word “小” (xiǎo)?', + answerOptions: [ + { answerText: 'Small', isCorrect: true }, + { answerText: 'Tall', isCorrect: false }, + { answerText: 'Big', isCorrect: false }, + { answerText: 'Slow', isCorrect: false }, + ], + }, + { + questionText: 'What is the meaning of the Chinese word “男” (nán)?', + answerOptions: [ + { answerText: 'Male', isCorrect: true }, + { answerText: 'Female', isCorrect: false }, + { answerText: 'Child', isCorrect: false }, + { answerText: 'Old', isCorrect: false }, + ], + }, + { + questionText: 'What is the meaning of the Chinese word “女” (nǔ)?', + answerOptions: [ + { answerText: 'Female', isCorrect: true }, + { answerText: 'Male', isCorrect: false }, + { answerText: 'Young', isCorrect: false }, + { answerText: 'Tall', isCorrect: false }, + ], + }, + { + questionText: 'What is the meaning of the Chinese word “月” (yuè)?', + answerOptions: [ + { answerText: 'Moon', isCorrect: true }, + { answerText: 'Star', isCorrect: false }, + { answerText: 'Sun', isCorrect: false }, + { answerText: 'Sky', isCorrect: false }, + ], + }, + { + questionText: 'What is the meaning of the Chinese word “日” (rì)?', + answerOptions: [ + { answerText: 'Sun', isCorrect: true }, + { answerText: 'Moon', isCorrect: false }, + { answerText: 'Water', isCorrect: false }, + { answerText: 'Fire', isCorrect: false }, + ], + }, + { + questionText: 'What is the meaning of the Chinese word “学” (xué)?', + answerOptions: [ + { answerText: 'Study', isCorrect: true }, + { answerText: 'Run', isCorrect: false }, + { answerText: 'Eat', isCorrect: false }, + { answerText: 'Play', isCorrect: false }, + ], + }, +]; function App() { + const [currentQuestion, setCurrentQuestion] = useState(0); + const [showScore, setShowScore] = useState(false); + const [score, setScore] = useState(0); + const [selectedAnswerIndex, setSelectedAnswerIndex] = useState(null); + const [isAnswerCorrect, setIsAnswerCorrect] = useState(null); + + const handleAnswerOptionClick = (isCorrect: boolean, index: number) => { + setSelectedAnswerIndex(index); + setIsAnswerCorrect(isCorrect); + if (isCorrect) { + setScore(score + 1); + } + setTimeout(() => { + const nextQuestion = currentQuestion + 1; + if (nextQuestion < questions.length) { + setCurrentQuestion(nextQuestion); + setSelectedAnswerIndex(null); + setIsAnswerCorrect(null); + } else { + setShowScore(true); + } + }, 1000); + }; + return ( -
-
- Languages v2 +
+
+
+ {showScore ? ( +
+ You scored {score} out of {questions.length} +
+ ) : ( +
+
+
+ Question {currentQuestion + 1}/{questions.length} +
+
{questions[currentQuestion].questionText}
+
+
+
+
+
+ {questions[currentQuestion].answerOptions.map((answerOption, index) => ( + + ))} +
+ {selectedAnswerIndex !== null && ( +
+ {isAnswerCorrect ? ( + + ) : ( + + )} +
+ )} +
+ )} +
); diff --git a/apps/languagesv2/languages-v2-web/tailwind.config.js b/apps/languagesv2/languages-v2-web/tailwind.config.js new file mode 100644 index 00000000..5a666547 --- /dev/null +++ b/apps/languagesv2/languages-v2-web/tailwind.config.js @@ -0,0 +1,10 @@ +/** @type {import('tailwindcss').Config} */ +module.exports = { + content: [ + "./src/**/*.{js,jsx,ts,tsx}", + ], + theme: { + extend: {}, + }, + plugins: [], +} \ No newline at end of file