Introduction to Computer Science (Ages 6-8)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alphabet Flashcards</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
flex-wrap: wrap;
justify-content: center;
padding: 20px;
background-color: #f0f0f0;
}
.flashcard {
width: 200px;
height: 300px;
border: 2px solid #333;
border-radius: 10px;
margin: 10px;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
transition: transform 0.5s;
cursor: pointer;
background-color: #fff;
}
.flashcard:hover {
transform: scale(1.1);
}
.letter {
font-size: 48px;
font-weight: bold;
margin-bottom: 20px;
}
.word {
font-size: 24px;
margin-bottom: 10px;
}
.translation {
font-size: 20px;
color: #555;
margin-bottom: 10px;
}
.image {
width: 80px;
height: 80px;
background-color: #ddd;
display: flex;
justify-content: center;
align-items: center;
border-radius: 5px;
overflow: hidden;
}
.image img {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<div class="flashcard" onclick="speak('A for Apple', 'सेब')">
<div class="letter">A</div>
<div class="word">Apple</div>
<div class="translation">सेब</div>
<div class="image"><img src="https://via.placeholder.com/80?text=Apple" alt="Apple"></div>
</div>
<div class="flashcard" onclick="speak('B for Ball', 'गेंद')">
<div class="letter">B</div>
<div class="word">Ball</div>
<div class="translation">गेंद</div>
<div class="image"><img src="https://via.placeholder.com/80?text=Ball" alt="Ball"></div>
</div>
<div class="flashcard" onclick="speak('C for Cat', 'बिल्ली')">
<div class="letter">C</div>
<div class="word">Cat</div>
<div class="translation">बिल्ली</div>
<div class="image"><img src="https://via.placeholder.com/80?text=Cat" alt="Cat"></div>
</div>
<div class="flashcard" onclick="speak('D for Dog', 'कुत्ता')">
<div class="letter">D</div>
<div class="word">Dog</div>
<div class="translation">कुत्ता</div>
<div class="image"><img src="https://via.placeholder.com/80?text=Dog" alt="Dog"></div>
</div>
<div class="flashcard" onclick="speak('E for Elephant', 'हाथी')">
<div class="letter">E</div>
<div class="word">Elephant</div>
<div class="translation">हाथी</div>
<div class="image"><img src="https://via.placeholder.com/80?text=Elephant" alt="Elephant"></div>
</div>
<div class="flashcard" onclick="speak('F for Fish', 'मछली')">
<div class="letter">F</div>
<div class="word">Fish</div>
<div class="translation">मछली</div>
<div class="image"><img src="https://via.placeholder.com/80?text=Fish" alt="Fish"></div>
</div>
<div class="flashcard" onclick="speak('G for Grapes', 'अंगूर')">
<div class="letter">G</div>
<div class="word">Grapes</div>
<div class="translation">अंगूर</div>
<div class="image"><img src="https://via.placeholder.com/80?text=Grapes" alt="Grapes"></div>
</div>
<div class="flashcard" onclick="speak('H for Hat', 'टोपी')">
<div class="letter">H</div>
<div class="word">Hat</div>
<div class="translation">टोपी</div>
<div class="image"><img src="https://via.placeholder.com/80?text=Hat" alt="Hat"></div>
</div>
<div class="flashcard" onclick="speak('I for Ice cream', 'आइसक्रीम')">
<div class="letter">I</div>
<div class="word">Ice cream</div>
<div class="translation">आइसक्रीम</div>
<div class="image"><img src="https://via.placeholder.com/80?text=Ice+cream" alt="Ice cream"></div>
</div>
<div class="flashcard" onclick="speak('J for Juice', 'रस')">
<div class="letter">J</div>
<div class="word">Juice</div>
<div class="translation">रस</div>
<div class="image"><img src="https://via.placeholder.com/80?text=Juice" alt="Juice"></div>
</div>
<div class="flashcard" onclick="speak('K for Kite', 'पतंग')">
<div class="letter">K</div>
<div class="word">Kite</div>
<div class="translation">पतंग</div>
<div class="image"><img src="https://via.placeholder.com/80?text=Kite" alt="Kite"></div>
</div>
<div class="flashcard" onclick="speak('L for Lion', 'शेर')">
<div class="letter">L</div>
<div class="word">Lion</div>
<div class="translation">शेर</div>
<div class="image"><img src="https://via.placeholder.com/80?text=Lion" alt="Lion"></div>
</div>
<div class="flashcard" onclick="speak('M for Mango', 'आम')">
<div class="letter">M</div>
<div class="word">Mango</div>
<div class="translation">आम</div>
<div class="image"><img src="https://via.placeholder.com/80?text=Mango" alt="Mango"></div>
</div>
<div class="flashcard" onclick="speak('N for Nest', 'घोंसला')">
<div class="letter">N</div>
<div class="word">Nest</div>
<div class="translation">घोंसला</div>
<div class="image"><img src="https://via.placeholder.com/80?text=Nest" alt="Nest"></div>
</div>
<div class="flashcard" onclick="speak('O for Orange', 'संतरा')">
<div class="letter">O</div>
<div class="word">Orange</div>
<div class="translation">संतरा</div>
<div class="image"><img src="https://via.placeholder.com/80?text=Orange" alt="Orange"></div>
</div>
<div class="flashcard" onclick="speak('P for Parrot', 'तोता')">
<div class="letter">P</div>
<div class="word">Parrot</div>
<div class="translation">तोता</div>
<div class="image"><img src="https://via.placeholder.com/80?text=Parrot" alt="Parrot"></div>
</div>
<div class="flashcard" onclick="speak('Q for Queen', 'रानी')">
<div class="letter">Q</div>
<div class="word">Queen</div>
<div class="translation">रानी</div>
<div class="image"><img src="https://via.placeholder.com/80?text=Queen" alt="Queen"></div>
</div>
<div class="flashcard" onclick="speak('R for Rabbit', 'खरगोश')">
<div class="letter">R</div>
<div class="word">Rabbit</div>
<div class="translation">खरगोश</div>
<div class="image"><img src="https://via.placeholder.com/80?text=Rabbit" alt="Rabbit"></div>
</div>
<div class="flashcard" onclick="speak('S for Sun', 'सूरज')">
<div class="letter">S</div>
<div class="word">Sun</div>
<div class="translation">सूरज</div>
<div class="image"><img src="https://via.placeholder.com/80?text=Sun" alt="Sun"></div>
</div>
<div class="flashcard" onclick="speak('T for Tiger', 'बाघ')">
<div class="letter">T</div>
<div class="word">Tiger</div>
<div class="translation">बाघ</div>
<div class="image"><img src="https://via.placeholder.com/80?text=Tiger" alt="Tiger"></div>
</div>
<div class="flashcard" onclick="speak('U for Umbrella', 'छाता')">
<div class="letter">U</div>
<div class="word">Umbrella</div>
<div class="translation">छाता</div>
<div class="image"><img src="https://via.placeholder.com/80?text=Umbrella" alt="Umbrella"></div>
</div>
<div class="flashcard" onclick="speak('V for Van', 'वैन')">
<div class="letter">V</div>
<div class="word">Van</div>
<div class="translation">वैन</div>
<div class="image"><img src="https://via.placeholder.com/80?text=Van" alt="Van"></div>
</div>
<div class="flashcard" onclick="speak('W for Watch', 'घड़ी')">
<div class="letter">W</div>
<div class="word">Watch</div>
<div class="translation">घड़ी</div>
<div class="image"><img src="https://via.placeholder.com/80?text=Watch" alt="Watch"></div>
</div>
<div class="flashcard" onclick="speak('X for Xylophone', 'झंकार')">
<div class="letter">X</div>
<div class="word">Xylophone</div>
<div class="translation">झंकार</div>
<div class="image"><img src="https://via.placeholder.com/80?text=Xylophone" alt="Xylophone"></div>
</div>
<div class="flashcard" onclick="speak('Y for Yogurt', 'दही')">
<div class="letter">Y</div>
<div class="word">Yogurt</div>
<div class="translation">दही</div>
<div class="image"><img src="https://via.placeholder.com/80?text=Yogurt" alt="Yogurt"></div>
</div>
<div class="flashcard" onclick="speak('Z for Zebra', 'ज़ेबरा')">
<div class="letter">Z</div>
<div class="word">Zebra</div>
<div class="translation">ज़ेबरा</div>
<div class="image"><img src="https://via.placeholder.com/80?text=Zebra" alt="Zebra"></div>
</div>
<script defer>
function speak(englishWord, hindiWord) {
var synth = window.speechSynthesis;
var voices = synth.getVoices();
if (voices.length) {
var englishVoice = voices.find(voice => voice.lang === 'en-IN' && voice.name.includes('female'));
var hindiVoice = voices.find(voice => voice.lang === 'hi-IN' && voice.name.includes('female'));
var speakEnglish = new SpeechSynthesisUtterance(englishWord);
speakEnglish.voice = englishVoice || voices.find(voice => voice.lang === 'en-US');
var speakHindi = new SpeechSynthesisUtterance(hindiWord);
speakHindi.voice = hindiVoice || voices.find(voice => voice.lang === 'hi-IN');
synth.speak(speakEnglish);
synth.speak(speakHindi);
}
}
window.speechSynthesis.onvoiceschanged = function() {
// Reassign voices once they are loaded
var voices = speechSynthesis.getVoices();
};
</script>
</body>
</html>
There are no comments for now.