javascript带对错音效的趣味答题评测

使用方法

const SetQtyOfQuestions = 10;
const highScoresToShow = 8;
const pointsPerCorrectAnswerEasy = 1; 
const pointsPerCorrectAnswerHard = 2; 
const pointsPerCorrectAnswerMedium = 1.5; 
const questionsToFetchMultiplier = 3; 
const qtyOfQuestionsToFetch = (SetQtyOfQuestions * questionsToFetchMultiplier);  


const answers = Array.from(document.getElementsByClassName("answers-text-jsRef"));
const answerContainer1 = document.getElementById("answer-container-1-jsRef");
const answerContainer2 = document.getElementById("answer-container-2-jsRef");
const answerContainer3 = document.getElementById("answer-container-3-jsRef");
const answerContainer4 = document.getElementById("answer-container-4-jsRef");
const continuePlayingButton = document.querySelector("#btn-continue-playing-jsRef");
const endGameHighScoresList = document.querySelector(".endGameHighScoresList-jsRef");
const exitGame = document.getElementById("btn-exit-game-jsRef");
const exitQuizContainer = document.querySelector("#exit-quiz-container-jsRef");
const highScoresContainer = document.querySelector("#high-score-container-jsRef");
const highScoresList = document.querySelector(".highScoresList-jsRef");
const homeContainer = document.querySelector("#home-container-jsRef");
const homeScreenButton = document.querySelector("#btn-view-home-screen-jsRef");
const loadingSpinner = document.querySelector(".loadingSpinner-jsRef");
const muteButton = document.getElementById("btn-mute-jsRef");
const playButton = document.querySelector("#btn-play-game-jsRef");
const playerFinalScore = document.getElementById("playerFinalScore-jsRef");
const playername = document.getElementById("playername-jsRef");
const progressBarFull = document.querySelector("#progressBarFull-jsRef");
const progressText = document.getElementById("progressText-jsRef");
const question = document.getElementById("question-jsRef");
const quizContainer = document.querySelector("#quiz-container-jsRef");
const returnHomeScreenButton = document.querySelector("#btn-return-to-home-screen-jsRef");
const saveHighScore = document.querySelector("#btn-save-score-jsRef");
const saveScoreBtn = document.getElementById("btn-save-score-jsRef");
const scoreText = document.querySelector("#score-jsRef");
const showExitGameOptions = document.getElementById("exit-quiz-options-jsRef");
const soundCorrect = new Audio("assets/sounds/sound-correct.mp3");
const soundIncorrect = new Audio("assets/sounds/sound-incorrect.mp3");
const unMuteButton = document.getElementById("btn-unmute-jsRef");
const userFinalScoreContainer = document.querySelector("#user-final-score-container-jsRef");
const viewHighScoresButton = document.querySelector("#btn-view-high-scores-jsRef");
let acceptingAnswers = false;
let actualAnswer = answerContainer1;
let availableQuestions = [];
let newQuestion = {};
let getNewQuestion;
let highScores = [];
let incrementScore;
let level = document.getElementById("selectLevelRef").value;
let pointsPerCorrectAnswer = pointsPerCorrectAnswerEasy; //* default value for easy -
let questionCounter = 0;
let questions = [];
let score = 0;
let quizUrl = `https://opentdb.com/api.php?amount=${qtyOfQuestionsToFetch}&category=11&difficulty=${level}&type=multiple`;
soundCorrect.volume = 0.4;
soundIncorrect.volume = 0.4;


//* event listeners
continuePlayingButton.addEventListener("click", closeExitOverlayScreen);
exitGame.addEventListener("click", returnToHomeScreen);
homeScreenButton.addEventListener("click", returnToHomeScreen);
muteButton.addEventListener("click", sounds);
playButton.addEventListener("click", startQuiz);
returnHomeScreenButton.addEventListener("click", returnToHomeScreen);
saveHighScore.addEventListener("click", saveTheHighScore);
showExitGameOptions.addEventListener("click", showExitQuizContainer);
unMuteButton.addEventListener("click", sounds);
playername.addEventListener("keyup", () => {
	saveScoreBtn.disabled = !playername.value;
});
viewHighScoresButton.addEventListener("click", showHighScoresScreen);


/** 
 * retrieves and updates the session storage 
 * altering the key(sounds)from mute to play
 */
function sounds() {
	if (sessionStorage.getItem("sounds") == undefined) {
		sessionStorage.setItem("sounds", "mute");
	} else if (sessionStorage.getItem("sounds") == "mute") {
		sessionStorage.setItem("sounds", "play");
	} else {
		sessionStorage.setItem("sounds", "mute");
	}
	sfxMuteOrPlay();
}


/** 
 * alternates the SFX button 
 * and mutes/plays the SFX accordingly
 */
function sfxMuteOrPlay() {
	if (sessionStorage.getItem("sounds") == "mute") {
		soundCorrect.muted = true;
		soundIncorrect.muted = true;
		muteButton.classList.add("hidden");
		unMuteButton.classList.remove("hidden");
	} else {
		soundCorrect.muted = false;
		soundIncorrect.muted = false;
		unMuteButton.classList.add("hidden");
		muteButton.classList.remove("hidden");
	}
}


/**
 * Adds the points information to the home screen. 
 */
function addPointsInformationToTheHomePage() {
	let pointsInformation = document.getElementById("points-information");
	let pointsInformationText = `简单 - 每题${pointsPerCorrectAnswerEasy} 分<br>
								中等 - 每题${pointsPerCorrectAnswerMedium} 分<br>
								困难 - 每题${pointsPerCorrectAnswerHard} 分`;
	pointsInformation.innerHTML = pointsInformationText;
}
addPointsInformationToTheHomePage();



function showQuizContainer() {
	homeContainer.classList.add("hidden");
	quizContainer.classList.remove("hidden");
	muteButton.classList.remove("hidden");
}



function returnToHomeScreen() {
	quizContainer.classList.add("hidden");
	userFinalScoreContainer.classList.add("hidden");
	highScoresContainer.classList.add("hidden");
	muteButton.classList.add("hidden");
	unMuteButton.classList.add("hidden");
	exitQuizContainer.classList.add("hidden");
	homeContainer.classList.remove("hidden");
}



function showExitQuizContainer() {
	exitQuizContainer.classList.remove("hidden");
}



function closeExitOverlayScreen() {
	exitQuizContainer.classList.add("hidden");
}



window.onload = function () {
	if (sessionStorage.getItem("hasSampleScoresBeenAddedBefore") == null) {
		/** this is to add some sample high scores to local storage */
		let letsAddSomeSampleHighScores = [{
				"score": (Math.floor(Math.random() * SetQtyOfQuestions) + 1) * pointsPerCorrectAnswerHard,
				"name": "Leni"
			},
			{
				"score": (Math.floor(Math.random() * SetQtyOfQuestions) + 1) * pointsPerCorrectAnswerHard,
				"name": "Bong Bong"
			},

			{
				"score": (Math.floor(Math.random() * SetQtyOfQuestions) + 1) * pointsPerCorrectAnswerHard,
				"name": "Zac"
			},
			{
				"score": (Math.floor(Math.random() * SetQtyOfQuestions) + 1) * pointsPerCorrectAnswerMedium,
				"name": "Natsu"
			},
			{
				"score": (Math.floor(Math.random() * SetQtyOfQuestions) + 1) * pointsPerCorrectAnswerMedium,
				"name": "Naruto"
			},
			{
				"score": (Math.floor(Math.random() * SetQtyOfQuestions) + 1) * pointsPerCorrectAnswerMedium,
				"name": "Ash"
			},
			{
				"score": (Math.floor(Math.random() * SetQtyOfQuestions) + 1) * pointsPerCorrectAnswerMedium,
				"name": "Senku"
			},
			{
				"score": (Math.floor(Math.random() * SetQtyOfQuestions) + 1) * pointsPerCorrectAnswerMedium,
				"name": "Kyotaka"
			},
			{
				"score": (Math.floor(Math.random() * SetQtyOfQuestions) + 1) * pointsPerCorrectAnswerEasy,
				"name": "Kei"
			},
			{
				"score": (Math.floor(Math.random() * SetQtyOfQuestions) + 1) * pointsPerCorrectAnswerEasy,
				"name": "Doreimon"
			},
			{
				"score": (Math.floor(Math.random() * SetQtyOfQuestions) + 1) * pointsPerCorrectAnswerEasy,
				"name": "Nobita"
			}
		];
		letsAddSomeSampleHighScores.sort((a, b) => b.score - a.score);
		letsAddSomeSampleHighScores.splice(highScoresToShow);
		sessionStorage.setItem("highScores", JSON.stringify(letsAddSomeSampleHighScores));
		sessionStorage.setItem("hasSampleScoresBeenAddedBefore", true);
		highScoresRetrieveAndSort();
	}
};



function hideSubmitButtonIfLowestScore() {
	let highScoresNumbers = 0;
	let lowestHighScoresNumber = 0;
	highScoresNumbers = JSON.parse(sessionStorage.getItem("highScores")).map(function (i) {
		return i.score;
	});
	highScoresNumbers.sort((a, b) => a - b);
	highScoresNumbers.splice(1);
	lowestHighScoresNumber = highScoresNumbers.toString();
	if (score < lowestHighScoresNumber) {
		saveHighScore.classList.add("hidden");
		playername.classList.add("hidden");
	}
}



function startQuiz() {
	scoreText.innerText = 0;
	score = 0;
	playerFinalScore.innerText = `你得到 ${score} 分`;
	progressBarFull.classList.remove("progress-bar-rounded");
	questionCounter = 0;
	setTimeout(() => {
		showQuizContainer();
		sfxMuteOrPlay();
		availableQuestions = [...questions];
		getNewQuestion();
		loadingSpinner.classList.add("hidden");
	}, 500);
}



function pointsPerQuestion() {
	if (level == "hard") {
		pointsPerCorrectAnswer = pointsPerCorrectAnswerHard;
	} else if (level == "medium") {
		pointsPerCorrectAnswer = pointsPerCorrectAnswerMedium;
	} else {
		pointsPerCorrectAnswer = pointsPerCorrectAnswerEasy;
	}
}



function highScoresRetrieveAndSort() {
	highScores = JSON.parse(sessionStorage.getItem("highScores")) || [];
	highScores.sort((a, b) => {
		return b.score - a.score;
	});
}



function fetchTheQuestions() {

	fetch(quizUrl)
		.then((res) => {
			return res.json();
		})
		.then((loadedQuestions) => {
			questions = loadedQuestions.results.map((loadedQuestion) => {
				const formattedQuestion = {
					question: loadedQuestion.question,
				};
				const availableAnswers = [...loadedQuestion.incorrect_answers];
				formattedQuestion.CorrectAnswer = Math.floor(Math.random() * 4) + 1;
				availableAnswers.splice(
					formattedQuestion.CorrectAnswer - 1,
					0,
					loadedQuestion.correct_answer
				);

				availableAnswers.forEach((answers, index) => {
					formattedQuestion["answers" + (index + 1)] = answers;
				});

				return formattedQuestion;
			});
		});
}



function updateQuizLevel() {
	level = document.getElementById("s