Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

GH-751: [LanguagesV2] Second Page #752

Merged
merged 2 commits into from
Oct 6, 2024
Merged

GH-751: [LanguagesV2] Second Page #752

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6f017d1
update
rain1024 Oct 6, 2024
ec0ca43
update
rain1024 Oct 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 42 additions & 0 deletions apps/languagesv2/languages-v2-web/package-lock.json
View file
Open in desktop

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

1 change: 1 addition & 0 deletions apps/languagesv2/languages-v2-web/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-icons": "^5.3.0",
"react-router-dom": "^6.26.2",
"react-scripts": "5.0.1",
"typescript": "^4.9.5",
"web-vitals": "^2.1.4"
Expand Down
190 changes: 15 additions & 175 deletions apps/languagesv2/languages-v2-web/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,183 +1,23 @@
import React, { useState } from 'react';
import React 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 },
],
},
];
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import Home from './pages/Home';
import Quiz from './pages/Quiz';
import Nav from './pages/Nav';

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 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>
)}
<Router>
<div className="App w-full flex flex-col items-center justify-center min-h-screen bg-gray-100">
<Nav />
<div className="w-4/5">
<Routes>
<Route path="/" element={<Home />} />
<Route path="/quiz" element={<Quiz />} />
</Routes>
</div>
</header>
</div>
</div>
</Router>
);
}

Expand Down
60 changes: 60 additions & 0 deletions apps/languagesv2/languages-v2-web/src/pages/Home.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
import React from 'react';
import { Link } from 'react-router-dom';

function Home() {
return (
<div className="w-full p-6 space-y-8">
{/* Header Section */}
<header className="text-left">
<h1 className="text-5xl font-bold mb-2 text-blue-700">Languages</h1>
<p className="text-xl text-gray-700">Like Duolingo, but Opensource</p>
</header>

{/* English Section */}
<section className="bg-white shadow-md rounded-lg p-6 transition-transform transform hover:scale-105 hover:bg-blue-50">
<h2 className="text-3xl font-semibold mb-4 text-blue-700">English 🇬🇧</h2>
<p className="text-md text-gray-700 mb-6">Master English with our engaging quizzes and exercises. Unlock the full potential of your language skills and take your communication to the next level!</p>
<div className="mb-8">
<Link
to="/quiz?language=English"
className="inline-block bg-blue-600 text-white px-6 py-3 rounded-full font-semibold text-center hover:bg-blue-800 shadow-lg">
🚀 Start Your English Adventure Now!
</Link>
</div>
</section>

{/* Vietnamese Section */}
<section className="bg-white shadow-md rounded-lg p-6 transition-transform transform hover:scale-105 hover:bg-green-50">
<h2 className="text-3xl font-semibold mb-4 text-green-700">Vietnamese 🇻🇳</h2>
<p className="text-md text-gray-700 mb-6">Discover the beauty of the Vietnamese language through fun and immersive quizzes. Let’s explore the culture and language together!</p>
<div className="mb-8">
<Link
to="/quiz?language=Vietnamese"
className="inline-block bg-green-600 text-white px-6 py-3 rounded-full font-semibold text-center hover:bg-green-800 shadow-lg">
🌟 Start Vietnamese Quiz and Uncover the Magic!
</Link>
</div>
</section>

{/* Chinese Section */}
<section className="bg-white shadow-md rounded-lg p-6 transition-transform transform hover:scale-105 hover:bg-red-50">
<h2 className="text-3xl font-semibold mb-4 text-red-700">Chinese 🇨🇳</h2>
<p className="text-md text-gray-700 mb-6">Begin your Mandarin Chinese journey with fun, engaging quizzes. Unlock the wonders of the Chinese language and culture!</p>
<div className="mb-8">
<Link
to="/quiz?language=Chinese"
className="inline-block bg-red-600 text-white px-6 py-3 rounded-full font-semibold text-center hover:bg-red-800 shadow-lg">
🐉 Start Chinese Quiz and Begin Your Journey!
</Link>
</div>
</section>

{/* Footer Section */}
<footer className="text-center text-gray-600 mt-12">
<p className="text-lg">Happy learning! Stay consistent, stay curious. 🚀 Let every quiz be a new adventure!</p>
</footer>
</div>
);
}

export default Home;
21 changes: 21 additions & 0 deletions apps/languagesv2/languages-v2-web/src/pages/Nav.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import React from 'react';
import { Link } from 'react-router-dom';

const Nav: React.FC = () => {
return (
<nav className="w-full p-4 bg-white shadow-md fixed top-0 z-50">
<ul className="flex justify-start space-x-8">
<li>
<Link
to="/"
className="text-blue-600 font-semibold hover:text-blue-800 transition duration-300 ease-in-out px-4 py-2 rounded-md hover:bg-blue-100"
>
Languages
</Link>
</li>
</ul>
</nav>
);
};

export default Nav;
Loading
Loading