Hello! I’m needing help creating a jeopardy project only using html/css/javascript , I need it to be 4 pages long (landing page, first round page, second round page, final round page.) I want the theme for this project to be marvel and dc themed I will even give you a format that way you can work off of it. Here is the rubric:The game of Jeopardy consists of several players that compete to earn points by selecting questions of varying points values from a board. The board is a 6 X 6 square with each column representing a category, **and** the first row containing the titles of each category, **and** every row after being increasingly difficult questions (with correspondingly higher point values) for their categoriesYou will be given placeholder data for this project in the form of an array of objects.## Stories### Ready, Set, Go!- **Given** the players are on the landing page- **When** one player clicks the ‘Start Game’ button- **Then** the players are redirected to the Round 1 page### Start the Game- **Given** the players have been redirected to the Round 1 page- **When** the page loads- **Then** there is a notification that it is player 1’s turn to choose – **And** the “Guess”, “Pass”, and “Round 2” buttons are disabled### Select a Question- **Given** an empty board, and player 1 is currently up- **When** player 1 selects a card- **Then** the score on the card is replaced by a question – **And** the “Submit Answer” button is enabled – **And** the “Pass Question” button is enabled### Pass a Question- **Given** a question has been chosen- **When** the user clicks on the “Pass Question” button- **Then** player 2 gets an opportunity to answer the question – **And** the notification area changes to player 2’s turn### Answer a Question Correctly- **Given** a question has been chosen- **When** the player submits an answer – **And** the answer is correct- **Then** the game awards the player the amount of points that were on the card – **And** the card is blanked out – **And** the current player does not change### Answer a Question Incorrectly- **Given** a question has been chosen- **When** the player submits an answer – **And** the answer is incorrect- **Then** the game subtracts the point total from the player’s score – **And** the other player gets a chance to answer the question – **And** if no one guesses correctly the original player gets to choose a new question### Score Board- **Given** the game has been started- **When** the score changes- **Then** the game should display each player’s current score on the page### Only Allow One Question- **Given** a card has already been selected- **When** the player tries to pick a new card- **Then** the question does not change – **And** the game alerts the player that they must answer, or pass the question### End Round 1- **Given** that the score of one user reaches 15,000 points. – **Or** the board has been cleared- **Then** the game alerts the players to move on to Round 2. – **And** the “Round 2” button becomes enabled – **And** the “Round 2” button navigates to the Round 2 page.*Hint: You can use query parameters in the URL to pass score information between pages*### Round 2- **Given** the players are on the Round 2 Page- **Then** the players scores are the same as they were at the end of Round 1. – **And** the game logic behaves as Round 1. – **And** the “Final Round” button is disabled### End Round 2- **Given** that the score of one user reaches 30,000 points. – **Or** the board has been cleared- **Then** the game alerts the players to move on to the Final Round. – **And** the “Final Round” button becomes enabled – **And** the “Final Round” button navigates to the Final Round page.### Final Round- **Given** the players are on the Final Round page- **Then** they should be presented with a category – **And** prompted to make a wager up to their maximum point total### Let’s Make a Wager!- **Given** we’re on the Final Round page- **When** all players have made a wager- **Then** the question is revealed – **And** all players get a chance to answer the question before the answer is revealed### Winning the Game- **Given** all players have answered the final question- **When** the last answer is submitted- **Then** the amount wagered is added or subtracted from the total score – **And** the game should notify the users who won based on the final score## Icebox### Say my Name!- **Given** the the user is on the landing page- **When** the user clicks “Start Game”- **Then** the game should allow the user(s) to set their player names – **And** should use those names throughout the game### Random Questions- **Given** a game has been started- **When** the board is generated- **Then** the board has questions different from the placeholder data### Daily Double- **Given** a game is started- **When** the board is generated- **Then** two random questions should be set as the “Daily Double” and are worth twice the amount of points on their cards### Try to Make Fetch Happen- **Given** a game is started- **When** the board is generated- **Then** the board has questions fetched from an external API///////
Feel free to use my code as a format if not you can do it on your own thanks! and please tell me what independencies to install, remember only use CSS HTML JS no python or c++ or others.
//////////
index.js: import placeholderQuestions from ‘./placeholder-questions.js’;console.log({ placeholderQuestions }); //assisted by click events are set up to capture when user click a score cell in <td>//const and variablesconst SCORE_INCREMENT = 200let currentPlayer = 1;let player1Score = 0;let player2Score = 0;let currentQuestion = null;let clickedCell = null;let currentScore = 0;let gameState = { player1Wager: 0, player2Wager: 0};// Conditon to Returns true if at least one player has reached 15,000 points or morefunction roundHasWinner() { return player1Score >= 15000 || player2Score >= 15000;}//DOM Manipulation: enabling and disabling buttons// Check if round should end: either all cells answered or a player reached 15,000.function checkRoundEnd() { const allCells = document.querySelectorAll(‘td’); const answeredCells = document.querySelectorAll(‘td.answered’); const boardCleared = answeredCells.length === allCells.length; const nextRoundBtn = document.getElementById(“next-round-btn”); if (nextRoundBtn) { nextRoundBtn.disabled = !(boardCleared || roundHasWinner()); // Only enable when board is clear }}//DOM Loaded Event, waits for the page to be ready before doing anythingdocument.addEventListener(“DOMContentLoaded”, () => { const urlParams = new URLSearchParams(window.location.search); if (urlParams.has(“player1Score”) && urlParams.has(“player2Score”)) { player1Score = parseInt(urlParams.get(“player1Score”)); player2Score = parseInt(urlParams.get(“player2Score”)); } // Display the scores for the current round document.getElementById(‘player1-score’).textContent = player1Score; document.getElementById(‘player2-score’).textContent = player2Score; const nextRoundBtn = document.getElementById(“next-round-btn”); if (nextRoundBtn) { nextRoundBtn.addEventListener(“click”, () => { const allCells = document.querySelectorAll(‘td’); const answeredCells = document.querySelectorAll(‘td.answered’); const boardCleared = answeredCells.length === allCells.length; if (roundHasWinner() || boardCleared) { nextRound(); } else { alert(“A player must earn 15,000 points or the board must be cleared in order to move to Round 2.”); return; } }); } if (document.body.classList.contains(“final-round-page”)) { initializeFinalJeopardy(); } else { initializeRegularJeopardy(); }});//Setting up Regular Jeopardy Modefunction initializeRegularJeopardy() { const cells = document.querySelectorAll(‘td’); cells.forEach(cell => { //handles clicking a question score (cell), and retrieving the corresponding score and category cell.addEventListener(‘click’, (event) => { //event listener: waiting to click on a question on the gameboard, when clicked it reads the score and category if (cell.classList.contains(‘answered’)) return; //if already answered, do nothing const scoreAttr = cell.getAttribute(‘data-score’); //DOM Manipulation const categoryAttr = cell.getAttribute(‘data-category’); //get the category from the clicked html(s) <td> if (!scoreAttr || !categoryAttr) { console.error(“Error: Missing data-score or data-category on cell”, cell); return; } clickedCell = cell; currentScore = parseInt(scoreAttr); //store current score const category = categoryAttr; //store category console.log(`Clicked on category: ${category} with score: ${currentScore}`); cell.style.backgroundColor = “#b3e5fc”; //highlight the clicked score displayQuestion(category); //call the displayQuestion function to SHOW the question }); }); const submitButton = document.getElementById(“submit-button”); const passButton = document.getElementById(“pass-button”);// to help test for identifying testing errors if (submitButton && passButton) { submitButton.addEventListener(“click”, submitAnswer); passButton.addEventListener(“click”, passTurn); } else { console.error(“Error: Submit or Pass button not found!”); }}function initializeFinalJeopardy() { // Set final category if needed document.getElementById(“final-category”).textContent = “Final”; // Update displayed scores (they are already set in DOMContentLoaded) document.getElementById(“player1-score”).textContent = player1Score; document.getElementById(“player2-score”).textContent = player2Score; // Wager button event listener document.getElementById(“wager-btn”).addEventListener(“click”, () => { // Use the correct input IDs gameState.player1Wager = parseInt(document.getElementById(“wager-player1”).value) || 0; gameState.player2Wager = parseInt(document.getElementById(“wager-player2”).value) || 0; // Validate wagers: they cannot exceed current points and must be at least 1 if (gameState.player1Wager < 1 || gameState.player1Wager > player1Score) { alert(“Player 1 wager is invalid!”); return; } if (gameState.player2Wager < 1 || gameState.player2Wager > player2Score) { alert(“Player 2 wager is invalid!”); return; } // Disable wager inputs and button document.getElementById(“wager-player1”).disabled = true; document.getElementById(“wager-player2”).disabled = true; document.getElementById(“wager-btn”).disabled = true; // Show the final question section document.getElementById(“question-section”).style.display = “block”; // Enable final answer textareas and the submit answer button document.getElementById(“final-answer-player1”).disabled = false; document.getElementById(“final-answer-player2”).disabled = false; document.getElementById(“submit-btn”).disabled = false; }); // Final answer submission event listener document.getElementById(“submit-btn”).addEventListener(“click”, () => { const answer1 = document.getElementById(“final-answer-player1”).value.trim().toLowerCase(); const answer2 = document.getElementById(“final-answer-player2”).value.trim().toLowerCase(); const correctAnswer = “burlington code academy”; if (answer1 === correctAnswer) { player1Score += gameState.player1Wager; } else { player1Score -= gameState.player1Wager; } if (answer2 === correctAnswer) { player2Score += gameState.player2Wager; } else { player2Score -= gameState.player2Wager; } // Update the score display document.getElementById(“player1-score”).textContent = player1Score; document.getElementById(“player2-score”).textContent = player2Score; determineWinner(); });}//Array methods used: filter and index to find questionfunction displayQuestion(category) { //filtered search category from placeholder-question.js const filteredQuestions = placeholderQuestions.filter(q => q.category === category); if (filteredQuestions.length === 0) { console.error(`No questions found for category: ${category}`); } const index = (currentScore / SCORE_INCREMENT) – 1; //calculate the index for the question based on score if (index < 0 || index >= filteredQuestions.length) { console.error(`Invalid index ${index} for category: ${category}`); currentQuestion = null; } else { currentQuestion = filteredQuestions[index]; //assigning the question to currentQuestion } const questionContainer = document.getElementById(‘question-text’); questionContainer.textContent = currentQuestion ? currentQuestion.question : “No question found!”;}//submitting the typed answer if it matches placeholder-questions.jsfunction submitAnswer() { const answerInput = document.getElementById(‘answer-input’); const playerAnswer = answerInput.value.trim().toLowerCase(); if (!currentQuestion || !clickedCell) { alert(“Please select a question first!”); return; } const correctAnswer = currentQuestion.answer ? currentQuestion.answer.trim().toLowerCase() : null; if (playerAnswer === correctAnswer) { alert(“Correct!”); if (currentPlayer === 1) { player1Score += currentScore; //update P1 } else { player2Score += currentScore; //update p2 } document.getElementById(‘player1-score’).textContent = player1Score; document.getElementById(‘player2-score’).textContent = player2Score; clickedCell.classList.add(‘answered’); clickedCell.style.backgroundColor = “rgb(116, 207, 237)”; //this color shows players the score has been answered, can no longer click again } else { alert(“Incorrect! Subtracting points.”); //takes out points according to the score clicked. if (currentPlayer === 1) { player1Score -= currentScore; } else { player2Score -= currentScore; } document.getElementById(‘player1-score’).textContent = player1Score; document.getElementById(‘player2-score’).textContent = player2Score; clickedCell.style.backgroundColor = “”; } answerInput.value=””; currentPlayer = currentPlayer === 1 ? 2 : 1; document.getElementById(‘turn-notification’).textContent = `It’s Player ${currentPlayer}’s turn`; checkRoundEnd();}//passing the turn featuring Condition and Alertfunction passTurn() { currentPlayer = currentPlayer === 1 ? 2 : 1; //switches between player 1 or 2. document.getElementById(‘turn-notification’).textContent = `It’s Player ${currentPlayer}’s turn`; alert(“You passed the turn!”); //pop up window message checkRoundEnd();}//moving to the next roundfunction nextRound() { const url = new URL(window.location.href); //DOM Manipulation if (!window.location.pathname.includes(“round-2.html”)) { //changes to a new page alert(“You have now cleared the board for Round 1. Moving onto Round 2!”); url.pathname = “round-2.html”; } else { alert(“It is time to move onto Final Jeopardy! (A Player has either scored 15,000 and above or the game board has been all cleared”); url.pathname = “final-jeopardy.html”; } url.searchParams.set(“player1Score”, player1Score); url.searchParams.set(“player2Score”, player2Score); window.location.href = url.toString();}//Determining the winner. function determineWinner() { if (player1Score > player2Score) { alert(`Player 1 wins with ${player1Score} points!`); } else if (player2Score > player1Score) { alert(`Player 2 wins with ${player2Score} points!`); } else { alert(“It’s a tie!”); }}
///////
placeholder-questions.js: (has nothing in here so please implement them.)
///////
thank you! please to the best of your ability make it look nice thank you! remember to follow the wireframe i provided aswell as i gave you the layout of the folders aswell! thank you! make sure to follow the wireframe!
