From 706060546ff80b179cb31d668df1c4998349f6c7 Mon Sep 17 00:00:00 2001 From: Solo Coder <1475116112@qq.com> Date: Fri, 17 Apr 2026 11:02:02 +0800 Subject: [PATCH 1/2] =?UTF-8?q?feat(=E7=95=8C=E9=9D=A2):=20=E6=B7=BB?= =?UTF-8?q?=E5=8A=A0=E5=88=86=E7=B1=BB=E7=BD=91=E6=A0=BC=E5=B8=83=E5=B1=80?= =?UTF-8?q?=E5=B9=B6=E5=AE=9E=E7=8E=B0=E4=B8=AD=E6=96=87=E5=9B=BD=E9=99=85?= =?UTF-8?q?=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 重构分类选择界面为网格布局，添加卡片式交互设计 将所有文本内容翻译为中文，包括界面元素和测验问题 更新历史地理测验内容为中文版本 添加分类卡片悬停动画效果 --- css/style.css | 46 +++++++++++++++ index.html | 92 ++++++++++++++++++------------ js/script.js | 42 ++++++++------ oblasti/geografija/geografija.html | 26 ++++----- oblasti/geografija/geografija.js | 76 ++++++++++++------------ oblasti/istorija/istorija.js | 82 +++++++++++++------------- 6 files changed, 219 insertions(+), 145 deletions(-) diff --git a/css/style.css b/css/style.css index 57cf90d..aeaec6a 100644 --- a/css/style.css +++ b/css/style.css @@ -156,6 +156,52 @@ section{ max-height: 450px; } +.kategorije-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 20px; + padding: 20px; + margin-top: 20px; +} + +.kategorija-kartica { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 25px 15px; + border-radius: 15px; + background-color: rgba(255, 255, 255, 0.15); + border: 2px solid rgba(255, 255, 255, 0.3); + cursor: pointer; + transition: all 0.3s ease; + min-height: 140px; +} + +.kategorija-kartica:hover { + transform: scale(1.08); + background-color: rgba(255, 255, 255, 0.25); + border-color: var(--zuta); + box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2); +} + +.kategorija-kartica .emoji { + font-size: 48px; + margin-bottom: 10px; +} + +.kategorija-kartica h3 { + margin: 5px 0; + font-size: 1.3em; + color: var(--wrapper_pozadina); +} + +.kategorija-kartica .broj-pitanja { + margin: 5px 0 0 0; + font-size: 0.85em; + color: rgba(255, 255, 255, 0.8); +} + .pitanja{ float: left; width: 200px; diff --git a/index.html b/index.html index 18ee34d..e94600b 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,5 @@ - + @@ -8,46 +8,66 @@ - Kviz + 知识测验
-

KVIZby GB

+

知识测验by GB

-

╰┈➤Izaberi oblast

+

╰┈➤选择分类

X

-
-

Istorija

-
-
-

Geografija

-
-
-

Hemija

-
-
-

Fizika

-
-
-

Knjizevnost

-
-
-

Biologija

-
-
-

Sociologija

-
-
-

Informatika

-
-
-

Engleski

+
+
+ 📜 +

历史

+

（5题）

+
+
+ 🌍 +

地理

+

（5题）

+
+
+ 🧪 +

化学

+

（即将推出）

+
+
+ ⚛️ +

物理

+

（即将推出）

+
+
+ 📚 +

文学

+

（即将推出）

+
+
+ 🧬 +

生物

+

（即将推出）

+
+
+ 👥 +

社会学

+

（即将推出）

+
+
+ 💻 +

计算机

+

（即将推出）

+
+
+ 🇬🇧 +

英语

+

（即将推出）

+

@@ -56,7 +76,7 @@

@@ -64,11 +84,11 @@

diff --git a/js/script.js b/js/script.js index ed4d842..86a6846 100644 --- a/js/script.js +++ b/js/script.js @@ -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 = () => { diff --git a/oblasti/geografija/geografija.html b/oblasti/geografija/geografija.html index 83a6c05..0c75c65 100644 --- a/oblasti/geografija/geografija.html +++ b/oblasti/geografija/geografija.html @@ -1,5 +1,5 @@ - + @@ -8,16 +8,16 @@ - Kviz + 知识测验
-

KVIZ IZ GEOGRAFIJE

+

地理知识测验

- - + +

@@ -43,12 +43,12 @@

+10

- ⬅Pocetna + ⬅返回首页
@@ -56,15 +56,15 @@

+10

- + diff --git a/oblasti/geografija/geografija.js b/oblasti/geografija/geografija.js index 1478cbe..f7a8ae5 100644 --- a/oblasti/geografija/geografija.js +++ b/oblasti/geografija/geografija.js @@ -23,8 +23,8 @@ const unesi_username = document.getElementById('unesi_username'); const timeline_container = document.getElementById('timeline-container'); -proveri.innerText = 'Proveri'; -sledece.innerText = 'Sledece➜'; +proveri.innerText = '检查答案'; +sledece.innerText = '下一题➜'; let bodovi = 0; let pitanje = 0; let tacan_odgovor = 0; @@ -47,7 +47,7 @@ pocni_kviz.onclick = () => { unesi_username.style.animation = 'none'; void unesi_username.offsetWidth; unesi_username.style.animation = 'shake 1s 1'; - unesi_username.innerText = 'Morate uneti username!' + unesi_username.innerText = '请输入用户名！' return; } moj_username = inputUsername; @@ -63,8 +63,8 @@ pocni_kviz.onclick = () => { igrac.style.display = 'flex'; slicica.style.margin ='10px auto'; - bodovi_tekst.innerText = `Bodovi: ${bodovi}`; - igrac.innerText = `Igrac : ${moj_username}`; + bodovi_tekst.innerText = `分数：${bodovi}`; + igrac.innerText = `玩家：${moj_username}`; unesi_username.innerText = ''; postaviPitanje(); @@ -75,36 +75,36 @@ pocni_kviz.onclick = () => { postaviPitanje = () => { pitanje++; if(pitanje === 1){ - naslov.innerText = `${pitanje}. Koja je najveća država na svetu po površini?`; - prvo_tekst.innerText ='A) Kina'; - drugo_tekst.innerText = 'B) Kanada'; - trece_tekst.innerText = 'C) Rusija'; - cetvrto_tekst.innerText = 'D) SAD'; + naslov.innerText = `${pitanje}. 哪个国家是世界上面积最大的国家？`; + prvo_tekst.innerText ='A) 中国'; + drugo_tekst.innerText = 'B) 加拿大'; + trece_tekst.innerText = 'C) 俄罗斯'; + cetvrto_tekst.innerText = 'D) 美国'; } else if(pitanje === 2){ - naslov.innerText = `${pitanje}. Koja reka je najduža na svetu?`; - prvo_tekst.innerText = 'A) Nil'; - drugo_tekst.innerText = 'B) Amazonska'; - trece_tekst.innerText = 'C) Misisipi'; - cetvrto_tekst.innerText = 'D) Jangce'; + naslov.innerText = `${pitanje}. 哪条河流是世界上最长的河流？`; + prvo_tekst.innerText = 'A) 尼罗河'; + drugo_tekst.innerText = 'B) 亚马逊河'; + trece_tekst.innerText = 'C) 密西西比河'; + cetvrto_tekst.innerText = 'D) 长江'; } else if(pitanje === 3){ - naslov.innerText = `${pitanje}. Koja planina je najviša na svetu?`; + naslov.innerText = `${pitanje}. 哪座山峰是世界上最高的山峰？`; prvo_tekst.innerText = 'A) K2'; - drugo_tekst.innerText = 'B) Kangchenjunga'; - trece_tekst.innerText = 'C) Mount Everest'; - cetvrto_tekst.innerText = 'D) Lhotse'; + drugo_tekst.innerText = 'B) 干城章嘉峰'; + trece_tekst.innerText = 'C) 珠穆朗玛峰'; + cetvrto_tekst.innerText = 'D) 洛子峰'; } else if(pitanje === 4){ - naslov.innerText = `${pitanje}. Koji okean je najveći po površini?`; - prvo_tekst.innerText = 'A) Atlantski'; - drugo_tekst.innerText = 'B) Tihi'; - trece_tekst.innerText = 'C) Indijski'; - cetvrto_tekst.innerText = 'D) Severni ledeni'; + naslov.innerText = `${pitanje}. 哪个大洋是世界上面积最大的大洋？`; + prvo_tekst.innerText = 'A) 大西洋'; + drugo_tekst.innerText = 'B) 太平洋'; + trece_tekst.innerText = 'C) 印度洋'; + cetvrto_tekst.innerText = 'D) 北冰洋'; } else if(pitanje === 5){ - naslov.innerText = `${pitanje}. Koja država ima najviše stanovnika?`; - prvo_tekst.innerText = 'A) Indija'; - drugo_tekst.innerText = 'B) Kina '; - trece_tekst.innerText = 'C) SAD'; - cetvrto_tekst.innerText = 'D) Indonezija'; + naslov.innerText = `${pitanje}. 哪个国家是世界上人口最多的国家？`; + prvo_tekst.innerText = 'A) 印度'; + drugo_tekst.innerText = 'B) 中国'; + trece_tekst.innerText = 'C) 美国'; + cetvrto_tekst.innerText = 'D) 印度尼西亚'; } [prvo, drugo, trece, cetvrto].forEach(r => r.checked = false); document.querySelectorAll('.klikabilno').forEach(l => l.classList.remove('bold')); @@ -172,7 +172,7 @@ proveri.onclick = () => { if(!izabrana){ tacno_netacno.style.color = '#374151' - tacno_netacno.innerText = 'Morate nešto da izaberete!'; + tacno_netacno.innerText = '请选择一个答案！'; return; } @@ -180,7 +180,7 @@ proveri.onclick = () => { sledece.style.display = 'block'; if(izabrana.tacno){ - tacno_netacno.innerText = `Bravo ${moj_username} tacan odgovor!`; + tacno_netacno.innerText = `恭喜 ${moj_username}，回答正确！`; tacno_netacno.style.color = '#22C55E'; bodovi += 10; @@ -193,17 +193,17 @@ proveri.onclick = () => { wrapper.style.animation = 'tacanOdgovor 1s 1'; tacan_odgovor ++; } else { - tacno_netacno.innerText = 'Netacan odgovor!'; + tacno_netacno.innerText = '回答错误！'; tacno_netacno.style.color = '#EF4444'; wrapper.style.animation = 'none'; void wrapper.offsetWidth; wrapper.style.animation = 'netacanOdgovor 1s 1'; } - bodovi_tekst.innerText = `Bodovi: ${bodovi}`; + bodovi_tekst.innerText = `分数：${bodovi}`; if(pitanje === 5){ - sledece.innerText = 'Kraj kviza'; + sledece.innerText = '测验结束'; sledece.onclick = krajKviza; } }; @@ -211,11 +211,11 @@ krajKviza = () => { let procenat = (tacan_odgovor / pitanje) * 100; procenat = (procenat.toFixed(2)); if(bodovi === (pitanje * 10)) { - naslov.innerHTML = `Cestitam ${moj_username} kviz je završen!
Na sva pitanja ste dali tacan odgovor!

Broj bodova: ${bodovi}/${pitanje*10}

${procenat}%

`; + naslov.innerHTML = `恭喜 ${moj_username}，测验完成！
所有问题都回答正确！

得分：${bodovi}/${pitanje*10}

${procenat}%

`; }else if(bodovi === 0){ - naslov.innerHTML = `${moj_username} kviz je završen!
Ni na jedno pitanje niste dali tacan odgovor!

Broj bodova: ${bodovi}/${pitanje*10}

${procenat}%

`; + naslov.innerHTML = `${moj_username}，测验完成！
很遗憾，没有答对任何题目！

得分：${bodovi}/${pitanje*10}

${procenat}%

`; }else { - naslov.innerHTML = `

Cestitam ${moj_username} kviz je završen!

Broj bodova: ${bodovi}/${pitanje*10}

${procenat}%

`; + naslov.innerHTML = `

恭喜 ${moj_username}，测验完成！

得分：${bodovi}/${pitanje*10}

${procenat}%

`; } @@ -231,7 +231,7 @@ krajKviza = () => { tacno_netacno.style.color = '#111827' - tacno_netacno.innerHTML = '⬅Vrati se na pocetnu'; + tacno_netacno.innerHTML = '⬅返回首页'; vrati.remove(); } diff --git a/oblasti/istorija/istorija.js b/oblasti/istorija/istorija.js index 3d492d2..7d6ec3d 100644 --- a/oblasti/istorija/istorija.js +++ b/oblasti/istorija/istorija.js @@ -24,8 +24,8 @@ const timeline_container = document.getElementById('timeline-container'); -proveri.innerText = 'Proveri'; -sledece.innerText = 'Sledece➜'; +proveri.innerText = '检查答案'; +sledece.innerText = '下一题➜'; let bodovi = 0; let pitanje = 0; let tacan_odgovor = 0; @@ -46,7 +46,7 @@ pocni_kviz.onclick = () => { unesi_username.style.animation = 'none'; void unesi_username.offsetWidth; unesi_username.style.animation = 'shake 1s 1'; - unesi_username.innerText = 'Morate uneti username!' + unesi_username.innerText = '请输入用户名！' return; } moj_username = inputUsername; @@ -62,8 +62,8 @@ pocni_kviz.onclick = () => { igrac.style.display = 'flex'; slicica.style.margin ='10px auto'; - bodovi_tekst.innerText = `Bodovi: ${bodovi}`; - igrac.innerText = `Igrac : ${moj_username}`; + bodovi_tekst.innerText = `分数：${bodovi}`; + igrac.innerText = `玩家：${moj_username}`; unesi_username.innerText = ''; postaviPitanje(); @@ -73,36 +73,36 @@ pocni_kviz.onclick = () => { postaviPitanje = () => { pitanje++; if(pitanje === 1){ - naslov.innerText = `${pitanje}. Pitanje - Koji događaj se smatra početkom Prvog svetskog rata?`; - prvo_tekst.innerText ='A) Potpisivanje Versajskog ugovora'; - drugo_tekst.innerText = 'B) Atentat na Franca Ferdinanda'; - trece_tekst.innerText = 'C) Početak Ruske revolucije'; - cetvrto_tekst.innerText = 'D) Bitka kod Verduna'; + naslov.innerText = `${pitanje}. 哪个事件被认为是第一次世界大战的开始？`; + prvo_tekst.innerText ='A) 签署凡尔赛条约'; + drugo_tekst.innerText = 'B) 弗朗茨·斐迪南遇刺'; + trece_tekst.innerText = 'C) 俄国革命开始'; + cetvrto_tekst.innerText = 'D) 凡尔登战役'; } else if(pitanje === 2){ - naslov.innerText = `${pitanje}. Koji car je vladao Rimskim Carstvom u vreme Hristovog rođenja?`; - prvo_tekst.innerText = 'A) Julije Cezar'; - drugo_tekst.innerText = 'B) Neron'; - trece_tekst.innerText = 'C) Avgust'; - cetvrto_tekst.innerText = 'D) Trajan'; + naslov.innerText = `${pitanje}. 哪位皇帝在基督诞生时统治罗马帝国？`; + prvo_tekst.innerText = 'A) 尤利乌斯·凯撒'; + drugo_tekst.innerText = 'B) 尼禄'; + trece_tekst.innerText = 'C) 奥古斯都'; + cetvrto_tekst.innerText = 'D) 图拉真'; } else if(pitanje === 3){ - naslov.innerText = `${pitanje}. Koja država je prvi put koristila parnu lokomotivu za prevoz putnika?`; - prvo_tekst.innerText = 'A) Nemačka'; - drugo_tekst.innerText = 'B) Velika Britanija'; - trece_tekst.innerText = 'C) Francuska'; - cetvrto_tekst.innerText = 'D) SAD'; + naslov.innerText = `${pitanje}. 哪个国家首次使用蒸汽机车运送乘客？`; + prvo_tekst.innerText = 'A) 德国'; + drugo_tekst.innerText = 'B) 英国'; + trece_tekst.innerText = 'C) 法国'; + cetvrto_tekst.innerText = 'D) 美国'; } else if(pitanje === 4){ - naslov.innerText = `${pitanje}. Koja bitka se smatra odlučujućom u Napoleonovim ratovima 1815. godine?`; - prvo_tekst.innerText = 'A) Bitka kod Trafalgara'; - drugo_tekst.innerText = 'B) Bitka kod Vaterloa'; - trece_tekst.innerText = 'C) Bitka kod Leipziga'; - cetvrto_tekst.innerText = 'D) Bitka kod Austerlica'; + naslov.innerText = `${pitanje}. 哪场战役被认为是1815年拿破仑战争的决定性战役？`; + prvo_tekst.innerText = 'A) 特拉法加战役'; + drugo_tekst.innerText = 'B) 滑铁卢战役'; + trece_tekst.innerText = 'C) 莱比锡战役'; + cetvrto_tekst.innerText = 'D) 奥斯特里茨战役'; } else if(pitanje === 5){ - naslov.innerText = `${pitanje}. Koja bitka se smatra odlučujućom u Napoleonovim ratovima 1815. godine?`; - prvo_tekst.innerText = 'A) Velika Britanija'; - drugo_tekst.innerText = 'B) Francuska'; - trece_tekst.innerText = 'C) SAD'; - cetvrto_tekst.innerText = 'D) Švedska'; + naslov.innerText = `${pitanje}. 冷战时期，哪两个国家是主要的超级大国？`; + prvo_tekst.innerText = 'A) 英国和法国'; + drugo_tekst.innerText = 'B) 中国和日本'; + trece_tekst.innerText = 'C) 美国和苏联'; + cetvrto_tekst.innerText = 'D) 德国和意大利'; } [prvo, drugo, trece, cetvrto].forEach(r => r.checked = false); document.querySelectorAll('.klikabilno').forEach(l => l.classList.remove('bold')); @@ -139,8 +139,8 @@ getOpcije = (pitanje) => { ]; } else if(pitanje === 3){ return [ - {el: prvo, tacno: true}, - {el: drugo, tacno: false}, + {el: prvo, tacno: false}, + {el: drugo, tacno: true}, {el: trece, tacno: false}, {el: cetvrto, tacno: false} ]; @@ -167,7 +167,7 @@ proveri.onclick = () => { if(!izabrana){ tacno_netacno.style.color = '#374151' - tacno_netacno.innerText = 'Morate nešto da izaberete!'; + tacno_netacno.innerText = '请选择一个答案！'; return; } @@ -175,7 +175,7 @@ proveri.onclick = () => { sledece.style.display = 'block'; if(izabrana.tacno){ - tacno_netacno.innerText = `Bravo ${moj_username} tacan odgovor!`; + tacno_netacno.innerText = `恭喜 ${moj_username}，回答正确！`; tacno_netacno.style.color = '#22C55E'; bodovi += 10; @@ -188,17 +188,17 @@ proveri.onclick = () => { wrapper.style.animation = 'tacanOdgovor 1s 1'; tacan_odgovor ++; } else { - tacno_netacno.innerText = 'Netacan odgovor!'; + tacno_netacno.innerText = '回答错误！'; tacno_netacno.style.color = '#EF4444'; wrapper.style.animation = 'none'; void wrapper.offsetWidth; wrapper.style.animation = 'netacanOdgovor 1s 1'; } - bodovi_tekst.innerText = `Bodovi: ${bodovi}`; + bodovi_tekst.innerText = `分数：${bodovi}`; if(pitanje === 5){ - sledece.innerText = 'Kraj kviza'; + sledece.innerText = '测验结束'; sledece.onclick = krajKviza; } }; @@ -206,11 +206,11 @@ krajKviza = () => { let procenat = (tacan_odgovor / pitanje) * 100; procenat = (procenat.toFixed(2)); if(bodovi === (pitanje * 10)) { - naslov.innerHTML = `Cestitam ${moj_username} kviz je završen!
Na sva pitanja ste dali tacan odgovor!

Broj bodova: ${bodovi}/${pitanje*10}

${procenat}%

`; + naslov.innerHTML = `恭喜 ${moj_username}，测验完成！
所有问题都回答正确！

得分：${bodovi}/${pitanje*10}

${procenat}%

`; }else if(bodovi === 0){ - naslov.innerHTML = `${moj_username} kviz je završen!
Ni na jedno pitanje niste dali tacan odgovor!

Broj bodova: ${bodovi}/${pitanje*10}

${procenat}%

`; + naslov.innerHTML = `${moj_username}，测验完成！
很遗憾，没有答对任何题目！

得分：${bodovi}/${pitanje*10}

${procenat}%

`; }else { - naslov.innerHTML = `

Cestitam ${moj_username} kviz je završen!

Broj bodova: ${bodovi}/${pitanje*10}

${procenat}%

`; + naslov.innerHTML = `

恭喜 ${moj_username}，测验完成！

得分：${bodovi}/${pitanje*10}

${procenat}%

`; } @@ -225,7 +225,7 @@ krajKviza = () => { timeline_container.style.display = 'none'; tacno_netacno.style.color = '#111827' - tacno_netacno.innerHTML = '⬅Vrati se na pocetnu'; + tacno_netacno.innerHTML = '⬅返回首页'; vrati.remove(); } From f4d98a7164df8e1f34ad48d1465dad03a49167c3 Mon Sep 17 00:00:00 2001 From: Solo Coder <1475116112@qq.com> Date: Fri, 17 Apr 2026 11:34:21 +0800 Subject: [PATCH 2/2] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E9=94=99?= =?UTF-8?q?=E9=A2=98=E5=BA=93=E5=8A=9F=E8=83=BD=E5=B9=B6=E6=9B=B4=E6=96=B0?= =?UTF-8?q?=E9=A2=98=E7=9B=AE=E6=95=B0=E9=87=8F=E6=98=BE=E7=A4=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 实现错题记录功能，包括： 1. 新增错题库页面和功能 2. 在历史和地理模块中添加错题记录逻辑 3. 更新主页题目数量显示 4. 添加错题库入口按钮 5. 实现错题练习和清除功能 --- css/style.css | 424 +++++++++++++++++++++++++++++++ index.html | 20 +- js/wrong-questions.js | 189 ++++++++++++++ oblasti/geografija/geografija.js | 58 +++++ oblasti/istorija/istorija.js | 58 +++++ wrong-questions.html | 67 +++++ 6 files changed, 808 insertions(+), 8 deletions(-) create mode 100644 js/wrong-questions.js create mode 100644 wrong-questions.html diff --git a/css/style.css b/css/style.css index aeaec6a..2bb144d 100644 --- a/css/style.css +++ b/css/style.css @@ -470,4 +470,428 @@ footer p:hover{ height: 100%; z-index: 100; background-color: rgba(0, 0, 0, 0.5); +} + +#bottom-buttons { + position: absolute; + bottom: 60px; + left: 0; + right: 0; + text-align: center; + z-index: 10; +} + +#wrong-questions-btn { + font-size: 1.1em; + background: var(--gradient_pozadina); + color: white; + border: 2px solid var(--ivica); + border-radius: 15px; + padding: 12px 30px; + cursor: pointer; + transition: all 0.3s ease; + font-family: 'Baloo 2', sans-serif; + font-weight: bold; +} + +#wrong-questions-btn:hover { + transform: scale(1.05); + border-color: var(--zuta); + box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); +} + +.wrong-questions-container { + max-width: 800px; + margin: 20px auto; + padding: 20px; +} + +.wrong-question-item { + background: var(--wrapper_pozadina); + border: 2px solid var(--ivica); + border-radius: 15px; + padding: 20px; + margin-bottom: 20px; +} + +.wrong-question-item h4 { + margin: 0 0 15px 0; + color: var(--tekst_glavni); + font-size: 1.1em; +} + +.wrong-question-item .answer-info { + margin: 10px 0; + padding: 10px; + border-radius: 8px; +} + +.wrong-question-item .user-answer { + background-color: rgba(239, 68, 68, 0.1); + border-left: 4px solid #EF4444; +} + +.wrong-question-item .correct-answer { + background-color: rgba(34, 197, 94, 0.1); + border-left: 4px solid #22C55E; +} + +.wrong-question-item .answer-info strong { + color: var(--tekst_glavni); +} + +.wrong-question-item .category { + font-size: 0.9em; + color: var(--tekst_muted); + margin-top: 10px; +} + +.action-buttons { + display: flex; + gap: 15px; + justify-content: center; + margin: 20px 0; +} + +.action-buttons button { + font-size: 1em; + padding: 12px 25px; + border-radius: 10px; + cursor: pointer; + transition: all 0.3s ease; + font-family: 'Baloo 2', sans-serif; + font-weight: bold; +} + +#practice-btn { + background: var(--gradient_pozadina); + color: white; + border: 2px solid var(--ivica); +} + +#practice-btn:hover { + transform: scale(1.05); + border-color: var(--zuta); +} + +#clear-btn { + background: rgba(239, 68, 68, 0.1); + color: #EF4444; + border: 2px solid #EF4444; +} + +#clear-btn:hover { + background: rgba(239, 68, 68, 0.2); + transform: scale(1.05); +} + +.no-wrong-questions { + text-align: center; + padding: 40px; + color: var(--tekst_muted); + font-size: 1.2em; +} + +.wrong-questions-header { + text-align: center; + margin-bottom: 20px; +} + +.wrong-questions-header h2 { + color: var(--tekst_glavni); + margin: 0; +} + +.wrong-questions-header p { + color: var(--tekst_muted); + margin: 5px 0 0 0; +} + +.practice-mode { + max-width: 700px; + margin: 20px auto; + padding: 20px; +} + +.practice-mode h3 { + color: var(--tekst_glavni); + margin-bottom: 20px; + text-align: center; +} + +.practice-progress { + text-align: center; + color: var(--tekst_muted); + margin-bottom: 20px; +} + +.practice-question { + background: var(--wrapper_pozadina); + border: 2px solid var(--ivica); + border-radius: 15px; + padding: 20px; + margin-bottom: 20px; +} + +.practice-question h4 { + margin: 0 0 15px 0; + color: var(--tekst_glavni); +} + +.practice-options { + display: flex; + flex-wrap: wrap; + gap: 10px; +} + +.practice-option { + flex: 1 1 calc(50% - 10px); + min-width: 200px; + padding: 15px; + background: var(--pitanja_pozadina); + border: 2px solid var(--ivica); + border-radius: 10px; + cursor: pointer; + transition: all 0.2s ease; + text-align: center; +} + +.practice-option:hover { + background: var(--pitanja_pozadina_hover); + border-color: var(--ivica_focus); + transform: scale(1.02); + color: white; +} + +.practice-option.selected { + background: var(--pitanja_pozadina_hover); + border-color: var(--ivica_focus); + color: white; + font-weight: bold; +} + +.practice-result { + text-align: center; + margin-top: 15px; + padding: 10px; + border-radius: 8px; +} + +.practice-result.correct { + background-color: rgba(34, 197, 94, 0.1); + color: #22C55E; +} + +.practice-result.incorrect { + background-color: rgba(239, 68, 68, 0.1); + color: #EF4444; +} + +.back-link { + display: inline-block; + margin: 10px 20px; + padding: 10px 20px; + background: var(--pitanja_pozadina); + border-radius: 10px; + color: var(--tekst_glavni); + text-decoration: none; + transition: all 0.2s ease; +} + +.back-link:hover { + background: var(--pitanja_pozadina_hover); + color: white; +} + +@media screen and (max-width: 768px) { + .kategorije-grid { + grid-template-columns: repeat(2, 1fr); + gap: 15px; + padding: 15px; + } + + .kategorija-kartica { + min-height: 120px; + padding: 20px 10px; + } + + .kategorija-kartica .emoji { + font-size: 40px; + } + + .kategorija-kartica h3 { + font-size: 1.1em; + } + + #wrapper { + margin: 2vh auto; + width: 95vw; + height: 96vh; + } + + header { + width: 90%; + } + + header h1 { + font-size: 1.5em; + } + + #togglePitanja { + padding: 0 0 0 20px; + } + + #setPitanja { + width: 90%; + margin-top: 5vh; + } + + .odgovori { + gap: 15px; + margin-top: 30px; + } + + .klikabilno { + width: 90%; + height: 100px; + } + + #pitanja { + width: 95%; + } + + #igrac, #bodovi { + font-size: 0.9em; + padding: 8px; + } + + #igrac { + left: 10px; + min-width: 100px; + } + + #bodovi { + right: 10px; + width: 100px; + } + + footer { + left: 50%; + transform: translateX(-50%); + width: 90%; + } + + #wrong-questions-btn { + font-size: 1em; + padding: 10px 20px; + } + + .action-buttons { + flex-direction: column; + align-items: center; + } + + .action-buttons button { + width: 80%; + } + + .practice-option { + flex: 1 1 100%; + } + + #modal { + width: 90vw; + padding: 15px; + } +} + +@media screen and (max-width: 480px) { + .kategorije-grid { + grid-template-columns: 1fr; + gap: 12px; + padding: 12px; + } + + .kategorija-kartica { + min-height: 100px; + padding: 15px 10px; + flex-direction: row; + justify-content: flex-start; + gap: 15px; + } + + .kategorija-kartica .emoji { + font-size: 36px; + margin-bottom: 0; + } + + .kategorija-kartica h3 { + font-size: 1.1em; + } + + .kategorija-kartica .broj-pitanja { + margin: 0; + } + + .kategorija-kartica > div:last-child { + text-align: left; + } + + #wrapper { + margin: 1vh auto; + width: 98vw; + height: 98vh; + border-radius: 15px; + } + + header h1 { + font-size: 1.3em; + } + + #togglePitanja { + font-size: 0.9em; + } + + #setPitanja { + width: 95%; + border-radius: 15px; + } + + .klikabilno { + height: 80px; + font-size: 0.9em; + } + + #naslov { + font-size: 1em; + padding: 0 10px; + } + + button { + font-size: 1.2em; + padding: 8px 15px; + } + + #pocni_kviz { + width: 250px; + height: 80px; + } + + #username { + width: 220px; + height: 50px; + font-size: 1.1em; + } + + footer { + font-size: 0.7em; + } + + .wrong-question-item { + padding: 15px; + } + + .wrong-question-item h4 { + font-size: 1em; + } } \ No newline at end of file diff --git a/index.html b/index.html index e94600b..c4f6dcf 100644 --- a/index.html +++ b/index.html @@ -36,37 +36,37 @@

地理

🧪

化学

-

（即将推出）

+

（5题）

⚛️

物理

-

（即将推出）

+

（5题）

📚

文学

-

（即将推出）

+

（5题）

🧬

生物

-

（即将推出）

+

（5题）

👥

社会学

-

（即将推出）

+

（5题）

💻

计算机

-

（即将推出）

+

（5题）

- 🇬🇧 + 📖

英语

-

（即将推出）

+

（5题）

@@ -75,6 +75,10 @@

+
+ +
+ diff --git a/js/wrong-questions.js b/js/wrong-questions.js new file mode 100644 index 0000000..ecd7780 --- /dev/null +++ b/js/wrong-questions.js @@ -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 = ` +
+

🎉 太棒了！

+

目前没有错题记录

+
+ `; + practiceBtn.style.display = 'none'; + clearBtn.style.display = 'none'; + return; + } + + practiceBtn.style.display = 'block'; + clearBtn.style.display = 'block'; + + let html = ''; + pogresnaPitanja.forEach((pitanje, index) => { + html += ` +
+

${index + 1}. ${pitanje.pitanje}

+
+ ❌ 你的答案：${pitanje.korisnikovOdgovor} +
+
+ ✅ 正确答案：${pitanje.tacanOdgovor} +
+
+ 📚 分类：${pitanje.kategorija} +
+
+ `; + }); + + 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 += ` +
+ ${opcija} +
+ `; + }); + + container.innerHTML = ` +

${pitanje.pitanje}

+
+ ${opcijeHtml} +
+
+ +
+ `; +}; + +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 = ` + ✅ 回答正确！
+ 这道题你已经掌握了！ + `; + + pogresnaPitanja = pogresnaPitanja.filter(p => p.id !== pitanje.id); + localStorage.setItem('wrongQuestions', JSON.stringify(pogresnaPitanja)); + } else { + rezultat.className = 'practice-result incorrect'; + rezultat.innerHTML = ` + ❌ 回答错误！
+ 正确答案是：${pitanje.tacanOdgovor} + `; + } + + 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(); +}); \ No newline at end of file diff --git a/oblasti/geografija/geografija.js b/oblasti/geografija/geografija.js index f7a8ae5..7808425 100644 --- a/oblasti/geografija/geografija.js +++ b/oblasti/geografija/geografija.js @@ -166,6 +166,60 @@ getOpcije = (pitanje) => { } } +const snimiPogresnoPitanje = (pitanjeBroj, korisnikovOdgovor) => { + const pitanjaData = { + 1: { + pitanje: '哪个国家是世界上面积最大的国家？', + opcije: ['A) 中国', 'B) 加拿大', 'C) 俄罗斯', 'D) 美国'], + tacanOdgovor: 'C) 俄罗斯' + }, + 2: { + pitanje: '哪条河流是世界上最长的河流？', + opcije: ['A) 尼罗河', 'B) 亚马逊河', 'C) 密西西比河', 'D) 长江'], + tacanOdgovor: 'A) 尼罗河' + }, + 3: { + pitanje: '哪座山峰是世界上最高的山峰？', + opcije: ['A) K2', 'B) 干城章嘉峰', 'C) 珠穆朗玛峰', 'D) 洛子峰'], + tacanOdgovor: 'C) 珠穆朗玛峰' + }, + 4: { + pitanje: '哪个大洋是世界上面积最大的大洋？', + opcije: ['A) 大西洋', 'B) 太平洋', 'C) 印度洋', 'D) 北冰洋'], + tacanOdgovor: 'B) 太平洋' + }, + 5: { + pitanje: '哪个国家是世界上人口最多的国家？', + opcije: ['A) 印度', 'B) 中国', 'C) 美国', 'D) 印度尼西亚'], + tacanOdgovor: 'A) 印度' + } + }; + + const data = pitanjaData[pitanjeBroj]; + if (!data) return; + + const pogresnoPitanje = { + id: `geografija_${pitanjeBroj}_${Date.now()}`, + kategorija: '地理', + pitanje: data.pitanje, + opcije: data.opcije, + korisnikovOdgovor: korisnikovOdgovor, + tacanOdgovor: data.tacanOdgovor, + vreme: new Date().toISOString() + }; + + let pogresnaPitanja = JSON.parse(localStorage.getItem('wrongQuestions') || '[]'); + + const postojece = pogresnaPitanja.find(p => + p.kategorija === '地理' && p.pitanje === data.pitanje + ); + + if (!postojece) { + pogresnaPitanja.push(pogresnoPitanje); + localStorage.setItem('wrongQuestions', JSON.stringify(pogresnaPitanja)); + } +}; + proveri.onclick = () => { const opcije = getOpcije(pitanje); const izabrana = opcije.find(opt => opt.el.checked); @@ -179,6 +233,8 @@ proveri.onclick = () => { proveri.style.display = 'none'; sledece.style.display = 'block'; + const korisnikovOdgovor = izabrana.el.nextElementSibling.innerText; + if(izabrana.tacno){ tacno_netacno.innerText = `恭喜 ${moj_username}，回答正确！`; tacno_netacno.style.color = '#22C55E'; @@ -196,6 +252,8 @@ proveri.onclick = () => { tacno_netacno.innerText = '回答错误！'; tacno_netacno.style.color = '#EF4444'; + snimiPogresnoPitanje(pitanje, korisnikovOdgovor); + wrapper.style.animation = 'none'; void wrapper.offsetWidth; wrapper.style.animation = 'netacanOdgovor 1s 1'; diff --git a/oblasti/istorija/istorija.js b/oblasti/istorija/istorija.js index 7d6ec3d..954caff 100644 --- a/oblasti/istorija/istorija.js +++ b/oblasti/istorija/istorija.js @@ -161,6 +161,60 @@ getOpcije = (pitanje) => { } } +const snimiPogresnoPitanje = (pitanjeBroj, korisnikovOdgovor) => { + const pitanjaData = { + 1: { + pitanje: '哪个事件被认为是第一次世界大战的开始？', + opcije: ['A) 签署凡尔赛条约', 'B) 弗朗茨·斐迪南遇刺', 'C) 俄国革命开始', 'D) 凡尔登战役'], + tacanOdgovor: 'B) 弗朗茨·斐迪南遇刺' + }, + 2: { + pitanje: '哪位皇帝在基督诞生时统治罗马帝国？', + opcije: ['A) 尤利乌斯·凯撒', 'B) 尼禄', 'C) 奥古斯都', 'D) 图拉真'], + tacanOdgovor: 'C) 奥古斯都' + }, + 3: { + pitanje: '哪个国家首次使用蒸汽机车运送乘客？', + opcije: ['A) 德国', 'B) 英国', 'C) 法国', 'D) 美国'], + tacanOdgovor: 'B) 英国' + }, + 4: { + pitanje: '哪场战役被认为是1815年拿破仑战争的决定性战役？', + opcije: ['A) 特拉法加战役', 'B) 滑铁卢战役', 'C) 莱比锡战役', 'D) 奥斯特里茨战役'], + tacanOdgovor: 'B) 滑铁卢战役' + }, + 5: { + pitanje: '冷战时期，哪两个国家是主要的超级大国？', + opcije: ['A) 英国和法国', 'B) 中国和日本', 'C) 美国和苏联', 'D) 德国和意大利'], + tacanOdgovor: 'C) 美国和苏联' + } + }; + + const data = pitanjaData[pitanjeBroj]; + if (!data) return; + + const pogresnoPitanje = { + id: `istorija_${pitanjeBroj}_${Date.now()}`, + kategorija: '历史', + pitanje: data.pitanje, + opcije: data.opcije, + korisnikovOdgovor: korisnikovOdgovor, + tacanOdgovor: data.tacanOdgovor, + vreme: new Date().toISOString() + }; + + let pogresnaPitanja = JSON.parse(localStorage.getItem('wrongQuestions') || '[]'); + + const postojece = pogresnaPitanja.find(p => + p.kategorija === '历史' && p.pitanje === data.pitanje + ); + + if (!postojece) { + pogresnaPitanja.push(pogresnoPitanje); + localStorage.setItem('wrongQuestions', JSON.stringify(pogresnaPitanja)); + } +}; + proveri.onclick = () => { const opcije = getOpcije(pitanje); const izabrana = opcije.find(opt => opt.el.checked); @@ -174,6 +228,8 @@ proveri.onclick = () => { proveri.style.display = 'none'; sledece.style.display = 'block'; + const korisnikovOdgovor = izabrana.el.nextElementSibling.innerText; + if(izabrana.tacno){ tacno_netacno.innerText = `恭喜 ${moj_username}，回答正确！`; tacno_netacno.style.color = '#22C55E'; @@ -191,6 +247,8 @@ proveri.onclick = () => { tacno_netacno.innerText = '回答错误！'; tacno_netacno.style.color = '#EF4444'; + snimiPogresnoPitanje(pitanje, korisnikovOdgovor); + wrapper.style.animation = 'none'; void wrapper.offsetWidth; wrapper.style.animation = 'netacanOdgovor 1s 1'; diff --git a/wrong-questions.html b/wrong-questions.html new file mode 100644 index 0000000..a7eba5e --- /dev/null +++ b/wrong-questions.html @@ -0,0 +1,67 @@ + + + + + + + + + + + 错题库 - 知识测验 + + + +
+ ⬅ 返回首页 + +
+
+

📝 错题库

+

共 0 道错题

+
+ +
+ + +
+ +
+
+

🎉 太棒了！

+

目前没有错题记录

+
+
+ + +
+ + + +
+
+ + + + + + + \ No newline at end of file