prawie dziala
This commit is contained in:
Sebastian Molenda
@@ -0,0 +1,453 @@
|
||||
// Minimal app logic for math training
|
||||
const state = {
|
||||
ops: new Set(),
|
||||
mode: null, // 'timed' or 'training'
|
||||
score: 0,
|
||||
currentProblem: null,
|
||||
answerBuffer: '',
|
||||
timerId: null,
|
||||
timeLeft: 60,
|
||||
sessionSolved: 0,
|
||||
sessionTarget: 20,
|
||||
settings: {
|
||||
timedSeconds: 60,
|
||||
maxResult: 40,
|
||||
maxOperand: 20,
|
||||
sessionProblems: 20,
|
||||
allowNegative: false,
|
||||
allowFraction: false,
|
||||
}
|
||||
}
|
||||
|
||||
// elements
|
||||
const menuScreen = document.getElementById('menu-screen')
|
||||
const playScreen = document.getElementById('play-screen')
|
||||
const opsContainer = document.getElementById('ops')
|
||||
const modeButtons = document.querySelectorAll('.mode-btn')
|
||||
const opButtons = document.querySelectorAll('.op-btn')
|
||||
const backBtn = document.getElementById('back-btn')
|
||||
const problemEl = document.getElementById('problem')
|
||||
const answerEl = document.getElementById('answer')
|
||||
const feedbackEl = document.getElementById('feedback')
|
||||
const timerEl = document.getElementById('timer')
|
||||
const scoreEl = document.getElementById('score')
|
||||
const keypad = document.querySelectorAll('.key')
|
||||
const submitBtn = document.getElementById('submit')
|
||||
const clearBtn = document.getElementById('clear')
|
||||
const backspaceBtn = document.getElementById('backspace')
|
||||
const historyPanel = document.getElementById('history-panel')
|
||||
const settingTimed = document.getElementById('setting-timed')
|
||||
const settingMaxResult = document.getElementById('setting-max-result')
|
||||
const settingMaxOperand = document.getElementById('setting-max-operand')
|
||||
const settingSessionProblems = document.getElementById('setting-session-problems')
|
||||
const settingAllowNegative = document.getElementById('setting-allow-negative')
|
||||
const settingAllowFraction = document.getElementById('setting-allow-fraction')
|
||||
const saveSettingsBtn = document.getElementById('save-settings')
|
||||
const resetSettingsBtn = document.getElementById('reset-settings')
|
||||
const progressInner = document.getElementById('progress_inner')
|
||||
const dotBtn = document.getElementById('dot')
|
||||
const negateBtn = document.getElementById('negate')
|
||||
const summaryOverlay = document.getElementById('summary-overlay')
|
||||
const summaryText = document.getElementById('summary-text')
|
||||
const summaryBack = document.getElementById('summary-back')
|
||||
const statusEl = document.getElementById('status');
|
||||
|
||||
// load settings from localStorage
|
||||
function loadSettings(){
|
||||
try{
|
||||
let progressInner = null
|
||||
if (raw) {
|
||||
const s = JSON.parse(raw)
|
||||
state.settings = Object.assign(state.settings, s)
|
||||
}
|
||||
}catch(e){ console.warn('settings load failed', e) }
|
||||
// reflect to inputs
|
||||
settingTimed.value = state.settings.timedSeconds
|
||||
settingMaxResult.value = state.settings.maxResult
|
||||
settingMaxOperand.value = state.settings.maxOperand
|
||||
settingSessionProblems.value = state.settings.sessionProblems
|
||||
settingAllowNegative.checked = !!state.settings.allowNegative
|
||||
settingAllowFraction.checked = !!state.settings.allowFraction
|
||||
}
|
||||
|
||||
function saveSettings(){
|
||||
state.settings.timedSeconds = Math.max(5, Math.min(600, parseInt(settingTimed.value,10) || 60))
|
||||
state.settings.maxResult = Math.max(1, Math.min(999, parseInt(settingMaxResult.value,10) || 40))
|
||||
state.settings.maxOperand = Math.max(1, Math.min(999, parseInt(settingMaxOperand.value,10) || 20))
|
||||
state.settings.sessionProblems = Math.max(1, Math.min(500, parseInt(settingSessionProblems.value,10) || 20))
|
||||
state.settings.allowNegative = !!settingAllowNegative.checked
|
||||
state.settings.allowFraction = !!settingAllowFraction.checked
|
||||
try{ localStorage.setItem('matma:settings', JSON.stringify(state.settings)) }catch(e){console.warn('save failed',e)}
|
||||
|
||||
// visual feedback
|
||||
const parent = saveSettingsBtn.parentElement;
|
||||
const feedback = document.createElement('span');
|
||||
feedback.textContent = 'Zapisano!';
|
||||
feedback.style.color = '#16a34a';
|
||||
feedback.style.marginLeft = '12px';
|
||||
parent.appendChild(feedback);
|
||||
setTimeout(()=> parent.removeChild(feedback), 2000);
|
||||
}
|
||||
|
||||
function resetSettings(){
|
||||
state.settings = {timedSeconds:60, maxResult:40, maxOperand:20, sessionProblems:20, allowNegative: false, allowFraction: false};
|
||||
saveSettings();
|
||||
loadSettings();
|
||||
}
|
||||
|
||||
saveSettingsBtn.addEventListener('click', saveSettings)
|
||||
resetSettingsBtn.addEventListener('click', resetSettings)
|
||||
|
||||
loadSettings()
|
||||
|
||||
// initial wiring
|
||||
opButtons.forEach(b => {
|
||||
b.addEventListener('click', () => {
|
||||
const op = b.dataset.op
|
||||
if (state.ops.has(op)) { state.ops.delete(op); b.classList.remove('active') }
|
||||
else { state.ops.add(op); b.classList.add('active') }
|
||||
})
|
||||
})
|
||||
|
||||
modeButtons.forEach(b => b.addEventListener('click', () => {
|
||||
if (state.ops.size === 0) {
|
||||
const hint = document.querySelector('.hint-text');
|
||||
hint.style.color = '#dc2626';
|
||||
hint.style.fontWeight = '600';
|
||||
setTimeout(() => {
|
||||
hint.style.color = '';
|
||||
hint.style.fontWeight = '';
|
||||
}, 2000);
|
||||
return;
|
||||
}
|
||||
modeButtons.forEach(x=>x.classList.remove('active'))
|
||||
b.classList.add('active')
|
||||
state.mode = b.dataset.mode
|
||||
startPlay()
|
||||
}))
|
||||
|
||||
backBtn.addEventListener('click', ()=>{
|
||||
stopTimer()
|
||||
playScreen.classList.add('hidden')
|
||||
menuScreen.classList.remove('hidden')
|
||||
feedbackEl.textContent = ''
|
||||
})
|
||||
|
||||
function startPlay(){
|
||||
menuScreen.classList.add('hidden')
|
||||
playScreen.classList.remove('hidden')
|
||||
state.score = 0
|
||||
scoreEl.textContent = state.score
|
||||
state.answerBuffer = ''
|
||||
answerEl.textContent = ''
|
||||
feedbackEl.textContent = ''
|
||||
state.currentProblem = generateProblem()
|
||||
renderProblem()
|
||||
|
||||
if (state.mode === 'timed'){
|
||||
progressInner.style.width = '0%'
|
||||
startTimer(state.settings.timedSeconds)
|
||||
statusEl.textContent = 'Na czas';
|
||||
timerEl.classList.remove('hidden');
|
||||
} else {
|
||||
progressInner.style.width = '0%'
|
||||
state.sessionSolved = 0
|
||||
state.sessionTarget = Math.max(1, state.settings.sessionProblems)
|
||||
updateProgress()
|
||||
timerEl.classList.add('hidden');
|
||||
}
|
||||
}
|
||||
|
||||
function generateProblem(){
|
||||
const ops = Array.from(state.ops)
|
||||
const op = ops[Math.floor(Math.random()*ops.length)]
|
||||
const maxOp = Math.max(1, state.settings.maxOperand)
|
||||
const maxRes = Math.max(1, state.settings.maxResult)
|
||||
let a = 0, b = 0
|
||||
for (let i=0;i<200;i++){
|
||||
if (op === 'div'){
|
||||
b = randInt(1, maxOp)
|
||||
if (!state.settings.allowFraction){
|
||||
const maxQByOp = Math.floor(maxOp / b)
|
||||
const maxQ = Math.min(maxRes, maxQByOp)
|
||||
if (maxQ < 0) continue
|
||||
const q = randInt(0, maxQ)
|
||||
a = q * b
|
||||
if (state.settings.allowNegative && Math.random() < 0.2) a = -a
|
||||
return {a,b,op}
|
||||
} else {
|
||||
const maxResultNByOp = Math.floor((10 * maxOp) / b)
|
||||
const maxResultN = Math.min(maxRes * 10, maxResultNByOp)
|
||||
if (maxResultN < 0) continue
|
||||
const result_n = randInt(0, maxResultN)
|
||||
if ((result_n * b) % 10 !== 0) continue
|
||||
a = (result_n * b) / 10
|
||||
if (state.settings.allowNegative && Math.random() < 0.2) a = -a
|
||||
return {a,b,op}
|
||||
}
|
||||
} else if (op === 'mul'){
|
||||
a = randInt(0, maxOp)
|
||||
b = randInt(0, maxOp)
|
||||
if (a * b <= maxRes) return {a,b,op}
|
||||
} else if (op === 'add'){
|
||||
a = randInt(0, maxOp)
|
||||
b = randInt(0, maxOp)
|
||||
if (a + b <= maxRes) return {a,b,op}
|
||||
} else if (op === 'sub'){
|
||||
a = randInt(0, maxOp)
|
||||
b = randInt(0, maxOp)
|
||||
if (!state.settings.allowNegative){
|
||||
if (a < b) [a,b] = [b,a]
|
||||
if (a - b <= maxRes) return {a,b,op}
|
||||
} else {
|
||||
if (Math.abs(a - b) <= maxRes) return {a,b,op}
|
||||
}
|
||||
}
|
||||
}
|
||||
a = Math.min(maxOp, Math.floor(maxRes/2))
|
||||
b = Math.min(maxOp, 1)
|
||||
return {a,b,op}
|
||||
}
|
||||
|
||||
function randInt(min,max){
|
||||
return Math.floor(Math.random()*(max-min+1))+min
|
||||
}
|
||||
|
||||
function renderProblem(){
|
||||
const p = state.currentProblem
|
||||
const map = {add: '+', sub: '−', mul: '×', div: '÷'}
|
||||
const symbol = map[p.op] || '?'
|
||||
problemEl.textContent = `${p.a} ${symbol} ${p.b}`
|
||||
}
|
||||
|
||||
function submitAnswer(){
|
||||
const buf = state.answerBuffer.trim()
|
||||
if (buf.length === 0) return
|
||||
const given = parseFloat(buf)
|
||||
const p = state.currentProblem
|
||||
let correct = null
|
||||
if (p.op === 'add') correct = p.a + p.b
|
||||
else if (p.op === 'sub') correct = p.a - p.b
|
||||
else if (p.op === 'mul') correct = p.a * p.b
|
||||
else if (p.op === 'div') correct = (p.b === 0) ? null : (p.a / p.b)
|
||||
const eps = state.settings.allowFraction ? 1e-6 : 1e-9
|
||||
const isCorrect = (correct !== null) && (Math.abs(given - correct) < eps)
|
||||
|
||||
feedbackEl.style.opacity = 1;
|
||||
if (isCorrect) {
|
||||
state.score += 1
|
||||
feedbackEl.textContent = 'Dobrze!'
|
||||
feedbackEl.classList.add('correct');
|
||||
feedbackEl.classList.remove('incorrect');
|
||||
} else {
|
||||
const correctAnswer = Number.isFinite(correct) ? parseFloat(correct.toFixed(2)) : '—';
|
||||
feedbackEl.textContent = `Poprawna odpowiedź: ${correctAnswer}`
|
||||
feedbackEl.classList.add('incorrect');
|
||||
feedbackEl.classList.remove('correct');
|
||||
}
|
||||
scoreEl.textContent = state.score
|
||||
state.answerBuffer = ''
|
||||
answerEl.textContent = ''
|
||||
|
||||
if (state.mode === 'training'){
|
||||
state.sessionSolved++
|
||||
updateProgress()
|
||||
if (state.sessionSolved >= state.sessionTarget){
|
||||
saveSessionToHistory()
|
||||
setTimeout(showSummary, 1200);
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
feedbackEl.style.opacity = 0;
|
||||
setTimeout(() => {
|
||||
state.currentProblem = generateProblem()
|
||||
renderProblem()
|
||||
}, 200);
|
||||
}, 1200);
|
||||
}
|
||||
|
||||
submitBtn.addEventListener('click', submitAnswer)
|
||||
|
||||
keypad.forEach(k => {
|
||||
k.addEventListener('click', ()=>{
|
||||
const v = k.textContent.trim()
|
||||
if (!/^[0-9]$/.test(v)) return
|
||||
if (state.answerBuffer.length >= 12) return
|
||||
state.answerBuffer += v
|
||||
answerEl.textContent = state.answerBuffer
|
||||
})
|
||||
})
|
||||
|
||||
if (dotBtn){
|
||||
dotBtn.addEventListener('click', ()=>{
|
||||
if (!state.settings.allowFraction) return
|
||||
if (state.answerBuffer.includes('.')) return
|
||||
if (state.answerBuffer.length === 0) state.answerBuffer = '0'
|
||||
state.answerBuffer += '.'
|
||||
answerEl.textContent = state.answerBuffer
|
||||
})
|
||||
}
|
||||
|
||||
if (negateBtn){
|
||||
negateBtn.addEventListener('click', ()=>{
|
||||
if (!state.settings.allowNegative) return
|
||||
if (state.answerBuffer.startsWith('-')) state.answerBuffer = state.answerBuffer.slice(1)
|
||||
else state.answerBuffer = '-' + state.answerBuffer
|
||||
answerEl.textContent = state.answerBuffer
|
||||
})
|
||||
}
|
||||
|
||||
clearBtn.addEventListener('click', ()=>{
|
||||
state.answerBuffer = ''
|
||||
answerEl.textContent = ''
|
||||
})
|
||||
|
||||
backspaceBtn.addEventListener('click', ()=>{
|
||||
state.answerBuffer = state.answerBuffer.slice(0,-1)
|
||||
answerEl.textContent = state.answerBuffer
|
||||
})
|
||||
|
||||
function startTimer(seconds){
|
||||
state.timeLeft = seconds
|
||||
timerEl.textContent = state.timeLeft
|
||||
|
||||
stopTimer();
|
||||
state.timerId = setInterval(()=>{
|
||||
state.timeLeft -= 1
|
||||
timerEl.textContent = state.timeLeft
|
||||
const pct = Math.max(0, (state.timeLeft / seconds) * 100)
|
||||
progressInner.style.width = pct + '%'
|
||||
if (state.timeLeft <= 0) {
|
||||
stopTimer()
|
||||
endSession()
|
||||
}
|
||||
},1000)
|
||||
}
|
||||
|
||||
function stopTimer(){
|
||||
if (state.timerId) clearInterval(state.timerId)
|
||||
state.timerId = null
|
||||
}
|
||||
|
||||
function endSession(){
|
||||
saveSessionToHistory()
|
||||
showSummary();
|
||||
}
|
||||
|
||||
function showSummary(){
|
||||
const total = state.mode === 'timed' ? state.score : state.sessionTarget;
|
||||
const correct = state.score;
|
||||
const pct = total > 0 ? Math.round((correct / total) * 100) : 0;
|
||||
|
||||
if (state.mode === 'timed') {
|
||||
summaryText.textContent = `Koniec czasu! Zdobyłeś ${correct} punktów.`;
|
||||
} else {
|
||||
summaryText.textContent = `Twój wynik: ${correct} / ${total} poprawnie (${pct}%)`;
|
||||
}
|
||||
summaryOverlay.classList.remove('hidden');
|
||||
}
|
||||
|
||||
summaryBack.addEventListener('click', ()=>{
|
||||
summaryOverlay.classList.add('hidden');
|
||||
playScreen.classList.add('hidden');
|
||||
menuScreen.classList.remove('hidden');
|
||||
});
|
||||
|
||||
function updateProgress(){
|
||||
if (state.mode === 'training'){
|
||||
const pct = Math.min(100, Math.round((state.sessionSolved/state.sessionTarget)*100))
|
||||
progressInner.style.width = pct + '%'
|
||||
statusEl.textContent = `${state.sessionSolved}/${state.sessionTarget}`
|
||||
}
|
||||
}
|
||||
|
||||
// history persistence
|
||||
function loadHistory(){
|
||||
try{
|
||||
const raw = localStorage.getItem('matma:history')
|
||||
return raw ? JSON.parse(raw) : []
|
||||
}catch(e){ return [] }
|
||||
}
|
||||
|
||||
function saveSessionToHistory(){
|
||||
const h = loadHistory()
|
||||
const sessionData = {
|
||||
ts: Date.now(),
|
||||
mode: state.mode,
|
||||
score: state.score,
|
||||
ops: Array.from(state.ops),
|
||||
duration: state.mode === 'timed' ? state.settings.timedSeconds : null,
|
||||
problems: state.mode === 'training' ? state.sessionTarget : null
|
||||
};
|
||||
h.unshift(sessionData);
|
||||
while(h.length>50) h.pop()
|
||||
try{ localStorage.setItem('matma:history', JSON.stringify(h)) }catch(e){ }
|
||||
}
|
||||
|
||||
function renderHistory(){
|
||||
const h = loadHistory()
|
||||
historyPanel.innerHTML = ''
|
||||
if (h.length === 0) {
|
||||
historyPanel.innerHTML = '<p class="history-empty">Brak zapisanych sesji.</p>'
|
||||
return
|
||||
}
|
||||
h.forEach(item => {
|
||||
const d = new Date(item.ts).toLocaleString('pl-PL', { day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit' });
|
||||
const modeText = item.mode === 'timed' ? `Na czas (${item.duration}s)` : `Trening (${item.problems} zadań)`;
|
||||
const opsText = item.ops.join(', ').replace('add','+').replace('sub','-').replace('mul','×').replace('div','÷');
|
||||
|
||||
const el = document.createElement('div')
|
||||
el.className = 'history-item'
|
||||
el.innerHTML = `
|
||||
<div class="history-item-main">
|
||||
<span class="history-score">Wynik: ${item.score}</span>
|
||||
<span class="history-ops">${opsText}</span>
|
||||
</div>
|
||||
<div class="history-item-meta">
|
||||
<span>${modeText}</span>
|
||||
<span>${d}</span>
|
||||
</div>`
|
||||
historyPanel.appendChild(el)
|
||||
})
|
||||
}
|
||||
|
||||
// Toggle history panel
|
||||
const historyDetails = historyPanel.closest('details');
|
||||
if (historyDetails) {
|
||||
historyDetails.addEventListener('toggle', () => {
|
||||
if (historyDetails.open) {
|
||||
renderHistory();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// keyboard support
|
||||
window.addEventListener('keydown', (e)=>{
|
||||
if (playScreen.classList.contains('hidden')) return
|
||||
if (/^[0-9]$/.test(e.key)){
|
||||
if (state.answerBuffer.length < 12) {
|
||||
state.answerBuffer += e.key
|
||||
answerEl.textContent = state.answerBuffer
|
||||
}
|
||||
} else if (e.key === 'Backspace'){
|
||||
state.answerBuffer = state.answerBuffer.slice(0,-1)
|
||||
answerEl.textContent = state.answerBuffer
|
||||
} else if (e.key === 'Enter'){
|
||||
submitAnswer()
|
||||
} else if (e.key === '.' || e.key === ',') {
|
||||
dotBtn.click();
|
||||
}
|
||||
})
|
||||
|
||||
// Set default active operations
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
opButtons.forEach(btn => {
|
||||
const op = btn.dataset.op;
|
||||
if (['add', 'sub'].includes(op)) {
|
||||
btn.classList.add('active');
|
||||
state.ops.add(op);
|
||||
}
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,14 @@
|
||||
// Komponenty HTML loader
|
||||
function loadComponent(path, replaceMap = {}) {
|
||||
return fetch(path)
|
||||
.then(r => r.text())
|
||||
.then(html => {
|
||||
Object.entries(replaceMap).forEach(([key, val]) => {
|
||||
html = html.replaceAll(key, val);
|
||||
});
|
||||
return html;
|
||||
});
|
||||
}
|
||||
|
||||
// Przykład użycia:
|
||||
// loadComponent('components/header.html', {'{TITLE}': 'Tytuł', '{SUBTITLE}': 'Podtytuł'}).then(html => ...)
|
||||
@@ -0,0 +1,143 @@
|
||||
// Nauka Czytania
|
||||
;(function () {
|
||||
// ms between line advances for each speed level (0 = manual)
|
||||
const SPEEDS_MS = [0, 3500, 2000, 1000]
|
||||
const SPEED_LABELS = ['Pauza', 'Wolno', 'Średnio', 'Szybko']
|
||||
|
||||
let yOffset = 0
|
||||
let lineH = 80 // recalculated after render
|
||||
let maxOffset = 0
|
||||
let speedIdx = 0
|
||||
let autoTimer = null
|
||||
|
||||
const listWrap = document.getElementById('list-wrap')
|
||||
const readWrap = document.getElementById('read-wrap')
|
||||
const textList = document.getElementById('text-list')
|
||||
const customInput = document.getElementById('custom-input')
|
||||
const customStartBtn = document.getElementById('custom-start-btn')
|
||||
const readBackBtn = document.getElementById('read-back-btn')
|
||||
const readTitleEl = document.getElementById('read-title')
|
||||
const speedBtn = document.getElementById('speed-btn')
|
||||
const readViewport = document.getElementById('read-viewport')
|
||||
const readTextEl = document.getElementById('read-text')
|
||||
const nextLineBtn = document.getElementById('next-line-btn')
|
||||
let progressBar = null
|
||||
|
||||
// ── Load text list from dyktanda.json ────────────────────────────────────
|
||||
fetch('json/dyktanda.json')
|
||||
.then(r => r.json())
|
||||
.then(data => {
|
||||
data.forEach(item => {
|
||||
const btn = document.createElement('button')
|
||||
btn.className = 'list-item-btn'
|
||||
btn.textContent = item.name
|
||||
btn.addEventListener('click', () => startReading(item.name, item.text))
|
||||
textList.appendChild(btn)
|
||||
})
|
||||
})
|
||||
.catch(() => {
|
||||
textList.innerHTML = '<p style="color:var(--muted);padding:8px 0">Nie udało się wczytać tekstów.</p>'
|
||||
})
|
||||
|
||||
customStartBtn.addEventListener('click', () => {
|
||||
const txt = customInput.value.trim()
|
||||
if (!txt) return
|
||||
startReading('Własny', txt)
|
||||
})
|
||||
|
||||
// ── Start reading ─────────────────────────────────────────────────────────
|
||||
function startReading(title, text) {
|
||||
yOffset = 0
|
||||
speedIdx = 0
|
||||
clearInterval(autoTimer)
|
||||
autoTimer = null
|
||||
|
||||
if (!readTitleEl || !readTextEl || !speedBtn || !readWrap || !listWrap) {
|
||||
console.warn('czytanie: missing DOM elements', { readTitleEl, readTextEl, speedBtn, readWrap, listWrap })
|
||||
}
|
||||
|
||||
if (readTitleEl) readTitleEl.textContent = title
|
||||
if (readTextEl) readTextEl.textContent = text
|
||||
if (readTextEl) readTextEl.style.transform = 'translateY(0)'
|
||||
if (speedBtn) speedBtn.textContent = SPEED_LABELS[0]
|
||||
if (!progressBar) progressBar = document.getElementById('read-progress-bar-inner')
|
||||
if (progressBar) progressBar.style.width = '0%'
|
||||
|
||||
listWrap.classList.add('hidden')
|
||||
readWrap.classList.remove('hidden')
|
||||
|
||||
// measure real line height after layout
|
||||
requestAnimationFrame(() => {
|
||||
requestAnimationFrame(() => {
|
||||
const cs = getComputedStyle(readTextEl)
|
||||
const lhVal = cs.lineHeight
|
||||
lineH = (lhVal === 'normal')
|
||||
? parseFloat(cs.fontSize) * 1.35
|
||||
: parseFloat(lhVal)
|
||||
|
||||
maxOffset = Math.max(0, readTextEl.offsetHeight - lineH)
|
||||
updateNextBtn()
|
||||
updateProgressBar()
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
// ── Back to list ──────────────────────────────────────────────────────────
|
||||
readBackBtn.addEventListener('click', () => {
|
||||
const active = yOffset > 0 || autoTimer !== null
|
||||
if (active && !confirm('Wrócić do listy tekstów?')) return
|
||||
clearInterval(autoTimer)
|
||||
autoTimer = null
|
||||
readWrap.classList.add('hidden')
|
||||
listWrap.classList.remove('hidden')
|
||||
// Reset speed to manual on exit
|
||||
speedIdx = 0;
|
||||
})
|
||||
|
||||
// ── Speed selector ────────────────────────────────────────────────────────
|
||||
speedBtn.addEventListener('click', () => {
|
||||
clearInterval(autoTimer)
|
||||
autoTimer = null
|
||||
speedIdx = (speedIdx + 1) % SPEEDS_MS.length
|
||||
speedBtn.textContent = SPEED_LABELS[speedIdx]
|
||||
if (SPEEDS_MS[speedIdx] > 0 && yOffset < maxOffset) {
|
||||
autoTimer = setInterval(advanceLine, SPEEDS_MS[speedIdx])
|
||||
}
|
||||
})
|
||||
|
||||
// ── Manual line advance ───────────────────────────────────────────────────
|
||||
nextLineBtn.addEventListener('click', advanceLine)
|
||||
|
||||
// ── Core scroll logic ─────────────────────────────────────────────────────
|
||||
function advanceLine() {
|
||||
if (yOffset >= maxOffset) {
|
||||
stopAutoAtEnd()
|
||||
return
|
||||
}
|
||||
yOffset = Math.min(yOffset + lineH, maxOffset)
|
||||
readTextEl.style.transform = `translateY(${-yOffset}px)`
|
||||
updateNextBtn()
|
||||
updateProgressBar()
|
||||
if (yOffset >= maxOffset) stopAutoAtEnd()
|
||||
}
|
||||
|
||||
function stopAutoAtEnd() {
|
||||
if (autoTimer !== null) {
|
||||
clearInterval(autoTimer)
|
||||
autoTimer = null
|
||||
speedIdx = 0
|
||||
speedBtn.textContent = SPEED_LABELS[0]
|
||||
}
|
||||
updateNextBtn()
|
||||
}
|
||||
|
||||
function updateNextBtn() {
|
||||
nextLineBtn.disabled = yOffset >= maxOffset
|
||||
}
|
||||
|
||||
function updateProgressBar() {
|
||||
const progress = maxOffset > 0 ? (yOffset / maxOffset) * 100 : 100
|
||||
if (!progressBar) progressBar = document.getElementById('read-progress-bar-inner')
|
||||
if (progressBar) progressBar.style.width = `${progress}%`
|
||||
}
|
||||
})()
|
||||
@@ -0,0 +1,320 @@
|
||||
// Dyktando — ortografia u/ó, rz/ż, h/ch
|
||||
;(function () {
|
||||
|
||||
// Pairs: key = lowercase match → [choice1, choice2] (shown to user)
|
||||
const PAIRS = {
|
||||
ch: ['ch', 'h'],
|
||||
rz: ['rz', 'ż'],
|
||||
ż: ['rz', 'ż'],
|
||||
ó: ['u', 'ó'],
|
||||
u: ['u', 'ó'],
|
||||
h: ['h', 'ch'],
|
||||
}
|
||||
|
||||
// Order matters: digraphs (ch, rz) must be tried before single chars (h)
|
||||
const BLANK_RE = /ch|rz|[uóżh]/gi
|
||||
|
||||
let tokens = [] // {type:'text',content} | {type:'blank',...}
|
||||
let blanks = [] // subset where type==='blank'
|
||||
let current = 0 // index of active blank
|
||||
let origText = ''
|
||||
|
||||
// ── DOM refs ─────────────────────────────────────────────────────────────
|
||||
const listWrap = document.getElementById('list-wrap')
|
||||
const playWrap = document.getElementById('play-wrap')
|
||||
const textList = document.getElementById('text-list')
|
||||
const customInput = document.getElementById('custom-input')
|
||||
const customStartBtn = document.getElementById('custom-start-btn')
|
||||
const playBackBtn = document.getElementById('play-back-btn')
|
||||
const playTitle = document.getElementById('play-title')
|
||||
const textDisplay = document.getElementById('text-display')
|
||||
const choicesEl = document.getElementById('choices')
|
||||
const progressEl = document.getElementById('blank-progress')
|
||||
const summaryWrap = document.getElementById('summary')
|
||||
const summaryText = document.getElementById('summary-text')
|
||||
const summaryScore = document.getElementById('summary-score')
|
||||
const summaryBackBtn = document.getElementById('summary-back-btn')
|
||||
const dykScroll = document.getElementById('dyk-scroll')
|
||||
let progressBar = null
|
||||
|
||||
// ── Load texts ────────────────────────────────────────────────────────────
|
||||
fetch('json/dyktanda.json')
|
||||
.then(r => r.json())
|
||||
.then(data => {
|
||||
data.forEach(item => {
|
||||
const btn = document.createElement('button')
|
||||
btn.className = 'list-item-btn'
|
||||
btn.textContent = item.name
|
||||
btn.addEventListener('click', () => startGame(item.name, item.text))
|
||||
textList.appendChild(btn)
|
||||
})
|
||||
})
|
||||
.catch(() => {
|
||||
textList.innerHTML = '<p style="color:var(--muted)">Nie udało się wczytać tekstów.</p>'
|
||||
})
|
||||
|
||||
// Poczekaj na dynamiczne załadowanie progress bara
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
// progress bar jest ładowany przez loadComponent w dyktando.html
|
||||
const checkProgressBar = () => {
|
||||
const el = document.getElementById('dyk-progress-bar-inner')
|
||||
if (el) {
|
||||
progressBar = el
|
||||
} else {
|
||||
setTimeout(checkProgressBar, 50)
|
||||
}
|
||||
}
|
||||
checkProgressBar()
|
||||
})
|
||||
|
||||
customStartBtn.addEventListener('click', () => {
|
||||
const txt = customInput.value.trim()
|
||||
if (!txt) return
|
||||
startGame('Własny', txt)
|
||||
})
|
||||
|
||||
// ── Start game ────────────────────────────────────────────────────────────
|
||||
function startGame(title, text) {
|
||||
origText = text
|
||||
tokens = []
|
||||
blanks = []
|
||||
current = 0
|
||||
|
||||
// Tokenize: split text into plain segments and blanks
|
||||
BLANK_RE.lastIndex = 0
|
||||
let lastIdx = 0
|
||||
let m
|
||||
while ((m = BLANK_RE.exec(text)) !== null) {
|
||||
if (m.index > lastIdx) {
|
||||
tokens.push({ type: 'text', content: text.slice(lastIdx, m.index) })
|
||||
}
|
||||
const blank = {
|
||||
type: 'blank',
|
||||
id: blanks.length,
|
||||
answer: m[0], // original (preserves case)
|
||||
choices: PAIRS[m[0].toLowerCase()], // pair to show
|
||||
start: m.index, // position in origText
|
||||
end: m.index + m[0].length,
|
||||
userAnswer: null,
|
||||
correct: null,
|
||||
}
|
||||
tokens.push(blank)
|
||||
blanks.push(blank)
|
||||
lastIdx = m.index + m[0].length
|
||||
}
|
||||
if (lastIdx < text.length) {
|
||||
tokens.push({ type: 'text', content: text.slice(lastIdx) })
|
||||
}
|
||||
|
||||
// Reset UI
|
||||
playTitle.textContent = title
|
||||
summaryWrap.classList.add('hidden')
|
||||
textDisplay.classList.remove('hidden')
|
||||
choicesEl.classList.remove('hidden')
|
||||
progressEl.textContent = ''
|
||||
if (progressBar) progressBar.style.width = '0%'
|
||||
|
||||
listWrap.classList.add('hidden')
|
||||
playWrap.classList.remove('hidden')
|
||||
|
||||
if (blanks.length === 0) {
|
||||
renderText()
|
||||
showSummary()
|
||||
} else {
|
||||
renderText()
|
||||
activateBlank(0)
|
||||
}
|
||||
}
|
||||
|
||||
// ── Render the text with blanks ───────────────────────────────────────────
|
||||
function renderText() {
|
||||
textDisplay.innerHTML = ''
|
||||
tokens.forEach(tok => {
|
||||
if (tok.type === 'text') {
|
||||
textDisplay.appendChild(document.createTextNode(tok.content))
|
||||
} else {
|
||||
const span = document.createElement('span')
|
||||
span.id = `blank-${tok.id}`
|
||||
|
||||
if (tok.correct !== null) {
|
||||
// Already answered
|
||||
if (tok.correct) {
|
||||
span.className = 'dyk-blank dyk-blank--ok'
|
||||
span.textContent = tok.answer
|
||||
} else {
|
||||
span.className = 'dyk-blank dyk-blank--err'
|
||||
span.innerHTML = `<s>${esc(tok.userAnswer)}</s><sup class="dyk-correction">${esc(tok.answer)}</sup>`
|
||||
}
|
||||
} else if (tok.id === current) {
|
||||
span.className = 'dyk-blank dyk-blank--active'
|
||||
span.textContent = '__'
|
||||
} else {
|
||||
span.className = 'dyk-blank dyk-blank--pending'
|
||||
span.textContent = '__'
|
||||
}
|
||||
|
||||
textDisplay.appendChild(span)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// ── Activate a blank ──────────────────────────────────────────────────────
|
||||
function activateBlank(idx) {
|
||||
current = idx
|
||||
renderText()
|
||||
|
||||
const blank = blanks[idx]
|
||||
|
||||
// Shuffle choices so correct answer isn't always in same position
|
||||
const choices = Math.random() < 0.5
|
||||
? [...blank.choices]
|
||||
: [...blank.choices].reverse()
|
||||
|
||||
choicesEl.innerHTML = ''
|
||||
choices.forEach(choice => {
|
||||
const btn = document.createElement('button')
|
||||
btn.className = 'choice-btn'
|
||||
btn.textContent = choice
|
||||
btn.addEventListener('click', () => handleAnswer(blank, choice))
|
||||
choicesEl.appendChild(btn)
|
||||
})
|
||||
|
||||
progressEl.textContent = `${idx + 1} / ${blanks.length}`
|
||||
|
||||
// Scroll active blank into view
|
||||
requestAnimationFrame(() => {
|
||||
const el = document.getElementById(`blank-${idx}`)
|
||||
if (el) el.scrollIntoView({ block: 'center', behavior: 'smooth' })
|
||||
})
|
||||
|
||||
updateProgressBar()
|
||||
}
|
||||
|
||||
// ── Handle answer ─────────────────────────────────────────────────────────
|
||||
function handleAnswer(blank, choice) {
|
||||
blank.correct = choice.toLowerCase() === blank.answer.toLowerCase()
|
||||
blank.userAnswer = choice
|
||||
|
||||
const nextIdx = blank.id + 1
|
||||
if (nextIdx >= blanks.length) {
|
||||
// Last blank answered: show final state briefly, then summary
|
||||
current = blanks.length
|
||||
choicesEl.innerHTML = ''
|
||||
progressEl.textContent = ''
|
||||
renderText()
|
||||
setTimeout(showSummary, 500)
|
||||
} else {
|
||||
activateBlank(nextIdx)
|
||||
}
|
||||
updateProgressBar()
|
||||
}
|
||||
|
||||
// ── Summary ───────────────────────────────────────────────────────────────
|
||||
function showSummary() {
|
||||
choicesEl.classList.add('hidden')
|
||||
textDisplay.classList.add('hidden')
|
||||
summaryWrap.classList.remove('hidden')
|
||||
|
||||
const total = blanks.length
|
||||
const correct = blanks.filter(b => b.correct).length
|
||||
|
||||
if (total === 0) {
|
||||
summaryScore.textContent = 'Brak liter do uzupełnienia w tym tekście.'
|
||||
summaryText.innerHTML = esc(origText)
|
||||
updateProgressBar()
|
||||
} else {
|
||||
summaryScore.textContent = `Poprawnie: ${correct} z ${total}`
|
||||
summaryText.innerHTML = buildSummaryHTML()
|
||||
}
|
||||
|
||||
dykScroll.scrollTop = 0
|
||||
}
|
||||
|
||||
// Build word-coloured summary HTML
|
||||
function buildSummaryHTML() {
|
||||
// Find word spans (non-whitespace sequences) in original text
|
||||
const wordRe = /\S+/g
|
||||
const words = []
|
||||
let wm
|
||||
while ((wm = wordRe.exec(origText)) !== null) {
|
||||
words.push({ start: wm.index, end: wm.index + wm[0].length })
|
||||
}
|
||||
|
||||
// Assign each word its blanks and overall status
|
||||
words.forEach(w => {
|
||||
w.blanks = blanks.filter(b => b.start >= w.start && b.end <= w.end)
|
||||
w.status = w.blanks.length === 0 ? 'none'
|
||||
: w.blanks.every(b => b.correct) ? 'ok' : 'err'
|
||||
})
|
||||
|
||||
let html = ''
|
||||
let pos = 0
|
||||
|
||||
words.forEach(word => {
|
||||
// Whitespace / punctuation before this word
|
||||
if (word.start > pos) html += esc(origText.slice(pos, word.start))
|
||||
|
||||
// Build inner word HTML (blanks replaced by correct answers, coloured)
|
||||
let wPos = word.start
|
||||
let inner = ''
|
||||
word.blanks.forEach(blank => {
|
||||
if (blank.start > wPos) inner += esc(origText.slice(wPos, blank.start))
|
||||
if (blank.correct) {
|
||||
inner += `<span class="dyk-word--ok">${esc(blank.answer)}</span>`
|
||||
} else {
|
||||
inner += `<span class="dyk-word--err"><s>${esc(blank.userAnswer)}</s><sup class="dyk-correction">${esc(blank.answer)}</sup></span>`
|
||||
}
|
||||
wPos = blank.end
|
||||
})
|
||||
inner += esc(origText.slice(wPos, word.end))
|
||||
|
||||
html += word.status !== 'none'
|
||||
? `<span class="dyk-word--${word.status}">${inner}</span>`
|
||||
: inner
|
||||
|
||||
pos = word.end
|
||||
})
|
||||
|
||||
if (pos < origText.length) html += esc(origText.slice(pos))
|
||||
return html
|
||||
}
|
||||
|
||||
function updateProgressBar() {
|
||||
const total = blanks.length
|
||||
if (total === 0) {
|
||||
progressBar.style.width = '100%'
|
||||
return
|
||||
}
|
||||
// Use `current` which is the index of the *next* blank to be filled.
|
||||
// When the game ends, `current` becomes `blanks.length`.
|
||||
const progress = (current / total) * 100
|
||||
progressBar.style.width = `${progress}%`
|
||||
}
|
||||
|
||||
function esc(s) {
|
||||
return (s || '').replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>')
|
||||
}
|
||||
|
||||
// ── Navigation ────────────────────────────────────────────────────────────
|
||||
playBackBtn.addEventListener('click', () => {
|
||||
const inProgress = blanks.length > 0 && current < blanks.length
|
||||
if (inProgress && !confirm('Przerwać dyktando i wrócić do listy?')) return
|
||||
goToList()
|
||||
})
|
||||
|
||||
summaryBackBtn.addEventListener('click', goToList)
|
||||
|
||||
function goToList() {
|
||||
tokens = []
|
||||
blanks = []
|
||||
current = 0
|
||||
textDisplay.innerHTML = ''
|
||||
textDisplay.classList.remove('hidden')
|
||||
summaryWrap.classList.add('hidden')
|
||||
choicesEl.innerHTML = ''
|
||||
choicesEl.classList.remove('hidden')
|
||||
playWrap.classList.add('hidden')
|
||||
listWrap.classList.remove('hidden')
|
||||
}
|
||||
|
||||
})()
|
||||
@@ -0,0 +1,149 @@
|
||||
// Nauka Dzielenia
|
||||
;(function () {
|
||||
const st = { divisor: null, total: 20, solved: 0, score: 0, current: null, buf: '' }
|
||||
|
||||
const selectScreen = document.getElementById('select-screen')
|
||||
const playScreen = document.getElementById('play-screen')
|
||||
const summaryScreen = document.getElementById('summary-screen')
|
||||
const problemEl = document.getElementById('problem')
|
||||
const answerEl = document.getElementById('answer')
|
||||
const feedbackEl = document.getElementById('feedback')
|
||||
let progressInner = null
|
||||
const progressLabel = document.getElementById('progress-label')
|
||||
const summaryText = document.getElementById('summary-text')
|
||||
const totalInput = document.getElementById('total-input')
|
||||
|
||||
// divisor selection
|
||||
document.getElementById('table-grid').addEventListener('click', e => {
|
||||
const btn = e.target.closest('.table-btn')
|
||||
if (!btn) return
|
||||
document.querySelectorAll('.table-btn').forEach(b => b.classList.remove('active'))
|
||||
btn.classList.add('active')
|
||||
st.divisor = parseInt(btn.dataset.val, 10) // 0 = all
|
||||
})
|
||||
|
||||
document.getElementById('start-btn').addEventListener('click', () => {
|
||||
st.total = Math.max(5, Math.min(100, parseInt(totalInput.value, 10) || 20))
|
||||
st.solved = 0
|
||||
st.score = 0
|
||||
show(playScreen)
|
||||
nextProblem()
|
||||
})
|
||||
|
||||
document.getElementById('back-btn').addEventListener('click', () => show(selectScreen))
|
||||
document.getElementById('again-btn').addEventListener('click', () => {
|
||||
st.solved = 0; st.score = 0; show(playScreen); nextProblem()
|
||||
})
|
||||
document.getElementById('change-btn').addEventListener('click', () => show(selectScreen))
|
||||
|
||||
// keypad
|
||||
document.querySelectorAll('.key').forEach(k => {
|
||||
k.addEventListener('click', () => {
|
||||
const v = k.textContent.trim()
|
||||
if (!/^[0-9]$/.test(v)) return
|
||||
if (st.buf.length >= 6) return
|
||||
st.buf += v; answerEl.textContent = st.buf
|
||||
})
|
||||
})
|
||||
document.getElementById('clear').addEventListener('click', () => { st.buf = ''; answerEl.textContent = '' })
|
||||
document.getElementById('backspace').addEventListener('click', () => { st.buf = st.buf.slice(0,-1); answerEl.textContent = st.buf || '' })
|
||||
document.getElementById('submit').addEventListener('click', submit)
|
||||
|
||||
window.addEventListener('keydown', e => {
|
||||
if (!playScreen.classList.contains('hidden')) {
|
||||
if (/^[0-9]$/.test(e.key) && st.buf.length < 6) { st.buf += e.key; answerEl.textContent = st.buf }
|
||||
else if (e.key === 'Backspace') { st.buf = st.buf.slice(0,-1); answerEl.textContent = st.buf || '' }
|
||||
else if (e.key === 'Enter') submit()
|
||||
}
|
||||
})
|
||||
|
||||
function randInt(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min }
|
||||
|
||||
function nextProblem() {
|
||||
const b = st.divisor || randInt(1, 10) // divisor
|
||||
const answer = randInt(1, 10) // quotient (always integer)
|
||||
const a = b * answer // dividend
|
||||
st.current = { a, b, answer }
|
||||
problemEl.textContent = `${a} ÷ ${b}`
|
||||
feedbackEl.textContent = ''
|
||||
st.buf = ''; answerEl.textContent = ''
|
||||
updateBar()
|
||||
}
|
||||
|
||||
function submit() {
|
||||
if (!st.buf.trim()) return
|
||||
const given = parseInt(st.buf, 10)
|
||||
st.solved++
|
||||
if (given === st.current.answer) {
|
||||
st.score++
|
||||
feedbackEl.textContent = 'Dobrze!'
|
||||
feedbackEl.classList.add('correct')
|
||||
feedbackEl.classList.remove('incorrect')
|
||||
} else {
|
||||
feedbackEl.textContent = `Poprawna odpowiedź: ${st.current.answer}`
|
||||
feedbackEl.classList.add('incorrect')
|
||||
feedbackEl.classList.remove('correct')
|
||||
}
|
||||
feedbackEl.style.opacity = 1;
|
||||
st.buf = ''; answerEl.textContent = ''
|
||||
updateBar()
|
||||
if (st.solved >= st.total) {
|
||||
setTimeout(showSummary, 1200)
|
||||
} else {
|
||||
setTimeout(() => {
|
||||
feedbackEl.style.opacity = 0;
|
||||
setTimeout(nextProblem, 200);
|
||||
}, 1000)
|
||||
}
|
||||
}
|
||||
|
||||
function updateBar() {
|
||||
const pct = st.total > 0 ? Math.round((st.solved / st.total) * 100) : 0
|
||||
if (!progressInner) {
|
||||
progressInner = document.getElementById('progress-inner')
|
||||
}
|
||||
if (progressInner) progressInner.style.width = pct + '%'
|
||||
progressLabel.textContent = `${st.solved}/${st.total}`
|
||||
}
|
||||
|
||||
function showSummary() {
|
||||
const pct = st.total > 0 ? Math.round((st.score / st.total) * 100) : 0
|
||||
summaryText.textContent = `Twój wynik: ${st.score} / ${st.total} poprawnie (${pct}%)`
|
||||
show(summaryScreen)
|
||||
}
|
||||
|
||||
function show(screen) {
|
||||
[selectScreen, playScreen, summaryScreen].forEach(s => s.classList.add('hidden'))
|
||||
screen.classList.remove('hidden')
|
||||
if (screen === summaryScreen) {
|
||||
selectScreen.classList.add('hidden');
|
||||
playScreen.classList.add('hidden');
|
||||
}
|
||||
}
|
||||
|
||||
// commit SHA and default selection
|
||||
document.addEventListener('DOMContentLoaded', async () => {
|
||||
const el = document.getElementById('commit-sha')
|
||||
if (!el) return
|
||||
|
||||
// Set default divisor selection
|
||||
const defaultDivisorBtn = document.querySelector('.table-btn[data-val="0"]');
|
||||
if(defaultDivisorBtn) {
|
||||
defaultDivisorBtn.classList.add('active');
|
||||
st.divisor = 0;
|
||||
}
|
||||
|
||||
let sha = (window.COMMIT_SHA || '').toString().trim()
|
||||
if (!sha) {
|
||||
try {
|
||||
const res = await fetch('/version.sha', { cache: 'no-cache' })
|
||||
if (res.ok) {
|
||||
const txt = await res.text()
|
||||
const first = txt.split(/\r?\n/).find(l => l.trim().length > 0)
|
||||
if (first) sha = first.trim()
|
||||
}
|
||||
} catch (e) {}
|
||||
}
|
||||
if (sha) el.textContent = sha.slice(0, 8)
|
||||
})
|
||||
})()
|
||||
@@ -0,0 +1,149 @@
|
||||
// Nauka Mnożenia
|
||||
;(function () {
|
||||
const st = { table: null, total: 20, solved: 0, score: 0, current: null, buf: '' }
|
||||
|
||||
const selectScreen = document.getElementById('select-screen')
|
||||
const playScreen = document.getElementById('play-screen')
|
||||
const summaryScreen = document.getElementById('summary-screen')
|
||||
const problemEl = document.getElementById('problem')
|
||||
const answerEl = document.getElementById('answer')
|
||||
const feedbackEl = document.getElementById('feedback')
|
||||
let progressInner = null
|
||||
const progressLabel = document.getElementById('progress-label')
|
||||
const scoreLabel = document.getElementById('score-label') // This element is removed, but we might re-purpose the logic
|
||||
const summaryText = document.getElementById('summary-text')
|
||||
const totalInput = document.getElementById('total-input')
|
||||
|
||||
// table selection
|
||||
document.getElementById('table-grid').addEventListener('click', e => {
|
||||
const btn = e.target.closest('.table-btn')
|
||||
if (!btn) return
|
||||
document.querySelectorAll('.table-btn').forEach(b => b.classList.remove('active'))
|
||||
btn.classList.add('active')
|
||||
st.table = parseInt(btn.dataset.val, 10) // 0 = all
|
||||
})
|
||||
|
||||
document.getElementById('start-btn').addEventListener('click', () => {
|
||||
st.total = Math.max(5, Math.min(100, parseInt(totalInput.value, 10) || 20))
|
||||
st.solved = 0
|
||||
st.score = 0
|
||||
show(playScreen)
|
||||
nextProblem()
|
||||
})
|
||||
|
||||
document.getElementById('back-btn').addEventListener('click', () => show(selectScreen))
|
||||
document.getElementById('again-btn').addEventListener('click', () => {
|
||||
st.solved = 0; st.score = 0; show(playScreen); nextProblem()
|
||||
})
|
||||
document.getElementById('change-btn').addEventListener('click', () => show(selectScreen))
|
||||
|
||||
// keypad
|
||||
document.querySelectorAll('.key').forEach(k => {
|
||||
k.addEventListener('click', () => {
|
||||
const v = k.textContent.trim()
|
||||
if (!/^[0-9]$/.test(v)) return
|
||||
if (st.buf.length >= 6) return
|
||||
st.buf += v; answerEl.textContent = st.buf
|
||||
})
|
||||
})
|
||||
document.getElementById('clear').addEventListener('click', () => { st.buf = ''; answerEl.textContent = '' })
|
||||
document.getElementById('backspace').addEventListener('click', () => { st.buf = st.buf.slice(0,-1); answerEl.textContent = st.buf || '' })
|
||||
document.getElementById('submit').addEventListener('click', submit)
|
||||
|
||||
window.addEventListener('keydown', e => {
|
||||
if (!playScreen.classList.contains('hidden')) {
|
||||
if (/^[0-9]$/.test(e.key) && st.buf.length < 6) { st.buf += e.key; answerEl.textContent = st.buf }
|
||||
else if (e.key === 'Backspace') { st.buf = st.buf.slice(0,-1); answerEl.textContent = st.buf || '' }
|
||||
else if (e.key === 'Enter') submit()
|
||||
}
|
||||
})
|
||||
|
||||
function randInt(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min }
|
||||
|
||||
function nextProblem() {
|
||||
const a = st.table || randInt(1, 10)
|
||||
const b = randInt(1, 10)
|
||||
st.current = { a, b, answer: a * b }
|
||||
problemEl.textContent = `${a} × ${b}`
|
||||
feedbackEl.textContent = ''
|
||||
st.buf = ''; answerEl.textContent = ''
|
||||
updateBar()
|
||||
}
|
||||
|
||||
function submit() {
|
||||
if (!st.buf.trim()) return
|
||||
const given = parseInt(st.buf, 10)
|
||||
st.solved++
|
||||
if (given === st.current.answer) {
|
||||
st.score++
|
||||
feedbackEl.textContent = 'Dobrze!'
|
||||
feedbackEl.classList.add('correct')
|
||||
feedbackEl.classList.remove('incorrect')
|
||||
} else {
|
||||
feedbackEl.textContent = `Poprawna odpowiedź: ${st.current.answer}`
|
||||
feedbackEl.classList.add('incorrect')
|
||||
feedbackEl.classList.remove('correct')
|
||||
}
|
||||
feedbackEl.style.opacity = 1;
|
||||
st.buf = ''; answerEl.textContent = ''
|
||||
updateBar()
|
||||
if (st.solved >= st.total) {
|
||||
setTimeout(showSummary, 1200)
|
||||
} else {
|
||||
setTimeout(() => {
|
||||
feedbackEl.style.opacity = 0;
|
||||
setTimeout(nextProblem, 200);
|
||||
}, 1000)
|
||||
}
|
||||
}
|
||||
|
||||
function updateBar() {
|
||||
const pct = st.total > 0 ? Math.round((st.solved / st.total) * 100) : 0
|
||||
if (!progressInner) progressInner = document.getElementById('progress-inner')
|
||||
if (progressInner) progressInner.style.width = pct + '%'
|
||||
progressLabel.textContent = `${st.solved}/${st.total}`
|
||||
// scoreLabel is removed, so we comment this out
|
||||
// scoreLabel.textContent = `✔ ${st.score}`
|
||||
}
|
||||
|
||||
function showSummary() {
|
||||
const pct = st.total > 0 ? Math.round((st.score / st.total) * 100) : 0
|
||||
summaryText.textContent = `Twój wynik: ${st.score} / ${st.total} poprawnie (${pct}%)`
|
||||
show(summaryScreen)
|
||||
}
|
||||
|
||||
function show(screen) {
|
||||
console.log(`Showing screen: ${screen.id}`);
|
||||
[selectScreen, playScreen, summaryScreen].forEach(s => s.classList.add('hidden'))
|
||||
screen.classList.remove('hidden')
|
||||
if (screen === summaryScreen) {
|
||||
selectScreen.classList.add('hidden');
|
||||
playScreen.classList.add('hidden');
|
||||
}
|
||||
}
|
||||
|
||||
// commit SHA
|
||||
document.addEventListener('DOMContentLoaded', async () => {
|
||||
const el = document.getElementById('commit-sha')
|
||||
if (!el) return
|
||||
// Set default table selection
|
||||
const defaultTableBtn = document.querySelector('.table-btn[data-val="0"]');
|
||||
if(defaultTableBtn) {
|
||||
defaultTableBtn.classList.add('active');
|
||||
st.table = 0;
|
||||
}
|
||||
|
||||
let sha = (window.COMMIT_SHA || '').toString().trim()
|
||||
if (!sha) {
|
||||
try {
|
||||
const res = await fetch('/version.sha', { cache: 'no-cache' })
|
||||
if (res.ok) {
|
||||
const txt = await res.text()
|
||||
const first = txt.split(/\r?\n/).find(l => l.trim().length > 0)
|
||||
if (first) sha = first.trim()
|
||||
}
|
||||
} catch (e) {}
|
||||
}
|
||||
if (sha) el.textContent = sha.slice(0, 8)
|
||||
})
|
||||
})()
|
||||
@@ -0,0 +1,17 @@
|
||||
// Back-to-hub button with active-task confirmation
|
||||
(function () {
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const backBtn = document.getElementById('back-to-hub')
|
||||
if (!backBtn) return
|
||||
|
||||
backBtn.addEventListener('click', (e) => {
|
||||
const playScreen = document.getElementById('play-screen')
|
||||
const taskActive = playScreen && !playScreen.classList.contains('hidden')
|
||||
if (taskActive) {
|
||||
e.preventDefault()
|
||||
const ok = confirm('Masz aktywne zadanie. Czy na pewno chcesz wyjść do menu?')
|
||||
if (ok) window.location.href = backBtn.getAttribute('href')
|
||||
}
|
||||
})
|
||||
})
|
||||
})()
|
||||
@@ -0,0 +1 @@
|
||||
const COMMIT_SHA = '-';
|
||||
Reference in New Issue
Block a user