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