tag:blogger.com,1999:blog-265231552026-06-04T10:09:00.893+02:00НАШИОТ КЛАСТвојот дигитален водич за учење Anica Petkoskahttp://www.blogger.com/profile/12340858614356870735noreply@blogger.comBlogger161125tag:blogger.com,1999:blog-26523155.post-13254380615448058972026-06-04T10:09:00.893+02:002026-06-04T10:09:00.893+02:00Синтакса 1<!DOCTYPE html>
<html lang="mk">
<head>
<meta charset="UTF-8">
<title>Интерактивна вежба: Синтакса за VII одделение</title>
<style>
body { font-family: Arial, sans-serif; line-height: 1.6; max-width: 800px; margin: 20px auto; padding: 20px; background-color: #f9f9f9; }
.quiz-container { background: #fff; padding: 25px; border-radius: 10px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
h2 { color: #2c3e50; border-bottom: 2px solid #3498db; padding-bottom: 10px; }
.question { margin-bottom: 30px; padding: 15px; border-bottom: 2px solid #eee; }
textarea { width: 100%; height: 60px; margin-top: 10px; display: block; border: 1px solid #ccc; border-radius: 4px; padding: 5px; }
.answer { display: none; margin-top: 15px; color: #16a085; font-weight: bold; background: #e8f8f5; padding: 15px; border-left: 5px solid #16a085; }
button { cursor: pointer; background: #3498db; color: white; border: none; padding: 10px 15px; border-radius: 4px; margin-top: 10px; }
button:hover { background: #2980b9; }
</style>
</head>
<body>
<div class="quiz-container">
<h2>Синтакса - Вежбање</h2>
<p>Алекс, запиши го одговорот, па кликни „Провери“ за да го видиш точното решение.</p>
<!-- Првите 14 прашања -->
<div class="question">
<p>1. Што е именска група и каде се сретнува?</p>
<textarea></textarea>
<button onclick="toggleAnswer('a1')">Провери</button>
<div id="a1" class="answer">Група зборови поврзани околу една именка. Се сретнува насекаде во реченицата каде има именка, освен во самиот прирок.</div>
</div>
<div class="question">
<p>2. Кој е главниот дел на именската група и какви додатоци има?</p>
<textarea></textarea>
<button onclick="toggleAnswer('a2')">Провери</button>
<div id="a2" class="answer">Главниот дел е центар (именка). Додатоци: придавки, заменки или броеви.</div>
</div>
<div class="question">
<p>3. Што се безлични реченици?</p>
<textarea></textarea>
<button onclick="toggleAnswer('a3')">Провери</button>
<div id="a3" class="answer">Реченици каде прирокот не отвора место за подмет (глаголот е секогаш во 3. лице еднина, среден род).</div>
</div>
<div class="question">
<p>4. Наброј ги трите ситуации на безлични реченици со примери.</p>
<textarea></textarea>
<button onclick="toggleAnswer('a4')">Провери</button>
<div id="a4" class="answer">1. Природни појави (Грми); 2. Физиолошки/психички состојби (Ми се спие); 3. Безлични форми со „се“ (Се зборува).</div>
</div>
<div class="question">
<p>5. Кои се главни, неопходни и второстепени членови?</p>
<textarea></textarea>
<button onclick="toggleAnswer('a5')">Провери</button>
<div id="a5" class="answer">Главни: прирок и подмет. Неопходни: предмет и прилошки определби. Второстепени: атрибут и апозиција.</div>
</div>
<div class="question">
<p>6. Која е улогата на предметот?</p>
<textarea></textarea>
<button onclick="toggleAnswer('a6')">Провери</button>
<div id="a6" class="answer">Означувач на лицето или предметот врз кој преминува глаголското дејство.</div>
</div>
<div class="question">
<p>7. Што е прост прирок?</p>
<textarea></textarea>
<button onclick="toggleAnswer('a7')">Провери</button>
<div id="a7" class="answer">Составен од еден глагол во лична форма (глаголски или глаголско-именски).</div>
</div>
<div class="question">
<p>8. Како се образува глаголско-именски прирок?</p>
<textarea></textarea>
<button onclick="toggleAnswer('a8')">Провери</button>
<div id="a8" class="answer">Глагол-врска (сум, стане, остане) + именски дел (пр. „Тој беше ученик“).</div>
</div>
<div class="question">
<p>9. Што е сложен прирок?</p>
<textarea></textarea>
<button onclick="toggleAnswer('a9')">Провери</button>
<div id="a9" class="answer">Помошен глагол со нецелосно значење + да-конструкција (пр. „Можам да работам“).</div>
</div>
<div class="question">
<p>10. Што е директен предмет?</p>
<textarea></textarea>
<button onclick="toggleAnswer('a10')">Провери</button>
<div id="a10" class="answer">Член врз кој директно преминува дејството. Прашања: Што? Кого?</div>
</div>
<div class="question">
<p>11. Како се препознава индиректен предмет?</p>
<textarea></textarea>
<button onclick="toggleAnswer('a11')">Провери</button>
<div id="a11" class="answer">По предлогот „на“ и кратките заменски форми (му, им, ѝ). Прашање: На кого?</div>
</div>
<div class="question">
<p>12. Што е предлошки предмет?</p>
<textarea></textarea>
<button onclick="toggleAnswer('a12')">Провери</button>
<div id="a12" class="answer">Предмет поврзан со предлози (со, за, во, од). Пр. „Зборувам за училиштето“.</div>
</div>
<div class="question">
<p>13. Што означуваат прилошките определби за место и начин?</p>
<textarea></textarea>
<button onclick="toggleAnswer('a13')">Провери</button>
<div id="a13" class="answer">Место (каде се врши дејството) и начин (како се извршува дејството).</div>
</div>
<div class="question">
<p>14. Кога се користи прилошка определба за количество?</p>
<textarea></textarea>
<button onclick="toggleAnswer('a14')">Провери</button>
<div id="a14" class="answer">Кога се искажува степенот или мерата на дејството (прашање: Колку?).</div>
</div>
<!-- Нови прашања -->
<div class="question">
<p>15. Што е атрибут?</p>
<textarea></textarea>
<button onclick="toggleAnswer('a15')">Провери</button>
<div id="a15" class="answer">Второстепен реченичен член што доаѓа пред именката и ја појаснува (пр. „Црвена јаболка“).</div>
</div>
<div class="question">
<p>16. Што е апозиција?</p>
<textarea></textarea>
<button onclick="toggleAnswer('a16')">Провери</button>
<div id="a16" class="answer">Второстепен член што дава дополнително име на именката, обично стои меѓу запирки (пр. „Скопје, главниот град“).</div>
</div>
<div class="question">
<p>17. Која е разликата меѓу атрибут и апозиција?</p>
<textarea></textarea>
<button onclick="toggleAnswer('a17')">Провери</button>
<div id="a17" class="answer">Атрибутот најчесто е придавка и ја опишува именката, додека апозицијата е именка што го преименува или дообјаснува поимот.</div>
</div>
<div class="question">
<p>18. Што е подмет?</p>
<textarea></textarea>
<button onclick="toggleAnswer('a18')">Провери</button>
<div id="a18" class="answer">Главен реченичен член кој го врши дејството. Се открива со прашањето: Кој? Што?</div>
</div>
<div class="question">
<p>19. Кои се проширена реченица и проста реченица?</p>
<textarea></textarea>
<button onclick="toggleAnswer('a19')">Провери</button>
<div id="a19" class="answer">Проста реченица содржи само подмет и прирок, а проширената содржи и второстепени членови (предмет, атрибут, итн.).</div>
</div>
<div class="question">
<p>20. Што е прилошка определба за време?</p>
<textarea></textarea>
<button onclick="toggleAnswer('a20')">Провери</button>
<div id="a20" class="answer">Член што го означува времето кога се врши дејството. Прашање: Кога? (пр. „Денес“, „Утре“).</div>
</div>
</div>
<script>
function toggleAnswer(id) {
var x = document.getElementById(id);
x.style.display = (x.style.display === "block") ? "none" : "block";
}
</script>
</body>
</html><div class="blogger-post-footer">www.bloglines.com</div>Anica Petkoskahttp://www.blogger.com/profile/12340858614356870735noreply@blogger.comtag:blogger.com,1999:blog-26523155.post-1881918440380541112026-06-04T09:53:24.543+02:002026-06-04T10:02:14.143+02:00Интерактивна вежба: Синтакса за VII одделение<!DOCTYPE html>
<html lang="mk">
<head>
<meta charset="UTF-8">
<title>Интерактивна вежба: Синтакса за VII одделение</title>
<style>
body { font-family: Arial, sans-serif; line-height: 1.6; max-width: 800px; margin: 20px auto; padding: 20px; background-color: #f9f9f9; }
.quiz-container { background: #fff; padding: 25px; border-radius: 10px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
h2 { color: #2c3e50; border-bottom: 2px solid #3498db; padding-bottom: 10px; }
.question { margin-bottom: 30px; padding: 15px; border-bottom: 2px solid #eee; }
textarea { width: 100%; height: 60px; margin-top: 10px; display: block; border: 1px solid #ccc; border-radius: 4px; padding: 5px; }
.answer { display: none; margin-top: 15px; color: #16a085; font-weight: bold; background: #e8f8f5; padding: 15px; border-left: 5px solid #16a085; }
button { cursor: pointer; background: #3498db; color: white; border: none; padding: 10px 15px; border-radius: 4px; margin-top: 10px; }
button:hover { background: #2980b9; }
</style>
</head>
<body>
<div class="quiz-container">
<h2>Синтакса - Вежбање</h2>
<p>Алекс, запиши го одговорот, па кликни „Провери“ за да го видиш точното решение.</p>
<!-- ПРАШАЊА -->
<div class="question">
<p>1. Што е именска група и каде се сретнува?</p>
<textarea></textarea>
<button onclick="toggleAnswer('a1')">Провери</button>
<div id="a1" class="answer">Група зборови поврзани околу една именка. Се сретнува насекаде во реченицата каде има именка (подмет, предмет, прилошка определба), освен во самиот прирок.</div>
</div>
<div class="question">
<p>2. Кој е главниот дел на именската група и какви додатоци има?</p>
<textarea></textarea>
<button onclick="toggleAnswer('a2')">Провери</button>
<div id="a2" class="answer">Главниот дел е центар (именка). Додатоци: придавки, заменки или броеви (пр. „мојата висока куќа“).</div>
</div>
<div class="question">
<p>3. Што се безлични реченици?</p>
<textarea></textarea>
<button onclick="toggleAnswer('a3')">Провери</button>
<div id="a3" class="answer">Реченици каде прирокот не отвора место за подмет (глаголот е во 3. лице еднина, среден род).</div>
</div>
<div class="question">
<p>4. Наброј ги трите ситуации на безлични реченици со примери.</p>
<textarea></textarea>
<button onclick="toggleAnswer('a4')">Провери</button>
<div id="a4" class="answer">1. Природни појави (Грми); 2. Физиолошки/психички состојби (Ми се спие); 3. Безлични форми со „се“ (Се зборува јавно).</div>
</div>
<div class="question">
<p>5. Кои се главни, неопходни и второстепени членови?</p>
<textarea></textarea>
<button onclick="toggleAnswer('a5')">Провери</button>
<div id="a5" class="answer">Главни: прирок и подмет. Неопходни: предмет и прилошки определби. Второстепени: атрибут и апозиција.</div>
</div>
<div class="question">
<p>6. Која е улогата на предметот?</p>
<textarea></textarea>
<button onclick="toggleAnswer('a6')">Провери</button>
<div id="a6" class="answer">Предметот е означувач на лицето или предметот врз кој преминува глаголското дејство.</div>
</div>
<div class="question">
<p>7. Што е прост прирок?</p>
<textarea></textarea>
<button onclick="toggleAnswer('a7')">Провери</button>
<div id="a7" class="answer">Составен од еден глагол во лична форма (глаголски или глаголско-именски).</div>
</div>
<div class="question">
<p>8. Како се образува глаголско-именски прирок?</p>
<textarea></textarea>
<button onclick="toggleAnswer('a8')">Провери</button>
<div id="a8" class="answer">Глагол-врска (сум, стане, остане) + именски дел (пр. „Таа беше градоначалничка“).</div>
</div>
<div class="question">
<p>9. Што е сложен прирок?</p>
<textarea></textarea>
<button onclick="toggleAnswer('a9')">Провери</button>
<div id="a9" class="answer">Помошен глагол со нецелосно значење + да-конструкција (пр. „Миле сака да јаде“).</div>
</div>
<div class="question">
<p>10. Што е директен предмет?</p>
<textarea></textarea>
<button onclick="toggleAnswer('a10')">Провери</button>
<div id="a10" class="answer">Член врз кој директно преминува дејството. Прашања: Што? Кого? (пр. „Јован јаде торта“).</div>
</div>
<div class="question">
<p>11. Како се препознава индиректен предмет?</p>
<textarea></textarea>
<button onclick="toggleAnswer('a11')">Провери</button>
<div id="a11" class="answer">По предлогот „на“ и кратките заменски форми (му, им, ѝ). Прашање: На кого?</div>
</div>
<div class="question">
<p>12. Што е предлошки предмет?</p>
<textarea></textarea>
<button onclick="toggleAnswer('a12')">Провери</button>
<div id="a12" class="answer">Предмет поврзан со предлози (со, за, во, од). Пр. „Верувам во вас“, „Се договорија за состанок“.</div>
</div>
<div class="question">
<p>13. Што означуваат прилошките определби за место и начин?</p>
<textarea></textarea>
<button onclick="toggleAnswer('a13')">Провери</button>
<div id="a13" class="answer">Место (каде се врши дејството) и начин (како се извршува дејството).</div>
</div>
<div class="question">
<p>14. Кога се користи прилошка определба за количество и степен?</p>
<textarea></textarea>
<button onclick="toggleAnswer('a14')">Провери</button>
<div id="a14" class="answer">Кога се искажува степенот или мерата на дејството (прашање: Колку? - пр. „многу“, „толку“).</div>
</div>
</div>
<script>
function toggleAnswer(id) {
var x = document.getElementById(id);
x.style.display = (x.style.display === "block") ? "none" : "block";
}
</script>
</body>
</html><div class="blogger-post-footer">www.bloglines.com</div>Anica Petkoskahttp://www.blogger.com/profile/12340858614356870735noreply@blogger.comtag:blogger.com,1999:blog-26523155.post-90205341959409730562026-06-02T17:31:24.146+02:002026-06-02T19:49:04.953+02:00Интерактивен звучен речник на германски глаголи (А1-А2)<!DOCTYPE html>
<html lang="mk">
<head>
<meta charset="UTF-8">
<style>
/* Сè е внатре, нема надворешни фајлови за да не кочи */
.v-table-container { font-family: sans-serif; max-width: 100%; overflow-x: auto; color: #333; }
.v-table { width: 100%; border-collapse: collapse; min-width: 600px; font-size: 14px; }
.v-table th { background: #1a202c; color: white; padding: 12px; text-align: left; }
.v-table td { border-bottom: 1px solid #edf2f7; padding: 10px; }
.v-table tr:hover { background: #f7fafc; }
.btn-speak { background: #4a5568; color: white; border: none; padding: 5px 10px; border-radius: 4px; cursor: pointer; font-size: 12px; }
.btn-speak:hover { background: #2d3748; }
.search-box { width: 100%; padding: 10px; margin-bottom: 10px; border: 1px solid #cbd5e0; border-radius: 5px; box-sizing: border-box; }
.helper-text { font-size: 12px; color: #718096; margin-bottom: 10px; }
</style>
</head>
<body>
<div class="v-table-container">
<input type="text" id="vSearch" onkeyup="filterVerbs()" placeholder="Пребарај глагол (на пр. essen)..." class="search-box">
<p class="helper-text">Кликни на 🔊 за изговор на германски.</p>
<table class="v-table" id="vTable">
<thead>
<tr>
<th>Infinitiv</th>
<th>Präsens (3.)</th>
<th>Präteritum</th>
<th>Perfekt</th>
<th>Македонски</th>
<th>🔊</th>
</tr>
</thead>
<tbody id="vBody">
<!-- Кодот подолу ги пополнува полињата -->
</tbody>
</table>
</div>
<script>
const verbs = [
["backen", "bäckt", "backte", "hat gebacken", "пече"],
["beginnen", "beginnt", "begann", "hat begonnen", "почнува"],
["bleiben", "bleibt", "blieb", "ist geblieben", "останува"],
["bringen", "bringt", "brachte", "hat gebracht", "носи"],
["denken", "denkt", "dachte", "hat gedacht", "мисли"],
["essen", "isst", "aß", "hat gegessen", "јаде"],
["fahren", "fährt", "fuhr", "ist gefahren", "вози/патува"],
["finden", "findet", "fand", "hat gefunden", "наоѓа"],
["fliegen", "fliegt", "flog", "ist geflogen", "лета"],
["geben", "gibt", "gab", "hat gegeben", "дава"],
["gehen", "geht", "ging", "ist gegangen", "оди"],
["haben", "hat", "hatte", "hat gehabt", "има"],
["helfen", "hilft", "half", "hat geholfen", "помага"],
["kommen", "kommt", "kam", "ist gekommen", "доаѓа"],
["lassen", "lässt", "ließ", "hat gelassen", "остава/дозволува"],
["laufen", "läuft", "lief", "ist gelaufen", "трча"],
["lesen", "liest", "las", "hat gelesen", "чита"],
["nehmen", "nimmt", "nahm", "hat genommen", "зема"],
["rufen", "ruft", "rief", "hat gerufen", "вика"],
["schlafen", "schläft", "schlief", "hat geschlafen", "спие"],
["schreiben", "schreibt", "schrieb", "hat geschrieben", "пишува"],
["sehen", "sieht", "sah", "hat gesehen", "гледа"],
["sein", "ist", "war", "ist gewesen", "сум"],
["sprechen", "spricht", "sprach", "hat gesprochen", "зборува"],
["stehen", "steht", "stand", "hat gestanden", "стои"],
["treffen", "trifft", "traf", "hat getroffen", "среќава"],
["trinken", "trinkt", "trank", "hat getrunken", "пие"],
["tun", "tut", "tat", "hat getan", "прави"],
["verstehen", "versteht", "verstand", "hat verstanden", "разбира"],
["werden", "wird", "wurde", "ist geworden", "станува"],
["wissen", "weiß", "wusste", "hat gewusst", "знае"]
];
function speak(text) {
window.speechSynthesis.cancel();
const msg = new SpeechSynthesisUtterance(text);
msg.lang = 'de-DE';
window.speechSynthesis.speak(msg);
}
function render() {
const body = document.getElementById('vBody');
body.innerHTML = verbs.map(v => `
<tr>
<td><strong>${v[0]}</strong></td>
<td>${v[1]}</td>
<td>${v[2]}</td>
<td style="color:blue">${v[3]}</td>
<td>${v[4]}</td>
<td><button class="btn-speak" onclick="speak('${v[0]}, ${v[1]}, ${v[2]}, ${v[3]}')">🔊</button></td>
</tr>
`).join('');
}
function filterVerbs() {
const input = document.getElementById('vSearch').value.toLowerCase();
const rows = document.getElementById('vTable').getElementsByTagName('tr');
for (let i = 1; i < rows.length; i++) {
rows[i].style.display = rows[i].innerText.toLowerCase().includes(input) ? "" : "none";
}
}
render();
</script>
</body>
</html><div class="blogger-post-footer">www.bloglines.com</div>Anica Petkoskahttp://www.blogger.com/profile/12340858614356870735noreply@blogger.comtag:blogger.com,1999:blog-26523155.post-28778911436931888442026-06-02T13:27:06.564+02:002026-06-02T15:02:04.516+02:00Зависни сврзници во германски<!DOCTYPE html>
<html lang="mk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Совладајте ги Германските Зависни Сврзници</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,600;0,700;1,400&display=swap');
body {
font-family: 'Montserrat', sans-serif;
background-color: #f0f4f8;
}
.header-font {
font-family: 'Playfair Display', serif;
}
/* 3D ефект за флеш-картичките */
.card-inner {
transition: transform 0.6s;
transform-style: preserve-3d;
}
.card-flipped {
transform: rotateY(180deg);
}
.card-front, .card-back {
backface-visibility: hidden;
}
.card-back {
transform: rotateY(180deg);
}
</style>
</head>
<body class="text-gray-800">
<!-- Хедер на Блогот -->
<header class="bg-gradient-to-r from-blue-950 via-slate-900 to-indigo-950 text-white py-12 px-4 shadow-lg text-center">
<div class="max-w-5xl mx-auto">
<span class="bg-amber-500 text-slate-950 text-xs font-bold px-3 py-1 rounded-full uppercase tracking-widest">Интерактивна Лекција</span>
<h1 class="header-font text-4xl md:text-5xl font-bold mt-4 mb-2">Германски зборовен ред: Зависни сврзници</h1>
<p class="text-blue-200 text-lg md:text-xl font-light">Научете ги и вежбајте ги клучните 8 сврзници преку аудио картички, вежби со кликање и квизови.</p>
</div>
</header>
<!-- Кориснички Модерен Модал за Известувања -->
<div id="custom-modal" class="fixed inset-0 bg-slate-900/60 backdrop-blur-sm hidden items-center justify-center z-50 p-4 transition-all duration-300">
<div class="bg-white rounded-2xl p-6 max-w-md w-full shadow-2xl border border-gray-100 text-center transform scale-100 transition-all">
<div class="w-16 h-16 bg-blue-100 text-blue-600 rounded-full flex items-center justify-center mx-auto mb-4 text-2xl">
<i class="fa-solid fa-graduation-cap"></i>
</div>
<h3 class="text-xl font-bold text-slate-900 mb-2" id="modal-title">Резултат</h3>
<p class="text-gray-600 mb-6" id="modal-message">Успешно завршено вежбање!</p>
<button onclick="closeModal()" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-xl transition duration-200 shadow-md">
Продолжи
</button>
</div>
</div>
<!-- Главен контејнер -->
<main class="max-w-6xl mx-auto px-4 py-8">
<!-- Главно menu со јазичиња (Табови) -->
<div class="flex flex-wrap justify-center border-b border-gray-300 mb-8 gap-2 bg-white p-2 rounded-xl shadow-sm">
<button onclick="switchTab('reference')" id="tab-reference" class="tab-btn px-4 py-3 font-semibold text-xs md:text-sm rounded-lg transition-all duration-300 border-b-2 border-blue-600 text-blue-600 bg-blue-50">
<i class="fa-solid fa-table mr-2"></i>Табела со примери
</button>
<button onclick="switchTab('grammar')" id="tab-grammar" class="tab-btn px-4 py-3 font-semibold text-xs md:text-sm rounded-lg transition-all duration-300 border-b-2 border-transparent text-gray-600 hover:text-blue-600 hover:bg-gray-50">
<i class="fa-solid fa-book-open mr-2"></i>Граматика
</button>
<button onclick="switchTab('flashcards')" id="tab-flashcards" class="tab-btn px-4 py-3 font-semibold text-xs md:text-sm rounded-lg transition-all duration-300 border-b-2 border-transparent text-gray-600 hover:text-blue-600 hover:bg-gray-50">
<i class="fa-solid fa-clone mr-2"></i>Звучни картички
</button>
<button onclick="switchTab('fill-blanks')" id="tab-fill-blanks" class="tab-btn px-4 py-3 font-semibold text-xs md:text-sm rounded-lg transition-all duration-300 border-b-2 border-transparent text-gray-600 hover:text-blue-600 hover:bg-gray-50">
<i class="fa-solid fa-square-poll-horizontal mr-2"></i>Дополнување
</button>
<button onclick="switchTab('word-order')" id="tab-word-order" class="tab-btn px-4 py-3 font-semibold text-xs md:text-sm rounded-lg transition-all duration-300 border-b-2 border-transparent text-gray-600 hover:text-blue-600 hover:bg-gray-50">
<i class="fa-solid fa-arrow-right-arrow-left mr-2"></i>Редослед на зборови
</button>
<button onclick="switchTab('quiz-present')" id="tab-quiz-present" class="tab-btn px-4 py-3 font-semibold text-xs md:text-sm rounded-lg transition-all duration-300 border-b-2 border-transparent text-gray-600 hover:text-blue-600 hover:bg-gray-50">
<i class="fa-solid fa-clock mr-2"></i>Сегашно време (8)
</button>
<button onclick="switchTab('quiz-past')" id="tab-quiz-past" class="tab-btn px-4 py-3 font-semibold text-xs md:text-sm rounded-lg transition-all duration-300 border-b-2 border-transparent text-gray-600 hover:text-blue-600 hover:bg-gray-50">
<i class="fa-solid fa-history mr-2"></i>Минато време (8)
</button>
<button onclick="switchTab('quiz-perfect')" id="tab-quiz-perfect" class="tab-btn px-4 py-3 font-semibold text-xs md:text-sm rounded-lg transition-all duration-300 border-b-2 border-transparent text-gray-600 hover:text-blue-600 hover:bg-gray-50">
<i class="fa-solid fa-business-time mr-2"></i>Минато Преткажано (8)
</button>
</div>
<!-- 1. ЈАЗИЧЕ: ТАБЕЛА СО ПРИМЕРИ -->
<section id="content-reference" class="tab-content block bg-white rounded-2xl p-6 md:p-8 shadow-md border border-gray-100">
<h2 class="header-font text-2xl md:text-3xl font-bold mb-4 text-slate-900 border-b pb-3">
<i class="fa-solid fa-table text-blue-600 mr-2"></i>Прегледна табела за споредба на сврзниците
</h2>
<p class="text-gray-600 mb-6">Користете ја оваа детална табела со германски примери и англиски преводи за полесно да ги решавате интерактивните вежби во другите јазичиња.</p>
<div class="space-y-6">
<!-- Интерактивна HTML табела -->
<div class="overflow-x-auto rounded-xl border border-gray-200 shadow-sm">
<table class="min-w-full divide-y divide-gray-200 text-left text-sm">
<thead class="bg-slate-900 text-white uppercase text-xs font-semibold tracking-wider">
<tr>
<th class="px-6 py-4 min-w-[150px] whitespace-nowrap">Сврзник</th>
<th class="px-6 py-4">Англиски превод</th>
<th class="px-6 py-4">Германски пример (Со зависен ред)</th>
<th class="px-6 py-4">Англиски превод на реченицата</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200 bg-white">
<tr class="hover:bg-slate-50 transition">
<td class="px-6 py-4 font-bold text-red-600 whitespace-nowrap">nachdem</td>
<td class="px-6 py-4 text-slate-600 italic">after</td>
<td class="px-6 py-4 text-slate-900 font-medium">Nachdem ich gegessen <span class="text-red-600 underline font-semibold">hatte</span>, ging ich spazieren.</td>
<td class="px-6 py-4 text-slate-500">After I had eaten, I went for a walk.</td>
</tr>
<tr class="hover:bg-slate-50 transition">
<td class="px-6 py-4 font-bold text-red-600 whitespace-nowrap">weil</td>
<td class="px-6 py-4 text-slate-600 italic">because</td>
<td class="px-6 py-4 text-slate-900 font-medium">Ich bleibe zu Hause, weil es <span class="text-red-600 underline font-semibold">regnet</span>.</td>
<td class="px-6 py-4 text-slate-500">I'm staying at home because it's raining.</td>
</tr>
<tr class="hover:bg-slate-50 transition">
<td class="px-6 py-4 font-bold text-red-600 whitespace-nowrap">wenn</td>
<td class="px-6 py-4 text-slate-600 italic">when / if</td>
<td class="px-6 py-4 text-slate-900 font-medium">Wenn du Zeit <span class="text-red-600 underline font-semibold">hast</span>, ruf mich an.</td>
<td class="px-6 py-4 text-slate-500">If you have time, call me.</td>
</tr>
<tr class="hover:bg-slate-50 transition">
<td class="px-6 py-4 font-bold text-red-600 whitespace-nowrap">dass</td>
<td class="px-6 py-4 text-slate-600 italic">that</td>
<td class="px-6 py-4 text-slate-900 font-medium">Ich weiß, dass du recht <span class="text-red-600 underline font-semibold">hast</span>.</td>
<td class="px-6 py-4 text-slate-500">I know that you are right.</td>
</tr>
<tr class="hover:bg-slate-50 transition">
<td class="px-6 py-4 font-bold text-red-600 whitespace-nowrap">als</td>
<td class="px-6 py-4 text-slate-600 italic">when (past)</td>
<td class="px-6 py-4 text-slate-900 font-medium">Als ich ein Kind <span class="text-red-600 underline font-semibold">war</span>, wohnte ich in Berlin.</td>
<td class="px-6 py-4 text-slate-500">When I was a child, I lived in Berlin.</td>
</tr>
<tr class="hover:bg-slate-50 transition">
<td class="px-6 py-4 font-bold text-red-600 whitespace-nowrap">während</td>
<td class="px-6 py-4 text-slate-600 italic">while</td>
<td class="px-6 py-4 text-slate-900 font-medium">Während ich <span class="text-red-600 underline font-semibold">lerne</span>, höre ich Musik.</td>
<td class="px-6 py-4 text-slate-500">While I study, I listen to music.</td>
</tr>
<tr class="hover:bg-slate-50 transition">
<td class="px-6 py-4 font-bold text-red-600 whitespace-nowrap">bevor</td>
<td class="px-6 py-4 text-slate-600 italic">before</td>
<td class="px-6 py-4 text-slate-900 font-medium">Wasch dir die Hände, bevor du <span class="text-red-600 underline font-semibold">isst</span>.</td>
<td class="px-6 py-4 text-slate-500">Wash your hands before you eat.</td>
</tr>
<tr class="hover:bg-slate-50 transition">
<td class="px-6 py-4 font-bold text-red-600 whitespace-nowrap">seitdem</td>
<td class="px-6 py-4 text-slate-600 italic">since</td>
<td class="px-6 py-4 text-slate-900 font-medium">Seitdem er hier <span class="text-red-600 underline font-semibold">arbeitet</span>, ist er viel glücklicher.</td>
<td class="px-6 py-4 text-slate-500">Since he's been working here, he is much happier.</td>
</tr>
</tbody>
</table>
</div>
<div class="grid md:grid-cols-2 gap-6 mt-6">
<div class="bg-blue-50 border-l-4 border-blue-600 p-4 rounded-r-lg">
<h4 class="font-bold text-blue-900 mb-1">Германски зборовен ред (Nebensatz):</h4>
<p class="text-blue-800 text-sm">Приметете го црвено подвлечениот дел во секоја реченица. Тоа е конјугираниот глагол што зависните сврзници го „туркаат“ на <strong>последна позиција</strong>!</p>
</div>
<div class="bg-amber-50 border-l-4 border-amber-500 p-4 rounded-r-lg">
<h4 class="font-bold text-amber-900 mb-1">Споредба со англискиот јазик:</h4>
<p class="text-amber-800 text-sm">За разлика од германскиот, на англиски зборовниот ред останува непроменет по сврзникот (Подмет + Глагол + Објект).</p>
</div>
</div>
</div>
</section>
<!-- 2. ЈАЗИЧЕ: ГРАМАТИКА -->
<section id="content-grammar" class="tab-content hidden bg-white rounded-2xl p-6 md:p-8 shadow-md border border-gray-100">
<h2 class="header-font text-3xl font-bold mb-6 text-slate-900 border-b pb-3">Златното граматичко правило</h2>
<div class="grid md:grid-cols-2 gap-8">
<div class="space-y-4">
<p class="text-gray-700 leading-relaxed">
Кога користиме зависен сврзник (Subjunktion), создаваме <strong>зависна реченица (Nebensatz)</strong>. На германски, оваа структура бара конјугираниот глагол да мигрира на последното место.
</p>
<div class="bg-indigo-50 border-l-4 border-indigo-600 p-5 rounded-r-lg">
<h3 class="font-bold text-indigo-950 mb-1">Формула:</h3>
<p class="text-indigo-900 text-sm font-semibold">Сврзник + Подмет + Објект + ... + <span class="text-red-600 underline">ГЛАГОЛ (на крај)</span></p>
</div>
<p class="text-gray-700 text-sm">
Ако реченицата ја започнеме со зависната реченица, веднаш по запирката главната реченица мора да започне со нејзиниот <strong>глагол</strong> за да се задоволи правилото глаголот да биде на втора позиција во целата реченица.
</p>
</div>
<div class="bg-slate-50 p-6 rounded-xl border border-gray-200">
<h3 class="font-bold text-lg text-slate-950 mb-4"><i class="fa-solid fa-code-compare text-amber-500 mr-2"></i>Примери и споредба:</h3>
<div class="space-y-4 text-sm">
<div class="p-3 bg-white rounded border shadow-sm">
<span class="font-bold text-blue-600">Weil (Because):</span><br>
<span class="text-gray-600">EN: ...because it <strong>is raining</strong>.</span><br>
<span class="text-slate-900 font-medium">DE: ...weil es <strong>regnet</strong>.</span>
</div>
<div class="p-3 bg-white rounded border shadow-sm">
<span class="font-bold text-emerald-600">Als (When - во минато):</span><br>
<span class="text-gray-600">EN: When I <strong>was</strong> a child...</span><br>
<span class="text-slate-900 font-medium">DE: Als ich ein Kind <strong>war</strong>...</span>
</div>
</div>
</div>
</div>
</section>
<!-- 3. ЈАЗИЧЕ: ЗВУЧНИ КАРТИЧКИ -->
<section id="content-flashcards" class="tab-content hidden bg-white rounded-2xl p-6 md:p-8 shadow-md border border-gray-100 text-center">
<h2 class="header-font text-3xl font-bold mb-2 text-slate-900">Интерактивни звучни картички</h2>
<p class="text-gray-600 mb-8">Кликнете на картичката за да го видите англискиот превод. Кликнете на звучникот <i class="fa-solid fa-volume-high"></i> за да го слушнете точниот изговор.</p>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-6 max-w-5xl mx-auto" id="flashcards-grid">
</div>
</section>
<!-- 4. ЈАЗИЧЕ: КВИЗ ЗА ДОПОЛНУВАЊЕ НА СВРЗНИЦИ -->
<section id="content-fill-blanks" class="tab-content hidden bg-white rounded-2xl p-6 md:p-8 shadow-md border border-gray-100">
<div class="flex justify-between items-center mb-6 border-b pb-3">
<h2 class="header-font text-2xl md:text-3xl font-bold text-slate-900">Дополнување на точниот сврзник</h2>
<span class="bg-blue-100 text-blue-800 text-xs font-bold px-3 py-1 rounded-full">8 Задачи</span>
</div>
<p class="text-gray-600 mb-6 text-sm">Прочитајте ја реченицата и изберете го соодветниот германски сврзник во однос на понудениот англиски превод.</p>
<div class="space-y-6" id="fill-blanks-container">
</div>
<div class="mt-8 text-center">
<button onclick="checkFillBlanks()" class="bg-blue-600 hover:bg-blue-700 text-white font-bold px-8 py-3 rounded-xl shadow shadow-blue-300 transition-all">
Провери Одговори
</button>
</div>
</section>
<!-- 5. ЈАЗИЧЕ: РЕДОСЛЕД НА ЗБОРОВИ -->
<section id="content-word-order" class="tab-content hidden bg-white rounded-2xl p-6 md:p-8 shadow-md border border-gray-100">
<div class="flex justify-between items-center mb-6 border-b pb-3">
<h2 class="header-font text-2xl md:text-3xl font-bold text-slate-900">Подредување со кликање на зборовите</h2>
<span class="bg-amber-100 text-amber-800 text-xs font-bold px-3 py-1 rounded-full">8 Задачи</span>
</div>
<p class="text-gray-600 mb-6 text-sm"><strong>Упатство:</strong> Составувајте ги речениците со кликање на зборовите по точен редослед. Внимавајте на глаголот кој мора да биде на последното место во подредениот дел!</p>
<div id="word-order-container" class="space-y-8">
</div>
</section>
<!-- 6. ЈАЗИЧЕ: СЕГАШНО ВРЕМЕ -->
<section id="content-quiz-present" class="tab-content hidden bg-white rounded-2xl p-6 md:p-8 shadow-md border border-gray-100">
<div class="flex justify-between items-center mb-6 border-b pb-3">
<h2 class="header-font text-2xl md:text-3xl font-bold text-emerald-800">Квиз за Сегашно време (Präsens)</h2>
<span class="bg-emerald-100 text-emerald-800 text-xs font-bold px-3 py-1 rounded-full">8 Задачи</span>
</div>
<div class="space-y-6" id="present-questions"></div>
<div class="mt-8 text-center">
<button onclick="checkAnswers('present')" class="bg-emerald-600 hover:bg-emerald-700 text-white font-bold px-8 py-3 rounded-xl shadow transition">
Провери Одговори (Сегашно)
</button>
</div>
</section>
<!-- 7. ЈАЗИЧЕ: МИНАТО ВРЕМЕ -->
<section id="content-quiz-past" class="tab-content hidden bg-white rounded-2xl p-6 md:p-8 shadow-md border border-gray-100">
<div class="flex justify-between items-center mb-6 border-b pb-3">
<h2 class="header-font text-2xl md:text-3xl font-bold text-indigo-800">Квиз за Минато време (Präteritum / Perfekt)</h2>
<span class="bg-indigo-100 text-indigo-800 text-xs font-bold px-3 py-1 rounded-full">8 Задачи</span>
</div>
<div class="space-y-6" id="past-questions"></div>
<div class="mt-8 text-center">
<button onclick="checkAnswers('past')" class="bg-indigo-600 hover:bg-indigo-700 text-white font-bold px-8 py-3 rounded-xl shadow transition">
Провери Одговори (Минато)
</button>
</div>
</section>
<!-- 8. ЈАЗИЧЕ: МИНАТО ПРЕТКАЖАНО ВРЕМЕ -->
<section id="content-quiz-perfect" class="tab-content hidden bg-white rounded-2xl p-6 md:p-8 shadow-md border border-gray-100">
<div class="flex justify-between items-center mb-6 border-b pb-3">
<h2 class="header-font text-2xl md:text-3xl font-bold text-amber-800">Квиз за Минато преткажано време (Plusquamperfekt)</h2>
<span class="bg-amber-100 text-amber-800 text-xs font-bold px-3 py-1 rounded-full">8 Задачи</span>
</div>
<p class="text-sm text-gray-600 mb-4">Напомена: Сврзникот <em>nachdem</em> секогаш бара Plusquamperfekt (hatte / war + минат партицип) кога ја раскажуваме реченицата во минато време.</p>
<div class="space-y-6" id="perfect-questions"></div>
<div class="mt-8 text-center">
<button onclick="checkAnswers('perfect')" class="bg-amber-600 hover:bg-amber-700 text-white font-bold px-8 py-3 rounded-xl shadow transition">
Провери Одговори (Минато Преткажано)
</button>
</div>
</section>
</main>
<footer class="bg-slate-950 text-white py-10 px-4 mt-20 text-center border-t border-slate-800">
<p class="text-sm text-slate-400">© 2026 Интерактивен блог за германски јазик.</p>
</footer>
<!-- СКРИПТИ -->
<script>
// Кориснички модал за известувања
function showModal(title, message) {
document.getElementById('modal-title').innerText = title;
document.getElementById('modal-message').innerText = message;
const modal = document.getElementById('custom-modal');
modal.classList.remove('hidden');
modal.classList.add('flex');
}
function closeModal() {
const modal = document.getElementById('custom-modal');
modal.classList.remove('flex');
modal.classList.add('hidden');
}
// Префрлање на јазичиња (Tabs)
function switchTab(tabId) {
document.querySelectorAll('.tab-content').forEach(element => {
element.classList.add('hidden');
element.classList.remove('block');
});
document.querySelectorAll('.tab-btn').forEach(btn => {
btn.classList.remove('border-blue-600', 'text-blue-600', 'bg-blue-50');
btn.classList.add('border-transparent', 'text-gray-600');
});
const targetSection = document.getElementById('content-' + tabId);
if (targetSection) {
targetSection.classList.remove('hidden');
targetSection.classList.add('block');
}
const activeBtn = document.getElementById('tab-' + tabId);
if (activeBtn) {
activeBtn.classList.remove('border-transparent', 'text-gray-600');
activeBtn.classList.add('border-blue-600', 'text-blue-600', 'bg-blue-50');
}
}
// Податоци за Звучни Картички
const cardData = [
{ de: 'nachdem', en: 'after', ex: 'Nachdem ich gegessen hatte...' },
{ de: 'weil', en: 'because', ex: 'weil es draußen regnet.' },
{ de: 'wenn', en: 'when / if', ex: 'Wenn du morgen Zeit hast...' },
{ de: 'dass', en: 'that', ex: 'Ich weiß, dass du recht hast.' },
{ de: 'als', en: 'when (past)', ex: 'Als ich ein kleines Kind war...' },
{ de: 'während', en: 'while', ex: 'Während ich Deutsch lerne...' },
{ de: 'bevor', en: 'before', ex: 'Trink Wasser, bevor du isst.' },
{ de: 'seitdem', en: 'since', ex: 'Seitdem er hier arbeitet...' }
];
// Податоци за јазичето: Дополнување на Сврзници
const fillBlanksData = [
{ sentence: "1. Ich bleibe im Bett, _______ ich mich nicht wohl fühle. (because)", options: ["weil", "nachdem", "bevor", "als"], correct: "weil" },
{ sentence: "2. _______ die Vorlesung beendet war, gingen wir nach Hause. (after)", options: ["Weil", "Nachdem", "Dass", "Wenn"], correct: "Nachdem" },
{ sentence: "3. Wir gehen spazieren, _______ es aufhört zu regnen. (when / if)", options: ["bevor", "dass", "wenn", "als"], correct: "wenn" },
{ sentence: "4. Sie sagt, _______ das Deutschlernen großen Spaß macht. (that)", options: ["dass", "weil", "während", "seitdem"], correct: "dass" },
{ sentence: "5. _______ wir gestern im Restaurant saßen, sahen wir Thomas. (when - еднократно во минато)", options: ["Als", "Wenn", "Weil", "Während"], correct: "Als" },
{ sentence: "6. Ich lese die Zeitung, _______ ich auf den Bus warте. (while)", options: ["Weil", "Während", "Dass", "Nachdem"], correct: "Während" },
{ sentence: "7. Schalte das Licht aus, _______ du schlafen gehst. (before)", options: ["bevor", "nachdem", "wenn", "seitdem"], correct: "bevor" },
{ sentence: "8. _______ er seine Ernährung umgestellt hat, fühlt er sich fit. (since)", options: ["Seitdem", "Dass", "Als", "Weil"], correct: "Seitdem" }
];
// Податоци за јазичето: Редослед на зборови
const wordOrderData = [
{ english: "I stay at home because it is raining.", words: ["Ich", "bleibe", "zu", "Hause,", "weil", "es", "regnet."], correct: "Ich bleibe zu Hause, weil es regnet." },
{ english: "When I was a child, I lived in Berlin.", words: ["Als", "ich", "ein", "Kind", "war,", "wohnte", "ich", "in", "Berlin."], correct: "Als ich ein Kind war, wohnte ich in Berlin." },
{ english: "After I had finished my work, I went home.", words: ["Nachdem", "ich", "meine", "Arbeit", "beendet", "hatte,", "ging", "ich", "nach", "Hause."], correct: "Nachdem ich meine Arbeit beendet hatte, ging ich nach Hause." },
{ english: "If you have time, call me.", words: ["Wenn", "du", "Zeit", "hast,", "ruf", "mich", "an."], correct: "Wenn du Zeit hast, ruf mich an." },
{ english: "I know that you are right.", words: ["Ich", "weiß,", "dass", "du", "recht", "hast."], correct: "Ich weiß, dass du recht hast." },
{ english: "While I study, I listen to music.", words: ["Während", "ich", "lerne,", "höre", "ich", "Musik."], correct: "Während ich lerne, höre ich Musik." },
{ english: "Wash your hands before you eat.", words: ["Wasch", "dir", "die", "Hände,", "bevor", "du", "isst."], correct: "Wasch dir die Hände, bevor du isst." },
{ english: "Since he works here, he is happy.", words: ["Seitdem", "er", "hier", "arbeitet,", "ist", "er", "glücklich."], correct: "Seitdem er hier arbeitet, ist er glücklich." }
];
// Податоци за Трите Времиња (по 8 задачи)
const detailedTenseData = {
present: [
{ q: "1. Ich gehe laufen, weil das Wetter heute schön ______ .", options: ["ist", "sind", "war", "sein"], correct: 0, hint: "Сегашно време за трето лице еднина (das Wetter)." },
{ q: "2. Wenn du Hilfe ______ , sag es mir sofort.", options: ["brauchst", "brauchen", "braucht", "brauchst du"], correct: 0, hint: "Глаголот оди на крај конјугиран за второ лице 'du'." },
{ q: "3. Sie sagt, dass sie jeden Tag Deutsch ______ .", options: ["lernt", "lernen", "lernte", "gelernt hat"], correct: 0, hint: "Сегашно време од глаголот 'lernen' за 'sie' (таа)." },
{ q: "4. Während meine Mutter ______ , lese ich ein Buch.", options: ["kocht", "kochen", "kochte", "gekocht hat"], correct: 0, hint: "Истовремено сегашно дејство." },
{ q: "5. Er spielt Fußball, seitdem er in dieser Stadt ______ .", options: ["wohnt", "wohnen", "wohnst", "wohnte"], correct: 0, hint: "Сегашно време од 'wohnen' за 'er'." },
{ q: "6. Wir bleiben im Haus, wenn es draußen ______ .", options: ["regnet", "regnen", "regnete", "geregnet hat"], correct: 0, hint: "Реченица во сегашно време." },
{ q: "7. Bevor ich ______ , trinke ich ein Glas Wasser.", options: ["esse", "essen", "isst", "ass"], correct: 0, hint: "Сегашна конјугација за прво лице 'ich'." },
{ q: "8. Ich bin mir sicher, dass du die Wahrheit ______ .", options: ["weißt", "wissen", "weißt du", "wusstest"], correct: 0, hint: "Сегашно време од неправилниот глагол 'wissen' за 'du'." }
],
past: [
{ q: "1. Als ich ein Kind ______ , spielte ich stundenlang draußen.", options: ["war", "bin", "wurde", "gewesen"], correct: 0, hint: "Сврзникот 'als' бара минато време (Präteritum)." },
{ q: "2. Er rief mich an, weil er meine Hilfe ______ .", options: ["brauchte", "braucht", "brauchen", "gebraucht hat"], correct: 0, hint: "Минато време (Präteritum) од глаголот 'brauchen'." },
{ q: "3. Während wir im Urlaub ______ , regnete es ständig.", options: ["waren", "sind", "wurden", "waren gewesen"], correct: 0, hint: "Истовремени минати состојби." },
{ q: "4. Bevor sie das Büro ______ , schaltete sie den Computer aus.", options: ["verließ", "verlassen", "verlässt", "verlassen hatte"], correct: 0, hint: "Минато време од глаголот 'verlassen'." },
{ q: "5. Als der Zug ______ , warteten wir schon am Gleis.", options: ["ankam", "ankommen", "kommt an", "angekommen war"], correct: 0, hint: "Деливиот глагол 'ankommen' оди на крај и се спојува во едно зборче." },
{ q: "6. Ich wusste genau, dass du mich ______ .", options: ["belogst", "belügst", "belogen hast", "belügen"], correct: 0, hint: "Минато време од 'belügen' (лаже) за второ лице еднина." },
{ q: "7. Seitdem sie in Köln ______ , sahen wir uns fast nie.", options: ["wohnte", "wohnt", "gewohnt hat", "wohnen"], correct: 0, hint: "Дејство во минато време (Präteritum)." },
{ q: "8. Als er jung ______ , reiste er um die ganze Welt.", options: ["war", "ist", "wurde", "wäre"], correct: 0, hint: "Минато време од 'sein' за трето лице еднина." }
],
perfect: [
{ q: "1. Nachdem ich die Hausaufgaben gemacht ______ , ging ich schlafen.", options: ["hatte", "habe", "war", "hätte"], correct: 0, hint: "Plusquamperfekt со 'hatте' за прво лице еднина." },
{ q: "2. Nachdem er das Auto repariert ______ , machte er eine Testfahrt.", options: ["hatte", "war", "habe", "hätte"], correct: 0, hint: "Помошен глагол 'haben' во минато време -> 'hatte'." },
{ q: "3. Nachdem wir am Bahnhof aangekommen ______ , riefen wir ein Taxi.", options: ["waren", "hatten", "sind", "wurden"], correct: 0, hint: "Глаголот 'ankommen' означува движење, затоа користи 'sein' -> во минато преткажано е 'waren'." },
{ q: "4. Nachdem sie den Film gesehen ______ , diskutierten sie lange.", options: ["hatten", "waren", "haben", "hätten"], correct: 0, hint: "Минато преткажано за множина." },
{ q: "5. Nachdem sie zur Schule gegangen ______ , war das Haus leer.", options: ["war", "hatte", "ist", "wurde"], correct: 0, hint: "Глаголот 'gehen' бара помошен глагол 'sein' -> 'war'." },
{ q: "6. Nachdem ich den Brief geschrieben ______ , schickte ich ihn ab.", options: ["hatte", "habe", "war", "hätte"], correct: 0, hint: "Пишувањето бара 'haben' -> 'hatте'." },
{ q: "7. Nachdem das Haus gebaut ______ , zogen die Mieter ein.", options: ["worden war", "hatte", "war", "wurde"], correct: 0, hint: "Пасивна форма во Plusquamperfekt: 'worden war'." },
{ q: "8. Nachdem ich meinen Schlüssel verloren ______ , musste ich warten.", options: ["hatte", "habe", "war", "hätte"], correct: 0, hint: "Губењето нешто бара 'haben' -> 'hatте'." }
]
};
// Избор за Редослед на Зборови
let userWordOrderSelections = Array.from({ length: wordOrderData.length }, () => []);
// ФУНКЦИИ ЗА РЕНДЕРИРАЊЕ (Безбедно иницијализирани по вчитување на DOM)
function renderFlashcards() {
const flashcardGrid = document.getElementById('flashcards-grid');
if (!flashcardGrid) return;
flashcardGrid.innerHTML = "";
cardData.forEach(card => {
flashcardGrid.innerHTML += `
<div class="h-48 cursor-pointer relative group" onclick="toggleCard(this)">
<div class="card-inner absolute inset-0 w-full h-full shadow-md rounded-xl border border-blue-100 bg-blue-50 flex items-center justify-center p-4">
<div class="card-front absolute inset-0 flex flex-col justify-center items-center">
<span class="text-blue-900 font-bold text-2xl">${card.de}</span>
<span class="text-xs text-blue-500 mt-1">Кликнете за превод</span>
<button onclick="speakGerman('${card.de}', event)" class="mt-3 bg-white p-2 rounded-full text-blue-600 hover:bg-blue-100 shadow-sm transition">
<i class="fa-solid fa-volume-high"></i>
</button>
</div>
<div class="card-back absolute inset-0 bg-amber-50 rounded-xl flex flex-col justify-center items-center">
<span class="text-amber-900 font-bold text-2xl">${card.en}</span>
<p class="text-xs text-amber-700 mt-2 px-4 italic text-center">"${card.ex}"</p>
</div>
</div>
</div>
`;
});
}
function toggleCard(cardElement) {
cardElement.querySelector('.card-inner').classList.toggle('card-flipped');
}
function renderFillBlanks() {
const fillBlanksContainer = document.getElementById('fill-blanks-container');
if (!fillBlanksContainer) return;
fillBlanksContainer.innerHTML = "";
fillBlanksData.forEach((item, index) => {
let optionsHTML = `<option value="">-- Одбери сврзник --</option>`;
item.options.forEach(opt => { optionsHTML += `<option value="${opt}">${opt}</option>`; });
fillBlanksContainer.innerHTML += `
<div class="p-5 bg-slate-50 rounded-xl border border-gray-200 shadow-sm">
<p class="font-semibold text-base md:text-lg text-slate-900 mb-3">${item.sentence}</p>
<select id="fill-blank-${index}" class="bg-white border border-gray-300 rounded-lg p-2 text-slate-800 focus:ring-2 focus:ring-blue-500 w-full sm:w-64">
${optionsHTML}
</select>
<div id="fb-feedback-${index}" class="text-sm font-bold mt-2 hidden"></div>
</div>
`;
});
}
function checkFillBlanks() {
let score = 0;
fillBlanksData.forEach((item, index) => {
const val = document.getElementById(`fill-blank-${index}`).value;
const feedback = document.getElementById(`fb-feedback-${index}`);
if (feedback) {
feedback.classList.remove('hidden');
if (val === item.correct) {
score++;
feedback.className = "text-sm font-bold mt-2 text-emerald-600";
feedback.innerHTML = "✅ Точно!";
} else {
feedback.className = "text-sm font-bold mt-2 text-red-600";
feedback.innerHTML = `❌ Грешка. Точниот одговор е "${item.correct}".`;
}
}
});
showModal("Успешно завршено!", `Остваривте резултат: ${score} од вкупно 8 точни решенија.`);
}
function renderWordOrder() {
const container = document.getElementById('word-order-container');
if (!container) return;
container.innerHTML = "";
wordOrderData.forEach((data, index) => {
const shuffled = [...data.words].sort(() => Math.random() - 0.5);
container.innerHTML += `
<div class="p-5 bg-slate-50 rounded-xl border border-gray-200 shadow-sm">
<p class="text-sm text-gray-500 font-medium mb-2"><strong>Превод:</strong> ${data.english}</p>
<div class="min-h-[45px] p-2 bg-white rounded-lg border border-dashed border-gray-300 flex flex-wrap gap-2 mb-3 shadow-inner" id="wo-target-${index}">
<span class="text-gray-400 text-xs italic align-middle self-center">Кликнете на зборовите долу за да ја составите реченицата...</span>
</div>
<div class="flex flex-wrap gap-2 mb-3" id="wo-source-${index}">
${shuffled.map(word => `<button onclick="selectWord(${index}, '${word.replace(/'/g, "\\'")}', this)" class="bg-white hover:bg-slate-100 text-slate-800 font-medium px-3 py-1.5 rounded-md border text-xs md:text-sm shadow-sm transition">${word}</button>`).join('')}
</div>
<div class="flex justify-between items-center text-xs">
<button onclick="resetWordOrder(${index})" class="text-red-600 hover:underline"><i class="fa-solid fa-rotate-left mr-1"></i>Ресетирај</button>
<button onclick="checkSingleWordOrder(${index})" class="bg-slate-800 text-white px-3 py-1.5 rounded hover:bg-slate-900 font-semibold">Провери ја реченицата</button>
</div>
<div id="wo-feedback-${index}" class="text-sm font-bold mt-2 hidden"></div>
</div>
`;
});
}
function selectWord(index, word, btn) {
const target = document.getElementById(`wo-target-${index}`);
if (!target) return;
if (userWordOrderSelections[index].length === 0) target.innerHTML = "";
userWordOrderSelections[index].push(word);
btn.style.visibility = 'hidden';
const span = document.createElement('span');
span.className = "bg-blue-100 text-blue-950 px-2.5 py-1 rounded font-medium text-xs md:text-sm border border-blue-200";
span.innerText = word;
target.appendChild(span);
}
function resetWordOrder(index) {
userWordOrderSelections[index] = [];
const target = document.getElementById(`wo-target-${index}`);
if (target) {
target.innerHTML = `<span class="text-gray-400 text-xs italic align-middle self-center">Кликнете на зборовите долу за да ја составите реченицата...</span>`;
}
const source = document.getElementById(`wo-source-${index}`);
if (source) {
source.querySelectorAll('button').forEach(btn => btn.style.visibility = 'visible');
}
const fb = document.getElementById(`wo-feedback-${index}`);
if (fb) fb.classList.add('hidden');
}
function checkSingleWordOrder(index) {
const userStr = userWordOrderSelections[index].join(' ').trim();
const correctStr = wordOrderData[index].correct.trim();
const fb = document.getElementById(`wo-feedback-${index}`);
if (fb) {
fb.classList.remove('hidden');
if (userStr === correctStr) {
fb.className = "text-sm font-bold mt-2 text-emerald-600";
fb.innerHTML = "✅ Точно подредена реченица!";
} else {
fb.className = "text-sm font-bold mt-2 text-red-600";
fb.innerHTML = `❌ Погрешен редослед. Точно: "${correctStr}"`;
}
}
}
function renderTenseQuestions(tense) {
const container = document.getElementById(`${tense}-questions`);
if (!container) return;
container.innerHTML = "";
detailedTenseData[tense].forEach((qData, index) => {
let optionsHTML = "";
qData.options.forEach((opt, optIdx) => {
optionsHTML += `
<label class="flex items-center space-x-3 bg-white p-3 rounded-lg border border-gray-100 hover:bg-blue-50 cursor-pointer transition">
<input type="radio" name="${tense}-q-${index}" value="${optIdx}" class="text-blue-600 focus:ring-blue-500">
<span class="text-gray-800 font-medium text-sm">${opt}</span>
</label>
`;
});
container.innerHTML += `
<div class="p-5 bg-slate-50 rounded-xl border border-gray-200 shadow-sm">
<p class="font-semibold text-base md:text-lg text-slate-900 mb-3">${qData.q}</p>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-3 mb-2">
${optionsHTML}
</div>
<p class="text-xs text-amber-600 hidden" id="${tense}-hint-${index}">💡 ${qData.hint}</p>
<div class="text-sm font-bold mt-2 hidden" id="${tense}-feedback-${index}"></div>
</div>
`;
});
}
// Централизиран иницијализатор
function initApp() {
renderFlashcards();
renderFillBlanks();
renderWordOrder();
renderTenseQuestions("present");
renderTenseQuestions("past");
renderTenseQuestions("perfect");
}
// Безбедно извршување кога целиот DOM е подготвен
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', initApp);
} else {
initApp();
}
</script>
</body>
</html><div class="blogger-post-footer">www.bloglines.com</div>Anica Petkoskahttp://www.blogger.com/profile/12340858614356870735noreply@blogger.comtag:blogger.com,1999:blog-26523155.post-20116394234110006852026-05-27T21:39:44.348+02:002026-05-27T22:13:11.771+02:00🇩🇪 Места за активности (Wo?)<!DOCTYPE html>
<html lang="mk">
<head>
<meta charset="UTF-8">
<title>Вежба: Места за активности</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-50 p-6">
<div class="max-w-3xl mx-auto bg-white p-8 rounded-2xl shadow-xl">
<h1 class="text-2xl font-bold text-blue-900 mb-6">🇩🇪 Места за активности (Wo?)</h1>
<!-- 1. Листа на места -->
<div class="bg-indigo-50 p-6 rounded-xl border border-indigo-200 mb-6">
<h2 class="font-bold text-indigo-900 mb-3">📍 Листа на места:</h2>
<ul class="grid grid-cols-2 gap-2 text-indigo-700">
<li>• im Stadion (стадион)</li>
<li>• in der Schule (училиште)</li>
<li>• in der Eisdiele (слаткарница)</li>
<li>• im Schwimmbad (базен)</li>
<li>• in der Reithalle (коњичка сала)</li>
<li>• zu Hause (дома)</li>
<li>• im Büro (канцеларија)</li>
<li>• im Garten (градина)</li>
<li>• im Laden (продавница)</li>
<li>• im Kino (кино)</li>
</ul>
</div>
<!-- 2. Објаснување -->
<div class="bg-amber-50 p-6 rounded-xl border border-amber-200 mb-6">
<h2 class="font-bold text-amber-900 mb-2">💡 Објаснување:</h2>
<p class="text-amber-800 text-sm">
За прашањето <strong>"Wo?"</strong> (каде), во германскиот јазик се користи падежот Датив.
Ако местото е машки или среден род (der/das), користиме <strong>im</strong> (скратено од in dem).
Ако местото е женски род (die), користиме <strong>in der</strong>.
Исклучок е <strong>zu Hause</strong>, каде не користиме член.
</p>
</div>
<!-- 3. Реченици (секое место по еднаш) -->
<div class="space-y-4">
<h2 class="font-bold text-gray-800">✍️ Вежба: Пополни со правилното место од листата</h2>
<div id="exercise-container" class="space-y-3">
<!-- Овде се вчитуваат речениците -->
</div>
</div>
</div>
<script>
const exercises = [
{q: "Ich sehe Fußball ____.", a: "im stadion"},
{q: "Ich lerne viel ____.", a: "in der schule"},
{q: "Ich esse Eis ____.", a: "in der eisdiele"},
{q: "Ich schwimme gerne ____.", a: "im schwimmbad"},
{q: "Ich reite mein Pferd ____.", a: "in der reithalle"},
{q: "Mein Vater ist ____.", a: "zu hause"},
{q: "Er arbeitet den ganzen Tag ____.", a: "im büro"},
{q: "Ich spiele mit dem Hund ____.", a: "im garten"},
{q: "Ich kaufe Brot ____.", a: "im laden"},
{q: "Ich sehe einen tollen Film ____.", a: "im kino"}
];
const container = document.getElementById('exercise-container');
exercises.forEach((ex, i) => {
container.innerHTML += `
<div class="p-4 border rounded-lg bg-gray-50">
<p class="mb-2 font-medium">${i+1}. ${ex.q.replace("____", "_____")}</p>
<input type="text" id="in-${i}" class="border p-2 w-full rounded" placeholder="Внеси го местото...">
<button onclick="check('${i}', '${ex.a}')" class="mt-2 bg-blue-600 text-white px-4 py-1 rounded text-sm">Провери</button>
</div>`;
});
function check(id, correct) {
const val = document.getElementById('in-'+id).value.trim().toLowerCase();
alert(val === correct ? "✅ Точно!" : "❌ Пробај повторно! Точно е: " + correct);
}
</script>
</body>
</html><div class="blogger-post-footer">www.bloglines.com</div>Anica Petkoskahttp://www.blogger.com/profile/12340858614356870735noreply@blogger.comtag:blogger.com,1999:blog-26523155.post-70142741021969269402026-05-27T16:38:58.259+02:002026-06-02T08:46:21.635+02:00Deutsch Lernen Viktor<!DOCTYPE html>
<html lang="mk">
<head>
<meta charset="UTF-8">
<title>Германски Макси Тренер - Виктор</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
.tab-content { display: none; }
.tab-content.active { display: block; }
.tab-btn.active { background-color: #1e40af; color: white; }
</style>
</head>
<body class="bg-gray-100 p-4">
<div class="max-w-4xl mx-auto bg-white p-6 rounded-xl shadow-lg">
<h1 class="text-2xl font-bold text-center text-blue-900 mb-6">🇩🇪 Германски Макси Тренер </h1>
<div id="tabs" class="flex flex-wrap gap-2 mb-6 border-b pb-4"></div>
<div id="test-container" class="space-y-4"></div>
</div>
<script>
const categories = [
"1. Часовник", "2. Разделни глаголи", "3. Am liebsten/gern",
"4. Каде го правиш ова?", "5. Преведување", "6. Nom или Akk",
"7. Моја слободна активност", "8. Модални глаголи"
];
const taskInstructions = [
"Правило: За кажување време користиме 'Es ist...'. Важно: 'nach' значи после, 'vor' значи до (пред), а 'halb' е пола час пред следниот час.",
"Правило: Разделните глаголи го делат својот префикс и го ставаат на крајот од реченицата (на пр. aufstehen -> Ich stehe... auf).",
"Правило: 'Gern' значи 'со задоволство'. 'Am liebsten' значи 'најмногу сакам'. Секогаш глаголот е на втора позиција.",
"Правило: Кога прашуваме 'Wo?' (каде), користиме предлози како 'im' (in dem) или 'in der'.",
"Правило: Внимавај на редоследот. Глаголот (акцијата) е секогаш втор елемент во реченицата.",
"Правило: Номинатив е кој врши дејство (der/die/das). Акузатив е врз кого се врши (машкиот 'der' станува 'den').",
"Правило: Напиши реченици за твоите хобија. Користи глаголи кои ги научивме.",
"Правило: Модалните глаголи (können, müssen, wollen) го ставаат главниот глагол на крајот во инфинитив."
];
const tasks = [
[{q: "08:15", a: "Es ist viertel nach acht."}, {q: "14:30", a: "Es ist halb drei."}, {q: "09:45", a: "Es ist viertel vor zehn."}, {q: "12:00", a: "Es ist zwölf Uhr."}, {q: "10:10", a: "Es ist zehn nach zehn."}, {q: "07:20", a: "Es ist zwanzig nach sieben."}, {q: "05:50", a: "Es ist zehn vor sechs."}, {q: "03:30", a: "Es ist halb vier."}, {q: "01:05", a: "Es ist fünf nach eins."}, {q: "11:55", a: "Es ist fünf vor zwölf."}],
[{q: "Ich (fernsehen) am Abend.", a: "Ich sehe am Abend fern."}, {q: "Wir (aufstehen) um 7 Uhr.", a: "Wir stehen um 7 Uhr auf."}, {q: "Er (anrufen) seinen Vater.", a: "Er ruft seinen Vater an."}, {q: "Du (fernsehen) oft.", a: "Du siehst oft fern."}, {q: "Sie (aufstehen) früh.", a: "Sie steht früh auf."}, {q: "Ich (anrufen) meine Mutter.", a: "Ich rufe meine Mutter an."}, {q: "Wir (fernsehen) gerne.", a: "Wir sehen gerne fern."}, {q: "Paul (aufstehen) spät.", a: "Paul steht spät auf."}, {q: "Wer (anrufen) heute an?", a: "Wer ruft heute an?"}, {q: "Ich (fernsehen) nicht.", a: "Ich sehe nicht fern."}],
[{q: "Напиши: Јас најмногу сакам да играм фудбал.", a: "Ich spiele am liebsten Fußball."}, {q: "Повеќе сакам да играм фудбал од тенис. Напиши:", a: "Ich spiele lieber Fußball als Tennis."}, {q: "Јас сакам да пливам. Напиши:", a: "Ich schwimme gern."}, {q: "Читањето е моето омилено хоби. Напиши:", a: "Lesen ist mein Lieblingshobby."}, {q: "Јас сликам, но повеќе сакам да слушам музика. Напиши:", a: "Ich male, aber ich höre lieber Musik."}, {q: "Моето омилено хоби е јавањето. Напиши:", a: "Mein Lieblingshobby ist Reiten."}, {q: "Јас пеам со задоволство. Напиши:", a: "Ich singe gern."}, {q: "Јас најмногу сакам пица. Напиши:", a: "Ich mag Pizza am liebsten."}, {q: "Моето омилено хоби е играње фудбал. Напиши:", a: "Mein Lieblingshobby ist Fußball spielen."}, {q: "Повеќе сакам да учам германски отколку математика. Напиши:", a: "Ich lerne lieber Deutsch als Mathe."}],
[{q: "Wo siehst du Fußball?", a: "Ich sehe Fußball im Stadion."}, {q: "Wo isst du Eis?", a: "Ich esse Eis in der Eisdiele."}, {q: "Wo reitest du?", a: "Ich reite in der Reithalle."}, {q: "Wo schwimmst du?", a: "Ich schwimme im Schwimmbad."}, {q: "Wo siehst du einen Film?", a: "Ich sehe einen Film im Kino."}, {q: "Wo lernst du viel?", a: "Ich lerne viel in der Schule."}, {q: "Wo spielst du Tennis?", a: "Ich spiele Tennis im Park."}, {q: "Wo triffst du Freunde?", a: "Ich treffe Freunde im Café."}, {q: "Wo liest du Bücher?", a: "Ich lese Bücher in der Bibliothek."}, {q: "Wo spielst du?", a: "Ich spiele im Garten."}],
[{q: "Пол вози велосипед наутро.", a: "Paul fährt am Morgen Rad."}, {q: "Јас учам после пладне.", a: "Ich lerne am Nachmittag."}, {q: "Ние можеме да играме тенис.", a: "Wir können Tennis spielen."}, {q: "Ich mache am Abend die Hausaufgabe.", a: "Јас ја правам домашната навечер."}, {q: "Пол и Лиза се санкаат во зима.", a: "Paul und Lisa fahren im Winter Schlitten."}, {q: "Јас сум висок.", a: "Ich bin groß."}, {q: "Тој е паметен.", a: "Er ist intelligent."}, {q: "Ние јадеме јаболко.", a: "Wir essen einen Apfel."}, {q: "Таткото работи.", a: "Der Vater arbeitet."}, {q: "Играш фудбал?", a: "Spielst du Fußball?"}],
[{q: "____ Mann spielt Fußball.", a: "der"}, {q: "Ich suche ____ Bleistift.", a: "den"}, {q: "____ Apfel schmeckt gut.", a: "den"}, {q: "____ Vater arbeitet viel.", a: "der"}, {q: "Ich sehe ____ Hund im Park.", a: "den"}, {q: "____ Lehrer erklärt gut.", a: "der"}, {q: "Ich brauche ____ Stuhl hier.", a: "den"}, {q: "____ Computer ist kaputt.", a: "der"}, {q: "Er kauft ____ Wagen heute.", a: "den"}, {q: "____ Film dauert lang.", a: "der"}],
[{q: "Состави своја реченица (активности):", a: "USER_CUSTOM"}, {q: "Состави своја реченица (активности):", a: "USER_CUSTOM"}, {q: "Состави своја реченица (активности):", a: "USER_CUSTOM"}, {q: "Состави своја реченица (активности):", a: "USER_CUSTOM"}, {q: "Состави своја реченица (активности):", a: "USER_CUSTOM"}, {q: "Состави своја реченица (активности):", a: "USER_CUSTOM"}, {q: "Состави своја реченица (активности):", a: "USER_CUSTOM"}, {q: "Состави своја реченица (активности):", a: "USER_CUSTOM"}, {q: "Состави своја реченица (активности):", a: "USER_CUSTOM"}, {q: "Состави своја реченица (активности):", a: "USER_CUSTOM"}],
[{q: "Wir - können - heute - Volleyball - im Sportunterricht - spielen", a: "Wir können heute im Sportunterricht Volleyball spielen."}, {q: "Ich - muss - am Abend - meine Hausaufgaben - machen", a: "Ich muss am Abend meine Hausaufgaben machen."}, {q: "Paul - möchte - im Winter - with Lisa - Schlitten - fahren", a: "Paul möchte im Winter mit Lisa Schlitten fahren."}, {q: "Wir - dürfen - heute - im Park - länger - spielen", a: "Wir dürfen heute im Park länger spielen."}, {q: "Er - will - am Wochenende - nach Berlin - reisen", a: "Er will am Wochenende nach Berlin reisen."}, {q: "Du - musst - jetzt - sofort - nach Hause - gehen", a: "Du musst jetzt sofort nach Hause gehen."}, {q: "Wir - können - morgen - zusammen - Musik - hören", a: "Wir können morgen zusammen Musik hören."}, {q: "Sie - möchte - heute - im Kino - einen Film - sehen", a: "Sie möchte heute im Kino einen Film sehen."}, {q: "Ich - kann - am Nachmittag - gut - Rad - fahren", a: "Ich kann am Nachmittag gut Rad fahren."}, {q: "Ihr - wollt - am Abend - im Restaurant - Pizza - essen", a: "Ihr wollt am Abend im Restaurant Pizza essen."}]
];
const tabContainer = document.getElementById('tabs');
const testContainer = document.getElementById('test-container');
categories.forEach((cat, idx) => {
const btn = document.createElement('button');
btn.className = `tab-btn px-3 py-1 text-sm font-bold border rounded ${idx === 0 ? 'active' : ''}`;
btn.innerText = cat;
btn.onclick = () => {
document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
btn.classList.add('active');
document.getElementById('cat-' + idx).classList.add('active');
};
tabContainer.appendChild(btn);
const div = document.createElement('div');
div.id = 'cat-' + idx;
div.className = `tab-content ${idx === 0 ? 'active' : ''}`;
// Додавање на упатство
div.innerHTML = `<div class="bg-yellow-100 p-3 mb-4 rounded border-l-4 border-yellow-500 text-sm font-semibold text-yellow-800">${taskInstructions[idx]}</div>`;
if (idx === 3) { // Вежба 4 со помош
div.innerHTML += `
<div class="mb-4 p-3 bg-blue-50 border border-blue-200 rounded">
<p class="font-bold text-blue-800 mb-2">Помош (Локации):</p>
<ul class="flex flex-wrap gap-2 text-sm">
<li class="bg-white px-2 py-1 border rounded">im Stadion</li>
<li class="bg-white px-2 py-1 border rounded">in der Eisdiele</li>
<li class="bg-white px-2 py-1 border rounded">in der Reithalle</li>
<li class="bg-white px-2 py-1 border rounded">im Schwimmbad</li>
<li class="bg-white px-2 py-1 border rounded">im Kino</li>
<li class="bg-white px-2 py-1 border rounded">in der Schule</li>
<li class="bg-white px-2 py-1 border rounded">im Park</li>
<li class="bg-white px-2 py-1 border rounded">im Café</li>
<li class="bg-white px-2 py-1 border rounded">in der Bibliothek</li>
<li class="bg-white px-2 py-1 border rounded">im Garten</li>
</ul>
</div>
`;
} else if(idx === 6) {
div.innerHTML += `
<p class="mb-4 text-blue-800 font-bold">Искористи ги фразите:
<button onclick="addText('Ich spiele gern Fußball')" class="bg-gray-200 p-1 rounded">Ich spiele gern Fußball</button>
<button onclick="addText('Ich schwimme im Pool')" class="bg-gray-200 p-1 rounded">Ich schwimme im Pool</button>
<button onclick="addText('Ich fahre Rad im Park')" class="bg-gray-200 p-1 rounded">Ich fahre Rad im Park</button>
</p>
<textarea id="custom-area" class="w-full h-32 border p-2" placeholder="Напиши што сакаш да правиш во слободно време..."></textarea>
<button onclick="alert('Одлично! Твојот состав е зачуван (локално).')" class="bg-green-600 text-white px-4 py-2 mt-2">Зачувај</button>
`;
}
if (idx !== 6) {
tasks[idx].forEach((t, i) => {
div.innerHTML += `
<div class="p-3 bg-gray-50 rounded border my-2">
<p class="font-medium">${i+1}. ${t.q}</p>
<input id="in-${idx}-${i}" class="w-full border p-1 mt-1 rounded">
<button onclick="check('in-${idx}-${i}', '${t.a}')" class="bg-blue-600 text-white px-3 py-1 rounded mt-2 text-sm">Провери</button>
</div>`;
});
}
testContainer.appendChild(div);
});
function check(id, sol) {
alert(document.getElementById(id).value.trim().toLowerCase() === sol.toLowerCase() ? "✅ Точно! Браво!" : "❌ Обиди се повторно! Точно: " + sol);
}
function addText(text) { document.getElementById('custom-area').value += text + " "; }
</script>
</body>
</html><div class="blogger-post-footer">www.bloglines.com</div>Anica Petkoskahttp://www.blogger.com/profile/12340858614356870735noreply@blogger.comtag:blogger.com,1999:blog-26523155.post-35164909922205958672026-05-25T23:13:03.150+02:002026-06-02T09:20:18.270+02:00Да/Не прашања во Präsens и Perfekt <!-- Стилизација за Blogger (CSS) -->
<style>
.nk-container {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
color: #333;
line-height: 1.6;
max-width: 850px;
margin: 20px auto;
background: #ffffff;
padding: 20px;
border-radius: 12px;
box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}
.nk-header {
text-align: center;
border-bottom: 3px solid #4a90e2;
padding-bottom: 15px;
margin-bottom: 25px;
}
.nk-header h2 {
color: #2c3e50;
margin: 0;
font-size: 26px;
}
.nk-header p {
color: #7f8c8d;
font-style: italic;
margin: 5px 0 0 0;
}
/* Систем на јазичиња (Tabs) */
.nk-tabs {
display: flex;
flex-wrap: wrap;
border-bottom: 2px solid #ddd;
margin-bottom: 20px;
}
.nk-tab-btn {
padding: 12px 20px;
cursor: pointer;
background: #f8f9fa;
border: 1px solid #ddd;
border-bottom: none;
margin-right: 5px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
font-weight: bold;
color: #555;
transition: all 0.3s ease;
}
.nk-tab-btn:hover {
background: #e9ecef;
color: #000;
}
.nk-tab-btn.active {
background: #4a90e2;
color: white;
border-color: #4a90e2;
margin-bottom: -2px;
}
.nk-tab-content {
display: none;
padding: 15px 5px;
}
.nk-tab-content.active {
display: block;
}
/* Табели и Граматика */
.nk-table {
width: 100%;
border-collapse: collapse;
margin: 15px 0;
}
.nk-table th, .nk-table td {
border: 1px solid #dbdbdb;
padding: 10px;
text-align: left;
}
.nk-table th {
background-color: #f1f4f9;
color: #2c3e50;
}
.nk-badge {
padding: 3px 8px;
border-radius: 4px;
font-size: 12px;
font-weight: bold;
}
.badge-p { background: #d4edda; color: #155724; }
.badge-pf { background: #cce5ff; color: #004085; }
/* Звучни картички */
.audio-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 15px;
margin-top: 15px;
}
.audio-card {
background: #f8f9fa;
border-left: 5px solid #4a90e2;
padding: 15px;
border-radius: 6px;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.audio-card strong {
display: block;
color: #2c3e50;
margin-bottom: 8px;
}
.listen-btn {
background: #4a90e2;
color: white;
border: none;
padding: 6px 12px;
border-radius: 4px;
cursor: pointer;
font-size: 13px;
}
.listen-btn:hover { background: #357abd; }
/* Модерен Квиз */
.quiz-container {
background: #f9f9f9;
padding: 20px;
border-radius: 8px;
border: 1px solid #e0e0e0;
}
.quiz-card {
display: none;
}
.quiz-card.active {
display: block;
}
.quiz-q {
font-weight: bold;
font-size: 18px;
margin-bottom: 15px;
color: #2c3e50;
}
.quiz-options label {
display: block;
background: white;
padding: 12px;
margin-bottom: 10px;
border: 1px solid #ddd;
border-radius: 6px;
cursor: pointer;
transition: background 0.2s;
}
.quiz-options label:hover { background: #f1f4f9; }
.quiz-options input {
margin-right: 10px;
}
.quiz-controls {
margin-top: 20px;
display: flex;
justify-content: space-between;
}
.quiz-btn {
background: #27ae60;
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
font-weight: bold;
}
.quiz-btn:hover { background: #219653; }
.quiz-btn-nav {
background: #7f8c8d;
color: white;
border: none;
padding: 10px 15px;
border-radius: 5px;
cursor: pointer;
}
.quiz-btn-nav:hover { background: #6c7a7d; }
.quiz-feedback {
margin-top: 15px;
font-weight: bold;
padding: 12px;
border-radius: 5px;
display: none;
}
/* Катче за пишување */
.writing-zone {
background: #fff8e1;
padding: 20px;
border-radius: 8px;
border: 1px solid #ffe082;
}
.writing-textarea {
width: 100%;
height: 150px;
padding: 12px;
border: 1px solid #ccc;
border-radius: 6px;
resize: vertical;
box-sizing: border-box;
font-size: 15px;
}
.note-privacy {
font-size: 12px;
color: #7f8c8d;
margin-top: 5px;
display: block;
}
</style>
<div class="nk-container">
<div class="nk-header">
<h2>Германски јазик: Да/Не прашања и Родови</h2>
<p>Интерактивен водич за граматика, слушање и вежбање</p>
</div>
<!-- Копчиња за Јазичиња -->
<div class="nk-tabs">
<div class="nk-tab-btn active" onclick="openNkTab(event, 'tab-grammar')">📖 Читање и Граматика</div>
<div class="nk-tab-btn" onclick="openNkTab(event, 'tab-audio')">🎧 Звучни картички</div>
<div class="nk-tab-btn" onclick="openNkTab(event, 'tab-quiz')">✏️ Квиз (5 задачи)</div>
<div class="nk-tab-btn" onclick="openNkTab(event, 'tab-writing')">📝 Катче за пишување</div>
</div>
<!-- ЈАЗИЧЕ 1: ГРАМАТИКА -->
<div id="tab-grammar" class="nk-tab-content active">
<h3>1. Збороред кај Да/Не прашања (Satzfragen)</h3>
<p>Кај Да/Не прашањата, коњугираниот глагол стои на <strong>Позиција 1</strong>. Во одговорите, <em>Ja</em> и <em>Nein</em> стојат пред запирката и не ја менуваат позицијата на глаголот (тој оди на Позиција 2).</p>
<table class="nk-table">
<thead>
<tr>
<th>Време / Тип</th>
<th>Структура на реченицата</th>
<th>Пример</th>
</tr>
</thead>
<tbody>
<tr>
<td><span class="nk-badge badge-p">Präsens</span> Прашање</td>
<td><strong>Глагол</strong> + Субјект + Објект?</td>
<td><em>Machst du heute die Hausaufgaben?</em></td>
</tr>
<tr>
<td><span class="nk-badge badge-p">Präsens</span> Одговор</td>
<td>Ja/Nein, Субјект + <strong>Глагол</strong>...</td>
<td><em>Ja, ich mache heute die Hausaufgaben.</em></td>
</tr>
<tr>
<td><span class="nk-badge badge-pf">Perfekt</span> Прашање</td>
<td><strong>Haben/Sein</strong> + Субјект + ... + <strong>Партицип II</strong>?</td>
<td><em>Hast du gestern Deutsch gelernt?</em></td>
</tr>
<tr>
<td><span class="nk-badge badge-pf">Perfekt</span> Одговор</td>
<td>Ja, ich <strong>habe</strong> gestern Deutsch <strong>gelernt</strong>.</td>
<td><em>Партиципот секогаш оди на крај!</em></td>
</tr>
</tbody>
</table>
<h3>2. Прилози за време (Temporale Adverbien)</h3>
<ul>
<li><strong>За сегашно време (Präsens):</strong> <em>heute</em> (денес), <em>jetzt</em> (сега), <em>immer</em> (секогаш).</li>
<li><strong>За минато време (Perfekt):</strong> <em>gestern</em> (вчера), <em>vorher</em> / <em>früher</em> (претходно, порано).</li>
</ul>
<h3>3. Избор на помошен глагол во минато време: Haben vs. Sein</h3>
<ul>
<li><strong>SEIN + Партицип:</strong> Се користи за глаголи кои означуваат движење од точка А до точка Б.
<br><em>Примери:</em> <strong>gehen</strong> (gegangen) ➡️ <em>Ich bin gegangen.</em> | <strong>fahren</strong> (gefahren) ➡️ <em>Ich bin gefahren.</em></li>
<li><strong>HABEN + Партицип:</strong> Се користи за сите останати глаголи.
<br><em>Примери:</em> <strong>machen</strong> (gemacht), <strong>lernen</strong> (gelernt), <strong>arbeiten</strong> (gearbeitet), <strong>besuchen</strong> (besucht).</li>
</ul>
<h3>4. Негација: Nein vs. Kein и падежи (Nominativ / Akkusativ)</h3>
<p>Зборчето <strong>nicht</strong> го користиме за негирање на цела реченица, глагол или правец (на пр. <em>nicht nach Berlin</em>). Кога негираме именка со неодреден член, користиме <strong>kein/keine</strong> прилагодено според родот во Акузатив (Објект):</p>
<table class="nk-table">
<thead>
<tr>
<th>Род</th>
<th>Номинатив (Субјект)</th>
<th>Акузатив (Објект)</th>
<th>Негација во Акузатив</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>Машки (der)</strong></td>
<td>ein Freund</td>
<td><strong>einen</strong> Freund</td>
<td><strong>keinen</strong> Freund</td>
</tr>
<tr>
<td><strong>Женски (die)</strong></td>
<td>eine Tasche / die Pizza</td>
<td><strong>eine</strong> Tasche / <strong>eine</strong> Pizza</td>
<td><strong>keine</strong> Tasche / Pizza</td>
</tr>
<tr>
<td><strong>Среден (das)</strong></td>
<td>ein Buch / ein Stück</td>
<td><strong>ein</strong> Buch / <strong>ein</strong> Stück</td>
<td><strong>kein</strong> Buch / <strong>kein</strong> Stück</td>
</tr>
<tr>
<td><strong>Множина (die)</strong></td>
<td>Bücher</td>
<td>Bücher</td>
<td><strong>keine</strong> Bücher</td>
</tr>
</tbody>
</table>
</div>
<!-- ЈАЗИЧЕ 2: СЛУШАЊЕ -->
<div id="tab-audio" class="nk-tab-content">
<h3>🎧 Слушај и изговарај правилно</h3>
<p>Кликни на копчето за да го слушнеш правилниот германски изговор за примерите:</p>
<div class="audio-grid">
<div class="audio-card">
<strong>Liest du heute ein Buch?</strong>
<button class="listen-btn" onclick="playText('Liest du heute ein Buch?')">▶ Слушај</button>
</div>
<div class="audio-card">
<strong>Ich bin nach Berlin gefahren.</strong>
<button class="listen-btn" onclick="playText('Ich bin nach Berlin gefahren.')">▶ Слушај</button>
</div>
<div class="audio-card">
<strong>Hast du deinen Freund besucht?</strong>
<button class="listen-btn" onclick="playText('Hast du deinen Freund besucht?')">▶ Слушај</button>
</div>
<div class="audio-card">
<strong>Ich esse kein Stück Torte.</strong>
<button class="listen-btn" onclick="playText('Ich esse kein Stück Torte.')">▶ Слушај</button>
</div>
</div>
</div>
<!-- ЈАЗИЧЕ 3: ИНТЕРАКТИВЕН КВИЗ -->
<div id="tab-quiz" class="nk-tab-content">
<h3>✏️ Интерактивен квиз: Провери го знаењето</h3>
<div class="quiz-container">
<!-- Прашање 1 -->
<div class="quiz-card active" id="qcard-0">
<div class="quiz-q">1. Како гласи точната негација во минато време (Perfekt) за машки род (Freund)?</div>
<div class="quiz-options">
<label><input type="radio" name="quiz-opt-0" value="A"> Ich habe gestern nicht meinen Freund besucht.</label>
<label><input type="radio" name="quiz-opt-0" value="B"> Ich habe gestern keine Freund besucht.</label>
<label><input type="radio" name="quiz-opt-0" value="C"> Ich habe gestern keinen Freund besucht.</label>
</div>
</div>
<!-- Прашање 2 -->
<div class="quiz-card" id="qcard-1">
<div class="quiz-q">2. Кој е точниот одречен одговор за среден род (das Stück) во Präsens?</div>
<div class="quiz-options">
<label><input type="radio" name="quiz-opt-1" value="A"> Nein, ich esse heute kein Stück Schokoladetorte.</label>
<label><input type="radio" name="quiz-opt-1" value="B"> Nein, ich esse heute nicht ein Stück Schokoladetorte.</label>
<label><input type="radio" name="quiz-opt-1" value="C"> Nein, ich esse heute keinen Stück Schokoladetorte.</label>
</div>
</div>
<!-- Прашање 3 -->
<div class="quiz-card" id="qcard-2">
<div class="quiz-q">3. Каде стои партиципот за минато време (на пр. 'gegangen') во германската реченица?</div>
<div class="quiz-options">
<label><input type="radio" name="quiz-opt-2" value="A"> Веднаш по помошниот глагол (bin/habe).</label>
<label><input type="radio" name="quiz-opt-2" value="B"> На самиот крај на реченицата.</label>
<label><input type="radio" name="quiz-opt-2" value="C"> На почетокот на реченицата, пред субјектот.</label>
</div>
</div>
<!-- Прашање 4 -->
<div class="quiz-card" id="qcard-3">
<div class="quiz-q">4. Кој помошен глагол го бара глаголот 'fahren' во минато време (Perfekt)?</div>
<div class="quiz-options">
<label><input type="radio" name="quiz-opt-3" value="A"> haben (ich habe gefahren)</label>
<label><input type="radio" name="quiz-opt-3" value="B"> sein (ich bin gefahren)</label>
<label><input type="radio" name="quiz-opt-3" value="C"> werden (ich werde gefahren)</label>
</div>
</div>
<!-- Прашање 5 -->
<div class="quiz-card" id="qcard-4">
<div class="quiz-q">5. Како гласи правилниот партицип за минато време од глаголот 'besuchen'?</div>
<div class="quiz-options">
<label><input type="radio" name="quiz-opt-4" value="A"> gebesucht</label>
<label><input type="radio" name="quiz-opt-4" value="B"> besuchen</label>
<label><input type="radio" name="quiz-opt-4" value="C"> besucht</label>
</div>
</div>
<!-- Контроли за квизот -->
<div class="quiz-controls">
<button class="quiz-btn-nav" id="prev-btn" onclick="changeQuestion(-1)" disabled>⬅ Претходно</button>
<button class="quiz-btn" onclick="evaluateCurrentQuestion()">Провери одговор</button>
<button class="quiz-btn-nav" id="next-btn" onclick="changeQuestion(1)">Следно ➡</button>
</div>
<div class="quiz-feedback" id="quiz-system-feedback"></div>
</div>
</div>
<!-- ЈАЗИЧЕ 4: КАТЧЕ ЗА ПИШУВАЊЕ -->
<div id="tab-writing" class="nk-tab-content">
<h3>📝 Твоето катче за пишување (Прашање и Водич)</h3>
<div class="writing-zone">
<p><strong>Водич за денес:</strong> Напиши три реченици во Perfekt. Една со глагол за движење (sein), една со негација <em>kein</em> за среден род (das Buch) и една со прилогот <em>gestern</em>.</p>
<textarea class="writing-textarea" placeholder="Започни со пишување на твоите германски реченици овде..."></textarea>
<small class="note-privacy">*Напомена: Ова поле е за твоја лична вежба во моментот. Напишаниот текст не се зачувува на серверот со цел да се зачува твојата приватност.</small>
</div>
</div>
</div>
<!-- Скрипти за функционалност (JavaScript) -->
<script>
// Промена на главните јазичиња
function openNkTab(evt, tabId) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("nk-tab-content");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
tabcontent[i].classList.remove("active");
}
tablinks = document.getElementsByClassName("nk-tab-btn");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].classList.remove("active");
}
document.getElementById(tabId).style.display = "block";
document.getElementById(tabId).classList.add("active");
evt.currentTarget.classList.add("active");
// Чистење на фидбекот при промена на таб
document.getElementById('quiz-system-feedback').style.display = "none";
}
// Звук (Text-to-Speech)
function playText(text) {
if ('speechSynthesis' in window) {
var speech = new SpeechSynthesisUtterance(text);
speech.lang = 'de-DE';
speech.pitch = 1;
speech.rate = 0.85;
window.speechSynthesis.speak(speech);
} else {
alert("Твојот прелистувач не поддржува звук.");
}
}
// Логика за Квизот со повеќе прашања
var currentQuestionIndex = 0;
var totalQuestions = 5;
var correctAnswers = ["C", "A", "B", "B", "C"];
var rationales = [
"🎉 Точно! 'Freund' е машки род, па во Акузатив (објект) станува 'keinen'.",
"🎉 Точно! 'Stück' е од среден род (das Stück), па негацијата гласи 'kein'.",
"🎉 Точно! Во Perfekt структурата, главниот партицип секогаш стои на апсолутниот крај на реченицата.",
"🎉 Точно! Бидејќи 'fahren' означува движење од место до место, во минато време го бара помошниот глагол 'sein'.",
"🎉 Точно! Глаголите што почнуваат со префиксот 'be-' не добиваат 'ge-' во Perfekt, туку само наставка '-t'."
];
function changeQuestion(direction) {
// Сокриј го моменталното прашање
document.getElementById("qcard-" + currentQuestionIndex).classList.remove("active");
// Промени го индексот
currentQuestionIndex += direction;
// Прикажи го новото прашање
document.getElementById("qcard-" + currentQuestionIndex).classList.add("active");
// Контрола на копчињата за навигација
document.getElementById("prev-btn").disabled = (currentQuestionIndex === 0);
document.getElementById("next-btn").disabled = (currentQuestionIndex === totalQuestions - 1);
// Сокриј го фидбекот за новото прашање
document.getElementById('quiz-system-feedback').style.display = "none";
}
function evaluateCurrentQuestion() {
var options = document.getElementsByName('quiz-opt-' + currentQuestionIndex);
var selectedValue = "";
for (var i = 0; i < options.length; i++) {
if (options[i].checked) {
selectedValue = options[i].value;
}
}
var feedback = document.getElementById('quiz-system-feedback');
feedback.style.display = "block";
if (selectedValue === "") {
feedback.style.backgroundColor = "#f8d7da";
feedback.style.color = "#721c24";
feedback.innerHTML = "⚠️ Ве молиме изберете еден од понудените одговори.";
return;
}
if (selectedValue === correctAnswers[currentQuestionIndex]) {
feedback.style.backgroundColor = "#d4edda";
feedback.style.color = "#155724";
feedback.innerHTML = rationales[currentQuestionIndex];
} else {
feedback.style.backgroundColor = "#f8d7da";
feedback.style.color = "#721c24";
feedback.innerHTML = "❌ Неточно. Погледни ја табелата во јазичето 'Граматика' и обиди се пак за ова прашање!";
}
}
</script><div class="blogger-post-footer">www.bloglines.com</div>Anica Petkoskahttp://www.blogger.com/profile/12340858614356870735noreply@blogger.comtag:blogger.com,1999:blog-26523155.post-62875628964346415132026-05-24T21:11:36.342+02:002026-05-24T21:11:36.342+02:00Интерактивна лекција: Германски јазик низ филмски и театарски спомени<style>
.blog-container {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
color: #333;
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
/* Стилизирање на јазичињата (Tabs) */
.tabs-nav {
display: flex;
flex-wrap: wrap;
border-bottom: 2px solid #17a2b8;
margin-bottom: 20px;
padding: 0;
list-style: none;
}
.tab-link {
background-color: #f1f1f1;
border: 1px solid #ccc;
border-bottom: none;
outline: none;
cursor: pointer;
padding: 10px 20px;
font-weight: bold;
color: #555;
transition: all 0.2s ease;
border-radius: 5px 5px 0 0;
margin-right: 4px;
margin-bottom: -2px;
}
.tab-link:hover {
background-color: #e2e2e2;
}
.tab-link.active {
background-color: #17a2b8;
color: white;
border-color: #17a2b8;
}
.tab-content {
display: none;
padding: 20px;
border: 1px solid #bee5eb;
border-radius: 0 0 8px 8px;
background-color: #fff;
}
.tab-content.active {
display: block;
}
/* Нов аудио плеер со копчиња */
.audio-control-panel {
background: #e9ecef;
padding: 15px;
border-radius: 8px;
margin-bottom: 20px;
border: 1px solid #ced4da;
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
}
.audio-btn {
background-color: #28a745;
color: white;
border: none;
padding: 10px 20px;
font-size: 1em;
font-weight: bold;
border-radius: 5px;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
transition: background 0.2s;
}
.audio-btn:hover { background-color: #218838; }
.audio-btn.stop { background-color: #dc3545; }
.audio-btn.stop:hover { background-color: #c82333; }
.story-box {
background-color: #f9f9f9;
border-left: 4px solid #17a2b8;
padding: 15px 20px;
margin-bottom: 20px;
font-size: 1.1em;
}
.grammar-box {
background-color: #fff3cd;
border: 1px solid #ffeeba;
padding: 20px;
border-radius: 8px;
}
.grammar-box h3 { color: #856404; margin-top:0; }
/* Вежби за пишување и прашања */
.writing-question {
background-color: #f8f9fa;
border: 1px solid #dee2e6;
padding: 15px;
margin-bottom: 25px;
border-radius: 6px;
}
.writing-question label {
font-weight: bold;
display: block;
margin-bottom: 8px;
color: #212529;
}
.writing-input {
width: 100%;
height: 80px;
padding: 10px;
border: 1px solid #ced4da;
border-radius: 4px;
resize: vertical;
font-family: inherit;
box-sizing: border-box;
margin-bottom: 10px;
}
.check-btn {
background-color: #6c757d;
color: white;
border: none;
padding: 6px 12px;
border-radius: 4px;
cursor: pointer;
font-size: 0.9em;
}
.check-btn:hover { background-color: #5a6268; }
.sample-answer {
display: none;
margin-top: 10px;
padding: 10px;
background-color: #d4edda;
color: #155724;
border-radius: 4px;
font-size: 0.95em;
}
/* Квиз */
.quiz-question { font-weight: bold; margin-bottom: 15px; font-size: 1.1em; }
.quiz-options { list-style-type: none; padding: 0; }
.quiz-options li { margin-bottom: 10px; }
.quiz-btn {
background-color: #fff;
border: 2px solid #17a2b8;
color: #17a2b8;
padding: 10px 15px;
width: 100%;
text-align: left;
border-radius: 5px;
cursor: pointer;
transition: all 0.2s ease;
}
.quiz-btn:hover { background-color: #17a2b8; color: #fff; }
.feedback { margin-top: 15px; padding: 10px; border-radius: 5px; font-weight: bold; display: none; }
.correct { background-color: #d4edda; color: #155724; }
.incorrect { background-color: #f8d7da; color: #721c24; }
.nav-buttons { display: flex; justify-content: space-between; margin-top: 20px; }
.nav-btn { background-color: #17a2b8; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; }
.nav-btn:disabled { background-color: #cccccc; cursor: not-allowed; }
/* Фрази и Табели */
.phrase-table {
width: 100%;
border-collapse: collapse;
margin-top: 15px;
}
.phrase-table th, .phrase-table td {
border: 1px solid #dee2e6;
padding: 10px;
text-align: left;
}
.phrase-table th { background-color: #e9ecef; }
</style>
<div class="blog-container">
<h2>Lektion: Meine Kino- und Theatererlebnisse</h2>
<p>Добредојдовте во денешната интерактивна лекција. Слушнете го правилниот изговор, а потоа тестирајте го вашето знаење.</p>
<!-- Навигација со јазичиња -->
<ul class="tabs-nav">
<li><button class="tab-link active" onclick="openTab(event, 'tab-reading')">1. Читање & Слушање</button></li>
<li><button class="tab-link" onclick="openTab(event, 'tab-grammar')">2. Граматика</button></li>
<li><button class="tab-link" onclick="openTab(event, 'tab-quiz')">3. Квиз</button></li>
<li><button class="tab-link" onclick="openTab(event, 'tab-writing')">4. Разбирање & Пишување</button></li>
<li><button class="tab-link" onclick="openTab(event, 'tab-phrases')">5. Фрази & Прашања</button></li>
</ul>
<!-- ЈАЗИЧЕ 1: ЧИТАЊЕ И СЛУШАЊЕ -->
<div id="tab-reading" class="tab-content active">
<!-- Интерактивен панел за аудио говор -->
<div class="audio-control-panel">
<button class="audio-btn" id="play-audio-btn" onclick="speakText()">
▶ Слушај го текстот (Hören)
</button>
<button class="audio-btn stop" onclick="stopText()">
■ Стоп (Stopp)
</button>
</div>
<div class="story-box" id="german-text-content">
<p>Ich liebe Filme und das Theater! Vor zwei Tagen habe ich zu Hause einen wunderbaren Film mit Julia Roberts und Susan Sarandon gesehen. Aber ich glaube, es ist viel interessanter, ins Kino zu gehen, weil es dort viele Leute gibt und ich frisches Popcorn kaufen kann! Leider haben wir kein Kino in unserer Stadt. Vielleicht können wir bald nach Skopje ins Kino gehen, um etwas Gutes zu sehen.</p>
<p>Filme mit Tom Hanks, Susan Sarandon und Julia Roberts mag ich am liebsten. Ich habe den Klassiker „Schlaflos in Seattle“ schon zehnmal gesehen! Ich habe damit kein Problem, denn das Finale auf dem Empire State Building ist einfach magisch.</p>
<p>Das erste Mal habe ich diesen Film 1995 gesehen, als ich in den USA war. Ich habe damals die schönen Städte New Orleans und Atlanta besucht, war in Tuscaloosa in Alabama und in der Hauptstadt Washington D.C. Dort war ich auch im Theater und habe eine interaktive Komödie gesehen. Ein Friseur wurde ermordet, und das Publikum musste dem Detektiv helfen, den Fall zu lösen. Das Publikum durfte Fragen stellen und am Ende abstimmen, wer der Mörder war. Das war eine völlig neue und unvergessliche Erfahrung für mich!</p>
</div>
</div>
<!-- ЈАЗИЧЕ 2: ГРАМАТИКА -->
<div id="tab-grammar" class="tab-content">
<div class="grammar-box">
<h3>Grammatik-Ecke (Граматичко катче)</h3>
<ul>
<li><strong>Позиција по „Vielleicht“:</strong> По зборот <i>vielleicht</i> (можеби), глаголот доаѓа веднаш на второ место во реченицата.
<br><small><b>Пример:</b> Vielleicht <u>können</u> wir bald nach Skopje fahren.</small>
</li>
<li><strong>Редослед на зборови со „weil“:</strong> Во речениците со <i>weil</i> (бидејќи), конјугираниот глаголот се сели на самиот крај на реченицата.
<br><small><b>Пример:</b> ..., weil es dort viele Leute <u>gibt</u>.</small>
</li>
<li><strong>Претпочитање со „Lieber“:</strong> Кога сакаме да кажеме дека нешто повеќе сакаме да го правиме, користиме <i>lieber</i> (не ги мешаме gern и lieber одеднаш).
<br><small><b>Пример:</b> Ich gehe <u>lieber</u> alleine ins Kino.</small>
</li>
<li><strong>Кажување на години:</strong> На германски пред бројката на годината не велиме „im“, туку само ја кажуваме годината или фразата „im Jahr...“.
<br><small><b>Пример:</b> Ich habe den Film <u>1995</u> (или <u>im Jahr 1995</u>) gesehen.</small>
</li>
</ul>
</div>
</div>
<!-- ЈАЗИЧЕ 3: КВИЗ -->
<div id="tab-quiz" class="tab-content">
<div class="quiz-section">
<div id="question-text" class="quiz-question"></div>
<ul id="options-list" class="quiz-options"></ul>
<div id="quiz-feedback" class="feedback"></div>
<div class="nav-buttons">
<button id="prev-btn" class="nav-btn" onclick="changeQuestion(-1)" disabled>Назад</button>
<button id="next-btn" class="nav-btn" onclick="changeQuestion(1)" disabled>Следно</button>
</div>
</div>
</div>
<!-- ЈАЗИЧЕ 4: РАЗБИРАЊЕ И ПИШУВАЊЕ -->
<div id="tab-writing" class="tab-content">
<h3>Fragen zum Text (Прашања за разбирање)</h3>
<p>Одговорете на прашањата на германски јазик за да го вежбате пишувањето:</p>
<div class="writing-question">
<label>1. Warum möchte die Erzählerin nach Skopje ins Kino gehen?</label>
<textarea class="writing-input" placeholder="Schreib deine Antwort auf Deutsch..."></textarea>
<button class="check-btn" onclick="toggleSample(this)">Види предлог-одговор</button>
<div class="sample-answer"><b>Можен одговор:</b> Weil es in ihrer Stadt kein Kino gibt und sie dort frisches Popcorn kaufen möchte.</div>
</div>
<div class="writing-question">
<label>2. Welchen Film hat sie schon zehnmal gesehen und warum mag sie ihn?</label>
<textarea class="writing-input" placeholder="Schreib deine Antwort auf Deutsch..."></textarea>
<button class="check-btn" onclick="toggleSample(this)">Види предлог-одговор</button>
<div class="sample-answer"><b>Можен одговор:</b> Sie hat „Schlaflos in Seattle“ zehnmal gesehen, weil das Finale auf dem Empire State Building magisch ist.</div>
</div>
<div class="writing-question">
<label>3. Was war das Besondere an dem Theaterstück in den USA?</label>
<textarea class="writing-input" placeholder="Schreib deine Antwort auf Deutsch..."></textarea>
<button class="check-btn" onclick="toggleSample(this)">Види predlog-odgovor</button>
<div class="sample-answer"><b>Можен одговор:</b> Das Theaterstück war interaktiv. Das Publikum musste dem Detektiv helfen und durfte über den Mörder abstimmen.</div>
</div>
</div>
<!-- ЈАЗИЧЕ 5: ФРАЗИ И СЛОБОДНО ПРАШАЊЕ -->
<div id="tab-phrases" class="tab-content">
<h3>Nützliche Ausdrücke (Корисни изрази)</h3>
<table class="phrase-table">
<thead>
<tr>
<th>Deutsch</th>
<th>Македонски</th>
</tr>
</thead>
<tbody>
<tr><td>Ich habe damit kein Problem.</td><td>Немам проблем со тоа.</td></tr>
<tr><td>das erste Mal</td><td>првиот пат</td></tr>
<tr><td>eine unvergessliche Erfahrung</td><td>незаборавно искуство</td></tr>
<tr><td>Ich gehe lieber alleine.</td><td>Повеќе сакам да одам сама.</td></tr>
<tr><td>etwas Gutes sehen</td><td>да се види нешто добро</td></tr>
</tbody>
</table>
<br>
<h3>Stell eine Frage (Постави прашање)</h3>
<div class="writing-question">
<label>Имате ли прашање во врска со текстот или граматиката? Напишете го тука како коментар или вежба:</label>
<textarea class="writing-input" placeholder="Schreib hier deine Frage oder deine eigene Kinogeschichte..."></textarea>
<p><small><i>Забелешка: Ова е место каде што читателите можат да вежбаат составување сопствени прашања или реченици.</i></small></p>
</div>
</div>
</div>
<script>
// Логика за автоматско читање (Текст во Говор)
let speech = null;
function speakText() {
// Го земаме чистиот текст од секцијата за приказна
const text = document.getElementById("german-text-content").innerText;
// Ако веќе зборува, го прекинуваме пред нов почеток
window.speechSynthesis.cancel();
speech = new SpeechSynthesisUtterance(text);
speech.lang = "de-DE"; // Го поставуваме прецизно на германски јазик
speech.rate = 0.9; // Малку пополека за подобро и лесно разбирање
window.speechSynthesis.speak(speech);
}
function stopText() {
if (window.speechSynthesis) {
window.speechSynthesis.cancel();
}
}
// Логика за префрлање јазичиња (Tabs)
function openTab(evt, tabName) {
stopText(); // Го запираме аудиото ако корисникот смени јазиче
const tabcontents = document.getElementsByClassName("tab-content");
for (let i = 0; i < tabcontents.length; i++) {
tabcontents[i].classList.remove("active");
}
const tablinks = document.getElementsByClassName("tab-link");
for (let i = 0; i < tablinks.length; i++) {
tablinks[i].classList.remove("active");
}
document.getElementById(tabName).classList.add("active");
evt.currentTarget.classList.add("active");
}
// Логика за прикажување предлог-одговори
function toggleSample(btn) {
const sample = btn.nextElementSibling;
if (sample.style.display === "block") {
sample.style.display = "none";
btn.innerText = "Види предлог-одговор";
} else {
sample.style.display = "block";
btn.innerText = "Сокриј предлог-одговор";
}
}
// Податоци за Квизот
const quizData = [
{
question: "1. Која реченица е граматички точна со зборот 'vielleicht'?",
options: [
"Vielleicht, wir können nach Skopje fahren.",
"Vielleicht können wir nach Skopje fahren.",
"Vielleicht wir nach Skopje fahren können."
],
correct: 1,
explain: "Точно! По 'vielleicht' глаголот (können) мора да биде веднаш на второ место."
},
{
question: "2. Како правилно завршува реченицата со 'weil'?",
options: [
"...weil es gibt dort viele Leute.",
"...weil es dort viele Leute gibt.",
"...weil dort gibt es viele Leute."
],
correct: 1,
explain: "Одлично! Во речениците со 'weil', конјугираниот глаголот (gibt) секогаш оди на самиот крај."
},
{
question: "3. Како точно се кажува годината 'во 1995' на германски?",
options: [
"Im 1995",
"Im Jahr 1995 (или само 1995)",
"In das 1995"
],
correct: 1,
explain: "Така е! Никогаш не се користи 'im' директно пред бројката на годината."
}
];
let currentQuestion = 0;
function loadQuestion() {
const q = quizData[currentQuestion];
document.getElementById("question-text").innerText = q.question;
const optionsList = document.getElementById("options-list");
optionsList.innerHTML = "";
q.options.forEach((option, index) => {
const li = document.createElement("li");
li.innerHTML = `<button class="quiz-btn" onclick="checkAnswer(${index})">${option}</button>`;
optionsList.appendChild(li);
});
document.getElementById("quiz-feedback").style.display = "none";
document.getElementById("prev-btn").disabled = currentQuestion === 0;
document.getElementById("next-btn").disabled = true;
if (currentQuestion === quizData.length - 1) {
document.getElementById("next-btn").innerText = "Рестартирај";
} else {
document.getElementById("next-btn").innerText = "Следно";
}
}
function checkAnswer(selectedIndex) {
const q = quizData[currentQuestion];
const feedback = document.getElementById("quiz-feedback");
feedback.style.display = "block";
if (selectedIndex === q.correct) {
feedback.className = "feedback correct";
feedback.innerText = q.explain;
document.getElementById("next-btn").disabled = false;
} else {
feedback.className = "feedback incorrect";
feedback.innerText = "Обиди се повторно! Размисли за позицијата на глаголот.";
}
}
function changeQuestion(direction) {
currentQuestion += direction;
if (currentQuestion < quizData.length) {
loadQuestion();
} else {
currentQuestion = 0;
loadQuestion();
}
}
// Вчитување на квизот при старт
loadQuestion();
</script>
<div class="blogger-post-footer">www.bloglines.com</div>Anica Petkoskahttp://www.blogger.com/profile/12340858614356870735noreply@blogger.comtag:blogger.com,1999:blog-26523155.post-80155481519269665552026-05-23T21:33:25.423+02:002026-05-23T22:09:48.659+02:00Ich finde diese roten Blumen am schönsten <style>
.lektion-container {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
color: #333;
line-height: 1.6;
max-width: 850px;
margin: 0 auto;
padding: 20px;
background-color: #fdfdfd;
}
.lektion-container h1 {
color: #d11a2a;
text-align: center;
border-bottom: 3px solid #d11a2a;
padding-bottom: 10px;
margin-bottom: 25px;
}
.lektion-container h2 {
color: #2c3e50;
border-left: 5px solid #3498db;
padding-left: 10px;
margin-top: 15px;
}
.lektion-container h3 {
color: #16a085;
}
/* СТИЛ ЗА ЈАЗИЧИЊАТА (TABS) */
.tab-menu {
display: flex;
flex-wrap: wrap;
border-bottom: 2px solid #e2e8f0;
margin-bottom: 20px;
padding: 0;
list-style: none;
}
.tab-btn {
background: #f1f5f9;
border: 1px solid #e2e8f0;
border-bottom: none;
padding: 10px 15px;
cursor: pointer;
font-weight: bold;
color: #475569;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
margin-right: 4px;
transition: all 0.2s ease;
}
.tab-btn:hover {
background: #e2e8f0;
}
.tab-btn.active-tab {
background: #3498db;
color: white;
border-color: #3498db;
}
.tab-content {
display: none;
animation: fadeIn 0.4s ease;
}
.tab-content.active-content {
display: block;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* ОСТАНАТИ СТИЛОВИ ЗА ВЕЖБИТЕ */
.audio-box {
background: #eef2f7;
padding: 15px;
border-radius: 6px;
margin: 15px 0;
display: flex;
align-items: center;
gap: 15px;
}
.lesetext {
background-color: #fff8dc;
padding: 20px;
border-left: 5px solid #f39c12;
border-radius: 4px;
font-size: 1.1em;
}
.flashcard-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
}
.flashcard {
background: #fff;
border: 1px solid #ddd;
padding: 15px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
display: flex;
flex-direction: column;
justify-content: space-between;
}
.card-actions {
display: flex;
gap: 10px;
margin-top: 10px;
}
.flashcard button {
background: #3498db;
color: white;
border: none;
padding: 6px 12px;
border-radius: 4px;
cursor: pointer;
font-weight: bold;
flex: 1;
}
.audio-btn {
background: #2ecc71 !important;
max-width: 45px;
font-size: 1.1em;
}
.grammatik-table {
width: 100%;
border-collapse: collapse;
margin: 15px 0;
}
.grammatik-table th, .grammatik-table td {
border: 1px solid #ddd;
padding: 10px;
text-align: left;
}
.grammatik-table th {
background-color: #34495e;
color: white;
}
.grammatik-table tr:nth-child(even) {
background-color: #f9f9f9;
}
.interactive-box {
background: #fcfcfc;
border: 1px solid #e0e0e0;
padding: 20px;
border-radius: 8px;
margin-bottom: 20px;
}
.word-badge {
display: inline-block;
background: #e0e0e0;
padding: 5px 10px;
margin: 5px;
border-radius: 4px;
cursor: pointer;
user-select: none;
}
.word-badge:hover {
background: #bdc3c7;
}
.drop-zone {
min-height: 40px;
border: 2px dashed #3498db;
background: #fff;
padding: 10px;
border-radius: 4px;
margin-bottom: 10px;
}
.quiz-question {
background: #fff;
border: 1px solid #e2e8f0;
padding: 15px;
border-radius: 6px;
margin-bottom: 15px;
}
.quiz-options button {
display: block;
width: 100%;
text-align: left;
padding: 10px;
margin: 5px 0;
border: 1px solid #cbd5e1;
border-radius: 4px;
background: #fff;
cursor: pointer;
}
.quiz-options button:hover {
background: #f1f5f9;
}
.correct {
background-color: #2ecc71 !important;
color: white !important;
border-color: #27ae60 !important;
}
.wrong {
background-color: #e74c3c !important;
color: white !important;
border-color: #c0392b !important;
}
.hint-btn {
background: #f39c12;
color: white;
border: none;
padding: 4px 10px;
border-radius: 4px;
font-size: 0.85em;
cursor: pointer;
margin-top: 5px;
}
.hint-text {
display: none;
color: #d35400;
font-style: italic;
margin-top: 5px;
font-size: 0.9em;
}
.btn-action {
background: #2c3e50;
color: white;
border: none;
padding: 8px 15px;
border-radius: 4px;
cursor: pointer;
font-weight: bold;
}
.btn-action:hover {
background: #1a252f;
}
.schreib-text {
width: 100%;
height: 120px;
padding: 10px;
border-radius: 4px;
border: 1px solid #ccc;
resize: vertical;
}
</style>
<div class="lektion-container">
<h1>Lektion: Die schönsten Blumen (Најубавите цвеќиња)</h1>
<div class="tab-menu">
<button class="tab-btn active-tab" onclick="openTab(event, 'tab-lesen')">1. Текст & Картички</button>
<button class="tab-btn" onclick="openTab(event, 'tab-grammatik')">2. Граматика</button>
<button class="tab-btn" onclick="openTab(event, 'tab-wortsalat')">3. Подреди зборови</button>
<button class="tab-btn" onclick="openTab(event, 'tab-quiz')">4. Квиз (15 задачи)</button>
<button class="tab-btn" onclick="openTab(event, 'tab-schreiben')">5. Прашање? Упатство & Фрази</button>
</div>
<div id="tab-lesen" class="tab-content active-content">
<h2>1. Lesetext und Hörtext (Текст за читање и слушање)</h2>
<p><em>Прочитајте го текстот, а потоа кликнете на зеленото копче за да го слушнете точниот изговор на германски.</em></p>
<div class="audio-box">
<button class="btn-action" style="background:#2ecc71;" onclick="speakText('In der Gärtnerei. Lena und ihr Bruder Lukas sind in einer großen Gärtnerei. Sie suchen schöne Blumen für den Balkon. Lena sagt: Ich finde diese roten Blumen am schönsten. Sie sind viel schöner als die gelben Blumen. Lukas guckt sich um und antwortet: Ja, das stimmt. Aber guck mal hier! Diese blauen Blumen sind groß, die weißen Blumen sind größer, aber diese rosa Blumen hier sind am größten! Unsere Oma mag Rosen am meisten. Sie freut sich bestimmt. Am Ende kaufen die Kinder drei Sorten Blumen. Ihr Balkon wird bald am buntesten in der ganzen Nachbarschaft sein!')">🔊 Пушти го аудио-текстот</button>
<span><em>Кликнете за да започне аудио-читањето на лекцијата.</em></span>
</div>
<div class="lesetext">
<strong>In der Gärtnerei</strong><br><br>
Lena und ihr Bruder Lukas sind in einer großen Gärtnerei. Sie suchen schöne Blumen für den Balkon.
Lena sagt: „Ich finde <strong>diese roten Blumen am schönsten</strong>. Sie sind viel schöner als die gelben Blumen.“ <br><br>
Lukas guckt sich um und antwortet: „Ja, das stimmt. Aber guck mal hier! Diese blauen Blumen sind groß, die weißen Blumen sind größer, aber diese rosa Blumen hier sind <strong>am größten</strong>! Unsere Oma mag Rosen am meisten. Sie freut sich bestimmt.“<br><br>
Am Ende kaufen die Kinder drei Sorten Blumen. Ihr Balkon wird bald am buntesten in der ganzen Nachbarschaft sein!
</div>
<h2 style="margin-top:30px;">2. Hör-Karten (Звучни картички)</h2>
<p><em>Кликнете на зелената икона со звучник за изговор, а на синото копче за превод.</em></p>
<div class="flashcard-grid">
<div class="flashcard">
<p><strong>„Ich finde diese roten Blumen am schönsten.“</strong></p>
<div class="card-actions">
<button class="audio-btn" onclick="speakText('Ich finde diese roten Blumen am schönsten.')">🔊</button>
<button onclick="toggleCard(this, 'Мислам дека овие црвени цвеќиња се најубави.')">Откриј превод</button>
</div>
</div>
<div class="flashcard">
<p><strong>„Diese Blumen sind schöner als die gelben.“</strong></p>
<div class="card-actions">
<button class="audio-btn" onclick="speakText('Diese Blumen sind schöner als die gelben.')">🔊</button>
<button onclick="toggleCard(this, 'Овие цвеќиња се поубави од жолтите.')">Откриј превод</button>
</div>
</div>
<div class="flashcard">
<p><strong>„Welche Blumen gefallen dir am besten?“</strong></p>
<div class="card-actions">
<button class="audio-btn" onclick="speakText('Welche Blumen gefallen dir am besten?')">🔊</button>
<button onclick="toggleCard(this, 'Кои цвеќиња ти се допаѓаат најмногу?')">Откриј превод</button>
</div>
</div>
<div class="flashcard">
<p><strong>„Mein Balkon ist am buntesten.“</strong></p>
<div class="card-actions">
<button class="audio-btn" onclick="speakText('Mein Balkon ist am buntesten.')">🔊</button>
<button onclick="toggleCard(this, 'Мојот балкон е најшарен.')">Откриј превод</button>
</div>
</div>
</div>
</div>
<div id="tab-grammatik" class="tab-content">
<h2>3. Grammatik (Граматика)</h2>
<h3>А) Показна заменка за Множина во Акузатив</h3>
<p>Кога покажуваме кон повеќе предмети (множина), користиме <strong>diese</strong>, а придавката по неа добива наставка <strong>-en</strong>.</p>
<table class="grammatik-table">
<thead>
<tr>
<th>Показна заменка</th>
<th>Придавка (Множина)</th>
<th>Именка (Множина)</th>
<th>Пример</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>diese</strong> (овие)</td>
<td>rot<strong>en</strong></td>
<td>Blumen</td>
<td>Ich finde <strong>diese roten Blumen</strong> schön.</td>
</tr>
<tr>
<td><strong>diese</strong> (овие)</td>
<td>gelb<strong>en</strong></td>
<td>Rosen</td>
<td>Ich mag <strong>diese gelben Rosen</strong>.</td>
</tr>
</tbody>
</table>
<h3>Б) Споредување на придавки (Komparation)</h3>
<table class="grammatik-table">
<thead>
<tr>
<th>Позитив (Убав)</th>
<th>Компаратив (Поубав)</th>
<th>Суперлатив (Најубав)</th>
</tr>
</thead>
<tbody>
<tr>
<td>schön</td>
<td>schön<strong>er</strong> (+ als)</td>
<td><strong>am</strong> schön<strong>sten</strong></td>
</tr>
<tr>
<td>groß (голем)</td>
<td>größ<strong>er</strong></td>
<td><strong>am</strong> größ<strong>ten</strong></td>
</tr>
<tr>
<td>bunt (шарен)</td>
<td>bunt<strong>er</strong></td>
<td><strong>am</strong> bunt<strong>esten</strong></td>
</tr>
<tr>
<td><strong>gut</strong> (добар) *</td>
<td><strong>besser</strong> *</td>
<td><strong>am besten</strong> *</td>
</tr>
<tr>
<td><strong>viel</strong> (многу) *</td>
<td><strong>mehr</strong> *</td>
<td><strong>am meisten</strong> *</td>
</tr>
</tbody>
</table>
<p>⚠️ <em>Запомни: При споредба, зборот „од“ се преведува со <strong>als</strong> (пр. schöner als = поубав од).</em></p>
</div>
<div id="tab-wortsalat" class="tab-content">
<h2>4. Wortsalat (Подреди ги зборовите во точна реченица)</h2>
<p><em>Кликни на зборовите по точен редослед за да ја составиш реченицата.</em></p>
<div class="interactive-box" id="ws-container-1">
<p><strong>Реченица 1 (Мислам дека овие црвени цвеќиња се најубави):</strong></p>
<div class="drop-zone" id="dz-1"></div>
<div class="word-pool" id="wp-1">
<span class="word-badge" onclick="moveWord(this, 'dz-1')">finde</span>
<span class="word-badge" onclick="moveWord(this, 'dz-1')">roten</span>
<span class="word-badge" onclick="moveWord(this, 'dz-1')">am schönsten.</span>
<span class="word-badge" onclick="moveWord(this, 'dz-1')">Ich</span>
<span class="word-badge" onclick="moveWord(this, 'dz-1')">diese</span>
<span class="word-badge" onclick="moveWord(this, 'dz-1')">Blumen</span>
</div>
<button class="btn-action" style="margin-top:10px;" onclick="checkWortsalat(1, 'Ich finde diese roten Blumen am schönsten.')">Провери</button>
<span class="result-msg" id="res-ws-1"></span>
</div>
<div class="interactive-box" id="ws-container-2">
<p><strong>Реченица 2 (Овие рози се поубави од жолтите):</strong></p>
<div class="drop-zone" id="dz-2"></div>
<div class="word-pool" id="wp-2">
<span class="word-badge" onclick="moveWord(this, 'dz-2')">sind</span>
<span class="word-badge" onclick="moveWord(this, 'dz-2')">schöner</span>
<span class="word-badge" onclick="moveWord(this, 'dz-2')">als</span>
<span class="word-badge" onclick="moveWord(this, 'dz-2')">Diese</span>
<span class="word-badge" onclick="moveWord(this, 'dz-2')">die gelben.</span>
<span class="word-badge" onclick="moveWord(this, 'dz-2')">Rosen</span>
</div>
<button class="btn-action" style="margin-top:10px;" onclick="checkWortsalat(2, 'Diese Rosen sind schöner als die gelben.')">Провери</button>
<span class="result-msg" id="res-ws-2"></span>
</div>
</div>
<div id="tab-quiz" class="tab-content">
<h2>5. Interaktives Quiz (Интерактивен квиз - 15 одбрани задачи)</h2>
<p><em>Изберете го точниот одговор. Можете да ја искористите и сината икона 🔊 до прашањето за да го слушнете неговиот изговор!</em></p>
<div id="quiz-container"></div>
</div>
<div id="tab-schreiben" class="tab-content">
<h2>6. Meine Schreib-Ecke (Моето место за пишување)</h2>
<div class="interactive-box">
<p><strong>Прашање / Задача:</strong> Опиши го твојот омилен балкон или градина на германски со најмалку 5 реченици. Одговори на прашањата: Кои цвеќиња ги имаш? Која боја ти е омилена? Кои се поубави (schöner)?</p>
<textarea class="schreib-text" placeholder="Schreib hier deinen Text..."></textarea>
<br><br>
<button class="btn-action" onclick="alert('Одлично! Твојот текст е зачуван во прелистувачот.')">Зачувај го текстот</button>
</div>
<h2>7. Anleitung & Nützliche Phrasen (Упатство и корисни фрази)</h2>
<div class="lesetext" style="background-color: #e8f8f5; border-left: 5px solid #16a085;">
<p><em>Користи ги овие готови фрази за полесно да го напишеш твојот текст или кога сакаш да прашаш некого за мислење:</em></p>
<ul>
<li><strong>Wie findest du diese...?</strong> – Како ти се чинат овие...?</li>
<li><strong>Ich finde... schöner als...</strong> – Мислам дека... е поубаво од...</li>
<li><strong>Für mich sind diese Blumen am schönsten.</strong> – За мене овие цвеќиња се најубави.</li>
<li><strong>Was kosten diese roten Blumen?</strong> – Колку чинат овие црвени цвеќиња?</li>
</ul>
</div>
</div>
</div>
<script>
// НАПРЕДНА СИСТЕМСКА ТЕХНОЛОГИЈА ЗА АВТОМАТСКИ ГОВОР НА ГЕРМАНСКИ (TTS)
function speakText(text) {
if ('speechSynthesis' in window) {
window.speechSynthesis.cancel(); // Стопирај претходни звуци
var utterance = new SpeechSynthesisUtterance(text);
utterance.lang = 'de-DE'; // Поставено на чист германски јазик
utterance.pitch = 1.0;
utterance.rate = 0.88; // Идеално темпо за полесно следење и разбирање од деца
window.speechSynthesis.speak(utterance);
} else {
alert("Вашиот уред или прелистувач не поддржува автоматско читање на текст.");
}
}
// Функција за менување јазичиња
function openTab(evt, tabId) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tab-content");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].className = tabcontent[i].className.replace(" active-content", "");
}
tablinks = document.getElementsByClassName("tab-btn");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active-tab", "");
}
document.getElementById(tabId).className += " active-content";
evt.currentTarget.className += " active-tab";
}
// Картички превод
function toggleCard(btn, translation) {
if (btn.innerText === "Откриј превод") {
btn.innerText = translation;
btn.style.background = "#2ecc71";
} else {
btn.innerText = "Откриј превод";
btn.style.background = "#3498db";
}
}
// Подредување зборови (Wortsalat)
function moveWord(element, zoneId) {
var zone = document.getElementById(zoneId);
if (element.parentNode.className === "word-pool") {
zone.appendChild(element);
} else {
var originalPoolId = zoneId.replace("dz-", "wp-");
document.getElementById(originalPoolId).appendChild(element);
}
}
function checkWortsalat(id, correctSentence) {
var zone = document.getElementById("dz-" + id);
var words = zone.getElementsByClassName("word-badge");
var userSentence = "";
for (var i = 0; i < words.length; i++) {
userSentence += words[i].innerText + " ";
}
userSentence = userSentence.trim();
var msg = document.getElementById("res-ws-" + id);
if (userSentence === correctSentence) {
msg.innerHTML = " Точно! ";
msg.style.color = "green";
zone.style.borderColor = "green";
} else {
msg.innerHTML = " Обиди се пак. ";
msg.style.color = "red";
zone.style.borderColor = "red";
}
}
// НАМАЛЕНИ И СЕЛЕКТИРАНИ ТОЧНО 15 НАЈВАЖНИ ПРАШАЊА ЗА КВИЗОТ
var quizData = [
{ q: "1. Ich kaufe ______ Blumen.", cleanQ: "Ich kaufe diese roten Blumen.", am: ["diese roten", "diesen rote", "dieser rot"], c: 0, h: "Множина во Акузатив: 'diese' + придавка со наставка '-en'." },
{ q: "2. Siehst du ______ Rosen?", cleanQ: "Siehst du diese gelben Rosen?", am: ["diese gelben", "diese gelbe", "diesen gelben"], c: 0, h: "Rosen е во множина. Избери го соодветното 'diese' + '-en'." },
{ q: "3. Wir mögen ______ Tulpen.", cleanQ: "Wir mögen diese weißen Tulpen.", am: ["diesen weißen", "diese weißen", "diese weiße"], c: 1, h: "Заменката за покажување во множина е секогаш 'diese'." },
{ q: "4. Er sucht ______ Pflanzen.", cleanQ: "Er sucht diese grünen Pflanzen.", am: ["diese grünen", "diesen grünen", "diese grüne"], c: 0, h: "Pflanzen (растенија) е множина." },
{ q: "5. Gefallen dir ______ Orchideen?", cleanQ: "Gefallen dir diese schönen Orchideen?", am: ["diese schönen", "dieser schöne", "diesen schönen"], c: 0, h: "Орхидеите се во множина." },
{ q: "6. Die roten Blumen sind schöner ______ die gelben.", cleanQ: "Die roten Blumen sind schöner als die gelben.", am: ["wie", "als", "denn"], c: 1, h: "При компарација (поубав ОД), зборот 'од' се преведува со 'als'." },
{ q: "7. Mein Garten ist ______ im Frühling.", cleanQ: "Mein Garten ist am schönsten im Frühling.", am: ["schöner", "am schönsten", "schönsten"], c: 1, h: "Најубав во пролет = 'am schönsten'." },
{ q: "8. Lukas findet die blauen Blumen am ______.", cleanQ: "Lukas findet die blauen Blumen am größten.", am: ["großten", "größten", "größer"], c: 1, h: "Суперлатив од groß е 'am größten' (добива преглас Umlaut!)." },
{ q: "9. Diese Tomaten се поголеми од тие: Sie sind ______ als deine.", cleanQ: "Sie sind größer als deine.", am: ["groß", "größer", "am größten"], c: 1, h: "Поголеми од = 'größer als'." },
{ q: "10. Rosen sind ______ als Tulpen.", cleanQ: "Rosen sind teurer als Tulpen.", am: ["teurer", "am teuersten", "teuer"], c: 0, h: "Поскапи од = 'teurer als'." },
{ q: "11. Како се вели 'пошарени од'?", cleanQ: "bunter als", am: ["bunter als", "bunter wie", "am buntesten"], c: 0, h: "Компаратив наставката е -er на која се додава 'als'." },
{ q: "12. Која форма е точна за 'подобро од'?", cleanQ: "besser als", am: ["besser als", "guter als", "am besten"], c: 0, h: "Придавката gut е неправилна: gut -> besser -> am besten." },
{ q: "13. Што купуваат децата на крајот од текстот?", cleanQ: "drei Sorten Blumen", am: ["drei Sorten Blumen", "zwei Rosen", "keine Blumen"], c: 0, h: "Погледни ја претпоследната реченица од текстот на првото јазиче." },
{ q: "14. Каков ќе биде нивниот балкон?", cleanQ: "am buntesten", am: ["am buntesten", "am größten", "am kleinsten"], c: 0, h: "Последната реченица вели 'am buntesten' (најшарен)." },
{ q: "15. Пронајди ја грешката: 'Ich finde diesen roten Blumen schön.'", cleanQ: "Ich finde diese roten Blumen schön.", am: ["Треба 'diese' наместо 'diesen'", "Треба 'rote' наместо 'roten'", "Нема грешка"], c: 0, h: "Бидејќи именката Blumen е во множина, показната заменка мора да биде 'diese'." }
];
// Генерирање на квизот
var quizContainer = document.getElementById('quiz-container');
quizData.forEach(function(item, index) {
var qDiv = document.createElement('div');
qDiv.className = 'quiz-question';
var qTitle = document.createElement('p');
qTitle.innerHTML = '<button class="audio-btn" style="margin-right:8px; display:inline-block; padding:2px 8px; font-size:0.9em;" onclick="speakText(\'' + item.cleanQ + '\')">🔊</button> <strong>' + item.q + '</strong>';
qDiv.appendChild(qTitle);
var optionsDiv = document.createElement('div');
optionsDiv.className = 'quiz-options';
item.am.forEach(function(option, oIndex) {
var btn = document.createElement('button');
btn.innerText = option;
btn.onclick = function() {
checkQuizAnswer(btn, oIndex, item.c, optionsDiv);
};
optionsDiv.appendChild(btn);
});
qDiv.appendChild(optionsDiv);
var hintBtn = document.createElement('button');
hintBtn.className = 'hint-btn';
hintBtn.innerText = 'Помош (Hint)';
var hintText = document.createElement('p');
hintText.className = 'hint-text';
hintText.innerText = item.h;
hintBtn.onclick = function() {
if(hintText.style.display === 'block') {
hintText.style.display = 'none';
} else {
hintText.style.display = 'block';
}
};
qDiv.appendChild(hintBtn);
qDiv.appendChild(hintText);
quizContainer.appendChild(qDiv);
});
function checkQuizAnswer(selectedBtn, selectedIndex, correctIndex, optionsDiv) {
var buttons = optionsDiv.getElementsByTagName('button');
for (var i = 0; i < buttons.length; i++) {
buttons[i].disabled = true;
if (i === correctIndex) {
buttons[i].className = 'correct';
}
}
if (selectedIndex !== correctIndex) {
selectedBtn.className = 'wrong';
}
}
</script><div class="blogger-post-footer">www.bloglines.com</div>Anica Petkoskahttp://www.blogger.com/profile/12340858614356870735noreply@blogger.comtag:blogger.com,1999:blog-26523155.post-45004138423127592492026-05-23T17:46:16.016+02:002026-05-23T18:41:39.858+02:00Der Urlaub am Meer, Präteritum <style>
/* Основни стилови за блог пост */
.nk-container { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; color: #333; line-height: 1.6; max-width: 850px; margin: 0 auto; padding: 15px; background: #fff; }
/* Стил за јазичиња (Tabs) */
.nk-tabs { display: flex; flex-wrap: wrap; border-bottom: 3px solid #007bff; margin-bottom: 20px; gap: 2px; }
.nk-tab-btn { background: #f1f3f5; border: none; padding: 12px 20px; font-size: 16px; font-weight: bold; cursor: pointer; color: #495057; border-top-left-radius: 8px; border-top-right-radius: 8px; transition: all 0.3s ease; }
.nk-tab-btn:hover { background: #e9ecef; color: #007bff; }
.nk-tab-btn.active { background: #007bff; color: white; }
.nk-tab-content { display: none; padding: 20px 5px; animation: fadeIn 0.5s ease; }
.nk-tab-content.active { display: block; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
/* Текст и аудио картичка */
.nk-audio-box { background: #f8f9fa; border-left: 5px solid #28a745; padding: 20px; border-radius: 6px; margin-bottom: 20px; }
.nk-audio-btn { background: #28a745; color: white; border: none; padding: 10px 20px; border-radius: 20px; cursor: pointer; font-weight: bold; display: inline-flex; align-items: center; gap: 8px; font-size: 15px; margin-bottom: 15px; }
.nk-audio-btn:hover { background: #218838; }
/* Звучни картички (Flashcards) */
.nk-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 15px; margin-top: 15px; }
.nk-card { background: #ffffff; border: 2px solid #dee2e6; border-radius: 10px; padding: 15px; text-align: center; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; box-shadow: 0 4px 6px rgba(0,0,0,0.05); position: relative; }
.nk-card:hover { transform: translateY(-3px); box-shadow: 0 6px 12px rgba(0,0,0,0.1); border-color: #007bff; }
.nk-listen-icon { font-size: 18px; color: #007bff; margin-top: 8px; display: block; }
/* Табели за Граматика */
.nk-table-wrapper { overflow-x: auto; margin-bottom: 25px; }
.nk-table { width: 100%; border-collapse: collapse; margin-top: 10px; background: white; font-size: 15px; }
.nk-table th, .nk-table td { border: 1px solid #dee2e6; padding: 12px; text-align: left; }
.nk-table th { background-color: #007bff; color: white; }
.nk-table tr:nth-child(even) { background-color: #f8f9fa; }
.nk-badge { padding: 3px 8px; border-radius: 4px; font-size: 12px; font-weight: bold; color: white; }
.bg-reg { background-color: #28a745; }
.bg-ireg { background-color: #dc3545; }
.bg-mod { background-color: #ffc107; color: #212529; }
/* Вокабулар картички */
.nk-voc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.nk-voc-item { background: #eef1f6; padding: 10px 15px; border-radius: 6px; border-left: 4px solid #4a69bd; font-weight: 500; }
/* Квиз систем */
.nk-quiz-item { background: #f9f9f9; border: 1px solid #e0e0e0; border-radius: 8px; padding: 15px; margin-bottom: 15px; transition: all 0.3s ease; }
.nk-quiz-q { font-weight: bold; font-size: 16px; margin-bottom: 10px; color: #2c3e50; }
.nk-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.nk-opt-label { display: block; background: white; border: 2px solid #ced4da; padding: 10px; border-radius: 6px; cursor: pointer; transition: all 0.2s; font-size: 14px; }
.nk-opt-label:hover { background: #f1f3f5; border-color: #6c757d; }
.nk-opt-label input { margin-right: 8px; display: none; }
/* Квиз бои при проверка */
.nk-opt-label.correct { background-color: #d4edda !important; border-color: #28a745 !important; color: #155724 !important; font-weight: bold; }
.nk-opt-label.incorrect { background-color: #f8d7da !important; border-color: #dc3545 !important; color: #721c24 !important; }
.nk-hint-btn { background: none; border: none; color: #6c757d; font-size: 13px; cursor: pointer; text-decoration: underline; margin-top: 8px; display: inline-block; padding: 0; }
.nk-hint-text { display: none; background: #fff3cd; color: #856404; padding: 8px; border-radius: 4px; font-size: 13px; margin-top: 5px; border: 1px solid #ffeeba; }
.nk-score-box { background: #e2f0fe; border: 2px solid #b6d4fe; padding: 15px; border-radius: 8px; text-align: center; font-weight: bold; font-size: 18px; margin-top: 20px; display: none; }
/* Простор за пишување */
.nk-write-area { width: 100%; height: 150px; padding: 12px; border: 2px solid #ced4da; border-radius: 8px; font-size: 15px; resize: vertical; box-sizing: border-box; }
.nk-write-area:focus { border-color: #007bff; outline: none; }
.nk-prompt { background: #e8f4fd; border-left: 5px solid #007bff; padding: 15px; border-radius: 4px; margin-bottom: 15px; }
</style>
<div class="nk-container">
<!-- Навигациски Јазичиња -->
<div class="nk-tabs">
<button class="nk-tab-btn active" onclick="nkOpenTab(event, 'tab-text')">📖 Читање и Слушање</button>
<button class="nk-tab-btn" onclick="nkOpenTab(event, 'tab-grammar')">📊 Граматика</button>
<button class="nk-tab-btn" onclick="nkOpenTab(event, 'tab-quiz')">✏️ Квиз (40 задачи)</button>
<button class="nk-tab-btn" onclick="nkOpenTab(event, 'tab-write')">✍️ Мој простор за пишување</button>
</div>
<!-- ЈАЗИЧЕ 1: ТЕКСТ И ЗВУЧНИ КАРТИЧКИ -->
<div id="tab-text" class="nk-tab-content active">
<div class="nk-audio-box">
<h3>Der Urlaub am Meer (Одморот на море)</h3>
<button class="nk-audio-btn" onclick="nkSpeak('Letzten Sommer reiste ich mit meiner Familie nach Italien. Wir fuhren am frühen Morgen voller Freude mit dem Auto zum Strand. Das Wetter war herrlich und die Sonne schien den ganzen Tag. Die Kinder spielten stundenlang glücklich im Sand. Am Abend passierte etwas Aufregendes: Wir sahen Delfine im Meer!')">
🔊 Слушај го целиот текст
</button>
<p><em>Letzten Sommer reiste ich mit meiner Familie nach Italien. Wir fuhren am frühen Morgen voller Freude mit dem Auto zum Strand. Das Wetter war herrlich und die Sonne schien den ganzen Tag. Die Kinder spielten stundenlang glücklich im Sand. Am Abend passierte etwas Aufregendes: Wir sahen Delfine im Meer!</em></p>
</div>
<h3>🔊 Интерактивни звучни картички</h3>
<p>Кликнете на картичката за да го слушнете точниот изговор на германски јазик:</p>
<div class="nk-grid">
<div class="nk-card" onclick="nkSpeak('Letzten Sommer reiste ich nach Italien.')">
<strong>Минатото лето патував во Италија.</strong>
<span class="nk-listen-icon">▶️ Слушај</span>
</div>
<div class="nk-card" onclick="nkSpeak('Wir fuhren am frühen Morgen mit dem Auto.')">
<strong>Ние патувавме рано наутро со автомобил.</strong>
<span class="nk-listen-icon">▶️ Слушај</span>
</div>
<div class="nk-card" onclick="nkSpeak('Die Sonne schien den ganzen Tag.')">
<strong>Сонцето сјаеше цел ден.</strong>
<span class="nk-listen-icon">▶️ Слушај</span>
</div>
<div class="nk-card" onclick="nkSpeak('Die Kinder spielten glücklich im Sand.')">
<strong>Децата си играа среќно во песокот.</strong>
<span class="nk-listen-icon">▶️ Слушај</span>
</div>
<div class="nk-card" onclick="nkSpeak('Wir sahen Delfine im Meer.')">
<strong>Видовме делфини во морето.</strong>
<span class="nk-listen-icon">▶️ Слушај</span>
</div>
<div class="nk-card" onclick="nkSpeak('Der Urlaub war sehr interessant.')">
<strong>Одморот беше многу интересен.</strong>
<span class="nk-listen-icon">▶️ Слушај</span>
</div>
</div>
</div>
<!-- ЈАЗИЧЕ 2: ГРАМАТИКА -->
<div id="tab-grammar" class="nk-tab-content">
<h3>💡 Германскиот Präteritum и правилото TE-KA-MO-LO</h3>
<p>Во германскиот јазик, кога подредуваме прилози во реченицата, се водиме по строго правило:</p>
<ul>
<li><strong>TE</strong> (Temporal) - Кога? <em>(am frühen Morgen)</em></li>
<li><strong>KA</strong> (Kausal) - Зошто? <em>(voller Freude)</em></li>
<li><strong>MO</strong> (Modal) - Како? <em>(mit dem Auto)</em></li>
<li><strong>LO</strong> (Lokal) - Каде? <em>(zum Strand)</em></li>
</ul>
<blockquote><strong>Пример:</strong> Wir fuhren <span style="color:#28a745;font-weight:bold;">am frühen Morgen</span> (Te) <span style="color:#dc3545;font-weight:bold;">voller Freude</span> (Ka) <span style="color:#ffc107;font-weight:bold;">mit dem Auto</span> (Mo) <span style="color:#007bff;font-weight:bold;">zum Strand</span> (Lo).</blockquote>
<h3>📊 Преглед на глаголи во Präteritum (Минато време)</h3>
<!-- КРАТКО И ЈАСНО ОБЈАСНУВАЊЕ (ДОДАТОК) -->
<style>
.nk-quick-box { background: #fff8e1; border-left: 5px solid #ffb300; padding: 15px; border-radius: 6px; margin-top: 25px; }
.nk-mini-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 15px; margin-top: 15px; }
.nk-mini-card { background: #ffffff; border: 1px solid #ffe082; padding: 12px; border-radius: 6px; box-shadow: 0 2px 4px rgba(0,0,0,0.02); }
.nk-mini-card h4 { margin-top: 0; color: #ff8f00; border-bottom: 1px dashed #ffe082; padding-bottom: 5px; }
.nk-ul-clear { list-style-type: none; padding-left: 0; margin: 0; }
.nk-ul-clear li { padding: 3px 0; font-size: 14px; }
.nk-highlight { background-color: #ffe082; font-weight: bold; padding: 1px 4px; border-radius: 3px; }
</style>
<div class="nk-quick-box">
<h3>🎯 Граматика накратко: Како се прави минато време (Präteritum)?</h3>
<p>Сè што треба да запомниш во неколку едноставни правила:</p>
<div class="nk-mini-grid">
<!-- КАРТИЧКА 1: ПРАВИЛНИ -->
<div class="nk-mini-card">
<h4>1. Правилни глаголи</h4>
<p style="font-size: 13px; margin-top:0;">На коренот ги додаваме следните наставки:</p>
<ul class="nk-ul-clear">
<li>👤 <strong>ich</strong> → <span class="nk-highlight">-te</span> <em>(lernte)</em></li>
<li>👤 <strong>du</strong> → <span class="nk-highlight">-test</span> <em>(lerntest)</em></li>
<li>👤 <strong>er/sie/es</strong> → <span class="nk-highlight">-te</span> <em>(lernte)</em></li>
<li>👥 <strong>wir</strong> → <span class="nk-highlight">-ten</span> <em>(lernten)</em></li>
<li>👥 <strong>ihr</strong> → <span class="nk-highlight">-tet</span> <em>(lerntet)</em></li>
<li>👥 <strong>sie/Sie</strong> → <span class="nk-highlight">-ten</span> <em>(lernten)</em></li>
</ul>
<p style="font-size: 12px; color: #7f8c8d; margin-bottom:0; margin-top:8px;">*Запомни: <strong>ich</strong> и <strong>er/sie/es</strong> се секогаш исти!</p>
</div>
<!-- КАРТИЧКА 2: НЕГАЦИЈА И ПРАШАЊЕ -->
<div class="nk-mini-card">
<h4>2. Негација и Прашање</h4>
<p style="font-size: 13px; margin-top:0;">Без помошни глаголи (нема <em>did/didn't</em>):</p>
<p><strong>⛔ Негативна реченица:</strong><br>
Само стави <span class="nk-highlight">nicht</span> веднаш <strong>после</strong> глаголот.<br>
<small>• Ich lernte <strong>nicht</strong>. <em>(Јас не учев.)</em></small></p>
<p style="margin-bottom:0;"><strong>❓ Прашална реченица:</strong><br>
Само им ги менуваш местата на подметот и глаголот (инверзија).<br>
<small>• <strong>Lerntest du</strong>? <em>(Учеше ли ти?)</em></small></p>
</div>
<!-- КАРТИЧКА 3: НЕПРАВИЛНИ -->
<div class="nk-mini-card">
<h4>3. Неправилни глаголи</h4>
<p style="font-size: 13px; margin-top:0;">Се учат <strong>напамет</strong>. Коренот се менува, а <span class="nk-highlight">ich</span> и <span class="nk-highlight">er/sie/es</span> немаат никаква наставка!</p>
<table style="width:100%; font-size:12px; border-collapse:collapse; text-align:left;">
<thead>
<tr style="border-bottom: 1px solid #ffe082; color:#7f8c8d;">
<th>Лице</th>
<th>fahren</th>
<th>sehen</th>
<th>gehen</th>
</tr>
</thead>
<tbody>
<tr><td><strong>ich</strong></td><td><strong>fuhr</strong></td><td><strong>sah</strong></td><td><strong>ging</strong></td></tr>
<tr><td><strong>du</strong></td><td>fuhr<strong>st</strong></td><td>sah<strong>st</strong></td><td>ging<strong>st</strong></td></tr>
<tr><td><strong>er/sie</strong></td><td><strong>fuhr</strong></td><td><strong>sah</strong></td><td><strong>ging</strong></td></tr>
<tr><td><strong>wir</strong></td><td>fuhr<strong>en</strong></td><td>sah<strong>en</strong></td><td>ging<strong>en</strong></td></tr>
<tr><td><strong>ihr</strong></td><td>fuhr<strong>t</strong></td><td>sah<strong>t</strong></td><td>ging<strong>t</strong></td></tr>
<tr><td><strong>sie/Sie</strong></td><td>fuhr<strong>en</strong></td><td>sah<strong>en</strong></td><td>ging<strong>en</strong></td></tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="nk-table-wrapper">
<table class="nk-table">
<thead>
<tr>
<th>Инфинитив</th>
<th>Präteritum (1. / 3. лице)</th>
<th>Тип на глагол</th>
<th>Македонски превод</th>
</tr>
</thead>
<tbody>
<tr><td>reisen</td><td>ich/er reiste</td><td><span class="nk-badge bg-reg">Правилен</span></td><td>патуваше</td></tr>
<tr><td>spielen</td><td>ich/er spielte</td><td><span class="nk-badge bg-reg">Правилен</span></td><td>играше</td></tr>
<tr><td>machen</td><td>ich/er machte</td><td><span class="nk-badge bg-reg">Правилен</span></td><td>правеше</td></tr>
<tr><td>fahren</td><td>ich/er fuhr</td><td><span class="nk-badge bg-ireg">Неправилен</span></td><td>возеше / патуваше</td></tr>
<tr><td>sehen</td><td>ich/er sah</td><td><span class="nk-badge bg-ireg">Неправилен</span></td><td>виде</td></tr>
<tr><td>scheinen</td><td>es schien</td><td><span class="nk-badge bg-ireg">Неправилен</span></td><td>sјаеше</td></tr>
<tr><td>sein</td><td>ich/er war</td><td><span class="nk-badge bg-ireg">Неправилен</span></td><td>беше</td></tr>
<tr><td>können</td><td>ich/er konnte</td><td><span class="nk-badge bg-mod">Модален</span></td><td>можеше</td></tr>
<tr><td>müssen</td><td>ich/er musste</td><td><span class="nk-badge bg-mod">Модален</span></td><td>мораше</td></tr>
<tr><td>wollen</td><td>ich/er wollte</td><td><span class="nk-badge bg-mod">Модален</span></td><td>сакаше</td></tr>
</tbody>
</table>
</div>
<h3>🎨 Корисни придавки за опишување на одморот</h3>
<p>Искористете ги овие зборови во вашиот состав:</p>
<div class="nk-voc-grid">
<div class="nk-voc-item">🎨 interessant (интересен)</div>
<div class="nk-voc-item">💤 langweilig (досаден)</div>
<div class="nk-voc-item">⚡ aufregend (возбудлив)</div>
<div class="nk-voc-item">🦈 gefährlich (опасен)</div>
<div class="nk-voc-item">👻 gruselig (страшен)</div>
<div class="nk-voc-item">📸 malerisch (живописен)</div>
<div class="nk-voc-item">🌊 ruhig (мирен)</div>
<div class="nk-voc-item">☀️ herrlich (прекрасен)</div>
</div>
</div>
<!-- ЈАЗИЧЕ 3: КВИЗ -->
<div id="tab-quiz" class="nk-tab-content">
<h3>✏️ Тестирај го знаењето (Автоматска проверка)</h3>
<p>Изберете го точниот одговор. Точната опција веднаш ќе <strong>позелени</strong>, а погрешната <strong>поцрвени</strong>!</p>
<div id="nk-quiz-container"></div>
<button class="nk-audio-btn" style="background:#007bff;" onclick="nkCheckQuiz()">📊 Провери вкупен резултат</button>
<div id="nk-score" class="nk-score-box"></div>
</div>
<!-- ЈАЗИЧЕ 4: ПИШУВАЊЕ -->
<div id="tab-write" class="nk-tab-content">
<div class="nk-prompt">
<h3>📝 Задача за пишување:</h3>
<p><strong>Was machtest du letzten Sommer? Wohin reistest du?</strong><br>
(Што правеше ти минатото лето? Каде патуваше?)</p>
<p><em>Совет: Обиди се да ги употребиш глаголите во минато време (war, reiste, spielte, fuhr) и некои од новите придавки (malerisch, aufregend, ruhig). Внимавај на TE-KA-MO-LO редоследот!</em></p>
</div>
<textarea class="nk-write-area" placeholder="Напиши го твоето кратко раскажување тука на германски јазик..."></textarea>
<p style="font-size: 13px; color: #6c757d; margin-top: 5px;">*Текстот напишан во ова поле е само за вежбање и нема да биде јавно објавен.</p>
</div>
</div>
<script>
// Функција за менување јазичиња
function nkOpenTab(evt, tabId) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("nk-tab-content");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
tabcontent[i].classList.remove("active");
}
tablinks = document.getElementsByClassName("nk-tab-btn");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].classList.remove("active");
}
document.getElementById(tabId).style.display = "block";
document.getElementById(tabId).classList.add("active");
evt.currentTarget.classList.add("active");
}
// Функција за репродукција на звук (Text-to-Speech)
function nkSpeak(text) {
if ('speechSynthesis' in window) {
window.speechSynthesis.cancel();
var utterance = new SpeechSynthesisUtterance(text);
utterance.lang = 'de-DE';
utterance.rate = 0.85;
window.speechSynthesis.speak(utterance);
} else {
alert("Вашиот прелистувач не поддржува аудио изговор.");
}
}
// Дата база со 40 прашања за квизот
const nkQuizData = [
{ q: "1. Избери го точниот TE-KA-MO-LO редослед:", o: ["Wir fuhren gestern mit dem Auto nach Italien.", "Wir fuhren nach Italien gestern mit dem Auto.", "Wir fuhren mit dem Auto gestern nach Italien."], a: 0, h: "Точниот ред е: Време (gestern) -> Начин (mit dem Auto) -> Место (nach Italien)." },
{ q: "2. Како е минато време (Präteritum) од глаголот 'reisen' за прво лице (ich)?", o: ["ich reise", "ich reiste", "ich gereist"], a: 1, h: "'reisen' е правилен глагол, додаваме наставка -te." },
{ q: "3. Како гласи минато време од неправилниот глагол 'fahren'?", o: ["ich fahrte", "ich bin gefahren", "ich fuhr"], a: 2, h: "'fahren' е силен глагол и неговиот корен целосно се менува во 'fuhr'." },
{ q: "4. Која придавка означува 'живописен'?", o: ["langweilig", "malerisch", "gefährlich"], a: 1, h: "'malerisch' доаѓа од зборот сликање (malen) и значи живописен." },
{ q: "5. Модалниот глагол 'können' во Präteritum за лицето 'ich' гласи:", o: ["kann", "konnte", "könnte"], a: 1, h: "Умлаутот целосно исчезнува во минато време." },
{ q: "6. Што значи реченицата: 'Es war aufregend.'?", o: ["Беше досадно.", "Беше возбудливо.", "Беше опасно."], a: 1, h: "'aufregend' значи возбудливо." },
{ q: "7. Кој е точниот превод за 'Вчера сјаеше сонце'?", o: ["Gestern schien die Sonne.", "Gestern die Sonne schien.", "Die Sonne gestern schien."], a: 0, h: "Ако реченицата почне со прилог за време, глаголот мора да биде на второ место!" },
{ q: "8. Минато време од 'müssen' за 'wir' (ние) е:", o: ["mussten", "müssten", "musstet"], a: 0, h: "Формата е исто како сегашноста, но БЕЗ умлаут: mussten." },
{ q: "9. Пронајди ја негативната реченица:", o: ["Ich nicht spielte im Sand.", "Ich spielte nicht im Sand.", "Ich kein spielte im Sand."], a: 1, h: "Зборчето 'nicht' се става веднаш по глаголот во минато време." },
{ q: "10. Како се прашува 'Каде патуваше ти?' во Präteritum?", o: ["Wohin reistest du?", "Wohin du reistest?", "Wo reiste du?"], a: 0, h: "Во прашањата, глаголот оди веднаш по прашалното зборче." },
{ q: "11. 'Letzten Sommer' значи:", o: ["Следното лето", "Минатото лето", "Секое лето"], a: 1, h: "Letzten = минатото." },
{ q: "12. Одреди го типот на глаголот 'spielen' во минато време:", o: ["Неправилен (spielte)", "Правилен (spielte)", "Модален"], a: 1, h: "Тоа е правилен глагол." },
{ q: "13. Како гласи трето лице еднина (er/sie/es) за глаголот 'wollen' во минато време?", o: ["wollte", "wollt", "willte"], a: 0, h: "Кај модалните глаголи во минато време, 1-во и 3-то лице се идентични (ich wollte / er wollte)." },
{ q: "14. Што значи придавката 'ruhig'?", o: ["страшен", "мирен", "досаден"], a: 1, h: "Ruhig значи тивок или мирен." },
{ q: "15. Која реченица е граматички точна?", o: ["Ich sah Delfine.", "Ich sehte Delfine.", "Ich habe sah Delfine."], a: 0, h: "Минато време од 'sehen' е 'sah'." },
{ q: "16. Како ќе кажете 'Ние бевме среќни'?", o: ["Wir waren glücklich.", "Wir waren ruhig.", "Wir hatten glücklich."], a: 0, h: "'waren' е минато време од глаголот 'sein' (сум)." },
{ q: "17. Кој збор одговара на прашањето 'Wann?' (Кога)?", o: ["mit dem Auto", "gestern", "nach Italien"], a: 1, h: "Gestern (вчера) е временски прилог." },
{ q: "18. Кој збор одговара на прашањето 'Wohin?' (Каде / На каде)?", o: ["zum Strand", "voller Freude", "am Abend"], a: 0, h: "Zum Strand (кон плажата) означува локација." },
{ q: "19. Глаголот 'sollen' во минато време за 'ich' е:", o: ["sollte", "sollte", "gesollt"], a: 0, h: "Идентично со корен + -te: sollte." },
{ q: "20. Што правеа децата во песокот според текстот?", o: ["Sie schwammen.", "Sie spielten im Sand.", "Sie schliefen."], a: 1, h: "Во текстот пишува: 'Die Kinder spielten im Sand'." },
{ q: "21. Како гласи минато време од 'haben' за 'du' (ти)?", o: ["hast", "hattest", "hatte"], a: 1, h: "Ду изискува наставка -st, значи hattest." },
{ q: "22. Придавката 'gefährlich' на македонски значи:", o: ["Прекрасен", "Опасен", "Досаден"], a: 1, h: "Gefährlich = опасен." },
{ q: "23. Кое е значењето на модалниот глагол 'durfte'?", o: ["морав", "смеев (имав дозвола)", "сакав"], a: 1, h: "Dürfen означува дозвола." },
{ q: "24. Каде патуваше семејството во текстот?", o: ["nach Deutschland", "nach Italien", "nach Spanien"], a: 1, h: "Во првата реченица се спомнува Италија." },
{ q: "25. Како се вика редоследот на прилози во германски јазик?", o: ["KA-TE-LO-MO", "TE-KA-MO-LO", "LO-MO-KA-TE"], a: 1, h: "Кратенката е секогаш TE-KA-MO-LO." },
{ q: "26. Што виделе на крајот од денот?", o: ["Haie", "Delfine", "Schiffe"], a: 1, h: "Текстот вели: 'Wir sahen Delfine'." },
{ q: "27. Минато време за глаголот 'machen' за лицето 'ihr' (вие):", o: ["machtest", "machtet", "machen"], a: 1, h: "Наставката за вие (ihr) во минато време е -tet." },
{ q: "28. 'Gruselig' означува:", o: ["Мирен", "Страшен / Езовски", "Прекрасен"], a: 1, h: "Gruselig се користи за нешто што ни предизвикува страв." },
{ q: "29. Преведи ја точно реченицата: 'Јас сакав да останам дома.'", o: ["Ich wollte zu Hause bleiben.", "Ich will zu Hause bleiben.", "Ich wollte bleiben zu Hause."], a: 0, h: "Главниот глагол во инфинитив оди на самиот крај на реченицата." },
{ q: "30. Кој од наведените глаголи е модален?", o: ["fahren", "müssen", "reisen"], a: 1, h: "Müssen е модален глагол." },
{ q: "31. Како се пишува прилогот 'завчера'?", o: ["gestern", "vorgestern", "morgen"], a: 1, h: "Vorgestern значи завчера." },
{ q: "32. Доврши ја реченицата: 'Er ___ gestern krank.' (Тој беше вчера болен)", o: ["war", "ist", "wollte"], a: 0, h: "'war' е минато време за трето лице еднина од глаголот 'sein'." },
{ q: "33. Што значи изразот 'voller Freude'?", o: ["со автомобил", "полн со радост", "рано наутро"], a: 1, h: "Ова е причинен прилог (Kausal) - полн со радост." },
{ q: "34. Дали кај правилните глаголи се менува вокалната основа во Präteritum?", o: ["Да", "Не", "Само понекогаш"], a: 1, h: "Правилните глаголи ја задржуваат истата основа (нпр. lern-те)." },
{ q: "35. Избери го точното прашање:", o: ["Was machtest du?", "Was du machtest?", "Machtest.што du?"], a: 0, h: "Прашално зборче + глагол + подмет." },
{ q: "36. Што значи придавката 'herrlich'?", o: ["Прекрасен", "Лош", "Мрачен"], a: 0, h: "Herrlich се користи за прекрасно време или искуство." },
{ q: "37. Како гласи минато време од 'mögen' за 'ich'?", o: ["magte", "mochte", "mochten"], a: 1, h: "Буквата g преминува во ch -> mochte." },
{ q: "38. Што означува кратенката 'MO' во TE-KA-MO-LO?", o: ["Морфологија", "Начин (Modal)", "Место"], a: 1, h: "Modal го покажува начинот на кој се извршува дејството." },
{ q: "39. Како се вика времето Präteritum во споредба со англискиот јазик?", o: ["Present Continuous", "Past Simple", "Future Perfect"], a: 1, h: "Präteritum во голем дел од случаите функционира како Past Simple." },
{ q: "40. Во англиската граматика, како правилно ќе кажеме 'Купив фармерки'?", o: ["I bought a jeans.", "I bought some jeans.", "I bought an jeans."], a: 1, h: "Именката 'jeans' секогаш е во множина и не може да оди со членот 'a/an', туку бара 'some' или без член." }
];
// Функција за генерирање на квизот на блогот
function nkRenderQuiz() {
const container = document.getElementById('nk-quiz-container');
let html = '';
nkQuizData.forEach((item, qIdx) => {
html += `
<div class="nk-quiz-item">
<div class="nk-quiz-q">${item.q}</div>
<div class="nk-options">
`;
item.o.forEach((opt, oIdx) => {
html += `
<label class="nk-opt-label" id="lbl-${qIdx}-${oIdx}">
<input type="radio" name="q-${qIdx}" value="${oIdx}" onclick="nkSelectOption(${qIdx}, ${oIdx}, ${item.a})">
${opt}
</label>
`;
});
html += `
</div>
<button class="nk-hint-btn" onclick="nkToggleHint(${qIdx})">💡 Помош (Хинт)</button>
<div class="nk-hint-text" id="hint-${qIdx}">${item.h}</div>
</div>
`;
});
container.innerHTML = html;
}
// Инстантна визуелна проверка
function nkSelectOption(qIdx, selectedIdx, correctIdx) {
const options = document.getElementsByName(`q-${qIdx}`);
options.forEach(opt => opt.disabled = true);
const selectedLabel = document.getElementById(`lbl-${qIdx}-${selectedIdx}`);
const correctLabel = document.getElementById(`lbl-${qIdx}-${correctIdx}`);
if (selectedIdx === correctIdx) {
selectedLabel.classList.add('correct');
} else {
selectedLabel.classList.add('incorrect');
correctLabel.classList.add('correct');
}
}
// Прикажи/Скриј хинт
function nkToggleHint(idx) {
const hint = document.getElementById(`hint-${idx}`);
if (hint.style.display === 'block') {
hint.style.display = 'none';
} else {
hint.style.display = 'block';
}
}
// Пресметка на вкупен резултат
function nkCheckQuiz() {
let totalCorrect = 0;
nkQuizData.forEach((item, qIdx) => {
const selected = document.querySelector(`input[name="q-${qIdx}"]:checked`);
if (selected && parseInt(selected.value) === item.a) {
totalCorrect++;
}
});
const scoreBox = document.getElementById('nk-score');
scoreBox.style.display = 'block';
scoreBox.innerHTML = `Вашиот резултат е ${totalCorrect} од вкупно 40 точни одговори. (${Math.round((totalCorrect/40)*100)}%)`;
scoreBox.scrollIntoView({ behavior: 'smooth' });
}
// НОВ БЕЗБЕДЕН НАЧИН ЗА УЧИТУВАЊЕ ВО BLOGGER
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', nkRenderQuiz);
} else {
nkRenderQuiz();
}
</script><div class="blogger-post-footer">www.bloglines.com</div>Anica Petkoskahttp://www.blogger.com/profile/12340858614356870735noreply@blogger.comtag:blogger.com,1999:blog-26523155.post-3821616711934005932026-05-21T18:27:36.956+02:002026-05-21T18:27:36.956+02:00Viktor 1<style>
.blog-container {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
color: #333;
line-height: 1.6;
max-width: 800px;
margin: 0 auto;
padding: 10px;
}
/* Стабилно хоризонтално мени за јазичиња */
.tab-container-menu {
display: block !important;
border-bottom: 3px solid #4A90E2 !important;
padding: 0 !important;
margin: 0 0 20px 0 !important;
white-space: nowrap !important;
}
.tab-container-menu button {
display: inline-block !important;
padding: 12px 20px !important;
background-color: #f1f1f1 !important;
border: none !important;
cursor: pointer !important;
font-size: 16px !important;
font-weight: bold !important;
color: #555 !important;
border-radius: 8px 8px 0 0 !important;
transition: all 0.3s ease !important;
margin: 0 5px 0 0 !important;
vertical-align: bottom !important;
}
.tab-container-menu button:hover {
background-color: #e0e0e0 !important;
}
.tab-container-menu button.active {
background-color: #4A90E2 !important;
color: white !important;
}
/* Содржина на јазичињата */
.tab-content {
display: none;
background: #ffffff;
padding: 20px;
border-radius: 0 0 8px 8px;
box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}
.tab-content.active {
display: block !important;
}
/* Граматички табели и речник */
.grammar-box, .vocab-box {
background-color: #f9f9f9;
border-left: 5px solid #4A90E2;
padding: 15px;
margin-bottom: 20px;
border-radius: 0 4px 4px 0;
}
.word-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 10px;
margin-top: 10px;
}
.word-item {
background: #fff;
padding: 8px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 14px;
}
/* Стил за Квизот */
.question-container {
background: #fff;
padding: 15px;
margin-bottom: 15px;
border-radius: 6px;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.question-text {
font-weight: bold;
margin-bottom: 10px;
color: #2c3e50;
}
.options-route {
display: flex;
flex-direction: column;
gap: 8px;
}
.option-label {
padding: 10px;
background: #f9f9f9;
border: 1px solid #eee;
border-radius: 4px;
cursor: pointer;
transition: background 0.2s;
}
.option-label:hover {
background: #f0f0f0;
}
.option-label input {
margin-right: 10px;
}
.btn-submit {
background-color: #2ecc71;
color: white;
border: none;
padding: 12px 25px;
font-size: 18px;
font-weight: bold;
border-radius: 5px;
cursor: pointer;
width: 100%;
margin-top: 15px;
}
.btn-submit:hover {
background-color: #27ae60;
}
#quiz-result {
margin-top: 20px;
padding: 15px;
font-size: 18px;
font-weight: bold;
text-align: center;
border-radius: 5px;
display: none;
}
.score-good { background-color: #d4edda; color: #155724; }
.score-bad { background-color: #f8d7da; color: #721c24; }
</style>
<div class="blog-container">
<h2>🎯 Quick Review 7: Научи и Вежбај со Виктор</h2>
<p>Добредојде Виктор! Користи ги јазичињата за да ја повториш граматиката и зборовите, а потоа тестирај се со големиот квиз од 40 задачи.</p>
<div class="tab-container-menu"><button class="tab-link active" onclick="openTab(event, 'grammar')">📝 Граматика (Past Simple)</button><button class="tab-link" onclick="openTab(event, 'vocabulary')">🎒 Вокабулар (Зборови)</button><button class="tab-link" onclick="openTab(event, 'quiz')">🏆 Квиз (40 Задачи)</button></div>
<div id="grammar" class="tab-content active">
<h3>1. Past Simple of "be" (Минато време од глаголот СУМ)</h3>
<div class="grammar-box">
<p>Глаголот <b>be</b> во минато време има две форми: <b>was</b> и <b>were</b>.</p>
<ul>
<li><b>I / He / She / It</b> → <b>was</b> (негација: <b>wasn't</b>)</li>
<li><b>You / We / They</b> → <b>were</b> (негација: <b>weren't</b>)</li>
</ul>
<p><i>Примери:</i> Laika <b>was</b> a dog. / Singers <b>weren't</b> on social media 100 years ago.</p>
<p><i>Прашања:</i> <b>Was</b> Grace Hopper a celebrity? → Yes, she <b>was</b>. / <b>Were</b> The Beatles from London? → No, they <b>weren't</b>.</p>
</div>
<h3>2. Regular Verbs (Правилни глаголи)</h3>
<div class="grammar-box">
<p>За правилни глаголи во потврдна форма (affirmative) додаваме суфикс <b>-ed</b>.</p>
<p><b>Правила за пишување (Spelling rules):</b></p>
<ol>
<li>Повеќето глаголи: додаваат <b>-ed</b> (walk → walk<b>ed</b>, look → look<b>ed</b>)</li>
<li>Ако завршува на <b>-e</b>: додаваат само <b>-d</b> (change → change<b>d</b>, dance → dance<b>d</b>)</li>
<li>Ако завршува на <b>согласка + -y</b>: -y преминува во <b>-ied</b> (study → stud<b>ied</b>, carry → carr<b>ied</b>)</li>
<li>Ако завршува на <b>кратка самогласка + согласка</b>: последната согласка се дуплира (stop → stop<b>ped</b>, chat → chat<b>ted</b>)</li>
</ol>
</div>
<h3>3. Irregular Verbs (Неправилни глаголи)</h3>
<div class="grammar-box">
<p>Овие глаголи целосно ја менуваат својата форма и мора да се научат напамет!</p>
<ul>
<li>go → <b>went</b></li>
<li>have → <b>had</b></li>
<li>do → <b>did</b></li>
<li>see → <b>saw</b></li>
<li>take → <b>took</b></li>
<li>meet → <b>met</b></li>
</ul>
<p><i>Пример:</i> I <b>went</b> to the cinema and I <b>saw</b> a good film.</p>
</div>
</div>
<div id="vocabulary" class="tab-content">
<h3>💼 Jobs (Професии)</h3>
<div class="vocab-box">
<div class="word-list">
<div class="word-item"><b>actor</b> - актер</div>
<div class="word-item"><b>artist</b> - уметник</div>
<div class="word-item"><b>astronaut</b> - астронаут</div>
<div class="word-item"><b>cook</b> - готвач</div>
<div class="word-item"><b>doctor</b> - доктор</div>
<div class="word-item"><b>farmer</b> - земјоделец</div>
<div class="word-item"><b>inventor</b> - пронаоѓач</div>
<div class="word-item"><b>singer</b> - пејач(ка)</div>
<div class="word-item"><b>teacher</b> - наставник</div>
<div class="word-item"><b>waiter</b> - келнер</div>
</div>
</div>
<h3>📅 Dates (Месеци и Редни броеви)</h3>
<div class="vocab-box">
<p><b>Months (Месеци):</b> January, February, March, April, May, June, July, August, September, October, November, December.</p>
<p><b>Ordinal Numbers (Редни броеви за датуми):</b></p>
<small>Внимавај на првите три (1st, 2nd, 3rd) и на наставката <b>-th</b> кај останатите!</small>
<div class="word-list">
<div class="word-item">1st - first</div>
<div class="word-item">2nd - second</div>
<div class="word-item">3rd - third</div>
<div class="word-item">4th - fourth</div>
<div class="word-item">5th - fifth</div>
<div class="word-item">12th - twelfth</div>
<div class="word-item">20th - twentieth</div>
<div class="word-item">22nd - twenty-second</div>
<div class="word-item">31st - thirty-first</div>
</div>
</div>
<h3>🎭 Adjectives to describe feelings (Придавки за чувства)</h3>
<div class="vocab-box">
<div class="word-list">
<div class="word-item"><b>afraid</b> - уплашен</div>
<div class="word-item"><b>bored</b> - досадува се</div>
<div class="word-item"><b>hungry</b> - гладен</div>
<div class="word-item"><b>ill</b> - болен</div>
<div class="word-item"><b>interested</b> - заинтересиран</div>
<div class="word-item"><b>pleased</b> - задоволен</div>
<div class="word-item"><b>relaxed</b> - опуштен</div>
<div class="word-item"><b>surprised</b> - изненаден</div>
<div class="word-item"><b>thirsty</b> - жеден</div>
<div class="word-item"><b>tired</b> - уморен</div>
<div class="word-item"><b>well</b> - добар / здрав</div>
<div class="word-item"><b>worried</b> - загрижен</div>
</div>
</div>
</div>
<div id="quiz" class="tab-content">
<h3>🏆 Провери го знаењето (40 прашања)</h3>
<form id="quiz-form">
<div id="dynamic-questions"></div>
<button type="button" class="btn-submit" onclick="checkQuiz()">Провери ги резултатите</button>
</form>
<div id="quiz-result"></div>
</div>
</div>
<script>
function openTab(evt, tabName) {
// Сокриј ги сите табови сигурно
var tabcontents = document.querySelectorAll(".tab-content");
tabcontents.forEach(function(content) {
content.style.setProperty('display', 'none', 'important');
content.classList.remove("active");
});
// Тргни активна класа од копчињата
var tablinks = document.querySelectorAll(".tab-link");
tablinks.forEach(function(link) {
link.classList.remove("active");
});
// Прикажи го бараниот таб
var activeTab = document.getElementById(tabName);
activeTab.style.setProperty('display', 'block', 'important');
activeTab.classList.add("active");
if (evt && evt.currentTarget) {
evt.currentTarget.classList.add("active");
}
}
const quizData = [
{ q: "1. Laika ___ a dog from Russia.", a: ["was", "were", "wasn't"], c: 0 },
{ q: "2. The Beatles ___ from London.", a: ["was", "were", "wasn't"], c: 1 },
{ q: "3. Singers ___ on social media a hundred years ago.", a: ["wasn't", "weren't", "was"], c: 1 },
{ q: "4. ___ Grace Hopper a celebrity?", a: ["Were", "Was", "Is"], c: 1 },
{ q: "5. Where ___ you yesterday?", a: ["was", "were", "did"], c: 1 },
{ q: "6. I ___ at home last night. (Потврдна форма)", a: ["were", "was", "been"], c: 1 },
{ q: "7. We ___ at school on Sunday.", a: ["wasn't", "weren't", "not were"], c: 1 },
{ q: "8. 'Was Viktor happy?' - 'Yes, he ___.'", a: ["was", "were", "is"], c: 0 },
{ q: "9. They ___ tired after the long walk.", a: ["was", "were", "are"], c: 1 },
{ q: "10. 'Were you in Skopje?' - 'No, we ___.'", a: ["wasn't", "weren't", "not"], c: 1 },
{ q: "11. Минато време од 'walk' е:", a: ["walked", "walkes", "walkped"], c: 0 },
{ q: "12. Минато време од 'change' (завршува на -e) е:", a: ["changed", "changeed", "changid"], c: 0 },
{ q: "13. Како правилно се пишува минато време од 'study'?", a: ["studyed", "studied", "studid"], c: 1 },
{ q: "14. Како правилно се пишува минато време од 'stop'?", a: ["stoped", "stopped", "stoppied"], c: 1 },
{ q: "15. Глаголот 'dance' во минато време станува:", a: ["danced", "danceed", "dancing"], c: 0 },
{ q: "16. Глаголот 'carry' во минато време станува:", a: ["carryed", "carried", "carryd"], c: 1 },
{ q: "17. Како правилно се пишува минато време од 'chat'?", a: ["chated", "chatted", "chattied"], c: 1 },
{ q: "18. Глаголот 'look' во минато време се пишува:", a: ["looked", "lookked", "lookid"], c: 0 },
{ q: "19. We ___ video games last Saturday.", a: ["played", "playied", "playyed"], c: 0 },
{ q: "20. I ___ TV yesterday evening.", a: ["watched", "watchted", "watch"], c: 0 },
{ q: "21. Минато време од глаголот 'go' е:", a: ["goed", "went", "gone"], c: 1 },
{ q: "22. Минато време од глаголот 'have' е:", a: ["haved", "has", "had"], c: 2 },
{ q: "23. Минато време од глаголот 'do' е:", a: ["did", "done", "doed"], c: 0 },
{ q: "24. I ___ a good film last weekend. (од глаголот see)", a: ["seed", "saw", "seen"], c: 1 },
{ q: "25. He ___ the bus to school. (од глаголот take)", a: ["took", "taked", "taken"], c: 0 },
{ q: "26. We ___ our teacher at the supermarket. (од глаголот meet)", a: ["met", "meetid", "meeted"], c: 0 },
{ q: "27. Viktor ___ to the cinema yesterday.", a: ["go", "went", "gone"], c: 1 },
{ q: "28. Лице кое патува во вселената е ___.", a: ["artist", "astronaut", "farmer"], c: 1 },
{ q: "29. Лице кое прави изуми/пронаоѓаци е ___.", a: ["inventor", "waiter", "actor"], c: 0 },
{ q: "30. Кој месец доаѓа по February?", a: ["April", "March", "May"], c: 1 },
{ q: "31. Како се пишува по ред петти (5th) на англиски?", a: ["fiveth", "fifth", "fith"], c: 1 },
{ q: "32. Како се пишува по ред дваесет и втор (22nd)?", a: ["twenty-second", "twenty-two", "twenty-secondth"], c: 0 },
{ q: "33. Кој е последен месец во годината?", a: ["November", "December", "January"], c: 1 },
{ q: "34. Како се пишува први (1st)?", a: ["oneth", "first", "one"], c: 1 },
{ q: "35. Кога сакаш да пиеш вода, ти си ___.", a: ["hungry", "thirsty", "tired"], c: 1 },
{ q: "36. Кога нема ништо интересно да правиш, ти е ___.", a: ["bored", "pleased", "relaxed"], c: 0 },
{ q: "37. Спротивен збор од уплашен (afraid) во однос на добро чувство (здрав/добар) е ___.", a: ["ill", "well", "worried"], c: 1 },
{ q: "38. Кога си загрижен за нешто, ти си ___.", a: ["relaxed", "worried", "pleased"], c: 1 },
{ q: "39. По долг и напорен тренинг, Виктор е многу ___.", a: ["tired", "interested", "fresh"], c: 0 },
{ q: "40. Кога некој ќе ти приреди забава без да знаеш, ти си ___.", a: ["surprised", "bored", "ill"], c: 0 }
];
const questionsContainer = document.getElementById('dynamic-questions');
if (questionsContainer) {
quizData.forEach((item, index) => {
let optionsHtml = '';
item.a.forEach((opt, oIndex) => {
optionsHtml += `
<label class="option-label">
<input type="radio" name="q${index}" value="${oIndex}"> ${opt}
</label>
`;
});
questionsContainer.innerHTML += `
<div class="question-container">
<div class="question-text">${item.q}</div>
<div class="options-route">${optionsHtml}</div>
</div>
`;
});
}
function checkQuiz() {
let score = 0;
quizData.forEach((item, index) => {
const selected = document.querySelector(`input[name="q${index}"]:checked`);
if (selected && parseInt(selected.value) === item.c) {
score++;
}
});
const resultDiv = document.getElementById('quiz-result');
if (resultDiv) {
resultDiv.style.setProperty('display', 'block', 'important');
if (score >= 30) {
resultDiv.className = "score-good";
resultDiv.innerHTML = `🌟 Одлично Виктор! Твојот резултат е ${score} од 40 точни одговори. Супер го совлада материјалот!`;
} else {
resultDiv.className = "score-bad";
resultDiv.innerHTML = `📚 Добра вежба! Имаш ${score} од 40. Погледни ги јазичињата со граматика уште еднаш и обиди се пак!`;
}
resultDiv.scrollIntoView({ behavior: 'smooth' });
}
}
</script><div class="blogger-post-footer">www.bloglines.com</div>Anica Petkoskahttp://www.blogger.com/profile/12340858614356870735noreply@blogger.comtag:blogger.com,1999:blog-26523155.post-4185952708409652142026-05-21T17:32:51.267+02:002026-05-21T17:47:24.108+02:00Viktor <!DOCTYPE html>
<html lang="mk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Подготовка за Тест по Англиски јазик - 6то одделение</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f4f7f6;
color: #333;
line-height: 1.6;
padding: 20px;
}
.container {
max-width: 850px;
margin: 0 auto;
background: #fff;
padding: 30px;
border-radius: 12px;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
h1 { color: #2c3e50; text-align: center; margin-bottom: 30px; }
h3 { color: #34495e; margin-top: 25px; border-left: 4px solid #f39c12; padding-left: 10px; }
.quiz-question {
background: #f9f9f9;
padding: 15px;
margin-bottom: 15px;
border-radius: 6px;
border-left: 4px solid #34495e;
}
.quiz-options label {
display: block;
margin: 8px 0;
cursor: pointer;
padding: 10px;
border-radius: 4px;
border: 1px solid #ddd;
background: #fff;
transition: 0.2s;
}
.quiz-options input[type="radio"] {
margin-right: 10px;
}
/* Автоматско позеленување за Точен одговор */
.quiz-options input[value="correct"]:checked + span {
color: #155724;
font-weight: bold;
}
.quiz-options label:has(input[value="correct"]:checked) {
background-color: #d4edda !important;
border-color: #c3e6cb !important;
}
/* Автоматско поцрвенување за Погрешен одговор */
.quiz-options input[value="wrong"]:checked + span {
color: #721c24;
font-weight: bold;
}
.quiz-options label:has(input[value="wrong"]:checked) {
background-color: #f8d7da !important;
border-color: #f5c6cb !important;
}
</style>
</head>
<body>
<div class="container">
<h1>🎯 Past Simple Tense Exercises</h1>
<p style="text-align:center; font-style:italic; color: #7f8c8d;">Choose the correct answer. The box will turn green for correct and red for wrong!</p>
<form id="quiz-form" onsubmit="return false;">
<h3>I. Complete the sentences with the correct past form of the verbs:</h3>
<div class="quiz-question"><p><strong>1. Last month, Sara and Tom ______ a weekend at the beach. (spend)</strong></p>
<div class="quiz-options">
<label><input type="radio" name="q1" value="wrong"> <span>spended</span></label>
<label><input type="radio" name="q1" value="correct"> <span>spent</span></label>
</div></div>
<div class="quiz-question"><p><strong>2. They ______ in a small hotel near the beach. (stay)</strong></p>
<div class="quiz-options">
<label><input type="radio" name="q2" value="correct"> <span>stayed</span></label>
<label><input type="radio" name="q2" value="wrong"> <span>staied</span></label>
</div></div>
<div class="quiz-question"><p><strong>3. They ______ very early every morning. (wake up)</strong></p>
<div class="quiz-options">
<label><input type="radio" name="q3" value="wrong"> <span>waked up</span></label>
<label><input type="radio" name="q3" value="correct"> <span>woke up</span></label>
</div></div>
<div class="quiz-question"><p><strong>4. Yesterday, my brother ______ using social media. (stop)</strong></p>
<div class="quiz-options">
<label><input type="radio" name="q4" value="correct"> <span>stopped</span></label>
<label><input type="radio" name="q4" value="wrong"> <span>stoped</span></label>
</div></div>
<div class="quiz-question"><p><strong>5. We ______ a surprise party last week. (plan)</strong></p>
<div class="quiz-options">
<label><input type="radio" name="q5" value="wrong"> <span>planed</span></label>
<label><input type="radio" name="q5" value="correct"> <span>planned</span></label>
</div></div>
<div class="quiz-question"><p><strong>6. I ______ for a test yesterday evening. (study)</strong></p>
<div class="quiz-options">
<label><input type="radio" name="q6" value="correct"> <span>studied</span></label>
<label><input type="radio" name="q6" value="wrong"> <span>studyed</span></label>
</div></div>
<div class="quiz-question"><p><strong>7. On Saturday, they ______ in the sea. (swim)</strong></p>
<div class="quiz-options">
<label><input type="radio" name="q7" value="wrong"> <span>swamed</span></label>
<label><input type="radio" name="q7" value="correct"> <span>swam</span></label>
</div></div>
<div class="quiz-question"><p><strong>8. They ______ lots of beautiful shells. (collect)</strong></p>
<div class="quiz-options">
<label><input type="radio" name="q8" value="correct"> <span>collected</span></label>
<label><input type="radio" name="q8" value="wrong"> <span>collectted</span></label>
</div></div>
<div class="quiz-question"><p><strong>9. I ______ a strange noise at midnight. (hear)</strong></p>
<div class="quiz-options">
<label><input type="radio" name="q9" value="wrong"> <span>heared</span></label>
<label><input type="radio" name="q9" value="correct"> <span>heard</span></label>
</div></div>
<div class="quiz-question"><p><strong>10. Last night, we ______ a delicious dinner at a restaurant. (have)</strong></p>
<div class="quiz-options">
<label><input type="radio" name="q10" value="correct"> <span>had</span></label>
<label><input type="radio" name="q10" value="wrong"> <span>haved</span></label>
</div></div>
<div class="quiz-question"><p><strong>11. She ______ to the cinema with her friends two days ago. (go)</strong></p>
<div class="quiz-options">
<label><input type="radio" name="q11" value="wrong"> <span>wented</span></label>
<label><input type="radio" name="q11" value="correct"> <span>went</span></label>
</div></div>
<div class="quiz-question"><p><strong>12. The children ______ football in the park yesterday afternoon. (play)</strong></p>
<div class="quiz-options">
<label><input type="radio" name="q12" value="correct"> <span>played</span></label>
<label><input type="radio" name="q12" value="wrong"> <span>plaied</span></label>
</div></div>
<h3>II. Negative sentences (Choose the correct negative past form):</h3>
<div class="quiz-question"><p><strong>13. Sara ______ well because she heard a strange noise. (not sleep)</strong></p>
<div class="quiz-options">
<label><input type="radio" name="q13" value="wrong"> <span>didn't slept</span></label>
<label><input type="radio" name="q13" value="correct"> <span>didn't sleep</span></label>
</div></div>
<div class="quiz-question"><p><strong>14. We ______ to the beach because it was raining. (not go)</strong></p>
<div class="quiz-options">
<label><input type="radio" name="q14" value="correct"> <span>didn't go</span></label>
<label><input type="radio" name="q14" value="wrong"> <span>didn't went</span></label>
</div></div>
<div class="quiz-question"><p><strong>15. I ______ my homework yesterday evening. (not do)</strong></p>
<div class="quiz-options">
<label><input type="radio" name="q15" value="wrong"> <span>didn't did</span></label>
<label><input type="radio" name="q15" value="correct"> <span>didn't do</span></label>
</div></div>
<div class="quiz-question"><p><strong>16. They ______ TV last night. (not watch)</strong></p>
<div class="quiz-options">
<label><input type="radio" name="q16" value="correct"> <span>didn't watch</span></label>
<label><input type="radio" name="q16" value="wrong"> <span>didn't watched</span></label>
</div></div>
<div class="quiz-question"><p><strong>17. He ______ his new friends at the hotel. (not meet)</strong></p>
<div class="quiz-options">
<label><input type="radio" name="q17" value="wrong"> <span>didn't met</span></label>
<label><input type="radio" name="q17" value="correct"> <span>didn't meet</span></label>
</div></div>
<h3>III. Questions and short answers (Choose the correct form):</h3>
<div class="quiz-question"><p><strong>18. ______ you sleep well last night?</strong></p>
<div class="quiz-options">
<label><input type="radio" name="q18" value="correct"> <span>Did</span></label>
<label><input type="radio" name="q18" value="wrong"> <span>Do</span></label>
</div></div>
<div class="quiz-question"><p><strong>19. No, I ______.</strong></p>
<div class="quiz-options">
<label><input type="radio" name="q19" value="wrong"> <span>wasn't</span></label>
<label><input type="radio" name="q19" value="correct"> <span>didn't</span></label>
</div></div>
<div class="quiz-question"><p><strong>20. ______ Tom ask a question about the noise?</strong></p>
<div class="quiz-options">
<label><input type="radio" name="q20" value="correct"> <span>Did</span></label>
<label><input type="radio" name="q20" value="wrong"> <span>Was</span></label>
</div></div>
<div class="quiz-question"><p><strong>21. Yes, he ______.</strong></p>
<div class="quiz-options">
<label><input type="radio" name="q21" value="correct"> <span>did</span></label>
<label><input type="radio" name="q21" value="wrong"> <span>was</span></label>
</div></div>
<div class="quiz-question"><p><strong>22. ______ they collect lots of shells on Saturday?</strong></p>
<div class="quiz-options">
<label><input type="radio" name="q22" value="wrong"> <span>Were</span></label>
<label><input type="radio" name="q22" value="correct"> <span>Did</span></label>
</div></div>
<div class="quiz-question"><p><strong>23. Yes, they ______.</strong></p>
<div class="quiz-options">
<label><input type="radio" name="q23" value="correct"> <span>did</span></label>
<label><input type="radio" name="q23" value="wrong"> <span>were</span></label>
</div></div>
<h3>IV. Past Simple form of the verb TO BE (was / were / wasn't / weren't):</h3>
<div class="quiz-question"><p><strong>24. Sara and Tom ______ happy during their weekend.</strong></p>
<div class="quiz-options">
<label><input type="radio" name="q24" value="wrong"> <span>was</span></label>
<label><input type="radio" name="q24" value="correct"> <span>were</span></label>
</div></div>
<div class="quiz-question"><p><strong>25. The hotel ______ very big, it was small.</strong></p>
<div class="quiz-options">
<label><input type="radio" name="q25" value="correct"> <span>wasn't</span></label>
<label><input type="radio" name="q25" value="wrong"> <span>weren't</span></label>
</div></div>
<div class="quiz-question"><p><strong>26. ______ it a sunny day on Saturday?</strong></p>
<div class="quiz-options">
<label><input type="radio" name="q26" value="correct"> <span>Was</span></label>
<label><input type="radio" name="q26" value="wrong"> <span>Were</span></label>
</div></div>
<div class="quiz-question"><p><strong>27. Yes, it ______.</strong></p>
<div class="quiz-options">
<label><input type="radio" name="q27" value="wrong"> <span>did</span></label>
<label><input type="radio" name="q27" value="correct"> <span>was</span></label>
</div></div>
<div class="quiz-question"><p><strong>28. The noise ______ very loud at night.</strong></p>
<div class="quiz-options">
<label><input type="radio" name="q28" value="correct"> <span>was</span></label>
<label><input type="radio" name="q28" value="wrong"> <span>were</span></label>
</div></div>
<div class="quiz-question"><p><strong>29. The sea shells ______ beautiful.</strong></p>
<div class="quiz-options">
<label><input type="radio" name="q29" value="wrong"> <span>was</span></label>
<label><input type="radio" name="q29" value="correct"> <span>were</span></label>
</div></div>
<div class="quiz-question"><p><strong>30. Why ______ you late for school yesterday afternoon?</strong></p>
<div class="quiz-options">
<label><input type="radio" name="q30" value="wrong"> <span>was</span></label>
<label><input type="radio" name="q30" value="correct"> <span>were</span></label>
</div></div>
</form>
</div>
</body>
</html><div class="blogger-post-footer">www.bloglines.com</div>Anica Petkoskahttp://www.blogger.com/profile/12340858614356870735noreply@blogger.comtag:blogger.com,1999:blog-26523155.post-34018069544796636362026-05-21T14:47:59.999+02:002026-05-21T15:36:54.379+02:00Deutsch lernen, Биографии и Präteritum <style>
/* Основен стил */
.blog-container {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
max-width: 850px;
margin: 20px auto;
background: #ffffff;
border-radius: 12px;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
overflow: hidden;
color: #333333;
}
.blog-header {
background: linear-gradient(135deg, #4A90E2, #50E3C2);
color: white;
padding: 30px;
text-align: center;
}
.blog-header h1 { margin: 0; font-size: 28px; }
.blog-header p { margin: 10px 0 0 0; font-size: 16px; opacity: 0.9; }
/* Главна навигација */
.tabs-nav { display: flex; background: #f5f7fa; border-bottom: 2px solid #e1e8ed; overflow-x: auto; }
.tab-button {
flex: 1; padding: 15px 20px; border: none; background: none;
font-size: 16px; font-weight: 600; cursor: pointer; color: #657786;
transition: all 0.3s ease; text-align: center; white-space: nowrap;
}
.tab-button:hover { background: #e1e8ed; color: #1c1e21; }
.tab-button.active { color: #4A90E2; border-bottom: 3px solid #4A90E2; background: #ffffff; }
/* Содржина */
.tab-content { display: none; padding: 30px; animation: fadeIn 0.5s ease; }
.tab-content.active { display: block; }
/* Под-јазичиња */
.sub-tabs { display: flex; gap: 10px; margin-bottom: 20px; overflow-x: auto; padding-bottom: 5px; }
.sub-tab-btn {
padding: 8px 15px; border: 1px solid #4A90E2; background: #ffffff; color: #4A90E2;
border-radius: 20px; cursor: pointer; font-weight: 600; font-size: 14px; transition: 0.2s; white-space: nowrap;
}
.sub-tab-btn.active, .sub-tab-btn:hover { background: #4A90E2; color: white; }
.sub-tab-content { display: none; }
.sub-tab-content.active { display: block; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
/* Текст и аудио контроли */
.biography-block { background: #fafbfc; padding: 25px; border-radius: 8px; border: 1px solid #e1e8ed; margin-bottom: 25px; }
.biography-text { font-size: 18px; line-height: 1.6; margin-bottom: 20px; }
.audio-btn {
background: #4A90E2; color: white; border: none; padding: 10px 18px;
font-size: 15px; font-weight: bold; border-radius: 20px; cursor: pointer;
display: inline-flex; align-items: center; gap: 8px; transition: 0.2s; margin-bottom: 10px;
}
.audio-btn:hover { background: #357ABD; }
/* Звучни картички */
.flashcard-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 15px; margin-top: 20px; }
.flip-card { background-color: transparent; width: 100%; height: 110px; perspective: 1000px; cursor: pointer; }
.flip-card-inner { position: relative; width: 100%; height: 100%; text-align: center; transition: transform 0.6s; transform-style: preserve-3d; box-shadow: 0 4px 8px rgba(0,0,0,0.1); border-radius: 8px; }
.flip-card:hover .flip-card-inner { transform: rotateY(180deg); }
.flip-card-front, .flip-card-back {
position: absolute; width: 100%; height: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden;
display: flex; align-items: center; justify-content: center; flex-direction: column; border-radius: 8px; padding: 10px; box-sizing: border-box;
}
.flip-card-front { background-color: #eef2f7; color: #4A90E2; border: 2px solid #cbd5e1; }
.flip-card-front .german { font-size: 20px; font-weight: bold; }
.flip-card-front .speaker-icon { font-size: 12px; color: #a0aec0; margin-top: 5px; }
.flip-card-back { background-color: #50E3C2; color: #1c1e21; transform: rotateY(180deg); }
.flip-card-back .macedonian { font-size: 16px; font-weight: 600; }
/* Директни Прашања под текстовите */
.qa-section { margin-top: 30px; border-top: 2px dashed #cbd5e1; padding-top: 20px; }
.qa-section h3 { color: #4A90E2; margin-bottom: 15px; font-size: 20px; }
.question-block { margin-bottom: 20px; background: #f8fafc; padding: 15px; border-radius: 6px; border-left: 4px solid #4A90E2; }
.question-block h4 { margin: 0 0 10px 0; color: #1c1e21; font-size: 16px; }
.answer-input { width: 100%; padding: 12px; border: 2px solid #cbd5e1; border-radius: 6px; font-size: 16px; box-sizing: border-box; }
.answer-input:focus { border-color: #4A90E2; outline: none; }
/* Граматика и Хинтови */
.grammar-box { background: #fff9db; border-left: 5px solid #f59f00; padding: 15px; border-radius: 6px; margin-bottom: 20px; }
.hint-box { background: #e3faf2; border-left: 5px solid #0ca678; padding: 15px; border-radius: 6px; margin-bottom: 20px; font-size: 15px; line-height: 1.5; }
.grammar-table { width: 100%; border-collapse: collapse; margin: 15px 0; }
.grammar-table th, .grammar-table td { border: 1px solid #e1e8ed; padding: 12px; text-align: left; }
.grammar-table th { background: #f5f7fa; }
/* Твое место */
.writing-area { width: 100%; height: 220px; padding: 15px; border: 2px solid #cbd5e1; border-radius: 8px; font-size: 16px; resize: vertical; box-sizing: border-box; font-family: inherit; }
.save-btn { background: #4A90E2; color: white; border: none; padding: 12px 25px; font-size: 16px; font-weight: bold; border-radius: 6px; cursor: pointer; margin-top: 15px; }
</style>
<div class="blog-container">
<div class="blog-header">
<h1>Deutsch lernen преку биографии</h1>
<p>Прочитајте го текстот, слушнете го изговорот и одговорете на прашањата веднаш подолу!</p>
</div>
<div class="tabs-nav">
<button class="tab-button active" onclick="openTab(event, 'tab1')">1. Читај и одговори</button>
<button class="tab-button" onclick="openTab(event, 'tab2')">2. Звучни картички</button>
<button class="tab-button" onclick="openTab(event, 'tab4')">3. Граматика</button>
<button class="tab-button" onclick="openTab(event, 'tab5')">4. Твое место</button>
</div>
<div id="tab1" class="tab-content active">
<div class="sub-tabs">
<button class="sub-tab-btn active" onclick="openSubTab(event, 'bio-marica')">Баба Марица</button>
<button class="sub-tab-btn" onclick="openSubTab(event, 'bio-einstein')">Albert Einstein</button>
<button class="sub-tab-btn" onclick="openSubTab(event, 'bio-galileo')">Galileo Galilei</button>
<button class="sub-tab-btn" onclick="openSubTab(event, 'bio-mozart')">W. A. Mozart</button>
<button class="sub-tab-btn" onclick="openSubTab(event, 'bio-tose')">Toše Proeski</button>
</div>
<div id="bio-marica" class="sub-tab-content active">
<div class="biography-block">
<button class="audio-btn" onclick="speakText('text-marica', 'marica')">🎧 Слушај го текстот</button>
<div class="biography-text" id="text-marica">
Meine Großmutter Marica ist 1903 in Ohrid, in Nordmazedonien, geboren. Sie wuchs in der Altstadt auf, in der Nähe von der Samoil-Festung. Das Haus war im typischen alten Ohrid-Stil mit einem Tschardak. Marica hatte ein schweres Leben. Ihr Mann, mein Großvater Boris, war krank und starb jung. Sie hatten zwei Söhne und eine Tochter. Ein großer Schmerz brach ihr Herz: Ihr 16-jähriger Sohn Koste starb durch eine verirrte Kugel. Aber Marica war eine sehr starke Frau. Sie arbeitete als Putzkraft in der Schule und im Krankenhaus. Sie wusch auch Kleidung für reiche Leute am Strand Labino. So konnte sie Geld verdienen, um meine Mutter auf die Lehrerschule in Bitola zu schicken. Später baute sie ein Haus im Wlaschko-Maalo. Ich liebte meine Großmutter sehr. Ich besuchte sie oft in den Ferien. Sie kochte jeden Tag leckeres Essen, besonders meine Lieblingsspeise: Pita mit Kürbis. Sie hatte auch wunderschöne Blumen im Hof. Ich war 21 Jahre alt, als sie starb.
</div>
</div>
<div class="qa-section">
<h3>Beantworte die Fragen (Одговори за Баба Марица)</h3>
<div class="question-block"><h4>1. Wann und wo ist Großmutter Marica geboren?</h4><input type="text" class="answer-input" placeholder="Внесете го одговорот на германски..."></div>
<div class="question-block"><h4>2. Wie war das Haus in der Altstadt von Ohrid?</h4><input type="text" class="answer-input" placeholder="Внесете го одговорот на германски..."></div>
<div class="question-block"><h4>3. Wer war ihr Mann und warum war das Leben schwer?</h4><input type="text" class="answer-input" placeholder="Внесете го одговорот на германски..."></div>
<div class="question-block"><h4>4. Wo arbeitete Marica, um Geld zu verdienen?</h4><input type="text" class="answer-input" placeholder="Внесете го одговорот на германски..."></div>
<div class="question-block"><h4>5. Was kochte sie für ihr Enkelkind?</h4><input type="text" class="answer-input" placeholder="Внесете го одговорот на германски..."></div>
</div>
</div>
<div id="bio-einstein" class="sub-tab-content">
<div class="biography-block">
<button class="audio-btn" onclick="speakText('text-einstein', 'normal')">🎧 Слушај го текстот</button>
<div class="biography-text" id="text-einstein">
Albert Einstein war ein berühmter Physiker. Er ist 1879 in Deutschland geboren. Als Kind war er sehr neugierig. Er studierte in der Schweiz und arbeitete later als Professor. Einstein wohnte in vielen Ländern, zum Beispiel in Deutschland und in den USA. Er entdeckte wichtige Gesetze der Physik. Er liebte auch Musik und spielte Violine. Einstein starb im Jahr 1955.
</div>
</div>
<div class="qa-section">
<h3>Beantworte die Fragen (Одговори за Albert Einstein)</h3>
<div class="question-block"><h4>1. Wer war die Person?</h4><input type="text" class="answer-input" placeholder="Внесете го одговорот..."></div>
<div class="question-block"><h4>2. Wann und wo ist sie geboren?</h4><input type="text" class="answer-input" placeholder="Внесете го одговорот..."></div>
<div class="question-block"><h4>3. Was machte sie im Leben?</h4><input type="text" class="answer-input" placeholder="Внесете го одговорот..."></div>
<div class="question-block"><h4>4. Was waren ihre Hobbys oder Interessen?</h4><input type="text" class="answer-input" placeholder="Внесете го одговорот..."></div>
</div>
</div>
<div id="bio-galileo" class="sub-tab-content">
<div class="biography-block">
<button class="audio-btn" onclick="speakText('text-galileo', 'normal')">🎧 Слушај го текстот</button>
<div class="biography-text" id="text-galileo">
Galileo Galilei war ein bekannter Astronom und Mathematiker. Er ist 1564 in Italien geboren. Er interessierte sich sehr für die Sterne und den Himmel. Galileo baute ein großes Teleskop. Er studierte die Planeten und sagte: "Die Erde bewegt sich um die Sonne." Das war eine Revolution! Er schrieb viele wichtige Bücher. Galileo starb im Jahr 1642.
</div>
</div>
<div class="qa-section">
<h3>Beantworte die Fragen (Одговори за Galileo Galilei)</h3>
<div class="question-block"><h4>1. Wer war die Person?</h4><input type="text" class="answer-input" placeholder="Внесете го одговорот..."></div>
<div class="question-block"><h4>2. Wann und wo ist sie geboren?</h4><input type="text" class="answer-input" placeholder="Внесете го одговорот..."></div>
<div class="question-block"><h4>3. Was war sein/ihr Interesse?</h4><input type="text" class="answer-input" placeholder="Внесете го одговорот..."></div>
<div class="question-block"><h4>4. Was machte oder entdeckte sie?</h4><input type="text" class="answer-input" placeholder="Внесете го одговорот..."></div>
</div>
</div>
<div id="bio-mozart" class="sub-tab-content">
<div class="biography-block">
<button class="audio-btn" onclick="speakText('text-mozart', 'normal')">🎧 Слушај го текстот</button>
<div class="biography-text" id="text-mozart">
Wolfgang Amadeus Mozart war ein genialer Komponist und Musiker. Er ist 1756 in Salzburg, in Österreich, geboren. Schon als kleines Kind spielte er wunderbar Klavier und Violine. Er reiste mit seiner Familie durch ganz Europa und gab Konzerte. Später wohnte und arbeitete er in Wien. Mozart schrieb über 600 wunderschöne Musikstücke. Er starb sehr jung im Jahr 1791.
</div>
</div>
<div class="qa-section">
<h3>Beantworte die Fragen (Одговори за W. A. Mozart)</h3>
<div class="question-block"><h4>1. Wer war die Person?</h4><input type="text" class="answer-input" placeholder="Внесете го одговорот..."></div>
<div class="question-block"><h4>2. Wann und wo ist sie geboren?</h4><input type="text" class="answer-input" placeholder="Внесете го одговорот..."></div>
<div class="question-block"><h4>3. Was machte sie als Kind?</h4><input type="text" class="answer-input" placeholder="Внесете го одговорот..."></div>
<div class="question-block"><h4>4. Was hinterließ sie der Welt?</h4><input type="text" class="answer-input" placeholder="Внесете го одговорот..."></div>
</div>
</div>
<div id="bio-tose" class="sub-tab-content">
<div class="biography-block">
<button class="audio-btn" onclick="speakText('text-tose', 'tose')">🎧 Слушај го текстот</button>
<div class="biography-text" id="text-tose">
Toše Proeski war ein berühmter und sehr beliebter Sänger aus Mazedonien. Er ist 1981 in Prilep geboren, aber er wuchs in Kruševo auf. Toše hatte eine wunderschöne Stimme und sang emotionale Lieder. Er war auch ein großer Humanist und half vielen Menschen. Alle Menschen auf dem Balkan liebten seine Musik und seine Energie. Toše starb im Jahr 2007 bei einem Unfall.
</div>
</div>
<div class="qa-section">
<h3>Beantworte die Fragen (Одговори за Toše Proeski)</h3>
<div class="question-block"><h4>1. Wer war Toše?</h4><input type="text" class="answer-input" placeholder="Внесете го одговорот..."></div>
<div class="question-block"><h4>2. Wann ist er geboren und wo wuchs er auf?</h4><input type="text" class="answer-input" placeholder="Внесете го одговорот..."></div>
<div class="question-block"><h4>3. Warum war er so beliebt?</h4><input type="text" class="answer-input" placeholder="Внесете го одговорот..."></div>
<div class="question-block"><h4>4. Wann starb er?</h4><input type="text" class="answer-input" placeholder="Внесете го одговорот..."></div>
</div>
</div>
</div>
<div id="tab2" class="tab-content">
<h3>Звучни картички со говор</h3>
<p>Поминете со глувчето (или кликнете) за превод, а со самиот клик ќе го **слушнете** правилниот изговор на глаголот во минато време!</p>
<div class="flashcard-container">
<div class="flip-card" onclick="speakWord('wuchs auf')"><div class="flip-card-inner"><div class="flip-card-front"><span class="german">wuchs auf</span><span class="speaker-icon">🔊 кликни за звук</span></div><div class="flip-card-back"><span class="macedonian">порасна</span></div></div></div>
<div class="flip-card" onclick="speakWord('hatte')"><div class="flip-card-inner"><div class="flip-card-front"><span class="german">hatte</span><span class="speaker-icon">🔊 кликни за звук</span></div><div class="flip-card-back"><span class="macedonian">имаше</span></div></div></div>
<div class="flip-card" onclick="speakWord('starb')"><div class="flip-card-inner"><div class="flip-card-front"><span class="german">starb</span><span class="speaker-icon">🔊 кликни за звук</span></div><div class="flip-card-back"><span class="macedonian">почина / умре</span></div></div></div>
<div class="flip-card" onclick="speakWord('arbeitete')"><div class="flip-card-inner"><div class="flip-card-front"><span class="german">arbeitete</span><span class="speaker-icon">🔊 кликни за звук</span></div><div class="flip-card-back"><span class="macedonian">работеше</span></div></div></div>
<div class="flip-card" onclick="speakWord('wusch')"><div class="flip-card-inner"><div class="flip-card-front"><span class="german">wusch</span><span class="speaker-icon">🔊 кликни за звук</span></div><div class="flip-card-back"><span class="macedonian">переше</span></div></div></div>
<div class="flip-card" onclick="speakWord('konnte')"><div class="flip-card-inner"><div class="flip-card-front"><span class="german">konnte</span><span class="speaker-icon">🔊 кликни за звук</span></div><div class="flip-card-back"><span class="macedonian">можеше</span></div></div></div>
<div class="flip-card" onclick="speakWord('liebte')"><div class="flip-card-inner"><div class="flip-card-front"><span class="german">liebte</span><span class="speaker-icon">🔊 кликни за звук</span></div><div class="flip-card-back"><span class="macedonian">сакаше</span></div></div></div>
<div class="flip-card" onclick="speakWord('kochte')"><div class="flip-card-inner"><div class="flip-card-front"><span class="german">kochte</span><span class="speaker-icon">🔊 кликни за звук</span></div><div class="flip-card-back"><span class="macedonian">готвеше</span></div></div></div>
</div>
</div>
<div id="tab4" class="tab-content">
<h3>Grammatik: Präteritum (Минато време)</h3>
<div class="grammar-box">
<strong>💡 Што е Präteritum?</strong><br>
Тоа е едноставно минато време (исто како <b>Past Simple</b> во англискиот јазик). Се користи при пишување на приказни и хроники.
</div>
<table class="grammar-table">
<thead>
<tr><th>Infinitiv (Инфинитив)</th><th>Präteritum (Минато)</th><th>Превод</th></tr>
</thead>
<tbody>
<tr><td>arbeiten</td><td><b>arbeitete</b></td><td>работеше</td></tr>
<tr><td>lieben</td><td><b>liebte</b></td><td>сакаше</td></tr>
<tr><td>kochen</td><td><b>kochte</b></td><td>готвеше</td></tr>
<tr><td>sterben</td><td><b>starb</b></td><td>почина</td></tr>
<tr><td>waschen</td><td><b>wusch</b></td><td>переше</td></tr>
<tr><td>aufwachsen</td><td><b>wuchs auf</b></td><td>порасна</td></tr>
</tbody>
</table>
<div class="grammar-box" style="background: #e3faf2; border-left-color: #0ca678;">
<strong>⚠️ ПРАВИЛО ЗА ГОДИНИ (Предлози):</strong><br>
Кога означуваме година на раѓање или настан, пишуваме <b>САМО бројка</b> или изразот <b>im Jahr [бројка]</b>.<br>
• <i>Точно:</i> Er ist 1981 geboren. / Er ist im Jahr 1981 geboren.<br>
• <i style="color: red;">Погрешно:</i> Er ist in 1981 geboren. / Er ist im 1981 geboren.
</div>
</div>
<div id="tab5" class="tab-content">
<h3>Твоето место за пишување</h3>
<p>Напишете сопствена семејна приказна. Обидете се да составите куса биографија за <b>дедо Борис</b> или за вашите баба/дедо.</p>
<div class="hint-box">
<strong>💡 Корисни хинтови (Помош за пишување):</strong><br>
• <b>За дедо Борис (Име и раѓање):</b> Mein Großvater hieß Boris. Er ist [година] in [град] geboren. (На пример: <i>Er ist 1900 in Ohrid geboren.</i>)<br>
• <b>За неговиот живот и здравје:</b> Er hatte ein schweres Leben. Er war leider oft krank. (<i>Тој имаше тежок живот. За жал, беше често болен.</i>)<br>
• <b>За неговата работа:</b> Er arbeitete als... [професија] (На пример: <i>Er arbeitete als Fischer / Schneider / Arbeiter...</i>)<br>
• <b>За неговата смрт:</b> Er starb sehr jung. (<i>Тој почина многу млад.</i>)
</div>
<textarea class="writing-area" placeholder="Започнете со пишување на германски јазик (на пример: Mein Großvater Boris war...)"></textarea>
<br>
<button class="save-btn" onclick="alert('Успешно внесено!')">Зачувај го текстот</button>
</div>
</div>
<script>
// Текст во говор со прилагодување на специфичните македонски имиња за точен германски изговор
function speakText(elementId, mode) {
var text = document.getElementById(elementId).innerText;
// Корекција за изговорот зад кулисите
if (mode === 'marica') {
text = text.replace(/Marica/g, "Maritza");
} else if (mode === 'tose') {
text = text.replace(/Toše/g, "Tosche");
}
var msg = new SpeechSynthesisUtterance();
msg.text = text;
msg.lang = 'de-DE';
msg.rate = 0.85; // Оптимално побавно темпо за учење
window.speechSynthesis.cancel();
window.speechSynthesis.speak(msg);
}
function speakWord(word) {
var msg = new SpeechSynthesisUtterance();
msg.text = word;
msg.lang = 'de-DE';
msg.rate = 0.8;
window.speechSynthesis.cancel();
window.speechSynthesis.speak(msg);
}
// Навигација за главните јазичиња
function openTab(evt, tabName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tab-content");
for (i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none"; }
tablinks = document.getElementsByClassName("tab-button");
for (i = 0; i < tablinks.length; i++) { tablinks[i].classList.remove("active"); }
document.getElementById(tabName).style.display = "block";
evt.currentTarget.classList.add("active");
window.speechSynthesis.cancel(); // Се стопира аудиото при менување јазиче
}
// Навигација за под-јазичиња (Биографии)
function openSubTab(evt, subTabName) {
var i, subcontent, sublinks;
subcontent = document.querySelectorAll("#tab1 .sub-tab-content");
for (i = 0; i < subcontent.length; i++) { subcontent[i].style.display = "none"; }
sublinks = document.querySelectorAll("#tab1 .sub-tab-btn");
for (i = 0; i < sublinks.length; i++) { sublinks[i].classList.remove("active"); }
document.getElementById(subTabName).style.display = "block";
evt.currentTarget.classList.add("active");
window.speechSynthesis.cancel();
}
</script><div class="blogger-post-footer">www.bloglines.com</div>Anica Petkoskahttp://www.blogger.com/profile/12340858614356870735noreply@blogger.comtag:blogger.com,1999:blog-26523155.post-43573713216156556032026-05-20T17:04:47.195+02:002026-05-20T17:04:47.195+02:00Deutsch lernen: Meine Erinnerungen & Grammatik<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Deutsch lernen: Meine Erinnerungen & Grammatik</title>
<style>
:root {
--primary-color: #2c3e50;
--secondary-color: #3498db;
--accent-color: #27ae60;
--bg-color: #f8f9fa;
--text-color: #333;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
color: var(--text-color);
background-color: var(--bg-color);
margin: 0;
padding: 20px;
}
.container {
max-width: 900px;
margin: 0 auto;
background: white;
padding: 30px;
border-radius: 12px;
box-shadow: 0 5px 15px rgba(0,0,0,0.08);
}
h1 {
color: var(--primary-color);
text-align: center;
border-bottom: 3px solid var(--secondary-color);
padding-bottom: 10px;
}
/* Tabs Styling */
.tabs {
display: flex;
flex-wrap: wrap;
margin: 20px 0;
border-bottom: 2px solid #ccc;
}
.tab-link {
padding: 12px 20px;
cursor: pointer;
background: #eee;
border: none;
outline: none;
font-weight: bold;
color: #555;
transition: 0.3s;
margin-right: 5px;
border-radius: 5px 5px 0 0;
}
.tab-link:hover {
background: #ddd;
}
.tab-link.active {
background: var(--secondary-color);
color: white;
}
.tab-content {
display: none;
padding: 20px 0;
}
.tab-content.active {
display: block;
}
/* Highlight styling */
.past-green { color: #27ae60; font-weight: bold; } /* Perfekt / Слаби */
.past-blue { color: #2980b9; font-weight: bold; } /* Сини / Силни */
/* Flashcards */
.flashcard-container {
display: flex;
justify-content: center;
margin: 20px 0;
}
.flashcard {
width: 320px;
height: 160px;
perspective: 1000px;
cursor: pointer;
}
.card-inner {
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.6s;
transform-style: preserve-3d;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
border-radius: 10px;
border: 2px solid var(--secondary-color);
}
.flashcard.flipped .card-inner {
transform: rotateY(180deg);
}
.card-front, .card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
display: flex;
align-items: center;
justify-content: center;
padding: 15px;
box-sizing: border-box;
font-size: 1.25rem;
border-radius: 10px;
}
.card-front { background: white; color: var(--primary-color); }
.card-back { background: var(--secondary-color); color: white; transform: rotateY(180deg); }
.card-controls { text-align: center; margin-top: 10px; }
.btn {
background: var(--primary-color);
color: white;
padding: 8px 15px;
border: none;
border-radius: 5px;
cursor: pointer;
margin: 5px;
font-size: 0.95rem;
}
.btn:hover { background: #1a252f; }
/* Audio Button */
.audio-btn {
background: #e74c3c;
color: white;
border: none;
padding: 5px 12px;
border-radius: 4px;
cursor: pointer;
font-size: 0.95rem;
}
/* Quiz Styling */
.quiz-item {
margin-bottom: 20px;
padding: 15px;
background: #f9f9f9;
border-left: 5px solid var(--secondary-color);
border-radius: 4px;
transition: background 0.3s, border-color 0.3s;
}
.quiz-options label { display: block; margin: 5px 0; cursor: pointer; }
.quiz-correct {
background: #d4efdf !important;
border-left-color: #27ae60 !important;
}
.quiz-wrong {
background: #f9ebd2 !important;
border-left-color: #e74c3c !important;
}
.correct-answer-hint {
color: #c0392b;
font-weight: bold;
margin-top: 8px;
font-size: 0.95rem;
}
/* Table */
table {
width: 100%;
border-collapse: collapse;
margin-top: 15px;
margin-bottom: 25px;
}
table, th, td { border: 1px solid #ddd; }
th, td { padding: 12px; text-align: left; }
th { background-color: var(--primary-color); color: white; }
tr:nth-child(even) { background-color: #f2f2f2; }
/* Textarea Writing Area */
.writing-area {
width: 100%;
height: 160px;
padding: 12px;
border: 2px solid #ccc;
border-radius: 6px;
font-size: 1.1rem;
resize: vertical;
box-sizing: border-box;
margin-top: 10px;
font-family: inherit;
}
.writing-area:focus {
border-color: var(--secondary-color);
outline: none;
}
.feedback-box {
margin-top: 15px;
padding: 15px;
background: #eaf2f8;
border-left: 5px solid var(--secondary-color);
border-radius: 4px;
display: none;
}
</style>
</head>
<body>
<div class="container">
<h1>Erinnerungen und Grammatik-Fallen</h1>
<p style="text-align: center; font-style: italic;">Научете како да ги избегнете најчестите граматички стапици во минато време.</p>
<div class="tabs">
<button class="tab-link active" onclick="openTab(event, 'tab1')">1. Lesen & Hören</button>
<button class="tab-link" onclick="openTab(event, 'tab2')">2. Flashcards</button>
<button class="tab-link" onclick="openTab(event, 'tab3')">3. Grammatik</button>
<button class="tab-link" onclick="openTab(event, 'tab4')">4. Quiz (20)</button>
<button class="tab-link" onclick="openTab(event, 'tab5')">5. Schreibplatz</button>
</div>
<div id="tab1" class="tab-content active">
<h3>Lesen Sie den Text und hören Sie zu</h3>
<p><em>Прочитајте ја нашата приказна за патувањата и слушнете го правилниот германски изговор.</em></p>
<button class="audio-btn" onclick="speakText('text-content')">🔊 Слушај го текстот</button>
<div id="text-content" style="margin-top: 20px; font-size: 1.15rem; background: #fffdf9; padding: 20px; border-radius: 8px; border: 1px dashed #ccc;">
Im Jahr 2018 <span class="past-blue">war</span> ich in Berlin. Ich <span class="past-green">habe</span> dort eine wichtige Präsentation <span class="past-green">gehalten</span>. <br><br>
Er <span class="past-green">hat</span> ein neues Auto <span class="past-green">gekauft</span> und <span class="past-blue">ist</span> nach Deutschland <span class="past-blue">gefahren</span>. Danach <span class="past-green">habe</span> ich auch München <span class="past-green">besucht</span>. <br><br>
Jetzt sehe ich <span style="border-bottom: 2px dotted #e67e22;">mir</span> manchmal die Fotos <span style="border-bottom: 2px dotted #e67e22;">vom</span> Brandenburger Tor <span style="border-bottom: 2px dotted #e67e22;">an</span>. Das <span class="past-blue">war</span> eine wunderschöne Reise mit vielen schönen Erinnerungen!
</div>
</div>
<div id="tab2" class="tab-content">
<h3>Interaktive Flashcards (Звучни картички)</h3>
<p>Вежбајте ги клучните изрази од нашиот разговор. Кликнете на картичката за превод.</p>
<div class="flashcard-container">
<div class="flashcard" id="fcard" onclick="this.classList.toggle('flipped')">
<div class="card-inner">
<div class="card-front" id="card-front-text">Er hat ein neues Auto gekauft.</div>
<div class="card-back" id="card-back-text">Тој купи нов автомобил.</div>
</div>
</div>
</div>
<div class="card-controls">
<button class="btn" onclick="event.stopPropagation(); playCardAudio()">🔊 Слушни изговор</button>
<button class="btn" onclick="event.stopPropagation(); nextCard()">Следна картичка →</button>
</div>
</div>
<div id="tab3" class="tab-content">
<h3>Граматички преглед: Паметни правила</h3>
<h4>1. Двете големи групи глаголи во минато време (Perfekt)</h4>
<ul>
<li><strong>Силни (Неправилни) глаголи:</strong> Нивниот партицип на крајот секогаш завршува на <strong>-en</strong>.
<br><em>Примери:</em> sprechen → gesproch<strong>en</strong>, sehen → geseh<strong>en</strong>, fahren → gefahr<strong>en</strong>.
</li>
<li><strong>Слаби (Правилни) глаголи:</strong> Нивниот партицип секогаш завршува на <strong>-t</strong> (или <b>-et</b> ако основата завршува на -t).
<br><em>Примери:</em> kaufen → gekauf<strong>t</strong>, lernen → gelern<strong>t</strong>, arbeiten → gearbeite<b>t</b>.
</li>
<li><strong>Стапица со префикси (be-):</strong> Ако глаголот почнува со неодделивиот префикс <em>be-</em>, тој <strong>НЕ</strong> добива <em>ge-</em> на почетокот!
<br><em>Пример:</em> besuchen → <strong>besucht</strong> (а не <s>gebesucht</s>).
</li>
</ul>
<div style="background: #fff3cd; padding: 15px; border-left: 5px solid #ffc107; margin: 20px 0; border-radius: 4px;">
<h4>2. Што значат изразите од нашиот разговор?</h4>
<ul>
<li><strong>Jetzt sehe ich mir... an:</strong> Доаѓа од глаголот <em>ansehen</em> (разгледува). Префиксот <strong>an</strong> оди на крајот. Зборчето <strong>mir</strong> (си) означува дека разгледувате нешто „за своја душа“ ( can со задоволство).</li>
<li><strong>vom:</strong> Ова е спојка од <strong>von + dem</strong>. Се користи бидејќи <em>das Tor</em> е од среден род во еднина, кој во падежот Dativ преминува во <em>dem</em>.</li>
</ul>
</div>
</div>
<div id="tab4" class="tab-content">
<h3>Quiz: Проверете го знаењето! (20 нови прашања)</h3>
<p>Внимавајте на наставките (-en или -t) и на помошните глаголи (haben или sein).</p>
<button class="btn" id="manual-load-btn" style="background-color: #e67e22;" onclick="loadQuiz()">🔄 Кликни за вчитување на прашањата</button>
<div id="quiz-container" style="margin-top: 15px;"></div>
<button class="btn" style="margin-top: 15px;" onclick="checkQuiz()">Провери резултат</button>
<div id="quiz-result" style="margin-top:20px; font-weight:bold; font-size:1.25rem;"></div>
</div>
<div id="tab5" class="tab-content">
<h3>Schreibplatz: Was hast du letzten Sommer gemacht?</h3>
<p><strong>Прашање до ученикот:</strong> Што правеше ти минатото лето? Опиши ги твоите активности и патувања.</p>
<p><em>За да составиш барем неколку реченици во минато време, искористи ги овие корисни изрази:</em></p>
<blockquote style="background: #eef7fa; padding: 15px; border-left: 5px solid var(--secondary-color); margin: 10px 0; font-size: 0.95rem;">
<strong>Корисни изрази за помош (Perfekt & Präteritum):</strong>
<ul>
<li>Letzten Sommer <strong>war ich</strong> in... (Минатото лето бев во...)</li>
<li>Ich <strong>bin</strong> ans Meer / in die Berge <strong>geflogen / gefahren</strong>. (Патував на море / на планина.)</li>
<li>Dort <strong>habe ich</strong> jeden Tag im Meer <strong>geschwommen</strong>. (Таму пливав во морето.)</li>
<li>Ich <strong>habe</strong> viele neue Orte <strong>besucht</strong>. (Посетив многу нови места - <em>внимавајте: besucht!</em>)</li>
<li>Ich <strong>habe</strong> ein gutes Buch <strong>gelesen</strong>. (Прочитав добра книга.)</li>
<li>Es <strong>war</strong> ein wunderschöner Sommer! (Беше прекрасно лето!)</li>
</ul>
</blockquote>
<label for="user-story" style="font-weight: bold; display: block; margin-top: 20px;">Напиши го твојот летен спомен на германски јазик:</label>
<textarea id="user-story" class="writing-area" placeholder="Schreibe hier deinen Text... (на пр. Letzten Sommer war ich am Meer...)"></textarea>
<div style="margin-top: 10px;">
<button class="btn" onclick="saveStory()">💾 Зачувај го текстут</button>
<button class="btn" style="background:#e74c3c;" onclick="clearStory()">🗑️ Избриши</button>
</div>
<div id="feedback-message" class="feedback-box"></div>
</div>
</div>
<script>
// Tab System
function openTab(evt, tabName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tab-content");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tab-link");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(tabName).style.display = "block";
evt.currentTarget.className += " active";
if (tabName === 'tab4') {
loadQuiz();
}
}
// Text to Speech
function speakText(elementId) {
var text = document.getElementById(elementId).innerText;
var utterance = new SpeechSynthesisUtterance(text);
utterance.lang = 'de-DE';
utterance.rate = 0.85;
window.speechSynthesis.speak(utterance);
}
// Flashcards Data
var cards = [
{de: "Er hat ein neues Auto gekauft.", mk: "Тој купи нов автомобил."},
{de: "Ich habe München besucht.", mk: "Го посетив Минхен."},
{de: "Jetzt sehe ich mir die Fotos an.", mk: "Сега си ги разгледувам фотографиите."},
{de: "Die Fotos vom Brandenburger Tor.", mk: "Фотографиите од Бранденбуршката порта."},
{de: "Ich habe eine Präsentation gehalten.", mk: "Држав (имав) презентација."},
{de: "Wir haben viel gelernt.", mk: "Ние научивме многу."}
];
var currentCardIndex = 0;
function nextCard() {
currentCardIndex = (currentCardIndex + 1) % cards.length;
document.getElementById("fcard").classList.remove("flipped");
setTimeout(function() {
document.getElementById("card-front-text").innerText = cards[currentCardIndex].de;
document.getElementById("card-back-text").innerText = cards[currentCardIndex].mk;
}, 200);
}
function playCardAudio() {
var text = cards[currentCardIndex].de;
var utterance = new SpeechSynthesisUtterance(text);
utterance.lang = 'de-DE';
window.speechSynthesis.speak(utterance);
}
// 20 New Questions based on lessons
var quizQuestions = [
{q: "1. Er hat ein neues Haus ___. (kaufen - слаб глагол)", a: ["gekauft", "gekaufen", "kaufen"], c: 0},
{q: "2. Gestern habe ich meine Tante ___. (besuchen - стапица со префикс!)", a: ["gebesucht", "besuchen", "besucht"], c: 2},
{q: "3. We haben über das Projekt ___. (sprechen - силен глагол)", a: ["gesprecht", "gesprochen", "sprechen"], c: 1},
{q: "4. Ich ___ letzten Sommer in Berlin. (sein - Präteritum)", a: ["habe", "war", "bin"], c: 1},
{q: "5. Ich sehe ___ gerne alte Alben an. (повратна заменка за 'си')", a: ["mir", "mich", "dir"], c: 0},
{q: "6. Das ist ein Foto ___ Brandenburger Tor. (von + dem)", a: ["von den", "vom", "von"], c: 1},
{q: "7. Die Schüler haben fleißig ___. (arbeiten - завршува на -et)", a: ["gearbeitet", "gearbeiteten", "gearbeit"], c: 0},
{q: "8. При партицип на силни глаголи, наставката секогаш е:", a: ["-t", "-ed", "-en"], c: 2},
{q: "9. Глаголот 'besuchen' не добива 'ge-' на почетокот затоа што:", a: ["Има неодделив префикс be-", "Е краток глагол", "Е неправилен глагол"], c: 0},
{q: "10. Тој купи велосипед: Er ___ ein Fahrrad gekauft.", a: ["ist", "war", "hat"], c: 2},
{q: "11. 2015 ___ ich in der Schweiz. (sein)", a: ["war", "bin", "habe"], c: 0},
{q: "12. Изразот 'vom' настана од спојување на:", a: ["von + den", "von + dem", "von + das"], c: 1},
{q: "13. Кај глаголите со префикс како 'ansehen', префиксот оди на:", a: ["Почетокот", "Крајот на реченицата", "Второто место"], c: 1},
{q: "14. Кај слабите (правилни) глаголи партиципот завршува на:", a: ["-en", "-t", "-ing"], c: 1},
{q: "15. Кој помошен глагол го бара 'fahren' (патување)?", a: ["haben", "sein (bin/ist)", "werden"], c: 1},
{q: "16. Ich habe ein Foto ___. (sehen - силен глагол)", a: ["gesehen", "geseht", "sehen"], c: 0},
{q: "17. Преводот на 'Ich sehe mir Fotos an' е:", a: ["Јас сликам фотографии", "Јас си ги разгледувам фотографиите", "Јас испраќам фотографии"], c: 1},
{q: "18. Која форма е точна од глаголот lernen?", a: ["gelernen", "gelernt", "gelernet"], c: 1},
{q: "19. Er ___ nach Deutschland gefahren. (движење)", a: ["hat", "ist", "war"], c: 1},
{q: "20. Спомените на германски се викаат:", a: ["Erinnerungen", "Präsentationen", "Projekte"], c: 0}
];
function loadQuiz() {
var container = document.getElementById("quiz-container");
if (container.innerHTML !== "") return;
container.innerHTML = "";
quizQuestions.forEach(function(item, index) {
var div = document.createElement("div");
div.className = "quiz-item";
div.id = "quiz-item-" + index;
var html = "<p><strong>" + item.q + "</strong></p><div class='quiz-options'>";
item.a.forEach(function(opt, optIndex) {
html += "<label><input type='radio' name='q" + index + "' value='" + optIndex + "'> " + opt + "</label>";
});
html += "</div><div class='hint-box' id='hint-" + index + "'></div>";
div.innerHTML = html;
container.appendChild(div);
});
var manualBtn = document.getElementById("manual-load-btn");
if(manualBtn) manualBtn.style.display = "none";
}
function checkQuiz() {
if(document.getElementById("quiz-container").innerHTML === "") {
document.getElementById("quiz-result").style.color = "#e74c3c";
document.getElementById("quiz-result").innerText = "Ве молиме прво вчитајте го квизот!";
return;
}
var score = 0;
var total = quizQuestions.length;
quizQuestions.forEach(function(item, index) {
var radios = document.getElementsByName("q" + index);
var selected = -1;
for (var i = 0; i < radios.length; i++) {
if (radios[i].checked) { selected = parseInt(radios[i].value); break; }
}
var itemDiv = document.getElementById("quiz-item-" + index);
var hintDiv = document.getElementById("hint-" + index);
itemDiv.classList.remove("quiz-correct", "quiz-wrong");
hintDiv.innerHTML = "";
if (selected === item.c) {
score++;
itemDiv.classList.add("quiz-correct");
} else {
itemDiv.classList.add("quiz-wrong");
var correctWord = item.a[item.c];
hintDiv.innerHTML = "<div class='correct-answer-hint'>❌ Точен одговор: " + correctWord + "</div>";
}
});
var resultDiv = document.getElementById("quiz-result");
resultDiv.innerText = "Вашиот резултат: " + score + " од " + total + " точни одговори!";
resultDiv.style.color = (score === total) ? "#27ae60" : "#2980b9";
}
function saveStory() {
var text = document.getElementById("user-story").value;
var feedback = document.getElementById("feedback-message");
if(text.trim() === "") {
feedback.style.display = "block";
feedback.style.background = "#fadbd8";
feedback.style.borderLeftColor = "#e74c3c";
feedback.innerText = "Полето е празно. Ве молиме напишете го вашиот летен спомен!";
} else {
feedback.style.display = "block";
feedback.style.background = "#d4efdf";
feedback.style.borderLeftColor = "#27ae60";
feedback.innerHTML = "<strong>Одлично завршена задача! Вашиот текст е зачуван:</strong><br><br>" + text.replace(/\n/g, "<br>");
}
}
function clearStory() {
document.getElementById("user-story").value = "";
document.getElementById("feedback-message").style.display = "none";
}
try {
setTimeout(loadQuiz, 500);
} catch(e) {}
</script>
</body>
</html><div class="blogger-post-footer">www.bloglines.com</div>Anica Petkoskahttp://www.blogger.com/profile/12340858614356870735noreply@blogger.comtag:blogger.com,1999:blog-26523155.post-73101713997817917682026-05-20T10:43:25.531+02:002026-05-20T13:15:37.773+02:00Германски: Meine Reise nach Berlin <!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Meine Reise nach Deutschland - Deutsch lernen</title>
<style>
:root {
--primary-color: #2c3e50;
--secondary-color: #3498db;
--accent-color: #27ae60;
--bg-color: #f8f9fa;
--text-color: #333;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
color: var(--text-color);
background-color: var(--bg-color);
margin: 0;
padding: 20px;
}
.container {
max-width: 900px;
margin: 0 auto;
background: white;
padding: 30px;
border-radius: 12px;
box-shadow: 0 5px 15px rgba(0,0,0,0.08);
}
h1 {
color: var(--primary-color);
text-align: center;
border-bottom: 3px solid var(--secondary-color);
padding-bottom: 10px;
}
/* Tabs Styling */
.tabs {
display: flex;
flex-wrap: wrap;
margin: 20px 0;
border-bottom: 2px solid #ccc;
}
.tab-link {
padding: 12px 20px;
cursor: pointer;
background: #eee;
border: none;
outline: none;
font-weight: bold;
color: #555;
transition: 0.3s;
margin-right: 5px;
border-radius: 5px 5px 0 0;
}
.tab-link:hover {
background: #ddd;
}
.tab-link.active {
background: var(--secondary-color);
color: white;
}
.tab-content {
display: none;
padding: 20px 0;
}
.tab-content.active {
display: block;
}
/* Highlight styling */
.past-green { color: #27ae60; font-weight: bold; } /* Perfekt */
.past-blue { color: #2980b9; font-weight: bold; } /* Präteritum */
/* Flashcards */
.flashcard-container {
display: flex;
justify-content: center;
margin: 20px 0;
}
.flashcard {
width: 300px;
height: 150px;
perspective: 1000px;
cursor: pointer;
}
.card-inner {
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.6s;
transform-style: preserve-3d;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
border-radius: 10px;
border: 2px solid var(--secondary-color);
}
.flashcard.flipped .card-inner {
transform: rotateY(180deg);
}
.card-front, .card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
display: flex;
align-items: center;
justify-content: center;
padding: 10px;
box-sizing: border-box;
font-size: 1.2rem;
border-radius: 10px;
}
.card-front { background: white; color: var(--primary-color); }
.card-back { background: var(--secondary-color); color: white; transform: rotateY(180deg); }
.card-controls { text-align: center; margin-top: 10px; }
.btn {
background: var(--primary-color);
color: white;
padding: 8px 15px;
border: none;
border-radius: 5px;
cursor: pointer;
margin: 5px;
}
.btn:hover { background: #1a252f; }
/* Audio Button */
.audio-btn {
background: #e74c3c;
color: white;
border: none;
padding: 5px 10px;
border-radius: 4px;
cursor: pointer;
font-size: 0.9rem;
}
/* Quiz Styling */
.quiz-item {
margin-bottom: 20px;
padding: 15px;
background: #f9f9f9;
border-left: 5px solid var(--secondary-color);
border-radius: 4px;
transition: background 0.3s, border-color 0.3s;
}
.quiz-options label { display: block; margin: 5px 0; cursor: pointer; }
/* Нови класи за визуелен фидбек во квизот */
.quiz-correct {
background: #d4efdf !important;
border-left-color: #27ae60 !important;
}
.quiz-wrong {
background: #f9ebd2 !important;
border-left-color: #e74c3c !important;
}
.correct-answer-hint {
color: #c0392b;
font-weight: bold;
margin-top: 8px;
font-size: 0.95rem;
}
/* Table */
table {
width: 100%;
border-collapse: collapse;
margin-top: 15px;
margin-bottom: 25px;
}
table, th, td { border: 1px solid #ddd; }
th, td { padding: 12px; text-align: left; }
th { background-color: var(--primary-color); color: white; }
tr:nth-child(even) { background-color: #f2f2f2; }
/* Textarea Writing Area */
.writing-area {
width: 100%;
height: 150px;
padding: 12px;
border: 2px solid #ccc;
border-radius: 6px;
font-size: 1.1rem;
resize: vertical;
box-sizing: border-box;
margin-top: 10px;
font-family: inherit;
}
.writing-area:focus {
border-color: var(--secondary-color);
outline: none;
}
.feedback-box {
margin-top: 15px;
padding: 15px;
background: #eaf2f8;
border-left: 5px solid var(--secondary-color);
border-radius: 4px;
display: none;
}
</style>
</head>
<body>
<div class="container">
<h1>Meine Reise nach Berlin & München</h1>
<p style="text-align: center; font-style: italic;">Учете германски преку реални спомени и вежби.</p>
<div class="tabs">
<button class="tab-link active" onclick="openTab(event, 'tab1')">1. Lesen & Hören</button>
<button class="tab-link" onclick="openTab(event, 'tab2')">2. Grammatik</button>
<button class="tab-link" onclick="openTab(event, 'tab3')">3. Flashcards</button>
<button class="tab-link" onclick="openTab(event, 'tab4')">4. Quiz (20)</button>
<button class="tab-link" onclick="openTab(event, 'tab5')">5. Wortschatz & Schreibplatz</button>
</div>
<div id="tab1" class="tab-content active">
<h3>Lesen Sie den Text und hören Sie zu</h3>
<p><em>Кликнете на копчето за да го слушнете текстот на германски јазик (ТТS аудио).</em></p>
<button class="audio-btn" onclick="speakText('text-content')">🔊 Слушај го текстот</button>
<div id="text-content" style="margin-top: 20px; font-size: 1.15rem; background: #fffdf9; padding: 20px; border-radius: 8px; border: 1px dashed #ccc;">
2015 <span class="past-blue">war</span> ich in der Schweiz. Dort <span class="past-green">habe</span> ich jeden Tag viele neue Dinge <span class="past-green">gesehen</span>. Es <span class="past-blue">war</span> sehr schön. Ich <span class="past-green">bin</span> mit dem Auto <span class="past-green">gefahren</span>. <br><br>
2018 <span class="past-blue">war</span> ich in Berlin. Dort <span class="past-blue">hatte</span> ich ein schönes Wochenende. In Berlin <span class="past-green">habe</span> ich eine Präsentation für die internationale Lehrerkonferenz <span class="past-green">gehalten</span>. Ich <span class="past-green">habe</span> über ein anderes Projekt mit einer Schule in Utrecht in den Niederlanden <span class="past-green">gesprochen</span>. Die Schüler <span class="past-green">haben</span> an einem Forschungsprojekt <span class="past-green">gearbeitet</span>. <br><br>
Das <span class="past-blue">war</span> vor langer Zeit. Es ging um die Internetnutzung in Familien. Danach <span class="past-green">habe</span> ich auch München <span class="past-green">besucht</span>. Berlin <span class="past-blue">ist</span> eine wunderschöne Stadt. Jetzt sehe ich mir manchmal die Fotos vom Brandenburger Tor an. Ich habe diese Fotos in einem Papier-Fotoalbum. Schöne Erinnerungen!
</div>
<p><small>* <span class="past-blue">Сина боја</span> = Präteritum (минато време) | <span class="past-green">Зелена боја</span> = Perfekt (сложено минато време)</small></p>
</div>
<div id="tab2" class="tab-content">
<h3>Grammatik: Präteritum vs. Perfekt</h3>
<p>Во нашиот разговор ги извежбавме двете клучни минати времиња во германскиот јазик:</p>
<h4>1. Präteritum (Едноставно минато време)</h4>
<p>Се користи главно за глаголите <strong>sein</strong> (сум) и <strong>haben</strong> (има):</p>
<ul>
<li><strong>ich war</strong> (јас бев) → <em>Ich war in Berlin.</em></li>
<li><strong>es war</strong> (беше) → <em>Es war sehr schön.</em></li>
<li><strong>ich hatte</strong> (јас имав) → <em>Ich hatte eine Präsentation.</em></li>
</ul>
<h4>2. Perfekt (Сложено минато време)</h4>
<p>Се користи за најголемиот број глаголи во секојдневниот говор. Се гради со помошен глагол (<em>haben</em> или <em>sein</em>) + глаголот во партицип (на крајот од реченицата).</p>
<ul>
<li><strong>Со Haben (за дејства):</strong>
<br><em>Ich <strong>habe</strong> besucht.</em> (посетив)
<br><em>Ich <strong>habe</strong> gesprochen.</em> (зборував)
<br><em>Die Schüler <strong>haben</strong> gearbeitet.</em> (работеа)
</li>
<li><strong>Со Sein (за движење од А до Б):</strong>
<br><em>Ich <strong>bin</strong> mit dem Auto gefahren.</em> (патував)
<br><em>Ich <strong>bin</strong> spazieren gegangen.</em> (шетав)
</li>
</ul>
</div>
<div id="tab3" class="tab-content">
<h3>Interaktive Flashcards (Звучни картички)</h3>
<p>Кликнете на картичката за да го видите преводот, и на копчето со звучник за изговор.</p>
<div class="flashcard-container">
<div class="flashcard" id="fcard" onclick="this.classList.toggle('flipped')">
<div class="card-inner">
<div class="card-front" id="card-front-text">Ich war in Berlin.</div>
<div class="card-back" id="card-back-text">Јас бев во Берлин.</div>
</div>
</div>
</div>
<div class="card-controls">
<button class="btn" onclick="event.stopPropagation(); playCardAudio()">🔊 Слушни изговор</button>
<button class="btn" onclick="event.stopPropagation(); nextCard()">Следна картичка →</button>
</div>
</div>
<div id="tab4" class="tab-content">
<h3>Quiz: Testen Sie Ihr Wissen! (20 прашања)</h3>
<p>Изберете го точниот одговор за да ги проверите формите за минато време.</p>
<button class="btn" id="manual-load-btn" style="background-color: #e67e22;" onclick="loadQuiz()">🔄 Кликни за вчитување на прашањата</button>
<div id="quiz-container" style="margin-top: 15px;"></div>
<button class="btn" style="margin-top: 15px;" onclick="checkQuiz()">Провери резултат</button>
<div id="quiz-result" style="margin-top:20px; font-weight:bold; font-size:1.25rem;"></div>
</div>
<div id="tab5" class="tab-content">
<h3>Wortschatz (Листа на зборови со родови)</h3>
<p>Именките се дадени со нивниот род во заграда <strong>(e. = die, s. = das, r. = der)</strong>.</p>
<table>
<tr>
<th>Германски збор</th>
<th>Род / Граматика</th>
<th>Македонски превод</th>
</tr>
<tr><td>Präsentation</td><td>(e. - женски род)</td><td>Презентација</td></tr>
<tr><td>Lehrerkonferenz</td><td>(e. - женски род)</td><td>Конференција за наставници</td></tr>
<tr><td>Projekt</td><td>(s. - среден род)</td><td>Проект</td></tr>
<tr><td>Forschungsprojekt</td><td>(s. - среден род)</td><td>Истражувачки проект</td></tr>
<tr><td>Schule</td><td>(e. - женски род)</td><td>Училиште</td></tr>
<tr><td>Schüler</td><td>(r. - машки род, множина)</td><td>Ученици</td></tr>
<tr><td>Familie</td><td>(e. - женски род)</td><td>Семејство</td></tr>
<tr><td>Tor</td><td>(s. - среден род)</td><td>Порта (на пр. Brandenburger Tor)</td></tr>
<tr><td>Fotoalbum</td><td>(s. - среден род)</td><td>Фотоалбум</td></tr>
<tr><td>Erinnerung</td><td>(e. - женски род)</td><td>Спомен / Сеќавање</td></tr>
</table>
<hr style="margin: 30px 0; border: 1px solid #ccc;">
<h3>Schreibplatz: Wann und wohin bist du gereist?</h3>
<p><strong>Прашање за тебе:</strong> Кога и каде си патувал/а во минатото? Опиши го твоето патување.</p>
<p><em>Употреби ги овие корисни фрази за да го составиш твојот текст во полето подолу:</em></p>
<blockquote style="background: #eef7fa; padding: 15px; border-left: 5px solid var(--secondary-color); margin: 10px 0; font-size: 0.95rem;">
<ul>
<li><strong>Im Jahr... war ich in...</strong> (Во годината... бев во...)</li>
<li><strong>Ich bin mit dem Auto / Flugzeug / Zug gereist.</strong> (Патував со автомобил / авион / воз.)</li>
<li><strong>Dort habe ich viele Sehenswürdigkeiten gesehen.</strong> (Таму видов многу знаменитости.)</li>
<li><strong>Es war ein tolles Erlebnis!</strong> (Беше прекрасно доживување!)</li>
<li><strong>Ich habe schöne Erinnerungen an diese Reise.</strong> (Имам убави спомени од ова патување.)</li>
</ul>
</blockquote>
<label for="user-story" style="font-weight: bold; display: block; margin-top: 20px;">Напиши го твојот текст на германски јазик:</label>
<textarea id="user-story" class="writing-area" placeholder="Schreibe hier deinen Text... (на пр. Im Jahr 2019 war ich in...)"></textarea>
<div style="margin-top: 10px;">
<button class="btn" onclick="saveStory()">💾 Зачувај го текстот</button>
<button class="btn" style="background:#e74c3c;" onclick="clearStory()">🗑️ Избриши</button>
</div>
<div id="feedback-message" class="feedback-box"></div>
</div>
</div>
<script>
// Tab System
function openTab(evt, tabName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tab-content");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tab-link");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(tabName).style.display = "block";
evt.currentTarget.className += " active";
if (tabName === 'tab4') {
loadQuiz();
}
}
// Text to Speech Function
function speakText(elementId) {
var text = document.getElementById(elementId).innerText;
text = text.split("*")[0];
var utterance = new SpeechSynthesisUtterance(text);
utterance.lang = 'de-DE';
utterance.rate = 0.9;
window.speechSynthesis.speak(utterance);
}
// Flashcards Data
var cards = [
{de: "Ich war in Berlin.", mk: "Јас бев во Берлин."},
{de: "Es war sehr schön.", mk: "Беше многу убаво."},
{de: "Ich hatte eine Präsentation.", mk: "Имав презентација."},
{de: "Ich bin gefahren.", mk: "Патував / Се возев."},
{de: "Ich habe besucht.", mk: "Посетив."},
{de: "Wir haben gearbeitet.", mk: "Ние работевме."},
{de: "Ich habe gesprochen.", mk: "Зборував."},
{de: "Schöne Erinnerungen!", mk: "Убави спомени!"}
];
var currentCardIndex = 0;
function nextCard() {
currentCardIndex = (currentCardIndex + 1) % cards.length;
document.getElementById("fcard").classList.remove("flipped");
setTimeout(function() {
document.getElementById("card-front-text").innerText = cards[currentCardIndex].de;
document.getElementById("card-back-text").innerText = cards[currentCardIndex].mk;
}, 200);
}
function playCardAudio() {
var text = cards[currentCardIndex].de;
var utterance = new SpeechSynthesisUtterance(text);
utterance.lang = 'de-DE';
window.speechSynthesis.speak(utterance);
}
// Quiz Data (20 Questions)
var quizQuestions = [
{q: "1. 2015 ___ ich in der Schweiz. (sein)", a: ["war", "habe", "bin"], c: 0},
{q: "2. Es ___ sehr schön dort. (sein)", a: ["hatte", "war", "ist"], c: 1},
{q: "3. Ich ___ mit dem Auto gefahren. (sein / haben)", a: ["habe", "bin", "war"], c: 1},
{q: "4. Dort habe ich viele Dinge ___. (sehen)", a: ["gesehen", "sehe", "geseht"], c: 0},
{q: "5. 2018 ___ ich in Berlin. (sein)", a: ["bin", "war", "habe"], c: 1},
{q: "6. Dort ___ ich ein schönes Wochenende. (haben)", a: ["war", "hatte", "habe"], c: 1},
{q: "7. Ich ___ eine Präsentation gehalten. (haben)", a: ["bin", "habe", "hatte"], c: 1},
{q: "8. Ich habe über ein anderes Projekt ___. (sprechen)", a: ["gesprochen", "gesprecht", "sprechen"], c: 0},
{q: "9. Die Schüler ___ an einem Projekt gearbeitet. (haben)", a: ["haben", "sind", "waren"], c: 0},
{q: "10. Das ___ vor langer Zeit. (sein)", a: ["ist", "war", "hatte"], c: 1},
{q: "11. Danach habe ich auch München ___. (besuchen)", a: ["besucht", "besuchen", "gebesucht"], c: 0},
{q: "12. Ich ___ spazieren gegangen. (sein)", a: ["habe", "war", "bin"], c: 2},
{q: "13. Ich ___ es vergessen. (haben)", a: ["habe", "bin", "hatte"], c: 0},
{q: "14. Gestern ___ wir viel gelernt. (haben)", a: ["haben", "sind", "hatten"], c: 0},
{q: "15. Wo ___ du gestern? (sein)", a: ["warst", "hast", "bist"], c: 0},
{q: "16. Er ___ ein neues Auto gekauft. (haben)", a: ["ist", "hat", "war"], c: 1},
{q: "17. Wir ___ nach Deutschland geflogen. (sein)", a: ["haben", "sind", "waren"], c: 1},
{q: "18. Meine Großmutter ___ Lehrerin. (sein)", a: ["war", "hatte", "ist"], c: 0},
{q: "19. ___ du die Fotos gesehen? (haben)", a: ["Hast", "Bist", "Warst"], c: 0},
{q: "20. Berlin ___ eine wunderschöne Stadt. (sein - Präsens)", a: ["war", "ist", "hat"], c: 1}
];
function loadQuiz() {
var container = document.getElementById("quiz-container");
if (container.innerHTML !== "") return;
container.innerHTML = "";
quizQuestions.forEach(function(item, index) {
var div = document.createElement("div");
div.className = "quiz-item";
div.id = "quiz-item-" + index; // Идентификатор за боење
var html = "<p><strong>" + item.q + "</strong></p><div class='quiz-options'>";
item.a.forEach(function(opt, optIndex) {
html += "<label><input type='radio' name='q" + index + "' value='" + optIndex + "'> " + opt + "</label>";
});
html += "</div><div class='hint-box' id='hint-" + index + "'></div>";
div.innerHTML = html;
container.appendChild(div);
});
var manualBtn = document.getElementById("manual-load-btn");
if(manualBtn) manualBtn.style.display = "none";
}
function checkQuiz() {
if(document.getElementById("quiz-container").innerHTML === "") {
document.getElementById("quiz-result").style.color = "#e74c3c";
document.getElementById("quiz-result").innerText = "Ве молиме прво вчитајте го квизот со портокаловото копче!";
return;
}
var score = 0;
var total = quizQuestions.length;
quizQuestions.forEach(function(item, index) {
var radios = document.getElementsByName("q" + index);
var selected = -1;
for (var i = 0; i < radios.length; i++) {
if (radios[i].checked) { selected = parseInt(radios[i].value); break; }
}
var itemDiv = document.getElementById("quiz-item-" + index);
var hintDiv = document.getElementById("hint-" + index);
// Чистење на претходни класи
itemDiv.classList.remove("quiz-correct", "quiz-wrong");
hintDiv.innerHTML = "";
if (selected === item.c) {
score++;
itemDiv.classList.add("quiz-correct");
} else {
itemDiv.classList.add("quiz-wrong");
var correctWord = item.a[item.c];
hintDiv.innerHTML = "<div class='correct-answer-hint'>❌ Точен одговор: " + correctWord + "</div>";
}
});
var resultText = "Вашиот резултат: " + score + " од " + total + " точни одговори!";
var resultDiv = document.getElementById("quiz-result");
resultDiv.innerText = resultText;
if(score === total) {
resultDiv.style.color = "#27ae60";
} else {
resultDiv.style.color = "#2980b9";
}
}
// Функции за петтото јазиче
function saveStory() {
var text = document.getElementById("user-story").value;
var feedback = document.getElementById("feedback-message");
if(text.trim() === "") {
feedback.style.display = "block";
feedback.style.background = "#fadbd8";
feedback.style.borderLeftColor = "#e74c3c";
feedback.innerText = "Полето е празно. Ве молиме напишете нешто пред да зачувате!";
} else {
feedback.style.display = "block";
feedback.style.background = "#d4efdf";
feedback.style.borderLeftColor = "#27ae60";
feedback.innerHTML = "<strong>Браво! Текстот е успешно зачуван:</strong><br><br>" + text.replace(/\n/g, "<br>");
}
}
function clearStory() {
document.getElementById("user-story").value = "";
document.getElementById("feedback-message").style.display = "none";
}
try {
setTimeout(loadQuiz, 500);
} catch(e) {}
</script>
</body>
</html><div class="blogger-post-footer">www.bloglines.com</div>Anica Petkoskahttp://www.blogger.com/profile/12340858614356870735noreply@blogger.comtag:blogger.com,1999:blog-26523155.post-59727462847854713292026-05-19T19:18:18.919+02:002026-05-27T13:35:18.138+02:00Номинатив и Акузатив - Супер Тренер за Виктор<!DOCTYPE html>
<html lang="mk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Номинатив и Акузатив - Супер Тренер за Виктор</title>
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Fredoka+One&family=Quicksand:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Quicksand', sans-serif;
background-color: #f0fdf4; /* Свежа зелена нијанса */
}
.fun-title {
font-family: 'Fredoka One', cursive;
}
.tab-btn {
transition: all 0.2s ease;
}
</style>
</head>
<body class="text-gray-800 pb-12">
<!-- Хедер за Виктор -->
<header class="bg-gradient-to-r from-emerald-600 via-teal-500 to-blue-500 text-white shadow-xl py-6 px-4 text-center rounded-b-3xl mb-8 relative overflow-hidden">
<div class="absolute top-0 left-0 w-full h-full opacity-10 bg-[radial-gradient(#fff_1px,transparent_1px)] [background-size:16px_16px]"></div>
<div class="max-w-4xl mx-auto relative z-10">
<span class="bg-yellow-400 text-emerald-900 font-bold px-3 py-1 rounded-full text-xs uppercase tracking-widest animate-pulse">Ниво 2: Совладај ги падежите! 🎮</span>
<h1 class="fun-title text-3xl md:text-5xl mt-2 tracking-wide text-shadow-md">Номинатив vs Акузатив</h1>
<p class="text-sm md:text-lg mt-2 font-medium text-emerald-100">Тајниот водич и интерактивни вежби за Виктор (6то одделение)</p>
<div class="flex justify-center gap-4 mt-4 text-xs md:text-sm">
<span class="bg-white/20 px-3 py-1 rounded-full">🙋♂️ Wer? / Was? (Номинатив)</span>
<span class="bg-white/20 px-3 py-1 rounded-full">🎯 Wen? / Was? (Акузатив)</span>
<span class="bg-white/20 px-3 py-1 rounded-full">✨ Само машкиот се менува!</span>
</div>
</div>
</header>
<main class="max-w-4xl mx-auto px-4">
<!-- Навигација со Јазичиња -->
<div class="flex justify-center gap-2 mb-8 bg-white p-2 rounded-2xl shadow-md border border-gray-100">
<button onclick="switchTab('theory')" id="btn-theory" class="tab-btn bg-emerald-600 text-white font-bold px-4 py-2.5 rounded-xl flex items-center gap-2 text-sm md:text-base">
🏫 1. Научи го Правилото
</button>
<button onclick="switchTab('practice')" id="btn-practice" class="tab-btn bg-gray-100 hover:bg-gray-200 text-gray-700 font-semibold px-4 py-2.5 rounded-xl flex items-center gap-2 text-sm md:text-base">
🎮 2. Пополни ја празнината
</button>
<button onclick="switchTab('quiz')" id="btn-quiz" class="tab-btn bg-gray-100 hover:bg-gray-200 text-gray-700 font-semibold px-4 py-2.5 rounded-xl flex items-center gap-2 text-sm md:text-base">
🏆 3. Брз Квиз за 10-ка
</button>
</div>
<!-- ТАБ 1: ТЕОРИЈА И ОБЈАСНУВАЊЕ -->
<div id="tab-theory" class="tab-content block">
<div class="bg-white rounded-3xl p-6 shadow-xl border border-gray-100 space-y-8">
<!-- Вовед -->
<div class="border-b border-gray-100 pb-4">
<h2 class="fun-title text-2xl text-emerald-700 flex items-center gap-2">
🌟 Како да ги победиш падежите на тестот?
</h2>
<p class="text-sm text-gray-500 mt-1">Виктор, замисли ги како две нивоа во игра. Прочитај го ова супер едноставно правило:</p>
</div>
<!-- Две Нивоа -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<!-- Номинатив -->
<div class="bg-blue-50 p-5 rounded-2xl border border-blue-100">
<span class="text-xs bg-blue-200 text-blue-800 font-bold px-2.5 py-1 rounded-full">НИВО 1</span>
<h3 class="font-bold text-lg text-blue-900 mt-2">🙋♂️ Номинатив (Nominativ)</h3>
<p class="text-xs text-gray-500 mt-1">Кога некој или нешто **ја врши акцијата** (главен лик).</p>
<p class="text-sm font-semibold text-blue-800 mt-3">Прашање: <span class="bg-blue-100 px-1.5 py-0.5 rounded">Wer? (Кој?)</span> или <span class="bg-blue-100 px-1.5 py-0.5 rounded">Was? (Што?)</span></p>
<div class="bg-white p-3 rounded-xl mt-4 border border-blue-100 text-xs">
<span class="font-bold text-blue-700">Пример:</span>
<p class="italic text-gray-700 mt-1">"**Der Vater** spielt Fortnite." (Кој игра? Таткото)</p>
</div>
</div>
<!-- Акузатив -->
<div class="bg-pink-50 p-5 rounded-2xl border border-pink-100">
<span class="text-xs bg-pink-200 text-pink-800 font-bold px-2.5 py-1 rounded-full">НИВО 2</span>
<h3 class="font-bold text-lg text-pink-900 mt-2">🎯 Акузатив (Akkusativ)</h3>
<p class="text-xs text-gray-500 mt-1">Кога нешто е **предмет** врз кој се врши акцијата.</p>
<p class="text-sm font-semibold text-pink-800 mt-3">Прашање: <span class="bg-pink-100 px-1.5 py-0.5 rounded">Wen? (Кого?)</span> или <span class="bg-pink-100 px-1.5 py-0.5 rounded">Was? (Што?)</span></p>
<div class="bg-white p-3 rounded-xl mt-4 border border-pink-100 text-xs">
<span class="font-bold text-pink-700">Пример:</span>
<p class="italic text-gray-700 mt-1">"Ich suche **den Ball**." (Што барам? Топката)</p>
</div>
</div>
</div>
<!-- Златното Правило со голем фокус -->
<div class="bg-gradient-to-r from-yellow-500/10 to-amber-500/10 p-6 rounded-2xl border-2 border-yellow-400 text-center relative overflow-hidden">
<span class="absolute top-2 right-2 text-3xl">🔑</span>
<h3 class="font-bold text-lg text-amber-800 flex items-center justify-center gap-1.5">
Златното Правило на Германскиот Јазик
</h3>
<p class="text-sm text-amber-950 mt-2 max-w-2xl mx-auto">
Само машкиот род (**der / ein / kein**) се менува во Акузатив и добива наставка <strong class="bg-yellow-300 px-1 rounded">-en</strong>! Женскиот, средниот род и множината остануваат **потполно исти**!
</p>
<div class="grid grid-cols-3 gap-2 mt-4 max-w-md mx-auto text-xs md:text-sm">
<div class="bg-white p-2.5 rounded-lg font-bold shadow-sm">der ➡️ <span class="text-red-600">den</span></div>
<div class="bg-white p-2.5 rounded-lg font-bold shadow-sm">ein ➡️ <span class="text-red-600">einen</span></div>
<div class="bg-white p-2.5 rounded-lg font-bold shadow-sm">kein ➡️ <span class="text-red-600">keinen</span></div>
</div>
</div>
<!-- Магичната Табела -->
<div>
<h3 class="font-bold text-base text-gray-800 mb-3 flex items-center gap-1.5">📊 Прегледна Мапа за Родовите</h3>
<div class="overflow-x-auto">
<table class="w-full text-left text-xs md:text-sm bg-white border border-gray-100 rounded-xl overflow-hidden shadow-sm">
<thead class="bg-emerald-50 text-emerald-900">
<tr>
<th class="p-3">Род (Германски)</th>
<th class="p-3">Номинатив (Кој?)</th>
<th class="p-3 text-red-600">Акузатив (Што?)</th>
<th class="p-3">Што се случува?</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-50">
<tr>
<td class="p-3 font-bold">🙋♂️ Машки (der)</td>
<td class="p-3 bg-blue-50/50">**der** / **ein** / **kein** Hund</td>
<td class="p-3 bg-red-50/30 font-bold text-red-700">**den** / **einen** / **keinen** Hund</td>
<td class="p-3"><span class="bg-red-100 text-red-800 text-xs px-2 py-0.5 rounded-full font-bold">Се менува во -en!</span></td>
</tr>
<tr>
<td class="p-3 font-bold">👩 Женски (die)</td>
<td class="p-3 bg-blue-50/50">**die** / **eine** / **keine** Katze</td>
<td class="p-3 bg-red-50/30">**die** / **eine** / **keine** Katze</td>
<td class="p-3 text-gray-400 italic">Останува исто</td>
</tr>
<tr>
<td class="p-3 font-bold">👶 Среден (das)</td>
<td class="p-3 bg-blue-50/50">**das** / **ein** / **kein** Buch</td>
<td class="p-3 bg-red-50/30">**das** / **ein** / **kein** Buch</td>
<td class="p-3 text-gray-400 italic">Останува исто</td>
</tr>
<tr>
<td class="p-3 font-bold">👥 Множина (die)</td>
<td class="p-3 bg-blue-50/50">**die** / — / **keine** Hobbys</td>
<td class="p-3 bg-red-50/30">**die** / — / **keine** Hobbys</td>
<td class="p-3 text-gray-400 italic">Останува исто</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- Најдобри другари на Акузативот -->
<div class="bg-emerald-50/50 p-5 rounded-2xl border border-emerald-100">
<h3 class="font-bold text-sm text-emerald-800 uppercase tracking-widest">💖 Глаголи кои СЕКОГАШ бараат Акузатив</h3>
<p class="text-xs text-emerald-950 mt-1">Овие глаголи се најдобри пријатели со Акузативот. Штом ги видиш, машкиот род веднаш мора да го промениш:</p>
<div class="grid grid-cols-2 md:grid-cols-3 gap-3 mt-4 text-xs">
<div class="bg-white p-3 rounded-xl shadow-xs">
<span class="font-bold text-emerald-700 block text-sm">haben (има)</span>
<span class="text-gray-500">Ich habe **einen** Hund.</span>
</div>
<div class="bg-white p-3 rounded-xl shadow-xs">
<span class="font-bold text-emerald-700 block text-sm">brauchen (треба)</span>
<span class="text-gray-500">Ich brauche **den** Ball.</span>
</div>
<div class="bg-white p-3 rounded-xl shadow-xs">
<span class="font-bold text-emerald-700 block text-sm">suchen (бара)</span>
<span class="text-gray-500">Ich suche **einen** Kuli.</span>
</div>
<div class="bg-white p-3 rounded-xl shadow-xs">
<span class="font-bold text-emerald-700 block text-sm">finden (наоѓа)</span>
<span class="text-gray-500">Ich finde **den** Lehrer nett.</span>
</div>
<div class="bg-white p-3 rounded-xl shadow-xs">
<span class="font-bold text-emerald-700 block text-sm">spielen (игра)</span>
<span class="text-gray-500">Ich spiele **einen** Charakter.</span>
</div>
<div class="bg-white p-3 rounded-xl shadow-xs">
<span class="font-bold text-emerald-700 block text-sm">möchten (сака)</span>
<span class="text-gray-500">Ich möchte **einen** Saft.</span>
</div>
</div>
</div>
</div>
</div>
<!-- ТАБ 2: ИГРА „ПОПОЛНИ ЈА ПРАЗНИНАТА“ -->
<div id="tab-practice" class="tab-content hidden">
<div class="bg-white rounded-3xl p-6 shadow-xl border border-gray-100">
<div class="border-b border-gray-100 pb-4 mb-6">
<h2 class="fun-title text-2xl text-blue-600 flex items-center gap-2">
🎮 Вежбај: Кликни го точниот член
</h2>
<p class="text-sm text-gray-500 mt-1">Виктор, прочитај ја реченицата и кликни го точниот член во заградата за да ја пополниш реченицата.</p>
</div>
<!-- Контејнер за играта -->
<div class="bg-blue-50/50 p-6 rounded-2xl border border-blue-100 max-w-2xl mx-auto">
<div class="flex justify-between items-center mb-4">
<span class="text-sm font-bold text-blue-800" id="practice-progress">Вежба 1 од 8</span>
<span class="text-xs bg-blue-100 text-blue-800 px-3 py-1 rounded-full font-bold" id="practice-score">Поени: 0/8</span>
</div>
<!-- Реченица -->
<div class="bg-white p-6 rounded-2xl shadow-sm border border-blue-100 text-center mb-6">
<p class="text-xl font-bold text-gray-800 tracking-wide" id="practice-sentence-text">
Ich habe <span class="border-b-4 border-dashed border-blue-400 px-4 text-blue-600">_____</span> Computer.
</p>
<span class="text-xs text-gray-400 mt-2 block italic" id="practice-hint">Забелешка: der Computer (машки род, го имаме глаголот haben)</span>
</div>
<!-- Опции за избор -->
<div class="grid grid-cols-2 gap-4" id="practice-options">
<!-- Копчиња за избор на членот -->
</div>
<!-- Фидбек порака -->
<div id="practice-feedback" class="mt-4 p-4 rounded-xl text-center font-bold hidden"></div>
<!-- Копче за следно прашање -->
<div class="mt-6 flex justify-end">
<button onclick="nextPractice()" id="btn-next-practice" class="bg-blue-600 hover:bg-blue-700 text-white font-bold px-6 py-2.5 rounded-xl text-sm hidden">
Следна реченица ➡️
</button>
</div>
</div>
</div>
</div>
<!-- ТАБ 3: КВИЗ „НОМИНАТИВ ИЛИ АКУЗАТИВ?“ -->
<div id="tab-quiz" class="tab-content hidden">
<div class="bg-white rounded-3xl p-6 shadow-xl border border-gray-100">
<div class="border-b border-gray-100 pb-4 mb-6 flex justify-between items-center">
<div>
<h2 class="fun-title text-2xl text-emerald-600 flex items-center gap-2">
🏆 Предизвик: Номинатив или Акузатив? (10 прашања)
</h2>
<p class="text-sm text-gray-500 mt-1">Препознај во кој падеж е означениот збор во реченицата.</p>
</div>
<span class="bg-emerald-100 text-emerald-800 font-bold px-3 py-1 rounded-full text-sm" id="quiz-score-display">Поени: 0/10</span>
</div>
<!-- Контејнер за квизот -->
<div id="quiz-game-container" class="max-w-2xl mx-auto bg-emerald-50/40 p-6 rounded-2xl border border-emerald-100">
<div class="mb-4">
<div class="w-full bg-gray-200 h-2 rounded-full overflow-hidden">
<div id="quiz-progress-bar" class="bg-emerald-500 h-full" style="width: 10%"></div>
</div>
<span class="text-xs text-gray-500 mt-1 block font-bold" id="quiz-question-number">Прашање 1 од 10</span>
</div>
<h3 class="text-lg font-bold text-gray-800 mb-4 text-center" id="quiz-question-text">Прашањето се вчитува...</h3>
<div class="grid grid-cols-2 gap-4" id="quiz-options-container">
<!-- Номинатив или Акузатив копчиња -->
</div>
<div id="quiz-feedback" class="mt-4 p-4 rounded-xl text-sm hidden font-medium"></div>
<div class="mt-6 flex justify-end">
<button onclick="nextQuestion()" id="btn-next-question" class="bg-emerald-600 hover:bg-emerald-700 text-white font-bold px-6 py-2.5 rounded-xl text-sm hidden">
Следно прашање ➡️
</button>
</div>
</div>
<!-- Квиз Резултат -->
<div id="quiz-result-container" class="max-w-md mx-auto text-center hidden p-8 bg-gradient-to-br from-purple-100 to-indigo-100 rounded-3xl border border-purple-200">
<span class="text-5xl" id="quiz-result-emoji">🏆</span>
<h3 class="fun-title text-2xl text-purple-900 mt-4">Супер завршено!</h3>
<p class="text-gray-700 mt-2 font-medium" id="quiz-result-text">Твојот резултат е 0 од 10 точни одговори.</p>
<div class="mt-6">
<button onclick="restartQuiz()" class="bg-purple-600 hover:bg-purple-700 text-white font-bold px-6 py-3 rounded-xl text-sm">
🔄 Обиди се повторно
</button>
</div>
</div>
</div>
</div>
</main>
<!-- Попуп Модал за честитки/грешки -->
<div id="custom-modal" class="fixed inset-0 bg-black/50 z-50 flex items-center justify-center hidden px-4">
<div class="bg-white p-6 rounded-3xl max-w-sm w-full text-center shadow-2xl border border-gray-100 animate-[bounce_0.5s_ease-out]">
<span class="text-5xl" id="modal-icon">🎉</span>
<h4 class="fun-title text-xl text-gray-800 mt-4" id="modal-title">Одлично!</h4>
<p class="text-gray-600 mt-2 text-sm" id="modal-message">Точен одговор.</p>
<button onclick="closeCustomModal()" class="mt-5 w-full bg-emerald-600 hover:bg-emerald-700 text-white font-bold py-2.5 rounded-xl text-sm">
Продолжи понатаму
</button>
</div>
</div>
<!-- Логика -->
<script>
// 1. Податоци за играта со Пополнување празнини
const practiceData = [
{
baseSentence: "Ich habe {slot} Computer.",
options: ["ein", "einen"],
correct: "einen",
hint: "der Computer (машки род). Го имаме глаголот 'haben' кој бара Акузатив, затоа ein станува einen!",
translated: "Јас имам компјутер."
},
{
baseSentence: "Das ist {slot} Katze.",
options: ["eine", "einen"],
correct: "eine",
hint: "die Katze (женски род). Реченицата само кажува што е тоа (Номинатив), па членот е 'eine'.",
translated: "Тоа е мачка."
},
{
baseSentence: "Er braucht {slot} Buch.",
options: ["ein", "einen"],
correct: "ein",
hint: "das Buch (среден род). Иако 'brauchen' бара Акузатив, средниот род ОСТАНУВА ИСТ (ein)!",
translated: "Му треба книга."
},
{
baseSentence: "Wir suchen {slot} Hund.",
options: ["ein", "einen"],
correct: "einen",
hint: "der Hund (машки род). Бараме нешто со 'suchen' (Акузатив) - машкиот род се менува во einen!",
translated: "Бараме куче."
},
{
baseSentence: "Ich finde {slot} Lehrer nett.",
options: ["der", "den"],
correct: "den",
hint: "der Lehrer (машки род). Глаголот 'finden' бара Акузатив, па 'der' станува 'den'.",
translated: "Го сметам наставникот за фин."
},
{
baseSentence: "Das ist {slot} Hund.",
options: ["ein", "einen"],
correct: "ein",
hint: "Овде само опишуваме 'Кој е тоа?' (Номинатив). Нема активен глагол за Акузатив, затоа е 'ein'.",
translated: "Тоа е куче."
},
{
baseSentence: "Ich möchte {slot} Saft.",
options: ["ein", "einen"],
correct: "einen",
hint: "der Saft (машки род). Сакам да пијам нешто со 'möchten' (Акузатив) - ein станува einen!",
translated: "Би сакал сок."
},
{
baseSentence: "Ich lese {slot} Buch.",
options: ["ein", "einen"],
correct: "ein",
hint: "das Buch (среден род). Средниот род никогаш не се менува во Акузатив, останува 'ein'.",
translated: "Читам книга."
}
];
// 2. Податоци за Квизот „Номинатив или Акузатив?“
const quizData = [
{
sentence: "Ich habe einen **Hund**.",
question: "Во кој падеж е означениот збор 'Hund'?",
options: ["Номинатив", "Акузатив"],
correct: 1,
explain: "Акузатив! Бидејќи имаме 'haben' (има) и членот пред него е 'einen' (машки род во Акузатив)."
},
{
sentence: "Der **Vater** spielt Fortnite.",
question: "Во кој падеж е означениот збор 'Vater'?",
options: ["Номинатив", "Акузатив"],
correct: 0,
explain: "Номинатив! Таткото е главниот лик во реченицата кој ја врши акцијата (Кој игра?)"
},
{
sentence: "Ich brauche den **Ball**.",
question: "Во кој падеж е означениот збор 'Ball'?",
options: ["Номинатив", "Акузатив"],
correct: 1,
explain: "Акузатив! Глаголот 'brauchen' (треба) бара Акузатив. (der Ball станува den Ball)."
},
{
sentence: "Das ist ein **Buch**.",
question: "Во кој падеж е означениот збор 'Buch'?",
options: ["Номинатив", "Акузатив"],
correct: 0,
explain: "Номинатив! Ова е едноставна реченица со 'ist' (е) каде што само именуваме предмет."
},
{
sentence: "Ich suche einen **Kuli**.",
question: "Во кој падеж е означениот збор 'Kuli'?",
options: ["Номинатив", "Акузатив"],
correct: 1,
explain: "Акузатив! Глаголот 'suchen' (бара) предизвикува Акузатив, па машкиот род 'Kuli' добива 'einen'."
},
{
sentence: "Ein **Freund** kommt mit.",
question: "Во кој падеж е означениот збор 'Freund'?",
options: ["Номинатив", "Акузатив"],
correct: 0,
explain: "Номинатив! Пријателот доаѓа, тој е тој што ја врши акцијата (Кој доаѓа?)."
},
{
sentence: "Ich finde den **Lehrer** nett.",
question: "Во кој падеж е означениот збор 'Lehrer'?",
options: ["Номинатив", "Акузатив"],
correct: 1,
explain: "Акузатив! Наоѓам/сметам некого со 'finden' (Акузатив), па членот се менува во 'den'."
},
{
sentence: "Das ist eine **Katze**.",
question: "Во кој падеж е означениот збор 'Katze'?",
options: ["Номинатив", "Акузатив"],
correct: 0,
explain: "Номинатив! Само кажуваме што е тоа, нема акција врз мачката."
},
{
sentence: "Ich möchte einen **Saft**.",
question: "Во кој падеж е означениот збор 'Saft'?",
options: ["Номинатив", "Акузатив"],
correct: 1,
explain: "Акузатив! Со 'möchten' изразуваме желба за сок (Акузатив, der Saft станува einen Saft)."
},
{
sentence: "Ich habe **keine** Hobbys.",
question: "Во кој падеж е означениот збор 'keine'?",
options: ["Номинатив", "Акузатив"],
correct: 1,
explain: "Акузатив! Иако е во Акузатив, формата останува 'keine' бидејќи е во множина (множината не се менува!)."
}
];
// Состојба на апликацијата (State)
let practiceIndex = 0;
let practiceScore = 0;
let practiceAnswered = false;
let quizIndex = 0;
let quizScore = 0;
let quizAnswered = false;
// Почеток
setTimeout(() => {
initPractice();
initQuiz();
}, 50);
// Навигација
function switchTab(tabId) {
const tabs = document.getElementsByClassName('tab-content');
for (let i = 0; i < tabs.length; i++) {
tabs[i].style.display = 'none';
}
const activeTab = document.getElementById('tab-' + tabId);
if (activeTab) {
activeTab.style.display = 'block';
}
const buttons = document.getElementsByClassName('tab-btn');
for (let i = 0; i < buttons.length; i++) {
buttons[i].className = "tab-btn bg-gray-100 hover:bg-gray-200 text-gray-700 font-semibold px-4 py-2.5 rounded-xl flex items-center gap-2 text-sm md:text-base";
}
const targetBtn = document.getElementById('btn-' + tabId);
if (targetBtn) {
targetBtn.className = "tab-btn bg-emerald-600 text-white font-bold px-4 py-2.5 rounded-xl flex items-center gap-2 text-sm md:text-base";
}
}
// --- ЛОГИКА ЗА ВЕЖБАТА ---
function initPractice() {
practiceAnswered = false;
const current = practiceData[practiceIndex];
if(!current) return;
document.getElementById('practice-progress').innerText = `Реченица ${practiceIndex + 1} од 8`;
document.getElementById('practice-score').innerText = `Поени: ${practiceScore}/8`;
const feedback = document.getElementById('practice-feedback');
if(feedback) feedback.classList.add('hidden');
const nextBtn = document.getElementById('btn-next-practice');
if(nextBtn) nextBtn.classList.add('hidden');
// Креирај ја реченицата со празно место
const sentenceText = current.baseSentence.replace("{slot}", `<span class="border-b-4 border-dashed border-blue-400 px-4 text-blue-600" id="blank-space">_____</span>`);
document.getElementById('practice-sentence-text').innerHTML = sentenceText;
document.getElementById('practice-hint').innerText = `Забелешка: ${current.hint}`;
// Постави ги копчињата за избор
const optionsContainer = document.getElementById('practice-options');
if (optionsContainer) {
optionsContainer.innerHTML = '';
current.options.forEach(opt => {
const btn = document.createElement('button');
btn.className = "bg-white border-2 border-blue-200 text-blue-800 hover:bg-blue-50 font-bold py-3 px-4 rounded-xl text-lg shadow-xs transition-all";
btn.innerText = opt;
btn.onclick = () => selectPracticeOption(btn, opt);
optionsContainer.appendChild(btn);
});
}
}
function selectPracticeOption(buttonEl, selectedVal) {
if(practiceAnswered) return;
practiceAnswered = true;
const current = practiceData[practiceIndex];
const feedback = document.getElementById('practice-feedback');
const blankSpace = document.getElementById('blank-space');
const optionsContainer = document.getElementById('practice-options');
if(!current || !feedback || !blankSpace || !optionsContainer) return;
// Оневозможи ги сите копчиња
Array.from(optionsContainer.children).forEach(btn => {
btn.classList.add('pointer-events-none', 'opacity-50');
if (btn.innerText === current.correct) {
btn.className = "bg-green-100 border-2 border-green-500 text-green-800 font-bold py-3 px-4 rounded-xl text-lg shadow-xs transition-all";
}
});
if (selectedVal === current.correct) {
practiceScore++;
document.getElementById('practice-score').innerText = `Поени: ${practiceScore}/8`;
blankSpace.innerText = current.correct;
blankSpace.className = "bg-green-100 border-b-4 border-green-500 px-4 text-green-700 font-bold";
feedback.className = "mt-4 p-4 rounded-xl text-center font-bold bg-green-100 text-green-900 border border-green-200";
feedback.innerHTML = `🎉 Одлично Виктор! Точно така! <br><span class="text-xs font-normal">${current.translated}</span>`;
} else {
blankSpace.innerText = selectedVal;
blankSpace.className = "bg-red-100 border-b-4 border-red-500 px-4 text-red-700 font-bold";
buttonEl.className = "bg-red-100 border-2 border-red-500 text-red-800 font-bold py-3 px-4 rounded-xl text-lg shadow-xs transition-all";
feedback.className = "mt-4 p-4 rounded-xl text-center font-bold bg-red-100 text-red-900 border border-red-200";
feedback.innerHTML = `❌ Не е сосема точно. Нам ни требаше '${current.correct}'.`;
}
feedback.classList.remove('hidden');
const nextBtn = document.getElementById('btn-next-practice');
if(nextBtn) nextBtn.classList.remove('hidden');
}
function nextPractice() {
if (practiceIndex < practiceData.length - 1) {
practiceIndex++;
initPractice();
} else {
showCustomModal("Одличен тренинг! 🏆", `Виктор, ја заврши вежбата за пополнување реченици! Освои вкупно ${practiceScore} од 8 поени. Одиме на финалниот квиз!`, "👑");
switchTab('quiz');
}
}
// --- ЛОГИКА ЗА КВИЗОТ ---
function initQuiz() {
quizIndex = 0;
quizScore = 0;
quizAnswered = false;
const scoreDisplay = document.getElementById('quiz-score-display');
if(scoreDisplay) scoreDisplay.innerText = `Поени: 0/10`;
const gameContainer = document.getElementById('quiz-game-container');
if (gameContainer) gameContainer.classList.remove('hidden');
const resultContainer = document.getElementById('quiz-result-container');
if (resultContainer) resultContainer.classList.add('hidden');
loadQuizQuestion();
}
function loadQuizQuestion() {
quizAnswered = false;
const nextBtn = document.getElementById('btn-next-question');
if(nextBtn) nextBtn.classList.add('hidden');
const feedback = document.getElementById('quiz-feedback');
if(feedback) feedback.classList.add('hidden');
const current = quizData[quizIndex];
if (!current) return;
// Прогрес лента
const percent = ((quizIndex + 1) / 10) * 100;
const bar = document.getElementById('quiz-progress-bar');
if(bar) bar.style.width = percent + '%';
const numDisplay = document.getElementById('quiz-question-number');
if(numDisplay) numDisplay.innerText = `Прашање ${quizIndex + 1} од 10`;
// Текст на прашањето со форматирање
const textDisplay = document.getElementById('quiz-question-text');
if(textDisplay) {
textDisplay.innerHTML = `Реченица: <span class="text-xl block my-2 font-bold text-emerald-800">${current.sentence}</span><br>${current.question}`;
}
// Рендер на опции (Номинатив или Акузатив)
const optionsContainer = document.getElementById('quiz-options-container');
if(optionsContainer) {
optionsContainer.innerHTML = '';
current.options.forEach((opt, idx) => {
const btn = document.createElement('button');
btn.className = "bg-white border-2 border-emerald-100 hover:bg-emerald-50 text-emerald-900 font-bold py-4 px-4 rounded-xl text-lg shadow-xs transition-all text-center";
btn.innerText = opt;
btn.onclick = () => selectQuizOption(btn, idx);
optionsContainer.appendChild(btn);
});
}
}
function selectQuizOption(buttonEl, selectedIdx) {
if(quizAnswered) return;
quizAnswered = true;
const current = quizData[quizIndex];
const feedback = document.getElementById('quiz-feedback');
const optionsContainer = document.getElementById('quiz-options-container');
if(!optionsContainer || !feedback || !current) return;
Array.from(optionsContainer.children).forEach((btn, idx) => {
btn.classList.add('pointer-events-none', 'opacity-50');
if (idx === current.correct) {
btn.className = "bg-green-100 border-2 border-green-500 text-green-900 font-bold py-4 px-4 rounded-xl text-lg shadow-xs transition-all text-center";
}
});
if (selectedIdx === current.correct) {
quizScore++;
const scoreDisplay = document.getElementById('quiz-score-display');
if(scoreDisplay) scoreDisplay.innerText = `Поени: ${quizScore}/10`;
feedback.className = "mt-4 p-4 rounded-xl text-sm font-bold bg-green-100 text-green-900 border border-green-200";
feedback.innerHTML = `🎯 ТОЧНО! <br><span class="font-normal">${current.explain}</span>`;
} else {
buttonEl.className = "bg-red-100 border-2 border-red-500 text-red-900 font-bold py-4 px-4 rounded-xl text-lg shadow-xs transition-all text-center";
feedback.className = "mt-4 p-4 rounded-xl text-sm font-medium bg-red-50 text-red-900 border border-red-200";
feedback.innerHTML = `❌ Грешка. <br><span class="font-bold">Објаснување:</span> ${current.explain}`;
}
feedback.classList.remove('hidden');
const nextBtn = document.getElementById('btn-next-question');
if(nextBtn) nextBtn.classList.remove('hidden');
}
function nextQuestion() {
if (quizIndex < quizData.length - 1) {
quizIndex++;
loadQuizQuestion();
} else {
// Крај на квизот
const gameContainer = document.getElementById('quiz-game-container');
if(gameContainer) gameContainer.classList.add('hidden');
const resultContainer = document.getElementById('quiz-result-container');
if(resultContainer) resultContainer.classList.remove('hidden');
const emoji = document.getElementById('quiz-result-emoji');
const resText = document.getElementById('quiz-result-text');
if(!resText) return;
if (quizScore >= 8) {
if(emoji) emoji.innerText = "👑";
resText.innerHTML = `Честитки Виктор! Совршено го владееш Номинативот и Акузативот! <br><span class="text-2xl font-bold text-emerald-900">${quizScore} / 10 точни!</span> <br>Подготвен си за максимални поени утре!`;
} else if (quizScore >= 5) {
if(emoji) emoji.innerText = "⭐";
resText.innerHTML = `Одличен резултат! <br><span class="text-2xl font-bold text-emerald-950">${quizScore} / 10 точни!</span> <br>Повтори ги уште еднаш глаголите што бараат Акузатив за чиста 10-ка!`;
} else {
if(emoji) emoji.innerText = "📚";
resText.innerHTML = `Добро се обиде! <br><span class="text-2xl font-bold text-red-900">${quizScore} / 10 точни!</span> <br>Погледни ја убаво теоријата во првото јазиче и пробај уште еднаш. Можеш ти подобро!`;
}
}
}
function restartQuiz() {
initQuiz();
}
// --- МОДАЛНИ ДИЈАЛОЗИ ---
function showCustomModal(title, msg, icon) {
const modalTitle = document.getElementById('modal-title');
const modalMessage = document.getElementById('modal-message');
const modalIcon = document.getElementById('modal-icon');
const modal = document.getElementById('custom-modal');
if(modalTitle) modalTitle.innerText = title;
if(modalMessage) modalMessage.innerText = msg;
if(modalIcon) modalIcon.innerText = icon || "🎉";
if(modal) modal.classList.remove('hidden');
}
function closeCustomModal() {
const modal = document.getElementById('custom-modal');
if(modal) modal.classList.add('hidden');
}
</script>
</body>
</html><div class="blogger-post-footer">www.bloglines.com</div>Anica Petkoskahttp://www.blogger.com/profile/12340858614356870735noreply@blogger.comtag:blogger.com,1999:blog-26523155.post-82648499914570463612026-05-19T02:11:38.246+02:002026-05-19T02:11:38.246+02:00Биологија (19 прашања) подготовка за усно испрашување
<html lang="mk">
<head>
<meta charset="UTF-8"></meta>
<meta content="width=device-width, initial-scale=1.0" name="viewport"></meta>
<title>Биологија Квиз: Подготовка за усно испрашување и тестот | Нашиот Клас</title>
<meta content="Интерактивен квиз за 7-мо одделение. Научете за екологијата, 'рбетниците и безрбетниците преку 19 прашања со хинтови." name="description"></meta>
<style>
body { font-family: 'Segoe UI', Arial, sans-serif; background-color: #f4f7f9; color: #333; line-height: 1.6; padding: 20px; }
.quiz-container { max-width: 750px; margin: auto; background: white; padding: 30px; border-radius: 15px; box-shadow: 0 10px 25px rgba(0,0,0,0.1); }
.header { text-align: center; border-bottom: 4px solid #4CAF50; margin-bottom: 30px; padding-bottom: 10px; }
.presentation-space { background: #eef9ff; border: 2px dashed #3498db; padding: 20px; text-align: center; margin-bottom: 30px; border-radius: 10px; }
.question-card { background: #ffffff; border: 1px solid #e0e0e0; padding: 20px; margin-bottom: 20px; border-radius: 12px; transition: all 0.3s ease; }
.question-card:hover { transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0,0,0,0.05); }
.q-text { font-weight: 600; font-size: 1.1em; margin-bottom: 15px; display: block; color: #2c3e50; }
.btn-group { display: flex; gap: 12px; margin-top: 15px; }
button { padding: 10px 20px; border: none; border-radius: 8px; cursor: pointer; font-weight: bold; font-size: 14px; transition: 0.2s; }
.btn-true { background-color: #4CAF50; color: white; }
.btn-true:hover { background-color: #45a049; }
.btn-false { background-color: #f44336; color: white; }
.btn-false:hover { background-color: #da190b; }
.hint-btn { background-color: #ff9800; color: white; font-size: 12px; margin-bottom: 10px; }
.hint-text { display: none; font-style: italic; color: #666; margin: 10px 0; padding: 10px; border-left: 4px solid #ff9800; background: #fff8f0; border-radius: 4px; }
.feedback { margin-top: 15px; font-weight: bold; display: none; padding: 10px; border-radius: 6px; }
.success { background-color: #e8f5e9; color: #2e7d32; border: 1px solid #c8e6c9; }
.error { background-color: #ffebee; color: #c62828; border: 1px solid #ffcdd2; }
</style>
</head>
<body>
<div class="quiz-container">
<div class="header">
<h1>🌿 Биологија: Големиот Квиз за Алекс</h1>
<p>Подготовка за усно испрашување и тестот преку 19 клучни прашања</p>
</div>
<div class="presentation-space">
<h3>📊Презентација</h3>
<p>Погледнете ја презентацијата направена со NotebookLM пред да почнете со квизот. </p>
<iframe width="100%" height="315" src="https://www.youtube.com/embed/_nAvsshqi1U?si=f9IxlsmSJ-nEneVL" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div>
<div id="quiz-content"></div>
</div>
<script>
const questions = [
{ q: "1. Озонските дупки настануваат главно поради прекумерно користење на фосилни горива.", a: true, hint: "Размисли за гасовите што се испуштаат во атмосферата." },
{ q: "2. Киселите дождови помагаат за побрзо цветање на растенијата.", a: false, hint: "Киселината предизвикува сушење на листовите." },
{ q: "3. Ефектот на стаклена градина се должи на зголемено количество јаглерод диоксид.", a: true, hint: "Овој гас ја задржува топлината во атмосферата." },
{ q: "4. Првиот член во еден синџир на исхрана секогаш се нарекува производител.", a: true, hint: "Тоа се растенијата или алгите." },
{ q: "5. Ако вториот член од синџирот го снема, првиот член (производителот) ќе се намали.", a: false, hint: "Ако никој не го јаде првиот член, тој ќе се пренамножи." },
{ q: "6. Водоземците како возрасни единки дишат со бели дробови.", a: true, hint: "Тие поминуваат дел од животот на копно." },
{ q: "7. Дождовниците и тритоните спаѓаат во групата водоземци без опашки.", a: false, hint: "Само жабите се водоземци без опашки." },
{ q: "8. Влекачите имаат сува кожа покриена со лушпи.", a: true, hint: "Ова ги штити од губење вода." },
{ q: "9. Сите змии се отровни и опасни за човекот.", a: false, hint: "Постојат и неотровни змии." },
{ q: "10. Птиците имаат лесен скелет прилагоден за летање.", a: true, hint: "Тешките коски би го отежнале летот." },
{ q: "11. Нојот е пример за птица летач.", a: false, hint: "Нојот е познат како птица тркач." },
{ q: "12. Младите цицачи се хранат со млеко од мајката.", a: true, hint: "Ова е главната карактеристика по која го добиле името." },
{ q: "13. Човекот и Балканскиот рис се примери за плацентални цицачи.", a: true, hint: "Тие не се кенгури или клунари." },
{ q: "14. Членконогите имаат внатрешен скелет од калциум.", a: false, hint: "Тие имаат надворешен скелет од хитин." },
{ q: "15. Пајаковините се карактеризираат со тоа што имаат 8 нозе.", a: true, hint: "За разлика од инсектите кои имаат 6." },
{ q: "16. Црвите се делат на сплескани, валчести и прстенести.", a: true, hint: "Поделбата е според формата на телото." },
{ q: "17. Октоподот спаѓа во групата на полжави.", a: false, hint: "Октоподот е главоног и е брз пливач." },
{ q: "18. Копривкарите се водни животни кои имаат клетки за одбрана.", a: true, hint: "Тие клетки се викаат копривни клетки." },
{ q: "19. Сунѓерите се најсложените повеќеклеточни животни.", a: false, hint: "Напротив, тие се наједноставните." }
];
const container = document.getElementById('quiz-content');
questions.forEach((item, index) => {
const card = document.createElement('div');
card.className = 'question-card';
card.innerHTML = `
<span class="q-text">${item.q}</span>
<button class="hint-btn" onclick="toggleHint(${index})">💡 Помош</button>
<div id="hint-${index}" class="hint-text">Совет: ${item.hint}</div>
<div class="btn-group">
<button class="btn-true" onclick="check(${index}, true)">ТОЧНО</button>
<button class="btn-false" onclick="check(${index}, false)">ПОГРЕШНО</button>
</div>
<div id="feedback-${index}" class="feedback"></div>
`;
container.appendChild(card);
});
function toggleHint(index) {
const hint = document.getElementById(`hint-${index}`);
hint.style.display = hint.style.display === 'block' ? 'none' : 'block';
}
function check(index, userAns) {
const feedback = document.getElementById(`feedback-${index}`);
feedback.style.display = 'block';
if (userAns === questions[index].a) {
feedback.className = 'feedback success';
feedback.innerText = "● Точен одговор! Одлично оди!";
} else {
feedback.className = 'feedback error';
feedback.innerText = "● Размисли уште еднаш. Погледни го хинтот.";
}
}
</script>
</body>
</html><div class="blogger-post-footer">www.bloglines.com</div>Anica Petkoskahttp://www.blogger.com/profile/12340858614356870735noreply@blogger.comtag:blogger.com,1999:blog-26523155.post-61988269274378598762026-05-19T00:11:22.958+02:002026-05-19T17:05:11.586+02:00Германски за 10ка! - Виктор 6то одделение<!DOCTYPE html>
<html lang="mk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Германски за 10ка! - Виктор 6то одделение</title>
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Fredoka+One&family=Quicksand:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Quicksand', sans-serif;
background-color: #f0f7ff;
}
.fun-title {
font-family: 'Fredoka One', cursive;
}
.tab-btn {
transition: all 0.2s ease;
}
.card-flip {
perspective: 1000px;
}
.card-inner {
transition: transform 0.6s;
transform-style: preserve-3d;
}
.card-flipped {
transform: rotateY(180deg);
}
.card-front, .card-back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.card-back {
transform: rotateY(180deg);
}
</style>
</head>
<body class="text-gray-800 pb-12">
<!-- Header / Хедер за Виктор -->
<header class="bg-gradient-to-r from-purple-600 via-pink-500 to-blue-500 text-white shadow-xl py-6 px-4 text-center rounded-b-3xl mb-8 relative overflow-hidden">
<div class="absolute top-0 left-0 w-full h-full opacity-10 bg-[radial-gradient(#fff_1px,transparent_1px)] [background-size:16px_16px]"></div>
<div class="max-w-4xl mx-auto relative z-10">
<span class="bg-yellow-400 text-purple-900 font-bold px-3 py-1 rounded-full text-xs uppercase tracking-widest animate-pulse">Ајде по германски за 10-ка! 🚀</span>
<h1 class="fun-title text-3xl md:text-5xl mt-2 tracking-wide text-shadow-md">Супер-Блог Тренер по Германски</h1>
<p class="text-sm md:text-lg mt-2 font-medium text-pink-100">Специјално спасување за Виктор - 6то одделение (Planet 1)</p>
<div class="flex justify-center gap-4 mt-4 text-xs md:text-sm">
<span class="bg-white/20 px-3 py-1 rounded-full">🕒 7 Теми во 1 ден</span>
<span class="bg-white/20 px-3 py-1 rounded-full">🎮 Квиз & Игри</span>
<span class="bg-white/20 px-3 py-1 rounded-full">📢 Изговор (Аудио)</span>
</div>
</div>
</header>
<main class="max-w-5xl mx-auto px-4">
<!-- Менување на Јазичиња (Tabs Navigation) -->
<div class="flex flex-wrap justify-center gap-2 mb-8 bg-white p-2 rounded-2xl shadow-md border border-gray-100">
<button onclick="switchTab('grammar')" id="btn-grammar" class="tab-btn bg-purple-600 text-white font-bold px-4 py-2.5 rounded-xl flex items-center gap-2 text-sm md:text-base">
📖 1. Училишна Табла (Теорија)
</button>
<button onclick="switchTab('cards')" id="btn-cards" class="tab-btn bg-gray-100 hover:bg-gray-200 text-gray-700 font-semibold px-4 py-2.5 rounded-xl flex items-center gap-2 text-sm md:text-base">
🎴 2. Звучни Картички
</button>
<button onclick="switchTab('wordorder')" id="btn-wordorder" class="tab-btn bg-gray-100 hover:bg-gray-200 text-gray-700 font-semibold px-4 py-2.5 rounded-xl flex items-center gap-2 text-sm md:text-base">
🔀 3. Подреди ги Зборовите
</button>
<button onclick="switchTab('quiz')" id="btn-quiz" class="tab-btn bg-gray-100 hover:bg-gray-200 text-gray-700 font-semibold px-4 py-2.5 rounded-xl flex items-center gap-2 text-sm md:text-base">
📝 4. Квиз (15 прашања)
</button>
<button onclick="switchTab('writing')" id="btn-writing" class="tab-btn bg-gray-100 hover:bg-gray-200 text-gray-700 font-semibold px-4 py-2.5 rounded-xl flex items-center gap-2 text-sm md:text-base">
✍️ 5. Твое Пишување
</button>
</div>
<!-- ТАБ 1: ГРАМАТИКА И ОБЈАСНУВАЊА -->
<div id="tab-grammar" class="tab-content block">
<div class="bg-white rounded-3xl p-6 shadow-xl border border-gray-100 space-y-8">
<div class="border-b border-gray-100 pb-4">
<h2 class="fun-title text-2xl text-purple-700 flex items-center gap-2">
<span class="bg-purple-100 p-2 rounded-lg text-purple-600">🏫</span>
Сите 7 лекции спакувани во лесни табели
</h2>
<p class="text-sm text-gray-500 mt-1">Виктор, прочитај ги овие брзи формули пред да почнеш со игрите. Сè е поедноставено!</p>
</div>
<!-- 1. Часот (Uhrzeit) -->
<div class="bg-gradient-to-r from-blue-50 to-indigo-50 p-6 rounded-2xl border border-blue-100">
<h3 class="font-bold text-lg text-blue-800 flex items-center gap-2">
<span class="bg-blue-200 text-blue-800 text-xs px-2 py-0.5 rounded-full">1</span>
Како се кажува часот? (Die Uhrzeit)
</h3>
<p class="text-sm mt-1 text-gray-600">На тестот ќе те прашаат: <strong>Wie spät ist es?</strong> (Колку е часот?) или <strong>Wie viel Uhr ist es?</strong></p>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
<div class="bg-white p-4 rounded-xl shadow-sm border border-blue-100">
<span class="font-bold text-blue-600 block text-sm">Официјално / Дигитално (Полесно)</span>
<p class="text-sm mt-1">Само ги кажуваш броевите по ред:</p>
<ul class="list-disc pl-5 text-sm mt-2 text-gray-700 space-y-1">
<li>14:10 → Es ist <strong>vierzehn Uhr zehn</strong>.</li>
<li>08:30 → Es ist <strong>acht Uhr dreißig</strong>.</li>
</ul>
</div>
<div class="bg-white p-4 rounded-xl shadow-sm border border-blue-100">
<span class="font-bold text-pink-600 block text-sm">Секојдневно (Незванично)</span>
<p class="text-xs text-gray-500">Се користат зборовите: <strong>nach</strong> (по), <strong>vor</strong> (пред), <strong>halb</strong> (половина до наредниот час), <strong>Viertel</strong> (четврт/петнаесет).</p>
<ul class="list-disc pl-5 text-sm mt-2 text-gray-700 space-y-1">
<li>10:05 → <strong>fünf nach zehn</strong> (5 по 10)</li>
<li>09:50 → <strong>zehn vor zehn</strong> (10 пред 10)</li>
<li>08:30 → <strong>halb neun</strong> (половина до 9 - секогаш се додава +1 час!)</li>
<li>07:15 → <strong>Viertel nach sieben</strong> (четврт по 7)</li>
</ul>
</div>
</div>
</div>
<!-- 2. Делливи глаголи (Trennbare Verben) -->
<div class="bg-gradient-to-r from-purple-50 to-pink-50 p-6 rounded-2xl border border-purple-100">
<h3 class="font-bold text-lg text-purple-800 flex items-center gap-2">
<span class="bg-purple-200 text-purple-800 text-xs px-2 py-0.5 rounded-full">2</span>
Делливи Глаголи (Trennbare Verben)
</h3>
<p class="text-sm mt-1 text-gray-600">Овие глаголи имаат префикс кој „се откинува“ и оди на **најкрај на реченицата**!</p>
<div class="mt-4 overflow-x-auto">
<table class="w-full text-left text-sm bg-white rounded-xl shadow-sm overflow-hidden border border-purple-100">
<thead class="bg-purple-100 text-purple-900">
<tr>
<th class="p-3 font-semibold">Глагол</th>
<th class="p-3 font-semibold">Префикс кој оди НА КРАЈ</th>
<th class="p-3 font-semibold">Пример реченица</th>
</tr>
</thead>
<tbody class="divide-y divide-purple-50">
<tr>
<td class="p-3 font-medium"><strong>fern</strong>sehen (гледа ТВ)</td>
<td class="p-3 text-red-500 font-bold">fern</td>
<td class="p-3">Ich sehe jeden Abend <span class="bg-yellow-100 px-1 rounded">fern</span>.</td>
</tr>
<tr>
<td class="p-3 font-medium"><strong>mit</strong>kommen (доаѓа со некој)</td>
<td class="p-3 text-red-500 font-bold">mit</td>
<td class="p-3">Kommst du heute <span class="bg-yellow-100 px-1 rounded">mit</span>?</td>
</tr>
<tr>
<td class="p-3 font-medium"><strong>an</strong>fangen (започнува)</td>
<td class="p-3 text-red-500 font-bold">an</td>
<td class="p-3">Der Film fängt um 20 Uhr <span class="bg-yellow-100 px-1 rounded">an</span>.</td>
</tr>
<tr>
<td class="p-3 font-medium"><strong>auf</strong>räumen (чисти/средува)</td>
<td class="p-3 text-red-500 font-bold">auf</td>
<td class="p-3">Ich räume mein Zimmer <span class="bg-yellow-100 px-1 rounded">auf</span>.</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- 3. Модални глаголи (Modalverben - können & wollen) -->
<div class="bg-gradient-to-r from-green-50 to-teal-50 p-6 rounded-2xl border border-green-100">
<h3 class="font-bold text-lg text-green-800 flex items-center gap-2">
<span class="bg-green-200 text-green-800 text-xs px-2 py-0.5 rounded-full">3</span>
Модални глаголи: *können* (може/знае) и *wollen* (сака)
</h3>
<p class="text-sm mt-1 text-gray-600">Внимавај! Овие глаголи се менуваат чудно кај <strong>ich, du, er/sie/es</strong>. Кај нив НЕМА наставка кај <em>ich</em> и <em>er/sie/es</em> (тие се потполно исти!). Другиот глагол оди на крај во инфинитив.</p>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
<div class="bg-white p-4 rounded-xl border border-green-200 shadow-sm">
<span class="font-bold text-green-700 block text-base border-b pb-1 mb-2">können (може/умее)</span>
<table class="w-full text-xs md:text-sm">
<tr><td class="py-1"><strong>ich</strong></td><td class="text-pink-600 font-bold">kann</td><td class="text-gray-400">(нема наставка!)</td></tr>
<tr><td class="py-1"><strong>du</strong></td><td class="text-green-800">kannst</td><td></td></tr>
<tr><td class="py-1"><strong>er/sie/es</strong></td><td class="text-pink-600 font-bold">kann</td><td class="text-gray-400">(нема наставка!)</td></tr>
<tr><td class="py-1"><strong>wir</strong></td><td class="text-green-800">können</td><td></td></tr>
<tr><td class="py-1"><strong>ihr</strong></td><td class="text-green-800">könnt</td><td></td></tr>
<tr><td class="py-1"><strong>sie/Sie</strong></td><td class="text-green-800">können</td><td></td></tr>
</table>
</div>
<div class="bg-white p-4 rounded-xl border border-green-200 shadow-sm">
<span class="font-bold text-teal-700 block text-base border-b pb-1 mb-2">wollen (сака)</span>
<table class="w-full text-xs md:text-sm">
<tr><td class="py-1"><strong>ich</strong></td><td class="text-pink-600 font-bold">will</td><td class="text-gray-400">(нема наставка!)</td></tr>
<tr><td class="py-1"><strong>du</strong></td><td class="text-teal-800">willst</td><td></td></tr>
<tr><td class="py-1"><strong>er/sie/es</strong></td><td class="text-pink-600 font-bold">will</td><td class="text-gray-400">(нема наставка!)</td></tr>
<tr><td class="py-1"><strong>wir</strong></td><td class="text-teal-800">wollen</td><td></td></tr>
<tr><td class="py-1"><strong>ihr</strong></td><td class="text-teal-800">wollt</td><td></td></tr>
<tr><td class="py-1"><strong>sie/Sie</strong></td><td class="text-teal-800">wollen</td><td></td></tr>
</table>
</div>
</div>
</div>
<!-- 4. Прилози за време (Temporale Adverbien) -->
<div class="bg-gradient-to-r from-yellow-50 to-amber-50 p-6 rounded-2xl border border-yellow-100">
<h3 class="font-bold text-lg text-amber-800 flex items-center gap-2">
<span class="bg-yellow-200 text-amber-800 text-xs px-2 py-0.5 rounded-full">4</span>
Прилози за време (Кога правиме нешто?)
</h3>
<p class="text-sm mt-1 text-gray-600">Со нив кажуваме колку често или кога правиме некоја активност:</p>
<div class="grid grid-cols-2 md:grid-cols-4 gap-3 mt-4 text-center">
<div class="bg-white p-3 rounded-xl border border-yellow-200">
<span class="font-bold text-amber-700 block">immer</span>
<span class="text-xs text-gray-500">секогаш (100%)</span>
</div>
<div class="bg-white p-3 rounded-xl border border-yellow-200">
<span class="font-bold text-amber-700 block">oft</span>
<span class="text-xs text-gray-500">често</span>
</div>
<div class="bg-white p-3 rounded-xl border border-yellow-200">
<span class="font-bold text-amber-700 block">manchmal</span>
<span class="text-xs text-gray-500">понекогаш</span>
</div>
<div class="bg-white p-3 rounded-xl border border-yellow-200">
<span class="font-bold text-amber-700 block">nie</span>
<span class="text-xs text-gray-500">никогаш (0%)</span>
</div>
</div>
<div class="bg-amber-100/50 p-3 rounded-xl mt-3 text-xs md:text-sm text-amber-900 font-medium">
💡 <strong>Правило за збороред:</strong> Ако реченицата ја започнеш со прилог за време (на пр. <em>Manchmal</em>), глаголот веднаш мора да биде на второ место! <br>Пример: <em>Manchmal <strong>spiele</strong> ich Fortnite.</em> (НЕ: Manchmal ich spiele...)
</div>
</div>
<!-- 5 и 6. Хобија и Места во слободно време -->
<div class="bg-gradient-to-r from-rose-50 to-pink-50 p-6 rounded-2xl border border-rose-100">
<h3 class="font-bold text-lg text-rose-800 flex items-center gap-2">
<span class="bg-rose-200 text-rose-800 text-xs px-2 py-0.5 rounded-full">5 & 6</span>
Хобија и Места за излегување (Freizeit & Orte)
</h3>
<p class="text-sm mt-1 text-gray-600">Како да кажеш каде одиш и што правиш во слободно време (прилагодено за 12 годишни деца):</p>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
<div class="bg-white p-4 rounded-xl border border-rose-200">
<span class="font-bold text-rose-700 block text-sm mb-2">🎮 Активности / Хобија</span>
<ul class="text-xs md:text-sm space-y-1 text-gray-700">
<li><strong>Computerspiele spielen</strong> → Играње компјутерски игри</li>
<li><strong>Videos auf TikTok schauen</strong> → Гледање видеа на TikTok</li>
<li><strong>Skateboard fahren</strong> → Возење скејтборд</li>
<li><strong>Musik hören</strong> → Слушање музика</li>
<li><strong>Fußball trainieren</strong> → Тренирање фудбал</li>
</ul>
</div>
<div class="bg-white p-4 rounded-xl border border-rose-200">
<span class="font-bold text-rose-700 block text-sm mb-2">📍 Места (In der Freizeit)</span>
<ul class="text-xs md:text-sm space-y-1 text-gray-700">
<li><strong>ins Kino gehen</strong> → Оди во кино</li>
<li><strong>in den Park gehen</strong> → Оди во парк</li>
<li><strong>ins Schwimmbad gehen</strong> → Оди на базен</li>
<li><strong>auf den Sportplatz gehen</strong> → Оди на спортско игралиште</li>
<li><strong>zu Hause bleiben</strong> → Седи дома (многу важно!)</li>
</ul>
</div>
</div>
</div>
<!-- 7. Gern, Lieber, Am liebsten -->
<div class="bg-gradient-to-r from-orange-50 to-red-50 p-6 rounded-2xl border border-orange-100">
<h3 class="font-bold text-lg text-orange-800 flex items-center gap-2">
<span class="bg-orange-200 text-orange-800 text-xs px-2 py-0.5 rounded-full">7</span>
Градација: *gern* (сакам) → *lieber* (повеќе сакам) → *am liebsten* (најмногу сакам)
</h3>
<p class="text-sm mt-1 text-gray-600">Се користи за да кажеш што претпочиташ да правиш:</p>
<div class="grid grid-cols-3 gap-3 mt-4 text-center">
<div class="bg-white p-3 rounded-xl border border-orange-200">
<span class="text-xs text-gray-500">сакам</span>
<span class="font-bold text-orange-700 block text-lg">gern</span>
<span class="text-[11px] text-gray-400">Ich spiele gern Tennis.</span>
</div>
<div class="bg-white p-3 rounded-xl border border-orange-200">
<span class="text-xs text-gray-500">повеќе сакам</span>
<span class="font-bold text-orange-700 block text-lg">lieber</span>
<span class="text-[11px] text-gray-400">Ich spiele lieber Fußball.</span>
</div>
<div class="bg-white p-3 rounded-xl border border-orange-200">
<span class="text-xs text-gray-500">најмногу сакам</span>
<span class="font-bold text-orange-700 block text-lg">am liebsten</span>
<span class="text-[11px] text-gray-400">Ich spiele am liebsten Apex.</span>
</div>
</div>
</div>
</div>
</div>
<!-- ТАБ 2: ЗВУЧНИ КАРТИЧКИ -->
<div id="tab-cards" class="tab-content hidden">
<div class="bg-white rounded-3xl p-6 shadow-xl border border-gray-100">
<div class="border-b border-gray-100 pb-4 mb-6">
<h2 class="fun-title text-2xl text-pink-600 flex items-center gap-2">
<span class="bg-pink-100 p-2 rounded-lg text-pink-500">🎴</span>
Звучни картички со супер фрази за 12-годишници
</h2>
<p class="text-sm text-gray-500 mt-1">Кликни на картичката за да го видиш преводот, а на копчето со звучник за да го слушнеш правилниот германски изговор!</p>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6" id="flashcards-container">
<!-- Картичките ќе бидат автоматски генерирани од JavaScript -->
</div>
</div>
</div>
<!-- ТАБ 3: ПОДРЕДИ ГИ ЗБОРОВИТЕ -->
<div id="tab-wordorder" class="tab-content hidden">
<div class="bg-white rounded-3xl p-6 shadow-xl border border-gray-100">
<div class="border-b border-gray-100 pb-4 mb-6">
<h2 class="fun-title text-2xl text-blue-600 flex items-center gap-2">
<span class="bg-blue-100 p-2 rounded-lg text-blue-500">🔀</span>
Подреди ги зборовите во реченицата (8 Вежби)
</h2>
<p class="text-sm text-gray-500 mt-1">Виктор, граматички подреди ги зборовите! Внимавај каде стои глаголот и префиксите.</p>
</div>
<!-- Контејнер за вежбата -->
<div class="bg-blue-50/50 p-6 rounded-2xl border border-blue-100 max-w-2xl mx-auto">
<div class="flex justify-between items-center mb-4">
<span class="text-sm font-bold text-blue-800" id="wo-progress">Реченица 1 од 8</span>
<span class="text-xs bg-blue-100 text-blue-800 px-2.5 py-1 rounded-full font-bold" id="wo-score">Поени: 0/8</span>
</div>
<div class="bg-white p-4 rounded-xl shadow-sm min-h-[60px] flex flex-wrap gap-2 items-center justify-center border-2 border-dashed border-blue-200 mb-6" id="wo-target-slots">
<!-- Тука се редат зборовите што ги бира корисникот -->
</div>
<div class="flex flex-wrap gap-2 justify-center mb-6" id="wo-source-words">
<!-- Понудени измешани зборови -->
</div>
<div class="flex justify-between gap-4">
<button onclick="resetCurrentSentence()" class="bg-gray-200 hover:bg-gray-300 text-gray-700 px-4 py-2 rounded-xl text-sm font-bold flex items-center gap-1">
🔄 Ресетирај ја оваа реченица
</button>
<button onclick="checkSentenceOrder()" id="btn-submit-wo" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-xl text-sm font-bold flex items-center gap-1">
Провери реченица ✔️
</button>
</div>
<!-- Фидбек порака -->
<div id="wo-feedback" class="mt-4 p-3 rounded-xl text-center font-bold hidden"></div>
</div>
</div>
</div>
<!-- ТАБ 4: КВИЗ (15 ПРАШАЊА) -->
<div id="tab-quiz" class="tab-content hidden">
<div class="bg-white rounded-3xl p-6 shadow-xl border border-gray-100">
<div class="border-b border-gray-100 pb-4 mb-6 flex justify-between items-center">
<div>
<h2 class="fun-title text-2xl text-emerald-600 flex items-center gap-2">
<span class="bg-emerald-100 p-2 rounded-lg text-emerald-500">📝</span>
Големиот Квиз за 10-ка!
</h2>
<p class="text-sm text-gray-500 mt-1">Вежбај 15 реални прашања какви што сигурно ќе има на тестот.</p>
</div>
<span class="bg-emerald-100 text-emerald-800 font-bold px-3 py-1 rounded-full text-sm" id="quiz-score-display">Поени: 0/15</span>
</div>
<!-- Квиз прашање -->
<div id="quiz-game-container" class="max-w-2xl mx-auto bg-emerald-50/40 p-6 rounded-2xl border border-emerald-100">
<div class="mb-4">
<div class="w-full bg-gray-200 h-2 rounded-full overflow-hidden">
<div id="quiz-progress-bar" class="bg-emerald-500 h-full" style="width: 6.6%"></div>
</div>
<span class="text-xs text-gray-500 mt-1 block font-bold" id="quiz-question-number">Прашање 1 од 15</span>
</div>
<h3 class="text-lg font-bold text-gray-800 mb-4" id="quiz-question-text">Прашањето се вчитува...</h3>
<div class="space-y-2" id="quiz-options-container">
<!-- Опциите се генерираат тука -->
</div>
<div id="quiz-feedback" class="mt-4 p-4 rounded-xl text-sm hidden font-medium"></div>
<div class="mt-6 flex justify-end">
<button onclick="nextQuestion()" id="btn-next-question" class="bg-emerald-600 hover:bg-emerald-700 text-white font-bold px-6 py-2.5 rounded-xl text-sm hidden items-center gap-2">
Следно прашање ➡️
</button>
</div>
</div>
<!-- Квиз Резултат (почетно скриен) -->
<div id="quiz-result-container" class="max-w-md mx-auto text-center hidden p-8 bg-gradient-to-br from-purple-100 to-indigo-100 rounded-3xl border border-purple-200">
<span class="text-5xl" id="quiz-result-emoji">🏆</span>
<h3 class="fun-title text-2xl text-purple-900 mt-4">Супер завршено!</h3>
<p class="text-gray-700 mt-2 font-medium" id="quiz-result-text">Твојот резултат е 0 од 15 точни одговори.</p>
<div class="mt-6">
<button onclick="restartQuiz()" class="bg-purple-600 hover:bg-purple-700 text-white font-bold px-6 py-3 rounded-xl text-sm">
🔄 Обиди се повторно
</button>
</div>
</div>
</div>
</div>
<!-- ТАБ 5: ПИШУВАЊЕ -->
<div id="tab-writing" class="tab-content hidden">
<div class="bg-white rounded-3xl p-6 shadow-xl border border-gray-100">
<div class="border-b border-gray-100 pb-4 mb-6">
<h2 class="fun-title text-2xl text-amber-600 flex items-center gap-2">
<span class="bg-amber-100 p-2 rounded-lg text-amber-500">✍️</span>
Вежба за Пишување состав на тестот
</h2>
<p class="text-sm text-gray-500 mt-1">Ова прашање носи најмногу поени! Напиши краток состав на германски.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<!-- Лева страна: Прашање и Текст ареа -->
<div class="space-y-4">
<div class="bg-amber-50 p-4 rounded-xl border border-amber-200">
<h4 class="font-bold text-amber-950 text-base flex items-center gap-2">
❓ Тема на која мораш да знаеш да одговориш:
</h4>
<p class="text-sm mt-1 text-amber-900 font-medium">
"Was machst du am liebsten in deiner Freizeit? Was sind deine Hobbys?" <br>
<span class="text-xs text-gray-500 italic">(Што сакаш најмногу да правиш во слободното време? Кои се твоите хобија?)</span>
</p>
</div>
<div>
<label for="writing-text" class="block text-sm font-bold text-gray-700 mb-1">Виктор, вежбај го пишувањето овде:</label>
<textarea id="writing-text" rows="6" class="w-full border-2 border-amber-200 rounded-xl p-3 focus:outline-none focus:ring-2 focus:ring-amber-500 text-sm" placeholder="Schreib hier на германски... (на пр. Ich heiße Viktor...)"></textarea>
</div>
<div class="flex justify-between items-center">
<span class="text-xs text-gray-500" id="char-counter">Зборови: 0</span>
<button onclick="checkWriting()" class="bg-amber-600 hover:bg-amber-700 text-white font-bold px-5 py-2 rounded-xl text-sm flex items-center gap-2">
Провери го текстот ✨
</button>
</div>
<!-- Фидбек од асистент -->
<div id="writing-feedback" class="p-4 rounded-xl bg-gray-50 border border-gray-200 hidden text-sm">
<h5 class="font-bold text-gray-800 flex items-center gap-1">🔔 Коментар:</h5>
<p class="mt-1" id="writing-feedback-content"></p>
</div>
</div>
<!-- Десна страна: Корисни фрази - Мапи на знаење -->
<div class="bg-gray-50 p-6 rounded-2xl border border-gray-100 space-y-4">
<h4 class="font-bold text-sm text-gray-700 uppercase tracking-widest">💡 Најдобри реченици кои можеш да ги искористиш:</h4>
<div class="space-y-2 text-xs md:text-sm">
<div class="bg-white p-2.5 rounded-lg border border-gray-200">
<span class="font-bold text-purple-700">In meiner Freizeit spiele ich gern...</span>
<p class="text-gray-500 italic">Во моето слободно време сакам да играм...</p>
</div>
<div class="bg-white p-2.5 rounded-lg border border-gray-200">
<span class="font-bold text-purple-700">Am liebsten mag ich Computerspiele.</span>
<p class="text-gray-500 italic">Најмногу сакам компјутерски игри.</p>
</div>
<div class="bg-white p-2.5 rounded-lg border border-gray-200">
<span class="font-bold text-purple-700">Ich gehe oft auf den Sportplatz oder in den Park.</span>
<p class="text-gray-500 italic">Често одам на спортското игралиште или во парк.</p>
</div>
<div class="bg-white p-2.5 rounded-lg border border-gray-200">
<span class="font-bold text-purple-700">Am Samstag schaue ich Videos auf TikTok.</span>
<p class="text-gray-500 italic">Во сабота гледам видеа на TikTok.</p>
</div>
</div>
<div class="bg-amber-100/50 p-3 rounded-lg text-xs text-amber-950 font-medium">
📌 <strong>План за 10-ка во пишување:</strong> Напиши го името, колку години имаш, кажи две хобија кои ги сакаш, со кого играш и кога го правиш тоа! На пример:
<span class="block mt-2 italic text-gray-700 bg-white p-2 rounded">"Ich heiße Viktor und bin 12 Jahre alt. In meiner Freizeit spiele ich gern Fortnite. Am liebsten treffe ich meine Freunde im Park. Das macht Spaß!"</span>
</div>
</div>
</div>
</div>
</div>
</main>
<!-- Креирање на Popup Модал за грешки или известувања наместо alert -->
<div id="custom-modal" class="fixed inset-0 bg-black/50 z-50 flex items-center justify-center hidden px-4">
<div class="bg-white p-6 rounded-3xl max-w-sm w-full text-center shadow-2xl border border-gray-100 animate-[bounce_0.5s_ease-out]">
<span class="text-5xl" id="modal-icon">🎉</span>
<h4 class="fun-title text-xl text-gray-800 mt-4" id="modal-title">Одлично!</h4>
<p class="text-gray-600 mt-2 text-sm" id="modal-message">Реченицата е точна.</p>
<button onclick="closeCustomModal()" class="mt-5 w-full bg-purple-600 hover:bg-purple-700 text-white font-bold py-2.5 rounded-xl text-sm">
Продолжи понатаму
</button>
</div>
</div>
<!-- Script за целата интерактивна логика -->
<script>
// Глобални податоци
// 1. Фрази за Звучни Картички (12-годишна возраст, теми од Planet 1)
const flashcardsData = [
{ german: "Ich spiele gern Brawl Stars.", macedonian: "Сакам да играм Brawl Stars.", category: "Хоби" },
{ german: "Wie spät ist es?", macedonian: "Колку е часот?", category: "Време" },
{ german: "Es ist halb acht.", macedonian: "Часот е седум и половина. (Половина до осум)", category: "Време" },
{ german: "Ich räume mein Zimmer auf.", macedonian: "Го чистам моето собиче. (деллив глагол auf/räumen)", category: "Глаголи" },
{ german: "Ich will ins Kino gehen.", macedonian: "Сакам да одам во кино. (модален wollen)", category: "Места" },
{ german: "Kannst du mitkommen?", macedonian: "Можеш ли да дојдеш со мене?", category: "Глаголи" },
{ german: "Ich schaue am liebsten YouTube.", macedonian: "Најмногу сакам да гледам Јутјуб.", category: "Хоби" },
{ german: "Manchmal fahre ich Skateboard.", macedonian: "Понекогаш возам скејтборд.", category: "Хоби" },
{ german: "Wir trainieren auf dem Sportplatz.", macedonian: "Тренираме на спортското игралиште.", category: "Места" }
];
// 2. Реченици за Подреди ги зборовите (8 реченици)
const wordOrderSentences = [
{
words: ["Ich", "sehe", "jeden", "Abend", "fern."],
shuffled: ["fern.", "jeden", "sehe", "Abend", "Ich"],
solution: "Ich sehe jeden Abend fern."
},
{
words: ["Wie", "spät", "ist", "es?"],
shuffled: ["ist", "Wie", "es?", "spät"],
solution: "Wie spät ist es?"
},
{
words: ["Ich", "will", "ins", "Kino", "gehen."],
shuffled: ["gehen.", "ins", "Ich", "Kino", "will"],
solution: "Ich will ins Kino gehen."
},
{
words: ["KANNST", "du", "heute", "mitkommen?"],
shuffled: ["heute", "KANNST", "mitkommen?", "du"],
solution: "KANNST du heute mitkommen?"
},
{
words: ["Manchmal", "spiele", "ich", "am", "Computer."],
shuffled: ["ich", "spiele", "am", "Manchmal", "Computer."],
solution: "Manchmal spiele ich am Computer."
},
{
words: ["Es", "ist", "Viertel", "nach", "zehn."],
shuffled: ["nach", "Es", "zehn.", "Viertel", "ist"],
solution: "Es ist Viertel nach zehn."
},
{
words: ["Ich", "spiele", "gern", "aber", "ich", "lerne", "lieber."],
shuffled: ["lerne", "gern", "Ich", "ich", "lieber.", "aber", "spiele"],
solution: "Ich spiele gern aber ich lerne lieber.",
alternativeSolution: "Ich lerne gern aber ich spiele lieber."
},
{
words: ["Wir", "treffen", "uns", "im", "Park."],
shuffled: ["uns", "im", "Wir", "Park.", "treffen"],
solution: "Wir treffen uns im Park."
}
];
// 3. 15 прашања за квизот
const quizQuestions = [
{
q: "Како се вели на германски: Колку е часот?",
options: ["Wie alt bist du?", "Wie spät ist es?", "Wo wohnst du?", "Was machst du?"],
correct: 1,
explain: "'Wie spät ist es?' е точната фраза за прашување на времето."
},
{
q: "Ако е 14:30 часот, како го кажуваме во секојдневниот говор?",
options: ["Es ist halb drei.", "Es ist halb zwei.", "Es ist dreißig vor zwei.", "Es ist Viertel nach zwei."],
correct: 0,
explain: "Кај неформалното време, 'halb' означува половина до наредниот час, па 14:30 е 'halb drei' (половина до три)."
},
{
q: "Како се конјугира делливиот глагол 'fernsehen' за 'ich'?",
options: ["Ich fernsehe.", "Ich sehe fern.", "Ich fernsehen.", "Ich sah fern."],
correct: 1,
explain: "Префиксот 'fern' секогаш оди на крајот на реченицата: 'Ich sehe fern.'"
},
{
q: "Кој е точниот превод на: 'Ich räume mein Zimmer auf.'?",
options: ["Јас ја чистам мојата соба.", "Јас ја напуштам мојата соба.", "Јас ја заклучувам мојата соба.", "Јас спијам во мојата соба."],
correct: 0,
explain: "'aufräumen' значи чисти/средува соба."
},
{
q: "Како се конјугира глаголот 'können' (може) за трето лице еднина (er/sie/es)?",
options: ["er kannst", "er könnst", "er kann", "er könnt"],
correct: 2,
explain: "Модалните глаголи кај 'ich' и 'er/sie/es' немаат наставки и се исти: 'ich kann' / 'er kann'."
},
{
q: "Како се конјугира 'wollen' (сака) за 'du'?",
options: ["du willst", "du wollt", "du wollen", "du wöllst"],
correct: 0,
explain: "'du' формата од 'wollen' секогаш завршува на -st: 'du willst'."
},
{
q: "Која реченица е граматички точна со прилогот за време 'manchmal'?",
options: ["Manchmal ich spiele Tennis.", "Manchmal spiele ich Tennis.", "Ich spiele manchmal Tennis.", "И двете: 'Manchmal spiele ich...' и 'Ich spiele manchmal...'"],
correct: 3,
explain: "И двете се точни! Глаголот мора секогаш да е на второ место во реченицата."
},
{
q: "Што значи прилогот за време 'nie'?",
options: ["Никогаш", "Секогаш", "Понекогаш", "Често"],
correct: 0,
explain: "'nie' значи никогаш (0%)."
},
{
q: "Каде одиш ако одиш во базен?",
options: ["ins Kino", "ins Schwimmbad", "in den Park", "auf den Sportplatz"],
correct: 1,
explain: "'Schwimmbad' е базен на германски."
},
{
q: "Кој е правилниот редослед на градација?",
options: ["lieber → am liebsten → gern", "gern → am liebsten → lieber", "gern → lieber → am liebsten", "am liebsten → gern → lieber"],
correct: 2,
explain: "Точниот редослед е: gern (сакам), lieber (повеќе сакам), am liebsten (најмногу сакам)."
},
{
q: "Дополни ја реченицата: 'Ich spiele _____ Tennis, aber ich spiele _____ Fußball.' (сакам... повеќе сакам...)",
options: ["gern / lieber", "lieber / am liebsten", "gern / am liebsten", "am liebsten / gern"],
correct: 0,
explain: "Прво ја користиме основната форма 'gern', а потоа компаративот 'lieber'."
},
{
q: "Што значи реченицата: 'Kommst du heute mit?'",
options: ["Каде одиш денес?", "Дали ќе дојдеш денес со мене/нас?", "Како си денес?", "Дали чистиш денес?"],
correct: 1,
explain: "Ова е прашање со делливиот глагол 'mitkommen' (доаѓа со некој)."
},
{
q: "Како се вели: 10:15 на неформален начин?",
options: ["Viertel vor zehn", "Viertel nach zehn", "zehn vor Viertel", "Viertel nach elf"],
correct: 1,
explain: "15 минути по 10 се кажува 'Viertel nach zehn' (четврт по 10)."
},
{
q: "Како гласи точната реченица: 'Ние сакаме да играме Brawl Stars.'?",
options: ["Wir will spielen Brawl Stars.", "Wir wollen Brawl Stars spielen.", "Wir wollen spielen Brawl Stars.", "Wir wollt Brawl Stars spielen."],
correct: 1,
explain: "Кога користиме модален глагол (wollen), главниот глагол (spielen) мора да оди на самиот КРАЈ во инфинитив."
},
{
q: "Како правилно се пишува хобито 'играње компјутерски игри'?",
options: ["Computerspiele spielen", "Computer spielen spiele", "spielen Computer", "Spiele computer"],
correct: 0,
explain: "'Computerspiele spielen' е правилниот правопис во германскиот јазик."
}
];
// Состојби на апликацијата (State)
let woCurrentIndex = 0;
let woUserSelection = [];
let woScore = 0;
let quizCurrentIndex = 0;
let quizScore = 0;
let quizAnswered = false;
// --- ИНСТАНТ ИНИЦИЈАЛИЗАЦИЈА НА СТАРТОТ (БЕЗ ЧЕКАЊЕ ONLOAD) ---
// Ова решава сè бидејќи веднаш ги полни картичките, квизот и подредувањето штом кодот се вчита во iframe-от!
setTimeout(() => {
renderFlashcards();
initWordOrder();
initQuiz();
}, 100);
// Безбедна навигација која гарантира отворање на сите јазичиња
function switchTab(tabId) {
// Исклучи ги сите јазичиња без исклучок
const tabs = document.getElementsByClassName('tab-content');
for (let i = 0; i < tabs.length; i++) {
tabs[i].style.display = 'none';
}
// Прикажи го активното јазиче
const activeTab = document.getElementById('tab-' + tabId);
if (activeTab) {
activeTab.style.display = 'block';
}
// Промени ги стиловите на сите копчиња во неактивни
const buttons = document.getElementsByClassName('tab-btn');
for (let i = 0; i < buttons.length; i++) {
buttons[i].className = "tab-btn bg-gray-100 hover:bg-gray-200 text-gray-700 font-semibold px-4 py-2.5 rounded-xl flex items-center gap-2 text-sm md:text-base";
}
// Активирај го кликнатото копче
const targetBtn = document.getElementById('btn-' + tabId);
if (targetBtn) {
targetBtn.className = "tab-btn bg-purple-600 text-white font-bold px-4 py-2.5 rounded-xl flex items-center gap-2 text-sm md:text-base";
}
}
// --- ЛОГИКА ЗА ТАБ 2: ЗВУЧНИ КАРТИЧКИ ---
function renderFlashcards() {
const container = document.getElementById('flashcards-container');
if(!container) return;
container.innerHTML = '';
flashcardsData.forEach((card, idx) => {
const cardHTML = `
<div class="card-flip h-44 cursor-pointer" onclick="toggleCard(this)">
<div class="card-inner relative w-full h-full border border-pink-100 rounded-2xl shadow-sm bg-gradient-to-br from-white to-pink-50/20">
<!-- Предна страна -->
<div class="card-front p-4 flex flex-col justify-between rounded-2xl bg-white">
<div class="flex justify-between items-center">
<span class="text-xs bg-pink-100 text-pink-700 px-2.5 py-1 rounded-full font-bold">${card.category}</span>
<button onclick="speakGerman('${card.german}', event)" class="bg-pink-500 hover:bg-pink-600 text-white w-9 h-9 rounded-full flex items-center justify-center shadow transition-all hover:scale-105 text-lg" title="Слушни како се изговара">
📢
</button>
</div>
<div class="text-center my-auto">
<h4 class="text-lg font-bold text-gray-900">${card.german}</h4>
</div>
<div class="text-center text-xs text-pink-400 font-semibold">
🔄 Кликни за превод
</div>
</div>
<!-- Задна страна -->
<div class="card-back p-4 flex flex-col justify-between bg-pink-600 text-white rounded-2xl">
<span class="text-xs bg-white/20 text-white px-2.5 py-1 rounded-full font-bold w-max">Превод</span>
<div class="text-center my-auto">
<h4 class="text-base md:text-lg font-bold text-pink-50">${card.macedonian}</h4>
</div>
<div class="text-center text-xs text-pink-200">
🔄 Кликни за оригинал
</div>
</div>
</div>
</div>
`;
container.innerHTML += cardHTML;
});
}
function toggleCard(cardElement) {
const inner = cardElement.querySelector('.card-inner');
if (inner) {
inner.classList.toggle('card-flipped');
}
}
// Безбеден TTS изговор
function speakGerman(text, event) {
if (event) event.stopPropagation();
if ('speechSynthesis' in window) {
window.speechSynthesis.cancel();
const utterance = new SpeechSynthesisUtterance(text);
utterance.lang = 'de-DE';
utterance.rate = 0.8;
window.speechSynthesis.speak(utterance);
} else {
showCustomModal("Информација", "Преводот е прикажан на картичката. Твојот компјутер не поддржува гласовен изговор во овој прелистувач.", "ℹ️");
}
}
// --- ЛОГИКА ЗА ТАБ 3: ПОДРЕДИ ГИ ЗБОРОВИТЕ ---
function initWordOrder() {
const current = wordOrderSentences[woCurrentIndex];
const progressSpan = document.getElementById('wo-progress');
const scoreSpan = document.getElementById('wo-score');
if (progressSpan) progressSpan.innerText = `Реченица ${woCurrentIndex + 1} од 8`;
if (scoreSpan) scoreSpan.innerText = `Поени: ${woScore}/8`;
woUserSelection = [];
const feedback = document.getElementById('wo-feedback');
if (feedback) feedback.classList.add('hidden');
const submitBtn = document.getElementById('btn-submit-wo');
if (submitBtn) submitBtn.disabled = false;
const targetSlots = document.getElementById('wo-target-slots');
if (targetSlots) targetSlots.innerHTML = '';
const sourceContainer = document.getElementById('wo-source-words');
if (sourceContainer && current) {
sourceContainer.innerHTML = '';
current.shuffled.forEach((word) => {
const wordBtn = document.createElement('button');
wordBtn.className = "bg-white border-2 border-blue-200 text-blue-800 hover:bg-blue-50 font-bold px-4 py-2 rounded-xl text-sm transition-all shadow-sm";
wordBtn.innerText = word;
wordBtn.onclick = () => selectWord(wordBtn, word);
sourceContainer.appendChild(wordBtn);
});
}
}
function selectWord(buttonEl, word) {
woUserSelection.push({ word: word, originalBtn: buttonEl });
buttonEl.classList.add('opacity-30', 'pointer-events-none');
renderSelectedWords();
}
function renderSelectedWords() {
const targetSlots = document.getElementById('wo-target-slots');
if (!targetSlots) return;
targetSlots.innerHTML = '';
woUserSelection.forEach((item, idx) => {
const selectedWordBtn = document.createElement('button');
selectedWordBtn.className = "bg-blue-600 text-white font-bold px-4 py-2 rounded-xl text-sm transition-all flex items-center gap-1.5 shadow";
selectedWordBtn.innerHTML = `${item.word} ❌`;
selectedWordBtn.onclick = () => removeWord(idx);
targetSlots.appendChild(selectedWordBtn);
});
}
function removeWord(index) {
const item = woUserSelection[index];
if (item && item.originalBtn) {
item.originalBtn.classList.remove('opacity-30', 'pointer-events-none');
}
woUserSelection.splice(index, 1);
renderSelectedWords();
}
function resetCurrentSentence() {
initWordOrder();
}
function checkSentenceOrder() {
const current = wordOrderSentences[woCurrentIndex];
const userString = woUserSelection.map(i => i.word).join(" ");
const feedback = document.getElementById('wo-feedback');
if (!feedback) return;
if (woUserSelection.length < current.words.length) {
feedback.className = "mt-4 p-3 rounded-xl text-center font-bold bg-amber-100 text-amber-800";
feedback.innerText = "⚠️ Ве молиме искористете ги сите зборови во реченицата!";
feedback.classList.remove('hidden');
return;
}
const isCorrect = (userString === current.solution) || (current.alternativeSolution && userString === current.alternativeSolution);
if (isCorrect) {
woScore++;
feedback.className = "mt-4 p-3 rounded-xl text-center font-bold bg-green-100 text-green-800 animate-bounce";
feedback.innerHTML = `🎉 Точно така! БРАВО ВИКТОР! <br><span class="text-xs font-normal">${userString}</span>`;
const scoreSpan = document.getElementById('wo-score');
if (scoreSpan) scoreSpan.innerText = `Поени: ${woScore}/8`;
const submitBtn = document.getElementById('btn-submit-wo');
if (submitBtn) submitBtn.disabled = true;
speakGerman(userString);
setTimeout(() => {
if (woCurrentIndex < wordOrderSentences.length - 1) {
woCurrentIndex++;
initWordOrder();
} else {
showCustomModal("Успешна Мисија! 🏆", `Виктор, ги подреди сите реченици! Освои вкупно ${woScore} од 8 поени. Одиме на квизот!`, "👑");
}
}, 2500);
} else {
feedback.className = "mt-4 p-3 rounded-xl text-center font-bold bg-red-100 text-red-800";
feedback.innerHTML = `❌ Не е сосема точно. Обиди се повторно!`;
feedback.classList.remove('hidden');
}
}
// --- ЛОГИКА ЗА ТАБ 4: КВИЗ ---
function initQuiz() {
quizCurrentIndex = 0;
quizScore = 0;
quizAnswered = false;
const scoreDisplay = document.getElementById('quiz-score-display');
if(scoreDisplay) scoreDisplay.innerText = `Поени: 0/15`;
const gameContainer = document.getElementById('quiz-game-container');
if (gameContainer) gameContainer.classList.remove('hidden');
const resultContainer = document.getElementById('quiz-result-container');
if (resultContainer) resultContainer.classList.add('hidden');
loadQuizQuestion();
}
function loadQuizQuestion() {
quizAnswered = false;
const nextBtn = document.getElementById('btn-next-question');
if(nextBtn) nextBtn.classList.add('hidden');
const feedback = document.getElementById('quiz-feedback');
if(feedback) feedback.classList.add('hidden');
const current = quizQuestions[quizCurrentIndex];
if (!current) return;
// Прогрес лента
const percent = ((quizCurrentIndex + 1) / 15) * 100;
const bar = document.getElementById('quiz-progress-bar');
if(bar) bar.style.width = percent + '%';
const numDisplay = document.getElementById('quiz-question-number');
if(numDisplay) numDisplay.innerText = `Прашање ${quizCurrentIndex + 1} од 15`;
// Прашање текст
const textDisplay = document.getElementById('quiz-question-text');
if(textDisplay) textDisplay.innerText = current.q;
// Рендер на опции
const optionsContainer = document.getElementById('quiz-options-container');
if(optionsContainer) {
optionsContainer.innerHTML = '';
current.options.forEach((opt, idx) => {
const optBtn = document.createElement('button');
optBtn.className = "w-full text-left bg-white hover:bg-emerald-50 border-2 border-emerald-100 p-3.5 rounded-xl text-sm font-semibold transition-all shadow-sm flex items-center justify-between";
optBtn.innerHTML = `<span>${opt}</span> ⚪`;
optBtn.onclick = () => selectQuizOption(optBtn, idx);
optionsContainer.appendChild(optBtn);
});
}
}
function selectQuizOption(buttonEl, selectedIdx) {
if (quizAnswered) return;
quizAnswered = true;
const current = quizQuestions[quizCurrentIndex];
const feedback = document.getElementById('quiz-feedback');
const optionsContainer = document.getElementById('quiz-options-container');
if(!optionsContainer || !feedback || !current) return;
Array.from(optionsContainer.children).forEach((btn, idx) => {
btn.classList.add('pointer-events-none');
if (idx === current.correct) {
btn.className = "w-full text-left bg-green-100 border-2 border-green-400 p-3.5 rounded-xl text-sm font-bold text-green-900 flex items-center justify-between";
btn.innerHTML = `<span>${current.options[idx]}</span> ✔️`;
}
});
if (selectedIdx === current.correct) {
quizScore++;
const scoreDisplay = document.getElementById('quiz-score-display');
if(scoreDisplay) scoreDisplay.innerText = `Поени: ${quizScore}/15`;
feedback.className = "mt-4 p-4 rounded-xl text-sm font-bold bg-green-100 text-green-900 border border-green-200";
feedback.innerHTML = `🎯 ТОЧНО! ${current.explain}`;
} else {
buttonEl.className = "w-full text-left bg-red-100 border-2 border-red-400 p-3.5 rounded-xl text-sm font-bold text-red-900 flex items-center justify-between";
buttonEl.innerHTML = `<span>${current.options[selectedIdx]}</span> ❌`;
feedback.className = "mt-4 p-4 rounded-xl text-sm font-medium bg-red-50 text-red-900 border border-red-200";
feedback.innerHTML = `❌ Грешка. Точниот одговор беше зелениот. <br><span class="font-bold">Објаснување:</span> ${current.explain}`;
}
feedback.classList.remove('hidden');
const nextBtn = document.getElementById('btn-next-question');
if(nextBtn) {
nextBtn.classList.remove('hidden');
nextBtn.classList.add('flex');
}
}
function nextQuestion() {
if (quizCurrentIndex < quizQuestions.length - 1) {
quizCurrentIndex++;
loadQuizQuestion();
} else {
const gameContainer = document.getElementById('quiz-game-container');
if(gameContainer) gameContainer.classList.add('hidden');
const resultContainer = document.getElementById('quiz-result-container');
if(resultContainer) resultContainer.classList.remove('hidden');
const emoji = document.getElementById('quiz-result-emoji');
const resText = document.getElementById('quiz-result-text');
if(!resText) return;
if (quizScore >= 13) {
if(emoji) emoji.innerText = "👑";
resText.innerHTML = `Честитки Виктор! Ти си вистински генијалец по германски! <br><span class="text-2xl font-bold text-purple-900">${quizScore} / 15 точни!</span> <br>Сигурно ќе добиеш 10-ка на тестот!`;
} else if (quizScore >= 8) {
if(emoji) emoji.innerText = "⭐";
resText.innerHTML = `Одличен резултат! <br><span class="text-2xl font-bold text-purple-900">${quizScore} / 15 точни!</span> <br>Само уште малку повтори ги табелите и ќе имаш чиста 10-ка!`;
} else {
if(emoji) emoji.innerText = "📚";
resText.innerHTML = `Добро се обиде! <br><span class="text-2xl font-bold text-purple-900">${quizScore} / 15 точни!</span> <br>Прочитај ја теоријата во првото јазиче уште еднаш и пробај пак. Можеш ти подобро!`;
}
}
}
function restartQuiz() {
initQuiz();
}
// --- ЛОГИКА ЗА ТАБ 5: ПИШУВАЊЕ ---
const writingArea = document.getElementById('writing-text');
if(writingArea) {
writingArea.addEventListener('input', function(e) {
const text = e.target.value.trim();
const words = text === "" ? 0 : text.split(/\s+/).length;
const counter = document.getElementById('char-counter');
if(counter) counter.innerText = `Зборови: ${words}`;
});
}
function checkWriting() {
const writingArea = document.getElementById('writing-text');
if(!writingArea) return;
const text = writingArea.value.trim();
const feedbackContainer = document.getElementById('writing-feedback');
const feedbackContent = document.getElementById('writing-feedback-content');
if (!feedbackContainer || !feedbackContent) return;
if (text === "") {
feedbackContainer.className = "p-4 rounded-xl bg-amber-50 border border-amber-200 text-sm";
feedbackContent.innerText = "Виктор, те молам напиши неколку реченици на германски за да ти помогнам да ги вежбаш хобијата!";
feedbackContainer.classList.remove('hidden');
return;
}
const wordsCount = text.split(/\s+/).length;
let suggestions = [];
if (!text.toLowerCase().includes("hobb") && !text.toLowerCase().includes("freizeit")) {
suggestions.push("Пробај да ги вметнеш зборовите 'Hobbys' или 'Freizeit' (слободно време).");
}
if (!text.toLowerCase().includes("spiele") && !text.toLowerCase().includes("gehe") && !text.toLowerCase().includes("fahre") && !text.toLowerCase().includes("schaue")) {
suggestions.push("Вклучи активности: 'spiele' (играм), 'gehe' (одам), 'schaue' (гледам), или 'fahre' (возам).");
}
if (!text.toLowerCase().includes("gern") && !text.toLowerCase().includes("lieber") && !text.toLowerCase().includes("am liebsten")) {
suggestions.push("Користи ги 'gern', 'lieber' или 'am liebsten' за да кажеш што најмногу сакаш да правиш!");
}
if (wordsCount < 10) {
suggestions.push("Текстот е малку краток. За добра оценка на тестот, напиши барем 3-4 реченици (над 15 зборови).");
}
feedbackContainer.classList.remove('hidden');
if (suggestions.length === 0) {
feedbackContainer.className = "p-4 rounded-xl bg-green-50 border border-green-200 text-sm text-green-900";
feedbackContent.innerHTML = `<strong>Одлична работа Виктор! 🌟</strong> Вашиот состав содржи соодветни клучни зборови и изгледа многу богато! Извежбај го добро овој текст за тестот утре.`;
} else {
feedbackContainer.className = "p-4 rounded-xl bg-blue-50 border border-blue-200 text-sm text-blue-900";
let listHtml = "<ul class='list-disc pl-5 mt-2 space-y-1'>";
suggestions.forEach(s => listHtml += `<li>${s}</li>`);
listHtml += "</ul>";
feedbackContent.innerHTML = `<strong>Добро започнато! 📝</strong> Еве како да го направиш составот совршен за максимални поени:${listHtml}`;
}
}
// --- КОНТРОЛА НА СОПСТВЕН МОДАЛ ---
function showCustomModal(title, msg, icon) {
const modalTitle = document.getElementById('modal-title');
const modalMessage = document.getElementById('modal-message');
const modalIcon = document.getElementById('modal-icon');
const modal = document.getElementById('custom-modal');
if(modalTitle) modalTitle.innerText = title;
if(modalMessage) modalMessage.innerText = msg;
if(modalIcon) modalIcon.innerText = icon || "🎉";
if(modal) modal.classList.remove('hidden');
}
function closeCustomModal() {
const modal = document.getElementById('custom-modal');
if(modal) modal.classList.add('hidden');
}
</script>
</body>
</html><div class="blogger-post-footer">www.bloglines.com</div>Anica Petkoskahttp://www.blogger.com/profile/12340858614356870735noreply@blogger.comtag:blogger.com,1999:blog-26523155.post-60231636464652448622026-05-18T23:01:03.293+02:002026-05-18T23:01:03.293+02:00Германски за Виктор, Лекции 9 и 10<style>
.de-tabs-container {
font-family: 'Segoe UI', Arial, sans-serif;
max-width: 100%;
margin: 10px auto;
background: #ffffff;
border-radius: 12px;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
overflow: hidden;
}
.de-nav-tabs {
display: flex;
background: #f1f3f5;
border-bottom: 2px solid #e9ecef;
overflow-x: auto;
}
.de-tab-btn {
flex: 1;
padding: 12px 8px;
border: none;
background: none;
font-weight: bold;
color: #495057;
cursor: pointer;
text-align: center;
white-space: nowrap;
font-size: 14px;
transition: all 0.3s;
}
.de-tab-btn.active {
color: #4364F7;
border-bottom: 3px solid #4364F7;
background: #ffffff;
}
.de-tab-content {
display: none;
padding: 20px;
}
.de-tab-content.active {
display: block;
}
.audio-row, .flashcard, .order-box {
background: #f8f9fa;
border: 1px solid #e9ecef;
padding: 12px;
border-radius: 8px;
margin-bottom: 12px;
}
.play-btn, .check-btn {
background: #4364F7;
color: white;
border: none;
padding: 6px 12px;
border-radius: 20px;
cursor: pointer;
font-size: 13px;
}
.flashcard {
cursor: pointer;
background: #fff3cd;
border-left: 5px solid #ffc107;
}
.writing-card {
background: #eef2fe;
border-left: 5px solid #4364F7;
padding: 15px;
margin-bottom: 15px;
border-radius: 8px;
}
.hidden-text {
display: none;
color: #28a745;
font-weight: bold;
margin-top: 8px;
border-top: 1px dashed #ccc;
padding-top: 5px;
}
.quiz-option {
display: block;
background: #eef2fe;
padding: 10px;
margin: 6px 0;
border-radius: 6px;
cursor: pointer;
}
.word-drop {
font-style: italic;
color: #6c757d;
margin-bottom: 5px;
}
.hint-text {
font-size: 0.9em;
color: #555;
background: #fff;
padding: 5px;
border-radius: 4px;
margin-top: 5px;
display: inline-block;
}
</style>
<div class="de-tabs-container">
<div class="de-nav-tabs">
<button class="de-tab-btn active" onclick="openDeTab(event, 'audio-tab')">🎧 Слушање</button>
<button class="de-tab-btn" onclick="openDeTab(event, 'order-tab')">🧩 Подреди</button>
<button class="de-tab-btn" onclick="openDeTab(event, 'quiz-tab')">📝 Квиз</button>
<button class="de-tab-btn" onclick="openDeTab(event, 'write-tab')">💡 Фрази</button>
<button class="de-tab-btn" onclick="openDeTab(event, 'hobbys-tab')">✍️ Пишување (Хоби)</button>
</div>
<div id="audio-tab" class="de-tab-content active">
<h3>Слушање реченици (Кликни за изговор)</h3>
<p>Слушај го правилниот изговор и внимавај каде стојат глаголите!</p>
<div class="audio-row">
<p><strong>1. Ich kann gut Tennis spielen.</strong></p>
<button class="play-btn" onclick="speakGerman('Ich kann gut Tennis spielen.')">▶ Слушај</button>
</div>
<div class="audio-row">
<p><strong>2. Um wie viel Uhr fängt die Schule an?</strong></p>
<button class="play-btn" onclick="speakGerman('Um wie viel Uhr fängt die Schule an?')">▶ Слушај</button>
</div>
<div class="audio-row">
<p><strong>3. Am Nachmittag sehe ich fern.</strong></p>
<button class="play-btn" onclick="speakGerman('Am Nachmittag sehe ich fern.')">▶ Слушај</button>
</div>
</div>
<div id="order-tab" class="de-tab-content">
<h3>Подреди ги зборовите во точна реченица</h3>
<div class="order-box">
<div class="word-drop">Измешано: <strong>heute / јас / fern / sehe</strong></div>
<button class="check-btn" onclick="toggleElement('ans1')">Провери Точен Одговор</button>
<div id="ans1" class="hidden-text">Точно: Ich sehe heute fern.</div>
</div>
<div class="order-box">
<div class="word-drop">Измешано: <strong>du / kannst / schwimmen / gut / ?</strong></div>
<button class="check-btn" onclick="toggleElement('ans2')">Провери Точен Одговор</button>
<div id="ans2" class="hidden-text">Точно: Kannst du gut schwimmen?</div>
</div>
</div>
<div id="quiz-tab" class="de-tab-content">
<h3>Краток Квиз за проверка</h3>
<div class="order-box">
<p><strong>1. Кој збор недостасува? "Ich spiele ______ Fußball, aber Basketball spiele ich lieber."</strong></p>
<div class="quiz-option" onclick="alert('Точно!')">A) gern</div>
<div class="quiz-option" onclick="alert('Погрешно, обиди се пак.')">B) am liebsten</div>
</div>
</div>
<div id="write-tab" class="de-tab-content">
<h3>Картички за превод</h3>
<div class="flashcard" onclick="toggleElement('flash1')">
<strong>🇲🇰 Македонски:</strong> Најмногу сакам да играм компјутерски игри.
<div id="flash1" class="hidden-text"><br>🇩🇪 Германски: Am liebsten spiele ich Computerspiele.</div>
</div>
<div class="flashcard" onclick="toggleElement('flash2')">
<strong>🇲🇰 Македонски:</strong> Во колку часот доаѓаш со мене?
<div id="flash2" class="hidden-text"><br>🇩🇪 Германски: Um wie viel Uhr kommst du mit?</div>
</div>
</div>
<div id="hobbys-tab" class="de-tab-content">
<h3>Како да напишеш за твоите хобија? (Картчики за составување)</h3>
<p>Размисли или запиши ја реченицата на лист, па кликни на синото копче за да ја провериш граматиката!</p>
<div class="writing-card">
<p><strong>📝 Како ќе кажеш:</strong> "Моето омилено хоби е читањето."</p>
<div class="hint-text">💡 <em>Помош од учебникот: Користи "Mein Lieblingshobby ist..."</em></div>
<br><br>
<button class="play-btn" onclick="toggleElement('writeAns1')">Покажи германски превод</button>
<div id="writeAns1" class="hidden-text">
🇩🇪 Mein Lieblingshobby ist Lesen.
<button class="play-btn" style="background:#28a745; margin-left:10px;" onclick="speakGerman('Mein Lieblingshobby ist Lesen.')">🎧 Слушај изговор</button>
</div>
</div>
<div class="writing-card">
<p><strong>📝 Како ќе кажеш:</strong> "Јас сакам да играм шах, но најмногу сакам да пливам."</p>
<div class="hint-text">💡 <em>Внимавај: "gern" оди веднаш по глаголот за играње, а "am liebsten" го врти редоследот.</em></div>
<br><br>
<button class="play-btn" onclick="toggleElement('writeAns2')">Покажи германски превод</button>
<div id="writeAns2" class="hidden-text">
🇩🇪 Ich spiele gern Schach, aber am liebsten schwimme ich.
<button class="play-btn" style="background:#28a745; margin-left:10px;" onclick="speakGerman('Ich spiele gern Schach, aber am liebsten schwimme ich.')">🎧 Слушај изговор</button>
</div>
</div>
<div class="writing-card">
<p><strong>📝 Како ќе кажеш:</strong> "Јас играм фудбал двапати во неделата."</p>
<div class="hint-text">💡 <em>Помош: „двапати во неделата“ на германски се пишува "zweimal die Woche".</em></div>
<br><br>
<button class="play-btn" onclick="toggleElement('writeAns3')">Покажи германски превод</button>
<div id="writeAns3" class="hidden-text">
🇩🇪 Ich spiele zweimal die Woche Fußball.
<button class="play-btn" style="background:#28a745; margin-left:10px;" onclick="speakGerman('Ich spiele zweimal die Woche Fußball.')">🎧 Слушај изговор</button>
</div>
</div>
<div class="writing-card">
<p><strong>📝 Како ќе кажеш:</strong> "Тој знае (може) добро да свири гитара."</p>
<div class="hint-text">💡 <em>Внимавај: Модалниот глагол "kann" оди на второ место, а акцијата "spielen" на крај!</em></div>
<br><br>
<button class="play-btn" onclick="toggleElement('writeAns4')">Покажи германски превод</button>
<div id="writeAns4" class="hidden-text">
🇩🇪 Er kann gut Gitarre spielen.
<button class="play-btn" style="background:#28a745; margin-left:10px;" onclick="speakGerman('Er kann gut Gitarre spielen.')">🎧 Слушај изговор</button>
</div>
</div>
</div>
</div>
<script>
function openDeTab(evt, tabName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("de-tab-content");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
tabcontent[i].classList.remove("active");
}
tablinks = document.getElementsByClassName("de-tab-btn");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].classList.remove("active");
}
document.getElementById(tabName).style.display = "block";
document.getElementById(tabName).classList.add("active");
evt.currentTarget.classList.add("active");
}
// Функција за криење/откривање
function toggleElement(id) {
var el = document.getElementById(id);
if (el.style.display === "block") {
el.style.display = "none";
} else {
el.style.display = "block";
}
}
// Аудио читач за германски
function speakGerman(text) {
if ('speechSynthesis' in window) {
var msg = new SpeechSynthesisUtterance();
msg.text = text;
msg.lang = 'de-DE';
window.speechSynthesis.speak(msg);
} else {
alert("Вашиот прелистувач не поддржува аудио читање.");
}
}
</script><div class="blogger-post-footer">www.bloglines.com</div>Anica Petkoskahttp://www.blogger.com/profile/12340858614356870735noreply@blogger.comtag:blogger.com,1999:blog-26523155.post-52548347613547121822026-05-18T15:37:55.390+02:002026-05-18T15:53:12.961+02:00Лекција по германски: Einkaufen & Perfekt<!DOCTYPE html>
<html lang="mk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Лекција по германски: Einkaufen & Perfekt</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght=300;400;500;600;700;800&display=swap');
body {
font-family: 'Plus Jakarta Sans', sans-serif;
}
.perspective-1000 {
perspective: 1000px;
}
.transform-style-3d {
transform-style: preserve-3d;
}
.backface-hidden {
backface-visibility: hidden;
}
.rotate-y-180 {
transform: rotateY(180deg);
}
</style>
</head>
<body class="bg-slate-50 text-slate-800 min-h-screen pb-12">
<header class="bg-gradient-to-r from-teal-500 to-emerald-600 text-white shadow-md py-8 px-4 text-center relative overflow-hidden">
<div class="absolute inset-0 opacity-10 bg-[radial-gradient(#fff_1px,transparent_1px)] [background-size:16px_16px]"></div>
<div class="max-w-4xl mx-auto relative z-10">
<span class="bg-emerald-400/30 text-emerald-100 text-xs font-bold uppercase tracking-wider px-3 py-1 rounded-full">Интерактивна Лекција</span>
<h1 class="text-3xl md:text-4xl font-extrabold mt-3 tracking-tight">Gestern war ich in der Stadt 🌿☕</h1>
<p class="text-emerald-100 mt-2 text-sm md:text-base max-w-xl mx-auto">Научи како точно да раскажуваш за минати случки, шопинг и секојдневни активности на германски јазик.</p>
</div>
</header>
<main class="max-w-4xl mx-auto px-4 mt-8">
<div class="flex flex-wrap gap-2 border-b border-slate-200 pb-3 mb-6 justify-center md:justify-start">
<button onclick="switchTab('lesen')" id="tab-lesen" class="tab-btn px-4 py-2.5 rounded-lg text-sm font-semibold transition-all duration-200 flex items-center gap-2 bg-teal-600 text-white shadow-sm">
<i class="fa-solid fa-book-open"></i> Текст
</button>
<button onclick="switchTab('gramatika')" id="tab-gramatika" class="tab-btn px-4 py-2.5 rounded-lg text-sm font-semibold transition-all duration-200 flex items-center gap-2 bg-white text-slate-600 hover:bg-slate-100">
<i class="fa-solid fa-graduation-cap"></i> Граматика
</button>
<button onclick="switchTab('frazi')" id="tab-frazi" class="tab-btn px-4 py-2.5 rounded-lg text-sm font-semibold transition-all duration-200 flex items-center gap-2 bg-white text-slate-600 hover:bg-slate-100">
<i class="fa-solid fa-volume-high"></i> Картички
</button>
<button onclick="switchTab('igra')" id="tab-igra" class="tab-btn px-4 py-2.5 rounded-lg text-sm font-semibold transition-all duration-200 flex items-center gap-2 bg-white text-slate-600 hover:bg-slate-100">
<i class="fa-solid fa-puzzle-piece"></i> Подреди зборови
</button>
<button onclick="switchTab('kviz')" id="tab-kviz" class="tab-btn px-4 py-2.5 rounded-lg text-sm font-semibold transition-all duration-200 flex items-center gap-2 bg-white text-slate-600 hover:bg-slate-100">
<i class="fa-solid fa-circle-question"></i> Квиз (15 прашања)
</button>
<button onclick="switchTab('pisuvanje')" id="tab-pisuvanje" class="tab-btn px-4 py-2.5 rounded-lg text-sm font-semibold transition-all duration-200 flex items-center gap-2 bg-white text-slate-600 hover:bg-slate-100">
<i class="fa-solid fa-pen-fancy"></i> Пишување
</button>
</div>
<!-- ================= ТАБ 1: ЧИТАЈ И СЛУШАЈ ================= -->
<div id="content-lesen" class="tab-content block space-y-6">
<div class="bg-white rounded-2xl shadow-sm border border-slate-100 p-6 md:p-8">
<div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 mb-6 pb-4 border-b border-slate-100">
<div>
<h2 class="text-xl font-bold text-slate-900">Приказната за купувањето (Einkaufsgeschichte)</h2>
<p class="text-xs text-slate-500 mt-1">Прочитај го текстот на германски со сите точни корекции.</p>
</div>
<button onclick="playFullText()" class="flex items-center gap-2 bg-teal-50 text-teal-700 hover:bg-teal-100 px-4 py-2 rounded-xl text-sm font-medium transition-colors">
<i class="fa-solid fa-volume-high"></i> Слушај го целиот текст
</button>
</div>
<!-- Германски текст -->
<div class="bg-slate-50 rounded-xl p-5 md:p-6 border-l-4 border-teal-500 relative mb-6">
<p id="german-text" class="text-lg text-slate-800 leading-relaxed font-medium">
Gestern war ich in der Stadt. Ich bin in ein großes Shoppingcenter gegangen.
Ich wollte mir Kleidung ansehen. Sie hatten viele Produkte, aber sie waren sehr teuer.
Am Ende habe ich mir eine Pflanze gekauft. Sie war auch teuer, aber sehr schön.
Ich habe mir eine Anthurie gekauft. Sie hat viele große rote Blüten.
Ich habe schon den perfekten Platz auf einer Fensterbank für sie gefunden.
Es gab viele Menschen im Center. Ich habe einen Kaffee getrunken und bin dann nach Hause gekommen, weil ich viel Arbeit zu Hause hatte.
</p>
</div>
<!-- Превод на македонски -->
<div class="bg-teal-50/40 rounded-xl p-5 md:p-6 border-l-4 border-emerald-400">
<h3 class="text-xs font-bold text-teal-800 uppercase tracking-wider mb-2">Превод на македонски</h3>
<p class="text-slate-700 leading-relaxed">
Вчера бев во град. Отидов во еден голем шопинг центар. Сакав да разгледам облека. Имаа многу производи, но беа многу скапи. На крајот си купив едно растение. Беше исто така скапо, но многу убаво. Си купив антуриум. Таа има многу големи црвени цветови. Веќе ѝ најдов совршено место на еден праг од прозорец. Имаше многу луѓе во центарот. Испив едно кафе и потоа дојдов дома, бидејќи имав многу работа дома.
</p>
</div>
</div>
</div>
<!-- ================= ТАБ 2: ГРАМАТИКА ================= -->
<div id="content-gramatika" class="tab-content hidden space-y-6">
<div class="bg-white rounded-2xl shadow-sm border border-slate-100 p-6 md:p-8">
<h2 class="text-xl font-bold text-slate-900 mb-6 flex items-center gap-2 border-b pb-4">
<span class="p-1.5 bg-teal-100 text-teal-600 rounded-lg"><i class="fa-solid fa-graduation-cap"></i></span>
Важни граматички правила од разговорот
</h2>
<div class="space-y-8">
<!-- А) SEIN наспроти HABEN -->
<div>
<h3 class="font-bold text-teal-800 text-base mb-3"><i class="fa-solid fa-angles-right mr-2"></i>Минато време (Perfekt) - SEIN или HABEN?</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="bg-rose-50/50 p-4 rounded-xl border border-rose-100">
<h4 class="font-bold text-rose-800 mb-2">Користиме SEIN со:</h4>
<p class="text-sm text-slate-600 mb-3">Глаголи за активно движење од точка А до точка Б или промена на состојба.</p>
<ul class="list-disc list-inside text-sm font-semibold text-rose-950 space-y-1">
<li>ich bin gegangen (отидов)</li>
<li>ich bin gekommen (дојдов)</li>
</ul>
</div>
<div class="bg-sky-50/50 p-4 rounded-xl border border-sky-100">
<h4 class="font-bold text-sky-800 mb-2">Користиме HABEN со:</h4>
<p class="text-sm text-slate-600 mb-3">Најголем дел од сите преостанати глаголи кои означуваат дејство или активност.</p>
<ul class="list-disc list-inside text-sm font-semibold text-sky-950 space-y-1">
<li>ich habe gekauft (купив)</li>
<li>ich habe getrunken (испив)</li>
</ul>
</div>
</div>
</div>
<!-- Б) NACH HAUSE наспроти ZU HAUSE -->
<div>
<h3 class="font-bold text-teal-800 text-base mb-3"><i class="fa-solid fa-angles-right mr-2"></i>Насока наспроти Локација (Дома)</h3>
<table class="w-full text-left border-collapse border border-slate-200 rounded-lg overflow-hidden">
<thead>
<tr class="bg-slate-100">
<th class="p-3 border border-slate-200 text-sm font-bold">Израз</th>
<th class="p-3 border border-slate-200 text-sm font-bold">Значење</th>
<th class="p-3 border border-slate-200 text-sm font-bold">Кога се користи?</th>
<th class="p-3 border border-slate-200 text-sm font-bold">Пример</th>
</tr>
</thead>
<tbody class="text-sm text-slate-700">
<tr>
<td class="p-3 border border-slate-200 font-bold text-emerald-600">nach Hause</td>
<td class="p-3 border border-slate-200">куќи / кон дома</td>
<td class="p-3 border border-slate-200">Со глаголи за движење (gehen, kommen)</td>
<td class="p-3 border border-slate-200 font-mono">Ich bin nach Hause gekommen.</td>
</tr>
<tr class="bg-slate-50/50">
<td class="p-3 border border-slate-200 font-bold text-blue-600">zu Hause</td>
<td class="p-3 border border-slate-200">дома (веќе таму)</td>
<td class="p-3 border border-slate-200">За престој во место (sein, bleiben, arbeiten)</td>
<td class="p-3 border border-slate-200 font-mono">Ich hatte viel Arbeit zu Hause.</td>
</tr>
</tbody>
</table>
</div>
<!-- В) ES GAB и WEIL -->
<div class="bg-amber-50/40 p-4 rounded-xl border border-amber-100">
<h3 class="font-bold text-amber-800 text-sm mb-2">💡 Дополнителни забелешки:</h3>
<ul class="list-disc list-inside text-sm text-amber-950 space-y-1.5">
<li><strong>Es gab:</strong> Формата <i>Es gibt</i> е сегашно време. Кога зборуваме за вчера, користиме Präteritum: <strong>Es gab viele Menschen</strong>.</li>
<li><strong>Редослед со "weil":</strong> Зборчето <i>weil</i> бара глаголот да оди на самиот крај на реченицата (<i>weil ich viel Arbeit zu Hause <b>hatte</b></i>). Секогаш ставаме запирка пред него!</li>
</ul>
</div>
</div>
</div>
</div>
<!-- ================= ТАБ 3: ЗВУЧНИ КАРТИЧКИ ================= -->
<div id="content-frazi" class="tab-content hidden space-y-6">
<div class="bg-white rounded-2xl shadow-sm border border-slate-100 p-6">
<h2 class="text-xl font-bold text-slate-900 mb-1">Звучни картички со изговор 🔊</h2>
<p class="text-xs text-slate-500 mb-6">Кликни на картичката за да ја преведеш на германски, па притисни го звучникот за да ја слушнеш.</p>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
<!-- Картичка 1 -->
<div class="perspective-1000 h-36 cursor-pointer" onclick="flipCard(this)">
<div class="transform-style-3d transition-transform duration-500 relative w-full h-full rounded-xl shadow-sm border border-slate-200">
<div class="backface-hidden absolute inset-0 bg-gradient-to-br from-teal-50 to-white p-4 flex flex-col justify-between rounded-xl">
<span class="text-xs font-bold text-teal-600 uppercase tracking-wide">Македонски</span>
<p class="text-sm font-semibold text-slate-800">„Отидов во еден голем центар.“</p>
<span class="text-[10px] text-slate-400"><i class="fa-solid fa-rotate"></i> Кликни за превод</span>
</div>
<div class="backface-hidden rotate-y-180 absolute inset-0 bg-slate-900 text-white p-4 flex flex-col justify-between rounded-xl">
<span class="text-xs font-bold text-teal-400 uppercase tracking-wide">Deutsch</span>
<p class="text-xs font-bold text-teal-300">„Ich bin in ein großes Shoppingcenter gegangen.“</p>
<button onclick="speakText('Ich bin in ein großes Shoppingcenter gegangen.', event)" class="self-end bg-slate-800 hover:bg-slate-700 text-slate-300 p-1.5 rounded-lg text-[10px] flex items-center gap-1 transition-colors">
<i class="fa-solid fa-volume-high text-teal-400"></i> Слушај
</button>
</div>
</div>
</div>
<!-- Картичка 2 -->
<div class="perspective-1000 h-36 cursor-pointer" onclick="flipCard(this)">
<div class="transform-style-3d transition-transform duration-500 relative w-full h-full rounded-xl shadow-sm border border-slate-200">
<div class="backface-hidden absolute inset-0 bg-gradient-to-br from-teal-50 to-white p-4 flex flex-col justify-between rounded-xl">
<span class="text-xs font-bold text-teal-600 uppercase tracking-wide">Македонски</span>
<p class="text-sm font-semibold text-slate-800">„На крајот си купив едно растение.“</p>
<span class="text-[10px] text-slate-400"><i class="fa-solid fa-rotate"></i> Кликни за превод</span>
</div>
<div class="backface-hidden rotate-y-180 absolute inset-0 bg-slate-900 text-white p-4 flex flex-col justify-between rounded-xl">
<span class="text-xs font-bold text-teal-400 uppercase tracking-wide">Deutsch</span>
<p class="text-xs font-bold text-teal-300">„Am Ende habe ich mir eine Pflanze gekauft.“</p>
<button onclick="speakText('Am Ende habe ich mir eine Pflanze gekauft.', event)" class="self-end bg-slate-800 hover:bg-slate-700 text-slate-300 p-1.5 rounded-lg text-[10px] flex items-center gap-1 transition-colors">
<i class="fa-solid fa-volume-high text-teal-400"></i> Слушај
</button>
</div>
</div>
</div>
<!-- Картичка 3 -->
<div class="perspective-1000 h-36 cursor-pointer" onclick="flipCard(this)">
<div class="transform-style-3d transition-transform duration-500 relative w-full h-full rounded-xl shadow-sm border border-slate-200">
<div class="backface-hidden absolute inset-0 bg-gradient-to-br from-teal-50 to-white p-4 flex flex-col justify-between rounded-xl">
<span class="text-xs font-bold text-teal-600 uppercase tracking-wide">Македонски</span>
<p class="text-sm font-semibold text-slate-800">„Таа има големи црвени цветови.“</p>
<span class="text-[10px] text-slate-400"><i class="fa-solid fa-rotate"></i> Кликни за превод</span>
</div>
<div class="backface-hidden rotate-y-180 absolute inset-0 bg-slate-900 text-white p-4 flex flex-col justify-between rounded-xl">
<span class="text-xs font-bold text-teal-400 uppercase tracking-wide">Deutsch</span>
<p class="text-xs font-bold text-teal-300">„Sie hat viele große rote Blüten.“</p>
<button onclick="speakText('Sie hat viele große rote Blüten.', event)" class="self-end bg-slate-800 hover:bg-slate-700 text-slate-300 p-1.5 rounded-lg text-[10px] flex items-center gap-1 transition-colors">
<i class="fa-solid fa-volume-high text-teal-400"></i> Слушај
</button>
</div>
</div>
</div>
<!-- Картичка 4 -->
<div class="perspective-1000 h-36 cursor-pointer" onclick="flipCard(this)">
<div class="transform-style-3d transition-transform duration-500 relative w-full h-full rounded-xl shadow-sm border border-slate-200">
<div class="backface-hidden absolute inset-0 bg-gradient-to-br from-teal-50 to-white p-4 flex flex-col justify-between rounded-xl">
<span class="text-xs font-bold text-teal-600 uppercase tracking-wide">Македонски</span>
<p class="text-sm font-semibold text-slate-800">„Имаше многу луѓе во центарот.“</p>
<span class="text-[10px] text-slate-400"><i class="fa-solid fa-rotate"></i> Кликни за превод</span>
</div>
<div class="backface-hidden rotate-y-180 absolute inset-0 bg-slate-900 text-white p-4 flex flex-col justify-between rounded-xl">
<span class="text-xs font-bold text-teal-400 uppercase tracking-wide">Deutsch</span>
<p class="text-xs font-bold text-teal-300">„Es gab viele Menschen im Center.“</p>
<button onclick="speakText('Es gab viele Menschen im Center.', event)" class="self-end bg-slate-800 hover:bg-slate-700 text-slate-300 p-1.5 rounded-lg text-[10px] flex items-center gap-1 transition-colors">
<i class="fa-solid fa-volume-high text-teal-400"></i> Слушај
</button>
</div>
</div>
</div>
<!-- Картичка 5 -->
<div class="perspective-1000 h-36 cursor-pointer" onclick="flipCard(this)">
<div class="transform-style-3d transition-transform duration-500 relative w-full h-full rounded-xl shadow-sm border border-slate-200">
<div class="backface-hidden absolute inset-0 bg-gradient-to-br from-teal-50 to-white p-4 flex flex-col justify-between rounded-xl">
<span class="text-xs font-bold text-teal-600 uppercase tracking-wide">Македонски</span>
<p class="text-sm font-semibold text-slate-800">„Потоа си дојдов дома.“</p>
<span class="text-[10px] text-slate-400"><i class="fa-solid fa-rotate"></i> Кликни за превод</span>
</div>
<div class="backface-hidden rotate-y-180 absolute inset-0 bg-slate-900 text-white p-4 flex flex-col justify-between rounded-xl">
<span class="text-xs font-bold text-teal-400 uppercase tracking-wide">Deutsch</span>
<p class="text-xs font-bold text-teal-300">„Ich bin nach Hause gekommen.“</p>
<button onclick="speakText('Ich bin nach Hause gekommen.', event)" class="self-end bg-slate-800 hover:bg-slate-700 text-slate-300 p-1.5 rounded-lg text-[10px] flex items-center gap-1 transition-colors">
<i class="fa-solid fa-volume-high text-teal-400"></i> Слушај
</button>
</div>
</div>
</div>
<!-- Картичка 6 -->
<div class="perspective-1000 h-36 cursor-pointer" onclick="flipCard(this)">
<div class="transform-style-3d transition-transform duration-500 relative w-full h-full rounded-xl shadow-sm border border-slate-200">
<div class="backface-hidden absolute inset-0 bg-gradient-to-br from-teal-50 to-white p-4 flex flex-col justify-between rounded-xl">
<span class="text-xs font-bold text-teal-600 uppercase tracking-wide">Македонски</span>
<p class="text-sm font-semibold text-slate-800">„Бидејќи имав многу работа.“</p>
<span class="text-[10px] text-slate-400"><i class="fa-solid fa-rotate"></i> Кликни за превод</span>
</div>
<div class="backface-hidden rotate-y-180 absolute inset-0 bg-slate-900 text-white p-4 flex flex-col justify-between rounded-xl">
<span class="text-xs font-bold text-teal-400 uppercase tracking-wide">Deutsch</span>
<p class="text-xs font-bold text-teal-300">„...weil ich viel Arbeit hatte.“</p>
<button onclick="speakText('weil ich viel Arbeit hatte.', event)" class="self-end bg-slate-800 hover:bg-slate-700 text-slate-300 p-1.5 rounded-lg text-[10px] flex items-center gap-1 transition-colors">
<i class="fa-solid fa-volume-high text-teal-400"></i> Слушај
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- ================= ТАБ 4: ИГРА СО ЗБОРОВИ ================= -->
<div id="content-igra" class="tab-content hidden space-y-6">
<div class="bg-white rounded-2xl shadow-sm border border-slate-100 p-6">
<div class="flex flex-col sm:flex-row justify-between items-start sm:items-center pb-4 border-b border-slate-100 mb-6 gap-2">
<div>
<h2 class="text-xl font-bold text-slate-900 flex items-center gap-2">
<span class="p-1.5 bg-indigo-100 text-indigo-600 rounded-lg"><i class="fa-solid fa-puzzle-piece"></i></span>
Подреди ја реченицата! (Satzpuzzle)
</h2>
<p class="text-xs text-slate-500 mt-1">Кликни на зборовите по точен редослед за да ја составиш реченицата со „weil“.</p>
</div>
<div class="bg-indigo-50 px-3 py-1.5 rounded-xl border border-indigo-100 text-center">
<strong id="game-progress-text" class="text-indigo-700 text-sm">Реченица 1 од 2</strong>
</div>
</div>
<div class="p-4 bg-indigo-50/40 rounded-xl border border-indigo-100/50 text-center mb-6">
<p id="game-translation" class="text-base font-bold text-slate-800"></p>
</div>
<div class="space-y-2 mb-6">
<span class="text-xs font-semibold text-slate-500">Твојот одговор:</span>
<div id="game-answer-zone" class="w-full min-h-16 p-3 rounded-xl border-2 border-dashed border-slate-200 bg-slate-50/50 flex flex-wrap gap-2 items-center justify-center"></div>
</div>
<div class="space-y-2 mb-8">
<span class="text-xs font-semibold text-slate-500">Зборови на располагање:</span>
<div id="game-words-pool" class="w-full p-4 rounded-xl bg-slate-100/70 border border-slate-200/50 flex flex-wrap gap-2 justify-center"></div>
</div>
<div class="flex justify-between items-center">
<button onclick="resetGameSentence()" class="px-4 py-2 bg-slate-100 hover:bg-slate-200 text-slate-700 text-xs font-semibold rounded-xl transition-colors">Ресетирај</button>
<div class="flex gap-2">
<button id="game-check-btn" onclick="checkGameSentence()" class="px-5 py-2 bg-indigo-600 hover:bg-indigo-700 text-white text-xs font-semibold rounded-xl transition-colors shadow-sm">Провери</button>
<button id="game-next-btn" onclick="nextGameSentence()" class="hidden px-5 py-2 bg-slate-900 hover:bg-slate-800 text-white text-xs font-semibold rounded-xl transition-colors shadow-sm">Следна</button>
</div>
</div>
<div id="game-feedback" class="hidden mt-6 p-4 rounded-xl border text-center"></div>
</div>
</div>
<!-- ================= ТАБ 5: КВИЗ (15 ЗАДАЧИ) ================= -->
<div id="content-kviz" class="tab-content hidden space-y-6">
<div class="bg-white rounded-2xl shadow-sm border border-slate-100 p-6">
<div class="flex justify-between items-center pb-4 border-b border-slate-100 mb-6">
<div>
<h2 class="text-xl font-bold text-slate-900">Интерактивен квиз</h2>
<p class="text-xs text-slate-500">Провери го стекнатото знаење на 15-те чести грешки.</p>
</div>
<div class="bg-teal-50 px-3 py-1.5 rounded-xl border border-teal-100 text-right">
<strong id="quiz-score" class="text-teal-700 text-lg">0 / 15</strong>
</div>
</div>
<div id="quiz-question-container">
<div class="space-y-6">
<div class="flex items-center gap-2">
<span id="question-number" class="bg-teal-100 text-teal-800 text-xs font-bold px-2.5 py-1 rounded-md">Задача 1 од 15</span>
</div>
<h3 id="question-text" class="text-base font-bold text-slate-800"></h3>
<div id="quiz-options" class="grid grid-cols-1 gap-3"></div>
<div id="quiz-feedback" class="hidden p-4 rounded-xl border text-sm font-medium"></div>
<div class="flex justify-end">
<button id="next-btn" onclick="nextQuestion()" class="hidden bg-slate-900 hover:bg-slate-800 text-white font-semibold px-5 py-2 rounded-xl text-xs">Следно прашање</button>
</div>
</div>
</div>
<div id="quiz-results" class="hidden text-center py-8 space-y-4">
<div class="inline-flex items-center justify-center w-16 h-16 bg-teal-100 text-teal-600 rounded-full text-2xl mb-2">
<i class="fa-solid fa-trophy"></i>
</div>
<h3 class="text-xl font-bold text-slate-900">Квизот е успешно завршен!</h3>
<p class="text-3xl font-extrabold text-teal-600" id="final-score">0 / 15</p>
<button onclick="restartQuiz()" class="bg-teal-600 hover:bg-teal-700 text-white font-semibold px-5 py-2 rounded-xl text-xs">Започни одново</button>
</div>
</div>
</div>
<!-- ================= ТАБ 6: ПИШУВАЊЕ СО ФРАЗИ КОИ СЕ КЛИКААТ ================= -->
<div id="content-pisuvanje" class="tab-content hidden space-y-6">
<div class="bg-white rounded-2xl shadow-sm border border-slate-100 p-6">
<h2 class="text-xl font-bold text-slate-900 mb-2">Состави го твојот текст! ✍️</h2>
<p class="text-sm text-slate-600 mb-6">Одговори на прашањата на германски. Можеш да кликнеш на понудените фрази под нив за да се внесат веднаш.</p>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
<div class="p-4 bg-teal-50/50 rounded-xl border border-teal-100 text-xs">
<p class="font-bold text-teal-800 mb-1">Frage 1: Wann warst du das letzte Mal in einem Geschäft oder Shoppingcenter?</p>
<p class="text-slate-500">(Кога беше последен пат во продавница / центар?)</p>
</div>
<div class="p-4 bg-teal-50/50 rounded-xl border border-teal-100 text-xs">
<p class="font-bold text-teal-800 mb-1">Frage 2: Was wolltest du dort kaufen und hast du es gefunden?</p>
<p class="text-slate-500">(Што сакаше да купиш таму и дали го најде тоа?)</p>
</div>
</div>
<div class="bg-slate-50 p-4 rounded-xl border border-slate-200 mb-6">
<h3 class="text-xs font-bold text-slate-500 uppercase tracking-wider mb-3">Помошни фрази (кликни за да вметнеш):</h3>
<div class="flex flex-wrap gap-2">
<button onclick="insertPhrase('Gestern war ich in der Stadt.')" class="bg-teal-100 hover:bg-teal-200 text-teal-900 px-3 py-2 rounded-lg text-xs font-semibold border border-teal-200 transition-colors">
🏬 Gestern war ich in der Stadt.
</button>
<button onclick="insertPhrase('Ich bin in ein großes Shoppingcenter gegangen.')" class="bg-emerald-100 hover:bg-emerald-200 text-emerald-900 px-3 py-2 rounded-lg text-xs font-semibold border border-emerald-200 transition-colors">
🚶 Ich bin in ein großes Shoppingcenter gegangen.
</button>
<button onclick="insertPhrase('Ich wollte mir Kleidung ansehen.')" class="bg-amber-100 hover:bg-amber-200 text-amber-900 px-3 py-2 rounded-lg text-xs font-semibold border border-amber-200 transition-colors">
👕 Ich wollte mir Kleidung ansehen.
</button>
<button onclick="insertPhrase('Am Ende habe ich mir eine Pflanze gekauft.')" class="bg-sky-100 hover:bg-sky-200 text-sky-900 px-3 py-2 rounded-lg text-xs font-semibold border border-sky-200 transition-colors">
🌿 Am Ende habe ich mir eine Pflanze gekauft.
</button>
</div>
</div>
<div class="space-y-2">
<div class="flex justify-between items-center">
<label class="text-xs font-bold text-slate-500 uppercase">Поле за пишување:</label>
<button onclick="clearTextarea()" class="text-xs text-rose-600 hover:underline flex items-center gap-1">
<i class="fa-solid fa-trash-can"></i> Избриши сè
</button>
</div>
<textarea id="writing-area" rows="6" class="w-full p-4 border border-slate-200 rounded-xl text-slate-800 bg-white font-medium text-base focus:ring-2 focus:ring-teal-500 focus:border-transparent outline-none shadow-inner" placeholder="Кликни на фразите за полесно да ја составиш твојата кратка приказна..."></textarea>
</div>
</div>
</div>
</main>
<script>
// Менаџирање на јазичињата (Tabs)
function switchTab(tabId) {
document.querySelectorAll('.tab-content').forEach(el => el.classList.replace('block', 'hidden'));
document.getElementById('content-' + tabId).classList.replace('hidden', 'block');
document.querySelectorAll('.tab-btn').forEach(btn => {
btn.className = "tab-btn px-4 py-2.5 rounded-lg text-sm font-semibold transition-all duration-200 flex items-center gap-2 bg-white text-slate-600 hover:bg-slate-100";
});
document.getElementById('tab-' + tabId).className = "tab-btn px-4 py-2.5 rounded-lg text-sm font-semibold transition-all duration-200 flex items-center gap-2 bg-teal-600 text-white shadow-sm";
}
// Web Speech API за изговор на германски
function speakText(text, event) {
if (event) event.stopPropagation();
if ('speechSynthesis' in window) {
window.speechSynthesis.cancel();
const utterance = new SpeechSynthesisUtterance(text);
utterance.lang = 'de-DE';
utterance.rate = 0.82; // зајансен и појасен говор
window.speechSynthesis.speak(utterance);
}
}
function playFullText() {
const text = document.getElementById('german-text').innerText;
speakText(text);
}
function flipCard(cardDiv) {
const innerCard = cardDiv.querySelector('.transform-style-3d');
innerCard.style.transform = innerCard.style.transform === 'rotateY(180deg)' ? 'rotateY(0deg)' : 'rotateY(180deg)';
}
// Автоматско кликање и додавање фрази во пишувањето
function insertPhrase(phrase) {
const textarea = document.getElementById('writing-area');
textarea.value = textarea.value === "" ? phrase : textarea.value + " " + phrase;
textarea.focus();
}
function clearTextarea() {
document.getElementById('writing-area').value = "";
}
// ИГРА: Подредување зборови (Satzpuzzle)
const gameData = [
{ macedonian: "Јас отидов вчера во еден голем шопинг центар.", correct: ["Ich", "bin", "gestern", "in", "ein", "großes", "Shoppingcenter", "gegangen."], pool: ["Shoppingcenter", "bin", "ein", "gegangen.", "Ich", "gestern", "großes", "in", "haben"] },
{ macedonian: "Испив едно кафе, бидејќи имав многу работа дома.", correct: ["Ich", "habe", "einen", "Kaffee", "getrunken,", "weil", "ich", "viel", "Arbeit", "zu", "Hause", "hatte."], pool: ["weil", "Kaffee", "ich", "Arbeit", "Ich", "getrunken,", "habe", "hatte.", "viel", "einen", "zu", "Hause"] }
];
let currentGameIndex = 0;
let selectedWords = [];
function initGame() {
if(currentGameIndex >= gameData.length) {
document.getElementById('content-igra').innerHTML = "<div class='bg-white p-8 rounded-2xl shadow-sm text-center font-bold text-xl text-teal-600'>🎉 Одлично! Успешно ја комплетираше играта за подредување зборови.</div>";
return;
}
const current = gameData[currentGameIndex];
document.getElementById('game-progress-text').innerText = `Реченица ${currentGameIndex + 1} од ${gameData.length}`;
document.getElementById('game-translation').innerText = current.macedonian;
document.getElementById('game-answer-zone').innerHTML = '';
document.getElementById('game-feedback').className = "hidden mt-6 p-4 rounded-xl border text-center";
document.getElementById('game-next-btn').classList.add('hidden');
document.getElementById('game-check-btn').classList.remove('hidden');
selectedWords = [];
const poolZone = document.getElementById('game-words-pool');
poolZone.innerHTML = '';
current.pool.forEach(word => {
const btn = document.createElement('button');
btn.className = "bg-white text-slate-800 px-3 py-1.5 rounded-lg text-sm border border-slate-200 shadow-sm transition-all";
btn.innerText = word;
btn.onclick = () => {
if (btn.classList.contains('opacity-40')) return;
btn.classList.add('opacity-40');
selectedWords.push(word);
const abtn = document.createElement('button');
abtn.className = "bg-teal-50 text-teal-700 px-3 py-1.5 rounded-lg text-sm font-semibold border border-teal-200";
abtn.innerText = word;
abtn.onclick = () => {
abtn.remove();
btn.classList.remove('opacity-40');
selectedWords = selectedWords.filter(w => w !== word);
};
document.getElementById('game-answer-zone').appendChild(abtn);
};
poolZone.appendChild(btn);
});
}
function resetGameSentence() { initGame(); }
function checkGameSentence() {
const current = gameData[currentGameIndex];
const isCorrect = JSON.stringify(selectedWords) === JSON.stringify(current.correct);
const feedback = document.getElementById('game-feedback');
feedback.classList.remove('hidden');
if(isCorrect) {
feedback.className = "mt-6 p-4 rounded-xl bg-emerald-50 text-emerald-800 font-semibold";
feedback.innerText = "Точно така! Одличен распоред на глаголот на крајот.";
document.getElementById('game-check-btn').classList.add('hidden');
document.getElementById('game-next-btn').classList.remove('hidden');
speakText(current.correct.join(' '));
} else {
feedback.className = "mt-6 p-4 rounded-xl bg-rose-50 text-rose-800 font-semibold";
feedback.innerText = "Грешка. Размисли за формата на глаголот во минато време или позицијата со 'weil'!";
}
}
function nextGameSentence() { currentGameIndex++; initGame(); }
// КВИЗ СО ТОЧНО 15 ПРАШАЊА
const quizData = [
{ q: "1. Ich ___ gestern in die Stadt gegangen.", o: ["habe", "bin", "war"], c: 1 },
{ q: "2. Gestern ___ ich in der Stadt. (минато од sein)", o: ["bin", "war", "habe"], c: 1 },
{ q: "3. Ich bin in ___ großes Shoppingcenter gegangen. (das Center - Akkusativ)", o: ["ein", "einen", "eine"], c: 0 },
{ q: "4. Ich wollte mir Kleidung ___.", o: ["gesehen", "ansehen", "sehen"], c: 1 },
{ q: "5. Sie ___ viele Produkte. (тие имаа)", o: ["hatten", "hatte", "haben"], c: 0 },
{ q: "6. Am Ende habe ich mir eine Pflanze ___.", o: ["gekaufen", "kaufen", "gekauft"], c: 2 },
{ q: "7. Sie war ___ teuer, aber sehr schön. (исто така)", o: ["also", "auch", "aber"], c: 1 },
{ q: "8. Ich habe mir ___ Anthurie gekauft. (die Anthurie - Akkusativ)", o: ["eine", "einen", "ein"], c: 0 },
{ q: "9. Die Pflanze ___ viele große rote Blüten.", o: ["ist", "hat", "gibt"], c: 1 },
{ q: "10. Ich habe den perfekten Platz ___ einer Fensterbank gefunden.", o: ["in", "zu", "auf"], c: 2 },
{ q: "11. Es ___ gestern viele Menschen im Center. (минато од es gibt)", o: ["gab", "gibt", "war"], c: 0 },
{ q: "12. Ich habe ___ Kaffee getrunken. (der Kaffee - Akkusativ)", o: ["ein", "einen", "eine"], c: 1 },
{ q: "13. Ich bin тогаш ___ Hause gekommen. (кон дома)", o: ["zu", "nach", "im"], c: 1 },
{ q: "14. Јас имав многу работа ___ Hause. (веќе таму)", o: ["nach", "zu", "in"], c: 1 },
{ q: "15. ...weil ich viel Arbeit ___ . (глагол на крај)", o: ["hatten", "hatte", "habe"], c: 1 }
];
let currentQuizIndex = 0;
let score = 0;
function initQuiz() {
if(currentQuizIndex >= quizData.length) {
document.getElementById('quiz-question-container').classList.add('hidden');
document.getElementById('quiz-results').classList.remove('hidden');
document.getElementById('final-score').innerText = `${score} од ${quizData.length} точни одговори`;
return;
}
const current = quizData[currentQuizIndex];
document.getElementById('question-number').innerText = `Задача ${currentQuizIndex + 1} од ${quizData.length}`;
document.getElementById('question-text').innerText = current.q;
document.getElementById('quiz-score').innerText = `${score} / ${quizData.length}`;
const optionsZone = document.getElementById('quiz-options');
optionsZone.innerHTML = '';
document.getElementById('quiz-feedback').className = "hidden p-4 rounded-xl border text-sm font-medium";
document.getElementById('next-btn').classList.add('hidden');
current.o.forEach((opt, idx) => {
const btn = document.createElement('button');
btn.className = "w-full text-left p-3 rounded-xl border border-slate-200 text-sm font-medium hover:bg-slate-50 transition-colors";
btn.innerText = opt;
btn.onclick = () => {
document.querySelectorAll('#quiz-options button').forEach(b => b.disabled = true);
document.getElementById('next-btn').classList.remove('hidden');
const feedback = document.getElementById('quiz-feedback');
feedback.classList.remove('hidden');
if(idx === current.c) {
btn.className = "w-full text-left p-3 rounded-xl bg-emerald-50 text-emerald-800 font-bold border-emerald-200";
feedback.className = "p-4 rounded-xl bg-emerald-50 text-emerald-800 border-emerald-100 text-sm font-semibold";
feedback.innerText = "Точно! Одличен избор.";
score++;
} else {
btn.className = "w-full text-left p-3 rounded-xl bg-rose-50 text-rose-800 font-bold border-rose-200";
feedback.className = "p-4 rounded-xl bg-rose-50 text-rose-800 border-rose-100 text-sm font-semibold";
feedback.innerText = `Неточно. Точниот одговор е: ${current.o[current.c]}`;
}
document.getElementById('quiz-score').innerText = `${score} / ${quizData.length}`;
};
optionsZone.appendChild(btn);
});
}
function nextQuestion() { currentQuizIndex++; initQuiz(); }
function restartQuiz() {
currentQuizIndex = 0;
score = 0;
document.getElementById('quiz-question-container').classList.remove('hidden');
document.getElementById('quiz-results').classList.add('hidden');
initQuiz();
}
// Користиме софистициран начин на стартување кој не зависи исклучиво од window.onload
function startApp() {
initGame();
initQuiz();
}
if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", startApp);
} else {
startApp();
}
</script>
</body>
</html><div class="blogger-post-footer">www.bloglines.com</div>Anica Petkoskahttp://www.blogger.com/profile/12340858614356870735noreply@blogger.comtag:blogger.com,1999:blog-26523155.post-76478626693547333772026-05-18T10:15:03.824+02:002026-05-18T10:34:05.045+02:00Лекција по германски: Пролет и Роденден<!DOCTYPE html>
<html lang="mk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Лекција по германски: Пролет и Роденден</title>
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- FontAwesome за икони -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght=300;400;500;600;700;800&display=swap');
body {
font-family: 'Plus Jakarta Sans', sans-serif;
}
.perspective-1000 {
perspective: 1000px;
}
.transform-style-3d {
transform-style: preserve-3d;
}
.backface-hidden {
backface-visibility: hidden;
}
.rotate-y-180 {
transform: rotateY(180deg);
}
</style>
</head>
<body class="bg-slate-50 text-slate-800 min-h-screen pb-12">
<!-- Хедер на блогот -->
<header class="bg-gradient-to-r from-emerald-500 to-teal-600 text-white shadow-md py-8 px-4 text-center relative overflow-hidden">
<div class="absolute inset-0 opacity-10 bg-[radial-gradient(#fff_1px,transparent_1px)] [background-size:16px_16px]"></div>
<div class="max-w-4xl mx-auto relative z-10">
<span class="bg-emerald-400/30 text-emerald-100 text-xs font-bold uppercase tracking-wider px-3 py-1 rounded-full">Интерактивна Лекција</span>
<h1 class="text-3xl md:text-4xl font-extrabold mt-3 tracking-tight">Mein Geburtstag im Frühling 🌸</h1>
<p class="text-emerald-100 mt-2 text-sm md:text-base max-w-xl mx-auto">Научи германски преку разговор: годишни времиња, родендени, идно време и градење реченици.</p>
</div>
</header>
<!-- Главен контејнер -->
<main class="max-w-4xl mx-auto px-4 mt-8">
<!-- Навигација со јазичиња (Tabs) - Сега со 6 опции вклучувајќи ја и играта -->
<div class="flex flex-wrap gap-2 border-b border-slate-200 pb-3 mb-6 justify-center md:justify-start">
<button onclick="switchTab('lesen')" id="tab-lesen" class="tab-btn px-4 py-2.5 rounded-lg text-sm font-semibold transition-all duration-200 flex items-center gap-2 bg-emerald-600 text-white shadow-sm">
<i class="fa-solid fa-book-open"></i> Читај & Слушај
</button>
<button onclick="switchTab('gramatika')" id="tab-gramatika" class="tab-btn px-4 py-2.5 rounded-lg text-sm font-semibold transition-all duration-200 flex items-center gap-2 bg-white text-slate-600 hover:bg-slate-100">
<i class="fa-solid fa-graduation-cap"></i> Граматика
</button>
<button onclick="switchTab('frazi')" id="tab-frazi" class="tab-btn px-4 py-2.5 rounded-lg text-sm font-semibold transition-all duration-200 flex items-center gap-2 bg-white text-slate-600 hover:bg-slate-100">
<i class="fa-solid fa-language"></i> Фрази
</button>
<button onclick="switchTab('igra')" id="tab-igra" class="tab-btn px-4 py-2.5 rounded-lg text-sm font-semibold transition-all duration-200 flex items-center gap-2 bg-white text-slate-600 hover:bg-slate-100">
<i class="fa-solid fa-gamepad"></i> Игра со зборови
</button>
<button onclick="switchTab('kviz')" id="tab-kviz" class="tab-btn px-4 py-2.5 rounded-lg text-sm font-semibold transition-all duration-200 flex items-center gap-2 bg-white text-slate-600 hover:bg-slate-100">
<i class="fa-solid fa-circle-question"></i> Квиз (10 Задачи)
</button>
<button onclick="switchTab('pisuvanje')" id="tab-pisuvanje" class="tab-btn px-4 py-2.5 rounded-lg text-sm font-semibold transition-all duration-200 flex items-center gap-2 bg-white text-slate-600 hover:bg-slate-100">
<i class="fa-solid fa-pen-fancy"></i> Вежба за пишување
</button>
</div>
<!-- ================= ТАБ 1: ЧИТАЈ И СЛУШАЈ ================= -->
<div id="content-lesen" class="tab-content block space-y-6">
<div class="bg-white rounded-2xl shadow-sm border border-slate-100 p-6 md:p-8">
<div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 mb-6 pb-4 border-b border-slate-100">
<div>
<h2 class="text-xl font-bold text-slate-900">Пролетна приказна (Frühlingsgeschichte)</h2>
<p class="text-xs text-slate-500 mt-1">Прочитај го текстот на германски и кликни на звучникот за да ја слушнеш правилната синтакса.</p>
</div>
<button onclick="playFullText()" class="flex items-center gap-2 bg-emerald-50 text-emerald-700 hover:bg-emerald-100 px-4 py-2 rounded-xl text-sm font-medium transition-colors">
<i class="fa-solid fa-volume-high"></i> Слушај го целиот текст
</button>
</div>
<!-- Германски текст -->
<div class="bg-slate-50 rounded-xl p-5 md:p-6 border-l-4 border-emerald-500 relative mb-6">
<p id="german-text" class="text-lg text-slate-800 leading-relaxed font-medium">
Die Jahreszeiten sind der Frühling, der Sommer, der Herbst und der Winter.
Ich habe im Frühling Geburtstag und er ist meine Lieblingsjahreszeit.
Die Tage werden länger, die Nächte werden kürzer und es gibt many Blumen.
Die Vögel sind sehr glücklich. Es gibt viel Essen.
Ich werde eine Schokoladentorte kaufen.
Die Enkelkinder werden die Kerzen ausblasen und das Lied „Happy Birthday“ für mich singen.
Wir werden viele Fotos machen.
</p>
</div>
<!-- Превод на македонски -->
<div class="bg-emerald-50/40 rounded-xl p-5 md:p-6 border-l-4 border-teal-400">
<h3 class="text-xs font-bold text-teal-800 uppercase tracking-wider mb-2">Превод на македонски</h3>
<p class="text-slate-700 leading-relaxed">
Годишните времиња се пролетта, летото, есента и зимата.
Јас имам роденден во пролет и таа е моето омилено годишно време.
Деновите стануваат подолги, ноќите стануваат пократки и има многу цвеќиња.
Птиците се многу среќни. Има многу храна.
Јас ќе купам чоколадна торта.
Внуците ќе ги дувнат свеќичките и ќе ја испеат песната „Happy Birthday“ за мене.
Ние ќе направиме многу слики (фотографии).
</p>
</div>
</div>
</div>
<!-- ================= ТАБ 2: ГРАМАТИКА ================= -->
<div id="content-gramatika" class="tab-content hidden space-y-6">
<!-- Идно време во германскиот јазик -->
<div class="bg-white rounded-2xl shadow-sm border border-slate-100 p-6">
<h2 class="text-xl font-bold text-slate-900 mb-2 flex items-center gap-2">
<span class="p-1.5 bg-blue-100 text-blue-600 rounded-lg"><i class="fa-solid fa-clock"></i></span>
Идно време (Futur I) со глаголот <span class="text-blue-600 font-mono">werden</span>
</h2>
<p class="text-sm text-slate-600 mb-4">
Во германскиот јазик, идно време градиме многу едноставно со помош на помошниот глагол <strong>werden</strong> (во точна форма) на втора позиција и <strong>главниот глагол во инфинитив</strong> на самиот крај на реченицата.
</p>
<div class="bg-blue-50/40 p-4 rounded-xl border border-blue-100 mb-4">
<p class="text-sm font-semibold text-blue-900 text-center">Формула: ПРЕДМЕТ + werden + ... + ИНФИНИТИВ НА КРАЈОТ</p>
</div>
<h3 class="font-bold text-slate-800 mb-2 text-sm">Промена на глаголот <span class="font-mono text-emerald-600">werden</span> по лица:</h3>
<div class="grid grid-cols-2 md:grid-cols-3 gap-2 text-sm mb-6">
<div class="bg-slate-50 p-2.5 rounded-lg border border-slate-100"><strong>ich werde</strong> (јас ќе бидам/направам)</div>
<div class="bg-slate-50 p-2.5 rounded-lg border border-slate-100"><strong>du wirst</strong> (ти ќе)</div>
<div class="bg-slate-50 p-2.5 rounded-lg border border-slate-100"><strong>er/sie/es wird</strong> (тој/таа/тоа ќе)</div>
<div class="bg-slate-50 p-2.5 rounded-lg border border-slate-100"><strong>wir werden</strong> (ние ќе)</div>
<div class="bg-slate-50 p-2.5 rounded-lg border border-slate-100"><strong>ihr werdet</strong> (вие ќе)</div>
<div class="bg-slate-50 p-2.5 rounded-lg border border-slate-100"><strong>sie/Sie werden</strong> (тие/Вие ќе)</div>
</div>
<div class="border-t border-slate-100 pt-4">
<h3 class="font-bold text-slate-800 mb-2 text-sm">Идно време за глаголот <span class="font-mono text-indigo-600">sein (сум)</span>:</h3>
<p class="text-sm text-slate-600 mb-2">Наместо „јас сум“, сакаме да кажеме „јас ќе бидам“:</p>
<ul class="list-disc list-inside space-y-1 text-sm text-slate-700 bg-indigo-50/30 p-3 rounded-lg border border-indigo-100">
<li>Ich werde glücklich <strong>sein</strong>. (Јас ќе бидам среќен/среќна.)</li>
<li>Das Wetter wird schön <strong>sein</strong>. (Времето ќе биде убаво.)</li>
<li>Wir werden zusammen <strong>sein</strong>. (Ние ќе бидеме заедно.)</li>
</ul>
</div>
</div>
<!-- Годишни времиња и именки -->
<div class="bg-white rounded-2xl shadow-sm border border-slate-100 p-6">
<h2 class="text-xl font-bold text-slate-900 mb-4 flex items-center gap-2">
<span class="p-1.5 bg-amber-100 text-amber-600 rounded-lg"><i class="fa-solid fa-leaf"></i></span>
Годишни времиња & Еднина и Множина
</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<h3 class="font-bold text-slate-800 mb-2 text-sm">Годишни времиња (сите се од машки род - der):</h3>
<div class="space-y-2">
<div class="flex justify-between items-center bg-slate-50 p-2 rounded-lg text-sm border border-slate-100">
<span>🌸 <strong>der Frühling</strong></span> <span class="text-xs text-slate-500">пролет</span>
</div>
<div class="flex justify-between items-center bg-slate-50 p-2 rounded-lg text-sm border border-slate-100">
<span>☀️ <strong>der Sommer</strong></span> <span class="text-xs text-slate-500">лето</span>
</div>
<div class="flex justify-between items-center bg-slate-50 p-2 rounded-lg text-sm border border-slate-100">
<span>🍂 <strong>der Herbst</strong></span> <span class="text-xs text-slate-500">есен</span>
</div>
<div class="flex justify-between items-center bg-slate-50 p-2 rounded-lg text-sm border border-slate-100">
<span>❄️ <strong>der Winter</strong></span> <span class="text-xs text-slate-500">зима</span>
</div>
</div>
</div>
<div>
<h3 class="font-bold text-slate-800 mb-2 text-sm">Именки од разговорот (Еднина vs Множина):</h3>
<div class="space-y-2">
<div class="flex justify-between items-center bg-slate-50 p-2 rounded-lg text-sm border border-slate-100">
<span>🗓️ der Tag <i class="fa-solid fa-arrow-right mx-2 text-slate-400 text-xs"></i> <strong>die Tage</strong></span> <span class="text-xs text-slate-500">денови</span>
</div>
<div class="flex justify-between items-center bg-slate-50 p-2 rounded-lg text-sm border border-slate-100">
<span>🌙 die Nacht <i class="fa-solid fa-arrow-right mx-2 text-slate-400 text-xs"></i> <strong>die Nächte</strong></span> <span class="text-xs text-slate-500">ноќи</span>
</div>
<div class="flex justify-between items-center bg-slate-50 p-2 rounded-lg text-sm border border-slate-100">
<span>🐦 der Vogel <i class="fa-solid fa-arrow-right mx-2 text-slate-400 text-xs"></i> <strong>die Vögel</strong></span> <span class="text-xs text-slate-500">птици</span>
</div>
<div class="flex justify-between items-center bg-slate-50 p-2 rounded-lg text-sm border border-slate-100">
<span>🕯️ die Kerze <i class="fa-solid fa-arrow-right mx-2 text-slate-400 text-xs"></i> <strong>die Kerzen</strong></span> <span class="text-xs text-slate-500">свеќи</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- ================= ТАБ 3: ИНТЕРАКТИВНИ ФРАЗИ ================= -->
<div id="content-frazi" class="tab-content hidden space-y-6">
<div class="bg-white rounded-2xl shadow-sm border border-slate-100 p-6">
<h2 class="text-xl font-bold text-slate-900 mb-1">Кликни за да преведеш на Германски!</h2>
<p class="text-xs text-slate-500 mb-6">Слушни како се изговара, потоа кликни на картичката за да ја видиш точната германска верзија.</p>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<!-- Фраза 1 -->
<div class="perspective-1000 h-32 cursor-pointer" onclick="flipCard(this)">
<div class="transform-style-3d transition-transform duration-500 relative w-full h-full rounded-xl shadow-sm border border-slate-200">
<div class="backface-hidden absolute inset-0 bg-gradient-to-br from-emerald-50 to-white p-4 flex flex-col justify-between rounded-xl">
<span class="text-xs font-bold text-emerald-600 uppercase tracking-wide">Македонски</span>
<p class="text-base font-semibold text-slate-800">„Како се честита роденден?“</p>
<span class="text-xs text-slate-400 flex items-center gap-1"><i class="fa-solid fa-rotate"></i> Кликни за превод</span>
</div>
<div class="backface-hidden rotate-y-180 absolute inset-0 bg-slate-900 text-white p-4 flex flex-col justify-between rounded-xl">
<span class="text-xs font-bold text-emerald-400 uppercase tracking-wide">Deutsch</span>
<p class="text-md font-bold text-emerald-300">„Alles Gute zum Geburtstag!“</p>
<button onclick="speakText('Alles Gute zum Geburtstag!', event)" class="self-end bg-slate-800 hover:bg-slate-700 text-slate-300 p-2 rounded-lg text-xs flex items-center gap-1.5 transition-colors">
<i class="fa-solid fa-volume-high text-emerald-400"></i> Слушај изговор
</button>
</div>
</div>
</div>
<!-- Фраза 2 -->
<div class="perspective-1000 h-32 cursor-pointer" onclick="flipCard(this)">
<div class="transform-style-3d transition-transform duration-500 relative w-full h-full rounded-xl shadow-sm border border-slate-200">
<div class="backface-hidden absolute inset-0 bg-gradient-to-br from-emerald-50 to-white p-4 flex flex-col justify-between rounded-xl">
<span class="text-xs font-bold text-emerald-600 uppercase tracking-wide">Македонски</span>
<p class="text-base font-semibold text-slate-800">„Имам роденден во пролет.“</p>
<span class="text-xs text-slate-400 flex items-center gap-1"><i class="fa-solid fa-rotate"></i> Кликни за превод</span>
</div>
<div class="backface-hidden rotate-y-180 absolute inset-0 bg-slate-900 text-white p-4 flex flex-col justify-between rounded-xl">
<span class="text-xs font-bold text-emerald-400 uppercase tracking-wide">Deutsch</span>
<p class="text-md font-bold text-emerald-300">„Ich habe im Frühling Geburtstag.“</p>
<button onclick="speakText('Ich habe im Frühling Geburtstag.', event)" class="self-end bg-slate-800 hover:bg-slate-700 text-slate-300 p-2 rounded-lg text-xs flex items-center gap-1.5 transition-colors">
<i class="fa-solid fa-volume-high text-emerald-400"></i> Слушај изговор
</button>
</div>
</div>
</div>
<!-- Фраза 3 -->
<div class="perspective-1000 h-32 cursor-pointer" onclick="flipCard(this)">
<div class="transform-style-3d transition-transform duration-500 relative w-full h-full rounded-xl shadow-sm border border-slate-200">
<div class="backface-hidden absolute inset-0 bg-gradient-to-br from-emerald-50 to-white p-4 flex flex-col justify-between rounded-xl">
<span class="text-xs font-bold text-emerald-600 uppercase tracking-wide">Македонски</span>
<p class="text-base font-semibold text-slate-800">„Ќе купам голема торта за мојата фамилија.“</p>
<span class="text-xs text-slate-400 flex items-center gap-1"><i class="fa-solid fa-rotate"></i> Кликни за превод</span>
</div>
<div class="backface-hidden rotate-y-180 absolute inset-0 bg-slate-900 text-white p-4 flex flex-col justify-between rounded-xl">
<span class="text-xs font-bold text-emerald-400 uppercase tracking-wide">Deutsch</span>
<p class="text-md font-bold text-emerald-300">„Ich werde eine große Torte für meine Familie kaufen.“</p>
<button onclick="speakText('Ich werde eine große Torte für meine Familie kaufen.', event)" class="self-end bg-slate-800 hover:bg-slate-700 text-slate-300 p-2 rounded-lg text-xs flex items-center gap-1.5 transition-colors">
<i class="fa-solid fa-volume-high text-emerald-400"></i> Слушај изговор
</button>
</div>
</div>
</div>
<!-- Фраза 4 -->
<div class="perspective-1000 h-32 cursor-pointer" onclick="flipCard(this)">
<div class="transform-style-3d transition-transform duration-500 relative w-full h-full rounded-xl shadow-sm border border-slate-200">
<div class="backface-hidden absolute inset-0 bg-gradient-to-br from-emerald-50 to-white p-4 flex flex-col justify-between rounded-xl">
<span class="text-xs font-bold text-emerald-600 uppercase tracking-wide">Македонски</span>
<p class="text-base font-semibold text-slate-800">„Омилено годишно време.“</p>
<span class="text-xs text-slate-400 flex items-center gap-1"><i class="fa-solid fa-rotate"></i> Кликни за превод</span>
</div>
<div class="backface-hidden rotate-y-180 absolute inset-0 bg-slate-900 text-white p-4 flex flex-col justify-between rounded-xl">
<span class="text-xs font-bold text-emerald-400 uppercase tracking-wide">Deutsch</span>
<p class="text-md font-bold text-emerald-300">„Die Lieblingsjahreszeit“</p>
<button onclick="speakText('Die Lieblingsjahreszeit', event)" class="self-end bg-slate-800 hover:bg-slate-700 text-slate-300 p-2 rounded-lg text-xs flex items-center gap-1.5 transition-colors">
<i class="fa-solid fa-volume-high text-emerald-400"></i> Слушај изговор
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- ================= ТАБ: ИГРА СО ЗБОРОВИ (НОВО!) ================= -->
<div id="content-igra" class="tab-content hidden space-y-6">
<div class="bg-white rounded-2xl shadow-sm border border-slate-100 p-6">
<div class="flex flex-col sm:flex-row justify-between items-start sm:items-center pb-4 border-b border-slate-100 mb-6 gap-2">
<div>
<h2 class="text-xl font-bold text-slate-900 flex items-center gap-2">
<span class="p-1.5 bg-indigo-100 text-indigo-600 rounded-lg"><i class="fa-solid fa-puzzle-piece"></i></span>
Подреди ја реченицата! (Satzpuzzle)
</h2>
<p class="text-xs text-slate-500 mt-1">Кликни на зборовите по правилен редослед за да го изградиш точниот превод.</p>
</div>
<div class="bg-indigo-50 px-3 py-1.5 rounded-xl border border-indigo-100 self-stretch sm:self-auto text-center">
<span class="text-[10px] text-slate-500 block uppercase font-bold">Напредок</span>
<strong id="game-progress-text" class="text-indigo-700 text-base">Реченица 1 од 5</strong>
</div>
</div>
<!-- Прашање на македонски -->
<div class="p-4 bg-indigo-50/40 rounded-xl border border-indigo-100/50 text-center mb-6">
<span class="text-xs font-bold text-indigo-800 uppercase tracking-wide block mb-1">Македонски реченица:</span>
<p id="game-translation" class="text-lg font-bold text-slate-800">Јас имам роденден во пролет.</p>
</div>
<!-- Област за наредени зборови -->
<div class="space-y-2 mb-6">
<span class="text-xs font-semibold text-slate-500">Твојот одговор:</span>
<div id="game-answer-zone" class="w-full min-h-16 p-3 rounded-xl border-2 border-dashed border-slate-200 bg-slate-50/50 flex flex-wrap gap-2 items-center justify-center transition-colors">
<!-- Тука се редат кликнатите зборови -->
</div>
</div>
<!-- Област со расфрлани зборови -->
<div class="space-y-2 mb-8">
<span class="text-xs font-semibold text-slate-500">Зборови на располагање:</span>
<div id="game-words-pool" class="w-full p-4 rounded-xl bg-slate-100/70 border border-slate-200/50 flex flex-wrap gap-2 justify-center">
<!-- Германски расфрлани зборови -->
</div>
</div>
<!-- Копчиња за управување со играта -->
<div class="flex flex-wrap gap-3 justify-between items-center">
<button onclick="resetGameSentence()" class="px-4 py-2.5 bg-slate-100 hover:bg-slate-200 text-slate-700 text-sm font-semibold rounded-xl transition-colors">
<i class="fa-solid fa-arrow-rotate-left mr-1"></i> Ресетирај
</button>
<div class="flex gap-2">
<button id="game-check-btn" onclick="checkGameSentence()" class="px-6 py-2.5 bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-semibold rounded-xl transition-colors shadow-sm">
Провери одговор
</button>
<button id="game-next-btn" onclick="nextGameSentence()" class="hidden px-6 py-2.5 bg-slate-900 hover:bg-slate-800 text-white text-sm font-semibold rounded-xl transition-colors shadow-sm">
Следна реченица <i class="fa-solid fa-arrow-right ml-1"></i>
</button>
</div>
</div>
<!-- Фидбек порака за подредувањето -->
<div id="game-feedback" class="hidden mt-6 p-4 rounded-xl border transition-all duration-200 text-center">
<p id="game-feedback-title" class="font-bold text-base mb-1"></p>
<p id="game-feedback-subtitle" class="text-sm text-slate-600"></p>
</div>
</div>
</div>
<!-- ================= ТАБ 5: ИНТЕРАКТИВЕН КВИЗ ================= -->
<div id="content-kviz" class="tab-content hidden space-y-6">
<div class="bg-white rounded-2xl shadow-sm border border-slate-100 p-6">
<div class="flex justify-between items-center pb-4 border-b border-slate-100 mb-6">
<div>
<h2 class="text-xl font-bold text-slate-900">Интерактивен Квиз</h2>
<p class="text-xs text-slate-500">Провери го своето знаење на најчестите грешки.</p>
</div>
<div class="bg-emerald-50 px-3 py-1.5 rounded-xl border border-emerald-100 text-right">
<span class="text-xs text-slate-500 block">Поени</span>
<strong id="quiz-score" class="text-emerald-700 text-lg">0 / 10</strong>
</div>
</div>
<!-- Прогрес бар -->
<div class="w-full bg-slate-100 h-2 rounded-full mb-8 overflow-hidden">
<div id="quiz-progress" class="bg-emerald-500 h-full w-[10%] transition-all duration-300"></div>
</div>
<!-- Прашање картичка -->
<div id="quiz-question-container">
<div id="question-card" class="space-y-6">
<div class="flex items-center gap-2">
<span id="question-number" class="bg-emerald-100 text-emerald-800 text-xs font-bold px-2.5 py-1 rounded-md">Задача 1 од 10</span>
</div>
<h3 id="question-text" class="text-lg font-bold text-slate-800">Кој е точниот превод за летото (машки род)?</h3>
<!-- Опции -->
<div id="quiz-options" class="grid grid-cols-1 gap-3">
<!-- Динамички се полни со JS -->
</div>
<!-- Фидбек дел -->
<div id="quiz-feedback" class="hidden p-4 rounded-xl border transition-all duration-200">
<p id="feedback-title" class="font-bold text-sm mb-1"></p>
<p id="feedback-text" class="text-sm text-slate-600"></p>
</div>
<!-- Копче за следно прашање -->
<div class="flex justify-end pt-2">
<button id="next-btn" onclick="nextQuestion()" class="hidden bg-slate-900 hover:bg-slate-800 text-white font-semibold px-6 py-2.5 rounded-xl text-sm transition-all shadow-sm">
Следно прашање <i class="fa-solid fa-arrow-right ml-1 text-xs"></i>
</button>
</div>
</div>
</div>
<!-- Резултати на крај -->
<div id="quiz-results" class="hidden text-center py-8 space-y-4">
<div class="inline-flex items-center justify-center w-16 h-16 bg-emerald-100 text-emerald-600 rounded-full text-2xl mb-2">
<i class="fa-solid fa-trophy"></i>
</div>
<h3 class="text-2xl font-bold text-slate-900">Честитки! Го заврши квизот.</h3>
<p class="text-slate-600 max-w-sm mx-auto text-sm">Успешно ги помина сите лекции за грешките. Твојот резултат е зачуван!</p>
<p class="text-3xl font-extrabold text-emerald-600" id="final-score">0 / 10</p>
<button onclick="restartQuiz()" class="mt-4 bg-emerald-600 hover:bg-emerald-700 text-white font-semibold px-6 py-2.5 rounded-xl text-sm transition-all shadow-sm">
Обиди се повторно
</button>
</div>
</div>
</div>
<!-- ================= ТАБ 6: ВЕЖБА ЗА ПИШУВАЊЕ ================= -->
<div id="content-pisuvanje" class="tab-content hidden space-y-6">
<div class="bg-white rounded-2xl shadow-sm border border-slate-100 p-6">
<h2 class="text-xl font-bold text-slate-900 mb-2">Време е за твојот германски предизвик! ✍️</h2>
<p class="text-sm text-slate-600 mb-6">Одговори на овие две прашања за да го вежбаш наученото. Користи ги понудените помошни фрази.</p>
<!-- Прашања -->
<div class="space-y-4 mb-6">
<div class="p-4 bg-emerald-50/50 rounded-xl border border-emerald-100">
<span class="text-xs font-bold text-emerald-800 uppercase">Frage 1:</span>
<p class="text-base font-bold text-slate-800 mt-1">In welcher Jahreszeit hast du Geburtstag?</p>
<p class="text-xs text-slate-500">(Во кое годишно време е твојот роденден?)</p>
</div>
<div class="p-4 bg-emerald-50/50 rounded-xl border border-emerald-100">
<span class="text-xs font-bold text-emerald-800 uppercase">Frage 2:</span>
<p class="text-base font-bold text-slate-800 mt-1">Was ist deine Lieblingsjahreszeit und warum?</p>
<p class="text-xs text-slate-500">(Кое е твоето омилено годишно време и зошто?)</p>
</div>
</div>
<!-- Помошни фрази за кликање -->
<div class="mb-6">
<h3 class="font-bold text-xs text-slate-500 uppercase tracking-wide mb-3">Корисни фрази (Кликни за да ги копираш во твојот одговор):</h3>
<div class="flex flex-wrap gap-2">
<button onclick="insertPhrase('Ich habe im ... Geburtstag.')" class="bg-slate-100 hover:bg-slate-200 text-slate-700 px-3 py-1.5 rounded-lg text-xs font-medium transition-colors">
Ich habe im ... Geburtstag.
</button>
<button onclick="insertPhrase('Meine Lieblingsjahreszeit ist ...')" class="bg-slate-100 hover:bg-slate-200 text-slate-700 px-3 py-1.5 rounded-lg text-xs font-medium transition-colors">
Meine Lieblingsjahreszeit ist ...
</button>
<button onclick="insertPhrase('weil es warm ist')" class="bg-slate-100 hover:bg-slate-200 text-slate-700 px-3 py-1.5 rounded-lg text-xs font-medium transition-colors">
... weil es warm ist (бидејќи е топло)
</button>
<button onclick="insertPhrase('weil alles blüht')" class="bg-slate-100 hover:bg-slate-200 text-slate-700 px-3 py-1.5 rounded-lg text-xs font-medium transition-colors">
... weil alles blüht (бидејќи сè цвета)
</button>
</div>
</div>
<!-- Текст ареа за одговор -->
<div class="space-y-3">
<label for="student-answer" class="block text-sm font-semibold text-slate-800">Твојот одговор на германски:</label>
<textarea id="student-answer" rows="5" class="w-full p-4 rounded-xl border border-slate-200 focus:ring-2 focus:ring-emerald-500 focus:border-transparent outline-none text-slate-800 text-base" placeholder="Schreibe hier... (Напиши овде...)"></textarea>
</div>
<!-- Контроли за зачувување -->
<div class="flex items-center justify-between mt-4">
<button onclick="clearText()" class="text-slate-500 hover:text-slate-800 text-sm font-semibold transition-colors">
Избриши сè
</button>
<button onclick="saveFeedback()" class="bg-emerald-600 hover:bg-emerald-700 text-white font-semibold px-6 py-2.5 rounded-xl text-sm transition-all shadow-sm">
Објави
</button>
</div>
<div id="save-notification" class="hidden mt-4 p-3 bg-teal-100 text-teal-800 rounded-lg text-xs font-semibold text-center">
Твојот одговор е успешно објавен! 🌟
</div>
</div>
</div>
</main>
<!-- JS функции за управување со јазичиња и интеракција -->
<script>
// Префрлување на јазичиња (Tabs)
function switchTab(tabName) {
// Сокриј ги сите содржини
document.querySelectorAll('.tab-content').forEach(content => {
content.classList.replace('block', 'hidden');
});
// Тргни ги активните стилови од сите копчиња
document.querySelectorAll('.tab-btn').forEach(btn => {
btn.classList.remove('bg-emerald-600', 'text-white', 'shadow-sm');
btn.classList.add('bg-white', 'text-slate-600', 'hover:bg-slate-100');
});
// Прикажи ја активната содржина
document.getElementById('content-' + tabName).classList.replace('hidden', 'block');
// Додај активни стилови на тековното копче
const activeBtn = document.getElementById('tab-' + tabName);
activeBtn.classList.add('bg-emerald-600', 'text-white', 'shadow-sm');
activeBtn.classList.remove('bg-white', 'text-slate-600', 'hover:bg-slate-100');
// Ако ја отвори играта, иницијализирај ја
if (tabName === 'igra') {
initGame();
}
}
// Превртување на картички со фрази
function flipCard(cardWrapper) {
const innerCard = cardWrapper.querySelector('.transform-style-3d');
innerCard.classList.toggle('rotate-y-180');
}
// Вметнување фрази во пишувањето
function insertPhrase(phrase) {
const textarea = document.getElementById('student-answer');
const startPos = textarea.selectionStart;
const endPos = textarea.selectionEnd;
const text = textarea.value;
textarea.value = text.substring(0, startPos) + phrase + text.substring(endPos, text.length);
textarea.focus();
textarea.selectionStart = startPos + phrase.length;
textarea.selectionEnd = startPos + phrase.length;
}
// Бришење текст без alert
function clearText() {
// Креираме убав HTML confirmation дел наместо alert
const check = confirm('Дали си сигурен дека сакаш да го избришеш твојот одговор?');
if (check) {
document.getElementById('student-answer').value = '';
}
}
// Зачувување одговор во локална меморија
function saveFeedback() {
const text = document.getElementById('student-answer').value;
localStorage.setItem('germanskiodgovor', text);
const notif = document.getElementById('save-notification');
notif.classList.remove('hidden');
setTimeout(() => {
notif.classList.add('hidden');
}, 4000);
}
// ================= ПОДАТОЦИ И ЛОГИКА ЗА ИГРАТА СО ЗБОРОВИ =================
const gameData = [
{
translation: "Јас имам роденден во пролет.",
correct: ["Ich", "habe", "im", "Frühling", "Geburtstag."],
scrambled: ["Frühling", "Ich", "Geburtstag.", "im", "habe"]
},
{
translation: "Јас ќе купам чоколадна торта.",
correct: ["Ich", "werde", "eine", "Schokoladentorte", "kaufen."],
scrambled: ["kaufen.", "eine", "werde", "Schokoladentorte", "Ich"]
},
{
translation: "Деновите стануваат подолги.",
correct: ["Die", "Tage", "werden", "länger."],
scrambled: ["werden", "Die", "länger.", "Tage"]
},
{
translation: "Ние ќе направиме многу слики.",
correct: ["Wir", "werden", "viele", "Fotos", "machen."],
scrambled: ["viele", "machen.", "Fotos", "werden", "Wir"]
},
{
translation: "Внуците ќе ги дувнат свеќичките.",
correct: ["Die", "Enkelkinder", "werden", "die", "Kerzen", "ausblasen."],
scrambled: ["ausblasen.", "die", "Enkelkinder", "Kerzen", "werden", "Die"]
}
];
let currentGameIndex = 0;
let selectedWords = [];
function initGame() {
selectedWords = [];
const currentObj = gameData[currentGameIndex];
// Ажурирај текстуални информации
document.getElementById('game-progress-text').innerText = `Реченица ${currentGameIndex + 1} од ${gameData.length}`;
document.getElementById('game-translation').innerText = currentObj.translation;
// Исчисти полиња
document.getElementById('game-feedback').className = 'hidden mt-6 p-4 rounded-xl border transition-all duration-200 text-center';
document.getElementById('game-next-btn').classList.add('hidden');
document.getElementById('game-check-btn').classList.remove('hidden');
renderGameZones();
}
function renderGameZones() {
const currentObj = gameData[currentGameIndex];
// Нацртај ги избраните зборови
const answerZone = document.getElementById('game-answer-zone');
answerZone.innerHTML = '';
if (selectedWords.length === 0) {
answerZone.innerHTML = `<span class="text-sm text-slate-400 font-medium">Кликни на зборовите подолу за да ја составиш реченицата...</span>`;
} else {
selectedWords.forEach((word, idx) => {
const btn = document.createElement('button');
btn.className = "bg-indigo-600 hover:bg-indigo-700 text-white font-semibold px-4 py-2 rounded-xl text-sm transition-all shadow-sm flex items-center gap-1.5 transform hover:scale-105";
btn.innerHTML = `${word} <i class="fa-solid fa-xmark text-[10px] opacity-70"></i>`;
btn.onclick = () => removeWordFromAnswer(idx);
answerZone.appendChild(btn);
});
}
// Нацртај ги расфрланите зборови
const wordsPool = document.getElementById('game-words-pool');
wordsPool.innerHTML = '';
// Секој збор што веќе е селектиран ќе биде сокриен или оневозможен во пулот
currentObj.scrambled.forEach((word, idx) => {
// Користиме бројач за да провериме колку пати истиот збор е искористен (за реченици со повторувачки зборови)
const occurrencesInSelection = selectedWords.filter(w => w === word).length;
const occurrencesInScrambled = currentObj.scrambled.filter(w => w === word).length;
// Наоѓаме прва слободна инстанца на зборот
const instancesUsed = selectedWords.reduce((acc, curr) => (curr === word ? acc + 1 : acc), 0);
const isUsed = selectedWords.filter((w, i) => w === word).length > currentObj.correct.filter((w, i) => w === word && currentObj.correct.slice(0, selectedWords.indexOf(word) + 1).includes(word)).length;
// Поедноставна проверка: дали вкупниот број на кликнати инстанци на овој збор ја задоволува оваа позиција
const wordCountInSelected = selectedWords.filter(w => w === word).length;
const wordCountBeforeThis = currentObj.scrambled.slice(0, idx).filter(w => w === word).length;
const alreadySelected = wordCountInSelected > wordCountBeforeThis;
const btn = document.createElement('button');
if (alreadySelected) {
btn.className = "bg-slate-200 text-slate-400 font-semibold px-4 py-2 rounded-xl text-sm cursor-not-allowed opacity-50";
btn.disabled = true;
} else {
btn.className = "bg-white hover:bg-slate-50 text-slate-800 border border-slate-200 font-semibold px-4 py-2 rounded-xl text-sm transition-all shadow-sm hover:border-indigo-400 active:translate-y-0.5";
btn.disabled = false;
btn.onclick = () => selectWord(word);
}
btn.innerText = word;
wordsPool.appendChild(btn);
});
}
function selectWord(word) {
selectedWords.push(word);
renderGameZones();
}
function removeWordFromAnswer(index) {
selectedWords.splice(index, 1);
renderGameZones();
}
function resetGameSentence() {
selectedWords = [];
renderGameZones();
document.getElementById('game-feedback').className = 'hidden mt-6 p-4 rounded-xl border transition-all duration-200 text-center';
}
function checkGameSentence() {
const currentObj = gameData[currentGameIndex];
const feedbackBox = document.getElementById('game-feedback');
const feedbackTitle = document.getElementById('game-feedback-title');
const feedbackSubtitle = document.getElementById('game-feedback-subtitle');
if (selectedWords.length === 0) {
feedbackBox.className = "block mt-6 p-4 rounded-xl border bg-amber-50 border-amber-200 text-amber-900 text-center text-sm font-semibold";
feedbackTitle.innerText = "Внимание!";
feedbackSubtitle.innerText = "Ве молиме најпрво подредете ги понудените зборови.";
return;
}
// Спореди ги низите
const isCorrect = JSON.stringify(selectedWords) === JSON.stringify(currentObj.correct);
feedbackBox.classList.remove('hidden');
if (isCorrect) {
feedbackBox.className = "block mt-6 p-4 rounded-xl border bg-emerald-50 border-emerald-200 text-emerald-900 text-center";
feedbackTitle.innerText = "Точно така! Ausgezeichnet! 🎉";
feedbackSubtitle.innerText = selectedWords.join(" ");
// Автоматски прочитај ја точно наредената реченица со TTS
speakText(selectedWords.join(" "));
// Прикажи копче за следна реченица
document.getElementById('game-check-btn').classList.add('hidden');
document.getElementById('game-next-btn').classList.remove('hidden');
} else {
feedbackBox.className = "block mt-6 p-4 rounded-xl border bg-rose-50 border-rose-200 text-rose-900 text-center";
feedbackTitle.innerText = "Има мала грешка. 😕";
feedbackSubtitle.innerText = "Внимавај на местото на глаголот! Обиди се повторно со ресетирање.";
}
}
function nextGameSentence() {
currentGameIndex++;
if (currentGameIndex < gameData.length) {
initGame();
} else {
// Крај на играта со подредување
const feedbackBox = document.getElementById('game-feedback');
feedbackBox.className = "block mt-6 p-6 rounded-xl border bg-indigo-50 border-indigo-200 text-indigo-950 text-center space-y-3";
feedbackBox.innerHTML = `
<div class="text-3xl">🏆</div>
<h3 class="font-bold text-lg">Честитки! Го совлада редоследот на германските реченици!</h3>
<p class="text-sm text-slate-600">Сите 5 реченици се успешно наредени со совршена синтакса.</p>
<button onclick="restartWordGame()" class="mt-2 bg-indigo-600 hover:bg-indigo-700 text-white font-semibold px-4 py-2 rounded-xl text-xs transition-colors shadow-sm">
Играј повторно
</button>
`;
document.getElementById('game-check-btn').classList.add('hidden');
document.getElementById('game-next-btn').classList.add('hidden');
}
}
function restartWordGame() {
currentGameIndex = 0;
initGame();
}
// ================= БАЗА НА ПРАШАЊА ЗА КВИЗОТ =================
const quizData = [
{
question: "Како се преведува летото на германски (правилен член)?",
options: ["das Sommer", "die Sommer", "der Sommer", "ein Sommer"],
correct: 2,
explanation: "Сите годишни времиња во германскиот јазик се од машки род и го носат членот 'der'."
},
{
question: "Како се пишува правилно заменката 'јас' на германски?",
options: ["I", "ich", "Ichh", "iech"],
correct: 1,
explanation: "Германската заменка за прво лице е 'ich', секогаш со мало 'i' освен ако не е на почеток од реченицата."
},
{
question: "Како се преведува: „Моето омилено годишно време“?",
options: ["es ist meinen lieblings Jahreszeit", "er ist meine Lieblingsjahreszeit", "es ist mein Lieblings Jahreszeit", "sie ist meine Lieblingsjahreszeit"],
correct: 1,
explanation: "Пролетта е 'der Frühling' (машки род) па затоа користиме 'er'. 'Lieblingsjahreszeit' е еден збор од женски род па затоа велиме 'meine'."
},
{
question: "Која е точната множина за денови ('die ...')?",
options: ["die Tagen", "die Tag", "die Tage", "die Täge"],
correct: 2,
explanation: "Множината на 'der Tag' е 'die Tage' (без дополнително 'n' во номинатив)."
},
{
question: "Како гласи точната множина за птици ('die ...')?",
options: ["die vogel", "die Vogel", "die Vogeln", "die Vögel"],
correct: 3,
explanation: "Именките во германскиот јазик се пишуваат со голема буква, а множината од 'Vogel' е 'Vögel' (со преглас - Umlaut)."
},
{
question: "Како гласи идно време за 'јас ќе купам торта'?",
options: ["Ich werde eine Torte machen.", "Ich werde eine Torte kaufen.", "Ich werde eine Torte einkaufen.", "Ich werde kaufen eine Torte."],
correct: 1,
explanation: "За купување на една конкретна работа користиме 'kaufen', а главниот глагол оди на самиот крај во инфинитив со 'werden'."
},
{
question: "Како се пишува компарацијата за долго/подолго на германски?",
options: ["langer", "länger", "langere", "lang"],
correct: 1,
explanation: "Кај едносложните придавки со самогласки (a, o, u) често се додава Umlaut при компарација: lang -> länger."
},
{
question: "Како се кажува: „Имам многу храна“?",
options: ["Es gibt viele Essen.", "Es gibt viel Essen.", "Es giebt viel Essen.", "Es wird viel Essen sein."],
correct: 1,
explanation: "Кога зборуваме за неброеви нешта (како храна, вода, пари), се користи 'viel' во еднина без наставка."
},
{
question: "Како се преведува правилно на германски: „за мојата фамилија“ (за реченицата со тортата)?",
options: ["für meiner Familie", "für meine Familie", "für meinen Familie", "für mein Familie"],
correct: 1,
explanation: "Предлогот 'für' секогаш бара Акузатив. Бидејќи 'Familie' е од женски род (die), во акузатив останува 'meine Familie'."
},
{
question: "Како е правилниот редослед на глаголите во: „Ќе го прославам (роденденот) набрзо“?",
options: ["Ich werde er vald feiern.", "Ich werde ihn feiern bald.", "Ich werde ihn bald feiern.", "Ich werde feiern ihn bald."],
correct: 2,
explanation: "Редоследот мора да биде: Предмет + werde + заменка за машки род во акузатив (ihn) + прилог (bald) + главен глагол во инфинитив на крај (feiern)."
}
];
let currentQuestionIndex = 0;
let score = 0;
let quizAnswered = false;
function loadQuestion() {
quizAnswered = false;
const currentQ = quizData[currentQuestionIndex];
// Ажурирај прогрес
const progressPercent = ((currentQuestionIndex + 1) / quizData.length) * 100;
document.getElementById('quiz-progress').style.width = `${progressPercent}%`;
// Ажурирај го текстот
document.getElementById('question-number').innerText = `Задача ${currentQuestionIndex + 1} од ${quizData.length}`;
document.getElementById('question-text').innerText = currentQ.question;
// Исчисти претходни опции
const optionsContainer = document.getElementById('quiz-options');
optionsContainer.innerHTML = '';
// Сокриј фидбек и следно копче
document.getElementById('quiz-feedback').className = 'hidden p-4 rounded-xl border transition-all duration-200';
document.getElementById('next-btn').classList.add('hidden');
// Креирај нови опции
currentQ.options.forEach((option, idx) => {
const btn = document.createElement('button');
btn.className = "quiz-opt-btn w-full p-4 text-left rounded-xl border border-slate-200 hover:bg-slate-50 transition-all font-medium flex justify-between items-center";
btn.innerHTML = `<span>${option}</span><i class="fa-regular fa-circle text-slate-300"></i>`;
btn.onclick = () => selectOption(idx, btn);
optionsContainer.appendChild(btn);
});
}
function selectOption(selectedIndex, clickedBtn) {
if (quizAnswered) return;
quizAnswered = true;
const currentQ = quizData[currentQuestionIndex];
const feedbackBox = document.getElementById('quiz-feedback');
const feedbackTitle = document.getElementById('feedback-title');
const feedbackText = document.getElementById('feedback-text');
const optButtons = document.querySelectorAll('.quiz-opt-btn');
// Оневозможи други кликови и обој ги опциите
optButtons.forEach((btn, idx) => {
btn.disabled = true;
const icon = btn.querySelector('i');
if (idx === currentQ.correct) {
btn.classList.replace('border-slate-200', 'border-emerald-500');
btn.classList.add('bg-emerald-50/50', 'text-emerald-900');
icon.className = "fa-solid fa-circle-check text-emerald-500";
} else if (idx === selectedIndex) {
btn.classList.replace('border-slate-200', 'border-rose-500');
btn.classList.add('bg-rose-50/50', 'text-rose-900');
icon.className = "fa-solid fa-circle-xmark text-rose-500";
}
});
// Постави го фидбекот
feedbackBox.classList.remove('hidden');
if (selectedIndex === currentQ.correct) {
score++;
document.getElementById('quiz-score').innerText = `${score} / ${quizData.length}`;
feedbackBox.classList.add('bg-emerald-50', 'border-emerald-100', 'text-emerald-900');
feedbackTitle.innerText = "Точно! Браво! 🎉";
} else {
feedbackBox.classList.add('bg-rose-50', 'border-rose-100', 'text-rose-900');
feedbackTitle.innerText = "Неточно. Прочитај го правилото:";
}
feedbackText.innerText = currentQ.explanation;
// Прикажи го копчето за следно прашање
document.getElementById('next-btn').classList.remove('hidden');
}
function nextQuestion() {
currentQuestionIndex++;
if (currentQuestionIndex < quizData.length) {
loadQuestion();
} else {
// Крај на квизот
document.getElementById('quiz-question-container').classList.add('hidden');
document.getElementById('quiz-results').classList.remove('hidden');
document.getElementById('final-score').innerText = `${score} / ${quizData.length}`;
// Зачувај го резултатот во меморија
localStorage.setItem('quizScore', score);
}
}
function restartQuiz() {
currentQuestionIndex = 0;
score = 0;
document.getElementById('quiz-score').innerText = `0 / ${quizData.length}`;
document.getElementById('quiz-question-container').classList.remove('hidden');
document.getElementById('quiz-results').classList.add('hidden');
loadQuestion();
}
// Стартувај го квизот и вчитувај ги зачуваните одговори при вчитување на страната
window.onload = function() {
const saved = localStorage.getItem('germanskiodgovor');
if (saved) {
document.getElementById('student-answer').value = saved;
}
restartQuiz();
};
// Текст-to-Speech (TTS) систем со заштита
function speakText(text, event) {
if (event) {
event.stopPropagation();
}
if ('speechSynthesis' in window) {
window.speechSynthesis.cancel();
const utterance = new SpeechSynthesisUtterance(text);
utterance.lang = 'de-DE'; // Германски јазик
utterance.rate = 0.85;
const voices = window.speechSynthesis.getVoices();
const deVoice = voices.find(voice => voice.lang.startsWith('de'));
if (deVoice) {
utterance.voice = deVoice;
}
window.speechSynthesis.speak(utterance);
} else {
alert("Вашиот прелистувач не поддржува гласовно читање. Пробајте на Google Chrome.");
}
}
function playFullText() {
const text = document.getElementById('german-text').innerText;
speakText(text);
}
</script>
</body>
</html><div class="blogger-post-footer">www.bloglines.com</div>Anica Petkoskahttp://www.blogger.com/profile/12340858614356870735noreply@blogger.comtag:blogger.com,1999:blog-26523155.post-76756951597156046292026-05-17T21:05:06.453+02:002026-05-17T21:05:06.454+02:00Геометриски Супер-Водич за Алекс Сè за геометријата во второ полугодие (7-мо одделение) визуелизации, вежби и квизови!<!DOCTYPE html>
<html lang="mk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Геометриски Супер-Водич за Алекс 📐</title>
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Comfortaa:wght@400;700&family=Montserrat:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Montserrat', sans-serif;
}
h1, h2, h3, .brand-font {
font-family: 'Comfortaa', cursive;
}
.math-input:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.4);
}
</style>
</head>
<body class="bg-slate-50 text-slate-800 min-h-screen">
<!-- Header -->
<header class="bg-gradient-to-r from-indigo-600 via-purple-600 to-indigo-700 text-white shadow-lg">
<div class="max-w-6xl mx-auto px-4 py-8 text-center relative overflow-hidden">
<div class="absolute -right-10 -top-10 w-40 h-40 bg-white/10 rounded-full blur-xl pointer-events-none"></div>
<div class="absolute -left-10 -bottom-10 w-40 h-40 bg-white/10 rounded-full blur-xl pointer-events-none"></div>
<span class="bg-yellow-400 text-indigo-950 font-bold px-4 py-1.5 rounded-full text-xs uppercase tracking-widest shadow-sm inline-block mb-3">Подготовка за тест! 🚀</span>
<h1 class="text-3xl md:text-5xl font-bold mb-3 tracking-tight">Геометриски Супер-Водич за Алекс</h1>
<p class="text-indigo-100 max-w-2xl mx-auto text-sm md:text-base">
Сè за геометријата во второ полугодие (7-мо одделение) спакувано во интерактивни визуелизации, вежби и квизови!
</p>
</div>
</header>
<main class="max-w-6xl mx-auto px-4 py-8 grid grid-cols-1 lg:grid-cols-3 gap-8">
<!-- LEFT COLUMN: Navigation & Interactive Tools -->
<div class="lg:col-span-2 space-y-8">
<!-- Quick Navigation Tabs -->
<div class="bg-white rounded-2xl p-2 shadow-sm border border-slate-100 flex flex-wrap gap-2">
<button onclick="switchTab('draw')" id="btn-draw" class="tab-btn px-4 py-2.5 rounded-xl font-semibold text-sm transition-all duration-200 bg-indigo-600 text-white shadow-md">
📐 Цртање со Шестар
</button>
<button onclick="switchTab('transversal')" id="btn-transversal" class="tab-btn px-4 py-2.5 rounded-xl font-semibold text-sm transition-all duration-200 text-slate-600 hover:bg-slate-100">
🛣️ Трансверзала & Прави
</button>
<button onclick="switchTab('transforms')" id="btn-transforms" class="tab-btn px-4 py-2.5 rounded-xl font-semibold text-sm transition-all duration-200 text-slate-600 hover:bg-slate-100">
🔄 Трансформации
</button>
<button onclick="switchTab('cards')" id="btn-cards" class="tab-btn px-4 py-2.5 rounded-xl font-semibold text-sm transition-all duration-200 text-slate-600 hover:bg-slate-100">
📚 Брза Теорија
</button>
<button onclick="switchTab('formulas')" id="btn-formulas" class="tab-btn px-4 py-2.5 rounded-xl font-semibold text-sm transition-all duration-200 text-slate-600 hover:bg-slate-100">
🧮 Плоштини
</button>
</div>
<!-- TAB 1: INTERACTIVE COMPASS DRAWER -->
<div id="tab-draw" class="tab-content bg-white rounded-3xl p-6 shadow-md border border-slate-100 space-y-6">
<div class="border-b border-slate-100 pb-4">
<h2 class="text-xl md:text-2xl font-bold text-slate-900 flex items-center gap-2">
<span class="text-indigo-600">📐</span> Симулатор за конструкции со шестар
</h2>
<p class="text-slate-500 text-sm mt-1">Избери конструкција од понудените долу и кликај на чекорите за да ја видиш анимацијата!</p>
</div>
<!-- Simulation selector -->
<div class="flex flex-wrap gap-2">
<button onclick="loadSim('add')" id="btn-sim-add" class="sim-btn px-3.5 py-1.5 rounded-lg text-xs font-bold transition-all bg-indigo-100 text-indigo-700">Собирање агли (α + β)</button>
<button onclick="loadSim('sub')" id="btn-sim-sub" class="sim-btn px-3.5 py-1.5 rounded-lg text-xs font-bold transition-all bg-slate-100 text-slate-600 hover:bg-slate-200">Одземање агли (α - β)</button>
<button onclick="loadSim('bisectAngle')" id="btn-sim-bisectAngle" class="sim-btn px-3.5 py-1.5 rounded-lg text-xs font-bold transition-all bg-slate-100 text-slate-600 hover:bg-slate-200">Симетрала на Агол</button>
<button onclick="loadSim('bisectLine')" id="btn-sim-bisectLine" class="sim-btn px-3.5 py-1.5 rounded-lg text-xs font-bold transition-all bg-slate-100 text-slate-600 hover:bg-slate-200">Симетрала на Отсечка</button>
</div>
<!-- Drawing Canvas & Control Area -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="md:col-span-2 bg-slate-900 rounded-2xl aspect-[4/3] relative overflow-hidden flex items-center justify-center border-4 border-slate-950 shadow-inner">
<div class="absolute inset-0 bg-[linear-gradient(to_right,#1e293b_1px,transparent_1px),linear-gradient(to_bottom,#1e293b_1px,transparent_1px)] bg-[size:40px_40px] opacity-30"></div>
<canvas id="geometryCanvas" class="w-full h-full relative z-10"></canvas>
</div>
<!-- Steps & Guide text -->
<div class="flex flex-col justify-between space-y-4">
<div class="space-y-3">
<h3 class="font-bold text-slate-900 text-base" id="sim-title">Собирање агли</h3>
<div class="bg-indigo-50 border-l-4 border-indigo-500 p-3 rounded-r-xl">
<p class="text-xs text-indigo-950 leading-relaxed font-semibold" id="sim-description">
Да ги споиме двата агли во еден голем збир.
</p>
</div>
<!-- Steps List -->
<div class="space-y-2 mt-4" id="sim-steps-list">
<!-- Dynamic steps -->
</div>
</div>
<!-- Reset / Play buttons -->
<div class="flex gap-2">
<button id="prevStepBtn" onclick="prevSimStep()" class="flex-1 py-2 px-3 bg-slate-100 text-slate-700 font-bold rounded-xl text-xs hover:bg-slate-200 transition">← Назад</button>
<button id="nextStepBtn" onclick="nextSimStep()" class="flex-1 py-2 px-3 bg-indigo-600 text-white font-bold rounded-xl text-xs hover:bg-indigo-700 transition">Следен чекор →</button>
</div>
</div>
</div>
</div>
<!-- TAB 2: TRANSVERSAL & PARALLEL LINES -->
<div id="tab-transversal" class="tab-content hidden bg-white rounded-3xl p-6 shadow-md border border-slate-100 space-y-6">
<div class="border-b border-slate-100 pb-4">
<h2 class="text-xl md:text-2xl font-bold text-slate-900 flex items-center gap-2">
<span class="text-indigo-600">🛣️</span> Трансверзала на Напоредни (Паралелни) Прави
</h2>
<p class="text-slate-500 text-sm mt-1">Две паралелни прави пресечени со трета права градат 8 карактеристични агли. Повлечи го лизгачот за да го смениш аголот!</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="md:col-span-2 bg-slate-900 rounded-2xl aspect-[4/3] relative overflow-hidden border-4 border-slate-950 shadow-inner flex items-center justify-center">
<canvas id="transversalCanvas" class="w-full h-full relative z-10"></canvas>
</div>
<!-- Interactive controls for transversal -->
<div class="flex flex-col justify-between space-y-4">
<div class="space-y-4">
<!-- Slider control -->
<div class="space-y-2">
<div class="flex justify-between text-xs font-bold text-slate-600">
<span>Агол на трансверзалата:</span>
<span class="text-indigo-600 font-mono font-bold" id="transversal-angle-txt">60°</span>
</div>
<input type="range" id="transversal-slider" min="30" max="150" value="60" oninput="updateTransversalAngle(this.value)" class="w-full h-2 bg-slate-200 rounded-lg appearance-none cursor-pointer accent-indigo-600">
</div>
<!-- Highlights -->
<div>
<h4 class="text-xs font-bold text-slate-500 uppercase tracking-wider mb-2">Прикажи врски на аглите:</h4>
<div class="grid grid-cols-1 gap-1.5 text-xs font-semibold">
<button onclick="highlightTransversalAngles('corresponding')" id="btn-t-corresponding" class="t-angle-btn w-full text-left p-2.5 rounded-xl border border-slate-200 hover:border-indigo-400 bg-slate-50 transition flex justify-between items-center">
<span>🤝 Согласни агли (Еднакви)</span>
<span class="text-[10px] text-indigo-600">1 и 5, 2 и 6...</span>
</button>
<button onclick="highlightTransversalAngles('alternate')" id="btn-t-alternate" class="t-angle-btn w-full text-left p-2.5 rounded-xl border border-slate-200 hover:border-indigo-400 bg-slate-50 transition flex justify-between items-center">
<span>🔀 Наизменични агли (Еднакви)</span>
<span class="text-[10px] text-indigo-600">3 и 5, 4 и 6...</span>
</button>
<button onclick="highlightTransversalAngles('opposite')" id="btn-t-opposite" class="t-angle-btn w-full text-left p-2.5 rounded-xl border border-slate-200 hover:border-indigo-400 bg-slate-50 transition flex justify-between items-center">
<span>⚔️ Накрсни агли (Еднакви)</span>
<span class="text-[10px] text-indigo-600">1 и 3, 2 и 4...</span>
</button>
<button onclick="highlightTransversalAngles('supplementary')" id="btn-t-supplementary" class="t-angle-btn w-full text-left p-2.5 rounded-xl border border-slate-200 hover:border-indigo-400 bg-slate-50 transition flex justify-between items-center">
<span>🌓 Напоредни агли (Збир = 180°)</span>
<span class="text-[10px] text-indigo-600">1 и 2, 5 и 6...</span>
</button>
</div>
</div>
<!-- Interactive Legend text -->
<div class="p-3 bg-indigo-50 border-l-4 border-indigo-500 rounded-r-xl text-xs text-indigo-950">
<p id="transversal-info" class="font-medium">Кликни на некој вид агли погоре за да видиш како се поврзани на цртежот!</p>
</div>
</div>
</div>
</div>
</div>
<!-- TAB 3: INTERACTIVE COORDINATE SYSTEM & TRANSFORMATIONS -->
<div id="tab-transforms" class="tab-content hidden bg-white rounded-3xl p-6 shadow-md border border-slate-100 space-y-6">
<div class="border-b border-slate-100 pb-4">
<h2 class="text-xl md:text-2xl font-bold text-slate-900 flex items-center gap-2">
<span class="text-indigo-600">🔄</span> Интерактивни Трансформации во Координатен Систем
</h2>
<p class="text-slate-500 text-sm mt-1">Анимирај ги движењата на триаголникот АBC и набљудувај како се менуваат координатите на неговите темиња!</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="md:col-span-2 bg-slate-900 rounded-2xl aspect-square relative overflow-hidden border-4 border-slate-950 shadow-inner flex items-center justify-center">
<canvas id="transformCanvas" class="w-full h-full z-10"></canvas>
</div>
<!-- Transformation Controls -->
<div class="flex flex-col justify-between space-y-4">
<div class="space-y-4">
<div>
<h3 class="font-bold text-slate-900 text-sm mb-2">Избери Трансформација:</h3>
<div class="grid grid-cols-1 gap-2">
<button onclick="applyTransform('translate')" class="w-full py-2.5 px-3 bg-indigo-600 hover:bg-indigo-700 text-white font-bold rounded-xl text-xs transition shadow-sm flex items-center gap-2 justify-center">
🚀 Транслација (+4, -2)
</button>
<button onclick="applyTransform('reflectY')" class="w-full py-2.5 px-3 bg-purple-600 hover:bg-purple-700 text-white font-bold rounded-xl text-xs transition shadow-sm flex items-center gap-2 justify-center">
🪞 Осна Симетрија (Y-оска)
</button>
<button onclick="applyTransform('reflectX')" class="w-full py-2.5 px-3 bg-purple-600 hover:bg-purple-700 text-white font-bold rounded-xl text-xs transition shadow-sm flex items-center gap-2 justify-center">
🪞 Осна Симетрија (X-оска)
</button>
<button onclick="applyTransform('rotate90')" class="w-full py-2.5 px-3 bg-amber-600 hover:bg-amber-700 text-white font-bold rounded-xl text-xs transition shadow-sm flex items-center gap-2 justify-center">
🔄 Ротација за 90° околу (0,0)
</button>
</div>
</div>
<!-- Coordinate Readout Box -->
<div class="bg-slate-50 border border-slate-200 rounded-2xl p-4 space-y-2">
<h4 class="font-bold text-slate-900 text-xs uppercase tracking-wider text-slate-500 font-bold">Координати на темињата:</h4>
<div class="text-xs space-y-1.5 font-mono" id="coordinate-output">
<div class="flex justify-between border-b border-slate-100 pb-1">
<span class="text-indigo-600 font-bold">A:</span> <span id="coord-a">(1, 2)</span>
</div>
<div class="flex justify-between border-b border-slate-100 pb-1">
<span class="text-indigo-600 font-bold">B:</span> <span id="coord-b">(4, 2)</span>
</div>
<div class="flex justify-between">
<span class="text-indigo-600 font-bold">C:</span> <span id="coord-c">(2, 5)</span>
</div>
</div>
</div>
<!-- Explainer Note -->
<div class="p-3 bg-indigo-50 rounded-xl text-[11px] text-indigo-950 border-l-4 border-indigo-500">
<p id="transform-explainer">Почетната положба е нацртана со испрекинато сино. Притисни некое од копчињата горе за почеток на анимацијата!</p>
</div>
</div>
<button onclick="resetTransformation()" class="w-full py-2 bg-slate-100 hover:bg-slate-200 text-slate-700 font-bold rounded-xl text-xs transition">
Ресетирај положба ↺
</button>
</div>
</div>
</div>
<!-- TAB 4: KNOWLEDGE CARDS -->
<div id="tab-cards" class="tab-content hidden bg-white rounded-3xl p-6 shadow-md border border-slate-100 space-y-6">
<div class="border-b border-slate-100 pb-4">
<h2 class="text-xl md:text-2xl font-bold text-slate-900 flex items-center gap-2">
<span class="text-indigo-600">📚</span> Брзи картички со теорија за испит!
</h2>
<p class="text-slate-500 text-sm mt-1">Основни концепти дефинирани со едноставни зборови за брзо учење.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="p-4 rounded-2xl border-2 border-indigo-50 hover:border-indigo-100 transition bg-indigo-50/20">
<span class="text-xs font-bold uppercase text-indigo-600 bg-indigo-100 px-2 py-0.5 rounded">Агли</span>
<h3 class="font-bold text-slate-900 mt-2">Суплементни Агли</h3>
<p class="text-xs text-slate-600 mt-1 leading-relaxed">
Два агли кои заедно формираат рамен агол. Нивниот збир секогаш изнесува <strong>точно 180°</strong>. (На пр. 110° и 70°).
</p>
</div>
<div class="p-4 rounded-2xl border-2 border-emerald-50 hover:border-emerald-100 transition bg-emerald-50/20">
<span class="text-xs font-bold uppercase text-emerald-600 bg-emerald-100 px-2 py-0.5 rounded">Триаголник</span>
<h3 class="font-bold text-slate-900 mt-2">Тежиште (Центар на тежина)</h3>
<p class="text-xs text-slate-600 mt-1 leading-relaxed">
Точка каде што се сечат сите три <strong>тежишни линии</strong> (линии кои ги поврзуваат темињата со средините на спротивните страни).
</p>
</div>
<div class="p-4 rounded-2xl border-2 border-purple-50 hover:border-purple-100 transition bg-purple-50/20">
<span class="text-xs font-bold uppercase text-purple-600 bg-purple-100 px-2 py-0.5 rounded">Триаголник</span>
<h3 class="font-bold text-slate-900 mt-2">Впишана vs Опишана кружница</h3>
<p class="text-xs text-slate-600 mt-1 leading-relaxed">
<strong>Опишана:</strong> Се сечат <em>симетралите на страните</em>. Ги допира сите темиња.<br>
<strong>Впишана:</strong> Се сечат <em>симетралите на аглите</em>. Ги допира трите страни одвнатре.
</p>
</div>
<div class="p-4 rounded-2xl border-2 border-amber-50 hover:border-amber-100 transition bg-amber-50/20">
<span class="text-xs font-bold uppercase text-amber-600 bg-amber-100 px-2 py-0.5 rounded">Многуаголници</span>
<h3 class="font-bold text-slate-900 mt-2">Конвексни vs Неконвексни</h3>
<p class="text-xs text-slate-600 mt-1 leading-relaxed">
<strong>Конвексни:</strong> Сите внатрешни агли се помали од 180°.<br>
<strong>Неконвексни (Вдлабнати):</strong> Имаат барем еден агол поголем од 180°.
</p>
</div>
</div>
</div>
<!-- TAB 5: AREA CALCULATOR / FORMULAS -->
<div id="tab-formulas" class="tab-content hidden bg-white rounded-3xl p-6 shadow-md border border-slate-100 space-y-6">
<div class="border-b border-slate-100 pb-4">
<h2 class="text-xl md:text-2xl font-bold text-slate-900 flex items-center gap-2">
<span class="text-indigo-600">🧮</span> Интерактивно Пресметување Плоштини
</h2>
<p class="text-slate-500 text-sm mt-1">Внеси вредности за страни и висини за да видиш како работат геометриските формули.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<!-- Paralelogram Calc -->
<div class="p-5 rounded-2xl bg-indigo-50/50 border border-indigo-100 space-y-4">
<div class="flex justify-between items-center">
<h3 class="font-bold text-slate-900 text-base">Плоштина на Паралелограм</h3>
<span class="text-xs font-extrabold text-indigo-700 bg-indigo-100 px-2 py-1 rounded">P = a · h_a</span>
</div>
<div class="space-y-3">
<div>
<label class="text-xs font-semibold text-slate-600 block mb-1">Страна а (cm)</label>
<input type="number" id="calc-par-a" value="8" oninput="calculateArea()" class="math-input w-full p-2 bg-white border border-slate-200 rounded-xl text-sm font-semibold">
</div>
<div>
<label class="text-xs font-semibold text-slate-600 block mb-1">Висина h_a (cm)</label>
<input type="number" id="calc-par-h" value="5" oninput="calculateArea()" class="math-input w-full p-2 bg-white border border-slate-200 rounded-xl text-sm font-semibold">
</div>
</div>
<div class="bg-indigo-600 text-white rounded-xl p-3 text-center">
<span class="text-xs uppercase font-semibold text-indigo-200 block">Пресметана Плоштина</span>
<span class="text-2xl font-black block" id="calc-par-res">40 cm²</span>
</div>
</div>
<!-- Triangle Calc -->
<div class="p-5 rounded-2xl bg-emerald-50/50 border border-emerald-100 space-y-4">
<div class="flex justify-between items-center">
<h3 class="font-bold text-slate-900 text-base">Плоштина на Триаголник</h3>
<span class="text-xs font-extrabold text-emerald-700 bg-emerald-100 px-2 py-1 rounded">P = (a · h_a) / 2</span>
</div>
<div class="space-y-3">
<div>
<label class="text-xs font-semibold text-slate-600 block mb-1">Страна а (cm)</label>
<input type="number" id="calc-tri-a" value="10" oninput="calculateArea()" class="math-input w-full p-2 bg-white border border-slate-200 rounded-xl text-sm font-semibold">
</div>
<div>
<label class="text-xs font-semibold text-slate-600 block mb-1">Висина h_a (cm)</label>
<input type="number" id="calc-tri-h" value="6" oninput="calculateArea()" class="math-input w-full p-2 bg-white border border-slate-200 rounded-xl text-sm font-semibold">
</div>
</div>
<div class="bg-emerald-600 text-white rounded-xl p-3 text-center">
<span class="text-xs uppercase font-semibold text-emerald-200 block">Пресметана Плоштина</span>
<span class="text-2xl font-black block" id="calc-tri-res">30 cm²</span>
</div>
</div>
</div>
<p class="text-xs text-slate-400 italic text-center">Запомни: Триаголникот е секогаш точно половина од паралелограмот со исти димензии!</p>
</div>
</div>
<!-- RIGHT COLUMN: THE INTERACTIVE GEOMETRY QUIZ -->
<div class="space-y-8">
<div class="bg-white rounded-3xl p-6 shadow-md border border-indigo-100 space-y-6 relative overflow-hidden">
<div class="absolute right-0 top-0 w-24 h-24 bg-indigo-50 rounded-full blur-2xl pointer-events-none"></div>
<div class="border-b border-slate-100 pb-4">
<span class="bg-indigo-100 text-indigo-700 text-[10px] font-black uppercase px-2.5 py-1 rounded-full">Вежбај и учи</span>
<h2 class="text-xl font-bold text-slate-900 mt-2">🧠 Квиз за Алекс за чиста 5-ка!</h2>
<p class="text-slate-500 text-xs mt-1">Овие прашања со сигурност се паѓаат на тестот утре!</p>
</div>
<!-- Quiz Progress Bar -->
<div class="space-y-1">
<div class="flex justify-between text-xs font-bold text-slate-500">
<span>Прашање <span id="quiz-curr">1</span> од <span id="quiz-total">5</span></span>
<span>Поени: <span id="quiz-score">0</span></span>
</div>
<div class="w-full bg-slate-100 rounded-full h-2">
<div id="quiz-progress" class="bg-indigo-600 h-2 rounded-full transition-all duration-300" style="width: 20%"></div>
</div>
</div>
<!-- Quiz Card Content -->
<div id="quiz-card" class="space-y-4">
<h3 id="quiz-question" class="font-bold text-sm md:text-base text-slate-800 leading-snug">
Ако два агли се суплементни, и едниот агол изнесува 110°, колку изнесува другиот?
</h3>
<!-- Options list -->
<div id="quiz-options" class="space-y-2">
<!-- Options load dynamically -->
</div>
<!-- Feedback Box -->
<div id="quiz-feedback" class="hidden p-3 rounded-xl text-xs font-semibold leading-relaxed">
<!-- Feedback content -->
</div>
<!-- Next button -->
<button id="quiz-next-btn" onclick="nextQuestion()" class="w-full py-3 bg-indigo-600 hover:bg-indigo-700 text-white font-bold rounded-xl text-sm transition shadow-md hidden">
Следно прашање ➔
</button>
</div>
<!-- Final score card (Hidden by default) -->
<div id="quiz-result" class="hidden text-center space-y-4 py-6">
<span class="text-4xl">🏆</span>
<h3 class="font-bold text-xl text-slate-900">Браво Алекс!</h3>
<p class="text-sm text-slate-500">
Го заврши квизот по геометрија. Твојот резултат е:
</p>
<div class="text-4xl font-black text-indigo-600" id="final-score-text">
4 / 5
</div>
<p class="text-xs text-slate-400">Спремен си за писмена за чиста 5-ка!</p>
<button onclick="resetQuiz()" class="w-full py-3 bg-indigo-100 hover:bg-indigo-200 text-indigo-700 font-bold rounded-xl text-sm transition">
Реши го повторно
</button>
</div>
</div>
</div>
</main>
<!-- Core Interactive Logic Script -->
<script>
// 1. Tab Management
function switchTab(tabId) {
document.querySelectorAll('.tab-content').forEach(el => el.classList.add('hidden'));
document.querySelectorAll('.tab-btn').forEach(btn => {
btn.classList.remove('bg-indigo-600', 'text-white', 'shadow-md');
btn.classList.add('text-slate-600', 'hover:bg-slate-100');
});
document.getElementById(`tab-${tabId}`).classList.remove('hidden');
const clickedBtn = document.getElementById(`btn-${tabId}`);
clickedBtn.classList.remove('text-slate-600', 'hover:bg-slate-100');
clickedBtn.classList.add('bg-indigo-600', 'text-white', 'shadow-md');
// Trigger canvas redraws if transitioning
if (tabId === 'draw') {
initCanvas();
} else if (tabId === 'transforms') {
initTransformCanvas();
} else if (tabId === 'transversal') {
initTransversalCanvas();
}
}
// 2. Interactive Area formulas calculator
function calculateArea() {
const parA = parseFloat(document.getElementById('calc-par-a').value) || 0;
const parH = parseFloat(document.getElementById('calc-par-h').value) || 0;
document.getElementById('calc-par-res').innerText = `${(parA * parH).toFixed(1)} cm²`;
const triA = parseFloat(document.getElementById('calc-tri-a').value) || 0;
const triH = parseFloat(document.getElementById('calc-tri-h').value) || 0;
document.getElementById('calc-tri-res').innerText = `${((triA * triH) / 2).toFixed(1)} cm²`;
}
// 3. Quiz Data and State
const quizQuestions = [
{
q: "Ако два агли се суплементни, и едниот агол изнесува 110°, колку изнесува другиот?",
options: ["90°", "70°", "180°", "80°"],
correct: 1,
explanation: "Суплементните агли секогаш имаат збир од точно 180°. Затоа, 180° - 110° = 70°."
},
{
q: "Која карактеристична точка на триаголникот се наоѓа со пресекот на симетралите на неговите страни?",
options: ["Тежиште", "Впишана кружница", "Ортоцентар", "Центар на опишана кружница"],
correct: 3,
explanation: "Симетралите на страните се сечат во центарот на опишаната кружница (кружница што ги допира сите темиња)."
},
{
q: "Колку оски на симетрија има рамнокракиот триаголник?",
options: ["3 оски", "Ниту една", "1 оска", "2 оски"],
correct: 2,
explanation: "Рамнокракиот триаголник има точно 1 оска на симетрија, која ја полови неговата основа."
},
{
q: "Која од наведениве фигури е неконвексен (вдлабнат) многуаголник?",
options: ["Квадрат", "Ромб", "Фигура во форма на стрелка или буквата W", "Трапез"],
correct: 2,
explanation: "Формата на стрелка или буквата W има барем еден внатрешен агол поголем од 180°, што ја прави неконвексна."
},
{
q: "Што е тоа тежиште кај триаголник?",
options: [
"Каде се сечат висините",
"Каде се сечат симетралите на аглите",
"Каде се сечат тежишните линии (врски од теме до средина на спротивна страна)",
"Центарот на внатрешната кружница"
],
correct: 2,
explanation: "Тежиштето е пресекот на тежишните линии. Тоа претставува центар на тежината на геометриската фигура."
},
{
q: "Ако темето A(1, 2) се преслика со осна симетрија во однос на Y-оската, кои се неговите нови координати?",
options: ["A'(-1, 2)", "A'(1, -2)", "A'(-1, -2)", "A'(2, 1)"],
correct: 0,
explanation: "При осна симетрија во однос на Y-оската, само X-координатата го менува својот знак: (x, y) ➔ (-x, y). Затоа A(1, 2) станува A'(-1, 2)."
},
{
q: "Се презема транслација за +4 по X и -2 по Y. Каде ќе заврши темето C(2, 5)?",
options: ["C'(6, 7)", "C'(-2, 3)", "C'(6, 3)", "C'(2, 3)"],
correct: 2,
explanation: "Координатите се собираат/одземаат: за X имаме 2 + 4 = 6, за Y имаме 5 - 2 = 3. Резултат: C'(6, 3)."
},
{
q: "Ако две напоредни прави се пресечени со трансверзала, а еден од согласните агли изнесува 65°, колку изнесува неговиот соодветен согласен агол?",
options: ["115°", "65°", "90°", "180°"],
correct: 1,
explanation: "Согласните агли на трансверзала на паралелни прави се секогаш еднакви. Затоа и соодветниот агол изнесува точно 65°."
},
{
q: "Колку изнесува збирот на два напоредни агли кои лежат на иста права?",
options: ["90°", "180°", "360°", "270°"],
correct: 1,
explanation: "Напоредните агли што лежат на иста права линија секогаш образуваат рамен агол, па нивниот збир е секогаш 180°."
}
];
let currentQuestionIdx = 0;
let score = 0;
let selectedOption = null;
function loadQuestion() {
if (currentQuestionIdx >= quizQuestions.length) {
document.getElementById('quiz-card').classList.add('hidden');
document.getElementById('quiz-result').classList.remove('hidden');
document.getElementById('final-score-text').innerText = `${score} / ${quizQuestions.length}`;
return;
}
const current = quizQuestions[currentQuestionIdx];
document.getElementById('quiz-curr').innerText = currentQuestionIdx + 1;
document.getElementById('quiz-total').innerText = quizQuestions.length;
document.getElementById('quiz-progress').style.width = `${((currentQuestionIdx + 1) / quizQuestions.length) * 100}%`;
document.getElementById('quiz-question').innerText = current.q;
document.getElementById('quiz-score').innerText = score;
const optionsContainer = document.getElementById('quiz-options');
optionsContainer.innerHTML = '';
document.getElementById('quiz-feedback').classList.add('hidden');
document.getElementById('quiz-next-btn').classList.add('hidden');
selectedOption = null;
current.options.forEach((opt, idx) => {
const button = document.createElement('button');
button.className = "quiz-opt-btn w-full text-left p-3.5 rounded-xl border-2 border-slate-200 text-xs font-semibold hover:border-indigo-400 hover:bg-indigo-50/50 transition duration-150 flex justify-between items-center";
button.innerHTML = `<span>${opt}</span><span class="w-4 h-4 rounded-full border border-slate-300 inline-block flex-shrink-0"></span>`;
button.onclick = () => selectOption(idx, button);
optionsContainer.appendChild(button);
});
}
function selectOption(idx, btnElement) {
if (selectedOption !== null) return;
const current = quizQuestions[currentQuestionIdx];
selectedOption = idx;
const buttons = document.querySelectorAll('.quiz-opt-btn');
if (idx === current.correct) {
btnElement.classList.remove('border-slate-200', 'hover:border-indigo-400');
btnElement.classList.add('border-emerald-500', 'bg-emerald-50');
btnElement.querySelector('span:last-child').className = "w-4 h-4 rounded-full bg-emerald-500 border border-emerald-500 inline-block flex-shrink-0";
score++;
showFeedback(true, current.explanation);
} else {
btnElement.classList.remove('border-slate-200', 'hover:border-indigo-400');
btnElement.classList.add('border-rose-500', 'bg-rose-50');
btnElement.querySelector('span:last-child').className = "w-4 h-4 rounded-full bg-rose-500 border border-rose-500 inline-block flex-shrink-0";
buttons[current.correct].classList.remove('border-slate-200');
buttons[current.correct].classList.add('border-emerald-500', 'bg-emerald-50');
showFeedback(false, current.explanation);
}
document.getElementById('quiz-score').innerText = score;
document.getElementById('quiz-next-btn').classList.remove('hidden');
}
function showFeedback(isCorrect, text) {
const feedback = document.getElementById('quiz-feedback');
feedback.classList.remove('hidden', 'bg-emerald-100', 'text-emerald-800', 'bg-rose-100', 'text-rose-800');
if (isCorrect) {
feedback.classList.add('bg-emerald-100', 'text-emerald-800');
feedback.innerHTML = `🌟 Точен одговор! <br><span class="font-normal text-[11px]">${text}</span>`;
} else {
feedback.classList.add('bg-rose-100', 'text-rose-800');
feedback.innerHTML = `❌ Грешка, но еве зошто: <br><span class="font-normal text-[11px]">${text}</span>`;
}
}
function nextQuestion() {
currentQuestionIdx++;
loadQuestion();
}
function resetQuiz() {
currentQuestionIdx = 0;
score = 0;
document.getElementById('quiz-card').classList.remove('hidden');
document.getElementById('quiz-result').classList.add('hidden');
loadQuestion();
}
// 4. Interactive Compass Simulation Logic
let canvas, ctx;
let currentSim = 'add';
let currentSimStep = 0;
const simulations = {
add: {
title: "Собирање на два агли (α + β)",
desc: "За да собереме графички два агли, ги поставуваме еден до друг со помош на нивната ширина.",
steps: [
{
text: "Нацртај почетна права и теме О. Користи широк распон на шестар за да направиш лак од почетокот.",
draw: (ctx, width, height) => {
ctx.beginPath();
ctx.moveTo(50, height - 60);
ctx.lineTo(width - 50, height - 60);
ctx.strokeStyle = '#64748b';
ctx.lineWidth = 3;
ctx.stroke();
ctx.beginPath();
ctx.arc(100, height - 60, 5, 0, Math.PI * 2);
ctx.fillStyle = '#ef4444';
ctx.fill();
ctx.fillStyle = '#ffffff';
ctx.font = 'bold 14px monospace';
ctx.fillText("Теме O", 80, height - 80);
}
},
{
text: "Го пренесуваме аголот α (означен во сино). Цртаме долг лак од почетната права.",
draw: (ctx, width, height) => {
ctx.beginPath(); ctx.moveTo(50, height - 60); ctx.lineTo(width - 50, height - 60); ctx.strokeStyle = '#64748b'; ctx.lineWidth = 3; ctx.stroke();
ctx.beginPath(); ctx.arc(100, height - 60, 5, 0, Math.PI * 2); ctx.fillStyle = '#ef4444'; ctx.fill();
ctx.beginPath();
ctx.arc(100, height - 60, 150, 0, -Math.PI / 4, true);
ctx.strokeStyle = '#6366f1';
ctx.lineWidth = 4;
ctx.stroke();
ctx.beginPath();
ctx.moveTo(100, height - 60);
ctx.lineTo(100 + 180 * Math.cos(-Math.PI / 4), (height - 60) + 180 * Math.sin(-Math.PI / 4));
ctx.strokeStyle = '#6366f1';
ctx.lineWidth = 3;
ctx.stroke();
ctx.fillStyle = '#6366f1';
ctx.fillText("Агол α", 180, height - 120);
ctx.fillText("Точка Б", 100 + 160 * Math.cos(-Math.PI/4), (height - 60) + 160 * Math.sin(-Math.PI/4) - 10);
}
},
{
text: "Забоди го шестарот во точката Б и нанесете ја ширината на аголот β нанадвор (означен во црвено).",
draw: (ctx, width, height) => {
ctx.beginPath(); ctx.moveTo(50, height - 60); ctx.lineTo(width - 50, height - 60); ctx.strokeStyle = '#64748b'; ctx.lineWidth = 3; ctx.stroke();
ctx.beginPath(); ctx.arc(100, height - 60, 5, 0, Math.PI * 2); ctx.fillStyle = '#ef4444'; ctx.fill();
ctx.beginPath(); ctx.arc(100, height - 60, 150, 0, -Math.PI / 4, true); ctx.strokeStyle = '#6366f1'; ctx.lineWidth = 4; ctx.stroke();
ctx.beginPath(); ctx.moveTo(100, height - 60); ctx.lineTo(100 + 180 * Math.cos(-Math.PI / 4), (height - 60) + 180 * Math.sin(-Math.PI / 4)); ctx.strokeStyle = '#6366f1'; ctx.lineWidth = 3; ctx.stroke();
ctx.beginPath();
ctx.arc(100, height - 60, 150, -Math.PI / 4, -Math.PI / 4 - Math.PI / 6, true);
ctx.strokeStyle = '#f43f5e';
ctx.lineWidth = 4;
ctx.stroke();
ctx.fillStyle = '#f43f5e';
ctx.fillText("+ Агол β", 140, height - 200);
}
},
{
text: "Поврзи ја новата точка со темето. Го добиваме нивниот збир (α + β).",
draw: (ctx, width, height) => {
const endAngle = -Math.PI / 4 - Math.PI / 6;
ctx.beginPath(); ctx.moveTo(50, height - 60); ctx.lineTo(width - 50, height - 60); ctx.strokeStyle = '#64748b'; ctx.lineWidth = 3; ctx.stroke();
ctx.beginPath(); ctx.arc(100, height - 60, 5, 0, Math.PI * 2); ctx.fillStyle = '#ef4444'; ctx.fill();
ctx.beginPath(); ctx.arc(100, height - 60, 150, 0, endAngle, true); ctx.strokeStyle = '#a855f7'; ctx.lineWidth = 6; ctx.stroke();
ctx.beginPath();
ctx.moveTo(100, height - 60);
ctx.lineTo(100 + 200 * Math.cos(endAngle), (height - 60) + 200 * Math.sin(endAngle));
ctx.strokeStyle = '#a855f7';
ctx.lineWidth = 4;
ctx.stroke();
ctx.fillStyle = '#a855f7';
ctx.font = 'bold 16px Comfortaa';
ctx.fillText("ЗБИР: α + β", 120, height - 240);
}
}
]
},
sub: {
title: "Одземање на два агли (α - β)",
desc: "За да одземеме два агли, помалиот агол го нанесуваме наназад, од крајот кон почетокот на поголемиот.",
steps: [
{
text: "Нацртајте го поголемиот агол α со долг лак.",
draw: (ctx, width, height) => {
ctx.beginPath(); ctx.moveTo(50, height - 60); ctx.lineTo(width - 50, height - 60); ctx.strokeStyle = '#64748b'; ctx.lineWidth = 3; ctx.stroke();
ctx.beginPath(); ctx.arc(100, height - 60, 5, 0, Math.PI * 2); ctx.fillStyle = '#ef4444'; ctx.fill();
ctx.beginPath(); ctx.arc(100, height - 60, 150, 0, -Math.PI / 3, true); ctx.strokeStyle = '#6366f1'; ctx.lineWidth = 4; ctx.stroke();
ctx.beginPath(); ctx.moveTo(100, height - 60); ctx.lineTo(100 + 180 * Math.cos(-Math.PI / 3), (height - 60) + 180 * Math.sin(-Math.PI / 3)); ctx.strokeStyle = '#6366f1'; ctx.lineWidth = 3; ctx.stroke();
ctx.fillStyle = '#6366f1';
ctx.fillText("Агол α", 180, height - 160);
}
},
{
text: "Измерете го аголот β со шестар и нанесете го лакот од точката Б НАВНАТРЕ (наназад).",
draw: (ctx, width, height) => {
ctx.beginPath(); ctx.moveTo(50, height - 60); ctx.lineTo(width - 50, height - 60); ctx.strokeStyle = '#64748b'; ctx.lineWidth = 3; ctx.stroke();
ctx.beginPath(); ctx.arc(100, height - 60, 5, 0, Math.PI * 2); ctx.fillStyle = '#ef4444'; ctx.fill();
ctx.beginPath(); ctx.arc(100, height - 60, 150, 0, -Math.PI / 3, true); ctx.strokeStyle = '#6366f1'; ctx.lineWidth = 4; ctx.stroke();
ctx.beginPath(); ctx.moveTo(100, height - 60); ctx.lineTo(100 + 180 * Math.cos(-Math.PI / 3), (height - 60) + 180 * Math.sin(-Math.PI / 3)); ctx.strokeStyle = '#6366f1'; ctx.lineWidth = 3; ctx.stroke();
ctx.beginPath();
ctx.arc(100, height - 60, 150, -Math.PI / 3, -Math.PI / 3 + Math.PI / 8, false);
ctx.strokeStyle = '#f43f5e';
ctx.lineWidth = 4;
ctx.stroke();
ctx.fillStyle = '#f43f5e';
ctx.fillText("Одземаме β", 180, height - 110);
}
},
{
text: "Добиениот остаток ја претставува нивната разлика (α - β).",
draw: (ctx, width, height) => {
const diffAngle = -Math.PI / 3 + Math.PI / 8;
ctx.beginPath(); ctx.moveTo(50, height - 60); ctx.lineTo(width - 50, height - 60); ctx.strokeStyle = '#64748b'; ctx.lineWidth = 3; ctx.stroke();
ctx.beginPath(); ctx.arc(100, height - 60, 5, 0, Math.PI * 2); ctx.fillStyle = '#ef4444'; ctx.fill();
ctx.beginPath(); ctx.arc(100, height - 60, 150, 0, diffAngle, true); ctx.strokeStyle = '#10b981'; ctx.lineWidth = 6; ctx.stroke();
ctx.beginPath(); ctx.arc(100, height - 60, 150, diffAngle, -Math.PI/3, true); ctx.strokeStyle = '#f43f5e'; ctx.lineWidth = 4; ctx.stroke();
ctx.beginPath();
ctx.moveTo(100, height - 60);
ctx.lineTo(100 + 180 * Math.cos(diffAngle), (height - 60) + 180 * Math.sin(diffAngle));
ctx.strokeStyle = '#10b981';
ctx.lineWidth = 4;
ctx.stroke();
ctx.fillStyle = '#10b981';
ctx.font = 'bold 16px Comfortaa';
ctx.fillText("РАЗЛИКА: α - β", 140, height - 80);
}
}
]
},
bisectAngle: {
title: "Симетрала на Агол",
desc: "Симетралата го разделува аголот на два целосно еднакви дела.",
steps: [
{
text: "Нацртајте го аголот. Направете лак од темето за да ги добиете точките А и Б на краците.",
draw: (ctx, width, height) => {
ctx.beginPath(); ctx.moveTo(100, height - 60); ctx.lineTo(width - 100, height - 60); ctx.strokeStyle = '#64748b'; ctx.lineWidth = 3; ctx.stroke();
ctx.beginPath(); ctx.moveTo(100, height - 60); ctx.lineTo(100 + 180 * Math.cos(-Math.PI / 3.5), (height - 60) + 180 * Math.sin(-Math.PI / 3.5)); ctx.strokeStyle = '#64748b'; ctx.lineWidth = 3; ctx.stroke();
ctx.beginPath(); ctx.arc(100, height - 60, 5, 0, Math.PI * 2); ctx.fillStyle = '#ef4444'; ctx.fill();
ctx.beginPath(); ctx.arc(100, height - 60, 120, 0, -Math.PI / 3.5, true); ctx.strokeStyle = '#f59e0b'; ctx.lineWidth = 2; ctx.stroke();
ctx.fillStyle = '#f59e0b';
ctx.fillText("А", 210, height - 50);
ctx.fillText("Б", 100 + 115 * Math.cos(-Math.PI / 3.5), (height - 60) + 115 * Math.sin(-Math.PI / 3.5) - 10);
}
},
{
text: "Забодете го шестарот во точката А и направете лак во средината, па истото и од Б со ист отвор.",
draw: (ctx, width, height) => {
const armAngle = -Math.PI / 3.5;
ctx.beginPath(); ctx.moveTo(100, height - 60); ctx.lineTo(width - 100, height - 60); ctx.strokeStyle = '#64748b'; ctx.lineWidth = 3; ctx.stroke();
ctx.beginPath(); ctx.moveTo(100, height - 60); ctx.lineTo(100 + 180 * Math.cos(armAngle), (height - 60) + 180 * Math.sin(armAngle)); ctx.strokeStyle = '#64748b'; ctx.lineWidth = 3; ctx.stroke();
ctx.beginPath(); ctx.arc(100, height - 60, 120, 0, armAngle, true); ctx.strokeStyle = '#f59e0b'; ctx.lineWidth = 2; ctx.stroke();
ctx.beginPath(); ctx.arc(220, height - 60, 100, 2.2, 2.9); ctx.strokeStyle = '#6366f1'; ctx.lineWidth = 2; ctx.stroke();
const bx = 100 + 120 * Math.cos(armAngle);
const by = (height - 60) + 120 * Math.sin(armAngle);
ctx.beginPath(); ctx.arc(bx, by, 100, 0.4, 1.1); ctx.strokeStyle = '#f43f5e'; ctx.lineWidth = 2; ctx.stroke();
}
},
{
text: "Поврзете го темето О со пресечната точка на двата лака. Ова е симетралата s!",
draw: (ctx, width, height) => {
const armAngle = -Math.PI / 3.5;
const bisectorAngle = armAngle / 2;
ctx.beginPath(); ctx.moveTo(100, height - 60); ctx.lineTo(width - 100, height - 60); ctx.strokeStyle = '#64748b'; ctx.lineWidth = 3; ctx.stroke();
ctx.beginPath(); ctx.moveTo(100, height - 60); ctx.lineTo(100 + 180 * Math.cos(armAngle), (height - 60) + 180 * Math.sin(armAngle)); ctx.strokeStyle = '#64748b'; ctx.lineWidth = 3; ctx.stroke();
ctx.beginPath();
ctx.moveTo(100, height - 60);
ctx.lineTo(100 + 240 * Math.cos(bisectorAngle), (height - 60) + 240 * Math.sin(bisectorAngle));
ctx.strokeStyle = '#a855f7';
ctx.lineWidth = 4;
ctx.stroke();
ctx.fillStyle = '#a855f7';
ctx.font = 'bold 15px Comfortaa';
ctx.fillText("Симетрала s", 180, height - 130);
}
}
]
},
bisectLine: {
title: "Симетрала на Отсечка",
desc: "Симетралата ја разделува отсечката на два еднакви дела под агол од 90°.",
steps: [
{
text: "Нацртајте ја отсечката AB. Отворете го шестарот малку повеќе од половината од нејзината должина.",
draw: (ctx, width, height) => {
ctx.beginPath();
ctx.moveTo(100, height / 2);
ctx.lineTo(width - 100, height / 2);
ctx.strokeStyle = '#64748b';
ctx.lineWidth = 4;
ctx.stroke();
ctx.beginPath(); ctx.arc(100, height / 2, 6, 0, Math.PI * 2); ctx.fillStyle = '#ef4444'; ctx.fill();
ctx.beginPath(); ctx.arc(width - 100, height / 2, 6, 0, Math.PI * 2); ctx.fillStyle = '#ef4444'; ctx.fill();
ctx.fillStyle = '#ffffff';
ctx.fillText("A", 85, height / 2 + 5);
ctx.fillText("B", width - 85, height / 2 + 5);
}
},
{
text: "Забодете во А и Б, па нацртајте лаци над и под отсечката со ист отвор на шестарот.",
draw: (ctx, width, height) => {
ctx.beginPath(); ctx.moveTo(100, height / 2); ctx.lineTo(width - 100, height / 2); ctx.strokeStyle = '#64748b'; ctx.lineWidth = 4; ctx.stroke();
ctx.beginPath(); ctx.arc(100, height / 2, 6, 0, Math.PI * 2); ctx.fillStyle = '#ef4444'; ctx.fill();
ctx.beginPath(); ctx.arc(width - 100, height / 2, 6, 0, Math.PI * 2); ctx.fillStyle = '#ef4444'; ctx.fill();
ctx.beginPath(); ctx.arc(100, height / 2, 160, -Math.PI / 4, Math.PI / 4); ctx.strokeStyle = '#6366f1'; ctx.lineWidth = 2; ctx.stroke();
ctx.beginPath(); ctx.arc(width - 100, height / 2, 160, Math.PI - Math.PI / 4, Math.PI + Math.PI / 4); ctx.strokeStyle = '#f43f5e'; ctx.lineWidth = 2; ctx.stroke();
}
},
{
text: "Поврзете ги двете пресечни точки со права линија. Ова е симетралата (под 90°).",
draw: (ctx, width, height) => {
ctx.beginPath(); ctx.moveTo(100, height / 2); ctx.lineTo(width - 100, height / 2); ctx.strokeStyle = '#64748b'; ctx.lineWidth = 4; ctx.stroke();
ctx.beginPath(); ctx.arc(100, height / 2, 6, 0, Math.PI * 2); ctx.fillStyle = '#ef4444'; ctx.fill();
ctx.beginPath(); ctx.arc(width - 100, height / 2, 6, 0, Math.PI * 2); ctx.fillStyle = '#ef4444'; ctx.fill();
ctx.beginPath();
ctx.moveTo(width / 2, 40);
ctx.lineTo(width / 2, height - 40);
ctx.strokeStyle = '#10b981';
ctx.lineWidth = 4;
ctx.stroke();
ctx.fillStyle = '#10b981';
ctx.font = 'bold 15px Comfortaa';
ctx.fillText("Симетрала (90°)", width / 2 + 10, 60);
}
}
]
}
};
function initCanvas() {
canvas = document.getElementById('geometryCanvas');
if (!canvas) return;
ctx = canvas.getContext('2d');
const rect = canvas.parentNode.getBoundingClientRect();
canvas.width = rect.width;
canvas.height = rect.width * (3/4);
drawCurrentStep();
}
function loadSim(simKey) {
currentSim = simKey;
currentSimStep = 0;
document.querySelectorAll('.sim-btn').forEach(btn => {
btn.classList.remove('bg-indigo-100', 'text-indigo-700');
btn.classList.add('bg-slate-100', 'text-slate-600', 'hover:bg-slate-200');
});
document.getElementById(`btn-sim-${simKey}`).classList.remove('bg-slate-100', 'text-slate-600', 'hover:bg-slate-200');
document.getElementById(`btn-sim-${simKey}`).classList.add('bg-indigo-100', 'text-indigo-700');
const sim = simulations[currentSim];
document.getElementById('sim-title').innerText = sim.title;
document.getElementById('sim-description').innerText = sim.desc;
const stepsList = document.getElementById('sim-steps-list');
stepsList.innerHTML = '';
sim.steps.forEach((step, idx) => {
const stepEl = document.createElement('div');
stepEl.id = `sim-step-indicator-${idx}`;
stepEl.className = `flex gap-2 items-start text-xs p-2 rounded-lg transition-all ${idx === 0 ? 'bg-indigo-50 text-indigo-950 font-bold' : 'text-slate-400'}`;
stepEl.innerHTML = `
<span class="w-5 h-5 rounded-full flex items-center justify-center border font-bold ${idx === 0 ? 'bg-indigo-600 text-white' : 'border-slate-300'}">${idx + 1}</span>
<span class="flex-1">${step.text}</span>
`;
stepsList.appendChild(stepEl);
});
drawCurrentStep();
}
function drawCurrentStep() {
if (!ctx) return;
ctx.clearRect(0, 0, canvas.width, canvas.height);
const sim = simulations[currentSim];
const step = sim.steps[currentSimStep];
if (step && step.draw) step.draw(ctx, canvas.width, canvas.height);
sim.steps.forEach((_, idx) => {
const el = document.getElementById(`sim-step-indicator-${idx}`);
if (el) {
if (idx === currentSimStep) {
el.className = "flex gap-2 items-start text-xs p-2 rounded-lg bg-indigo-50 text-indigo-950 font-bold border-l-4 border-indigo-600";
el.querySelector('span:first-child').className = "w-5 h-5 rounded-full flex items-center justify-center font-bold bg-indigo-600 text-white";
} else if (idx < currentSimStep) {
el.className = "flex gap-2 items-start text-xs p-2 rounded-lg text-emerald-600 font-semibold opacity-70";
el.querySelector('span:first-child').className = "w-5 h-5 rounded-full flex items-center justify-center font-bold bg-emerald-500 text-white";
} else {
el.className = "flex gap-2 items-start text-xs p-2 rounded-lg text-slate-400";
el.querySelector('span:first-child').className = "w-5 h-5 rounded-full flex items-center justify-center font-bold border border-slate-300";
}
}
});
document.getElementById('prevStepBtn').disabled = currentSimStep === 0;
document.getElementById('prevStepBtn').style.opacity = currentSimStep === 0 ? '0.5' : '1';
const isLast = currentSimStep === sim.steps.length - 1;
document.getElementById('nextStepBtn').innerText = isLast ? "Повтори од почеток ↺" : "Следен чекор →";
}
function nextSimStep() {
const sim = simulations[currentSim];
if (currentSimStep < sim.steps.length - 1) {
currentSimStep++;
} else {
currentSimStep = 0;
}
drawCurrentStep();
}
function prevSimStep() {
if (currentSimStep > 0) {
currentSimStep--;
drawCurrentStep();
}
}
// 5. Transformation System Logic
let transCanvas, transCtx;
const initialTriangle = {
A: { x: 1, y: 2 },
B: { x: 4, y: 2 },
C: { x: 2, y: 5 }
};
let originalTriangle = JSON.parse(JSON.stringify(initialTriangle));
let currentTriangle = JSON.parse(JSON.stringify(initialTriangle));
let displayTriangle = JSON.parse(JSON.stringify(initialTriangle));
let animationProgress = 1;
let animationStartTriangle = null;
let animationEndTriangle = null;
let animationFrameId = null;
function initTransformCanvas() {
transCanvas = document.getElementById('transformCanvas');
if (!transCanvas) return;
transCtx = transCanvas.getContext('2d');
const rect = transCanvas.parentNode.getBoundingClientRect();
transCanvas.width = rect.width;
transCanvas.height = rect.width;
drawTransformations();
}
function drawTransformations() {
if (!transCtx) return;
const w = transCanvas.width;
const h = transCanvas.height;
transCtx.clearRect(0, 0, w, h);
const minVal = -8;
const maxVal = 8;
const gridRange = maxVal - minVal;
const scale = w / gridRange;
function toX(val) { return (val - minVal) * scale; }
function toY(val) { return h - ((val - minVal) * scale); }
// Grid lines
transCtx.strokeStyle = '#1e293b';
transCtx.lineWidth = 1;
for (let i = minVal; i <= maxVal; i++) {
transCtx.beginPath();
transCtx.moveTo(toX(i), 0);
transCtx.lineTo(toX(i), h);
transCtx.strokeStyle = i === 0 ? '#6366f1' : '#1e293b';
transCtx.lineWidth = i === 0 ? 3 : 0.5;
transCtx.stroke();
transCtx.beginPath();
transCtx.moveTo(0, toY(i));
transCtx.lineTo(w, toY(i));
transCtx.strokeStyle = i === 0 ? '#6366f1' : '#1e293b';
transCtx.lineWidth = i === 0 ? 3 : 0.5;
transCtx.stroke();
if (i !== 0 && i % 2 === 0) {
transCtx.fillStyle = '#94a3b8';
transCtx.font = '9px monospace';
transCtx.fillText(i, toX(i) - 4, toY(0) + 12);
transCtx.fillText(i, toX(0) - 14, toY(i) + 3);
}
}
// Original Triangle (Dashed)
transCtx.setLineDash([5, 5]);
transCtx.strokeStyle = 'rgba(99, 102, 241, 0.4)';
transCtx.lineWidth = 2;
transCtx.beginPath();
transCtx.moveTo(toX(originalTriangle.A.x), toY(originalTriangle.A.y));
transCtx.lineTo(toX(originalTriangle.B.x), toY(originalTriangle.B.y));
transCtx.lineTo(toX(originalTriangle.C.x), toY(originalTriangle.C.y));
transCtx.closePath();
transCtx.stroke();
transCtx.setLineDash([]);
transCtx.fillStyle = 'rgba(99, 102, 241, 0.6)';
transCtx.font = 'bold 11px Comfortaa';
transCtx.fillText("A", toX(originalTriangle.A.x) - 15, toY(originalTriangle.A.y) + 12);
transCtx.fillText("B", toX(originalTriangle.B.x) + 8, toY(originalTriangle.B.y) + 12);
transCtx.fillText("C", toX(originalTriangle.C.x) - 4, toY(originalTriangle.C.y) - 8);
if (animationProgress < 1) {
displayTriangle.A.x = animationStartTriangle.A.x + (animationEndTriangle.A.x - animationStartTriangle.A.x) * animationProgress;
displayTriangle.A.y = animationStartTriangle.A.y + (animationEndTriangle.A.y - animationStartTriangle.A.y) * animationProgress;
displayTriangle.B.x = animationStartTriangle.B.x + (animationEndTriangle.B.x - animationStartTriangle.B.x) * animationProgress;
displayTriangle.B.y = animationStartTriangle.B.y + (animationEndTriangle.B.y - animationStartTriangle.B.y) * animationProgress;
displayTriangle.C.x = animationStartTriangle.C.x + (animationEndTriangle.C.x - animationStartTriangle.C.x) * animationProgress;
displayTriangle.C.y = animationStartTriangle.C.y + (animationEndTriangle.C.y - animationStartTriangle.C.y) * animationProgress;
} else {
displayTriangle = JSON.parse(JSON.stringify(currentTriangle));
}
// Transformed Triangle (Purple solid)
transCtx.fillStyle = 'rgba(168, 85, 247, 0.2)';
transCtx.strokeStyle = '#a855f7';
transCtx.lineWidth = 4;
transCtx.beginPath();
transCtx.moveTo(toX(displayTriangle.A.x), toY(displayTriangle.A.y));
transCtx.lineTo(toX(displayTriangle.B.x), toY(displayTriangle.B.y));
transCtx.lineTo(toX(displayTriangle.C.x), toY(displayTriangle.C.y));
transCtx.closePath();
transCtx.fill();
transCtx.stroke();
transCtx.fillStyle = '#c084fc';
transCtx.font = 'bold 13px Comfortaa';
transCtx.fillText("A'", toX(displayTriangle.A.x) - 16, toY(displayTriangle.A.y) + 14);
transCtx.fillText("B'", toX(displayTriangle.B.x) + 10, toY(displayTriangle.B.y) + 14);
transCtx.fillText("C'", toX(displayTriangle.C.x) - 4, toY(displayTriangle.C.y) - 10);
document.getElementById('coord-a').innerText = `(${displayTriangle.A.x.toFixed(1)}, ${displayTriangle.A.y.toFixed(1)})`;
document.getElementById('coord-b').innerText = `(${displayTriangle.B.x.toFixed(1)}, ${displayTriangle.B.y.toFixed(1)})`;
document.getElementById('coord-c').innerText = `(${displayTriangle.C.x.toFixed(1)}, ${displayTriangle.C.y.toFixed(1)})`;
}
function animateTransformationStep() {
if (animationProgress < 1) {
animationProgress += 0.04;
if (animationProgress >= 1) {
animationProgress = 1;
currentTriangle = JSON.parse(JSON.stringify(animationEndTriangle));
}
drawTransformations();
animationFrameId = requestAnimationFrame(animateTransformationStep);
}
}
function applyTransform(type) {
if (animationFrameId) cancelAnimationFrame(animationFrameId);
animationStartTriangle = JSON.parse(JSON.stringify(currentTriangle));
animationEndTriangle = JSON.parse(JSON.stringify(currentTriangle));
let explainerText = "";
if (type === 'translate') {
animationEndTriangle.A.x += 4; animationEndTriangle.A.y -= 2;
animationEndTriangle.B.x += 4; animationEndTriangle.B.y -= 2;
animationEndTriangle.C.x += 4; animationEndTriangle.C.y -= 2;
explainerText = "<strong>Транслација:</strong> Секое теме се лизга за 4 единици десно и 2 единици надолу: (x + 4, y - 2).";
} else if (type === 'reflectY') {
animationEndTriangle.A.x = -animationEndTriangle.A.x;
animationEndTriangle.B.x = -animationEndTriangle.B.x;
animationEndTriangle.C.x = -animationEndTriangle.C.x;
explainerText = "<strong>Осна симетрија (Y-оска):</strong> Огледално пресликување преку Y-оската. Се менува само предзнакот на X: (-x, y).";
} else if (type === 'reflectX') {
animationEndTriangle.A.y = -animationEndTriangle.A.y;
animationEndTriangle.B.y = -animationEndTriangle.B.y;
animationEndTriangle.C.y = -animationEndTriangle.C.y;
explainerText = "<strong>Осна симетрија (X-оска):</strong> Огледално пресликување преку X-оската. Се менува само предзнакот на Y: (x, -y).";
} else if (type === 'rotate90') {
const tempA = { ...animationEndTriangle.A };
const tempB = { ...animationEndTriangle.B };
const tempC = { ...animationEndTriangle.C };
animationEndTriangle.A.x = -tempA.y; animationEndTriangle.A.y = tempA.x;
animationEndTriangle.B.x = -tempB.y; animationEndTriangle.B.y = tempB.x;
animationEndTriangle.C.x = -tempC.y; animationEndTriangle.C.y = tempC.x;
explainerText = "<strong>Ротација (90°):</strong> Вртење спротивно од стрелките околу координатниот почеток (0,0): (-y, x).";
}
document.getElementById('transform-explainer').innerHTML = explainerText;
animationProgress = 0;
animateTransformationStep();
}
function resetTransformation() {
if (animationFrameId) cancelAnimationFrame(animationFrameId);
animationStartTriangle = JSON.parse(JSON.stringify(currentTriangle));
animationEndTriangle = JSON.parse(JSON.stringify(initialTriangle));
document.getElementById('transform-explainer').innerText = "Вратено во почетна положба А(1,2), B(4,2), C(2,5).";
animationProgress = 0;
animateTransformationStep();
}
// 6. Transversal and Angle System Logic
let transversalCanvas, transversalCtx;
let transversalAngle = 60;
let highlightMode = 'none';
function initTransversalCanvas() {
transversalCanvas = document.getElementById('transversalCanvas');
if (!transversalCanvas) return;
transversalCtx = transversalCanvas.getContext('2d');
const rect = transversalCanvas.parentNode.getBoundingClientRect();
transversalCanvas.width = rect.width;
transversalCanvas.height = rect.width * (3/4);
drawTransversalSystem();
}
function updateTransversalAngle(val) {
transversalAngle = parseInt(val);
document.getElementById('transversal-angle-txt').innerText = `${transversalAngle}°`;
drawTransversalSystem();
}
function highlightTransversalAngles(mode) {
highlightMode = mode;
document.querySelectorAll('.t-angle-btn').forEach(btn => {
btn.classList.remove('border-indigo-500', 'bg-indigo-50/50');
btn.classList.add('border-slate-200', 'bg-slate-50');
});
document.getElementById(`btn-t-${mode}`).classList.remove('border-slate-200', 'bg-slate-50');
document.getElementById(`btn-t-${mode}`).classList.add('border-indigo-500', 'bg-indigo-50/50');
let infoText = "";
if (mode === 'corresponding') {
infoText = "<strong>🤝 Согласни агли:</strong> Се наоѓаат од иста страна на трансверзалата (еден внатрешен, еден надворешен). Тие се <strong>наполно еднакви</strong> (1 и 5, 2 и 6, 3 и 7, 4 и 8).";
} else if (mode === 'alternate') {
infoText = "<strong>🔀 Наизменични агли:</strong> Се наоѓаат од спротивни страни на трансверзалата (внатрешно или надворешно). Тие се <strong>еднакви</strong> (3 и 5, 4 и 6).";
} else if (mode === 'opposite') {
infoText = "<strong>⚔️ Накрсни агли:</strong> Спротивни агли во иста раскрсница. Тие секогаш се <strong>еднакви</strong> (1 и 3, 2 и 4, 5 и 7, 6 и 8).";
} else if (mode === 'supplementary') {
infoText = "<strong>🌓 Напоредни агли:</strong> Лежат еден до друг на иста права линија. Нивниот збир изнесува <strong>точно 180°</strong> (1 и 2, 5 и 6).";
}
document.getElementById('transversal-info').innerHTML = infoText;
drawTransversalSystem();
}
function drawTransversalSystem() {
if (!transversalCtx) return;
const w = transversalCanvas.width;
const h = transversalCanvas.height;
transversalCtx.clearRect(0, 0, w, h);
const y1 = h * 0.35;
const y2 = h * 0.70;
// Parallel lines
transversalCtx.strokeStyle = '#6366f1';
transversalCtx.lineWidth = 4;
transversalCtx.beginPath();
transversalCtx.moveTo(40, y1);
transversalCtx.lineTo(w - 40, y1);
transversalCtx.moveTo(40, y2);
transversalCtx.lineTo(w - 40, y2);
transversalCtx.stroke();
transversalCtx.fillStyle = '#818cf8';
transversalCtx.font = 'italic bold 14px Comfortaa';
transversalCtx.fillText("права p", w - 100, y1 - 10);
transversalCtx.fillText("права q", w - 100, y2 - 10);
// Transversal line
const radAngle = (transversalAngle * Math.PI) / 180;
const cx = w / 2;
const cy = (y1 + y2) / 2;
const tLength = h * 0.8;
const dx = (tLength / 2) * Math.cos(radAngle);
const dy = (tLength / 2) * Math.sin(radAngle);
transversalCtx.strokeStyle = '#f43f5e';
transversalCtx.lineWidth = 4;
transversalCtx.beginPath();
transversalCtx.moveTo(cx + dx, cy - dy);
transversalCtx.lineTo(cx - dx, cy + dy);
transversalCtx.stroke();
transversalCtx.fillStyle = '#fda4af';
transversalCtx.fillText("трансверзала t", cx + dx - 140, cy - dy + 25);
const tanAngle = Math.tan(radAngle);
const topX = cx - (y1 - cy) / tanAngle;
const botX = cx - (y2 - cy) / tanAngle;
transversalCtx.fillStyle = '#ffffff';
transversalCtx.beginPath();
transversalCtx.arc(topX, y1, 5, 0, Math.PI * 2);
transversalCtx.arc(botX, y2, 5, 0, Math.PI * 2);
transversalCtx.fill();
const angleVal = transversalAngle;
const supplementVal = 180 - transversalAngle;
const angles = {
1: { x: topX, y: y1, start: 0, end: -radAngle, val: angleVal, label: '1', posDist: 35, posAngle: -radAngle/2 },
2: { x: topX, y: y1, start: -radAngle, end: -Math.PI, val: supplementVal, label: '2', posDist: 35, posAngle: -Math.PI + (Math.PI-radAngle)/2 },
3: { x: topX, y: y1, start: -Math.PI, end: Math.PI - radAngle, val: angleVal, label: '3', posDist: 35, posAngle: Math.PI - radAngle/2 },
4: { x: topX, y: y1, start: Math.PI - radAngle, end: 0, val: supplementVal, label: '4', posDist: 35, posAngle: (Math.PI-radAngle)/2 },
5: { x: botX, y: y2, start: 0, end: -radAngle, val: angleVal, label: '5', posDist: 35, posAngle: -radAngle/2 },
6: { x: botX, y: y2, start: -radAngle, end: -Math.PI, val: supplementVal, label: '6', posDist: 35, posAngle: -Math.PI + (Math.PI-radAngle)/2 },
7: { x: botX, y: y2, start: -Math.PI, end: Math.PI - radAngle, val: angleVal, label: '7', posDist: 35, posAngle: Math.PI - radAngle/2 },
8: { x: botX, y: y2, start: Math.PI - radAngle, end: 0, val: supplementVal, label: '8', posDist: 35, posAngle: (Math.PI-radAngle)/2 }
};
function getColorForAngle(id) {
const acuteColor = '#10b981';
const obtuseColor = '#eab308';
if (highlightMode === 'corresponding') {
if (id === 1 || id === 5) return '#f43f5e';
if (id === 2 || id === 6) return '#3b82f6';
if (id === 3 || id === 7) return '#10b981';
if (id === 4 || id === 8) return '#eab308';
}
if (highlightMode === 'alternate') {
if (id === 3 || id === 5) return '#3b82f6';
if (id === 4 || id === 6) return '#f43f5e';
}
if (highlightMode === 'opposite') {
if (id === 1 || id === 3) return '#10b981';
if (id === 2 || id === 4) return '#a855f7';
if (id === 5 || id === 7) return '#10b981';
if (id === 6 || id === 8) return '#a855f7';
}
if (highlightMode === 'supplementary') {
if (id === 1 || id === 5) return '#10b981';
if (id === 2 || id === 6) return '#f43f5e';
}
return angles[id].val < 90 ? acuteColor : obtuseColor;
}
Object.keys(angles).forEach(id => {
const a = angles[id];
const color = getColorForAngle(parseInt(id));
transversalCtx.fillStyle = color + '33';
transversalCtx.beginPath();
transversalCtx.moveTo(a.x, a.y);
transversalCtx.arc(a.x, a.y, 25, a.start, a.end, true);
transversalCtx.closePath();
transversalCtx.fill();
transversalCtx.strokeStyle = color;
transversalCtx.lineWidth = 2.5;
transversalCtx.beginPath();
transversalCtx.arc(a.x, a.y, 25, a.start, a.end, true);
transversalCtx.stroke();
const lx = a.x + a.posDist * Math.cos(a.posAngle);
const ly = a.y + a.posDist * Math.sin(a.posAngle);
transversalCtx.fillStyle = '#ffffff';
transversalCtx.font = 'bold 12px monospace';
transversalCtx.fillText(`∡${a.label}`, lx - 8, ly + 4);
transversalCtx.fillStyle = color;
transversalCtx.font = '9px monospace';
transversalCtx.fillText(`${a.val}°`, lx - 10, ly + 14);
});
}
window.onload = function() {
loadQuestion();
initCanvas();
loadSim('add');
calculateArea();
initTransformCanvas();
initTransversalCanvas();
}
window.onresize = function() {
if (canvas) initCanvas();
if (transCanvas) initTransformCanvas();
if (transversalCanvas) initTransversalCanvas();
}
</script>
</body>
</html><div class="blogger-post-footer">www.bloglines.com</div>Anica Petkoskahttp://www.blogger.com/profile/12340858614356870735noreply@blogger.comtag:blogger.com,1999:blog-26523155.post-40005154728680387322026-05-17T08:15:54.469+02:002026-05-17T08:23:15.699+02:00Германски со Ана: Слободно време и Хобија<!DOCTYPE html>
<html lang="mk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Германски со Ана: Слободно време и Хобија</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;700;900&display=swap');
body { font-family: 'Plus Jakarta Sans', sans-serif; background-color: #f0f4f8; color: #1e293b; line-height: 1.6; }
.glass-card { background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 2rem; }
.tab-btn { padding: 1.25rem 1rem; font-weight: 700; color: #64748b; border-bottom: 4px solid transparent; transition: all 0.3s; flex: 1; text-align: center; }
.tab-btn.active { color: #2563eb; border-bottom-color: #2563eb; background: #eff6ff; }
.audio-item { transition: all 0.2s; border: 1px solid #e2e8f0; cursor: pointer; background: white; margin-bottom: 1rem; padding: 1.25rem; border-radius: 1.25rem; }
.audio-item:hover { border-color: #3b82f6; background-color: #f0f9ff; transform: scale(1.01); }
.translation-box { font-size: 0.95rem; color: #475569; font-style: italic; margin-top: 0.5rem; display: block; border-left: 3px solid #cbd5e1; padding-left: 1rem; }
.word-chip { transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; user-select: none; }
.word-chip:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.drop-zone { min-height: 80px; border: 2px dashed #cbd5e1; transition: all 0.3s ease; }
.hint-chip { cursor: pointer; transition: all 0.2s; border: 1px solid #e2e8f0; background: #f8fafc; padding: 0.6rem 1rem; border-radius: 1rem; font-size: 0.9rem; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; }
.hint-chip:hover { background-color: #eff6ff; border-color: #3b82f6; transform: translateY(-2px); box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); }
.quiz-option { cursor: pointer; transition: all 0.2s; border: 2px solid #e2e8f0; border-radius: 1rem; padding: 1rem; margin-bottom: 0.75rem; background: white; width: 100%; text-align: left; font-weight: 500; }
.quiz-option:hover { border-color: #3b82f6; background: #f0f9ff; }
.correct { border-color: #22c55e !important; background: #f0fdf4 !important; color: #15803d; font-weight: 700; }
.wrong { border-color: #ef4444 !important; background: #fef2f2 !important; color: #b91c1c; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.animate-fade-in { animation: fadeIn 0.4s ease-out forwards; }
@keyframes bounce-subtle { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.animate-bounce-subtle { animation: bounce-subtle 2s infinite; }
.animate-pulse-soft { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
</style>
</head>
<body class="py-10 px-4 md:px-8">
<div class="max-w-4xl mx-auto">
<!-- HEADER -->
<header class="text-center mb-12">
<span class="bg-blue-600 text-white px-5 py-1.5 rounded-full text-xs font-black mb-4 uppercase tracking-widest">ГЕРМАНСКИ ЗА ТЕБЕ 🇩🇪</span>
<h1 class="text-4xl md:text-5xl font-black text-slate-900 mb-2">Meine Freizeit 🚲</h1>
<p class="text-slate-500 italic text-lg">Интерактивна лекција за хобија, активности и правилен редослед на зборовите</p>
</header>
<!-- ТАБОВИ ЗА УЧЕЊЕ -->
<div class="glass-card overflow-hidden shadow-xl border border-slate-200 mb-10">
<div class="flex border-b border-slate-200 bg-slate-50 overflow-x-auto">
<button onclick="showTab('listening')" id="tab-listening" class="tab-btn active whitespace-nowrap">
<i class="fas fa-headphones mr-2"></i> 1. Слушање
</button>
<button onclick="showTab('reading')" id="tab-reading" class="tab-btn flex-1 whitespace-nowrap">
<i class="fas fa-book-open mr-2"></i> 2. Читање
</button>
<button onclick="showTab('grammar')" id="tab-grammar" class="tab-btn flex-1 whitespace-nowrap">
<i class="fas fa-lightbulb mr-2"></i> 3. Граматика
</button>
<button onclick="showTab('quiz')" id="tab-quiz" class="tab-btn flex-1 whitespace-nowrap text-orange-600">
<i class="fas fa-fire mr-2"></i> 4. Тест (10)
</button>
</div>
<!-- 1. СЕКЦИЈА ЗА СЛУШАЊЕ -->
<div id="content-listening" class="p-6 tab-content">
<div class="flex items-center justify-between mb-6">
<h3 class="text-xl font-bold text-slate-800"><i class="fas fa-volume-up text-blue-500 mr-2"></i>Слушај го текстот за хобија</h3>
<span class="text-xs bg-emerald-100 text-emerald-700 px-3 py-1 rounded-full font-black uppercase">Изговор: de-DE</span>
</div>
<p class="text-slate-500 mb-6 italic text-sm">Кликни на секоја реченица за да го слушнеш правилниот германски изговор.</p>
<div class="space-y-4">
<div onclick="speakText('In meiner Freizeit spiele ich gern Fußball.')" class="audio-item">
<div class="flex items-start gap-4">
<i class="fas fa-volume-up text-blue-500 mt-1"></i>
<div>
<p class="text-lg font-bold text-slate-800">"In meiner Freizeit spiele ich gern Fußball."</p>
<span class="translation-box">Во моето слободно време играм со задоволство фудбал.</span>
</div>
</div>
</div>
<div onclick="speakText('Manchmal am Wochenende fahre ich lieber mit meinem E-Bike und treffe meine Freunde, weil es Spaß macht.')" class="audio-item">
<div class="flex items-start gap-4">
<i class="fas fa-volume-up text-blue-500 mt-1"></i>
<div>
<p class="text-lg font-bold text-slate-800">"Manchmal am Wochenende fahre ich lieber mit meinem E-Bike und treffe meine Freunde, weil es Spaß macht."</p>
<span class="translation-box">Понекогаш за викендот претпочитам да го возам мојот електричен велосипед и се среќавам со пријателите, бидејќи тоа е забавно.</span>
</div>
</div>
</div>
<div onclick="speakText('Ich spiele oft Videospiele.')" class="audio-item">
<div class="flex items-start gap-4">
<i class="fas fa-volume-up text-blue-500 mt-1"></i>
<div>
<p class="text-lg font-bold text-slate-800">"Ich spiele oft Videospiele."</p>
<span class="translation-box">Често играм видео игри.</span>
</div>
</div>
</div>
</div>
</div>
<!-- 2. СЕКЦИЈА ЗА ЧИТАЊЕ -->
<div id="content-reading" class="p-6 tab-content hidden">
<h3 class="text-xl font-bold mb-4 text-slate-800"><i class="fas fa-book-open mr-2 text-blue-500"></i>Текстот на германски</h3>
<div class="bg-blue-50/50 p-6 rounded-2xl border-2 border-dashed border-blue-200 text-lg leading-relaxed text-slate-800 italic font-medium mb-6">
"In meiner Freizeit spiele ich gern Fußball. Manchmal am Wochenende fahre ich lieber mit meinem E-Bike und treffe meine Freunde, weil es Spaß macht. Ich spiele oft Videospiele."
</div>
<div class="bg-slate-50 p-6 rounded-2xl border border-slate-200">
<h4 class="font-bold text-slate-700 mb-2 uppercase text-xs tracking-widest">Превод на македонски:</h4>
<p class="text-slate-600 leading-relaxed italic">
„Во моето слободно време играм со задоволство фудбал. Понекогаш за викендот повеќе сакам да возам електричен велосипед и се среќавам со моите пријатели, бидејќи тоа прави забава. Често играм видео игри.“
</p>
</div>
</div>
<!-- 3. СЕКЦИЈА ЗА ГРАМАТИКА -->
<div id="content-grammar" class="p-6 tab-content hidden">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="p-5 bg-blue-50 rounded-2xl border border-blue-100">
<h4 class="font-bold text-blue-800 text-lg mb-3">Правило за возила (mit + Dativ)</h4>
<p class="text-sm text-slate-700 leading-relaxed">
Кога велиме дека патуваме или возиме некакво возило, во германскиот јазик секогаш користиме <strong>mit</strong> проследено со Датив:
</p>
<ul class="text-sm space-y-2 mt-3 text-slate-600">
<li>• <b>mit dem Fahrrad</b> (со велосипед)</li>
<li>• <b>mit meinem E-Bike</b> (со мојот електричен точак)</li>
<li>• <b>mit dem Auto</b> (со автомобил)</li>
</ul>
</div>
<div class="p-5 bg-emerald-50 rounded-2xl border border-emerald-100">
<h4 class="font-bold text-emerald-800 text-lg mb-3">Глагол: fahren (вози / патува)</h4>
<table class="w-full text-sm text-left border-collapse">
<tbody>
<tr class="border-b border-emerald-100"> <td class="py-2 font-bold">ich</td> <td><b>fahre</b> <span class="text-slate-400 font-normal">(без точки)</span></td> </tr>
<tr class="border-b border-emerald-100"> <td class="py-2 font-bold">du</td> <td><b>fährst</b> <span class="text-emerald-600">(со преглас ä)</span></td> </tr>
<tr class="border-b border-emerald-100"> <td class="py-2 font-bold">er / sie / es</td> <td><b>fährt</b> <span class="text-emerald-600">(со преглас ä)</span></td> </tr>
<tr> <td class="py-2 font-bold">wir / sie / Sie</td> <td><b>fahren</b></td> </tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- 4. СУПЕР КВИЗ (10 ПРАШАЊА) -->
<div id="content-quiz" class="p-6 tab-content hidden">
<div class="flex justify-between items-center mb-6 border-b pb-4">
<h3 class="text-xl font-bold text-slate-800"><i class="fas fa-fire text-orange-500 mr-2"></i>Провери го своето знаење (10 прашања)</h3>
<span class="text-xs bg-orange-100 text-orange-700 px-3 py-1 rounded-full font-black uppercase">Тест за напредни</span>
</div>
<div id="quiz-box" class="space-y-6">
<!-- Q1 -->
<div class="quiz-q-block border-b border-slate-100 pb-4">
<p class="font-bold text-slate-800 mb-3">1. Како е точно: „Во моето слободно време возам велосипед“?</p>
<div class="grid grid-cols-1 gap-2">
<button onclick="checkQuizItem(this, true)" class="quiz-option">In meiner Freizeit fahre ich Fahrrad.</button>
<button onclick="checkQuizItem(this, false)" class="quiz-option">In meiner Freizeit ich fahre Fahrrad.</button>
</div>
</div>
<!-- Q2 -->
<div class="quiz-q-block border-b border-slate-100 pb-4">
<p class="font-bold text-slate-800 mb-3">2. Која forma на глаголот "fahren" е точна за лицето "ich" (јас возам)?</p>
<div class="grid grid-cols-1 gap-2">
<button onclick="checkQuizItem(this, false)" class="quiz-option">ich fähre</button>
<button onclick="checkQuizItem(this, true)" class="quiz-option">ich fahre</button>
</div>
</div>
<!-- Q3 -->
<div class="quiz-q-block border-b border-slate-100 pb-4">
<p class="font-bold text-slate-800 mb-3">3. Кој предлог го користиме за превозни средства (со велосипед, со автомобил)?</p>
<div class="grid grid-cols-1 gap-2">
<button onclick="checkQuizItem(this, true)" class="quiz-option">mit</button>
<button onclick="checkQuizItem(this, false)" class="quiz-option">bei</button>
</div>
</div>
<!-- Q4 -->
<div class="quiz-q-block border-b border-slate-100 pb-4">
<p class="font-bold text-slate-800 mb-3">4. Како се пишува зборот „видео игри“ на германски?</p>
<div class="grid grid-cols-1 gap-2">
<button onclick="checkQuizItem(this, true)" class="quiz-option">Videospiele (споено со голема буква)</button>
<button onclick="checkQuizItem(this, false)" class="quiz-option">video spiele</button>
</div>
</div>
<!-- Q5 -->
<div class="quiz-q-block border-b border-slate-100 pb-4">
<p class="font-bold text-slate-800 mb-3">5. Каде оди конјугираниот глагол во реченица со сврзникот "weil"?</p>
<div class="grid grid-cols-1 gap-2">
<button onclick="checkQuizItem(this, false)" class="quiz-option">Веднаш на почетокот</button>
<button onclick="checkQuizItem(this, true)" class="quiz-option">На самиот крај на реченицата</button>
</div>
</div>
<!-- Q6 -->
<div class="quiz-q-block border-b border-slate-100 pb-4">
<p class="font-bold text-slate-800 mb-3">6. Како е точно: „Јас често играм видео игри“?</p>
<div class="grid grid-cols-1 gap-2">
<button onclick="checkQuizItem(this, true)" class="quiz-option">Ich spiele oft Videospiele.</button>
<button onclick="checkQuizItem(this, false)" class="quiz-option">Ich oft spiele Videospiele.</button>
</div>
</div>
<!-- Q7 -->
<div class="quiz-q-block border-b border-slate-100 pb-4">
<p class="font-bold text-slate-800 mb-3">7. Што значи зборот "am liebsten"?</p>
<div class="grid grid-cols-1 gap-2">
<button onclick="checkQuizItem(this, true)" class="quiz-option">најмногу сакам / најрадо</button>
<button onclick="checkQuizItem(this, false)" class="quiz-option">повеќе сакам</button>
</div>
</div>
<!-- Q8 -->
<div class="quiz-q-block border-b border-slate-100 pb-4">
<p class="font-bold text-slate-800 mb-3">8. Како гласи Датив од „die Freizeit“?</p>
<div class="grid grid-cols-1 gap-2">
<button onclick="checkQuizItem(this, true)" class="quiz-option">in meiner Freizeit</button>
<button onclick="checkQuizItem(this, false)" class="quiz-option">in meinem Freizeit</button>
</div>
</div>
<!-- Q9 -->
<div class="quiz-q-block border-b border-slate-100 pb-4">
<p class="font-bold text-slate-800 mb-3">9. Што значи прилогот "manchmal"?</p>
<div class="grid grid-cols-1 gap-2">
<button onclick="checkQuizItem(this, false)" class="quiz-option">секогаш</button>
<button onclick="checkQuizItem(this, true)" class="quiz-option">понекогаш</button>
</div>
</div>
<!-- Q10 -->
<div class="quiz-q-block pb-2">
<p class="font-bold text-slate-800 mb-3">10. Како гласи формата на "fahren" за "du" (ти возиш)?</p>
<div class="grid grid-cols-1 gap-2">
<button onclick="checkQuizItem(this, true)" class="quiz-option">du fährst (со преглас ä)</button>
<button onclick="checkQuizItem(this, false)" class="quiz-option">du fahrest</button>
</div>
</div>
</div>
</div>
</div> <!-- КРАЈ НА step-card ТАБОВИТЕ -->
<!-- 2. TE-KA-MO-LO ИНТЕРАКТИВЕН ПРЕДИЗВИК (Твојата игра) -->
<section class="glass-card p-8 mb-10 shadow-lg">
<div class="flex justify-between items-center mb-6">
<h2 class="text-2xl font-bold text-slate-800">🧩 Игра: Подреди ги речениците (Te-Ka-Mo-Lo)</h2>
<span id="taskCounter" class="bg-slate-900 text-white px-3 py-1 rounded-lg text-sm font-mono">1/4</span>
</div>
<p id="sentenceHint" class="text-slate-600 mb-6 italic bg-blue-50 p-4 rounded-xl border-l-4 border-blue-400 font-medium"></p>
<div class="mb-8">
<p class="text-xs font-bold text-slate-400 uppercase tracking-widest mb-3">Понудени зборови:</p>
<div id="wordBank" class="flex flex-wrap gap-2 p-4 bg-slate-50 rounded-2xl min-h-[60px]"></div>
</div>
<div class="mb-8">
<p class="text-xs font-bold text-blue-500 uppercase tracking-widest mb-3">Твојата реченица:</p>
<div id="targetZone" class="drop-zone flex flex-wrap gap-2 p-4 rounded-2xl bg-white shadow-inner"></div>
</div>
<div class="flex gap-4">
<button onclick="checkSentence()" class="bg-green-600 text-white px-8 py-3 rounded-xl font-bold hover:bg-green-700 shadow-md">Провери</button>
<button onclick="resetCurrentTask()" class="bg-slate-200 text-slate-700 px-6 py-3 rounded-xl font-bold hover:bg-slate-300">Ресетирај</button>
</div>
<div id="feedback" class="mt-6 p-4 rounded-xl text-center font-bold hidden"></div>
</section>
<!-- ЕДИНСТВЕН ПРЕДИЗВИК ЗА ПИШУВАЊЕ -->
<section class="glass-card p-8 shadow-xl border-t-8 border-amber-500">
<div class="flex items-center gap-3 mb-6">
<div class="bg-amber-100 text-amber-600 p-3 rounded-2xl">
<i class="fas fa-pen-nib text-xl"></i>
</div>
<div>
<h3 class="text-xl font-bold text-slate-800">✍️ Писмен предизвик: Твоите активности</h3>
<p class="text-sm text-slate-500">Напиши за твоето слободно време. Кликни на детските фрази подолу за да ти помогнат!</p>
</div>
</div>
<div class="mb-6 space-y-4">
<!-- Phrases specifically tailored for kids -->
<div>
<h4 class="text-xs font-bold text-slate-400 uppercase tracking-widest mb-2">Активности кои ги прават децата:</h4>
<div class="flex flex-wrap gap-2">
<button onclick="addPhrase('ich spiele gern Fußball')" class="hint-chip">⚽ играм фудбал</button>
<button onclick="addPhrase('ich spiele Videospiele')" class="hint-chip">🎮 играм видео игри</button>
<button onclick="addPhrase('ich treffe meine Freunde')" class="hint-chip">👥 се среќавам со пријатели</button>
<button onclick="addPhrase('ich fahre Fahrrad')" class="hint-chip">🚲 возам точак</button>
<button onclick="addPhrase('ich fahre mit meinem E-Bike')" class="hint-chip">⚡ возам електричен точак</button>
<button onclick="addPhrase('ich höre Musik')" class="hint-chip">🎵 слушам музика</button>
</div>
</div>
<div>
<h4 class="text-xs font-bold text-slate-400 uppercase tracking-widest mb-2">Насоки за редослед и сврзници:</h4>
<div class="flex flex-wrap gap-2">
<button onclick="addPhrase('In meiner Freizeit ')" class="hint-chip bg-blue-50 border-blue-100 text-blue-700">In meiner Freizeit...</button>
<button onclick="addPhrase('Am Wochenende ')" class="hint-chip bg-blue-50 border-blue-100 text-blue-700">Am Wochenende...</button>
<button onclick="addPhrase(', weil es Spaß macht.')" class="hint-chip bg-rose-50 border-rose-100 text-rose-700">...забавно е (*weil)</button>
</div>
</div>
</div>
<textarea id="challengeInput" rows="5" class="w-full p-5 rounded-2xl border-2 border-slate-200 focus:border-amber-400 focus:ring-4 focus:ring-amber-50 outline-none mb-4 text-lg transition-all" placeholder="Schreib hier... (Кликни на некоја од фразите погоре за почеток)"></textarea>
<button onclick="submitChallenge()" class="w-full bg-slate-900 text-white py-4 rounded-2xl font-bold shadow-lg hover:bg-slate-800 transform active:scale-95 transition-all">
ОБЈАВИ ГО ТЕКСТОТ
</button>
<div id="challengeSubmissions" class="mt-8 space-y-4"></div>
</section>
</div>
<script>
// Менување на табови
function showTab(tabId) {
document.querySelectorAll('.tab-content').forEach(c => c.classList.add('hidden'));
document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
document.getElementById('content-' + tabId).classList.remove('hidden');
document.getElementById('tab-' + tabId).classList.add('active');
}
// Проверка во Квизот со аудио повратна информација
function checkQuizItem(element, isCorrect) {
const siblings = element.parentElement.children;
for (let s of siblings) { s.classList.remove('correct', 'wrong'); }
if(isCorrect) {
element.classList.add('correct');
speakText("Richtig!");
} else {
element.classList.add('wrong');
speakText("Falsch, probier noch mal.");
}
}
// Игра за подредување (Te-Ka-Mo-Lo) - НОВИ РЕЧЕНИЦИ СО МИНАТО ВРЕМЕ И ХОБИЈА!
const tasks = [
{ hint: "Во моето слободно време вчера имав многу забава.", words: ["In meiner Freizeit", "hatte", "ich", "gestern", "viel Spaß"], correct: "In meiner Freizeit hatte ich gestern viel Spaß" },
{ hint: "Вчера бев во паркот со мојот велосипед.", words: ["Gestern", "war", "ich", "im Park", "mit meinem Fahrrad"], correct: "Gestern war ich im Park mit meinem Fahrrad" },
{ hint: "За викендот имав време за моите пријатели.", words: ["Am Wochenende", "hatte", "ich", "Zeit", "für meine Freunde"], correct: "Am Wochenende hatte ich Zeit für meine Freunde" },
{ hint: "Иако вчера имав многу работа, јас бев среќен.", words: ["Obwohl", "ich gestern", "viel Arbeit", "hatte,", "war", "ich", "glücklich"], correct: "Obwohl ich gestern viel Arbeit hatte, war ich glücklich" }
];
let currentIdx = 0;
function loadTask() {
const task = tasks[currentIdx];
document.getElementById('taskCounter').innerText = `${currentIdx + 1}/${tasks.length}`;
document.getElementById('sentenceHint').innerText = `Преведи: "${task.hint}"`;
const bank = document.getElementById('wordBank');
const target = document.getElementById('targetZone');
const feedback = document.getElementById('feedback');
bank.innerHTML = ""; target.innerHTML = ""; feedback.className = "hidden";
[...task.words].sort(() => Math.random() - 0.5).forEach(w => {
const span = document.createElement('div');
span.className = "word-chip bg-white border-2 border-slate-200 px-4 py-2 rounded-xl font-bold text-slate-700 shadow-sm";
span.innerText = w;
span.onclick = () => moveWord(span);
bank.appendChild(span);
});
}
function moveWord(el) {
const target = document.getElementById('targetZone');
const bank = document.getElementById('wordBank');
if (el.parentElement === bank) {
el.className = "word-chip bg-blue-600 text-white px-4 py-2 rounded-xl font-bold shadow-md animate-bounce-subtle";
target.appendChild(el);
} else {
el.className = "word-chip bg-white border-2 border-slate-200 px-4 py-2 rounded-xl font-bold text-slate-700";
bank.appendChild(el);
}
}
function checkSentence() {
const target = document.getElementById('targetZone');
const feedback = document.getElementById('feedback');
const userStr = Array.from(target.children).map(c => c.innerText).join(' ');
feedback.classList.remove('hidden');
if (userStr === tasks[currentIdx].correct) {
feedback.className = "mt-6 p-4 rounded-xl text-center font-bold bg-green-100 text-green-700 border border-green-200";
feedback.innerHTML = `✨ Точно! ${currentIdx < tasks.length - 1 ? '<button onclick="nextTask()" class="ml-4 underline">Следно →</button>' : 'Ги заврши сите вежби!'}`;
} else {
feedback.className = "mt-6 p-4 rounded-xl text-center font-bold bg-red-100 text-red-700 border border-red-200";
feedback.innerText = "❌ Пробај пак. Следи го Te-Ka-Mo-Lo редоследот!";
}
}
function nextTask() {
if (currentIdx < tasks.length - 1) { currentIdx++; loadTask(); }
}
function resetCurrentTask() { loadTask(); }
// Додавање на детски фрази во писмениот предизвик
function addPhrase(phrase) {
const input = document.getElementById('challengeInput');
input.value += phrase + " ";
input.focus();
}
// Објавување на писмениот состав
function submitChallenge() {
const input = document.getElementById('challengeInput');
if (!input.value.trim()) return;
const container = document.getElementById('challengeSubmissions');
const post = document.createElement('div');
post.className = "p-5 bg-white rounded-2xl border-l-4 border-l-amber-400 border border-slate-200 shadow-sm animate-fade-in";
post.innerHTML = `<p class="italic text-slate-700 font-medium">"${input.value}"</p>`;
container.prepend(post);
input.value = "";
}
// Аудио изговор (Германски глас)
function speakText(text) {
window.speechSynthesis.cancel();
const msg = new SpeechSynthesisUtterance(text);
msg.lang = 'de-DE';
msg.rate = 0.85; // Малку побавно за полесно учење
window.speechSynthesis.speak(msg);
}
window.onload = () => { loadTask(); };
</script>
</body>
</html><div class="blogger-post-footer">www.bloglines.com</div>Anica Petkoskahttp://www.blogger.com/profile/12340858614356870735noreply@blogger.comtag:blogger.com,1999:blog-26523155.post-82418593182919306352026-05-16T18:46:13.244+02:002026-05-17T02:01:15.708+02:00 Минато време и Te-Ka-Mo-Lo<!DOCTYPE html>
<html lang="mk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Германски со Ана: Минато време и Te-Ka-Mo-Lo</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;800&display=swap');
body { font-family: 'Plus Jakarta Sans', sans-serif; background-color: #f0f4f8; }
.glass-card { background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 2rem; }
.word-chip { transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; user-select: none; }
.word-chip:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.drop-zone { min-height: 80px; border: 2px dashed #cbd5e1; transition: all 0.3s ease; }
.drop-zone.active { border-color: #3b82f6; background-color: #eff6ff; }
@keyframes bounce-subtle { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.animate-pulse-soft { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
</style>
</head>
<body class="py-10 px-4 md:px-8">
<div class="max-w-4xl mx-auto">
<!-- HEADER -->
<header class="text-center mb-12">
<span class="bg-blue-600 text-white px-4 py-1 rounded-full text-sm font-bold tracking-widest uppercase mb-4 inline-block">Лекција 2.5</span>
<h1 class="text-4xl md:text-6xl font-extrabold text-slate-900 mb-4">Германски со Ана 🇩🇪</h1>
<p class="text-xl text-slate-600 italic">Минато време и Te-Ka-Mo-Lo редослед</p>
</header>
<!-- 1. ТЕКСТ -->
<section class="glass-card p-8 mb-10 shadow-xl border-l-8 border-blue-500">
<div class="flex items-center gap-4 mb-6">
<div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center text-blue-600 shadow-inner">
<i class="fas fa-headphones-alt text-xl"></i>
</div>
<h2 class="text-2xl font-bold text-slate-800">1. Вежба за читање</h2>
</div>
<div class="bg-slate-50 p-6 rounded-2xl border border-slate-100 mb-6">
<p id="textToRead" class="text-xl md:text-2xl leading-relaxed text-slate-800 font-medium">
Gestern <span class="text-blue-600 font-bold">hatte</span> Ana großen Hunger. Sie <span class="text-red-600 font-bold italic">aß</span> schnell eine Pizza in der Küche. Obwohl es viel Arbeit in der Schule <span class="text-blue-600 font-bold">war</span>, <span class="text-blue-600 font-bold">war</span> sie glücklich.
</p>
</div>
<button onclick="playGermanAudio()" class="bg-blue-600 hover:bg-blue-700 text-white px-8 py-4 rounded-2xl font-bold flex items-center gap-3 shadow-lg transition-all active:scale-95">
<i class="fas fa-play-circle text-xl"></i> Слушај изговор
</button>
</section>
<!-- СЛИКА -->
<div class="separator mb-10" style="clear: both;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfVUHL2wydbsUlQ7hnnWXW-D2uPqrzSXSwNO-R1C2EV7w55Qzv4cA3heGlbxtinBqhNDFd1ynLDEVgQu6QCAssVzHO6TdqtOzeXuEM_6ULcfgTLENfQ3iypOyjanjwvxleGhQLaKl9UWwuJUoq65CTVAdc-fI9A35ZiaIzSgn-9hELvRzP3Mw7pA/s1600/Pr%C3%A4teritum.png" style="display: block; text-align: center;">
<img alt="Präteritum Grammatik" class="rounded-3xl shadow-md border max-w-full h-auto mx-auto" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfVUHL2wydbsUlQ7hnnWXW-D2uPqrzSXSwNO-R1C2EV7w55Qzv4cA3heGlbxtinBqhNDFd1ynLDEVgQu6QCAssVzHO6TdqtOzeXuEM_6ULcfgTLENfQ3iypOyjanjwvxleGhQLaKl9UWwuJUoq65CTVAdc-fI9A35ZiaIzSgn-9hELvRzP3Mw7pA/s1600/Pr%C3%A4teritum.png"/>
</a>
</div>
<!-- 2. TE-KA-MO-LO ПРЕДИЗВИК -->
<section class="glass-card p-8 mb-10 shadow-lg">
<div class="flex justify-between items-center mb-6">
<h2 class="text-2xl font-bold text-slate-800">2. Подреди ја реченицата</h2>
<span id="taskCounter" class="bg-slate-900 text-white px-3 py-1 rounded-lg text-sm font-mono">1/4</span>
</div>
<p id="sentenceHint" class="text-slate-600 mb-6 italic bg-blue-50 p-4 rounded-xl border-l-4 border-blue-400 font-medium"></p>
<div class="mb-8">
<p class="text-xs font-bold text-slate-400 uppercase tracking-widest mb-3">Зборови:</p>
<div id="wordBank" class="flex flex-wrap gap-2 p-4 bg-slate-50 rounded-2xl min-h-[60px]"></div>
</div>
<div class="mb-8">
<p class="text-xs font-bold text-blue-500 uppercase tracking-widest mb-3">Твојата реченица (Te-Ka-Mo-Lo):</p>
<div id="targetZone" class="drop-zone flex flex-wrap gap-2 p-4 rounded-2xl bg-white shadow-inner"></div>
</div>
<div class="flex gap-4">
<button onclick="checkSentence()" class="bg-green-600 text-white px-8 py-3 rounded-xl font-bold hover:bg-green-700 shadow-md">Провери</button>
<button onclick="resetCurrentTask()" class="bg-slate-200 text-slate-700 px-6 py-3 rounded-xl font-bold hover:bg-slate-300">Ресетирај</button>
</div>
<div id="feedback" class="mt-6 p-4 rounded-xl text-center font-bold hidden"></div>
</section>
<!-- 3. КВИЗ -->
<section class="glass-card p-8 mb-10 shadow-lg">
<h2 class="text-2xl font-bold text-slate-800 mb-8 border-b pb-4">3. Квиз: Провери го знаењето</h2>
<div id="quizContainer" class="space-y-8"></div>
<div class="mt-10 text-center">
<button onclick="evaluateFinalQuiz()" class="bg-slate-900 text-white px-12 py-5 rounded-2xl font-black text-xl hover:scale-105 transition-transform shadow-2xl">ПРОВЕРИ КВИЗ</button>
<div id="quizResult" class="mt-8 hidden p-10 rounded-3xl border-4"></div>
</div>
</section>
<!-- 4. ПРЕДИЗВИК ЗА ПИШУВАЊЕ -->
<section class="glass-card p-8 mb-10 shadow-lg bg-gradient-to-br from-indigo-50 to-white border-t-8 border-indigo-500">
<h2 class="text-2xl font-bold text-indigo-900 mb-4 flex items-center gap-3">
<i class="fas fa-feather-alt"></i> 4. Предизвик за пишување
</h2>
<p class="text-indigo-700 mb-6">Користејќи ги зборовите <strong>aß</strong> (јадеше), <strong>war</strong> (беше) и <strong>obwohl</strong> (иако), напиши две реченици за твојот вчерашен ден.</p>
<textarea id="writingChallenge" class="w-full p-6 rounded-2xl border-2 border-indigo-100 focus:border-indigo-400 focus:ring-0 text-lg italic mb-4" rows="4" placeholder="Напиши на германски..."></textarea>
<button onclick="submitWriting()" class="bg-indigo-600 text-white px-10 py-4 rounded-2xl font-bold hover:bg-indigo-700 flex items-center gap-2">
<i class="fas fa-paper-plane"></i> Објави во блогот
</button>
<div id="publishedPosts" class="mt-8 space-y-4"></div>
</section>
</div>
<script>
function playGermanAudio() {
const text = document.getElementById('textToRead').innerText;
if ('speechSynthesis' in window) {
window.speechSynthesis.cancel();
const utterance = new SpeechSynthesisUtterance(text);
utterance.lang = 'de-DE';
utterance.rate = 0.8;
window.speechSynthesis.speak(utterance);
}
}
const tasks = [
{ hint: "Ана јадеше вчера брзо пица во кујната.", words: ["Ana", "aß", "gestern", "schnell", "Pizza", "in der Küche"], correct: "Ana aß gestern schnell Pizza in der Küche" },
{ hint: "Ние имавме денес многу работа во училиште.", words: ["Wir", "hatten", "heute", "viel Arbeit", "in der Schule"], correct: "Wir hatten heute viel Arbeit in der Schule" },
{ hint: "Иако беше Сабота, Ана јадеше јаболко.", words: ["Obwohl", "es Samstag war,", "aß", "Ana", "einen Apfel"], correct: "Obwohl es Samstag war, aß Ana einen Apfel" },
{ hint: "Ти беше вчера многу паметен дома.", words: ["Du", "warst", "gestern", "sehr klug", "zu Hause"], correct: "Du warst gestern sehr klug zu Hause" }
];
let currentIdx = 0;
function loadTask() {
const task = tasks[currentIdx];
document.getElementById('taskCounter').innerText = `${currentIdx + 1}/${tasks.length}`;
document.getElementById('sentenceHint').innerText = `Преведи: "${task.hint}"`;
const bank = document.getElementById('wordBank');
const target = document.getElementById('targetZone');
const feedback = document.getElementById('feedback');
bank.innerHTML = ""; target.innerHTML = ""; feedback.className = "hidden";
[...task.words].sort(() => Math.random() - 0.5).forEach(w => {
const span = document.createElement('div');
span.className = "word-chip bg-white border-2 border-slate-200 px-4 py-2 rounded-xl font-bold text-slate-700 shadow-sm";
span.innerText = w;
span.onclick = () => moveWord(span);
bank.appendChild(span);
});
}
function moveWord(el) {
const target = document.getElementById('targetZone');
const bank = document.getElementById('wordBank');
if (el.parentElement === bank) {
el.className = "word-chip bg-blue-600 text-white px-4 py-2 rounded-xl font-bold shadow-md animate-bounce-subtle";
target.appendChild(el);
} else {
el.className = "word-chip bg-white border-2 border-slate-200 px-4 py-2 rounded-xl font-bold text-slate-700";
bank.appendChild(el);
}
}
function checkSentence() {
const target = document.getElementById('targetZone');
const feedback = document.getElementById('feedback');
const userStr = Array.from(target.children).map(c => c.innerText).join(' ');
feedback.classList.remove('hidden');
if (userStr === tasks[currentIdx].correct) {
feedback.className = "mt-6 p-4 rounded-xl text-center font-bold bg-green-100 text-green-700 border border-green-200";
feedback.innerHTML = `✨ Точно! ${currentIdx < tasks.length - 1 ? '<button onclick="nextTask()" class="ml-4 underline">Следно →</button>' : 'Ги заврши сите вежби!'}`;
} else {
feedback.className = "mt-6 p-4 rounded-xl text-center font-bold bg-red-100 text-red-700 border border-red-200";
feedback.innerText = "❌ Пробај пак. Следи го Te-Ka-Mo-Lo редоследот!";
}
}
function nextTask() {
if (currentIdx < tasks.length - 1) { currentIdx++; loadTask(); }
}
function resetCurrentTask() { loadTask(); }
const quizItems = [
{ q: "Како гласи 'јадеше' за ТОЈ (er)?", o: ["esste", "aß", "aßen"], a: 1 },
{ q: "Кој е правилниот редослед (Te-Ka-Mo-Lo)?", o: ["Време - Место - Начин", "Време - Причина - Начин - Место", "Место - Време - Причина"], a: 1 },
{ q: "Што значи 'Obwohl'?", o: ["Затоа што", "Иако", "Кога"], a: 1 },
{ q: "Глаголот по 'Obwohl' во зависна реченица оди:", o: ["На второ место", "На прво место", "На последно место"], a: 2 }
];
function initQuiz() {
const container = document.getElementById('quizContainer');
container.innerHTML = quizItems.map((item, i) => `
<div class="p-6 bg-slate-50 rounded-2xl border border-slate-100">
<p class="text-lg font-bold mb-4 text-slate-800">${i+1}. ${item.q}</p>
<div class="grid grid-cols-1 md:grid-cols-3 gap-3">
${item.o.map((opt, oi) => `
<label class="flex items-center p-4 bg-white border-2 border-slate-200 rounded-xl cursor-pointer hover:border-blue-400 transition-colors">
<input type="radio" name="q${i}" value="${oi}" class="w-5 h-5 accent-blue-600">
<span class="ml-3 font-medium">${opt}</span>
</label>
`).join('')}
</div>
</div>
`).join('');
}
function evaluateFinalQuiz() {
let score = 0;
quizItems.forEach((item, i) => {
const selected = document.querySelector(`input[name="q${i}"]:checked`);
if (selected && parseInt(selected.value) === item.a) score++;
});
const res = document.getElementById('quizResult');
res.classList.remove('hidden');
res.className = `mt-8 p-10 rounded-3xl border-4 ${score === quizItems.length ? 'bg-green-50 border-green-200 text-green-900' : 'bg-blue-50 border-blue-200 text-blue-900'}`;
res.innerHTML = `<h3 class="text-3xl font-black mb-2">${score === quizItems.length ? 'СОВРШЕНО! 🏆' : 'Резултат: ' + score + '/' + quizItems.length}</h3>`;
}
function submitWriting() {
const input = document.getElementById('writingChallenge');
const list = document.getElementById('publishedPosts');
if (!input.value.trim()) return;
const post = document.createElement('div');
post.className = "p-6 bg-white rounded-2xl border border-indigo-100 shadow-sm animate-pulse-soft";
post.innerHTML = `
<div class="flex items-center gap-3 mb-3">
<div class="w-8 h-8 bg-indigo-600 rounded-full flex items-center justify-center text-white text-xs font-bold uppercase">А</div>
<span class="font-bold text-indigo-900 text-sm">Ана објави:</span>
</div>
<p class="text-slate-700 italic text-lg leading-relaxed">"${input.value}"</p>
`;
list.prepend(post);
input.value = "";
setTimeout(() => post.classList.remove('animate-pulse-soft'), 2000);
}
window.onload = () => { loadTask(); initQuiz(); };
</script>
</body>
</html><div class="blogger-post-footer">www.bloglines.com</div>Anica Petkoskahttp://www.blogger.com/profile/12340858614356870735noreply@blogger.comtag:blogger.com,1999:blog-26523155.post-53947212891293603042026-05-16T17:04:42.603+02:002026-05-16T17:04:42.604+02:00Германски јазик, Hatten und Waren<!DOCTYPE html>
<html lang="mk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Нашиот клас - Германски јазик</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
.word-btn { transition: all 0.2s; cursor: pointer; user-select: none; }
.word-btn:active { transform: scale(0.95); }
.drop-area { min-height: 70px; transition: all 0.3s; }
@keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } }
.speaking-active { animation: pulse 1s infinite; background-color: #ef4444 !important; }
</style>
</head>
<body class="bg-slate-100 font-sans text-slate-900 pb-20">
<div class="max-w-4xl mx-auto px-4 py-8">
<!-- Header -->
<header class="bg-white p-8 rounded-3xl shadow-sm border border-slate-200 mb-8 text-center">
<h1 class="text-4xl font-extrabold text-blue-600 mb-2">Германски за Тебе 🇩🇪</h1>
<p class="text-xl text-slate-500 italic">Лекција: Минато време и Te-Ka-Mo-Lo</p>
</header>
<!-- 1. Грамматика: Табели -->
<section class="bg-white p-6 rounded-3xl shadow-sm border border-slate-200 mb-8">
<h2 class="text-2xl font-bold mb-6 text-slate-800 border-b pb-2"><i class="fas fa-book-open mr-2 text-blue-500"></i>1. Глаголи во Präteritum</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<!-- SEIN -->
<div>
<h3 class="text-center font-bold text-lg mb-3 text-blue-600">sein (war) - сум/бев</h3>
<table class="w-full text-sm text-left border-collapse bg-slate-50 rounded-xl overflow-hidden">
<thead class="bg-blue-100 uppercase">
<tr><th class="p-3">Lice</th><th class="p-3">Form</th></tr>
</thead>
<tbody>
<tr class="border-b"> <td class="p-3 font-medium text-slate-500">ich</td> <td class="p-3 font-bold">war</td> </tr>
<tr class="border-b"> <td class="p-3 font-medium text-slate-500">du</td> <td class="p-3 font-bold">warst</td> </tr>
<tr class="border-b"> <td class="p-3 font-medium text-slate-500">er/sie/es</td> <td class="p-3 font-bold">war</td> </tr>
<tr class="border-b"> <td class="p-3 font-medium text-slate-500">wir</td> <td class="p-3 font-bold">waren</td> </tr>
<tr class="border-b"> <td class="p-3 font-medium text-slate-500">ihr</td> <td class="p-3 font-bold">wart</td> </tr>
<tr> <td class="p-3 font-medium text-slate-500">sie / Sie</td> <td class="p-3 font-bold">waren</td> </tr>
</tbody>
</table>
</div>
<!-- HABEN -->
<div>
<h3 class="text-center font-bold text-lg mb-3 text-red-600">haben (hatte) - имам/имав</h3>
<table class="w-full text-sm text-left border-collapse bg-slate-50 rounded-xl overflow-hidden">
<thead class="bg-red-100 uppercase">
<tr><th class="p-3">Lice</th><th class="p-3">Form</th></tr>
</thead>
<tbody>
<tr class="border-b"> <td class="p-3 font-medium text-slate-500">ich</td> <td class="p-3 font-bold">hatte</td> </tr>
<tr class="border-b"> <td class="p-3 font-medium text-slate-500">du</td> <td class="p-3 font-bold">hattest</td> </tr>
<tr class="border-b"> <td class="p-3 font-medium text-slate-500">er/sie/es</td> <td class="p-3 font-bold">hatte</td> </tr>
<tr class="border-b"> <td class="p-3 font-medium text-slate-500">wir</td> <td class="p-3 font-bold">hatten</td> </tr>
<tr class="border-b"> <td class="p-3 font-medium text-slate-500">ihr</td> <td class="p-3 font-bold">hattet</td> </tr>
<tr> <td class="p-3 font-medium text-slate-500">sie / Sie</td> <td class="p-3 font-bold">hatten</td> </tr>
</tbody>
</table>
</div>
</div>
</section>
<!-- 2. Аудио Секција -->
<section class="bg-white p-6 rounded-3xl shadow-sm border border-slate-200 mb-8">
<div class="flex flex-col sm:flex-row justify-between items-center gap-4 mb-4">
<h2 class="text-2xl font-bold"><i class="fas fa-headphones mr-2 text-purple-500"></i>2. Слушање</h2>
<button id="speakBtn" onclick="toggleSpeech()" class="bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-full font-bold shadow-lg transition-all flex items-center gap-2 active:scale-95">
<i class="fas fa-play" id="playIcon"></i> <span id="speakBtnText">Пушти Аудио</span>
</button>
</div>
<div id="textToRead" class="bg-slate-50 p-8 rounded-2xl border-l-8 border-blue-400 text-xl leading-relaxed italic text-slate-700">
Gestern war ich in der Schule. Mein Lieblingsfach war Geometrie. Obwohl die Geometrie ein bisschen schwierig war, hatte ich viele Hausaufgaben. Ich habe sie heute fleißig zu Hause gemacht. Morgen haben wir einen Test.
</div>
<p id="speechStatus" class="mt-3 text-xs text-blue-500 font-mono h-4"></p>
</section>
<!-- 3. Te-Ka-Mo-Lo Вежба -->
<section class="bg-white p-6 rounded-3xl shadow-sm border border-slate-200 mb-8">
<div class="flex justify-between items-end mb-4 border-b pb-2">
<h2 class="text-2xl font-bold">3. Te-Ka-Mo-Lo Редослед</h2>
<span id="drag-progress" class="text-sm font-bold text-blue-400 uppercase">Задача 1/7</span>
</div>
<p id="task-desc" class="text-slate-600 mb-4 font-medium italic"></p>
<div class="mb-4">
<p class="text-xs font-bold text-slate-400 uppercase mb-2">Избери збор:</p>
<div id="source-words" class="flex flex-wrap gap-2 p-4 bg-slate-50 rounded-2xl min-h-[60px] border border-slate-100"></div>
</div>
<div class="mb-6">
<p class="text-xs font-bold text-slate-400 uppercase mb-2 text-blue-500">Твојот одговор:</p>
<div id="target-words" class="drop-area flex flex-wrap gap-2 p-4 bg-blue-50 rounded-2xl border-2 border-dashed border-blue-200"></div>
</div>
<div class="flex gap-3">
<button onclick="checkSentence()" class="bg-green-600 text-white px-8 py-3 rounded-xl font-bold hover:bg-green-700 shadow-md transition-all">Провери</button>
<button onclick="resetSentence()" class="bg-slate-200 text-slate-700 px-6 py-3 rounded-xl font-bold hover:bg-slate-300 transition-all">Ресетирај</button>
<button id="nextTaskBtn" onclick="goToNextTask()" class="hidden bg-blue-600 text-white px-8 py-3 rounded-xl font-bold shadow-lg hover:bg-blue-700 animate-bounce">Следна задача <i class="fas fa-arrow-right ml-2"></i></button>
</div>
<div id="sentence-feedback" class="mt-4 p-3 rounded-xl text-center font-bold hidden"></div>
</section>
<!-- 4. Квиз -->
<section class="bg-white p-6 rounded-3xl shadow-sm border border-slate-200 mb-8">
<h2 class="text-2xl font-bold mb-6 border-b pb-2">4. Финален Квиз</h2>
<div id="quiz-area" class="space-y-10"></div>
<div class="mt-12 text-center">
<button onclick="evaluateQuiz()" class="bg-slate-900 text-white px-12 py-4 rounded-2xl font-black text-xl hover:bg-black shadow-2xl transition-all">ПРОВЕРИ КВИЗ</button>
<div id="quiz-final-score" class="mt-8 hidden p-8 rounded-3xl border-4"></div>
</div>
</section>
<!-- 5. Предизвик за пишување -->
<section class="bg-white p-8 rounded-3xl shadow-sm border border-slate-200">
<h2 class="text-2xl font-bold mb-4"><i class="fas fa-pen-nib mr-2 text-amber-500"></i>5. Предизвик за пишување</h2>
<div class="bg-amber-50 p-6 rounded-2xl border-l-4 border-amber-400 mb-6">
<p class="font-medium text-amber-900 leading-relaxed text-lg">
Опишете го вашиот омилен училиштен предмет (Lieblingsfach). Каков беше тој предмет вчера? Користете ги глаголите <strong>war</strong> или <strong>hatte</strong> и сврзниците <strong>weil</strong> или <strong>obwohl</strong>.
</p>
</div>
<textarea id="commentBox" class="w-full p-5 border-2 border-slate-200 rounded-2xl focus:ring-4 focus:ring-blue-100 focus:outline-none text-lg" rows="4" placeholder="Gestern hatte ich Geometrie..."></textarea>
<button onclick="postComment()" class="mt-4 bg-slate-800 text-white px-10 py-3 rounded-xl font-bold hover:bg-black transition shadow-md">Објави коментар</button>
</section>
</div>
<script>
const synth = window.speechSynthesis;
let isSpeaking = false;
let voicesLoaded = false;
// Поправена Speech функција
function initSpeech() {
synth.getVoices();
synth.onvoiceschanged = () => { voicesLoaded = true; };
}
initSpeech();
function toggleSpeech() {
const btnText = document.getElementById('speakBtnText');
const icon = document.getElementById('playIcon');
const btn = document.getElementById('speakBtn');
const status = document.getElementById('speechStatus');
if (isSpeaking) {
synth.cancel();
stopUI();
return;
}
const text = document.getElementById('textToRead').innerText;
const utterance = new SpeechSynthesisUtterance(text);
const voices = synth.getVoices();
const deVoice = voices.find(v => v.lang.startsWith('de')) || voices[0];
utterance.voice = deVoice;
utterance.lang = 'de-DE';
utterance.rate = 0.85;
utterance.onstart = () => {
isSpeaking = true;
btnText.innerText = "Стопирај";
icon.className = "fas fa-stop";
btn.classList.add('speaking-active');
status.innerText = "🔊 СЛУШАТЕ...";
};
utterance.onend = () => { stopUI(); status.innerText = "✅ ЗАВРШЕНО"; };
utterance.onerror = () => { stopUI(); status.innerText = "❌ Проблем со аудиото."; };
synth.speak(utterance);
}
function stopUI() {
isSpeaking = false;
document.getElementById('speakBtnText').innerText = "Пушти Аудио";
document.getElementById('playIcon').className = "fas fa-play";
document.getElementById('speakBtn').classList.remove('speaking-active');
}
// --- Te-Ka-Mo-Lo Логика ---
const dragTasks = [
{ mk: "Денес имам тест во училиште.", de: ["Heute", "habe", "ich", "einen Test", "in der Schule"], order: [1,2,3,4,5] },
{ mk: "Ние бевме вчера во Берлин.", de: ["Wir", "waren", "gestern", "in Berlin"], order: [1,2,3,4] },
{ mk: "Јас имав вчера многу работа дома.", de: ["Ich", "hatte", "gestern", "viel Arbeit", "zu Hause"], order: [1,2,3,4,5] },
{ mk: "Таа одеше брзо во градината.", de: ["Sie", "ging", "schnell", "in den Garten"], order: [1,2,3,4] },
{ mk: "Тој јадеше наутро јаболко во кујната.", de: ["Er", "aß", "am Morgen", "einen Apfel", "in der Küche"], order: [1,2,3,4,5] },
{ mk: "Децата играат сега во паркот.", de: ["Die Kinder", "spielen", "jetzt", "im Park"], order: [1,2,3,4] },
{ mk: "Таткото работи денес во канцеларијата.", de: ["Der Vater", "arbeitet", "heute", "im Büro"], order: [1,2,3,4] }
];
let currentTaskIdx = 0;
function initDragTask() {
const task = dragTasks[currentTaskIdx];
document.getElementById('drag-progress').innerText = `Задача ${currentTaskIdx + 1}/7`;
document.getElementById('task-desc').innerText = `Подреди: „${task.mk}“`;
const source = document.getElementById('source-words');
const target = document.getElementById('target-words');
source.innerHTML = "";
target.innerHTML = "";
document.getElementById('sentence-feedback').classList.add('hidden');
document.getElementById('nextTaskBtn').classList.add('hidden');
const shuffled = [...task.de].sort(() => Math.random() - 0.5);
shuffled.forEach(word => {
const btn = document.createElement('div');
btn.className = "word-btn bg-white border-2 border-slate-200 px-4 py-2 rounded-xl font-bold text-slate-700 shadow-sm hover:border-blue-300 hover:text-blue-600";
btn.innerText = word;
btn.onclick = () => moveWord(btn);
source.appendChild(btn);
});
}
function moveWord(btn) {
const source = document.getElementById('source-words');
const target = document.getElementById('target-words');
if (btn.parentElement === source) {
btn.className = "word-btn bg-blue-600 text-white px-4 py-2 rounded-xl font-bold shadow-md transform scale-105";
target.appendChild(btn);
} else {
btn.className = "word-btn bg-white border-2 border-slate-200 px-4 py-2 rounded-xl font-bold text-slate-700 shadow-sm";
source.appendChild(btn);
}
}
function checkSentence() {
const target = document.getElementById('target-words');
const feedback = document.getElementById('sentence-feedback');
const task = dragTasks[currentTaskIdx];
const resultWords = Array.from(target.children).map(b => b.innerText);
if (resultWords.length < task.de.length) {
feedback.className = "mt-4 p-3 rounded-xl text-center font-bold bg-amber-100 text-amber-800 block";
feedback.innerText = "⚠️ Внесете ги сите зборови!";
return;
}
const isCorrect = resultWords.join(' ') === task.de.join(' ');
feedback.classList.remove('hidden');
if (isCorrect) {
feedback.className = "mt-4 p-3 rounded-xl text-center font-bold bg-green-100 text-green-800 block";
feedback.innerText = "✨ Точно! Браво!";
document.getElementById('nextTaskBtn').classList.remove('hidden');
} else {
feedback.className = "mt-4 p-3 rounded-xl text-center font-bold bg-red-100 text-red-800 block";
feedback.innerText = "❌ Не е точно. Пробај пак!";
}
}
function resetSentence() { initDragTask(); }
function goToNextTask() {
if (currentTaskIdx < dragTasks.length - 1) {
currentTaskIdx++;
initDragTask();
} else {
alert("Честитки! Ги завршивте сите задачи за подредување.");
}
}
// --- Квиз Логика ---
const quizData = [
{ q: "Како е 'Јас имав'?", o: ["Ich war", "Ich hatte", "Ich habe"], a: 1 },
{ q: "Што значи 'Geometrie'?", o: ["Географија", "Гимнастика", "Геометрија"], a: 2 },
{ q: "Кој е точниот Te-Ka-Mo-Lo ред?", o: ["Време-Причина-Начин-Место", "Место-Начин-Време", "Начин-Место-Време"], a: 0 },
{ q: "Глаголот 'sein' (минато) за 'ние' (wir) е?", o: ["wart", "warst", "waren"], a: 2 },
{ q: "Што користиме за небројни именки (многу работа)?", o: ["viele", "viel", "еin"], a: 1 },
{ q: "Што значи 'obwohl'?", o: ["Затоа што", "Иако", "Кога"], a: 1 },
{ q: "Каде оди глаголот во 'Obwohl...' реченица?", o: ["На второ место", "На почеток", "На крај"], a: 2 },
{ q: "Како се вели 'бевме' (ihr - вие)?", o: ["waren", "wart", "war"], a: 1 },
{ q: "Што е 'Lieblingsfach'?", o: ["Омилен предмет", "Омилена храна", "Омилен град"], a: 0 },
{ q: "Кој збор е за множина (многу јаболка)?", o: ["viel", "viele", "ein"], a: 1 }
];
function initQuiz() {
const container = document.getElementById('quiz-area');
container.innerHTML = quizData.map((d, i) => `
<div class="bg-slate-50 p-6 rounded-3xl border border-slate-100">
<p class="text-lg font-black mb-4 text-slate-800">${i+1}. ${d.q}</p>
<div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
${d.o.map((opt, oi) => `
<label class="flex items-center p-4 bg-white border-2 border-slate-200 rounded-2xl cursor-pointer hover:border-blue-400 transition-all shadow-sm">
<input type="radio" name="q${i}" value="${oi}" class="w-5 h-5 accent-blue-600">
<span class="ml-3 font-bold text-slate-700">${opt}</span>
</label>
`).join('')}
</div>
</div>
`).join('');
}
function evaluateQuiz() {
let score = 0;
quizData.forEach((d, i) => {
const sel = document.querySelector(`input[name="q${i}"]:checked`);
if (sel && parseInt(sel.value) === d.a) score++;
});
const final = document.getElementById('quiz-final-score');
final.classList.remove('hidden');
const percent = (score / quizData.length) * 100;
if (percent >= 70) {
final.className = "mt-8 p-8 rounded-3xl border-4 bg-green-50 border-green-200 text-green-900";
final.innerHTML = `<h3 class="text-3xl font-black mb-2">🎉 ОДЛИЧНО!</h3><p class="text-xl">Погодивте ${score} од ${quizData.length} прашања.</p>`;
} else {
final.className = "mt-8 p-8 rounded-3xl border-4 bg-red-50 border-red-200 text-red-900";
final.innerHTML = `<h3 class="text-3xl font-black mb-2">💡 ПРОДОЛЖИ СО ВЕЖБАЊЕ</h3><p class="text-xl">Погодивте ${score} од ${quizData.length} прашања. Прочитајте ја пак граматиката.</p>`;
}
final.scrollIntoView({ behavior: 'smooth' });
}
function postComment() {
const val = document.getElementById('commentBox').value;
if (val.trim()) {
alert("Браво! Твојот коментар е подготвен за објавување.");
} else {
alert("Напиши реченица прво!");
}
}
window.onload = () => {
initDragTask();
initQuiz();
initSpeech();
};
</script>
</body>
</html><div class="blogger-post-footer">www.bloglines.com</div>Anica Petkoskahttp://www.blogger.com/profile/12340858614356870735noreply@blogger.com