Scribd
Upload
2 views

Memory Game

The document is an HTML code for a Memory Quiz Game that features a quiz with multiple levels and questions. It includes a timer, score tracking, and dynamic background changes based on the current level. The game allows users to answer questions and provides feedback on their answers, with a final score displayed upon completion.

Uploaded by

zc227854548
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
2 views

Memory Game

The document is an HTML code for a Memory Quiz Game that features a quiz with multiple levels and questions. It includes a timer, score tracking, and dynamic background changes based on the current level. The game allows users to answer questions and provides feedback on their answers, with a final score displayed upon completion.

Uploaded by

zc227854548
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 5

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Memory Quiz Game</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
color: white;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
text-align: center;
background-size: cover;
background-position: center;
transition: background 0.5s;
}

.quiz-container {
background: rgba(0, 0, 0, 0.7);
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
max-width: 600px;
width: 90%;
}

.level {
font-size: 1.5rem;
margin-bottom: 10px;
}

.question {
font-size: 1.5rem;
margin-bottom: 20px;
}

.options {
display: flex;
flex-direction: column;
gap: 10px;
}

.option {
background: #1abc9c;
border: none;
border-radius: 5px;
padding: 10px;
color: white;
font-size: 1rem;
cursor: pointer;
transition: background 0.3s;
}

.option:hover {
background: #16a085;
}

.result {
margin-top: 20px;
font-size: 1.2rem;
font-weight: bold;
}

.timer {
font-size: 1.2rem;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="quiz-container">
<div class="level" id="level">Level 1</div>
<div class="question" id="question">Loading question...</div>
<div class="options" id="options"></div>
<div class="timer" id="timer"></div>
<div class="result" id="result"></div>
</div>

<script>
const maxLevels = 100;
let currentLevel = 1;
let currentQuestionIndex = 0;
let score = 0;
let timer;
let timeLeft = 60;

const quizData = Array.from({ length: 100 }, (_, levelIndex) => {


return Array.from({ length: 5 }, (_, questionIndex) => {
return {
question: `Level ${levelIndex + 1}, Question ${questionIndex + 1}: What
is ${(levelIndex + 1) * (questionIndex + 1)} + ${(questionIndex + 2) * (levelIndex
+ 2)}?`,
options: [
`${(levelIndex + 1) * (questionIndex + 1) + (questionIndex + 2) *
(levelIndex + 2)}`,
`${(levelIndex + 1) * (questionIndex + 1) + (questionIndex + 2) *
(levelIndex + 2) + 1}`,
`${(levelIndex + 1) * (questionIndex + 1) + (questionIndex + 2) *
(levelIndex + 2) - 1}`,
`${(levelIndex + 1) * (questionIndex + 1) + (questionIndex + 2) *
(levelIndex + 2) + 2}`
],
answer: `${(levelIndex + 1) * (questionIndex + 1) + (questionIndex + 2) *
(levelIndex + 2)}`
};
});
});

const levelElement = document.getElementById("level");


const questionElement = document.getElementById("question");
const optionsElement = document.getElementById("options");
const resultElement = document.getElementById("result");
const timerElement = document.getElementById("timer");
function generateBackground(level) {
const hue1 = (level * 30) % 360;
const hue2 = (hue1 + 120) % 360;
const hue3 = (hue2 + 120) % 360;
return `linear-gradient(to right, hsl(${hue1}, 70%, 50%), hsl(${hue2}, 70%,
50%), hsl(${hue3}, 70%, 50%))`;
}

function loadQuestion() {
clearInterval(timer);
timeLeft = 60;
timerElement.textContent = `Time left: ${timeLeft}s`;
timer = setInterval(() => {
timeLeft--;
timerElement.textContent = `Time left: ${timeLeft}s`;
if (timeLeft === 0) {
clearInterval(timer);
restartLevel();
}
}, 1000);

const currentQuestion = quizData[currentLevel - 1][currentQuestionIndex];


questionElement.textContent = currentQuestion.question;
optionsElement.innerHTML = "";

currentQuestion.options.forEach(option => {
const button = document.createElement("button");
button.classList.add("option");
button.textContent = option;
button.onclick = () => checkAnswer(option);
optionsElement.appendChild(button);
});
}

function checkAnswer(selectedOption) {
clearInterval(timer);
const currentQuestion = quizData[currentLevel - 1][currentQuestionIndex];

if (selectedOption === currentQuestion.answer) {


score++;
resultElement.textContent = "Correct!";
resultElement.style.color = "#2ecc71";
currentQuestionIndex++;

if (currentQuestionIndex === quizData[currentLevel - 1].length) {


currentLevel++;
currentQuestionIndex = 0;

if (currentLevel > maxLevels) {


showFinalScore();
return;
}

setTimeout(() => {
showLevelCompletion();
}, 1000);
} else {
setTimeout(() => {
resultElement.textContent = "";
loadQuestion();
}, 1500);
}
} else {
resultElement.textContent = `Wrong! The correct answer was: $
{currentQuestion.answer}`;
resultElement.style.color = "#e74c3c";
setTimeout(restartLevel, 3000);
}
}

function restartLevel() {
resultElement.textContent = "Restarting level...";
resultElement.style.color = "#f1c40f";
currentQuestionIndex = 0;
setTimeout(() => {
resultElement.textContent = "";
loadQuestion();
}, 3000);
}
function loadQuestion() {
clearInterval(timer);
timeLeft = 60;
timerElement.textContent = `Time left: ${timeLeft}s`;
timer = setInterval(() => {
timeLeft--;
timerElement.textContent = `Time left: ${timeLeft}s`;
if (timeLeft === 0) {
clearInterval(timer);
restartLevel();
}
}, 1000);

const currentQuestion = quizData[currentLevel - 1][currentQuestionIndex];


questionElement.textContent = currentQuestion.question;
optionsElement.innerHTML = "";

// Shuffle the options array


const shuffledOptions = [...currentQuestion.options].sort(() => Math.random() -
0.5);

shuffledOptions.forEach(option => {
const button = document.createElement("button");
button.classList.add("option");
button.textContent = option;
button.onclick = () => checkAnswer(option);
optionsElement.appendChild(button);
});
}

function showLevelCompletion() {
document.body.style.background = generateBackground(currentLevel);

questionElement.textContent = `Congratulations on completing Level $


{currentLevel - 1}!`;
optionsElement.innerHTML = "";
resultElement.textContent = "Here's a bonus question just for fun:";
resultElement.style.color = "#f39c12";
const bonusQuestion = {
question: "What is the capital of France?",
options: ["Berlin", "Madrid", "Paris", "Rome"],
answer: "Paris"
};

questionElement.textContent = bonusQuestion.question;
bonusQuestion.options.forEach(option => {
const button = document.createElement("button");
button.classList.add("option");
button.textContent = option;
button.onclick = () => {
if (option === bonusQuestion.answer) {
resultElement.textContent = "Correct! Moving to the next level.";
resultElement.style.color = "#2ecc71";
} else {
resultElement.textContent = "Wrong! But don't worry, you'll continue to
the next level.";
resultElement.style.color = "#e74c3c";
}
setTimeout(() => {
levelElement.textContent = `Level ${currentLevel}`;
resultElement.textContent = "";
loadQuestion();
}, 3000);
};
optionsElement.appendChild(button);
});
}

function showFinalScore() {
questionElement.textContent = "Congratulations! You've completed the quiz.";
optionsElement.innerHTML = "";
resultElement.textContent = `Your final score is: ${score}`;
resultElement.style.color = "#3498db";
}

document.body.style.background = generateBackground(currentLevel);
loadQuestion();
</script>
</body>
</html>

You might also like