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/3] =?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/3] =?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 From ea3455bebaa85e013b6935f6c6815054aec5915c Mon Sep 17 00:00:00 2001 From: Solo Coder <1475116112@qq.com> Date: Fri, 17 Apr 2026 12:22:28 +0800 Subject: [PATCH 3/3] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E5=A4=9A?= =?UTF-8?q?=E4=B8=AA=E5=AD=A6=E7=A7=91=E6=B5=8B=E9=AA=8C=E9=A1=B5=E9=9D=A2?= =?UTF-8?q?=E5=92=8C=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 新增物理、化学、生物、文学、社会学和计算机学科的测验页面 扩展脚本功能以支持各学科测验 增加错误问题记录功能到本地存储 完善用户界面和交互体验 --- js/script.js | 9 +- oblasti/biologija/biologija.html | 71 +++++++ oblasti/biologija/biologija.js | 286 +++++++++++++++++++++++++++ oblasti/engleski/engleski.html | 71 +++++++ oblasti/engleski/engleski.js | 286 +++++++++++++++++++++++++++ oblasti/fizika/fizika.html | 71 +++++++ oblasti/fizika/fizika.js | 286 +++++++++++++++++++++++++++ oblasti/hemija/hemija.html | 71 +++++++ oblasti/hemija/hemija.js | 286 +++++++++++++++++++++++++++ oblasti/informatika/informatika.html | 71 +++++++ oblasti/informatika/informatika.js | 286 +++++++++++++++++++++++++++ oblasti/knjizevnost/knjizevnost.html | 71 +++++++ oblasti/knjizevnost/knjizevnost.js | 286 +++++++++++++++++++++++++++ oblasti/sociologija/sociologija.html | 71 +++++++ oblasti/sociologija/sociologija.js | 286 +++++++++++++++++++++++++++ 15 files changed, 2507 insertions(+), 1 deletion(-) create mode 100644 oblasti/biologija/biologija.html create mode 100644 oblasti/biologija/biologija.js create mode 100644 oblasti/engleski/engleski.html create mode 100644 oblasti/engleski/engleski.js create mode 100644 oblasti/fizika/fizika.html create mode 100644 oblasti/fizika/fizika.js create mode 100644 oblasti/hemija/hemija.html create mode 100644 oblasti/hemija/hemija.js create mode 100644 oblasti/informatika/informatika.html create mode 100644 oblasti/informatika/informatika.js create mode 100644 oblasti/knjizevnost/knjizevnost.html create mode 100644 oblasti/knjizevnost/knjizevnost.js create mode 100644 oblasti/sociologija/sociologija.html create mode 100644 oblasti/sociologija/sociologija.js diff --git a/js/script.js b/js/script.js index 86a6846..8f817a5 100644 --- a/js/script.js +++ b/js/script.js @@ -14,7 +14,14 @@ toggle.addEventListener("click", () => { izaberiKategoriju = (element, kategorija) => { const dostupneKategorije = { 'istorija': '历史', - 'geografija': '地理' + 'geografija': '地理', + 'hemija': '化学', + 'fizika': '物理', + 'knjizevnost': '文学', + 'biologija': '生物', + 'sociologija': '社会学', + 'informatika': '计算机', + 'engleski': '英语' }; if (dostupneKategorije[kategorija]) { diff --git a/oblasti/biologija/biologija.html b/oblasti/biologija/biologija.html new file mode 100644 index 0000000..9bcc42a --- /dev/null +++ b/oblasti/biologija/biologija.html @@ -0,0 +1,71 @@ + + + + + + + + + + + 知识测验 + + + +
+
+

生物知识测验

+
+ + +

+
+ +
+

+
+ + + + + + + + +
+

+ + +
+
+
+
+

+

+

+10

+ ⬅返回首页 + +
+ + + +
+
+ + + + + + + + + \ No newline at end of file diff --git a/oblasti/biologija/biologija.js b/oblasti/biologija/biologija.js new file mode 100644 index 0000000..104936f --- /dev/null +++ b/oblasti/biologija/biologija.js @@ -0,0 +1,286 @@ + +const wrapper = document.getElementById('wrapper') +const pocni_kviz = document.getElementById("pocni_kviz"); +const username = document.getElementById('username'); +const naslov = document.getElementById('naslov'); +const bodovi_tekst = document.getElementById('bodovi'); +const prvo = document.getElementById('prvo'); +const drugo = document.getElementById('drugo'); +const trece = document.getElementById('trece'); +const cetvrto = document.getElementById('cetvrto'); +const prvo_tekst = document.getElementById('prvo_tekst'); +const drugo_tekst = document.getElementById('drugo_tekst'); +const trece_tekst = document.getElementById('trece_tekst'); +const cetvrto_tekst = document.getElementById('cetvrto_tekst'); +const proveri = document.getElementById('proveri'); +const sledece = document.getElementById('sledece'); +const tacno_netacno = document.getElementById('tacno_netacno'); +const vrati = document.getElementById('vrati'); +const slicica = document.getElementById('slicica'); +const dodatak_bodova = document.getElementById('dodatak_bodova'); +const igrac = document.getElementById('igrac'); +const unesi_username = document.getElementById('unesi_username'); +const timeline_container = document.getElementById('timeline-container'); + + +proveri.innerText = '检查答案'; +sledece.innerText = '下一题➜'; +let bodovi = 0; +let pitanje = 0; +let tacan_odgovor = 0; +const userValue = username.value; +let moj_username = ''; + +const pitanjaData = { + 1: { + pitanje: '人体最大的器官是什么？', + opcije: ['A) 心脏', 'B) 肝脏', 'C) 皮肤', 'D) 大脑'], + tacanOdgovor: 'C) 皮肤', + objasnjenje: '皮肤是人体最大的器官，成年人的皮肤面积约为1.5-2平方米，重量约占体重的16%。皮肤具有保护、调节体温、感知外界刺激等多种功能。' + }, + 2: { + pitanje: '以下哪种血型被称为"万能供血者"？', + opcije: ['A) A型', 'B) B型', 'C) O型', 'D) AB型'], + tacanOdgovor: 'C) O型', + objasnjenje: 'O型血被称为"万能供血者"，因为O型血的红细胞表面没有A或B抗原，可以输给任何血型的人。而AB型血被称为"万能受血者"，可以接受任何血型的血液。' + }, + 3: { + pitanje: '光合作用主要发生在植物的哪个部位？', + opcije: ['A) 根部', 'B) 茎部', 'C) 叶片', 'D) 果实'], + tacanOdgovor: 'C) 叶片', + objasnjenje: '光合作用主要发生在植物的叶片中。叶片细胞含有大量的叶绿体，叶绿体中的叶绿素能够吸收光能，将二氧化碳和水转化为有机物（如葡萄糖）和氧气。' + }, + 4: { + pitanje: '以下哪种是遗传物质？', + opcije: ['A) 蛋白质', 'B) DNA', 'C) 脂肪', 'D) 碳水化合物'], + tacanOdgovor: 'B) DNA', + objasnjenje: 'DNA（脱氧核糖核酸）是生物的主要遗传物质，包含了生物体发育、生长和功能运作所需的遗传信息。DNA分子呈双螺旋结构，由核苷酸组成。' + }, + 5: { + pitanje: '人体消化食物的主要器官是什么？', + opcije: ['A) 胃', 'B) 小肠', 'C) 大肠', 'D) 肝脏'], + tacanOdgovor: 'B) 小肠', + objasnjenje: '小肠是人体消化食物和吸收营养物质的主要器官。小肠长度约5-6米，内壁有许多皱襞和绒毛，大大增加了吸收面积。食物在小肠中被彻底消化，营养物质被吸收进入血液。' + } +}; + +document.querySelectorAll('.klikabilno').forEach(el => { + el.style.display = 'none'; +}); + +bodovi_tekst.style.display = 'none'; +igrac.style.display = 'none'; +timeline_container.style.display = 'none'; + + +pocni_kviz.onclick = () => { + const inputUsername = username.value.trim(); + if(!inputUsername){ + unesi_username.style.animation = 'none'; + void unesi_username.offsetWidth; + unesi_username.style.animation = 'shake 1s 1'; + unesi_username.innerText = '请输入用户名！' + return; + } + moj_username = inputUsername; + username.remove(); + pocni_kviz.remove(); + slicica.remove(); + document.querySelectorAll('.klikabilno').forEach(el => { + el.style.display = 'flex'; + }); + timeline_container.style.display = 'flex'; + proveri.style.display = 'block'; + bodovi_tekst.style.display = 'flex'; + igrac.style.display = 'flex'; + slicica.style.margin ='10px auto'; + + bodovi_tekst.innerText = `分数：${bodovi}`; + igrac.innerText = `玩家：${moj_username}`; + unesi_username.innerText = ''; + + postaviPitanje(); +}; + + + +postaviPitanje = () => { + pitanje++; + const data = pitanjaData[pitanje]; + if (data) { + naslov.innerText = `${pitanje}. ${data.pitanje}`; + prvo_tekst.innerText = data.opcije[0]; + drugo_tekst.innerText = data.opcije[1]; + trece_tekst.innerText = data.opcije[2]; + cetvrto_tekst.innerText = data.opcije[3]; + } + + [prvo, drugo, trece, cetvrto].forEach(r => r.checked = false); + document.querySelectorAll('.klikabilno').forEach(l => l.classList.remove('bold')); + tacno_netacno.innerText = ''; + sledece.style.display = 'none'; + proveri.style.display = 'block'; + + + updateTimeline(pitanje); + +} + + + +const timeline = document.getElementById('timeline'); +const ukupnaPitanja = 5; + +updateTimeline = (pitanje) => { + const procent = (pitanje / ukupnaPitanja) * 100; + timeline.style.width = procent + '%'; +} + +getOpcije = (pitanje) => { + if(pitanje === 1){ + return [ + {el: prvo, tacno: false}, + {el: drugo, tacno: false}, + {el: trece, tacno: true}, + {el: cetvrto, tacno: false} + ]; + } else if(pitanje === 2){ + return [ + {el: prvo, tacno: false}, + {el: drugo, tacno: false}, + {el: trece, tacno: true}, + {el: cetvrto, tacno: false} + ]; + } else if(pitanje === 3){ + return [ + {el: prvo, tacno: false}, + {el: drugo, tacno: false}, + {el: trece, tacno: true}, + {el: cetvrto, tacno: false} + ]; + } else if(pitanje === 4){ + return [ + {el: prvo, tacno: false}, + {el: drugo, tacno: true}, + {el: trece, tacno: false}, + {el: cetvrto, tacno: false} + ]; + } else if(pitanje === 5){ + return [ + {el: prvo, tacno: false}, + {el: drugo, tacno: true}, + {el: trece, tacno: false}, + {el: cetvrto, tacno: false} + ]; + } +} + +const snimiPogresnoPitanje = (pitanjeBroj, korisnikovOdgovor) => { + const data = pitanjaData[pitanjeBroj]; + if (!data) return; + + const pogresnoPitanje = { + id: `biologija_${pitanjeBroj}_${Date.now()}`, + kategorija: '生物', + pitanje: data.pitanje, + opcije: data.opcije, + korisnikovOdgovor: korisnikovOdgovor, + tacanOdgovor: data.tacanOdgovor, + objasnjenje: data.objasnjenje, + 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); + + if(!izabrana){ + tacno_netacno.style.color = '#374151' + tacno_netacno.innerText = '请选择一个答案！'; + return; + } + + proveri.style.display = 'none'; + sledece.style.display = 'block'; + + const korisnikovOdgovor = izabrana.el.nextElementSibling.innerText; + const data = pitanjaData[pitanje]; + + if(izabrana.tacno){ + tacno_netacno.innerHTML = `恭喜 ${moj_username}，回答正确！
${data.objasnjenje}`; + tacno_netacno.style.color = '#22C55E'; + bodovi += 10; + + dodatak_bodova.style.animation = 'none'; + void dodatak_bodova.offsetWidth; + dodatak_bodova.style.animation = 'bodoviIzlaz 2s ease-in-out 1'; + + wrapper.style.animation = 'none'; + void wrapper.offsetWidth; + wrapper.style.animation = 'tacanOdgovor 1s 1'; + tacan_odgovor ++; + } else { + tacno_netacno.innerHTML = `回答错误！
${data.objasnjenje}`; + tacno_netacno.style.color = '#EF4444'; + + snimiPogresnoPitanje(pitanje, korisnikovOdgovor); + + wrapper.style.animation = 'none'; + void wrapper.offsetWidth; + wrapper.style.animation = 'netacanOdgovor 1s 1'; + } + bodovi_tekst.innerText = `分数：${bodovi}`; + + if(pitanje === 5){ + sledece.innerText = '测验结束'; + sledece.onclick = krajKviza; + } +}; +krajKviza = () => { + let procenat = (tacan_odgovor / pitanje) * 100; + procenat = (procenat.toFixed(2)); + if(bodovi === (pitanje * 10)) { + naslov.innerHTML = `恭喜 ${moj_username}，测验完成！
所有问题都回答正确！

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

${procenat}%

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

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

${procenat}%

`; + }else { + naslov.innerHTML = `

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

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

${procenat}%

`; + } + + + [prvo_tekst, drugo_tekst, trece_tekst, cetvrto_tekst].forEach(el => el.innerText = ''); + document.querySelectorAll('.klikabilno').forEach(el => { + el.style.display = 'none'; + }); + proveri.style.display = 'none'; + sledece.style.display = 'none'; + bodovi_tekst.style.display = 'none' + igrac.style.display = 'none'; + timeline_container.style.display = 'none'; + + + tacno_netacno.style.color = '#111827' + tacno_netacno.innerHTML = '⬅返回首页'; + vrati.remove(); +} + +sledece.onclick = postaviPitanje; + +document.querySelectorAll(".klikabilno").forEach(el => { + el.addEventListener("click", () => { + document.querySelectorAll('.klikabilno').forEach(l => l.classList.remove('bold')); + el.classList.add('bold'); + }); +}); \ No newline at end of file diff --git a/oblasti/engleski/engleski.html b/oblasti/engleski/engleski.html new file mode 100644 index 0000000..1c63886 --- /dev/null +++ b/oblasti/engleski/engleski.html @@ -0,0 +1,71 @@ + + + + + + + + + + + 知识测验 + + + +
+
+

英语知识测验

+
+ + +

+
+ +
+

+
+ + + + + + + + +
+

+ + +
+
+
+
+

+

+

+10

+ ⬅返回首页 + +
+ + + +
+
+ + + + + + + + + \ No newline at end of file diff --git a/oblasti/engleski/engleski.js b/oblasti/engleski/engleski.js new file mode 100644 index 0000000..8b14d6d --- /dev/null +++ b/oblasti/engleski/engleski.js @@ -0,0 +1,286 @@ + +const wrapper = document.getElementById('wrapper') +const pocni_kviz = document.getElementById("pocni_kviz"); +const username = document.getElementById('username'); +const naslov = document.getElementById('naslov'); +const bodovi_tekst = document.getElementById('bodovi'); +const prvo = document.getElementById('prvo'); +const drugo = document.getElementById('drugo'); +const trece = document.getElementById('trece'); +const cetvrto = document.getElementById('cetvrto'); +const prvo_tekst = document.getElementById('prvo_tekst'); +const drugo_tekst = document.getElementById('drugo_tekst'); +const trece_tekst = document.getElementById('trece_tekst'); +const cetvrto_tekst = document.getElementById('cetvrto_tekst'); +const proveri = document.getElementById('proveri'); +const sledece = document.getElementById('sledece'); +const tacno_netacno = document.getElementById('tacno_netacno'); +const vrati = document.getElementById('vrati'); +const slicica = document.getElementById('slicica'); +const dodatak_bodova = document.getElementById('dodatak_bodova'); +const igrac = document.getElementById('igrac'); +const unesi_username = document.getElementById('unesi_username'); +const timeline_container = document.getElementById('timeline-container'); + + +proveri.innerText = '检查答案'; +sledece.innerText = '下一题➜'; +let bodovi = 0; +let pitanje = 0; +let tacan_odgovor = 0; +const userValue = username.value; +let moj_username = ''; + +const pitanjaData = { + 1: { + pitanje: 'She ___ to school every day.', + opcije: ['A) go', 'B) goes', 'C) going', 'D) went'], + tacanOdgovor: 'B) goes', + objasnjenje: '这是一般现在时，主语是第三人称单数she，动词需要用第三人称单数形式goes。go用于第一、二人称和复数主语，going是现在分词，went是过去式。' + }, + 2: { + pitanje: '"Beautiful"的反义词是什么？', + opcije: ['A) Pretty', 'B) Handsome', 'C) Ugly', 'D) Nice'], + tacanOdgovor: 'C) Ugly', + objasnjenje: 'Beautiful（美丽的）的反义词是ugly（丑陋的）。pretty（漂亮的）、handsome（英俊的）、nice（好的）都是近义词或褒义词。' + }, + 3: { + pitanje: '选择正确的句子：', + opcije: ['A) She don\'t like apples.', 'B) She doesn\'t likes apples.', 'C) She doesn\'t like apples.', 'D) She not like apples.'], + tacanOdgovor: 'C) She doesn\'t like apples.', + objasnjenje: '一般现在时的否定句，主语是第三人称单数she时，要用doesn\'t + 动词原形。正确形式是She doesn\'t like apples。其他选项错误：don\'t用于非第三人称单数，doesn\'t后不应加s，不能直接用not。' + }, + 4: { + pitanje: '"I have been studying English for 5 years." 这句话是什么时态？', + opcije: ['A) 现在完成时', 'B) 现在完成进行时', 'C) 过去完成时', 'D) 一般现在时'], + tacanOdgovor: 'B) 现在完成进行时', + objasnjenje: '现在完成进行时的结构是have/has been + 现在分词，表示动作从过去开始一直持续到现在，可能还会继续下去。现在完成时是have/has + 过去分词，强调结果。' + }, + 5: { + pitanje: '选择正确的问句形式：', + opcije: ['A) Where you go yesterday?', 'B) Where did you went yesterday?', 'C) Where did you go yesterday?', 'D) Where you went yesterday?'], + tacanOdgovor: 'C) Where did you go yesterday?', + objasnjenje: '一般过去时的特殊疑问句结构是：疑问词 + did + 主语 + 动词原形 + 其他？yesterday是过去时间状语，要用过去时。正确形式是Where did you go yesterday？其他选项错误：缺少助动词，或动词形式错误。' + } +}; + +document.querySelectorAll('.klikabilno').forEach(el => { + el.style.display = 'none'; +}); + +bodovi_tekst.style.display = 'none'; +igrac.style.display = 'none'; +timeline_container.style.display = 'none'; + + +pocni_kviz.onclick = () => { + const inputUsername = username.value.trim(); + if(!inputUsername){ + unesi_username.style.animation = 'none'; + void unesi_username.offsetWidth; + unesi_username.style.animation = 'shake 1s 1'; + unesi_username.innerText = '请输入用户名！' + return; + } + moj_username = inputUsername; + username.remove(); + pocni_kviz.remove(); + slicica.remove(); + document.querySelectorAll('.klikabilno').forEach(el => { + el.style.display = 'flex'; + }); + timeline_container.style.display = 'flex'; + proveri.style.display = 'block'; + bodovi_tekst.style.display = 'flex'; + igrac.style.display = 'flex'; + slicica.style.margin ='10px auto'; + + bodovi_tekst.innerText = `分数：${bodovi}`; + igrac.innerText = `玩家：${moj_username}`; + unesi_username.innerText = ''; + + postaviPitanje(); +}; + + + +postaviPitanje = () => { + pitanje++; + const data = pitanjaData[pitanje]; + if (data) { + naslov.innerText = `${pitanje}. ${data.pitanje}`; + prvo_tekst.innerText = data.opcije[0]; + drugo_tekst.innerText = data.opcije[1]; + trece_tekst.innerText = data.opcije[2]; + cetvrto_tekst.innerText = data.opcije[3]; + } + + [prvo, drugo, trece, cetvrto].forEach(r => r.checked = false); + document.querySelectorAll('.klikabilno').forEach(l => l.classList.remove('bold')); + tacno_netacno.innerText = ''; + sledece.style.display = 'none'; + proveri.style.display = 'block'; + + + updateTimeline(pitanje); + +} + + + +const timeline = document.getElementById('timeline'); +const ukupnaPitanja = 5; + +updateTimeline = (pitanje) => { + const procent = (pitanje / ukupnaPitanja) * 100; + timeline.style.width = procent + '%'; +} + +getOpcije = (pitanje) => { + if(pitanje === 1){ + return [ + {el: prvo, tacno: false}, + {el: drugo, tacno: true}, + {el: trece, tacno: false}, + {el: cetvrto, tacno: false} + ]; + } else if(pitanje === 2){ + return [ + {el: prvo, tacno: false}, + {el: drugo, tacno: false}, + {el: trece, tacno: true}, + {el: cetvrto, tacno: false} + ]; + } else if(pitanje === 3){ + return [ + {el: prvo, tacno: false}, + {el: drugo, tacno: false}, + {el: trece, tacno: true}, + {el: cetvrto, tacno: false} + ]; + } else if(pitanje === 4){ + return [ + {el: prvo, tacno: false}, + {el: drugo, tacno: true}, + {el: trece, tacno: false}, + {el: cetvrto, tacno: false} + ]; + } else if(pitanje === 5){ + return [ + {el: prvo, tacno: false}, + {el: drugo, tacno: false}, + {el: trece, tacno: true}, + {el: cetvrto, tacno: false} + ]; + } +} + +const snimiPogresnoPitanje = (pitanjeBroj, korisnikovOdgovor) => { + const data = pitanjaData[pitanjeBroj]; + if (!data) return; + + const pogresnoPitanje = { + id: `engleski_${pitanjeBroj}_${Date.now()}`, + kategorija: '英语', + pitanje: data.pitanje, + opcije: data.opcije, + korisnikovOdgovor: korisnikovOdgovor, + tacanOdgovor: data.tacanOdgovor, + objasnjenje: data.objasnjenje, + 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); + + if(!izabrana){ + tacno_netacno.style.color = '#374151' + tacno_netacno.innerText = '请选择一个答案！'; + return; + } + + proveri.style.display = 'none'; + sledece.style.display = 'block'; + + const korisnikovOdgovor = izabrana.el.nextElementSibling.innerText; + const data = pitanjaData[pitanje]; + + if(izabrana.tacno){ + tacno_netacno.innerHTML = `恭喜 ${moj_username}，回答正确！
${data.objasnjenje}`; + tacno_netacno.style.color = '#22C55E'; + bodovi += 10; + + dodatak_bodova.style.animation = 'none'; + void dodatak_bodova.offsetWidth; + dodatak_bodova.style.animation = 'bodoviIzlaz 2s ease-in-out 1'; + + wrapper.style.animation = 'none'; + void wrapper.offsetWidth; + wrapper.style.animation = 'tacanOdgovor 1s 1'; + tacan_odgovor ++; + } else { + tacno_netacno.innerHTML = `回答错误！
${data.objasnjenje}`; + tacno_netacno.style.color = '#EF4444'; + + snimiPogresnoPitanje(pitanje, korisnikovOdgovor); + + wrapper.style.animation = 'none'; + void wrapper.offsetWidth; + wrapper.style.animation = 'netacanOdgovor 1s 1'; + } + bodovi_tekst.innerText = `分数：${bodovi}`; + + if(pitanje === 5){ + sledece.innerText = '测验结束'; + sledece.onclick = krajKviza; + } +}; +krajKviza = () => { + let procenat = (tacan_odgovor / pitanje) * 100; + procenat = (procenat.toFixed(2)); + if(bodovi === (pitanje * 10)) { + naslov.innerHTML = `恭喜 ${moj_username}，测验完成！
所有问题都回答正确！

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

${procenat}%

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

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

${procenat}%

`; + }else { + naslov.innerHTML = `

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

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

${procenat}%

`; + } + + + [prvo_tekst, drugo_tekst, trece_tekst, cetvrto_tekst].forEach(el => el.innerText = ''); + document.querySelectorAll('.klikabilno').forEach(el => { + el.style.display = 'none'; + }); + proveri.style.display = 'none'; + sledece.style.display = 'none'; + bodovi_tekst.style.display = 'none' + igrac.style.display = 'none'; + timeline_container.style.display = 'none'; + + + tacno_netacno.style.color = '#111827' + tacno_netacno.innerHTML = '⬅返回首页'; + vrati.remove(); +} + +sledece.onclick = postaviPitanje; + +document.querySelectorAll(".klikabilno").forEach(el => { + el.addEventListener("click", () => { + document.querySelectorAll('.klikabilno').forEach(l => l.classList.remove('bold')); + el.classList.add('bold'); + }); +}); \ No newline at end of file diff --git a/oblasti/fizika/fizika.html b/oblasti/fizika/fizika.html new file mode 100644 index 0000000..7f9f325 --- /dev/null +++ b/oblasti/fizika/fizika.html @@ -0,0 +1,71 @@ + + + + + + + + + + + 知识测验 + + + +
+
+

物理知识测验

+
+ + +

+
+ +
+

+
+ + + + + + + + +
+

+ + +
+
+
+
+

+

+

+10

+ ⬅返回首页 + +
+ + + +
+
+ + + + + + + + + \ No newline at end of file diff --git a/oblasti/fizika/fizika.js b/oblasti/fizika/fizika.js new file mode 100644 index 0000000..30155fc --- /dev/null +++ b/oblasti/fizika/fizika.js @@ -0,0 +1,286 @@ + +const wrapper = document.getElementById('wrapper') +const pocni_kviz = document.getElementById("pocni_kviz"); +const username = document.getElementById('username'); +const naslov = document.getElementById('naslov'); +const bodovi_tekst = document.getElementById('bodovi'); +const prvo = document.getElementById('prvo'); +const drugo = document.getElementById('drugo'); +const trece = document.getElementById('trece'); +const cetvrto = document.getElementById('cetvrto'); +const prvo_tekst = document.getElementById('prvo_tekst'); +const drugo_tekst = document.getElementById('drugo_tekst'); +const trece_tekst = document.getElementById('trece_tekst'); +const cetvrto_tekst = document.getElementById('cetvrto_tekst'); +const proveri = document.getElementById('proveri'); +const sledece = document.getElementById('sledece'); +const tacno_netacno = document.getElementById('tacno_netacno'); +const vrati = document.getElementById('vrati'); +const slicica = document.getElementById('slicica'); +const dodatak_bodova = document.getElementById('dodatak_bodova'); +const igrac = document.getElementById('igrac'); +const unesi_username = document.getElementById('unesi_username'); +const timeline_container = document.getElementById('timeline-container'); + + +proveri.innerText = '检查答案'; +sledece.innerText = '下一题➜'; +let bodovi = 0; +let pitanje = 0; +let tacan_odgovor = 0; +const userValue = username.value; +let moj_username = ''; + +const pitanjaData = { + 1: { + pitanje: '光在真空中的传播速度约为多少？', + opcije: ['A) 3×10⁶ 米/秒', 'B) 3×10⁸ 米/秒', 'C) 3×10¹⁰ 米/秒', 'D) 3×10¹² 米/秒'], + tacanOdgovor: 'B) 3×10⁸ 米/秒', + objasnjenje: '光在真空中的传播速度约为3×10⁸米/秒（30万公里/秒）。这是宇宙中最快的速度，爱因斯坦的相对论指出任何有质量的物体都无法达到或超过光速。' + }, + 2: { + pitanje: '以下哪种力是万有引力？', + opcije: ['A) 磁铁吸引铁钉', 'B) 地球吸引苹果落地', 'C) 橡皮筋的拉力', 'D) 摩擦力'], + tacanOdgovor: 'B) 地球吸引苹果落地', + objasnjenje: '万有引力是任何两个物体之间都存在的相互吸引力。地球吸引苹果落地是万有引力的典型例子。磁铁吸引铁钉是电磁力，橡皮筋的拉力是弹力，摩擦力是阻碍相对运动的力。' + }, + 3: { + pitanje: '牛顿第一定律又被称为什么？', + opcije: ['A) 加速度定律', 'B) 作用力与反作用力定律', 'C) 惯性定律', 'D) 万有引力定律'], + tacanOdgovor: 'C) 惯性定律', + objasnjenje: '牛顿第一定律又称惯性定律，内容是：任何物体都要保持匀速直线运动或静止状态，直到外力迫使它改变运动状态为止。加速度定律是牛顿第二定律，作用力与反作用力定律是牛顿第三定律。' + }, + 4: { + pitanje: '以下哪种能源属于可再生能源？', + opcije: ['A) 煤炭', 'B) 石油', 'C) 太阳能', 'D) 天然气'], + tacanOdgovor: 'C) 太阳能', + objasnjenje: '太阳能是可再生能源，因为它可以持续获得。煤炭、石油、天然气都属于化石燃料，是不可再生能源，需要数百万年才能形成，用一点就少一点。' + }, + 5: { + pitanje: '声音在以下哪种介质中传播最快？', + opcije: ['A) 真空', 'B) 空气', 'C) 水', 'D) 钢铁'], + tacanOdgovor: 'D) 钢铁', + objasnjenje: '声音需要介质才能传播，不能在真空中传播。声音在固体中传播最快，液体次之，气体最慢。在钢铁中声音的传播速度约为5200米/秒，在水中约1500米/秒，在空气中约340米/秒。' + } +}; + +document.querySelectorAll('.klikabilno').forEach(el => { + el.style.display = 'none'; +}); + +bodovi_tekst.style.display = 'none'; +igrac.style.display = 'none'; +timeline_container.style.display = 'none'; + + +pocni_kviz.onclick = () => { + const inputUsername = username.value.trim(); + if(!inputUsername){ + unesi_username.style.animation = 'none'; + void unesi_username.offsetWidth; + unesi_username.style.animation = 'shake 1s 1'; + unesi_username.innerText = '请输入用户名！' + return; + } + moj_username = inputUsername; + username.remove(); + pocni_kviz.remove(); + slicica.remove(); + document.querySelectorAll('.klikabilno').forEach(el => { + el.style.display = 'flex'; + }); + timeline_container.style.display = 'flex'; + proveri.style.display = 'block'; + bodovi_tekst.style.display = 'flex'; + igrac.style.display = 'flex'; + slicica.style.margin ='10px auto'; + + bodovi_tekst.innerText = `分数：${bodovi}`; + igrac.innerText = `玩家：${moj_username}`; + unesi_username.innerText = ''; + + postaviPitanje(); +}; + + + +postaviPitanje = () => { + pitanje++; + const data = pitanjaData[pitanje]; + if (data) { + naslov.innerText = `${pitanje}. ${data.pitanje}`; + prvo_tekst.innerText = data.opcije[0]; + drugo_tekst.innerText = data.opcije[1]; + trece_tekst.innerText = data.opcije[2]; + cetvrto_tekst.innerText = data.opcije[3]; + } + + [prvo, drugo, trece, cetvrto].forEach(r => r.checked = false); + document.querySelectorAll('.klikabilno').forEach(l => l.classList.remove('bold')); + tacno_netacno.innerText = ''; + sledece.style.display = 'none'; + proveri.style.display = 'block'; + + + updateTimeline(pitanje); + +} + + + +const timeline = document.getElementById('timeline'); +const ukupnaPitanja = 5; + +updateTimeline = (pitanje) => { + const procent = (pitanje / ukupnaPitanja) * 100; + timeline.style.width = procent + '%'; +} + +getOpcije = (pitanje) => { + if(pitanje === 1){ + return [ + {el: prvo, tacno: false}, + {el: drugo, tacno: true}, + {el: trece, tacno: false}, + {el: cetvrto, tacno: false} + ]; + } else if(pitanje === 2){ + return [ + {el: prvo, tacno: false}, + {el: drugo, tacno: true}, + {el: trece, tacno: false}, + {el: cetvrto, tacno: false} + ]; + } else if(pitanje === 3){ + return [ + {el: prvo, tacno: false}, + {el: drugo, tacno: false}, + {el: trece, tacno: true}, + {el: cetvrto, tacno: false} + ]; + } else if(pitanje === 4){ + return [ + {el: prvo, tacno: false}, + {el: drugo, tacno: false}, + {el: trece, tacno: true}, + {el: cetvrto, tacno: false} + ]; + } else if(pitanje === 5){ + return [ + {el: prvo, tacno: false}, + {el: drugo, tacno: false}, + {el: trece, tacno: false}, + {el: cetvrto, tacno: true} + ]; + } +} + +const snimiPogresnoPitanje = (pitanjeBroj, korisnikovOdgovor) => { + const data = pitanjaData[pitanjeBroj]; + if (!data) return; + + const pogresnoPitanje = { + id: `fizika_${pitanjeBroj}_${Date.now()}`, + kategorija: '物理', + pitanje: data.pitanje, + opcije: data.opcije, + korisnikovOdgovor: korisnikovOdgovor, + tacanOdgovor: data.tacanOdgovor, + objasnjenje: data.objasnjenje, + 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); + + if(!izabrana){ + tacno_netacno.style.color = '#374151' + tacno_netacno.innerText = '请选择一个答案！'; + return; + } + + proveri.style.display = 'none'; + sledece.style.display = 'block'; + + const korisnikovOdgovor = izabrana.el.nextElementSibling.innerText; + const data = pitanjaData[pitanje]; + + if(izabrana.tacno){ + tacno_netacno.innerHTML = `恭喜 ${moj_username}，回答正确！
${data.objasnjenje}`; + tacno_netacno.style.color = '#22C55E'; + bodovi += 10; + + dodatak_bodova.style.animation = 'none'; + void dodatak_bodova.offsetWidth; + dodatak_bodova.style.animation = 'bodoviIzlaz 2s ease-in-out 1'; + + wrapper.style.animation = 'none'; + void wrapper.offsetWidth; + wrapper.style.animation = 'tacanOdgovor 1s 1'; + tacan_odgovor ++; + } else { + tacno_netacno.innerHTML = `回答错误！
${data.objasnjenje}`; + tacno_netacno.style.color = '#EF4444'; + + snimiPogresnoPitanje(pitanje, korisnikovOdgovor); + + wrapper.style.animation = 'none'; + void wrapper.offsetWidth; + wrapper.style.animation = 'netacanOdgovor 1s 1'; + } + bodovi_tekst.innerText = `分数：${bodovi}`; + + if(pitanje === 5){ + sledece.innerText = '测验结束'; + sledece.onclick = krajKviza; + } +}; +krajKviza = () => { + let procenat = (tacan_odgovor / pitanje) * 100; + procenat = (procenat.toFixed(2)); + if(bodovi === (pitanje * 10)) { + naslov.innerHTML = `恭喜 ${moj_username}，测验完成！
所有问题都回答正确！

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

${procenat}%

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

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

${procenat}%

`; + }else { + naslov.innerHTML = `

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

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

${procenat}%

`; + } + + + [prvo_tekst, drugo_tekst, trece_tekst, cetvrto_tekst].forEach(el => el.innerText = ''); + document.querySelectorAll('.klikabilno').forEach(el => { + el.style.display = 'none'; + }); + proveri.style.display = 'none'; + sledece.style.display = 'none'; + bodovi_tekst.style.display = 'none' + igrac.style.display = 'none'; + timeline_container.style.display = 'none'; + + + tacno_netacno.style.color = '#111827' + tacno_netacno.innerHTML = '⬅返回首页'; + vrati.remove(); +} + +sledece.onclick = postaviPitanje; + +document.querySelectorAll(".klikabilno").forEach(el => { + el.addEventListener("click", () => { + document.querySelectorAll('.klikabilno').forEach(l => l.classList.remove('bold')); + el.classList.add('bold'); + }); +}); \ No newline at end of file diff --git a/oblasti/hemija/hemija.html b/oblasti/hemija/hemija.html new file mode 100644 index 0000000..8404103 --- /dev/null +++ b/oblasti/hemija/hemija.html @@ -0,0 +1,71 @@ + + + + + + + + + + + 知识测验 + + + +
+
+

化学知识测验

+
+ + +

+
+ +
+

+
+ + + + + + + + +
+

+ + +
+
+
+
+

+

+

+10

+ ⬅返回首页 + +
+ + + +
+
+ + + + + + + + + \ No newline at end of file diff --git a/oblasti/hemija/hemija.js b/oblasti/hemija/hemija.js new file mode 100644 index 0000000..65bcf89 --- /dev/null +++ b/oblasti/hemija/hemija.js @@ -0,0 +1,286 @@ + +const wrapper = document.getElementById('wrapper') +const pocni_kviz = document.getElementById("pocni_kviz"); +const username = document.getElementById('username'); +const naslov = document.getElementById('naslov'); +const bodovi_tekst = document.getElementById('bodovi'); +const prvo = document.getElementById('prvo'); +const drugo = document.getElementById('drugo'); +const trece = document.getElementById('trece'); +const cetvrto = document.getElementById('cetvrto'); +const prvo_tekst = document.getElementById('prvo_tekst'); +const drugo_tekst = document.getElementById('drugo_tekst'); +const trece_tekst = document.getElementById('trece_tekst'); +const cetvrto_tekst = document.getElementById('cetvrto_tekst'); +const proveri = document.getElementById('proveri'); +const sledece = document.getElementById('sledece'); +const tacno_netacno = document.getElementById('tacno_netacno'); +const vrati = document.getElementById('vrati'); +const slicica = document.getElementById('slicica'); +const dodatak_bodova = document.getElementById('dodatak_bodova'); +const igrac = document.getElementById('igrac'); +const unesi_username = document.getElementById('unesi_username'); +const timeline_container = document.getElementById('timeline-container'); + + +proveri.innerText = '检查答案'; +sledece.innerText = '下一题➜'; +let bodovi = 0; +let pitanje = 0; +let tacan_odgovor = 0; +const userValue = username.value; +let moj_username = ''; + +const pitanjaData = { + 1: { + pitanje: '水的化学式是什么？', + opcije: ['A) H₂O', 'B) CO₂', 'C) O₂', 'D) NaCl'], + tacanOdgovor: 'A) H₂O', + objasnjenje: '水的化学式是H₂O，表示一个水分子由2个氢原子和1个氧原子组成。CO₂是二氧化碳，O₂是氧气，NaCl是氯化钠（食盐）。' + }, + 2: { + pitanje: '以下哪种物质是金属？', + opcije: ['A) 硫', 'B) 铁', 'C) 碳', 'D) 磷'], + tacanOdgovor: 'B) 铁', + objasnjenje: '铁是一种金属元素，具有良好的导电性、导热性和延展性。硫、碳、磷都是非金属元素。' + }, + 3: { + pitanje: '以下哪个是化学变化？', + opcije: ['A) 冰融化成水', 'B) 酒精挥发', 'C) 铁生锈', 'D) 玻璃破碎'], + tacanOdgovor: 'C) 铁生锈', + objasnjenje: '化学变化是指产生新物质的变化。铁生锈时，铁与氧气和水反应生成了新物质——铁锈（氧化铁）。其他选项都是物理变化，没有产生新物质。' + }, + 4: { + pitanje: '氧气的化学式是什么？', + opcije: ['A) O', 'B) O₂', 'C) O₃', 'D) H₂O'], + tacanOdgovor: 'B) O₂', + objasnjenje: '氧气的化学式是O₂，表示一个氧气分子由2个氧原子组成。O是氧元素符号，O₃是臭氧，H₂O是水。' + }, + 5: { + pitanje: '以下哪种物质是酸？', + opcije: ['A) 氢氧化钠', 'B) 盐酸', 'C) 氯化钠', 'D) 氢氧化钙'], + tacanOdgovor: 'B) 盐酸', + objasnjenje: '盐酸（HCl）是一种强酸。氢氧化钠（NaOH）和氢氧化钙（Ca(OH)₂）是碱，氯化钠（NaCl）是盐。酸在水溶液中能解离出氢离子（H⁺）。' + } +}; + +document.querySelectorAll('.klikabilno').forEach(el => { + el.style.display = 'none'; +}); + +bodovi_tekst.style.display = 'none'; +igrac.style.display = 'none'; +timeline_container.style.display = 'none'; + + +pocni_kviz.onclick = () => { + const inputUsername = username.value.trim(); + if(!inputUsername){ + unesi_username.style.animation = 'none'; + void unesi_username.offsetWidth; + unesi_username.style.animation = 'shake 1s 1'; + unesi_username.innerText = '请输入用户名！' + return; + } + moj_username = inputUsername; + username.remove(); + pocni_kviz.remove(); + slicica.remove(); + document.querySelectorAll('.klikabilno').forEach(el => { + el.style.display = 'flex'; + }); + timeline_container.style.display = 'flex'; + proveri.style.display = 'block'; + bodovi_tekst.style.display = 'flex'; + igrac.style.display = 'flex'; + slicica.style.margin ='10px auto'; + + bodovi_tekst.innerText = `分数：${bodovi}`; + igrac.innerText = `玩家：${moj_username}`; + unesi_username.innerText = ''; + + postaviPitanje(); +}; + + + +postaviPitanje = () => { + pitanje++; + const data = pitanjaData[pitanje]; + if (data) { + naslov.innerText = `${pitanje}. ${data.pitanje}`; + prvo_tekst.innerText = data.opcije[0]; + drugo_tekst.innerText = data.opcije[1]; + trece_tekst.innerText = data.opcije[2]; + cetvrto_tekst.innerText = data.opcije[3]; + } + + [prvo, drugo, trece, cetvrto].forEach(r => r.checked = false); + document.querySelectorAll('.klikabilno').forEach(l => l.classList.remove('bold')); + tacno_netacno.innerText = ''; + sledece.style.display = 'none'; + proveri.style.display = 'block'; + + + updateTimeline(pitanje); + +} + + + +const timeline = document.getElementById('timeline'); +const ukupnaPitanja = 5; + +updateTimeline = (pitanje) => { + const procent = (pitanje / ukupnaPitanja) * 100; + timeline.style.width = procent + '%'; +} + +getOpcije = (pitanje) => { + if(pitanje === 1){ + return [ + {el: prvo, tacno: true}, + {el: drugo, tacno: false}, + {el: trece, tacno: false}, + {el: cetvrto, tacno: false} + ]; + } else if(pitanje === 2){ + return [ + {el: prvo, tacno: false}, + {el: drugo, tacno: true}, + {el: trece, tacno: false}, + {el: cetvrto, tacno: false} + ]; + } else if(pitanje === 3){ + return [ + {el: prvo, tacno: false}, + {el: drugo, tacno: false}, + {el: trece, tacno: true}, + {el: cetvrto, tacno: false} + ]; + } else if(pitanje === 4){ + return [ + {el: prvo, tacno: false}, + {el: drugo, tacno: true}, + {el: trece, tacno: false}, + {el: cetvrto, tacno: false} + ]; + } else if(pitanje === 5){ + return [ + {el: prvo, tacno: false}, + {el: drugo, tacno: true}, + {el: trece, tacno: false}, + {el: cetvrto, tacno: false} + ]; + } +} + +const snimiPogresnoPitanje = (pitanjeBroj, korisnikovOdgovor) => { + const data = pitanjaData[pitanjeBroj]; + if (!data) return; + + const pogresnoPitanje = { + id: `hemija_${pitanjeBroj}_${Date.now()}`, + kategorija: '化学', + pitanje: data.pitanje, + opcije: data.opcije, + korisnikovOdgovor: korisnikovOdgovor, + tacanOdgovor: data.tacanOdgovor, + objasnjenje: data.objasnjenje, + 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); + + if(!izabrana){ + tacno_netacno.style.color = '#374151' + tacno_netacno.innerText = '请选择一个答案！'; + return; + } + + proveri.style.display = 'none'; + sledece.style.display = 'block'; + + const korisnikovOdgovor = izabrana.el.nextElementSibling.innerText; + const data = pitanjaData[pitanje]; + + if(izabrana.tacno){ + tacno_netacno.innerHTML = `恭喜 ${moj_username}，回答正确！
${data.objasnjenje}`; + tacno_netacno.style.color = '#22C55E'; + bodovi += 10; + + dodatak_bodova.style.animation = 'none'; + void dodatak_bodova.offsetWidth; + dodatak_bodova.style.animation = 'bodoviIzlaz 2s ease-in-out 1'; + + wrapper.style.animation = 'none'; + void wrapper.offsetWidth; + wrapper.style.animation = 'tacanOdgovor 1s 1'; + tacan_odgovor ++; + } else { + tacno_netacno.innerHTML = `回答错误！
${data.objasnjenje}`; + tacno_netacno.style.color = '#EF4444'; + + snimiPogresnoPitanje(pitanje, korisnikovOdgovor); + + wrapper.style.animation = 'none'; + void wrapper.offsetWidth; + wrapper.style.animation = 'netacanOdgovor 1s 1'; + } + bodovi_tekst.innerText = `分数：${bodovi}`; + + if(pitanje === 5){ + sledece.innerText = '测验结束'; + sledece.onclick = krajKviza; + } +}; +krajKviza = () => { + let procenat = (tacan_odgovor / pitanje) * 100; + procenat = (procenat.toFixed(2)); + if(bodovi === (pitanje * 10)) { + naslov.innerHTML = `恭喜 ${moj_username}，测验完成！
所有问题都回答正确！

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

${procenat}%

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

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

${procenat}%

`; + }else { + naslov.innerHTML = `

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

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

${procenat}%

`; + } + + + [prvo_tekst, drugo_tekst, trece_tekst, cetvrto_tekst].forEach(el => el.innerText = ''); + document.querySelectorAll('.klikabilno').forEach(el => { + el.style.display = 'none'; + }); + proveri.style.display = 'none'; + sledece.style.display = 'none'; + bodovi_tekst.style.display = 'none' + igrac.style.display = 'none'; + timeline_container.style.display = 'none'; + + + tacno_netacno.style.color = '#111827' + tacno_netacno.innerHTML = '⬅返回首页'; + vrati.remove(); +} + +sledece.onclick = postaviPitanje; + +document.querySelectorAll(".klikabilno").forEach(el => { + el.addEventListener("click", () => { + document.querySelectorAll('.klikabilno').forEach(l => l.classList.remove('bold')); + el.classList.add('bold'); + }); +}); \ No newline at end of file diff --git a/oblasti/informatika/informatika.html b/oblasti/informatika/informatika.html new file mode 100644 index 0000000..25c8005 --- /dev/null +++ b/oblasti/informatika/informatika.html @@ -0,0 +1,71 @@ + + + + + + + + + + + 知识测验 + + + +
+
+

计算机知识测验

+
+ + +

+
+ +
+

+
+ + + + + + + + +
+

+ + +
+
+
+
+

+

+

+10

+ ⬅返回首页 + +
+ + + +
+
+ + + + + + + + + \ No newline at end of file diff --git a/oblasti/informatika/informatika.js b/oblasti/informatika/informatika.js new file mode 100644 index 0000000..d9bd0b9 --- /dev/null +++ b/oblasti/informatika/informatika.js @@ -0,0 +1,286 @@ + +const wrapper = document.getElementById('wrapper') +const pocni_kviz = document.getElementById("pocni_kviz"); +const username = document.getElementById('username'); +const naslov = document.getElementById('naslov'); +const bodovi_tekst = document.getElementById('bodovi'); +const prvo = document.getElementById('prvo'); +const drugo = document.getElementById('drugo'); +const trece = document.getElementById('trece'); +const cetvrto = document.getElementById('cetvrto'); +const prvo_tekst = document.getElementById('prvo_tekst'); +const drugo_tekst = document.getElementById('drugo_tekst'); +const trece_tekst = document.getElementById('trece_tekst'); +const cetvrto_tekst = document.getElementById('cetvrto_tekst'); +const proveri = document.getElementById('proveri'); +const sledece = document.getElementById('sledece'); +const tacno_netacno = document.getElementById('tacno_netacno'); +const vrati = document.getElementById('vrati'); +const slicica = document.getElementById('slicica'); +const dodatak_bodova = document.getElementById('dodatak_bodova'); +const igrac = document.getElementById('igrac'); +const unesi_username = document.getElementById('unesi_username'); +const timeline_container = document.getElementById('timeline-container'); + + +proveri.innerText = '检查答案'; +sledece.innerText = '下一题➜'; +let bodovi = 0; +let pitanje = 0; +let tacan_odgovor = 0; +const userValue = username.value; +let moj_username = ''; + +const pitanjaData = { + 1: { + pitanje: 'HTML的全称是什么？', + opcije: ['A) Hyper Text Markup Language', 'B) High Tech Modern Language', 'C) Home Tool Markup Language', 'D) Hyperlinks and Text Markup Language'], + tacanOdgovor: 'A) Hyper Text Markup Language', + objasnjenje: 'HTML是Hyper Text Markup Language（超文本标记语言）的缩写。它是构建网页的标准标记语言，使用标签来描述网页的结构和内容。' + }, + 2: { + pitanje: '以下哪个不是编程语言？', + opcije: ['A) Python', 'B) JavaScript', 'C) Photoshop', 'D) Java'], + tacanOdgovor: 'C) Photoshop', + objasnjenje: 'Photoshop是Adobe公司开发的图像处理软件，不是编程语言。Python、JavaScript、Java都是常用的编程语言。' + }, + 3: { + pitanje: '1GB等于多少MB？', + opcije: ['A) 100MB', 'B) 512MB', 'C) 1000MB', 'D) 1024MB'], + tacanOdgovor: 'D) 1024MB', + objasnjenje: '计算机存储容量采用二进制系统，1GB（千兆字节）等于1024MB（兆字节）。这是因为2的10次方等于1024。同样，1MB=1024KB，1KB=1024字节。' + }, + 4: { + pitanje: '以下哪个是关系型数据库？', + opcije: ['A) MongoDB', 'B) Redis', 'C) MySQL', 'D) Cassandra'], + tacanOdgovor: 'C) MySQL', + objasnjenje: 'MySQL是关系型数据库管理系统（RDBMS），使用表格来存储数据，支持SQL查询语言。MongoDB、Redis、Cassandra都是非关系型数据库（NoSQL）。' + }, + 5: { + pitanje: 'API的全称是什么？', + opcije: ['A) Application Programming Interface', 'B) Advanced Programming Interface', 'C) Automated Process Integration', 'D) Application Process Integration'], + tacanOdgovor: 'A) Application Programming Interface', + objasnjenje: 'API是Application Programming Interface（应用程序编程接口）的缩写。它是一组定义好的规则和协议，允许不同的软件应用程序之间进行通信和数据交换。' + } +}; + +document.querySelectorAll('.klikabilno').forEach(el => { + el.style.display = 'none'; +}); + +bodovi_tekst.style.display = 'none'; +igrac.style.display = 'none'; +timeline_container.style.display = 'none'; + + +pocni_kviz.onclick = () => { + const inputUsername = username.value.trim(); + if(!inputUsername){ + unesi_username.style.animation = 'none'; + void unesi_username.offsetWidth; + unesi_username.style.animation = 'shake 1s 1'; + unesi_username.innerText = '请输入用户名！' + return; + } + moj_username = inputUsername; + username.remove(); + pocni_kviz.remove(); + slicica.remove(); + document.querySelectorAll('.klikabilno').forEach(el => { + el.style.display = 'flex'; + }); + timeline_container.style.display = 'flex'; + proveri.style.display = 'block'; + bodovi_tekst.style.display = 'flex'; + igrac.style.display = 'flex'; + slicica.style.margin ='10px auto'; + + bodovi_tekst.innerText = `分数：${bodovi}`; + igrac.innerText = `玩家：${moj_username}`; + unesi_username.innerText = ''; + + postaviPitanje(); +}; + + + +postaviPitanje = () => { + pitanje++; + const data = pitanjaData[pitanje]; + if (data) { + naslov.innerText = `${pitanje}. ${data.pitanje}`; + prvo_tekst.innerText = data.opcije[0]; + drugo_tekst.innerText = data.opcije[1]; + trece_tekst.innerText = data.opcije[2]; + cetvrto_tekst.innerText = data.opcije[3]; + } + + [prvo, drugo, trece, cetvrto].forEach(r => r.checked = false); + document.querySelectorAll('.klikabilno').forEach(l => l.classList.remove('bold')); + tacno_netacno.innerText = ''; + sledece.style.display = 'none'; + proveri.style.display = 'block'; + + + updateTimeline(pitanje); + +} + + + +const timeline = document.getElementById('timeline'); +const ukupnaPitanja = 5; + +updateTimeline = (pitanje) => { + const procent = (pitanje / ukupnaPitanja) * 100; + timeline.style.width = procent + '%'; +} + +getOpcije = (pitanje) => { + if(pitanje === 1){ + return [ + {el: prvo, tacno: true}, + {el: drugo, tacno: false}, + {el: trece, tacno: false}, + {el: cetvrto, tacno: false} + ]; + } else if(pitanje === 2){ + return [ + {el: prvo, tacno: false}, + {el: drugo, tacno: false}, + {el: trece, tacno: true}, + {el: cetvrto, tacno: false} + ]; + } else if(pitanje === 3){ + return [ + {el: prvo, tacno: false}, + {el: drugo, tacno: false}, + {el: trece, tacno: false}, + {el: cetvrto, tacno: true} + ]; + } else if(pitanje === 4){ + return [ + {el: prvo, tacno: false}, + {el: drugo, tacno: false}, + {el: trece, tacno: true}, + {el: cetvrto, tacno: false} + ]; + } else if(pitanje === 5){ + return [ + {el: prvo, tacno: true}, + {el: drugo, tacno: false}, + {el: trece, tacno: false}, + {el: cetvrto, tacno: false} + ]; + } +} + +const snimiPogresnoPitanje = (pitanjeBroj, korisnikovOdgovor) => { + const data = pitanjaData[pitanjeBroj]; + if (!data) return; + + const pogresnoPitanje = { + id: `informatika_${pitanjeBroj}_${Date.now()}`, + kategorija: '计算机', + pitanje: data.pitanje, + opcije: data.opcije, + korisnikovOdgovor: korisnikovOdgovor, + tacanOdgovor: data.tacanOdgovor, + objasnjenje: data.objasnjenje, + 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); + + if(!izabrana){ + tacno_netacno.style.color = '#374151' + tacno_netacno.innerText = '请选择一个答案！'; + return; + } + + proveri.style.display = 'none'; + sledece.style.display = 'block'; + + const korisnikovOdgovor = izabrana.el.nextElementSibling.innerText; + const data = pitanjaData[pitanje]; + + if(izabrana.tacno){ + tacno_netacno.innerHTML = `恭喜 ${moj_username}，回答正确！
${data.objasnjenje}`; + tacno_netacno.style.color = '#22C55E'; + bodovi += 10; + + dodatak_bodova.style.animation = 'none'; + void dodatak_bodova.offsetWidth; + dodatak_bodova.style.animation = 'bodoviIzlaz 2s ease-in-out 1'; + + wrapper.style.animation = 'none'; + void wrapper.offsetWidth; + wrapper.style.animation = 'tacanOdgovor 1s 1'; + tacan_odgovor ++; + } else { + tacno_netacno.innerHTML = `回答错误！
${data.objasnjenje}`; + tacno_netacno.style.color = '#EF4444'; + + snimiPogresnoPitanje(pitanje, korisnikovOdgovor); + + wrapper.style.animation = 'none'; + void wrapper.offsetWidth; + wrapper.style.animation = 'netacanOdgovor 1s 1'; + } + bodovi_tekst.innerText = `分数：${bodovi}`; + + if(pitanje === 5){ + sledece.innerText = '测验结束'; + sledece.onclick = krajKviza; + } +}; +krajKviza = () => { + let procenat = (tacan_odgovor / pitanje) * 100; + procenat = (procenat.toFixed(2)); + if(bodovi === (pitanje * 10)) { + naslov.innerHTML = `恭喜 ${moj_username}，测验完成！
所有问题都回答正确！

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

${procenat}%

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

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

${procenat}%

`; + }else { + naslov.innerHTML = `

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

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

${procenat}%

`; + } + + + [prvo_tekst, drugo_tekst, trece_tekst, cetvrto_tekst].forEach(el => el.innerText = ''); + document.querySelectorAll('.klikabilno').forEach(el => { + el.style.display = 'none'; + }); + proveri.style.display = 'none'; + sledece.style.display = 'none'; + bodovi_tekst.style.display = 'none' + igrac.style.display = 'none'; + timeline_container.style.display = 'none'; + + + tacno_netacno.style.color = '#111827' + tacno_netacno.innerHTML = '⬅返回首页'; + vrati.remove(); +} + +sledece.onclick = postaviPitanje; + +document.querySelectorAll(".klikabilno").forEach(el => { + el.addEventListener("click", () => { + document.querySelectorAll('.klikabilno').forEach(l => l.classList.remove('bold')); + el.classList.add('bold'); + }); +}); \ No newline at end of file diff --git a/oblasti/knjizevnost/knjizevnost.html b/oblasti/knjizevnost/knjizevnost.html new file mode 100644 index 0000000..318a39b --- /dev/null +++ b/oblasti/knjizevnost/knjizevnost.html @@ -0,0 +1,71 @@ + + + + + + + + + + + 知识测验 + + + +
+
+

文学知识测验

+
+ + +

+
+ +
+

+
+ + + + + + + + +
+

+ + +
+
+
+
+

+

+

+10

+ ⬅返回首页 + +
+ + + +
+
+ + + + + + + + + \ No newline at end of file diff --git a/oblasti/knjizevnost/knjizevnost.js b/oblasti/knjizevnost/knjizevnost.js new file mode 100644 index 0000000..1ecfed1 --- /dev/null +++ b/oblasti/knjizevnost/knjizevnost.js @@ -0,0 +1,286 @@ + +const wrapper = document.getElementById('wrapper') +const pocni_kviz = document.getElementById("pocni_kviz"); +const username = document.getElementById('username'); +const naslov = document.getElementById('naslov'); +const bodovi_tekst = document.getElementById('bodovi'); +const prvo = document.getElementById('prvo'); +const drugo = document.getElementById('drugo'); +const trece = document.getElementById('trece'); +const cetvrto = document.getElementById('cetvrto'); +const prvo_tekst = document.getElementById('prvo_tekst'); +const drugo_tekst = document.getElementById('drugo_tekst'); +const trece_tekst = document.getElementById('trece_tekst'); +const cetvrto_tekst = document.getElementById('cetvrto_tekst'); +const proveri = document.getElementById('proveri'); +const sledece = document.getElementById('sledece'); +const tacno_netacno = document.getElementById('tacno_netacno'); +const vrati = document.getElementById('vrati'); +const slicica = document.getElementById('slicica'); +const dodatak_bodova = document.getElementById('dodatak_bodova'); +const igrac = document.getElementById('igrac'); +const unesi_username = document.getElementById('unesi_username'); +const timeline_container = document.getElementById('timeline-container'); + + +proveri.innerText = '检查答案'; +sledece.innerText = '下一题➜'; +let bodovi = 0; +let pitanje = 0; +let tacan_odgovor = 0; +const userValue = username.value; +let moj_username = ''; + +const pitanjaData = { + 1: { + pitanje: '《红楼梦》的作者是谁？', + opcije: ['A) 罗贯中', 'B) 施耐庵', 'C) 曹雪芹', 'D) 吴承恩'], + tacanOdgovor: 'C) 曹雪芹', + objasnjenje: '《红楼梦》是中国古典四大名著之一，作者是清代作家曹雪芹。罗贯中著《三国演义》，施耐庵著《水浒传》，吴承恩著《西游记》。' + }, + 2: { + pitanje: '"床前明月光，疑是地上霜"是谁的诗句？', + opcije: ['A) 杜甫', 'B) 李白', 'C) 白居易', 'D) 王维'], + tacanOdgovor: 'B) 李白', + objasnjenje: '这是唐代诗人李白的《静夜思》。李白被称为"诗仙"，是中国历史上最伟大的浪漫主义诗人之一。' + }, + 3: { + pitanje: '以下哪部是鲁迅的作品？', + opcije: ['A) 《骆驼祥子》', 'B) 《阿Q正传》', 'C) 《家》', 'D) 《雷雨》'], + tacanOdgovor: 'B) 《阿Q正传》', + objasnjenje: '《阿Q正传》是鲁迅的代表作之一。《骆驼祥子》是老舍的作品，《家》是巴金的作品，《雷雨》是曹禺的作品。' + }, + 4: { + pitanje: '"窈窕淑女，君子好逑"出自哪部经典？', + opcije: ['A) 《论语》', 'B) 《孟子》', 'C) 《诗经》', 'D) 《楚辞》'], + tacanOdgovor: 'C) 《诗经》', + objasnjenje: '这句诗出自《诗经·周南·关雎》，是《诗经》的开篇之作。《诗经》是中国最早的诗歌总集，收录了西周初年到春秋中叶的诗歌305篇。' + }, + 5: { + pitanje: '以下哪位是唐宋八大家之一？', + opcije: ['A) 李白', 'B) 杜甫', 'C) 苏轼', 'D) 陆游'], + tacanOdgovor: 'C) 苏轼', + objasnjenje: '唐宋八大家是唐代韩愈、柳宗元和宋代苏轼、苏洵、苏辙、王安石、曾巩、欧阳修八位散文家的合称。李白、杜甫是唐代著名诗人，陆游是南宋著名诗人，但都不属于唐宋八大家。' + } +}; + +document.querySelectorAll('.klikabilno').forEach(el => { + el.style.display = 'none'; +}); + +bodovi_tekst.style.display = 'none'; +igrac.style.display = 'none'; +timeline_container.style.display = 'none'; + + +pocni_kviz.onclick = () => { + const inputUsername = username.value.trim(); + if(!inputUsername){ + unesi_username.style.animation = 'none'; + void unesi_username.offsetWidth; + unesi_username.style.animation = 'shake 1s 1'; + unesi_username.innerText = '请输入用户名！' + return; + } + moj_username = inputUsername; + username.remove(); + pocni_kviz.remove(); + slicica.remove(); + document.querySelectorAll('.klikabilno').forEach(el => { + el.style.display = 'flex'; + }); + timeline_container.style.display = 'flex'; + proveri.style.display = 'block'; + bodovi_tekst.style.display = 'flex'; + igrac.style.display = 'flex'; + slicica.style.margin ='10px auto'; + + bodovi_tekst.innerText = `分数：${bodovi}`; + igrac.innerText = `玩家：${moj_username}`; + unesi_username.innerText = ''; + + postaviPitanje(); +}; + + + +postaviPitanje = () => { + pitanje++; + const data = pitanjaData[pitanje]; + if (data) { + naslov.innerText = `${pitanje}. ${data.pitanje}`; + prvo_tekst.innerText = data.opcije[0]; + drugo_tekst.innerText = data.opcije[1]; + trece_tekst.innerText = data.opcije[2]; + cetvrto_tekst.innerText = data.opcije[3]; + } + + [prvo, drugo, trece, cetvrto].forEach(r => r.checked = false); + document.querySelectorAll('.klikabilno').forEach(l => l.classList.remove('bold')); + tacno_netacno.innerText = ''; + sledece.style.display = 'none'; + proveri.style.display = 'block'; + + + updateTimeline(pitanje); + +} + + + +const timeline = document.getElementById('timeline'); +const ukupnaPitanja = 5; + +updateTimeline = (pitanje) => { + const procent = (pitanje / ukupnaPitanja) * 100; + timeline.style.width = procent + '%'; +} + +getOpcije = (pitanje) => { + if(pitanje === 1){ + return [ + {el: prvo, tacno: false}, + {el: drugo, tacno: false}, + {el: trece, tacno: true}, + {el: cetvrto, tacno: false} + ]; + } else if(pitanje === 2){ + return [ + {el: prvo, tacno: false}, + {el: drugo, tacno: true}, + {el: trece, tacno: false}, + {el: cetvrto, tacno: false} + ]; + } else if(pitanje === 3){ + return [ + {el: prvo, tacno: false}, + {el: drugo, tacno: true}, + {el: trece, tacno: false}, + {el: cetvrto, tacno: false} + ]; + } else if(pitanje === 4){ + return [ + {el: prvo, tacno: false}, + {el: drugo, tacno: false}, + {el: trece, tacno: true}, + {el: cetvrto, tacno: false} + ]; + } else if(pitanje === 5){ + return [ + {el: prvo, tacno: false}, + {el: drugo, tacno: false}, + {el: trece, tacno: true}, + {el: cetvrto, tacno: false} + ]; + } +} + +const snimiPogresnoPitanje = (pitanjeBroj, korisnikovOdgovor) => { + const data = pitanjaData[pitanjeBroj]; + if (!data) return; + + const pogresnoPitanje = { + id: `knjizevnost_${pitanjeBroj}_${Date.now()}`, + kategorija: '文学', + pitanje: data.pitanje, + opcije: data.opcije, + korisnikovOdgovor: korisnikovOdgovor, + tacanOdgovor: data.tacanOdgovor, + objasnjenje: data.objasnjenje, + 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); + + if(!izabrana){ + tacno_netacno.style.color = '#374151' + tacno_netacno.innerText = '请选择一个答案！'; + return; + } + + proveri.style.display = 'none'; + sledece.style.display = 'block'; + + const korisnikovOdgovor = izabrana.el.nextElementSibling.innerText; + const data = pitanjaData[pitanje]; + + if(izabrana.tacno){ + tacno_netacno.innerHTML = `恭喜 ${moj_username}，回答正确！
${data.objasnjenje}`; + tacno_netacno.style.color = '#22C55E'; + bodovi += 10; + + dodatak_bodova.style.animation = 'none'; + void dodatak_bodova.offsetWidth; + dodatak_bodova.style.animation = 'bodoviIzlaz 2s ease-in-out 1'; + + wrapper.style.animation = 'none'; + void wrapper.offsetWidth; + wrapper.style.animation = 'tacanOdgovor 1s 1'; + tacan_odgovor ++; + } else { + tacno_netacno.innerHTML = `回答错误！
${data.objasnjenje}`; + tacno_netacno.style.color = '#EF4444'; + + snimiPogresnoPitanje(pitanje, korisnikovOdgovor); + + wrapper.style.animation = 'none'; + void wrapper.offsetWidth; + wrapper.style.animation = 'netacanOdgovor 1s 1'; + } + bodovi_tekst.innerText = `分数：${bodovi}`; + + if(pitanje === 5){ + sledece.innerText = '测验结束'; + sledece.onclick = krajKviza; + } +}; +krajKviza = () => { + let procenat = (tacan_odgovor / pitanje) * 100; + procenat = (procenat.toFixed(2)); + if(bodovi === (pitanje * 10)) { + naslov.innerHTML = `恭喜 ${moj_username}，测验完成！
所有问题都回答正确！

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

${procenat}%

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

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

${procenat}%

`; + }else { + naslov.innerHTML = `

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

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

${procenat}%

`; + } + + + [prvo_tekst, drugo_tekst, trece_tekst, cetvrto_tekst].forEach(el => el.innerText = ''); + document.querySelectorAll('.klikabilno').forEach(el => { + el.style.display = 'none'; + }); + proveri.style.display = 'none'; + sledece.style.display = 'none'; + bodovi_tekst.style.display = 'none' + igrac.style.display = 'none'; + timeline_container.style.display = 'none'; + + + tacno_netacno.style.color = '#111827' + tacno_netacno.innerHTML = '⬅返回首页'; + vrati.remove(); +} + +sledece.onclick = postaviPitanje; + +document.querySelectorAll(".klikabilno").forEach(el => { + el.addEventListener("click", () => { + document.querySelectorAll('.klikabilno').forEach(l => l.classList.remove('bold')); + el.classList.add('bold'); + }); +}); \ No newline at end of file diff --git a/oblasti/sociologija/sociologija.html b/oblasti/sociologija/sociologija.html new file mode 100644 index 0000000..814bc0c --- /dev/null +++ b/oblasti/sociologija/sociologija.html @@ -0,0 +1,71 @@ + + + + + + + + + + + 知识测验 + + + +
+
+

社会学知识测验

+
+ + +

+
+ +
+

+
+ + + + + + + + +
+

+ + +
+
+
+
+

+

+

+10

+ ⬅返回首页 + +
+ + + +
+
+ + + + + + + + + \ No newline at end of file diff --git a/oblasti/sociologija/sociologija.js b/oblasti/sociologija/sociologija.js new file mode 100644 index 0000000..05851de --- /dev/null +++ b/oblasti/sociologija/sociologija.js @@ -0,0 +1,286 @@ + +const wrapper = document.getElementById('wrapper') +const pocni_kviz = document.getElementById("pocni_kviz"); +const username = document.getElementById('username'); +const naslov = document.getElementById('naslov'); +const bodovi_tekst = document.getElementById('bodovi'); +const prvo = document.getElementById('prvo'); +const drugo = document.getElementById('drugo'); +const trece = document.getElementById('trece'); +const cetvrto = document.getElementById('cetvrto'); +const prvo_tekst = document.getElementById('prvo_tekst'); +const drugo_tekst = document.getElementById('drugo_tekst'); +const trece_tekst = document.getElementById('trece_tekst'); +const cetvrto_tekst = document.getElementById('cetvrto_tekst'); +const proveri = document.getElementById('proveri'); +const sledece = document.getElementById('sledece'); +const tacno_netacno = document.getElementById('tacno_netacno'); +const vrati = document.getElementById('vrati'); +const slicica = document.getElementById('slicica'); +const dodatak_bodova = document.getElementById('dodatak_bodova'); +const igrac = document.getElementById('igrac'); +const unesi_username = document.getElementById('unesi_username'); +const timeline_container = document.getElementById('timeline-container'); + + +proveri.innerText = '检查答案'; +sledece.innerText = '下一题➜'; +let bodovi = 0; +let pitanje = 0; +let tacan_odgovor = 0; +const userValue = username.value; +let moj_username = ''; + +const pitanjaData = { + 1: { + pitanje: '社会学的创始人是谁？', + opcije: ['A) 卡尔·马克思', 'B) 奥古斯特·孔德', 'C) 埃米尔·涂尔干', 'D) 马克斯·韦伯'], + tacanOdgovor: 'B) 奥古斯特·孔德', + objasnjenje: '奥古斯特·孔德（Auguste Comte）被认为是社会学的创始人，他在19世纪30年代首次使用"社会学"一词，提出了实证主义的研究方法。马克思、涂尔干、韦伯都是社会学的重要奠基者，但不是创始人。' + }, + 2: { + pitanje: '以下哪个是初级群体的典型例子？', + opcije: ['A) 公司同事', 'B) 学校班级', 'C) 家庭', 'D) 社交网络'], + tacanOdgovor: 'C) 家庭', + objasnjenje: '初级群体是由面对面的互动形成的、具有亲密人际关系的社会群体。家庭是最典型的初级群体，成员之间有深厚的情感联系和长期的互动。同事、班级属于次级群体。' + }, + 3: { + pitanje: '"镜中我"理论是谁提出的？', + opcije: ['A) 乔治·米德', 'B) 查尔斯·库利', 'C) 欧文·戈夫曼', 'D) 塔尔科特·帕森斯'], + tacanOdgovor: 'B) 查尔斯·库利', + objasnjenje: '"镜中我"（Looking-glass self）理论是美国社会学家查尔斯·库利提出的。该理论认为，人的自我认知是通过与他人的互动形成的，我们想象他人如何看待我们，然后根据这种想象形成自我概念。' + }, + 4: { + pitanje: '以下哪个属于越轨行为？', + opcije: ['A) 按时上班', 'B) 遵守交通规则', 'C) 在图书馆安静看书', 'D) 在公共场所大声喧哗'], + tacanOdgovor: 'D) 在公共场所大声喧哗', + objasnjenje: '越轨行为是指违反社会规范的行为。在公共场所大声喧哗违反了公共秩序规范，属于越轨行为。其他选项都是符合社会规范的正常行为。越轨行为不一定是犯罪，也可以是违反道德规范的行为。' + }, + 5: { + pitanje: '社会分层的主要维度不包括以下哪项？', + opcije: ['A) 经济收入', 'B) 教育程度', 'C) 职业声望', 'D) 个人身高'], + tacanOdgovor: 'D) 个人身高', + objasnjenje: '社会分层是指社会成员被分成高低不同的等级层次。主要维度包括：经济收入（经济资本）、教育程度（文化资本）、职业声望（社会资本）等。个人身高与社会分层无关，不影响社会地位的划分。' + } +}; + +document.querySelectorAll('.klikabilno').forEach(el => { + el.style.display = 'none'; +}); + +bodovi_tekst.style.display = 'none'; +igrac.style.display = 'none'; +timeline_container.style.display = 'none'; + + +pocni_kviz.onclick = () => { + const inputUsername = username.value.trim(); + if(!inputUsername){ + unesi_username.style.animation = 'none'; + void unesi_username.offsetWidth; + unesi_username.style.animation = 'shake 1s 1'; + unesi_username.innerText = '请输入用户名！' + return; + } + moj_username = inputUsername; + username.remove(); + pocni_kviz.remove(); + slicica.remove(); + document.querySelectorAll('.klikabilno').forEach(el => { + el.style.display = 'flex'; + }); + timeline_container.style.display = 'flex'; + proveri.style.display = 'block'; + bodovi_tekst.style.display = 'flex'; + igrac.style.display = 'flex'; + slicica.style.margin ='10px auto'; + + bodovi_tekst.innerText = `分数：${bodovi}`; + igrac.innerText = `玩家：${moj_username}`; + unesi_username.innerText = ''; + + postaviPitanje(); +}; + + + +postaviPitanje = () => { + pitanje++; + const data = pitanjaData[pitanje]; + if (data) { + naslov.innerText = `${pitanje}. ${data.pitanje}`; + prvo_tekst.innerText = data.opcije[0]; + drugo_tekst.innerText = data.opcije[1]; + trece_tekst.innerText = data.opcije[2]; + cetvrto_tekst.innerText = data.opcije[3]; + } + + [prvo, drugo, trece, cetvrto].forEach(r => r.checked = false); + document.querySelectorAll('.klikabilno').forEach(l => l.classList.remove('bold')); + tacno_netacno.innerText = ''; + sledece.style.display = 'none'; + proveri.style.display = 'block'; + + + updateTimeline(pitanje); + +} + + + +const timeline = document.getElementById('timeline'); +const ukupnaPitanja = 5; + +updateTimeline = (pitanje) => { + const procent = (pitanje / ukupnaPitanja) * 100; + timeline.style.width = procent + '%'; +} + +getOpcije = (pitanje) => { + if(pitanje === 1){ + return [ + {el: prvo, tacno: false}, + {el: drugo, tacno: true}, + {el: trece, tacno: false}, + {el: cetvrto, tacno: false} + ]; + } else if(pitanje === 2){ + return [ + {el: prvo, tacno: false}, + {el: drugo, tacno: false}, + {el: trece, tacno: true}, + {el: cetvrto, tacno: false} + ]; + } else if(pitanje === 3){ + return [ + {el: prvo, tacno: false}, + {el: drugo, tacno: true}, + {el: trece, tacno: false}, + {el: cetvrto, tacno: false} + ]; + } else if(pitanje === 4){ + return [ + {el: prvo, tacno: false}, + {el: drugo, tacno: false}, + {el: trece, tacno: false}, + {el: cetvrto, tacno: true} + ]; + } else if(pitanje === 5){ + return [ + {el: prvo, tacno: false}, + {el: drugo, tacno: false}, + {el: trece, tacno: false}, + {el: cetvrto, tacno: true} + ]; + } +} + +const snimiPogresnoPitanje = (pitanjeBroj, korisnikovOdgovor) => { + const data = pitanjaData[pitanjeBroj]; + if (!data) return; + + const pogresnoPitanje = { + id: `sociologija_${pitanjeBroj}_${Date.now()}`, + kategorija: '社会学', + pitanje: data.pitanje, + opcije: data.opcije, + korisnikovOdgovor: korisnikovOdgovor, + tacanOdgovor: data.tacanOdgovor, + objasnjenje: data.objasnjenje, + 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); + + if(!izabrana){ + tacno_netacno.style.color = '#374151' + tacno_netacno.innerText = '请选择一个答案！'; + return; + } + + proveri.style.display = 'none'; + sledece.style.display = 'block'; + + const korisnikovOdgovor = izabrana.el.nextElementSibling.innerText; + const data = pitanjaData[pitanje]; + + if(izabrana.tacno){ + tacno_netacno.innerHTML = `恭喜 ${moj_username}，回答正确！
${data.objasnjenje}`; + tacno_netacno.style.color = '#22C55E'; + bodovi += 10; + + dodatak_bodova.style.animation = 'none'; + void dodatak_bodova.offsetWidth; + dodatak_bodova.style.animation = 'bodoviIzlaz 2s ease-in-out 1'; + + wrapper.style.animation = 'none'; + void wrapper.offsetWidth; + wrapper.style.animation = 'tacanOdgovor 1s 1'; + tacan_odgovor ++; + } else { + tacno_netacno.innerHTML = `回答错误！
${data.objasnjenje}`; + tacno_netacno.style.color = '#EF4444'; + + snimiPogresnoPitanje(pitanje, korisnikovOdgovor); + + wrapper.style.animation = 'none'; + void wrapper.offsetWidth; + wrapper.style.animation = 'netacanOdgovor 1s 1'; + } + bodovi_tekst.innerText = `分数：${bodovi}`; + + if(pitanje === 5){ + sledece.innerText = '测验结束'; + sledece.onclick = krajKviza; + } +}; +krajKviza = () => { + let procenat = (tacan_odgovor / pitanje) * 100; + procenat = (procenat.toFixed(2)); + if(bodovi === (pitanje * 10)) { + naslov.innerHTML = `恭喜 ${moj_username}，测验完成！
所有问题都回答正确！

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

${procenat}%

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

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

${procenat}%

`; + }else { + naslov.innerHTML = `

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

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

${procenat}%

`; + } + + + [prvo_tekst, drugo_tekst, trece_tekst, cetvrto_tekst].forEach(el => el.innerText = ''); + document.querySelectorAll('.klikabilno').forEach(el => { + el.style.display = 'none'; + }); + proveri.style.display = 'none'; + sledece.style.display = 'none'; + bodovi_tekst.style.display = 'none' + igrac.style.display = 'none'; + timeline_container.style.display = 'none'; + + + tacno_netacno.style.color = '#111827' + tacno_netacno.innerHTML = '⬅返回首页'; + vrati.remove(); +} + +sledece.onclick = postaviPitanje; + +document.querySelectorAll(".klikabilno").forEach(el => { + el.addEventListener("click", () => { + document.querySelectorAll('.klikabilno').forEach(l => l.classList.remove('bold')); + el.classList.add('bold'); + }); +}); \ No newline at end of file