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
We take content rights seriously. If you suspect this is your content, claim it here.
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
We take content rights seriously. If you suspect this is your content, claim it here.
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