Eğlenceli Öğrenme Etkinlikleri
Merhaba Minik Kaşif! 🚀
Seni harika öğrenme etkinlikleriyle dolu bir maceraya davet ediyoruz! Burada ülkeleri, bayrakları, okul derslerini ve daha fazlasını eğlenerek öğreneceksin.
Her doğru cevapta puan kazanacak ve sonunda ne kadar başarılı olduğunu göreceğiz!
Maceraya Başla!
Etkinlik 1: Ülkeleri Bayraklarla Eşleştir 🌍
Aşağıdaki ülkeleri doğru bayraklarla eşleştir!
Cevapları Kontrol Et
Geri
Sonraki
Etkinlik 2: Okul Derslerini Görsellerle Eşleştir 🏫
Okul derslerini temsil eden görsellerle eşleştir!
Cevapları Kontrol Et
Geri
Sonraki
Etkinlik 3: Kelimeleri Grupla - Bölüm 1 📝
Aşağıdaki kelimeleri doğru kategoriye (Ülkeler veya Milliyetler) sürükle!
Cevapları Kontrol Et
Geri
Sonraki
Etkinlik 3: Kelimeleri Grupla - Bölüm 2 📝
Şimdi de aşağıdaki kelimeleri 'Okul Dersleri' kategorisine sürükle!
Cevapları Kontrol Et
Geri
Sonraki
Etkinlik 4: Cümle Yarım Kalanları Eşleştir 🔗
Cümlelerin ilk yarısını doğru son yarısıyla eşleştir!
Cevapları Kontrol Et
Geri
Sonraki
Etkinlik 5: Soruları Cevaplarla Eşleştir ❓
Soruları doğru cevaplarla eşleştir!
Cevapları Kontrol Et
Geri
Bitir
Tebrikler! 🎉
Tüm etkinlikleri başarıyla tamamladın!
Toplam Puanın: 0
Harika bir iş çıkardın! Yeni şeyler öğrenmeye devam et!
Yeniden Başla
body {
font-family: 'Arial', sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(to right top, #a1c4fd, #c2e9fb); /* Soft gradient background */
margin: 0;
padding: 20px;
box-sizing: border-box;
color: #333;
}
.container {
background-color: #ffffff;
border-radius: 25px;
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
padding: 30px;
max-width: 700px;
width: 100%;
text-align: center;
position: relative;
overflow: hidden;
min-height: 500px; /* Ensure enough height for content */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.screen {
display: none;
width: 100%;
animation: fadeIn 0.5s ease-in-out;
}
.screen.active {
display: block;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
h1, h2 {
color: #4CAF50; /* Green for headings */
margin-bottom: 20px;
font-size: 2.2em;
font-weight: bold;
text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}
h2 {
font-size: 1.8em;
color: #FFC107; /* Amber for activity titles */
}
p {
font-size: 1.1em;
line-height: 1.6;
margin-bottom: 15px;
color: #555;
}
button {
background-color: #8BC34A; /* Light green for buttons */
color: white;
border: none;
padding: 12px 25px;
border-radius: 30px;
font-size: 1.1em;
cursor: pointer;
transition: background-color 0.3s ease, transform 0.2s ease;
margin: 10px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
button:hover {
background-color: #689F38; /* Darker green on hover */
transform: translateY(-2px);
}
.nav-buttons {
margin-top: 30px;
display: flex;
justify-content: space-between;
width: 100%;
padding: 0 10px;
}
.nav-buttons button {
flex: 1;
margin: 0 5px;
}
.check-button {
background-color: #2196F3; /* Blue for check button */
}
.check-button:hover {
background-color: #1976D2;
}
.feedback {
margin-top: 20px;
padding: 10px;
border-radius: 10px;
font-weight: bold;
font-size: 1.1em;
min-height: 40px; /* Reserve space for feedback */
display: flex;
justify-content: center;
align-items: center;
}
.feedback.correct {
background-color: #e8f5e9; /* Light green for correct */
color: #4CAF50;
}
.feedback.incorrect {
background-color: #ffebee; /* Light red for incorrect */
color: #F44336;
}
.score-display {
font-size: 1.5em;
font-weight: bold;
color: #FF5722; /* Orange for score */
margin-top: 20px;
animation: bounceIn 0.8s ease-out;
}
@keyframes bounceIn {
0% { transform: scale(0.3); opacity: 0; }
50% { transform: scale(1.1); opacity: 1; }
70% { transform: scale(0.9); }
100% { transform: scale(1); }
}
/* Matching Activity Styles */
.matching-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
margin-top: 20px;
}
.match-item {
background-color: #f0f8ff;
border: 2px solid #b3e0ff;
border-radius: 15px;
padding: 15px;
width: 150px;
text-align: center;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
box-shadow: 0 4px 8px rgba(0,0,0,0.05);
}
.match-item.selected {
border-color: #FFC107;
box-shadow: 0 0 15px rgba(255, 193, 7, 0.5);
transform: scale(1.05);
}
.match-item.correct-match {
background-color: #e8f5e9;
border-color: #4CAF50;
box-shadow: 0 0 15px rgba(76, 175, 80, 0.5);
pointer-events: none; /* Disable after correct match */
}
.match-item.incorrect-match {
background-color: #ffebee;
border-color: #F44336;
animation: shake 0.5s;
}
@keyframes shake {
0%, 100% { transform: translateX(0); }
20%, 60% { transform: translateX(-5px); }
40%, 80% { transform: translateX(5px); }
}
.match-item img {
max-width: 80px;
height: auto;
margin-bottom: 10px;
border-radius: 5px;
}
/* Grouping Activity Styles (Mimicking drag and drop visually, but using click for selection) */
.grouping-container {
display: flex;
justify-content: center;
gap: 20px;
margin-top: 20px;
flex-wrap: wrap;
}
.category-box {
background-color: #e0f2f7;
border: 2px dashed #90CAF9;
border-radius: 15px;
padding: 15px;
min-height: 150px;
width: 250px;
display: flex;
flex-direction: column;
align-items: center;
box-shadow: 0 4px 8px rgba(0,0,0,0.05);
}
.category-box h3 {
color: #2196F3;
margin-bottom: 15px;
}
.drop-zone {
width: 90%;
min-height: 80px; /* Space for dropped items */
border: 1px solid #ccc;
border-radius: 8px;
background-color: #f8f8f8;
padding: 10px;
display: flex;
flex-wrap: wrap;
gap: 5px;
align-items: flex-start;
justify-content: flex-start;
}
.grouped-item {
background-color: #bbdefb;
color: #1976D2;
padding: 8px 12px;
border-radius: 20px;
margin: 5px;
font-size: 0.9em;
white-space: nowrap;
display: inline-block;
cursor: pointer;
transition: background-color 0.2s ease;
}
.grouped-item.correct {
background-color: #c8e6c9;
color: #388e3c;
}
.grouped-item.incorrect {
background-color: #ffcdd2;
color: #d32f2f;
}
.words-to-group {
margin-top: 30px;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
padding: 10px;
border: 1px solid #eee;
border-radius: 10px;
background-color: #fdfdfd;
}
.group-word {
background-color: #fff9c4;
border: 1px solid #ffeb3b;
padding: 10px 15px;
border-radius: 25px;
cursor: pointer;
transition: transform 0.2s ease, background-color 0.2s ease;
font-weight: bold;
color: #795548;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.group-word.selected {
background-color: #FFEB3B;
border-color: #FFA000;
transform: translateY(-3px);
}
.group-word.placed {
display: none; /* Hide words once placed */
}
/* Responsive adjustments */
@media (max-width: 600px) {
.container {
padding: 15px;
min-height: auto;
}
h1 {
font-size: 1.8em;
}
h2 {
font-size: 1.5em;
}
button {
padding: 10px 20px;
font-size: 1em;
}
.nav-buttons {
flex-direction: column;
gap: 10px;
}
.nav-buttons button {
margin: 0;
}
.matching-container, .grouping-container {
flex-direction: column;
align-items: center;
}
.match-item, .category-box {
width: 90%;
max-width: 300px;
}
.words-to-group {
flex-direction: row;
justify-content: center;
gap: 8px;
}
}
let currentScreen = 'welcomeScreen';
let totalScore = 0;
let studentAnswers = {}; // To store selected answers for checking
let matchedPairs = {}; // To store successfully matched pairs to prevent re-matching
let currentGroupingSelection = null; // For grouping activity
// Data for activities
const activityData = {
activity1: { // Match the Countries with the Flags
items: [
{ id: 'britain', type: 'text', value: 'Britain', matchId: 'flag_britain' },
{ id: 'flag_britain', type: 'image', value: 'https://cdn.jsdelivr.net/gh/hampusborgos/country-flags@main/svg/gb.svg', matchId: 'britain' }, // Placeholder URL
{ id: 'france', type: 'text', value: 'France', matchId: 'flag_france' },
{ id: 'flag_france', type: 'image', value: 'https://cdn.jsdelivr.net/gh/hampusborgos/country-flags@main/svg/fr.svg', matchId: 'france' },
{ id: 'russia', type: 'text', value: 'Russia', matchId: 'flag_russia' },
{ id: 'flag_russia', type: 'image', value: 'https://cdn.jsdelivr.net/gh/hampusborgos/country-flags@main/svg/ru.svg', matchId: 'russia' },
{ id: 'germany', type: 'text', value: 'Germany', matchId: 'flag_germany' },
{ id: 'flag_germany', type: 'image', value: 'https://cdn.jsdelivr.net/gh/hampusborgos/country-flags@main/svg/de.svg', matchId: 'germany' },
{ id: 'china', type: 'text', value: 'China', matchId: 'flag_china' },
{ id: 'flag_china', type: 'image', value: 'https://cdn.jsdelivr.net/gh/hampusborgos/country-flags@main/svg/cn.svg', matchId: 'china' },
{ id: 'japan', type: 'text', value: 'Japan', matchId: 'flag_japan' },
{ id: 'flag_japan', type: 'image', value: 'https://cdn.jsdelivr.net/gh/hampusborgos/country-flags@main/svg/jp.svg', matchId: 'japan' },
{ id: 'italy', type: 'text', value: 'Italy', matchId: 'flag_italy' },
{ id: 'flag_italy', type: 'image', value: 'https://cdn.jsdelivr.net/gh/hampusborgos/country-flags@main/svg/it.svg', matchId: 'italy' },
{ id: 'usa', type: 'text', value: 'USA', matchId: 'flag_usa' },
{ id: 'flag_usa', type: 'image', value: 'https://cdn.jsdelivr.net/gh/hampusborgos/country-flags@main/svg/us.svg', matchId: 'usa' },
{ id: 'egypt', type: 'text', value: 'Egypt', matchId: 'flag_egypt' },
{ id: 'flag_egypt', type: 'image', value: 'https://cdn.jsdelivr.net/gh/hampusborgos/country-flags@main/svg/eg.svg', matchId: 'egypt' },
{ id: 'turkiye', type: 'text', value: 'Türkiye', matchId: 'flag_turkiye' },
{ id: 'flag_turkiye', type: 'image', value: 'https://cdn.jsdelivr.net/gh/hampusborgos/country-flags@main/svg/tr.svg', matchId: 'turkiye' },
{ id: 'australia', type: 'text', value: 'Australia', matchId: 'flag_australia' },
{ id: 'flag_australia', type: 'image', value: 'https://cdn.jsdelivr.net/gh/hampusborgos/country-flags@main/svg/au.svg', matchId: 'australia' },
{ id: 'spain', type: 'text', value: 'Spain', matchId: 'flag_spain' },
{ id: 'flag_spain', type: 'image', value: 'https://cdn.jsdelivr.net/gh/hampusborgos/country-flags@main/svg/es.svg', matchId: 'spain' },
]
},
activity2: { // Match the School Subjects with the Images
items: [
{ id: 'math', type: 'text', value: 'Math', matchId: 'img_math' },
{ id: 'img_math', type: 'image', value: 'https://img.icons8.com/plasticine/100/calculator.png', matchId: 'math' }, // Placeholder URL
{ id: 'pe', type: 'text', value: 'Physical education', matchId: 'img_pe' },
{ id: 'img_pe', type: 'image', value: 'https://img.icons8.com/plasticine/100/running.png', matchId: 'pe' },
{ id: 'history', type: 'text', value: 'History', matchId: 'img_history' },
{ id: 'img_history', type: 'image', value: 'https://img.icons8.com/plasticine/100/ancient-greece.png', matchId: 'history' },
{ id: 'music', type: 'text', value: 'Music', matchId: 'img_music' },
{ id: 'img_music', type: 'image', value: 'https://img.icons8.com/plasticine/100/musical-note.png', matchId: 'music' },
{ id: 'geography', type: 'text', value: 'Geography', matchId: 'img_geography' },
{ id: 'img_geography', type: 'image', value: 'https://img.icons8.com/plasticine/100/globe.png', matchId: 'geography' },
{ id: 'language', type: 'text', value: 'Language class', matchId: 'img_language' },
{ id: 'img_language', type: 'image', value: 'https://img.icons8.com/plasticine/100/speech-bubble.png', matchId: 'language' },
{ id: 'it', type: 'text', value: 'I.T.', matchId: 'img_it' },
{ id: 'img_it', type: 'image', value: 'https://img.icons8.com/plasticine/100/laptop.png', matchId: 'it' },
{ id: 'art', type: 'text', value: 'Art', matchId: 'img_art' },
{ id: 'img_art', type: 'image', value: 'https://img.icons8.com/plasticine/100/paint-palette.png', matchId: 'art' },
{ id: 'science', type: 'text', value: 'Science', matchId: 'img_science' },
{ id: 'img_science', type: 'image', value: 'https://img.icons8.com/plasticine/100/microscope.png', matchId: 'science' },
{ id: 'social_studies', type: 'text', value: 'Social studies', matchId: 'img_social_studies' },
{ id: 'img_social_studies', type: 'image', value: 'https://img.icons8.com/plasticine/100/group-of-people.png', matchId: 'social_studies' },
]
},
activity3: { // Group the Words
part1: {
words: [
{ word: 'Britain', category: 'countries' }, { word: 'France', category: 'countries' },
{ word: 'Russia', category: 'countries' }, { word: 'Germany', category: 'countries' },
{ word: 'China', category: 'countries' }, { word: 'Japan', category: 'countries' },
{ word: 'Italy', category: 'countries' }, { word: 'USA', category: 'countries' },
{ word: 'Egypt', category: 'countries' }, { word: 'Türkiye', category: 'countries' },
{ word: 'Australia', category: 'countries' }, { word: 'Spain', category: 'countries' },
{ word: 'British', category: 'nationalities' }, { word: 'French', category: 'nationalities' },
{ word: 'Russian', category: 'nationalities' }, { word: 'German', category: 'nationalities' },
{ word: 'Chinese', category: 'nationalities' }, { word: 'Japanese', category: 'nationalities' },
{ word: 'Italian', category: 'nationalities' }, { word: 'American', category: 'nationalities' },
{ word: 'Egyptian', category: 'nationalities' }, { word: 'Turkish', category: 'nationalities' },
{ word: 'Australian', category: 'nationalities' }, { word: 'Spanish', category: 'nationalities' },
]
},
part2: {
words: [
{ word: 'Math', category: 'schoolSubjects' }, { word: 'Physical Education', category: 'schoolSubjects' },
{ word: 'Science', category: 'schoolSubjects' }, { word: 'History', category: 'schoolSubjects' },
{ word: 'Geography', category: 'schoolSubjects' }, { word: 'Art', category: 'schoolSubjects' },
{ word: 'Music', category: 'schoolSubjects' }, { word: 'I.T.', category: 'schoolSubjects' },
{ word: 'Social Studies', category: 'schoolSubjects' }, { word: 'Language Class', category: 'schoolSubjects' },
]
}
},
activity4: { // Match Sentence Halves
items: [
{ id: 'sentence4_1_part1', type: 'text', value: 'I\'m good at drawing pictures', matchId: 'sentence4_1_part2' },
{ id: 'sentence4_1_part2', type: 'text', value: 'So I\'m good at Art class', matchId: 'sentence4_1_part1' },
{ id: 'sentence4_2_part1', type: 'text', value: 'I like solving problems', matchId: 'sentence4_2_part2' },
{ id: 'sentence4_2_part2', type: 'text', value: 'So my favorite class is Math', matchId: 'sentence4_2_part1' },
{ id: 'sentence4_3_part1', type: 'text', value: 'I like acting in plays', matchId: 'sentence4_3_part2' },
{ id: 'sentence4_3_part2', type: 'text', value: 'So I like Drama', matchId: 'sentence4_3_part1' },
{ id: 'sentence4_4_part1', type: 'text', value: 'I’m very good at computers', matchId: 'sentence4_4_part2' },
{ id: 'sentence4_4_part2', type: 'text', value: 'So my favorite class is I.T.', matchId: 'sentence4_4_part1' },
{ id: 'sentence4_5_part1', type: 'text', value: 'I love doing sports', matchId: 'sentence4_5_part2' },
{ id: 'sentence4_5_part2', type: 'text', value: 'So I’m good at P.E. class', matchId: 'sentence4_5_part1' },
]
},
activity5: { // Match Questions with Answers
items: [
{ id: 'q5_1_q', type: 'text', value: '“Where are you from?”', matchId: 'q5_1_a' },
{ id: 'q5_1_a', type: 'text', value: '“I’m from the United States.”', matchId: 'q5_1_q' },
{ id: 'q5_2_q', type: 'text', value: '“How old are you?”', matchId: 'q5_2_a' },
{ id: 'q5_2_a', type: 'text', value: '“I’m eleven years old.”', matchId: 'q5_2_q' },
{ id: 'q5_3_q', type: 'text', value: '“What time does your school start?”', matchId: 'q5_3_a' },
{ id: 'q5_3_a', type: 'text', value: '“It starts at half past eight.”', matchId: 'q5_3_q' },
{ id: 'q5_4_q', type: 'text', value: '“Do you speak Turkish?”', matchId: 'q5_4_a' },
{ id: 'q5_4_a', type: 'text', value: '“Yes, I do.”', matchId: 'q5_4_q' },
]
}
};
function showScreen(screenId) {
document.querySelectorAll('.screen').forEach(screen => {
screen.classList.remove('active');
});
document.getElementById(screenId).classList.add('active');
currentScreen = screenId;
resetFeedback(screenId); // Clear feedback when changing screen
clearSelections(screenId); // Clear selections on new screen load
studentAnswers = {}; // Reset student answers for the new screen
matchedPairs = {}; // Reset matched pairs for the new screen
}
function startGame() {
totalScore = 0;
loadActivity1();
showScreen('activity1');
}
function nextActivity(nextScreenId) {
if (nextScreenId === 'activity2') loadActivity2();
if (nextScreenId === 'activity3_part1') loadActivity3Part1();
if (nextScreenId === 'activity3_part2') loadActivity3Part2();
if (nextScreenId === 'activity4') loadActivity4();
if (nextScreenId === 'activity5') loadActivity5();
showScreen(nextScreenId);
}
function previousActivity(prevScreenId) {
showScreen(prevScreenId);
}
function showSuccessScreen() {
document.getElementById('finalScore').textContent = totalScore;
showScreen('successScreen');
}
function restartGame() {
totalScore = 0;
studentAnswers = {};
matchedPairs = {};
currentGroupingSelection = null;
document.querySelectorAll('.grouped-item').forEach(el => el.remove()); // Clear placed words
startGame();
}
function shuffleArray(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
return array;
}
function resetFeedback(screenId) {
const feedbackElement = document.getElementById(`feedback${screenId.replace('activity', '').replace('_part1', '_1').replace('_part2', '_2')}`);
if (feedbackElement) {
feedbackElement.textContent = '';
feedbackElement.classList.remove('correct', 'incorrect');
}
}
function giveFeedback(screenId, isCorrect, message) {
const feedbackElement = document.getElementById(`feedback${screenId.replace('activity', '').replace('_part1', '_1').replace('_part2', '_2')}`);
if (feedbackElement) {
feedbackElement.textContent = message;
feedbackElement.classList.remove('correct', 'incorrect');
feedbackElement.classList.add(isCorrect ? 'correct' : 'incorrect');
}
}
function clearSelections(screenId) {
document.querySelectorAll(`#${screenId} .match-item.selected`).forEach(item => {
item.classList.remove('selected');
});
// For grouping activity, also clear selections
if (screenId.startsWith('activity3')) {
document.querySelectorAll(`#${screenId} .group-word.selected`).forEach(item => {
item.classList.remove('selected');
});
currentGroupingSelection = null;
}
}
// Universal matching logic
let firstSelection = null;
function handleMatchSelection(itemElement, screenId) {
const itemId = itemElement.dataset.id;
if (itemElement.classList.contains('correct-match')) {
// Already correctly matched, do nothing
return;
}
if (firstSelection === null) {
firstSelection = { element: itemElement, id: itemId };
itemElement.classList.add('selected');
} else {
// Second selection
const secondSelection = { element: itemElement, id: itemId };
// Deselect if clicking the same item twice
if (firstSelection.id === secondSelection.id) {
firstSelection.element.classList.remove('selected');
firstSelection = null;
return;
}
// Check if they are a match
const data = activityData[screenId].items;
const firstItem = data.find(item => item.id === firstSelection.id);
const secondItem = data.find(item => item.id === secondSelection.id);
if (firstItem && secondItem && firstItem.matchId === secondItem.id && secondItem.matchId === firstItem.id) {
// Correct match!
firstSelection.element.classList.add('correct-match');
secondSelection.element.classList.add('correct-match');
firstSelection.element.classList.remove('selected');
secondSelection.element.classList.remove('selected');
giveFeedback(screenId, true, 'Doğru eşleşme! Harika! 👍');
totalScore += 10; // Award points for correct match
matchedPairs[`${firstSelection.id}-${secondSelection.id}`] = true;
matchedPairs[`${secondSelection.id}-${firstSelection.id}`] = true;
} else {
// Incorrect match
firstSelection.element.classList.add('incorrect-match');
secondSelection.element.classList.add('incorrect-match');
giveFeedback(screenId, false, 'Yanlış eşleşme. Tekrar dene! 🤔');
setTimeout(() => {
firstSelection.element.classList.remove('selected', 'incorrect-match');
secondSelection.element.classList.remove('selected', 'incorrect-match');
resetFeedback(screenId);
}, 800);
}
firstSelection = null; // Reset for next pair
}
}
// --- Activity 1: Match Countries with Flags ---
function loadActivity1() {
const container = document.getElementById('flagMatchingContainer');
container.innerHTML = ''; // Clear previous items
const items = shuffleArray([...activityData.activity1.items]);
items.forEach(item => {
const itemDiv = document.createElement('div');
itemDiv.classList.add('match-item');
itemDiv.dataset.id = item.id;
itemDiv.dataset.matchId = item.matchId;
if (item.type === 'text') {
itemDiv.textContent = item.value;
} else if (item.type === 'image') {
const img = document.createElement('img');
img.src = item.value;
img.alt = item.id;
itemDiv.appendChild(img);
}
itemDiv.onclick = () => handleMatchSelection(itemDiv, 'activity1');
container.appendChild(itemDiv);
});
matchedPairs = {}; // Reset for activity
resetFeedback('activity1');
}
function checkFlagMatching() {
const allItems = activityData.activity1.items.length / 2; // Number of actual pairs
const currentMatches = Object.keys(matchedPairs).filter(key => key.includes('-') && matchedPairs[key]).length / 2; // Count unique pairs
if (currentMatches === allItems) {
giveFeedback('activity1', true, 'Tüm eşleşmeler doğru! Bravo! 🎉');
} else {
giveFeedback('activity1', false, 'Bazı eşleşmeler eksik veya yanlış. Kontrol etmeyi unutma! 🧐');
}
}
// --- Activity 2: Match School Subjects with Images ---
function loadActivity2() {
const container = document.getElementById('subjectMatchingContainer');
container.innerHTML = ''; // Clear previous items
const items = shuffleArray([...activityData.activity2.items]);
items.forEach(item => {
const itemDiv = document.createElement('div');
itemDiv.classList.add('match-item');
itemDiv.dataset.id = item.id;
itemDiv.dataset.matchId = item.matchId;
if (item.type === 'text') {
itemDiv.textContent = item.value;
} else if (item.type === 'image') {
const img = document.createElement('img');
img.src = item.value;
img.alt = item.id;
itemDiv.appendChild(img);
}
itemDiv.onclick = () => handleMatchSelection(itemDiv, 'activity2');
container.appendChild(itemDiv);
});
matchedPairs = {}; // Reset for activity
resetFeedback('activity2');
}
function checkSubjectMatching() {
const allItems = activityData.activity2.items.length / 2;
const currentMatches = Object.keys(matchedPairs).filter(key => key.includes('-') && matchedPairs[key]).length / 2;
if (currentMatches === allItems) {
giveFeedback('activity2', true, 'Harika iş! Tüm dersleri doğru eşleştirdin! 🤩');
} else {
giveFeedback('activity2', false, 'Bazı eşleşmeler eksik. Biraz daha gayret! 💪');
}
}
// --- Activity 3: Group the Words - Part 1 ---
function loadActivity3Part1() {
const wordsContainer = document.getElementById('wordsToGroup1');
wordsContainer.innerHTML = ''; // Clear previous words
const words = shuffleArray([...activityData.activity3.part1.words]);
words.forEach(wordData => {
const wordDiv = document.createElement('div');
wordDiv.classList.add('group-word');
wordDiv.textContent = wordData.word;
wordDiv.dataset.category = wordData.category;
wordDiv.onclick = () => handleGroupingSelection(wordDiv, 'activity3_part1');
wordsContainer.appendChild(wordDiv);
});
// Clear drop zones and placed items from previous attempt
document.querySelectorAll('#activity3_part1 .drop-zone').forEach(zone => {
zone.innerHTML = '';
});
studentAnswers['activity3_part1'] = {}; // Reset student answers for this part
currentGroupingSelection = null;
resetFeedback('activity3_part1');
}
function handleGroupingSelection(wordElement, screenId) {
// Clear previous selection
if (currentGroupingSelection) {
currentGroupingSelection.classList.remove('selected');
}
currentGroupingSelection = wordElement;
currentGroupingSelection.classList.add('selected');
// Make category boxes clickable to "drop" the selected word
document.querySelectorAll(`#${screenId} .category-box`).forEach(box => {
box.onclick = () => {
const dropZone = box.querySelector('.drop-zone');
if (currentGroupingSelection && !currentGroupingSelection.classList.contains('placed')) {
const placedWord = currentGroupingSelection.cloneNode(true);
placedWord.classList.remove('selected');
placedWord.classList.add('grouped-item');
placedWord.onclick = () => removeGroupedItem(placedWord, screenId); // Allow removal
dropZone.appendChild(placedWord);
currentGroupingSelection.classList.add('placed'); // Mark original as placed
studentAnswers[screenId][placedWord.textContent] = dropZone.dataset.category;
currentGroupingSelection = null;
resetFeedback(screenId); // Clear feedback
}
};
});
}
function removeGroupedItem(itemElement, screenId) {
const originalWord = document.querySelector(`#${screenId} .group-word[data-category="${itemElement.dataset.category}"][data-text="${itemElement.textContent}"]`);
if (originalWord) {
originalWord.classList.remove('placed');
}
delete studentAnswers[screenId][itemElement.textContent];
itemElement.remove();
resetFeedback(screenId);
}
function checkGroupingPart1() {
let allCorrect = true;
const words = activityData.activity3.part1.words;
const feedbackElement = document.getElementById('feedback3_1');
// Clear previous correctness highlights
document.querySelectorAll('#activity3_part1 .grouped-item').forEach(item => {
item.classList.remove('correct', 'incorrect');
});
let correctCount = 0;
words.forEach(wordData => {
const studentCategory = studentAnswers['activity3_part1'][wordData.word];
const isCorrect = (studentCategory === wordData.category);
const placedItem = document.querySelector(`#activity3_part1 .grouped-item[data-category="${wordData.category}"][data-text="${wordData.word}"]`); // Try to find the item in its correct category
if (!placedItem) { // If not found in correct category, check all categories
const allPlacedItems = document.querySelectorAll(`#activity3_part1 .grouped-item`);
for (let item of allPlacedItems) {
if (item.textContent === wordData.word) {
item.classList.add(isCorrect ? 'correct' : 'incorrect');
if (isCorrect) correctCount++;
allCorrect = allCorrect && isCorrect;
break;
}
}
} else {
placedItem.classList.add('correct');
correctCount++;
allCorrect = allCorrect && isCorrect;
}
});
if (allCorrect && Object.keys(studentAnswers['activity3_part1']).length === words.length) {
giveFeedback('activity3_part1', true, 'Tebrikler! Tüm kelimeleri doğru grupladın! 🥳');
totalScore += 20; // Example points for a full correct activity part
} else {
giveFeedback('activity3_part1', false, `Bazı kelimeler yanlış yerde. ${correctCount}/${words.length} doğru. Tekrar dene! 🧐`);
}
}
// --- Activity 3: Group the Words - Part 2 ---
function loadActivity3Part2() {
const wordsContainer = document.getElementById('wordsToGroup2');
wordsContainer.innerHTML = ''; // Clear previous words
const words = shuffleArray([...activityData.activity3.part2.words]);
words.forEach(wordData => {
const wordDiv = document.createElement('div');
wordDiv.classList.add('group-word');
wordDiv.textContent = wordData.word;
wordDiv.dataset.category = wordData.category;
wordDiv.onclick = () => handleGroupingSelection(wordDiv, 'activity3_part2');
wordsContainer.appendChild(wordDiv);
});
// Clear drop zones and placed items from previous attempt
document.querySelectorAll('#activity3_part2 .drop-zone').forEach(zone => {
zone.innerHTML = '';
});
studentAnswers['activity3_part2'] = {}; // Reset student answers for this part
currentGroupingSelection = null;
resetFeedback('activity3_part2');
}
function checkGroupingPart2() {
let allCorrect = true;
const words = activityData.activity3.part2.words;
const feedbackElement = document.getElementById('feedback3_2');
document.querySelectorAll('#activity3_part2 .grouped-item').forEach(item => {
item.classList.remove('correct', 'incorrect');
});
let correctCount = 0;
words.forEach(wordData => {
const studentCategory = studentAnswers['activity3_part2'][wordData.word];
const isCorrect = (studentCategory === wordData.category);
const placedItem = document.querySelector(`#activity3_part2 .grouped-item[data-category="${wordData.category}"][data-text="${wordData.word}"]`);
if (!placedItem) {
const allPlacedItems = document.querySelectorAll(`#activity3_part2 .grouped-item`);
for (let item of allPlacedItems) {
if (item.textContent === wordData.word) {
item.classList.add(isCorrect ? 'correct' : 'incorrect');
if (isCorrect) correctCount++;
allCorrect = allCorrect && isCorrect;
break;
}
}
} else {
placedItem.classList.add('correct');
correctCount++;
allCorrect = allCorrect && isCorrect;
}
});
if (allCorrect && Object.keys(studentAnswers['activity3_part2']).length === words.length) {
giveFeedback('activity3_part2', true, 'Mükemmel! Tüm dersleri doğru grupladın! 🥳');
totalScore += 20; // Example points for a full correct activity part
} else {
giveFeedback('activity3_part2', false, `Bazı kelimeler yanlış yerde. ${correctCount}/${words.length} doğru. Tekrar dene! 🧐`);
}
}
// --- Activity 4: Match Sentence Halves ---
function loadActivity4() {
const container = document.getElementById('sentenceMatchingContainer');
container.innerHTML = '';
const items = shuffleArray([...activityData.activity4.items]);
items.forEach(item => {
const itemDiv = document.createElement('div');
itemDiv.classList.add('match-item');
itemDiv.dataset.id = item.id;
itemDiv.dataset.matchId = item.matchId;
itemDiv.textContent = item.value;
itemDiv.onclick = () => handleMatchSelection(itemDiv, 'activity4');
container.appendChild(itemDiv);
});
matchedPairs = {}; // Reset for activity
resetFeedback('activity4');
}
function checkSentenceMatching() {
const allItems = activityData.activity4.items.length / 2;
const currentMatches = Object.keys(matchedPairs).filter(key => key.includes('-') && matchedPairs[key]).length / 2;
if (currentMatches === allItems) {
giveFeedback('activity4', true, 'Cümleleri süper eşleştirdin! 🤩');
} else {
giveFeedback('activity4', false, 'Biraz daha dikkatli olmalısın. Bazı eşleşmeler hatalı. 🤔');
}
}
// --- Activity 5: Match Questions with Answers ---
function loadActivity5() {
const container = document.getElementById('qaMatchingContainer');
container.innerHTML = '';
const items = shuffleArray([...activityData.activity5.items]);
items.forEach(item => {
const itemDiv = document.createElement('div');
itemDiv.classList.add('match-item');
itemDiv.dataset.id = item.id;
itemDiv.dataset.matchId = item.matchId;
itemDiv.textContent = item.value;
itemDiv.onclick = () => handleMatchSelection(itemDiv, 'activity5');
container.appendChild(itemDiv);
});
matchedPairs = {}; // Reset for activity
resetFeedback('activity5');
}
function checkQAMatching() {
const allItems = activityData.activity5.items.length / 2;
const currentMatches = Object.keys(matchedPairs).filter(key => key.includes('-') && matchedPairs[key]).length / 2;
if (currentMatches === allItems) {
giveFeedback('activity5', true, 'Tüm sorulara doğru cevap verdin! Muhteşem! 🥳');
} else {
giveFeedback('activity5', false, 'Bazı soru-cevap eşleşmeleri yanlış. Bir daha bak! 🧐');
}
}
// Initialize the game when the page loads
document.addEventListener('DOMContentLoaded', () => {
showScreen('welcomeScreen');
});
// Helper for grouping activity: Make words clickable to select them, and category boxes clickable to "drop" them
document.addEventListener('click', function(event) {
if (event.target.classList.contains('group-word') && !event.target.classList.contains('placed')) {
handleGroupingSelection(event.target, currentScreen);
} else if (event.target.closest('.drop-zone') && currentGroupingSelection) {
const dropZone = event.target.closest('.drop-zone');
const screenId = dropZone.closest('.screen').id;
if (!currentGroupingSelection.classList.contains('placed')) { // Ensure it's not already placed
const placedWord = currentGroupingSelection.cloneNode(true);
placedWord.classList.remove('selected');
placedWord.classList.add('grouped-item');
placedWord.onclick = (e) => { // Allow click to remove from category
e.stopPropagation(); // Prevent re-triggering drop zone click
removeGroupedItem(placedWord, screenId);
};
// Store original text for accurate tracking
placedWord.dataset.text = currentGroupingSelection.textContent;
dropZone.appendChild(placedWord);
currentGroupingSelection.classList.add('placed'); // Mark original as placed
studentAnswers[screenId] = studentAnswers[screenId] || {}; // Initialize if not exists
studentAnswers[screenId][placedWord.textContent] = dropZone.dataset.category;
currentGroupingSelection = null;
resetFeedback(screenId); // Clear feedback
}
}
});
