6e41ea1b2e
All checks were successful
dev - build & deploy naar test / build-and-deploy (push) Successful in 29s
63 lines
3.6 KiB
JavaScript
63 lines
3.6 KiB
JavaScript
/* widget: interactieve getallenlijn */
|
||
function mountNumberline(root, initState){
|
||
const S=Object.assign({min:0,max:20,step:1,value:0,target:10},initState||{});
|
||
root.innerHTML=`
|
||
<div class="nlw">
|
||
<div class="nlw-settings">
|
||
<label><span class="nlw-from-label"></span><input class="nlw-min" type="number" min="-100" max="99"></label>
|
||
<label><span class="nlw-to-label"></span><input class="nlw-max" type="number" min="-99" max="200"></label>
|
||
<label><span class="nlw-step-label"></span><select class="nlw-step"><option>1</option><option>2</option><option>5</option><option>10</option></select></label>
|
||
<button class="tbtn ghost nlw-new" type="button"></button>
|
||
</div>
|
||
<div class="nlw-task"></div>
|
||
<div class="nlw-scroll"><div class="nlw-line"></div></div>
|
||
<div class="nlw-actions">
|
||
<button class="tbtn ghost nlw-minus" type="button">−</button>
|
||
<output class="nlw-value"></output>
|
||
<button class="tbtn ghost nlw-plus" type="button">＋</button>
|
||
<button class="tbtn nlw-check" type="button"></button>
|
||
</div>
|
||
<div class="nlw-feedback" aria-live="polite"></div>
|
||
</div>`;
|
||
const q=s=>root.querySelector(s), minEl=q('.nlw-min'), maxEl=q('.nlw-max'), stepEl=q('.nlw-step'),
|
||
line=q('.nlw-line'), valueEl=q('.nlw-value'), task=q('.nlw-task'), feedback=q('.nlw-feedback');
|
||
minEl.value=S.min; maxEl.value=S.max; stepEl.value=S.step;
|
||
function normalize(){
|
||
let min=Math.max(-100,Math.min(99,+minEl.value||0)); let max=Math.max(-99,Math.min(200,+maxEl.value||20));
|
||
if(max<=min) max=min+1; const step=+stepEl.value||1;
|
||
if((max-min)/step>60) max=min+60*step;
|
||
S.min=min; S.max=max; S.step=step;
|
||
if(S.value<min||S.value>max||(S.value-min)%step!==0) S.value=min;
|
||
if(S.target<min||S.target>max||(S.target-min)%step!==0) S.target=min;
|
||
minEl.value=min; maxEl.value=max; render();
|
||
}
|
||
function render(){
|
||
line.innerHTML="";
|
||
for(let v=S.min;v<=S.max;v+=S.step){
|
||
const b=document.createElement('button'); b.type='button'; b.className='nlw-tick'; b.dataset.v=v;
|
||
const mark=document.createElement('i'), label=document.createElement('span'); label.textContent=v;
|
||
b.append(mark,label); b.classList.toggle('selected',v===S.value);
|
||
b.addEventListener('click',()=>{S.value=v; feedback.textContent=""; render();}); line.appendChild(b);
|
||
}
|
||
valueEl.textContent=S.value; task.textContent=T('numberlineTask').replace('{number}',S.target);
|
||
}
|
||
function newTarget(){
|
||
const count=Math.floor((S.max-S.min)/S.step); S.target=S.min+Math.floor(Math.random()*(count+1))*S.step;
|
||
feedback.textContent=""; render();
|
||
}
|
||
[minEl,maxEl,stepEl].forEach(el=>el.addEventListener('change',normalize));
|
||
q('.nlw-minus').addEventListener('click',()=>{S.value=Math.max(S.min,S.value-S.step);render();});
|
||
q('.nlw-plus').addEventListener('click',()=>{S.value=Math.min(S.max,S.value+S.step);render();});
|
||
q('.nlw-new').addEventListener('click',newTarget);
|
||
q('.nlw-check').addEventListener('click',()=>{
|
||
const ok=S.value===S.target; feedback.textContent=T(ok?'numberlineGood':'numberlineTry');
|
||
feedback.className='nlw-feedback '+(ok?'ok':'bad'); if(ok){sndGood();confetti(root);}else sndBad();
|
||
});
|
||
function labels(){
|
||
q('.nlw-from-label').textContent=T('numberlineFrom'); q('.nlw-to-label').textContent=T('numberlineTo');
|
||
q('.nlw-step-label').textContent=T('numberlineStep'); q('.nlw-new').textContent=T('numberlineNew');
|
||
q('.nlw-check').textContent=T('numberlineCheck'); render();
|
||
}
|
||
document.addEventListener('langchange',labels); labels(); normalize();
|
||
return {getState:()=>({...S})};
|
||
}
|