Skip to content

Commit

Permalink
update
Browse files Browse the repository at this point in the history
  • Loading branch information
rain1024 committed Oct 6, 2024
1 parent 3e8284b commit 1dcaad2
Show file tree
Hide file tree
Showing 8 changed files with 225 additions and 6 deletions.
9 changes: 9 additions & 0 deletions apps/languagesv2/compose/docker-compose.yml
Original file line number Diff line number Diff line change
@@ -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
15 changes: 15 additions & 0 deletions apps/languagesv2/languages-v2-web/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

6 changes: 6 additions & 0 deletions apps/languagesv2/languages-v2-web/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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"
}
}
6 changes: 6 additions & 0 deletions apps/languagesv2/languages-v2-web/postcss.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
2 changes: 1 addition & 1 deletion apps/languagesv2/languages-v2-web/public/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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`.
-->
<title>React App</title>
<title>Underthesea Languages v2</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
Expand Down
4 changes: 4 additions & 0 deletions apps/languagesv2/languages-v2-web/src/App.css
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
@tailwind base;
@tailwind components;
@tailwind utilities;

.App {
text-align: center;
}
Expand Down
179 changes: 174 additions & 5 deletions apps/languagesv2/languages-v2-web/src/App.tsx
Original file line number Diff line number Diff line change
@@ -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<number | null>(null);
const [isAnswerCorrect, setIsAnswerCorrect] = useState<boolean | null>(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 (
<div className="App">
<header className="App-header">
Languages v2
<div className="App flex flex-col items-center justify-center min-h-screen bg-gray-100">
<header className="App-header w-full max-w-md p-8 bg-white shadow-md rounded-lg">
<div className="quiz-section">
{showScore ? (
<div className='score-section text-2xl font-semibold text-center'>
You scored {score} out of {questions.length}
</div>
) : (
<div>
<div className='question-section mb-6'>
<div className='question-count text-lg font-medium mb-4'>
<span>Question {currentQuestion + 1}</span>/{questions.length}
</div>
<div className='question-text text-xl font-semibold'>{questions[currentQuestion].questionText}</div>
</div>
<div className="w-full bg-gray-300 h-4 rounded mb-6">
<div
className="bg-blue-500 h-4 rounded"
style={{ width: `${((currentQuestion + 1) / questions.length) * 100}%` }}
></div>
</div>
<div className='answer-section grid grid-cols-2 gap-4'>
{questions[currentQuestion].answerOptions.map((answerOption, index) => (
<button
key={index}
onClick={() => handleAnswerOptionClick(answerOption.isCorrect, index)}
className={`py-2 px-4 rounded transition duration-200 flex items-center justify-center space-x-2 ${
selectedAnswerIndex !== null
? index === selectedAnswerIndex
? answerOption.isCorrect
? 'bg-green-500 text-white'
: 'bg-red-500 text-white'
: answerOption.isCorrect
? 'bg-green-500 text-white'
: 'bg-blue-500 text-white'
: 'bg-blue-500 text-white hover:bg-blue-700'
}`}
disabled={selectedAnswerIndex !== null}
>
<span>{answerOption.answerText}</span>
</button>
))}
</div>
{selectedAnswerIndex !== null && (
<div className="flex items-center justify-center mt-4">
{isAnswerCorrect ? (
<FaCheckCircle className="text-green-500 text-6xl" />
) : (
<FaTimesCircle className="text-red-500 text-6xl" />
)}
</div>
)}
</div>
)}
</div>
</header>
</div>
);
Expand Down
10 changes: 10 additions & 0 deletions apps/languagesv2/languages-v2-web/tailwind.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}

0 comments on commit 1dcaad2

Please sign in to comment.