Skip to content

.2350076982984809:b04b1c998b5c88ac2ad23429181e06dc_69e19fee4729af53a2c5ee93.69e1a5334729af53a2c5eef5.69e1a532539b0f5417043bd3:Trae CN.T(2026/4/17 11:12:52) #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
tyro880 wants to merge 2 commits into
base: main
Choose a base branch
from
Open

.2350076982984809:b04b1c998b5c88ac2ad23429181e06dc_69e19fee4729af53a2c5ee93.69e1a5334729af53a2c5eef5.69e1a532539b0f5417043bd3:Trae CN.T(2026/4/17 11:12:52) #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7060605
feat(界面): 添加分类网格布局并实现中文国际化
tyro880 Apr 17, 2026
f4d98a7
feat: 添加错题库功能并更新题目数量显示
tyro880 Apr 17, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
470 changes: 470 additions & 0 deletions css/style.css
View file
Open in desktop

Large diffs are not rendered by default.

96 changes: 60 additions & 36 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="sr">
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Expand All @@ -8,67 +8,91 @@
<link href="https://fonts.googleapis.com/css2?family=Baloo+2:wght@400..800&family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/animations.css">
<link rel="stylesheet" href="css/style.css">
<title>Kviz</title>
<title>知识测验</title>
</head>
<body>

<div id="wrapper">
<section>
<header>
<h1><a href="index.html">KVIZ<sub>by GB</sub></a></h1>
<h1><a href="index.html">知识测验<sub>by GB</sub></a></h1>

</header>
<p id="togglePitanja">╰┈➤Izaberi oblast</p>
<p id="togglePitanja">╰┈➤选择分类</p>

<div id="setPitanja">
<h3 class="zatvori" onclick="zatvoriSet()">X</h3>
<div class="pitanja">
<h3 onclick="oblast(this)"><a href="oblasti/istorija/istorija.html">Istorija</a></h3>
</div>
<div class="pitanja">
<h3 onclick="oblast(this)"><a href="oblasti/geografija/geografija.html">Geografija</a></h3>
</div>
<div class="pitanja">
<h3 onclick="oblast(this)"><a href="#">Hemija</a></h3>
</div>
<div class="pitanja">
<h3 onclick="oblast(this)"><a href="#">Fizika</a></h3>
</div>
<div class="pitanja">
<h3 onclick="oblast(this)"><a href="#">Knjizevnost</a></h3>
</div>
<div class="pitanja">
<h3 onclick="oblast(this)"><a href="#">Biologija</a></h3>
</div>
<div class="pitanja">
<h3 onclick="oblast(this)"><a href="#">Sociologija</a></h3>
</div>
<div class="pitanja">
<h3 onclick="oblast(this)"><a href="#">Informatika</a></h3>
</div>
<div class="pitanja">
<h3 onclick="oblast(this)"><a href="#">Engleski</a></h3>
<div class="kategorije-grid">
<div class="kategorija-kartica" onclick="izaberiKategoriju(this, 'istorija')">
<span class="emoji">📜</span>
<h3>历史</h3>
<p class="broj-pitanja">（5题）</p>
</div>
<div class="kategorija-kartica" onclick="izaberiKategoriju(this, 'geografija')">
<span class="emoji">🌍</span>
<h3>地理</h3>
<p class="broj-pitanja">（5题）</p>
</div>
<div class="kategorija-kartica" onclick="izaberiKategoriju(this, 'hemija')">
<span class="emoji">🧪</span>
<h3>化学</h3>
<p class="broj-pitanja">（5题）</p>
</div>
<div class="kategorija-kartica" onclick="izaberiKategoriju(this, 'fizika')">
<span class="emoji">⚛️</span>
<h3>物理</h3>
<p class="broj-pitanja">（5题）</p>
</div>
<div class="kategorija-kartica" onclick="izaberiKategoriju(this, 'knjizevnost')">
<span class="emoji">📚</span>
<h3>文学</h3>
<p class="broj-pitanja">（5题）</p>
</div>
<div class="kategorija-kartica" onclick="izaberiKategoriju(this, 'biologija')">
<span class="emoji">🧬</span>
<h3>生物</h3>
<p class="broj-pitanja">（5题）</p>
</div>
<div class="kategorija-kartica" onclick="izaberiKategoriju(this, 'sociologija')">
<span class="emoji">👥</span>
<h3>社会学</h3>
<p class="broj-pitanja">（5题）</p>
</div>
<div class="kategorija-kartica" onclick="izaberiKategoriju(this, 'informatika')">
<span class="emoji">💻</span>
<h3>计算机</h3>
<p class="broj-pitanja">（5题）</p>
</div>
<div class="kategorija-kartica" onclick="izaberiKategoriju(this, 'engleski')">
<span class="emoji">📖</span>
<h3>英语</h3>
<p class="broj-pitanja">（5题）</p>
</div>
</div>
</div>
<br>
<h3 id="nije_dodato"></h3>

</section>

<div id="bottom-buttons">
<button id="wrong-questions-btn" onclick="window.location.href='wrong-questions.html'">📝 错题库</button>
</div>

<footer onclick="footer()">
<p>Kviz napravio Goran Basic</p>
<p>作者：Goran Basic</p>
</footer>

<div class="overlay"></div>

</div>
<div id="modal">
<h2 id="zatvoriModal" onclick="zatvori()" class="zatvori">X</h2>
<h2>O autoru</h2>
<p>Zovem se Goran Basic imam 19 godina i student sam ITS – Visoke škole strukovnih studija za informacione tehnologije.</p>
<p>Ovaj kviz je nastao iz lične radoznalosti i želje da znanje stečeno na fakultetu primenim u praksi.</p>
<p>Kroz izradu projekta radio sam na logici pitanja, bodovanju i funkcionalnosti aplikacije, koristeći HTML, CSS i JavaScript.</p>
<p>Cilj mi je bio da kroz samostalni rad dodatno unapredim veštine web programiranja i testiram sopstvene ideje.</p>
<h2>关于作者</h2>
<p>我叫Goran Basic，19岁，是ITS - 高等信息技术职业学院的学生。</p>
<p>这个测验是出于个人好奇心和将在大学学到的知识应用于实践的愿望而创建的。</p>
<p>在项目开发过程中，我使用HTML、CSS和JavaScript研究了问题逻辑、评分和应用功能。</p>
<p>我的目标是通过独立工作进一步提高我的Web编程技能并测试我自己的想法。</p>
</div>


Expand Down
42 changes: 25 additions & 17 deletions js/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,24 +11,32 @@ toggle.addEventListener("click", () => {

});

oblast = (dugme) => {
let ispis = dugme.innerText;
let poslednje_slovo = ispis.substring(ispis.length - 1);
console.log(poslednje_slovo);
if(poslednje_slovo === 'a'){
ispis_final = ispis.substring(0, ispis.length-1);
nije_dodato.innerText = `Jos nije dodat kviz iz ${ispis_final}e`;

}
if(ispis === 'Engleski'){
nije_dodato.innerText = `Jos nije dodat kviz iz Engleskog`;
}else if(ispis === 'Knjizevnost'){
nije_dodato.innerText = `Jos nije dodat kviz iz Knjizevnosti`;
izaberiKategoriju = (element, kategorija) => {
const dostupneKategorije = {
'istorija': '历史',
'geografija': '地理'
};

if (dostupneKategorije[kategorija]) {
window.location.href = `oblasti/${kategorija}/${kategorija}.html`;
} else {
const kategorijaNazivi = {
'hemija': '化学',
'fizika': '物理',
'knjizevnost': '文学',
'biologija': '生物',
'sociologija': '社会学',
'informatika': '计算机',
'engleski': '英语'
};

const naziv = kategorijaNazivi[kategorija] || kategorija;
nije_dodato.innerText = `${naziv}分类的测验即将推出！`;

nije_dodato.style.animation = 'none';
void nije_dodato.offsetWidth;
nije_dodato.style.animation = 'shake 1s 1';
}

nije_dodato.style.animation = 'none';
void nije_dodato.offsetWidth;
nije_dodato.style.animation = 'shake 1s 1';
}

const zatvoriSet = () => {
Expand Down
189 changes: 189 additions & 0 deletions js/wrong-questions.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,189 @@
let pogresnaPitanja = [];
let trenutnoPitanjeIndeks = 0;
let odabranaOpcija = null;

const ucitajPogresnaPitanja = () => {
pogresnaPitanja = JSON.parse(localStorage.getItem('wrongQuestions') || '[]');
return pogresnaPitanja;
};

const prikaziPogresnaPitanja = () => {
const lista = document.getElementById('wrong-questions-list');
const brojac = document.getElementById('wrong-questions-count');
const practiceBtn = document.getElementById('practice-btn');
const clearBtn = document.getElementById('clear-btn');

ucitajPogresnaPitanja();

brojac.textContent = `共 ${pogresnaPitanja.length} 道错题`;

if (pogresnaPitanja.length === 0) {
lista.innerHTML = `
<div class="no-wrong-questions">
<p>🎉 太棒了！</p>
<p>目前没有错题记录</p>
</div>
`;
practiceBtn.style.display = 'none';
clearBtn.style.display = 'none';
return;
}

practiceBtn.style.display = 'block';
clearBtn.style.display = 'block';

let html = '';
pogresnaPitanja.forEach((pitanje, index) => {
html += `
<div class="wrong-question-item">
<h4>${index + 1}. ${pitanje.pitanje}</h4>
<div class="answer-info user-answer">
<strong>❌ 你的答案：</strong>${pitanje.korisnikovOdgovor}
</div>
<div class="answer-info correct-answer">
<strong>✅ 正确答案：</strong>${pitanje.tacanOdgovor}
</div>
<div class="category">
<strong>📚 分类：</strong>${pitanje.kategorija}
</div>
</div>
`;
});

lista.innerHTML = html;
};

const obrisiSveGreske = () => {
if (pogresnaPitanja.length === 0) {
alert('没有错题可以清空！');
return;
}

if (confirm('确定要清空所有错题吗？此操作无法撤销。')) {
localStorage.removeItem('wrongQuestions');
prikaziPogresnaPitanja();
document.getElementById('practice-mode').style.display = 'none';
}
};

const pocniVezbu = () => {
ucitajPogresnaPitanja();

if (pogresnaPitanja.length === 0) {
alert('没有错题可以练习！');
return;
}

trenutnoPitanjeIndeks = 0;
odabranaOpcija = null;

document.getElementById('wrong-questions-list').style.display = 'none';
document.getElementById('practice-mode').style.display = 'block';
document.getElementById('practice-total').textContent = pogresnaPitanja.length;

prikaziTrenutnoPitanje();
};

const prikaziTrenutnoPitanje = () => {
const pitanje = pogresnaPitanja[trenutnoPitanjeIndeks];
const container = document.getElementById('practice-question');
const rezultat = document.getElementById('practice-result');
const dugmici = document.getElementById('practice-buttons');

document.getElementById('practice-current').textContent = trenutnoPitanjeIndeks + 1;

rezultat.style.display = 'none';
dugmici.style.display = 'none';
odabranaOpcija = null;

let opcijeHtml = '';
pitanje.opcije.forEach((opcija, index) => {
opcijeHtml += `
<div class="practice-option" onclick="izaberiOpciju(this, '${opcija}')">
${opcija}
</div>
`;
});

container.innerHTML = `
<h4>${pitanje.pitanje}</h4>
<div class="practice-options">
${opcijeHtml}
</div>
<div class="action-buttons" style="margin-top: 20px;">
<button id="check-practice-btn" onclick="proveriVezbu()" style="background: var(--gradient_pozadina); color: white; border: 2px solid var(--ivica);">
检查答案
</button>
</div>
`;
};

const izaberiOpciju = (element, opcija) => {
document.querySelectorAll('.practice-option').forEach(el => {
el.classList.remove('selected');
});
element.classList.add('selected');
odabranaOpcija = opcija;
};

const proveriVezbu = () => {
if (!odabranaOpcija) {
alert('请先选择一个答案！');
return;
}

const pitanje = pogresnaPitanja[trenutnoPitanjeIndeks];
const rezultat = document.getElementById('practice-result');
const dugmici = document.getElementById('practice-buttons');
const proveriBtn = document.getElementById('check-practice-btn');

proveriBtn.style.display = 'none';
rezultat.style.display = 'block';
dugmici.style.display = 'flex';

if (odabranaOpcija === pitanje.tacanOdgovor) {
rezultat.className = 'practice-result correct';
rezultat.innerHTML = `
✅ 回答正确！<br>
<span style="font-size: 0.9em; color: var(--tekst_muted);">这道题你已经掌握了！</span>
`;

pogresnaPitanja = pogresnaPitanja.filter(p => p.id !== pitanje.id);
localStorage.setItem('wrongQuestions', JSON.stringify(pogresnaPitanja));
} else {
rezultat.className = 'practice-result incorrect';
rezultat.innerHTML = `
❌ 回答错误！<br>
<span style="font-size: 0.9em;">正确答案是：${pitanje.tacanOdgovor}</span>
`;
}

if (trenutnoPitanjeIndeks >= pogresnaPitanja.length - 1) {
document.getElementById('next-practice-btn').textContent = '完成练习';
} else {
document.getElementById('next-practice-btn').textContent = '下一题 ➜';
}
};

const sledecePitanje = () => {
if (trenutnoPitanjeIndeks >= pogresnaPitanja.length - 1) {
zavrsiVezbu();
return;
}

trenutnoPitanjeIndeks++;
prikaziTrenutnoPitanje();
};

const zavrsiVezbu = () => {
alert('练习完成！答对的题目已从错题库中移除。');

document.getElementById('practice-mode').style.display = 'none';
document.getElementById('wrong-questions-list').style.display = 'block';

prikaziPogresnaPitanja();
};

document.addEventListener('DOMContentLoaded', () => {
prikaziPogresnaPitanja();
});
Loading