Skip to content

Commit 2c9648a

Browse files
EshaTuscanoEshaTuscano
committed
Added Flashcard App
1 parent ad4b23e commit 2c9648a

File tree

1 file changed

+259
-0
lines changed

1 file changed

+259
-0
lines changed

‎FlashcardApp/Flashcard.html‎

Lines changed: 259 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,259 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Flashcards + Quiz App</title>
6+
<style>
7+
body {
8+
font-family: "Segoe UI", Tahoma, sans-serif;
9+
text-align: center;
10+
background: linear-gradient(135deg, #74ebd5 0%, #9face6 100%);
11+
margin: 0;
12+
padding: 30px;
13+
color: #333;
14+
}
15+
h1 {
16+
margin-bottom: 20px;
17+
font-size: 2rem;
18+
color: #222;
19+
}
20+
.flashcard {
21+
width: 350px;
22+
height: 220px;
23+
margin: 20px auto;
24+
perspective: 1000px;
25+
cursor: pointer;
26+
display: none;
27+
}
28+
.card {
29+
width: 100%;
30+
height: 100%;
31+
position: relative;
32+
transform-style: preserve-3d;
33+
transition: transform 0.6s;
34+
border-radius: 15px;
35+
box-shadow: 0 6px 20px rgba(0,0,0,0.2);
36+
}
37+
.card.flipped {
38+
transform: rotateY(180deg);
39+
}
40+
.front, .back {
41+
position: absolute;
42+
width: 100%;
43+
height: 100%;
44+
backface-visibility: hidden;
45+
display: flex;
46+
align-items: center;
47+
justify-content: center;
48+
font-size: 22px;
49+
font-weight: bold;
50+
border-radius: 15px;
51+
background: #fff;
52+
padding: 15px;
53+
box-sizing: border-box;
54+
}
55+
.back {
56+
transform: rotateY(180deg);
57+
background: #ffe082;
58+
}
59+
button {
60+
margin: 8px;
61+
padding: 12px 18px;
62+
font-size: 14px;
63+
font-weight: bold;
64+
cursor: pointer;
65+
border: none;
66+
border-radius: 8px;
67+
background: #4cafef;
68+
color: white;
69+
box-shadow: 0 3px 6px rgba(0,0,0,0.2);
70+
transition: 0.2s ease;
71+
}
72+
button:hover {
73+
background: #2196f3;
74+
transform: scale(1.05);
75+
}
76+
#createForm {
77+
margin-top: 20px;
78+
display: none;
79+
background: rgba(255,255,255,0.9);
80+
padding: 15px;
81+
border-radius: 12px;
82+
width: 300px;
83+
margin-left: auto;
84+
margin-right: auto;
85+
box-shadow: 0 4px 10px rgba(0,0,0,0.2);
86+
}
87+
input {
88+
padding: 8px;
89+
margin: 6px;
90+
font-size: 14px;
91+
width: 85%;
92+
border-radius: 6px;
93+
border: 1px solid #ccc;
94+
}
95+
#quizSection {
96+
display: none;
97+
margin-top: 20px;
98+
background: rgba(255,255,255,0.9);
99+
padding: 20px;
100+
border-radius: 15px;
101+
width: 350px;
102+
margin-left: auto;
103+
margin-right: auto;
104+
box-shadow: 0 4px 15px rgba(0,0,0,0.25);
105+
}
106+
#quizQuestion {
107+
font-size: 20px;
108+
margin-bottom: 10px;
109+
}
110+
#result {
111+
margin-top: 12px;
112+
font-weight: bold;
113+
}
114+
#modeButtons {
115+
margin-bottom: 20px;
116+
}
117+
</style>
118+
</head>
119+
<body>
120+
<h1>📖 Flashcards + Quiz App</h1>
121+
122+
<div id="modeButtons">
123+
<button onclick="switchMode('flashcard')">Flashcard Mode</button>
124+
<button onclick="switchMode('quiz')">Quiz Mode</button>
125+
</div>
126+
127+
<!-- Flashcard Section -->
128+
<div class="flashcard" id="flashcardSection">
129+
<div class="card" id="card">
130+
<div class="front" id="front">Click "Next" to Start</div>
131+
<div class="back" id="back">Answer</div>
132+
</div>
133+
</div>
134+
<div id="flashButtons" style="display:none;">
135+
<button onclick="prevCard()">Previous</button>
136+
<button onclick="nextCard()">Next</button>
137+
<button onclick="toggleCreateForm()">➕ Add Card</button>
138+
<button onclick="shuffleCards()">🔀 Shuffle</button>
139+
</div>
140+
141+
<div id="createForm">
142+
<h3>Create New Flashcard</h3>
143+
<input type="text" id="newQuestion" placeholder="Enter question">
144+
<input type="text" id="newAnswer" placeholder="Enter answer">
145+
<button onclick="addCard()">Add</button>
146+
</div>
147+
148+
<!-- Quiz Section -->
149+
<div id="quizSection">
150+
<div id="quizQuestion">Press Next Question to Start!</div>
151+
<input type="text" id="quizAnswer" placeholder="Your answer">
152+
<button onclick="checkAnswer()">Submit</button>
153+
<button onclick="nextQuiz()">Next Question</button>
154+
<div id="result"></div>
155+
<p>Score: <span id="score">0</span></p>
156+
</div>
157+
158+
<script>
159+
let flashcards = [
160+
{ question: "What is the capital of France?", answer: "Paris" },
161+
{ question: "What is 2 + 2?", answer: "4" },
162+
{ question: "Who wrote Hamlet?", answer: "William Shakespeare" },
163+
{ question: "Largest planet in the solar system?", answer: "Jupiter" },
164+
{ question: "What is the chemical symbol for water?", answer: "H2O" },
165+
{ question: "Speed of light?", answer: "299,792 km/s" }
166+
];
167+
168+
let currentIndex = 0;
169+
let quizIndex = 0;
170+
let score = 0;
171+
172+
const card = document.getElementById("card");
173+
const front = document.getElementById("front");
174+
const back = document.getElementById("back");
175+
176+
function switchMode(mode) {
177+
document.getElementById("flashcardSection").style.display = "none";
178+
document.getElementById("flashButtons").style.display = "none";
179+
document.getElementById("createForm").style.display = "none";
180+
document.getElementById("quizSection").style.display = "none";
181+
182+
if (mode === "flashcard") {
183+
document.getElementById("flashcardSection").style.display = "block";
184+
document.getElementById("flashButtons").style.display = "block";
185+
showCard(currentIndex);
186+
} else {
187+
document.getElementById("quizSection").style.display = "block";
188+
nextQuiz();
189+
}
190+
}
191+
192+
function showCard(index) {
193+
const flashcard = flashcards[index];
194+
front.textContent = flashcard.question;
195+
back.textContent = flashcard.answer;
196+
card.classList.remove("flipped");
197+
}
198+
199+
function nextCard() {
200+
currentIndex = (currentIndex + 1) % flashcards.length;
201+
showCard(currentIndex);
202+
}
203+
204+
function prevCard() {
205+
currentIndex = (currentIndex - 1 + flashcards.length) % flashcards.length;
206+
showCard(currentIndex);
207+
}
208+
209+
card.addEventListener("click", () => {
210+
card.classList.toggle("flipped");
211+
});
212+
213+
function toggleCreateForm() {
214+
const form = document.getElementById("createForm");
215+
form.style.display = form.style.display === "none" ? "block" : "none";
216+
}
217+
218+
function addCard() {
219+
const question = document.getElementById("newQuestion").value.trim();
220+
const answer = document.getElementById("newAnswer").value.trim();
221+
if (question && answer) {
222+
flashcards.push({ question, answer });
223+
document.getElementById("newQuestion").value = "";
224+
document.getElementById("newAnswer").value = "";
225+
alert("✅ Flashcard added!");
226+
} else {
227+
alert("⚠️ Please enter both question and answer.");
228+
}
229+
}
230+
231+
function shuffleCards() {
232+
flashcards.sort(() => Math.random() - 0.5);
233+
currentIndex = 0;
234+
showCard(currentIndex);
235+
alert("🔀 Flashcards shuffled!");
236+
}
237+
238+
function nextQuiz() {
239+
quizIndex = Math.floor(Math.random() * flashcards.length);
240+
document.getElementById("quizQuestion").textContent = flashcards[quizIndex].question;
241+
document.getElementById("quizAnswer").value = "";
242+
document.getElementById("result").textContent = "";
243+
}
244+
245+
function checkAnswer() {
246+
const userAnswer = document.getElementById("quizAnswer").value.trim();
247+
const correctAnswer = flashcards[quizIndex].answer;
248+
249+
if (userAnswer.toLowerCase() === correctAnswer.toLowerCase()) {
250+
document.getElementById("result").textContent = "✅ Correct!";
251+
score++;
252+
} else {
253+
document.getElementById("result").textContent = `❌ Wrong! Correct: ${correctAnswer}`;
254+
}
255+
document.getElementById("score").textContent = score;
256+
}
257+
</script>
258+
</body>
259+
</html>

0 commit comments

Comments
 (0)