Fun Interactive Number Guessing Game
About this app
Play an exciting and colorful number guessing game. Test your luck and skills while enjoying the vibrant interface!
Colorful Emoji Quiz App 🎉 Emoji Quiz Challenge! 🎉 Start Quiz Submit Guess Score: 0
Related apps
IPTV M3U8 & EPG Generator Studio | Image to M3U Playlist & Guide
Image to IPTV Converter & M3U Playlist Generator
Image to IPTV Converter & M3U Playlist Generator
Image to M3U Playlist Converter | IPTV & Media Stream Generator
Roulette Row Predictor Pro - Live Pattern & Trend Stats Analyzer
Video to Repeated Sequence Generator - Rhythm & Glitch Loop Maker
LoopCraft - Video to Repeated Sequence Converter
LoopMatrix - Video Sequence Repeater & Stutter Maker
MuffleFX - Video & Audio Low-Pass Filter Studio
Seeding Rate Calculator
Irrigation Set Time Calculator
Fertilizer Nutrient Units Calculator
Put this on your site
Source
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Colorful Emoji Quiz App</title>
<meta name="description" content="Test your knowledge with this fun emoji quiz app! Guess the words represented by emojis and challenge your friends!">
<meta name="keywords" content="emoji quiz, fun quiz app, interactive quiz, colorful game, trivia game">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" crossorigin="anonymous"></script>
<style>
body {
background: linear-gradient(135deg, #ff7e5f, #feb47b);
color: #ffffff;
font-family: 'Patrick Hand', cursive;
}
#main-container {
text-align: center;
padding: 40px;
border-radius: 15px;
background: rgba(0, 0, 0, 0.7);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
}
button {
background-color: #28a745;
color: white;
border: none;
border-radius: 5px;
padding: 10px;
margin-top: 20px;
transition: background-color 0.3s;
}
button:hover {
background-color: #218838;
}
.hidden {
display: none;
}
#emojiDisplay {
font-size: 50px;
margin: 20px 0;
}
</style>
<script type="text/javascript">
try {
const emojis = [
{ emoji: "🐶", answer: "dog" },
{ emoji: "🍕", answer: "pizza" },
{ emoji: "🚗", answer: "car" },
{ emoji: "🍎", answer: "apple" },
{ emoji: "🏠", answer: "house" }
];
let currentEmoji;
let score = 0;
function newQuestion() {
const randomIndex = Math.floor(Math.random() * emojis.length);
currentEmoji = emojis[randomIndex];
$("#emojiDisplay").text(currentEmoji.emoji);
$("#guessInput").val("");
$("#message").text("");
}
function checkAnswer() {
const userAnswer = $("#guessInput").val().toLowerCase();
if (userAnswer === currentEmoji.answer) {
score++;
$("#message").text("Correct! 🎉");
} else {
$("#message").text("Oops! The correct answer was: " + currentEmoji.answer);
}
$("#score").text("Score: " + score);
newQuestion();
}
$(document).ready(function() {
$("#startQuiz").on("click", function() {
score = 0;
$("#score").text("Score: 0");
$("#quizArea").removeClass("hidden").hide().fadeIn();
newQuestion();
});
$("#submitGuess").on("click", checkAnswer);
});
} catch (error) {
throw error;
}
</script>
</head>
<body>
<div id="main-container" class="container">
<h1>🎉 Emoji Quiz Challenge! 🎉</h1>
<button id="startQuiz">Start Quiz</button>
<div id="quizArea" class="hidden">
<div id="emojiDisplay"></div>
<input type="text" id="guessInput" placeholder="Your answer...">
<button id="submitGuess">Submit Guess</button>
<p id="score">Score: 0</p>
<p id="message"></p>
</div>
</div>
</body>
</html>
NEW APPS
These are apps made by the community!