Skip to content

Commit

Permalink
GH-751: [LanguagesV2] Second Page (#752)
Browse files Browse the repository at this point in the history
  • Loading branch information
@rain1024
rain1024 authored Oct 6, 2024
1 parent 7fd2e01 commit c7c16a6
Show file tree
Hide file tree
Showing 10 changed files with 492 additions and 175 deletions.
42 changes: 42 additions & 0 deletions apps/languagesv2/languages-v2-web/package-lock.json
View file

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
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
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
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
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

0 comments on commit c7c16a6

Please sign in to comment.