tryouts.min.js

const status=document.querySelector(".status"),question=document.querySelector(".question"),loadingBar=document.querySelector(".loading-bar"),mainTime=document.querySelector(".main-time"),deciseconds=document.querySelector(".deciseconds"),form=document.querySelector("form"),confirmations=document.querySelector(".confirmations"),userinfo=document.querySelector(".userinfo"),answer=document.querySelector("input"),skip=document.querySelector(".skip"),questions=["Who was the first president of the United States?","Who painted the Mona Lisa?","What organelle is considered the powerhouse of the cell?"];form.addEventListener("submit",(e=>{e.preventDefault()}));let skipping=!1;async function startTryouts(){status.innerHTML="starting soon...",updateTimer(3e4,runTryouts)}async function runTryouts(){hideSkip(),await sleep(200);for(var e=0;e<questions.length;e++)status.innerHTML=`in progress (${e+1}/3)`,await askQuestion(questions[e]);for(;questions.length>0;){questions.shift()}questions.forEach((async e=>{await askQuestion(e)})),status.innerHTML="finished. thanks for trying out!"}function sleep(e){return new Promise((n=>{setTimeout(n,e)}))}async function updateTimer(e,n,t=!1,s=Date.now(),i=s){if(skipping)return skipping=!1,n();const o=Math.max(e-(i-s),0);var a=Math.floor(o/1e3/60),r=Math.floor(o/1e3)%60;const u=Math.floor(o%1e3/100);r<10&&(r="0"+r),a<10&&(a="0"+a),mainTime.innerHTML=`${a}:${r}`,deciseconds.innerHTML=`.${u}`,widthPercent=t?Math.min(100-(o-100)/e*100,100):Math.max((o-100)/e*100,0);const c=widthPercent+"%";if(loadingBar.style.width=c,0===o)return n();const d=Date.now()-i;setTimeout(updateTimer,100-d,e,n,t,s,i+100)}async function askQuestion(e){loadingBar.style.backgroundColor="#555555",question.innerHTML='<span class="noquestion"><em>question incoming</em></span>',updateTimer(3e3,(function(){}),!0),await sleep(3200),question.innerHTML="&#8203",loadingBar.style.backgroundColor="#1abd40",enableAnswer(),await sleep(100);const n=e.split(" ");for(;n.length>0;){const e=n.shift();question.innerHTML+=`<span>${e} </span>`,await sleep(300)}updateTimer(8e3,(function(){})),await sleep(8e3),question.innerHTML='<span class="noquestion"><em>question</em></span>',showConfirmation({answer:answer.value,question:e}),disableAnswer(),await sleep(1e3)}function enableAnswer(){answer.disabled=!1,answer.focus()}function disableAnswer(){answer.disabled=!0,answer.value=""}function showConfirmation(e){var n=document.createElement("P"),t=document.createElement("SPAN");t.classList.add("answer");var s=document.createElement("SPAN");e.answer||(e.answer="[no answer]"),t.textContent=e.answer,s.innerHTML=` to <em>${e.question}</em>`,n.innerHTML="Answered ",n.append(t),n.append(s),confirmations.prepend(n)}function skipTimer(){updateTimer(0,(function(){})),skipping=!0}function hideSkip(){skip.disabled=!0,skip.style.opacity=0,skip.style.visibility="hidden"}startTryouts();