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] =?UTF-8?q?feat(=E7=95=8C=E9=9D=A2):=20=E6=B7=BB=E5=8A=A0?= =?UTF-8?q?=E5=88=86=E7=B1=BB=E7=BD=91=E6=A0=BC=E5=B8=83=E5=B1=80=E5=B9=B6?= =?UTF-8?q?=E5=AE=9E=E7=8E=B0=E4=B8=AD=E6=96=87=E5=9B=BD=E9=99=85=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(); }