Complete the following code so that at the end of the game, the time taken to complete the puzzle is displayed (all the functions are given) and the a leaderboard is displayed, showing how long it took for different players to complete the puzzle at the given difficulty level. <div id="main-menu" class="w-2/3 mx-auto rounded-xl mt-10 bg-base-300 "> <h1class="text-5xl rounded-xl text-center p-5 bg-primary text-primary-content font-bold">RAILWAYS</h1> <inputtype="text"id="player-name"placeholder="WHO ARE YOU?"class="mt-3 p-4 w-full border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"> <divclass="flex justify-center space-x-4 border p-4 rounded-md"> <labelclass="difficulty-option"> <inputtype="radio"name="difficulty"value="easy"checkedclass="hidden"/> <spanclass="difficulty-button">5 x 5 (Easy)</span> </label> <labelclass="difficulty-option"> <inputtype="radio"name="difficulty"value="hard"class="hidden"/> <spanclass="difficulty-button">7 x 7 (Hard)</span> </label> </div> <divclass="w-2/3 space-y-5 mx-auto my-5"> <buttonid="rules"class="btn btn-info w-full">RULES</button> <buttonid="leaderboard"class="btn btn-secondary w-full">LEADERBOARD</button> <buttonid="start"class="btn btn-primary w-full"disabled>START GAME</button> </div> </div> <div id="leader" class="w-2/3 mx-auto rounded-xl mt-10 bg-base-300 "> <h1class="text-5xl rounded-xl text-center p-5 bg-primary text-primary-content font-bold">RAILWAYS</h1> <p>Game in progress...</p> <buttonid = "backMenBtn"class="w-full mx-auto btn btn-primary m-5">Back to Menu</button> </div> function startGame(){ menuDiv.style.display='none' gameDiv.style.display='block' rulesDiv.style.display='none' ldrDiv.style.display='none' document.querySelector('#name').innerHTML="ROUTE DESIGNER: "+nameInput.value startTime=Date.now(); timerInterval=setInterval(updateTimer, 1000); } function backMenu(){ menuDiv.style.display='block' gameDiv.style.display='none' rulesDiv.style.display='none' ldrDiv.style.display='none' } function updateTimer() { constelapsedTime=Date.now() -startTime; constminutes=Math.floor(elapsedTime/60000); constseconds=Math.floor((elapsedTime%60000) /1000); document.querySelector('#times').innerHTML=`TIME ELAPSED: ${minutes}:${seconds < 10 ? '0' : ''}${seconds}`; } function stopTimer() { clearInterval(timerInterval); }

Complete the following code so that at the end of the game, the time taken to complete the puzzle is displayed (all the functions are given) and the a leaderboard is displayed, showing how long it took for different players to complete the puzzle at the given difficulty level. <div id="main-menu" class="w-2/3 mx-auto rounded-xl mt-10 bg-base-300 "> <h1class="text-5xl rounded-xl text-center p-5 bg-primary text-primary-content font-bold">RAILWAYS</h1> <inputtype="text"id="player-name"placeholder="WHO ARE YOU?"class="mt-3 p-4 w-full border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"> <divclass="flex justify-center space-x-4 border p-4 rounded-md"> <labelclass="difficulty-option"> <inputtype="radio"name="difficulty"value="easy"checkedclass="hidden"/> <spanclass="difficulty-button">5 x 5 (Easy)</span> </label> <labelclass="difficulty-option"> <inputtype="radio"name="difficulty"value="hard"class="hidden"/> <spanclass="difficulty-button">7 x 7 (Hard)</span> </label> </div> <divclass="w-2/3 space-y-5 mx-auto my-5"> <buttonid="rules"class="btn btn-info w-full">RULES</button> <buttonid="leaderboard"class="btn btn-secondary w-full">LEADERBOARD</button> <buttonid="start"class="btn btn-primary w-full"disabled>START GAME</button> </div> </div> <div id="leader" class="w-2/3 mx-auto rounded-xl mt-10 bg-base-300 "> <h1class="text-5xl rounded-xl text-center p-5 bg-primary text-primary-content font-bold">RAILWAYS</h1> <p>Game in progress...</p> <buttonid = "backMenBtn"class="w-full mx-auto btn btn-primary m-5">Back to Menu</button> </div> function startGame(){ menuDiv.style.display='none' gameDiv.style.display='block' rulesDiv.style.display='none' ldrDiv.style.display='none' document.querySelector('#name').innerHTML="ROUTE DESIGNER: "+nameInput.value startTime=Date.now(); timerInterval=setInterval(updateTimer, 1000); } function backMenu(){ menuDiv.style.display='block' gameDiv.style.display='none' rulesDiv.style.display='none' ldrDiv.style.display='none' } function updateTimer() { constelapsedTime=Date.now() -startTime; constminutes=Math.floor(elapsedTime/60000); constseconds=Math.floor((elapsedTime%60000) /1000); document.querySelector('#times').innerHTML=`TIME ELAPSED: ${minutes}:${seconds < 10 ? '0' : ''}${seconds}`; } function stopTimer() { clearInterval(timerInterval); }

Programming with Microsoft Visual Basic 2017

8th Edition

ISBN:9781337102124

Author:Diane Zak

Publisher:Diane Zak

Chapter10: Classes And Objects

Section: Chapter Questions

Problem 5E: In this exercise, you modify the Grade Calculator application from this chapter’s Apply lesson. Use...

See similar textbooks

Related questions

Question

<h1class="text-5xl rounded-xl text-center p-5 bg-primary text-primary-content font-bold">RAILWAYS</h1>

<inputtype="text"id="player-name"placeholder="WHO ARE YOU?"class="mt-3 p-4 w-full border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">

<divclass="flex justify-center space-x-4 border p-4 rounded-md">

<labelclass="difficulty-option">

<inputtype="radio"name="difficulty"value="easy"checkedclass="hidden"/>

<spanclass="difficulty-button">5 x 5 (Easy)</span>

</label>

<labelclass="difficulty-option">

<inputtype="radio"name="difficulty"value="hard"class="hidden"/>

<spanclass="difficulty-button">7 x 7 (Hard)</span>

</label>

</div>

<divclass="w-2/3 space-y-5 mx-auto my-5">

<buttonid="rules"class="btn btn-info w-full">RULES</button>

<buttonid="leaderboard"class="btn btn-secondary w-full">LEADERBOARD</button>

<buttonid="start"class="btn btn-primary w-full"disabled>START GAME</button>

</div>

<h1class="text-5xl rounded-xl text-center p-5 bg-primary text-primary-content font-bold">RAILWAYS</h1>

<p>Game in progress...</p>

</div>

function startGame(){

menuDiv.style.display='none'

gameDiv.style.display='block'

rulesDiv.style.display='none'

ldrDiv.style.display='none'

document.querySelector('#name').innerHTML="ROUTE DESIGNER: "+nameInput.value

startTime=Date.now();

timerInterval=setInterval(updateTimer, 1000);

}

function backMenu(){

menuDiv.style.display='block'

gameDiv.style.display='none'

rulesDiv.style.display='none'

ldrDiv.style.display='none'

}

function updateTimer() {

constelapsedTime=Date.now() -startTime;

constminutes=Math.floor(elapsedTime/60000);

constseconds=Math.floor((elapsedTime%60000) /1000);

document.querySelector('#times').innerHTML=`TIME ELAPSED: ${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;

}

function stopTimer() {

clearInterval(timerInterval);

}

Expert Solution

Step by step

Solved in 2 steps

SEE SOLUTION Check out a sample Q&A here

Knowledge Booster

Learn more about

Need a deep-dive on the concept behind this application? Look no further. Learn more about this topic, computer-science and related others by exploring similar questions and additional content below.